acud 0.0.68 → 0.0.71

package/lib/toast/index.js

@@ -74,7 +74,6 @@ function ToastDom(props) {
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      timerID = _useState2[0],
       setTimerID = _useState2[1];
 
   var _useState3 = (0, _react.useState)(countdown),
@@ -101,9 +100,9 @@ function ToastDom(props) {
     }
 
     return function () {
-      if (timerID) {
-        setTimerID(null);
-      }
+      // destory时可能timerID并没有 但是计时器存在 设置值时react会警告
+      // if (timerID) {
+      setTimerID(null); // }
     };
   }, [counter]);
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -155,7 +154,7 @@ var handler = {
       var tempDuration = args.duration;
       args.duration = 0; // 设置样式 有描述和没描述间距不一样
 
-      var tempClassName = props.className + ' ' + PREFIX;
+      var tempClassName = (props === null || props === void 0 ? void 0 : props.className) + ' ' + PREFIX;
 
       if (args.description) {
         tempClassName += ' ' + getPrefixCls('notification') + '-has-description';
@@ -173,7 +172,7 @@ var handler = {
         description: args.description,
         countdown: tempDuration,
         notificationKey: key,
-        onClose: props.onClose
+        onClose: props === null || props === void 0 ? void 0 : props.onClose
       });
       args.description = /*#__PURE__*/_react["default"].createElement(DescriptionDom, {
         description: args.description

package/lib/toast/style/index.css

@@ -106,7 +106,7 @@
 }
 .acud-notification-notice-with-icon .acud-notification-notice-message {
   margin: 0 calc(8px + 4px * 4) 0 calc(8px + 18px);
-  font-size: 16px;
+  font-size: 14px;
 }
 .acud-notification-notice-with-icon .acud-notification-notice-description {
   margin: 0 calc(8px + 4px * 4) 0 calc(8px + 18px);

package/lib/toast/style/index.less

@@ -3,7 +3,7 @@
 
 @toast-padding-vertical: @P;
 @toast-padding-horizontal: 4 * @P;
-@font-size-base: @T3;
+@toast-font-size-base: @T3;
 @line-height-base: 1.5715;
 @notification-bg: #fff;
 @heading-color: #000;
@@ -103,7 +103,7 @@
     }
 
     &-description {
-      font-size: @font-size-base;
+      font-size: @toast-font-size-base;
       .description-wrap {
           margin: @P 0 0 0;
           color: @G2;
@@ -123,7 +123,7 @@
 
     &-with-icon &-description {
       margin: 0 ~'calc(@{toast-title-margin} + @{P} * 4)' 0 ~'calc(@{toast-title-margin} + @{T5})';
-      font-size: @font-size-base;
+      font-size: @toast-font-size-base;
     }
 
     &-icon {

package/lib/transfer/SourceList.js

@@ -167,6 +167,7 @@ function sourceList(props) {
         return expandGroup(e, data.key);
       }
     }, expandGroupKey.includes(data.key) ? /*#__PURE__*/React.createElement(_OutlinedDown["default"], null) : /*#__PURE__*/React.createElement(_OutlinedRight["default"], null)), /*#__PURE__*/React.createElement(_checkbox["default"], {
+      className: "".concat(prefixCls, "-datasource-item-checkbox"),
       checked: checked,
       disabled: data.disabled,
       indeterminate: indeterminate

package/lib/transfer/index.js

@@ -80,11 +80,7 @@ function transfer(props) {
       tKeys = _React$useState2[0],
       setTKeys = _React$useState2[1];
 
-  React.useEffect(function () {
-    if (Array.isArray(targetKeys)) {
-      setTKeys(targetKeys);
-    }
-  }, [targetKeys]);
+  var mergedKeys = 'targetKeys' in props ? targetKeys : tKeys;
   React.useEffect(function () {
     onChange && onChange(tKeys);
   }, [tKeys]);
@@ -95,14 +91,14 @@ function transfer(props) {
     displayType: displayType,
     locale: userLocale,
     prefixCls: prefixCls,
-    tKeys: tKeys,
+    tKeys: mergedKeys,
     setTKeys: setTKeys,
     expansionSource: expansionSource
   })), /*#__PURE__*/React.createElement(_Target["default"], (0, _extends2["default"])({}, props, {
     displayType: displayType,
     locale: userLocale,
     prefixCls: prefixCls,
-    tKeys: tKeys,
+    tKeys: mergedKeys,
     setTKeys: setTKeys,
     expansionSource: expansionSource
   })));

package/lib/transfer/style/index.css

@@ -150,6 +150,9 @@
 .acud-transfer-datasource-item-group-option {
   padding-left: 60px;
 }
+.acud-transfer-datasource-item-checkbox {
+  height: 16px;
+}
 .acud-transfer-datasource-search {
   height: 40px;
   padding: 8px 12px;

package/lib/transfer/style/index.less

@@ -88,6 +88,9 @@
             &-group-option {
                 padding-left: 15 * @P;
             }
+            &-checkbox {
+                height: @P * 4;
+            }
         }
         &-search {
             height: @P * 10;

package/lib/upload/Upload.js

@@ -107,6 +107,7 @@ var InternalUpload = function InternalUpload(props, ref) {
       type = props.type,
       children = props.children,
       style = props.style,
+      motionDeadline = props.motionDeadline,
       itemRender = props.itemRender,
       maxCount = props.maxCount,
       description = props.description,
@@ -447,6 +448,7 @@ var InternalUpload = function InternalUpload(props, ref) {
       return /*#__PURE__*/React.createElement(_UploadList["default"], {
         listType: listType,
         items: mergedFileList,
+        motionDeadline: motionDeadline,
         previewFile: previewFile,
         onPreview: onPreview,
         onDownload: onDownload,
@@ -474,12 +476,15 @@ var InternalUpload = function InternalUpload(props, ref) {
 
     var dragCls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag"), true), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-uploading"), mergedFileList.some(function (file) {
       return file.status === 'uploading';
-    })), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
+    })), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-drag-click"), dragState === 'mousedown'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
     return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
       className: dragCls,
       onDrop: onFileDrop,
       onDragOver: onFileDrop,
       onDragLeave: onFileDrop,
+      onMouseDown: onFileDrop,
+      onMouseUp: onFileDrop,
+      onMouseLeave: onFileDrop,
       style: style
     }, /*#__PURE__*/React.createElement(_BaseUpload["default"], (0, _extends2["default"])({}, rcUploadProps, {
       ref: upload,

package/lib/upload/UploadList/ListItem.d.ts

@@ -3,6 +3,7 @@ import { ItemRender, UploadFile, UploadListProgressProps, UploadListType, Upload
 export interface ListItemProps {
     prefixCls: string;
     className?: string;
+    motionDeadline?: number;
     style?: React.CSSProperties;
     locale: UploadLocale;
     file: UploadFile;

package/lib/upload/UploadList/ListItem.js

@@ -29,7 +29,7 @@ var _OutlinedClose = _interopRequireDefault(require("acud-icon/lib/icons/Outline
 
 var _OutlinedCloudDownload = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedCloudDownload"));
 
-var _OutlinedRefresh = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedRefresh"));
+var _OutlinedButtonUpload = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedButtonUpload"));
 
 var _tooltip = _interopRequireDefault(require("../../tooltip"));
 
@@ -60,6 +60,8 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       actionIconRender = _ref.actionIconRender,
       itemRender = _ref.itemRender,
       isImgUrl = _ref.isImgUrl,
+      _ref$motionDeadline = _ref.motionDeadline,
+      motionDeadline = _ref$motionDeadline === void 0 ? 2000 : _ref$motionDeadline,
       showPreviewIcon = _ref.showPreviewIcon,
       showRemoveIcon = _ref.showRemoveIcon,
       showDownloadIcon = _ref.showDownloadIcon,
@@ -185,7 +187,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     title: locale.previewFile
   }, /*#__PURE__*/React.createElement(_OutlinedEye["default"], null)) : null; // 上传icon
 
-  var uploadIcon = showUploadIcon ? actionIconRender((typeof customUploadIcon === 'function' ? customUploadIcon(file) : customUploadIcon) || /*#__PURE__*/React.createElement(_OutlinedRefresh["default"], null), function () {
+  var uploadIcon = showUploadIcon ? actionIconRender((typeof customUploadIcon === 'function' ? customUploadIcon(file) : customUploadIcon) || /*#__PURE__*/React.createElement(_OutlinedButtonUpload["default"], null), function () {
     return onUpload(file);
   }, prefixCls, locale.uploadFile) : null;
   var actions = listType === 'picture-card' && file.status !== 'uploading' && /*#__PURE__*/React.createElement("span", {
@@ -214,7 +216,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, iconAndPreview), actions, showProgress && /*#__PURE__*/React.createElement(_rcMotion["default"], {
     motionName: "".concat(rootPrefixCls, "-fade"),
     visible: file.status === 'uploading',
-    motionDeadline: 2000
+    motionDeadline: motionDeadline
   }, function (_ref2) {
     var motionClassName = _ref2.className;
     // show loading icon if upload progress listener is disabled

package/lib/upload/UploadList/index.js

@@ -92,7 +92,7 @@ var renderIcon = function renderIcon(fileName) {
   }
 
   return /*#__PURE__*/React.createElement(Icon, {
-    width: 14
+    width: 16
   });
 };
 
@@ -119,6 +119,8 @@ var InternalUploadList = function InternalUploadList(_ref, ref) {
       downloadIcon = _ref.downloadIcon,
       uploadIcon = _ref.uploadIcon,
       progress = _ref.progress,
+      _ref$motionDeadline = _ref.motionDeadline,
+      motionDeadline = _ref$motionDeadline === void 0 ? 2000 : _ref$motionDeadline,
       appendAction = _ref.appendAction,
       itemRender = _ref.itemRender;
   var forceUpdate = (0, _useForceUpdate["default"])();
@@ -254,7 +256,7 @@ var InternalUploadList = function InternalUploadList(_ref, ref) {
   var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate'; // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
 
   var motionConfig = {
-    motionDeadline: 2000,
+    motionDeadline: motionDeadline,
     motionName: "".concat(prefixCls, "-").concat(animationDirection),
     keys: motionKeyList,
     motionAppear: motionAppear
@@ -307,7 +309,8 @@ var InternalUploadList = function InternalUploadList(_ref, ref) {
       onPreview: onInternalPreview,
       onDownload: onInternalDownload,
       onClose: onInternalClose,
-      onUpload: onInternalUpload
+      onUpload: onInternalUpload,
+      motionDeadline: motionDeadline
     });
   }));
 };
@@ -320,6 +323,7 @@ UploadList.defaultProps = {
     // showInfo: false
   },
   showUploadIcon: true,
+  motionDeadline: 2000,
   showRemoveIcon: true,
   showDownloadIcon: false,
   showPreviewIcon: true,

package/lib/upload/interface.d.ts

@@ -69,6 +69,7 @@ declare type BeforeUploadValueType = void | boolean | string | Blob | File;
 export interface UploadProps<T = any> {
     type?: UploadType;
     name?: string;
+    motionDeadline?: number;
     defaultFileList?: Array<UploadFile<T>>;
     fileList?: Array<UploadFile<T>>;
     action?: string | ((file: RcFile) => string) | ((file: RcFile) => PromiseLike<string>);
@@ -122,6 +123,7 @@ export interface UploadListProps<T = any> {
     items?: Array<UploadFile<T>>;
     progress?: UploadListProgressProps;
     prefixCls?: string;
+    motionDeadline?: number;
     showRemoveIcon?: boolean;
     showDownloadIcon?: boolean;
     showPreviewIcon?: boolean;

package/lib/upload/style/index.css

@@ -123,6 +123,12 @@
 .acud-upload.acud-upload-drag.acud-upload-drag-hover:not(.acud-upload-disabled) {
   border-color: #144BCC;
 }
+.acud-upload.acud-upload-drag.acud-upload-drag-click:not(.acud-upload-disabled) {
+  border-color: #144BCC;
+}
+.acud-upload.acud-upload-drag.acud-upload-drag-click:not(.acud-upload-disabled):hover {
+  border-color: #144BCC;
+}
 .acud-upload.acud-upload-drag.acud-upload-disabled {
   background: #fafafa;
   cursor: not-allowed;
@@ -192,9 +198,9 @@
 }
 .acud-upload-list-item {
   position: relative;
-  height: 24px;
-  margin-top: 8px;
   font-size: 12px;
+  transition: background-color 0.3s;
+  overflow-y: hidden;
 }
 .acud-upload-list-item-name {
   display: inline-block;
@@ -221,7 +227,7 @@
 }
 .acud-upload-list-item-card-actions {
   position: absolute;
-  right: 0;
+  right: 4px;
 }
 .acud-upload-list-item-card-actions-btn {
   opacity: 0;
@@ -257,9 +263,8 @@
   color: #B8BABF;
 }
 .acud-upload-list-item-info {
-  height: 100%;
+  height: 24px;
   padding: 0 2px;
-  transition: background-color 0.3s;
   border-radius: 2px;
 }
 .acud-upload-list-item-info > span {
@@ -307,7 +312,7 @@
 .acud-upload-list-item .acuicon-outlined-close:hover {
   color: #151B26;
 }
-.acud-upload-list-item:hover .acud-upload-list-item-info {
+.acud-upload-list-item:hover {
   background-color: #F7F7F9;
 }
 .acud-upload-list-item:hover .acuicon-outlined-close {
@@ -339,10 +344,9 @@
   color: #F33E3E;
 }
 .acud-upload-list-item-progress {
-  position: absolute;
-  bottom: -12px;
   width: 100%;
   padding-left: 4px;
+  padding-right: 4px;
   font-size: 12px;
   line-height: 0;
 }
@@ -351,7 +355,7 @@
   position: relative;
   height: 66px;
   padding: 0;
-  border: 1px 1px #d9d9d9;
+  border: 1px solid #d9d9d9;
   border-radius: 0px;
 }
 .acud-upload-list-picture .acud-upload-list-item:hover,
@@ -432,13 +436,6 @@
 .acud-upload-list-picture-card .acud-upload-list-item-uploading .acud-upload-list-item-name {
   margin-bottom: 12px;
 }
-.acud-upload-list-picture .acud-upload-list-item-progress,
-.acud-upload-list-picture-card .acud-upload-list-item-progress {
-  bottom: 14px;
-  width: calc(100% - 24px);
-  margin-top: 0;
-  padding-left: 56px;
-}
 .acud-upload-list-picture .acuicon-outlined-close,
 .acud-upload-list-picture-card .acuicon-outlined-close {
   position: absolute;
@@ -491,7 +488,7 @@
   opacity: 0;
   transition: all 0.3s;
 }
-.acud-upload-list-picture-card .acud-upload-list-item-actions .acuicon-outlined-refresh,
+.acud-upload-list-picture-card .acud-upload-list-item-actions .acuicon-outlined-button-upload,
 .acud-upload-list-picture-card .acud-upload-list-item-actions .acuicon-outlined-eye,
 .acud-upload-list-picture-card .acud-upload-list-item-actions .acuicon-outlined-download,
 .acud-upload-list-picture-card .acud-upload-list-item-actions .acuicon-outlined-delete {
@@ -519,8 +516,8 @@
   display: block;
   width: 100%;
   height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .acud-upload-list-picture-card .acud-upload-list-item-name {
   display: none;
@@ -547,6 +544,7 @@
   line-height: 140px;
 }
 .acud-upload-list-picture-card .acud-upload-list-item-progress {
+  position: absolute;
   top: 44px;
   padding-left: 8px;
   padding-right: 8px;
@@ -583,9 +581,15 @@
   margin: 0;
   padding: 0 8px 0 4px;
 }
-.acud-upload-list-text .acud-upload-list-item-card-actions,
-.acud-upload-list-picture .acud-upload-list-item-card-actions {
-  position: static;
+.acud-upload-list-text-container {
+  margin-bottom: 4px;
+}
+.acud-upload-list-text-container:first-child {
+  margin-top: 8px;
+}
+.acud-upload-list-text .acud-upload-list-item-progress {
+  margin-top: 4px;
+  margin-bottom: 2px;
 }
 .acud-upload-list .acud-upload-animate-inline-appear,
 .acud-upload-list .acud-upload-animate-inline-enter,

package/lib/upload/style/index.less

@@ -97,7 +97,12 @@
         &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
             border-color: @primary-7;
         }
-
+        &.@{upload-prefix-cls}-drag-click:not(.@{upload-prefix-cls}-disabled) {
+            border-color: @B7;
+            &:hover{
+                border-color: @B7;
+            }
+        }
         &.@{upload-prefix-cls}-disabled {
             background: @background-color-light;
             cursor: not-allowed;
@@ -181,10 +186,9 @@
     // ============================ Item ============================
     &-item {
         position: relative;
-        height: @P * 6;
-        margin-top: @margin-xs;
         font-size: @font-size-base;
-
+        transition: background-color .3s;
+        overflow-y: hidden;
         &-name {
             display: inline-block;
             width: 100%;
@@ -198,7 +202,7 @@
 
         &-card-actions {
             position: absolute;
-            right: 0;
+            right: @P;
 
             &-btn {
                 opacity: 0;
@@ -226,9 +230,8 @@
         }
 
         &-info {
-            height: 100%;
+            height: @P * 6;
             padding: 0 .5 * @P;
-            transition: background-color .3s;
             border-radius: @R2;
 
             > span {
@@ -264,7 +267,7 @@
             }
         }
 
-        &:hover &-info {
+        &:hover {
             // background-color: @item-hover-bg;
             background-color: ~'@{@{upload-list-p}-hover-background-color}';
         }
@@ -303,10 +306,9 @@
         }
 
         &-progress {
-            position: absolute;
-            bottom: -12px;
             width: 100%;
             padding-left: @P;
+            padding-right: @P;
             font-size: @T2;
             line-height: 0;
         }
@@ -319,7 +321,7 @@
             position: relative;
             height: 66px;
             padding: 0;
-            border: @border-width-base @upload-picture-card-border-style @border-color-base;
+            border: @border-width-base solid @border-color-base;
             border-radius: @border-radius-base;
 
             &:hover {
@@ -410,13 +412,6 @@
             margin-bottom: 12px;
         }
 
-        .@{upload-item}-progress {
-            bottom: 14px;
-            width: ~'calc(100% - 24px)';
-            margin-top: 0;
-            padding-left: 56px;
-        }
-
         .@{iconfont-css-prefix}-outlined-close {
             position: absolute;
             top: 8px;
@@ -478,7 +473,7 @@
             transform: translate(-50%, -50%);
             opacity: 0;
             transition: all .3s;
-            .@{iconfont-css-prefix}-outlined-refresh,
+            .@{iconfont-css-prefix}-outlined-button-upload,
             .@{iconfont-css-prefix}-outlined-eye,
             .@{iconfont-css-prefix}-outlined-download,
             .@{iconfont-css-prefix}-outlined-delete {
@@ -510,7 +505,7 @@
             display: block;
             width: 100%;
             height: 100%;
-            object-fit: contain;
+            object-fit: cover;
         }
 
         .@{upload-item}-name {
@@ -544,6 +539,7 @@
         }
 
         .@{upload-item}-progress {
+            position: absolute;
             top: 44px;
             padding-left: 8px;
             padding-right: 8px;
@@ -589,12 +585,23 @@
         }
 
         .@{upload-item}-card-actions {
-            position: static;
+            // position: static;
         }
     }
 
     // ============================ Text ============================
-
+    &-text {
+        &-container {
+            margin-bottom: @P;
+            &:first-child {
+                margin-top: @P * 2;
+            }
+        }
+        .@{upload-item}-progress {
+            margin-top: @P;
+            margin-bottom: @P * 0.5;
+        }
+    }
     // =========================== Motion ===========================
     .@{upload-prefix-cls}-animate-inline-appear,
     .@{upload-prefix-cls}-animate-inline-enter,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "acud",
-    "version": "0.0.68",
+    "version": "0.0.71",
     "description": "acg react 组件库",
     "main": "lib/index.js",
     "module": "es/index.js",

package/CHANGELOG.md

@@ -1,4 +0,0 @@
-# 0.0.16
-`2021-12-24`
-1. fix input、textarea的clear不触发上层的onchange的bug
-2. fix textarea的length 在有值得情况下初始化的时候展示0的bug