@arco-design/mobile-react 2.30.10 → 2.31.0

package/esm/form/form-item.js

@@ -10,6 +10,20 @@ import { FormItemContext } from './form-item-context';
 import { GlobalContext } from '../context-provider';
 import { FormInternalComponentType } from './type';
 import { getErrorAndWarnings, isFieldRequired } from './utils';
+export function DefaultPickerLinkedContainer(_ref) {
+  var value = _ref.value;
+
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls,
+      locale = _useContext.locale;
+
+  var className = prefixCls + "-form-picker-link-container";
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, value && value.length ? value.join('-') : /*#__PURE__*/React.createElement("span", {
+    className: className + "-placeholder"
+  }, locale == null ? void 0 : locale.Form.pickerDefaultHint));
+}
 
 var FormItemInner = /*#__PURE__*/function (_PureComponent) {
   _inheritsLoose(FormItemInner, _PureComponent);
@@ -197,6 +211,8 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
   _proto.renderChildren = function renderChildren() {
     var _props,
         _children$type,
+        _children$props7,
+        _children$props8,
         _this2 = this;
 
     var _this$props4 = this.props,
@@ -237,16 +253,26 @@ var FormItemInner = /*#__PURE__*/function (_PureComponent) {
       case FormInternalComponentType.DatePicker:
         props = {
           currentTs: getFieldValue(field),
-          onChange: this.innerTriggerFunction,
-          disabled: this.props.disabled
+          onChange: this.innerTriggerFunctionWithValueFirst,
+          disabled: this.props.disabled,
+          renderLinkedContainer: ((_children$props7 = children.props) == null ? void 0 : _children$props7.renderLinkedContainer) || function (val) {
+            return /*#__PURE__*/React.createElement(DefaultPickerLinkedContainer, {
+              value: val
+            });
+          }
         };
         break;
 
       case FormInternalComponentType.Picker:
         props = {
-          data: getFieldValue(field),
-          onPickerChange: this.innerTriggerFunction,
-          disabled: this.props.disabled
+          value: getFieldValue(field),
+          onChange: this.innerTriggerFunctionWithValueFirst,
+          disabled: this.props.disabled,
+          renderLinkedContainer: ((_children$props8 = children.props) == null ? void 0 : _children$props8.renderLinkedContainer) || function (val) {
+            return /*#__PURE__*/React.createElement(DefaultPickerLinkedContainer, {
+              value: val
+            });
+          }
         };
         break;
 
@@ -310,12 +336,12 @@ export default /*#__PURE__*/forwardRef(function (props, ref) {
       className = _props$className === void 0 ? '' : _props$className,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls;
+  var _useContext2 = useContext(GlobalContext),
+      prefixCls = _useContext2.prefixCls;
 
-  var _useContext2 = useContext(FormItemContext),
-      layout = _useContext2.layout,
-      propsDisabled = _useContext2.disabled;
+  var _useContext3 = useContext(FormItemContext),
+      layout = _useContext3.layout,
+      propsDisabled = _useContext3.disabled;
 
   var _useState = useState(null),
       errors = _useState[0],

package/esm/form/style/css/index.css

@@ -604,6 +604,13 @@
   height:  0.32rem ;
   line-height:  0.32rem ;
 }
+.arco-form-picker-link-container {
+  font-size: 0.32rem;
+  color:  #1d2129 ;
+}
+.arco-form-picker-link-container-placeholder {
+  color:  #c9cdd4 ;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *
@@ -638,4 +645,10 @@
 .arco-theme-dark .arco-form-item-warning-message {
   color:  #FF9626 ;
 }
+.arco-theme-dark .arco-form-picker-link-container {
+  color:  #f6f6f6 ;
+}
+.arco-theme-dark .arco-form-picker-link-container-placeholder {
+  color:  #5f5f60 ;
+}
 /********************* End *************************/

package/esm/form/style/index.less

@@ -89,6 +89,14 @@
             }
         }
     }
+
+    &-picker-link-container {
+        .rem(font-size, 16);
+        .use-var(color, font-color);
+        &-placeholder {
+            .use-var(color, input-placeholder-color);
+        }
+    }
 }
 
 /***************************************************
@@ -149,6 +157,16 @@
         .use-var(color, dark-form-item-warning-message-color);
       }
     }
+    &-picker-link-container {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-font-color);
+      }
+      &-placeholder {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-input-placeholder-color);
+        }
+      }
+    }
   }
 }
 /********************* End *************************/

package/esm/icon/IconCheck/index.js

@@ -24,8 +24,7 @@ export default function IconCheck(props) {
     }, other), /*#__PURE__*/React.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M16.702 4.47a.5.5 0 00-.705.06L8.33 13.596 3.82 9.724a.5.5 0 00-.705.054l-.652.758a.5.5 0 00.054.706L7.361 15.4a.5.5 0 00.054.053l.526.445.22.188a.5.5 0 00.722-.047l8.641-10.218a.5.5 0 00-.059-.705l-.763-.645z",
