@arco-design/mobile-react 2.25.4 → 2.26.0

package/esm/image-picker/index.js

@@ -10,46 +10,46 @@ import AddIcon from './add-icon';
 export * from './type';
 var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    style = props.style,
-    _props$accept = props.accept,
-    accept = _props$accept === void 0 ? 'image/*' : _props$accept,
-    _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? false : _props$multiple,
-    capture = props.capture,
-    _props$columns = props.columns,
-    columns = _props$columns === void 0 ? 3 : _props$columns,
-    _props$gutter = props.gutter,
-    gutter = _props$gutter === void 0 ? 8 : _props$gutter,
-    _props$limit = props.limit,
-    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,
-    _props$hideDelete = props.hideDelete,
-    hideDelete = _props$hideDelete === void 0 ? false : _props$hideDelete,
-    _props$hideSelect = props.hideSelect,
-    hideSelect = _props$hideSelect === void 0 ? false : _props$hideSelect,
-    _props$alwaysShowSele = props.alwaysShowSelect,
-    alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
-    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;
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$accept = props.accept,
+      accept = _props$accept === void 0 ? 'image/*' : _props$accept,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? false : _props$multiple,
+      capture = props.capture,
+      _props$columns = props.columns,
+      columns = _props$columns === void 0 ? 3 : _props$columns,
+      _props$gutter = props.gutter,
+      gutter = _props$gutter === void 0 ? 8 : _props$gutter,
+      _props$limit = props.limit,
+      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,
+      _props$hideDelete = props.hideDelete,
+      hideDelete = _props$hideDelete === void 0 ? false : _props$hideDelete,
+      _props$hideSelect = props.hideSelect,
+      hideSelect = _props$hideSelect === void 0 ? false : _props$hideSelect,
+      _props$alwaysShowSele = props.alwaysShowSelect,
+      alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
+      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;
   var domRef = useRef(null);
   var fileRef = useRef(null);
   var cacheRef = useRef([]);
@@ -58,27 +58,35 @@ 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
@@ -86,17 +94,21 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         onMaxSizeExceed && onMaxSizeExceed(file);
         return false;
       }
+
       return true;
     }) || [];
+
     if (!fromAdapter) {
       event.target.value = '';
-    }
-    // 截断limit
+    } // 截断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) {
@@ -108,8 +120,8 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         };
       });
       cacheRef.current = [].concat(images, res);
-      onChange([].concat(cacheRef.current));
-      // 执行upload
+      onChange([].concat(cacheRef.current)); // 执行upload
+
       if (typeof upload === 'function') {
         files.forEach(function (_file) {
           upload(cacheRef.current.find(function (_ref) {
@@ -136,30 +148,36 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     });
   };
+
   var handleDelete = function handleDelete(index) {
     onDeleteClick && onDeleteClick(index);
     onChange(images.filter(function (_i, j) {
       return j !== index;
     }));
-  };
+  }; // click && longPress
+
 
-  // 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;
@@ -171,24 +189,29 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
     }
   };
+
   var getGridData = function getGridData(prefixCls, locale) {
     var errorNode = function errorNode(index) {
       if (renderError) {
         return typeof renderError === 'function' ? renderError(index) : renderError;
       }
+
       return /*#__PURE__*/React.createElement("div", {
         className: prefixCls + "-image-picker-error"
       }, /*#__PURE__*/React.createElement("p", null, locale.ImagePicker.loadError));
     };
+
     var loadingNode = function loadingNode(index) {
       if (renderLoading) {
         return typeof renderLoading === 'function' ? renderLoading(index) : renderLoading;
       }
+
       return null;
     };
+
     var data = (limit && limit < images.length ? images.slice(0, limit) : images).map(function (image, index) {
       var url = image.url,
-        status = image.status;
+          status = image.status;
       return {
         img: /*#__PURE__*/React.createElement("div", {
           key: index + "-" + url,
@@ -224,8 +247,10 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     });
     var showSelect = !hideSelect && images.length < (limit || Infinity);
     var disableSelect = disabled || alwaysShowSelect && !showSelect;
+
     if (showSelect || alwaysShowSelect) {
       var _cls;
+
       data.push({
         img: /*#__PURE__*/React.createElement("div", {
           className: cls(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
@@ -247,13 +272,16 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         title: ''
       });
     }
+
     return data;
   };
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref5) {
     var _cls2;
+
     var prefixCls = _ref5.prefixCls,
-      _ref5$locale = _ref5.locale,
-      locale = _ref5$locale === void 0 ? defaultLocale : _ref5$locale;
+        _ref5$locale = _ref5.locale,
+        locale = _ref5$locale === void 0 ? defaultLocale : _ref5$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
       style: style,
@@ -267,7 +295,6 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     })));
   });
 });
-
 /**
  * 图片选择器组件
  * @en ImagePicker Component
@@ -277,4 +304,5 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
  * @name_en ImagePicker
  * @displayName ImagePicker
  */
+
 export default componentWrapper(ImagePicker, 'ImagePicker');

package/esm/image-preview/index.d.ts

@@ -269,9 +269,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "getContainer" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "getContainer" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**