mobile matter detail cache handles expanding

package.json

@@ -26,10 +26,8 @@
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-transition-group": "^4.4.1",
     "semver": "6.3.0",
     "ts-pnp": "1.1.6",
-    "velocity-animate": "^1.5.2",
     "velocity-react": "^1.4.3"
   },
   "scripts": {

src/pages/matter/widget/MatterPanel.less

@@ -109,7 +109,11 @@
 
   .more-panel {
     border-top: 1px solid #eee;
-    padding-left: 35px;
+    padding-left: 32px;
+
+    .text {
+      margin-left: 5px;
+    }
 
     .matter-size {
       margin-left: 15px;
@@ -124,25 +128,4 @@
       }
     }
   }
-
-  //.drop-enter {
-  //  transform: translateY(-100%);
-  //}
-  //.drop-enter-active {
-  //  transform: translateY(0);
-  //  transition: transform 2000ms linear;
-  //}
-  //.drop-enter-done {
-  //  transform: translateY(0);
-  //}
-  //.drop-exit {
-  //  transform: translateY(0);
-  //}
-  //.drop-exit-active {
-  //  transform: translateY(-100%);
-  //  transition: transform 2000ms linear;
-  //}
-  //.drop-exit-done {
-  //  transform: translateY(-100%);
-  //}
 }

src/pages/matter/widget/MatterPanel.tsx

@@ -1,6 +1,5 @@
 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";
@@ -46,7 +45,6 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   renamingLoading: boolean = false;
   // 小屏幕下操作栏
   showMore: boolean = false;
-  transitionStatus: boolean = false;
 
   inputRef = React.createRef<HTMLInputElement>();
 
@@ -337,95 +335,90 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
           </div>
         </div>
 
-
-          <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">
+        <Expanding>
+          {this.showMore ? (
+            <div className="more-panel">
+              <div className="cell-btn navy text">
+                <span>{DateUtil.simpleDateHourMinute(matter.updateTime)}</span>
+                <span className="matter-size">
                   {StringUtil.humanFileSize(matter.size)}
                 </span>
-                  </div>
-
-                  {!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(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>
+          ) : null}
+        </Expanding>
       </div>
     );
   }

src/pages/matter/widget/imageCache/ImageCachePanel.less

@@ -11,7 +11,7 @@
     display: inline-block;
     vertical-align: middle;
     line-height: @base-height;
-    margin-right: 5px;
+    margin-right: 10px;
   }
 
   .image-cache-icon {
@@ -88,13 +88,20 @@
 
   .more-panel {
     border-top: 1px solid #eee;
-    padding-left: 35px;
-    .info {
-    }
+    padding-left: 32px;
     .cell-btn {
       border-top: 1px solid #eee;
       line-height: @inner-cell-height;
       vertical-align: middle;
+      &:first-child {
+        border: 0;
+      }
+    }
+    .text {
+      margin-left: 5px;
+    }
+    .matter-size {
+      margin-left: 15px;
     }
   }
 }

src/pages/matter/widget/imageCache/ImageCachePanel.tsx

@@ -5,11 +5,17 @@ import SafeUtil from "../../../../common/util/SafeUtil";
 import ImageCache from "../../../../common/model/image/cache/ImageCache";
 import ImageUtil from "../../../../common/util/ImageUtil";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
-import { DeleteFilled, ExclamationCircleFilled } from "@ant-design/icons";
+import {
+  DeleteOutlined,
+  ExclamationCircleFilled,
+  SmallDashOutlined,
+} from "@ant-design/icons";
 import MessageBoxUtil from "../../../../common/util/MessageBoxUtil";
 import FileUtil from "../../../../common/util/FileUtil";
 import DateUtil from "../../../../common/util/DateUtil";
+import Expanding from "../../../widget/Expanding";
 import "./ImageCachePanel.less";
