@arco-design/mobile-react 2.30.10 → 2.31.1

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/style/css/index.css

@@ -95,6 +95,56 @@
  * }
  * ```
  */
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
 /**
  * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
  * }
  * ```
  */
-/**
- * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @param @rules 自定义的复写规则，默认重置为initial
- * @param @rules {en} customized rewrite rules, default to initial
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-prop-with-rtl(right, auto);
- * }
- * ```
- */
-/**
- * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-value-with-rtl(text-align, left);
- * }
- * ```
- */
 /**
  * 设置Loading组件颜色
  * @desc {en} set Loading component color

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/style/css/index.css

@@ -95,6 +95,56 @@
  * }
  * ```
  */
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
 /**
  * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
  * }
  * ```
  */
-/**
- * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @param @rules 自定义的复写规则，默认重置为initial
- * @param @rules {en} customized rewrite rules, default to initial
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-prop-with-rtl(right, auto);
- * }
- * ```
- */
-/**
- * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-value-with-rtl(text-align, left);
- * }
- * ```
- */
 /**
  * 设置Loading组件颜色
  * @desc {en} set Loading component color

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 {
     /**

package/esm/image-preview/style/css/index.css

@@ -95,6 +95,56 @@
  * }
  * ```
  */
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
 /**
  * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
  * }
  * ```
  */
-/**
- * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @param @rules 自定义的复写规则，默认重置为initial
- * @param @rules {en} customized rewrite rules, default to initial
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-prop-with-rtl(right, auto);
- * }
- * ```
- */
-/**
- * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
- * @param @property css属性名
- * @param @property {en} css property
- * @param @value css属性值
- * @param @value {en} css property value
- * @example
- * ```
- * @import '@arco-design/mobile-utils/style/mixin.less';
- *
- * .demo {
- *   .set-value-with-rtl(text-align, left);
- * }
- * ```
- */
 /**
  * 设置Loading组件颜色
  * @desc {en} set Loading component color