github/tank-front
4
0
Fork 0
mirror of https://github.com/eyebluecn/tank-front synced 2024-04-21 12:31:55 +00:00
Code Issues Releases Wiki Activity

use velocity-react instead of cssTransitionGroup and velocity-animate

Browse Source
This commit is contained in:
Simba
2020-06-17 09:28:19 +08:00
parent 1fa200e0fd
commit 422f716d36
3 changed files with 93 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -1
View File
@@ -29,7 +29,8 @@
"react-transition-group": "^4.4.1",
"semver": "6.3.0",
"ts-pnp": "1.1.6",
"velocity-animate": "^1.5.2"
"velocity-animate": "^1.5.2",
"velocity-react": "^1.4.3"
},
"scripts": {
"start": "node scripts/start.js",
src/pages/matter/widget/MatterPanel.tsx
+86 -86
View File
@@ -1,5 +1,6 @@
import React from "react";
import copy from "copy-to-clipboard";
import VelocityReact from 'velocity-react';
import Matter from "../../../common/model/matter/Matter";
import TankComponent from "../../../common/component/TankComponent";
import Director from "./Director";
@@ -204,13 +205,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
};
toggleHandles = () => {
this.transitionStatus = !this.transitionStatus;
if (this.transitionStatus) this.showMore = true;
this.updateUI();
};
onExited = () => {
this.showMore = false;
this.showMore = !this.showMore;
this.updateUI();
};
@@ -342,90 +337,95 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
</div>
</div>
<Expanding inStatus={this.transitionStatus} onExited={this.onExited}>
{this.showMore ? (
<div className="visible-mobile more-panel">
<div className="cell-btn navy">
<span>{DateUtil.simpleDateHourMinute(matter.updateTime)}</span>
<span className="matter-size">
<VelocityReact.VelocityTransitionGroup enter={{animation: "slideDown"}} leave={{animation: "slideUp"}}>
{this.showMore ? (
<div>
<div className="visible-mobile more-panel">
<div className="cell-btn navy">
<span>{DateUtil.simpleDateHourMinute(matter.updateTime)}</span>
<span className="matter-size">
{StringUtil.humanFileSize(matter.size)}
</span>
</div>
</div>
{!matter.dir && matter.privacy && (
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
}
>
<UnlockFilled className="btn-action mr5" />
设置为公有文件
{!matter.dir && matter.privacy && (
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
}
>
<UnlockFilled className="btn-action mr5" />
设置为公有文件
</div>
)}
{!matter.dir && !matter.privacy && (
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
}
>
<LockFilled className="btn-action mr5" />
设置为私有文件
</div>
)}
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(
Sun.navigateTo("/matter/detail/" + matter.uuid)
)
}
>
<InfoCircleOutlined className="btn-action mr5" />
文件详情
</div>
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.prepareRename())
}
>
<EditOutlined className="btn-action mr5" />
重命名
</div>
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.clipboard())
}
>
<LinkOutlined className="btn-action mr5" />
复制下载链接
</div>
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(matter.download())
}
>
<DownloadOutlined className="btn-action mr5" />
下载
</div>
<div
className="cell-btn red"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
}
>
<DeleteOutlined className="btn-action mr5" />
删除
</div>
</div>
)}
</div>
) : undefined}
</VelocityReact.VelocityTransitionGroup>
{!matter.dir && !matter.privacy && (
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
}
>
<LockFilled className="btn-action mr5" />
设置为私有文件
</div>
)}
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(
Sun.navigateTo("/matter/detail/" + matter.uuid)
)
}
>
<InfoCircleOutlined className="btn-action mr5" />
文件详情
</div>
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.prepareRename())
}
>
<EditOutlined className="btn-action mr5" />
重命名
</div>
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.clipboard())
}
>
<LinkOutlined className="btn-action mr5" />
复制下载链接
</div>
<div
className="cell-btn navy"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(matter.download())
}
>
<DownloadOutlined className="btn-action mr5" />
下载
</div>
<div
className="cell-btn red"
onClick={(e) =>
SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
}
>
<DeleteOutlined className="btn-action mr5" />
删除
</div>
</div>
) : null}
</Expanding>
</div>
);
}
src/react-app-env.d.ts
Vendored
+5
View File
@@ -69,3 +69,8 @@ declare module 'velocity-animate' {
import Velocity from 'velocity-animate';
export default Velocity;
}
declare module 'velocity-react' {
import VelocityReact from 'velocity-react';
export default VelocityReact;
}