-      fill: useCurrentColor ? 'currentColor' : '#000'
+      d: "M16.702 4.47a.5.5 0 00-.705.06L8.33 13.596 3.82 9.724a.5.5 0 00-.705.054l-.652.758a.5.5 0 00.054.706L7.361 15.4a.5.5 0 00.054.053l.526.445.22.188a.5.5 0 00.722-.047l8.641-10.218a.5.5 0 00-.059-.705l-.763-.645z"
     }));
   });
 }

package/esm/icon/IconDownload/index.d.ts

@@ -0,0 +1,7 @@
+import { SVGAttributes, CSSProperties } from 'react';
+export interface IconProps extends SVGAttributes<SVGElement> {
+    className?: string;
+    useCurrentColor?: boolean;
+    style?: CSSProperties;
+}
+export default function IconDownload(props: IconProps): JSX.Element;

package/esm/icon/IconDownload/index.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "useCurrentColor", "style"];
+import React from 'react';
+import { ContextLayout } from '../../context-provider';
+export default function IconDownload(props) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$useCurrentColo = props.useCurrentColor,
+      useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
+      style = props.style,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      className: prefixCls + "-icon " + prefixCls + "-icon-download " + className,
+      width: "1em",
+      height: "1em",
+      style: style,
+      fill: useCurrentColor ? 'currentColor' : '#000',
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16"
+    }, other), /*#__PURE__*/React.createElement("path", {
+      d: "M7.3,8.8V1.7h1.3v7.1l1.9-1.9l0.9,0.9L8,11.3L4.5,7.8l0.9-0.9L7.3,8.8z M3.3,13v-1.3H2v2.7h12v-2.7\th-1.3V13H3.3z",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }));
+  });
+}

package/esm/icon/IconFile/index.d.ts

@@ -0,0 +1,7 @@
+import { SVGAttributes, CSSProperties } from 'react';
+export interface IconProps extends SVGAttributes<SVGElement> {
+    className?: string;
+    useCurrentColor?: boolean;
+    style?: CSSProperties;
+}
+export default function IconFile(props: IconProps): JSX.Element;

package/esm/icon/IconFile/index.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "useCurrentColor", "style"];
+import React from 'react';
+import { ContextLayout } from '../../context-provider';
+export default function IconFile(props) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$useCurrentColo = props.useCurrentColor,
+      useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
+      style = props.style,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      className: prefixCls + "-icon " + prefixCls + "-icon-file " + className,
+      width: "1em",
+      height: "1em",
+      style: style,
+      fill: useCurrentColor ? 'currentColor' : '#000',
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16"
+    }, other), /*#__PURE__*/React.createElement("path", {
+      d: "M2.3,2.7c0-0.7,0.6-1.3,1.3-1.3h7.3l2.7,2.7v9.3c0,0.7-0.6,1.3-1.3,1.3H3.7c-0.7,0-1.3-0.6-1.3-1.3\tV2.7z M10.4,2.7H3.7v10.7h8.7V4.6L10.4,2.7z M10.7,7.7H5.3V6.3h5.3V7.7z M8.7,10.3H5.3V9h3.3V10.3z",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }));
+  });
+}

package/esm/icon/IconKeyboard/index.js

@@ -19,6 +19,7 @@ export default function IconKeyboard(props) {
       height: "1em",
       style: style,
       version: "1.1",
+      id: "svg_388a56dbb6__\u56FE\u5C42_1",
       xmlns: "http://www.w3.org/2000/svg",
       x: "0",
       y: "0",

package/esm/icon/IconQuestionCircle/index.js

@@ -24,8 +24,7 @@ export default function IconQuestionCircle(props) {
     }, other), /*#__PURE__*/React.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