+import StringUtil from "../../../../common/util/StringUtil";
 
 interface IProps {
   imageCache: ImageCache;
@@ -23,6 +29,7 @@ interface IState {}
 export default class ImageCachePanel extends TankComponent<IProps, IState> {
   //正在向服务器提交rename的请求
   renamingLoading = false;
+  // 小屏幕下操作栏
   showMore = false;
 
   clickRow = () => {};
@@ -46,6 +53,11 @@ export default class ImageCachePanel extends TankComponent<IProps, IState> {
     });
   };
 
+  toggleHandles = () => {
+    this.showMore = !this.showMore;
+    this.updateUI();
+  };
+
   render() {
     const { imageCache } = this.props;
 
@@ -58,7 +70,7 @@ export default class ImageCachePanel extends TankComponent<IProps, IState> {
             )
           }
         >
-          <div className="media">
+          <div className="media clearfix">
             <div className="pull-left">
               <div className="left-part">
                 <span className="basic-span basic-span-hot">
@@ -86,7 +98,8 @@ export default class ImageCachePanel extends TankComponent<IProps, IState> {
             <div className="pull-right visible-pc">
               {imageCache.uuid ? (
                 <div className="right-part">
-                  <DeleteFilled
+                  <DeleteOutlined
+                    title="删除"
                     className="image-cache-operation btn-action red"
                     onClick={(e) =>
                       SafeUtil.stopPropagationWrap(e)(this.deleteImageCache())
@@ -101,14 +114,48 @@ export default class ImageCachePanel extends TankComponent<IProps, IState> {
                 </div>
               ) : null}
             </div>
+
+            {/*在小屏下的操作栏*/}
+            <div className="pull-right visible-mobile">
+              <span
+                className="more-btn"
+                onClick={(e) =>
+                  SafeUtil.stopPropagationWrap(e)(this.toggleHandles())
+                }
+              >
+                <SmallDashOutlined className="btn-action navy f18" />
+              </span>
+            </div>
+
             <div className="media-body">
               <div className="middle-part">
                 <span className="image-cache-name">{imageCache.name}</span>
               </div>
             </div>
-
-            {/*todo 在小屏下的操作栏*/}
           </div>
+          <Expanding>
+            {this.showMore ? (
+              <div className="more-panel">
+                <div className="cell-btn text">
+                  <span>
+                    {DateUtil.simpleDateHourMinute(imageCache.updateTime)}
+                  </span>
+                  <span className="matter-size">
+                    {StringUtil.humanFileSize(imageCache.size)}
+                  </span>
+                </div>
+                <div
+                  className="cell-btn red"
+                  onClick={(e) =>
+                    SafeUtil.stopPropagationWrap(e)(this.deleteImageCache())
+                  }
+                >
+                  <DeleteOutlined className="btn-action mr5" />
+                  删除
+                </div>
+              </div>
+            ) : null}
+          </Expanding>
         </div>
       </div>
     );

src/pages/widget/Expanding.tsx

@@ -1,41 +1,20 @@
 import React, { Component } from "react";
-import { Transition } from "react-transition-group";
-import Velocity from "velocity-animate";
+import VelocityReact from "velocity-react";
 import SafeUtil from "../../common/util/SafeUtil";
 
-interface IProps {
-  inStatus: boolean;
-  onExited?: () => any
-}
+interface IProps {}
 
 interface IState {}
 
 export default class Expanding extends Component<IProps, IState> {
-  onEnter = (el: HTMLElement) => {
-    Velocity(el, "slideDown");
-  };
-
-  onExit = (el: HTMLElement) => {
-    Velocity(el, "slideUp");
-  };
-
-  onExited = () => {
-    SafeUtil.safeCallback(this.props.onExited)();
-  };
-
   render() {
     return (
-      <Transition
-        in={this.props.inStatus}
-        timeout={377}
-        onEnter={this.onEnter}
-        onExit={this.onExit}
-        onExited={this.onExited}
+      <VelocityReact.VelocityTransitionGroup
+        enter={{ animation: "slideDown" }}
+        leave={{ animation: "slideUp" }}
       >
-        <>
-          {this.props.children}
-        </>
-      </Transition>
+        {this.props.children}
+      </VelocityReact.VelocityTransitionGroup>
     );
   }
 }