-      d: "M7.982.68a7.312 7.312 0 110 14.625 7.312 7.312 0 010-14.625zm0 1.33a5.983 5.983 0 100 11.965 5.983 5.983 0 000-11.966zm.333 8.641c.183 0 .332.15.332.333v.664a.332.332 0 01-.332.333H7.65a.332.332 0 01-.332-.333v-.664c0-.184.148-.333.332-.333h.665zm-.427-6.647c.79 0 1.447.19 1.97.574.522.382.784.95.784 1.7 0 .461-.114.85-.341 1.165-.133.191-.389.436-.766.733l-.373.293c-.202.16-.337.345-.403.558a1.8 1.8 0 00-.048.323.332.332 0 01-.331.304h-.744a.332.332 0 01-.331-.363c.043-.463.088-.755.137-.878.091-.229.325-.492.703-.79l.383-.302c.126-.096.774-.553.774-.957 0-.405-.07-.553-.273-.775-.203-.222-.66-.294-1.073-.294-.405 0-.752.108-.922.38a1.921 1.921 0 00-.189.4 1.388 1.388 0 00-.048.204.332.332 0 01-.328.276h-.782a.332.332 0 01-.33-.37c.008-.074.017-.136.025-.185.13-.722.458-1.253.985-1.592.413-.27.92-.404 1.521-.404z",
-      fill: useCurrentColor ? 'currentColor' : '#000'
+      d: "M7.982.68a7.312 7.312 0 110 14.625 7.312 7.312 0 010-14.625zm0 1.33a5.983 5.983 0 100 11.965 5.983 5.983 0 000-11.966zm.333 8.641c.183 0 .332.15.332.333v.664a.332.332 0 01-.332.333H7.65a.332.332 0 01-.332-.333v-.664c0-.184.148-.333.332-.333h.665zm-.427-6.647c.79 0 1.447.19 1.97.574.522.382.784.95.784 1.7 0 .461-.114.85-.341 1.165-.133.191-.389.436-.766.733l-.373.293c-.202.16-.337.345-.403.558a1.8 1.8 0 00-.048.323.332.332 0 01-.331.304h-.744a.332.332 0 01-.331-.363c.043-.463.088-.755.137-.878.091-.229.325-.492.703-.79l.383-.302c.126-.096.774-.553.774-.957 0-.405-.07-.553-.273-.775-.203-.222-.66-.294-1.073-.294-.405 0-.752.108-.922.38a1.921 1.921 0 00-.189.4 1.388 1.388 0 00-.048.204.332.332 0 01-.328.276h-.782a.332.332 0 01-.33-.37c.008-.074.017-.136.025-.185.13-.722.458-1.253.985-1.592.413-.27.92-.404 1.521-.404z"
     }));
   });
 }

package/esm/icon/IconUpload/index.js

@@ -19,10 +19,12 @@ export default function IconUpload(props) {
       height: "1em",
       style: style,
       fill: useCurrentColor ? 'currentColor' : '#000',
-      viewBox: "0 0 1024 1024",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, other), /*#__PURE__*/React.createElement("defs", null), /*#__PURE__*/React.createElement("path", {
-      d: "M192 768c12.8 0 19.2 6.4 19.2 19.2v64h595.2v-64c0-12.8 6.4-19.2 19.2-19.2h44.8c12.8 0 19.2 6.4 19.2 19.2V896c0 25.6-19.2 44.8-44.8 44.8h-672c-25.6 0-44.8-19.2-44.8-44.8V787.2c0-12.8 6.4-19.2 19.2-19.2H192zM531.2 89.6l211.2 211.2c6.4 6.4 6.4 19.2 0 32l-32 32c-6.4 6.4-19.2 6.4-32 0l-128-128v473.6c0 12.8-6.4 19.2-19.2 19.2h-38.4c-12.8 0-19.2-6.4-19.2-19.2V249.6L352 364.8c-6.4 6.4-25.6 6.4-32 0l-32-32c-6.4-6.4-6.4-19.2 0-32L499.2 89.6c12.8-6.4 25.6-6.4 32 0z"
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 14 14"
+    }, other), /*#__PURE__*/React.createElement("path", {
+      d: "M7,1.5l3.1,3.1L9.2,5.4L7.6,3.7v5.9H6.4V3.7L4.8,5.4L3.9,4.6L7,1.5z M2.9,11.4v-1.2H1.8v2.3h10.5\tv-2.3h-1.2v1.2H2.9z",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
     }));
   });
 }

package/esm/icon/IconUserFill/index.js

@@ -22,8 +22,7 @@ export default function IconUserFill(props) {
       fill: useCurrentColor ? 'currentColor' : '#000',
       xmlns: "http://www.w3.org/2000/svg"
     }, other), /*#__PURE__*/React.createElement("path", {
-      d: "M12.5 10.833c2.301 0 5 1.786 5 5v2.5c0 .46-.373.834-.833.834H3.333a.833.833 0 01-.833-.834v-2.5c0-3.211 2.699-5 5-5h5zM10 1.25a4.167 4.167 0 110 8.333 4.167 4.167 0 010-8.333z",
-      fill: useCurrentColor ? 'currentColor' : '#000'
+      d: "M12.5 10.833c2.301 0 5 1.786 5 5v2.5c0 .46-.373.834-.833.834H3.333a.833.833 0 01-.833-.834v-2.5c0-3.211 2.699-5 5-5h5zM10 1.25a4.167 4.167 0 110 8.333 4.167 4.167 0 010-8.333z"
     }));
   });
 }

package/esm/icon/index.d.ts

@@ -1,4 +1,3 @@
-export { default as IconUpload } from './IconUpload';
 export { default as IconSquareChecked } from './IconSquareChecked';
 export { default as IconTriUp } from './IconTriUp';
 export { default as IconMore } from './IconMore';
@@ -54,4 +53,7 @@ export { default as IconGift } from './IconGift';
 export { default as IconStarHalf } from './IconStarHalf';
 export { default as IconKeyboard } from './IconKeyboard';
 export { default as IconKeyboardDelete } from './IconKeyboardDelete';
+export { default as IconDownload } from './IconDownload';
+export { default as IconFile } from './IconFile';
+export { default as IconUpload } from './IconUpload';
 export * from './type';

package/esm/icon/index.js

@@ -1,4 +1,3 @@
-export { default as IconUpload } from './IconUpload';
 export { default as IconSquareChecked } from './IconSquareChecked';
 export { default as IconTriUp } from './IconTriUp';
 export { default as IconMore } from './IconMore';
@@ -54,4 +53,7 @@ export { default as IconGift } from './IconGift';
 export { default as IconStarHalf } from './IconStarHalf';
 export { default as IconKeyboard } from './IconKeyboard';
 export { default as IconKeyboardDelete } from './IconKeyboardDelete';
+export { default as IconDownload } from './IconDownload';
+export { default as IconFile } from './IconFile';
+export { default as IconUpload } from './IconUpload';
 export * from './type';

package/esm/icon/type.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
+export interface OriginIconProps extends React.SVGProps<SVGSVGElement> {
     className?: string;
     prefix?: string;
     width?: string;
     height?: string;
     useCurrentColor?: boolean;
+    spin?: boolean;
 }
+export declare type IconProps = React.PropsWithoutRef<OriginIconProps> & React.RefAttributes<SVGSVGElement>;

package/esm/image-picker/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
-import { Promise } from 'es6-promise';
 import { cls, defaultLocale, componentWrapper } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import { IconClose } from '../icon';
@@ -8,6 +7,7 @@ import Image from '../image';
 import Grid from '../grid';
 import AddIcon from './add-icon';
 import { useLatestRef } from '../_helpers';
+import { Upload } from '../uploader/upload';
 export * from './type';
 var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
@@ -26,7 +26,6 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       limit = _props$limit === void 0 ? 0 : _props$limit,
       _props$images = props.images,
       images = _props$images === void 0 ? [] : _props$images,
-      maxSize = props.maxSize,
       disabled = props.disabled,
       deleteIcon = props.deleteIcon,
       selectIcon = props.selectIcon,
@@ -39,18 +38,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       imageProps = props.imageProps,
       renderLoading = props.renderLoading,
       renderError = props.renderError,
-      onLongPress = props.onLongPress,
-      onClick = props.onClick,
-      _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? function () {
-    return null;
-  } : _props$onChange,
-      onMaxSizeExceed = props.onMaxSizeExceed,
-      onLimitExceed = props.onLimitExceed,
-      upload = props.upload,
-      selectAdapter = props.selectAdapter,
-      onSelectClick = props.onSelectClick,
-      onDeleteClick = props.onDeleteClick;
+      selectAdapter = props.selectAdapter;
   var domRef = useRef(null);
   var fileRef = useRef(null);
   var cacheRef = useLatestRef(images);
@@ -59,143 +47,9 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       dom: domRef.current
     };
   });
-
-  var parseFile = function parseFile(file) {
-    return new Promise(function (resolve, reject) {
-      if (file.url) {
-        resolve(file.url);
-      } else {
-        var reader = new FileReader();
-
-        reader.onload = function (e) {
-          var _e$target;
-
-          var dataURL = (_e$target = e.target) == null ? void 0 : _e$target.result;
-
-          if (!dataURL) {
-            reject(new Error('file parse error'));
-          }
-
-          resolve(dataURL);
-        };
-
-        reader.onerror = function () {
-          reject(new Error('file parse error'));
-        };
-
-        reader.readAsDataURL(file);
-      }
-    });
-  };
-
-  var handleChange = function handleChange(event, fromAdapter) {
-    var files = Array.prototype.filter.call(event.target.files || [], function (file) {
-      // 过滤maxSize
-      if (maxSize && file.size > maxSize * 1024) {
-        onMaxSizeExceed && onMaxSizeExceed(file);
-        return false;
-      }
-
-      return true;
-    }) || [];
-
-    if (!fromAdapter) {
-      event.target.value = '';
-    } // 截断limit
-
-
-    if (limit !== 0 && files.length + images.length > limit) {
-      onLimitExceed && onLimitExceed(files);
-      files.length = limit - images.length;
-    } // 解析文件生成预览
-
-
-    Promise.all(files.map(function (file) {
-      return parseFile(file);
-    })).then(function (parseFiles) {
-      var res = parseFiles.map(function (url, index) {
-        return {
-          url: url,
-          status: typeof upload === 'function' ? 'loading' : 'loaded',
-          file: files[index]
-        };
-      });
-      cacheRef.current = [].concat(cacheRef.current, res);
-      onChange([].concat(cacheRef.current)); // 执行upload
-
-      if (typeof upload === 'function') {
-        files.forEach(function (_file) {
-          upload(cacheRef.current.find(function (_ref) {
-            var file = _ref.file;
-            return file === _file;
-          })).then(function (data) {
-            var index = cacheRef.current.findIndex(function (_ref2) {
-              var file = _ref2.file;
-              return file === _file;
-            });
-
-            if (index !== -1) {
-              cacheRef.current[index] = _extends({}, cacheRef.current[index], data, {
-                status: undefined
-              });
-            }
-          }).catch(function () {
-            var index = cacheRef.current.findIndex(function (_ref3) {
-              var file = _ref3.file;
-              return file === _file;
-            });
-
-            if (index !== -1) {
-              cacheRef.current[index].status = 'error';
-            }
-          }).finally(function () {
-            onChange([].concat(cacheRef.current));
-          });
-        });
-      }
-    });
-  };
-
-  var handleDelete = function handleDelete(index) {
-    onDeleteClick && onDeleteClick(index);
-    onChange(images.filter(function (_i, j) {
-      return j !== index;
-    }));
-  }; // click && longPress
-
-
-  var timeOutEvent;
-
-  var handleTouchStart = function handleTouchStart(e, image, index) {
-    timeOutEvent = setTimeout(function () {
-      timeOutEvent = 0;
-      onLongPress == null ? void 0 : onLongPress(e, image, index);
-    }, 750);
-  };
-
-  var handleClick = function handleClick(e, image, index) {
-    clearTimeout(timeOutEvent);
-
-    if (timeOutEvent !== 0) {
-      onClick == null ? void 0 : onClick(e, image, index);
-    }
-  };
-
-  var handleSelect = function handleSelect(e) {
-    if (e.target !== fileRef.current) {
-      var _fileRef$current;
-
-      onSelectClick && onSelectClick();
-      selectAdapter ? selectAdapter().then(function (_ref4) {
-        var files = _ref4.files;
-        return handleChange({
-          target: {
-            files: files
-          }
-        }, true);
-      }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
-    }
-  };
+  var uploadFunc = new Upload(_extends({}, props, {
+    files: images
+  }), fileRef, cacheRef);
 
   var getGridData = function getGridData(prefixCls, locale) {
     var errorNode = function errorNode(index) {
@@ -225,10 +79,10 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           className: prefixCls + "-image-picker-image"
         }, /*#__PURE__*/React.createElement("div", {
           onTouchStart: function onTouchStart(e) {
-            return handleTouchStart(e, image, index);
+            return uploadFunc.handleTouchStart(e, image, index);
           },
           onClick: function onClick(e) {
-            return handleClick(e, image, index);
+            return uploadFunc.handleClick(e, image, index);
           },
           className: prefixCls + "-image-picker-image-container"
         }, /*#__PURE__*/React.createElement(Image, _extends({
@@ -244,7 +98,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         })), !hideDelete && /*#__PURE__*/React.createElement("div", {
           className: prefixCls + "-image-picker-close",
           onClick: function onClick() {
-            return handleDelete(index);
+            return uploadFunc.deleteFile(index);
           }
         }, deleteIcon || /*#__PURE__*/React.createElement("div", {
           className: prefixCls + "-image-picker-close-icon"
@@ -261,7 +115,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       data.push({
         img: /*#__PURE__*/React.createElement("div", {
           className: cls(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
-          onClick: handleSelect
+          onClick: uploadFunc.handleSelect
         }, /*#__PURE__*/React.createElement("div", {
           className: prefixCls + "-image-picker-add-container"
         }, selectIcon || /*#__PURE__*/React.createElement("div", {
@@ -272,7 +126,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           multiple: multiple,
           type: "file",
           onChange: function onChange(e) {
-            return handleChange(e);
+            return uploadFunc.handleChange(e);
           },
           ref: fileRef
         }) : null)),
@@ -283,12 +137,12 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     return data;
   };
 
-  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref5) {
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var _cls2;
 
-    var prefixCls = _ref5.prefixCls,
-        _ref5$locale = _ref5.locale,
-        locale = _ref5$locale === void 0 ? defaultLocale : _ref5$locale;
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
       style: style,

package/esm/image-picker/type.d.ts

@@ -1,33 +1,14 @@
 import { InputHTMLAttributes } from 'react';
 import { ImageProps } from '../image';
-export interface ImagePickItem {
+import { UploadCommonProps, CommonFileItem } from '../uploader/upload/type';
+export interface ImagePickItem extends CommonFileItem {
     /**
      * 图片地址
      * @en Image Url
      */
     url: string;
-    /**
-     * 图片文件
-     * @en Image File
-     */
-    file?: File;
-    /**
-     * 图片状态
-     * @en Image Status
-     * @default 以图片自身加载状态而定
-     * @default_en According to inner status of the image
-     */
-    status?: 'loaded' | 'loading' | 'error';
 }
-export interface AdapterFile {
-    url?: string;
-    size: number;
-    name: string;
-}
-export interface SelectCallback {
-    files: AdapterFile[];
-}
-export interface ImagePickerProps {
+export interface ImagePickerProps extends Omit<UploadCommonProps<ImagePickItem>, 'files'> {
     /**
      * 自定义类名
      * @en Custom className
@@ -71,16 +52,6 @@ export interface ImagePickerProps {
      * @default 8
      */
     gutter?: number;
-    /**
-     * 最多选择图片张数，超出数量自动隐藏上传按钮，0表示不做限制
-     * @en max Pictures Can Choose
-     */
-    limit?: number;
-    /**
-     * 文件大小限制，单位为K
-     * @en File size limit, in K
-     */
-    maxSize?: number;
     /**
      * 是否隐藏删除Icon
      * @en Whether to hide delete Icon
@@ -129,51 +100,11 @@ export interface ImagePickerProps {
      * @en Defined uploading display
      */
     renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
-    /**
-     * 上传方法
-     * @en upload function
-     */
-    upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
-    /**
-     * 已选图片列表发生变化
-     * @en The list of selected images changes
-     */
-    onChange?: (fileList: ImagePickItem[]) => void;
-    /**
-     * 图片超过限制大小
-     * @en Image exceeds size limit
-     */
-    onMaxSizeExceed?: (file: File) => void;
-    /**
-     * 选择张数超过限制
-     * @en The number of pictures exceeds the limit
-     */
-    onLimitExceed?: (files: File[]) => void;
-    /**
-     * 图片点击
-     * @en click event
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
-    /**
-     * 图片长按事件
-     * @en long press event
-     */
-    onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
-    /**
-     * 图片选择适配器
-     * @en Select Adaptor
-     */
-    selectAdapter?: () => Promise<SelectCallback>;
     /**
      * 选图点击事件
-     * @en Select Icon Click Event
+     * @en Select icon click event
      */
     onSelectClick?: () => void;
-    /**
-     * 删除点击事件
-     * @en Delete Icon Click Event
-     */
-    onDeleteClick?: (index: number) => void;
 }
 export interface ImagePickerRef {
     /**