@arco-design/mobile-react 2.19.1-7cada34.0 → 2.19.1-941e02b.7

package/dist/index.js

@@ -888,6 +888,12 @@
       Pagination: {
         previousPage: '上一页',
         nextPage: '下一页'
+      },
+      Image: {
+        loadError: '重试'
+      },
+      ImagePicker: {
+        loadError: '加载失败'
       }
     };
 
@@ -3428,39 +3434,38 @@
       var loadingImageRef = React.useRef(null);
       var style = props.style,
           className = props.className,
-          _e = props.status,
-          status = _e === void 0 ? 'init' : _e,
+          status = props.status,
           src = props.src,
           width = props.width,
           height = props.height,
-          _f = props.alt,
-          alt = _f === void 0 ? '' : _f,
-          _g = props.fit,
-          fit = _g === void 0 ? 'cover' : _g,
-          _h = props.position,
-          position = _h === void 0 ? 'center' : _h,
+          _e = props.alt,
+          alt = _e === void 0 ? '' : _e,
+          _f = props.fit,
+          fit = _f === void 0 ? 'cover' : _f,
+          _g = props.position,
+          position = _g === void 0 ? 'center' : _g,
           radius = props.radius,
           bordered = props.bordered,
           loadingArea = props.loadingArea,
           errorArea = props.errorArea,
           showLoading = props.showLoading,
           showError = props.showError,
-          _j = props.animateDuration,
-          animateDuration = _j === void 0 ? 200 : _j,
-          _k = props.retryTime,
-          retryTime = _k === void 0 ? 0 : _k,
+          _h = props.animateDuration,
+          animateDuration = _h === void 0 ? 200 : _h,
+          _j = props.retryTime,
+          retryTime = _j === void 0 ? 0 : _j,
           forceHttps = props.forceHttps,
-          _l = props.boxWidth,
-          boxWidth = _l === void 0 ? 0 : _l,
-          _m = props.boxHeight,
-          boxHeight = _m === void 0 ? 0 : _m,
+          _k = props.boxWidth,
+          boxWidth = _k === void 0 ? 0 : _k,
+          _l = props.boxHeight,
+          boxHeight = _l === void 0 ? 0 : _l,
           topOverlap = props.topOverlap,
           bottomOverlap = props.bottomOverlap,
-          _o = props.showImage,
-          showImage = _o === void 0 ? true : _o,
+          _m = props.showImage,
+          showImage = _m === void 0 ? true : _m,
           staticLabel = props.staticLabel,
-          _p = props.nativeProps,
-          nativeProps = _p === void 0 ? {} : _p,
+          _o = props.nativeProps,
+          nativeProps = _o === void 0 ? {} : _o,
           onChange = props.onChange,
           onClick = props.onClick,
           _onLoad = props.onLoad,
@@ -3469,6 +3474,7 @@
       var isPreview = Boolean(fit.indexOf('preview') >= 0);
       var actualBoxWidth = boxWidth || windowWidth;
       var actualBoxHeight = boxHeight || windowHeight;
+      var validStatus = status === undefined ? imageStatus : status;
       var attrs = React.useMemo(function () {
         var imageStyle = {};
 
@@ -3644,7 +3650,9 @@
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
+        var prefixCls = _a.prefixCls,
+            _b = _a.locale,
+            locale = _b === void 0 ? defaultLocale : _b;
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-image all-border-box", {
             preview: isPreview
@@ -3659,7 +3667,7 @@
         }, bottomOverlap || /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-placeholder"
         })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls('image-container', imageStatus, {
+          className: cls('image-container', validStatus, {
             animate: Boolean(animateDuration),
             'static-label': staticLabel
           }),
@@ -3674,7 +3682,7 @@
             return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
           },
           onError: handleStaticImageError
-        })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/React__default["default"].createElement("div", {
+        })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-content image-loading-container",
           style: {
             borderRadius: radius
@@ -3686,7 +3694,7 @@
           className: "loading-icon",
           radius: 8.5,
           stroke: 3
-        }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/React__default["default"].createElement("div", {
+        }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-content image-error-container",
           onClick: function onClick(e) {
             e.stopPropagation();
@@ -3697,7 +3705,7 @@
           }
         }, errorArea || /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-retry-load"
-        }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/React__default["default"].createElement("div", {
+        }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-content image-top-overlap",
           style: {
             borderRadius: radius
@@ -5542,7 +5550,7 @@
           className: prefixCls + "-switch-text"
         }, switchChecked ? text.off || '' : text.on || '') : null, /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-switch-inner"
-        }, innerArea ? innerArea : null));
+        }, innerArea || null));
       });
     });
 
@@ -6064,11 +6072,13 @@
         if (isRenderNormal) {
           if (progressColorStart) {
             return progressColorStart;
-          } else if (progressColorEnd) {
+          }
+
+          if (progressColorEnd) {
             return progressColorEnd;
-          } else {
-            return progressColor;
           }
+
+          return progressColor;
         }
       }, [progressColorStart, progressColorEnd, progressColor]);
 
@@ -12264,14 +12274,21 @@
       });
 
       var getRows = function getRows(prefix, rowsData, rows, row) {
-        var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
-        var widthStyle = {
-          minWidth: 1 / columns * 100 + "%"
-        };
+        var placeholders = !isSliding && rowsData.length % columns;
+        var renderData = rowsData;
+
+        if (placeholders) {
+          var fakeGrids = new Array(columns - placeholders).fill({
+            img: null,
+            title: ''
+          });
+          renderData = rowsData.concat(fakeGrids);
+        }
+
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefix + "-rows",
           key: row
-        }, rowsData.map(function (item, index) {
+        }, renderData.map(function (item, index) {
           var img = item.img,
               title = item.title,
               content = item.content,
@@ -12285,7 +12302,7 @@
           }
 
           var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter === null || gutter === void 0 ? void 0 : gutter.y) || 0;
-          var rowLen = rowsData.length;
+          var rowLen = renderData.length;
           var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter === null || gutter === void 0 ? void 0 : gutter.x) || 0;
           return /*#__PURE__*/React__default["default"].createElement("div", {
             key: index,
@@ -12314,12 +12331,6 @@
           }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/React__default["default"].createElement("i", {
             className: "horizontal-border"
           }) : null);
-        }), fakeGrids.map(function (_, i) {
-          return /*#__PURE__*/React__default["default"].createElement("div", {
-            className: cls(prefix + "-rows-item fake-col"),
-            key: i,
-            style: widthStyle
-          });
         }));
       };
 
@@ -12762,8 +12773,474 @@
       });
     });
 
+    function IconStarFill(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-star-fill " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          fill: useCurrentColor ? 'currentColor' : '#000',
+          viewBox: "0 0 1024 1024",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, other), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("style", null)), /*#__PURE__*/React__default["default"].createElement("path", {
+          d: "M497.371 826.514L270.63 936.23c-18.286 7.314-40.229 0-47.543-18.286-3.657-3.657-7.315-10.972-3.657-18.286l25.6-248.686c0-10.971-3.658-18.285-7.315-29.257L69.486 435.2c-14.629-14.629-10.972-36.571 3.657-51.2 3.657-3.657 10.971-7.314 14.628-7.314l245.029-51.2c10.971-3.657 18.286-7.315 21.943-18.286l128-219.429C490.057 73.143 512 65.83 530.286 76.8c3.657 3.657 10.971 7.314 14.628 14.629l128 219.428c3.657 7.314 14.629 14.629 21.943 18.286l245.029 51.2c18.285 3.657 32.914 21.943 25.6 43.886 0 7.314-3.657 10.971-7.315 14.628L789.943 621.714c-7.314 7.315-10.972 18.286-7.314 29.257l25.6 248.686c3.657 18.286-10.972 36.572-32.915 40.229-7.314 0-14.628 0-18.285-3.657L530.286 826.514c-10.972-7.314-25.6-7.314-32.915 0z"
+        }));
+      });
+    }
+
+    function IconClose(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-close " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          viewBox: "0 0 1024 1024",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
+          fill: useCurrentColor ? 'currentColor' : '#000',
+          d: "M509.568 447.083L796.16 160.469a21.333 21.333 0 0130.165 0l30.166 30.166a21.333 21.333 0 010 30.186L569.899 507.435l286.613 286.592a21.333 21.333 0 010 30.165l-30.165 30.165a21.333 21.333 0 01-30.166 0L509.568 567.765 222.933 854.38a21.333 21.333 0 01-30.186 0l-30.166-30.166a21.333 21.333 0 010-30.165l286.614-286.613L162.603 220.8a21.333 21.333 0 010-30.187l30.165-30.165a21.333 21.333 0 0130.187 0l286.613 286.613z"
+        }));
+      });
+    }
+
+    function IconAdd(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-add " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          viewBox: "0 0 1024 1024",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
+          fill: useCurrentColor ? 'currentColor' : '#000',
+          d: "M527.317 85.333c9.515 0 12.95.982 16.427 2.859a19.337 19.337 0 018.064 8.064c1.877 3.477 2.859 6.912 2.859 16.427v356.65h356.65c9.515 0 12.95.982 16.427 2.859a19.337 19.337 0 018.064 8.064c1.877 3.477 2.859 6.912 2.859 16.427v30.634c0 9.515-.982 12.95-2.859 16.427a19.392 19.392 0 01-8.064 8.064c-3.477 1.877-6.912 2.859-16.427 2.859h-356.65v356.65c0 9.515-.982 12.95-2.859 16.427a19.392 19.392 0 01-8.064 8.064c-3.477 1.877-6.912 2.859-16.427 2.859h-30.634c-9.515 0-12.95-.982-16.427-2.859a19.392 19.392 0 01-8.064-8.064c-1.877-3.477-2.859-6.912-2.859-16.427l-.021-356.65h-356.63c-9.514 0-12.949-.982-16.426-2.859a19.392 19.392 0 01-8.064-8.064c-1.877-3.477-2.859-6.912-2.859-16.427v-30.634c0-9.515.982-12.95 2.859-16.427a19.392 19.392 0 018.064-8.064c3.477-1.877 6.912-2.859 16.427-2.859l356.65-.021v-356.63c0-9.514.982-12.949 2.859-16.426a19.392 19.392 0 018.064-8.064c3.477-1.877 6.912-2.859 16.427-2.859h30.634z"
+        }));
+      });
+    }
+
+    function IconClear(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-clear " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 18 18"
+        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
+          d: "M9 1.1C4.7 1.1 1.1 4.7 1.1 9s3.5 7.9 7.9 7.9 7.9-3.5 7.9-7.9S13.3 1.1 9 1.1zm3.4 10.2c.2.2.2.5 0 .7l-.5.5c-.2.2-.5.2-.7 0L9 10.3l-2.2 2.2c-.2.2-.5.2-.7 0l-.6-.5c-.2-.2-.2-.5 0-.7l2.2-2.2-2.2-2.3c-.2-.2-.2-.5 0-.7l.5-.5c.2-.2.5-.2.7 0l2.2 2.2 2.2-2.2c.2-.2.5-.2.7 0l.5.5c.2.2.2.5 0 .7L10.1 9l2.3 2.3z",
+          fill: useCurrentColor ? 'currentColor' : '#000'
+        }));
+      });
+    }
+
+    function IconCheckBold(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-check-bold " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 -0.97 10.07 10.07"
+        }, other), /*#__PURE__*/React__default["default"].createElement("g", {
+          "data-name": "\u56FE\u5C42 2"
+        }, /*#__PURE__*/React__default["default"].createElement("path", {
+          d: "M9.22.12a.49.49 0 00-.7.06L3.86 5.69 1.4 3.57a.51.51 0 00-.71.06l-.57.66A.49.49 0 00.17 5L3 7.38v.07l.69.55a.53.53 0 00.71 0l.6-.71a.22.22 0 000-.08l5-5.82a.51.51 0 00-.11-.71z",
+          fill: useCurrentColor ? 'currentColor' : '#000',
+          fillRule: "evenodd",
+          "data-name": "\u56FE\u5C42 1"
+        })));
+      });
+    }
+
+    function IconCloseBold(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-close-bold " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 6.92 6.92"
+        }, other), /*#__PURE__*/React__default["default"].createElement("g", {
+          "data-name": "\u56FE\u5C42 2"
+        }, /*#__PURE__*/React__default["default"].createElement("path", {
+          d: "M6.16.15l.62.62a.5.5 0 010 .7l-2 2 2 2a.51.51 0 010 .71l-.62.62a.51.51 0 01-.71 0l-2-2-2 2a.5.5 0 01-.7 0l-.6-.64a.5.5 0 010-.71l2-2-2-2a.48.48 0 010-.7l.62-.6a.48.48 0 01.7 0l2 2 2-2a.5.5 0 01.69 0z",
+          fill: useCurrentColor ? 'currentColor' : '#000',
+          fillRule: "evenodd",
+          "data-name": "\u56FE\u5C42 1"
+        })));
+      });
+    }
+
+    function IconStarHalf(props) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          _b = props.useCurrentColor,
+          useCurrentColor = _b === void 0 ? true : _b,
+          style = props.style,
+          other = __rest(props, ["className", "useCurrentColor", "style"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var prefixCls = _a.prefixCls;
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
+          className: prefixCls + "-icon " + prefixCls + "-icon-star-half " + className,
+          width: "1em",
+          height: "1em",
+          style: style,
+          fill: useCurrentColor ? 'currentColor' : '#000',
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 1024 1024"
+        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
+          d: "M513.8 71.6c-13.4-.9-25.9 5.8-31 16.2l-128 219.4c-3.7 11-11 14.6-21.9 18.3l-245 51.2c-3.7 0-11 3.7-14.6 7.3-14.6 14.6-18.3 36.6-3.7 51.2l168.2 186.5c3.7 11 7.3 18.3 7.3 29.3l-25.6 248.7c-3.7 7.3 0 14.6 3.7 18.3 7.3 18.3 29.3 25.6 47.5 18.3l226.7-109.7c3.9-3.9 10-5.7 16.4-5.4V71.6z"
+        }));
+      });
+    }
+
+    function AddIcon() {
+      return /*#__PURE__*/React__default["default"].createElement("svg", {
+        width: "30",
+        height: "30",
+        viewBox: "0 0 30 30",
+        fill: "none"
+      }, /*#__PURE__*/React__default["default"].createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M14.5 0C14.2239 0 14 0.223857 14 0.5V14H0.5C0.223858 14 0 14.2239 0 14.5V15.5C0 15.7761 0.223857 16 0.5 16H14V29.5C14 29.7761 14.2239 30 14.5 30H15.5C15.7761 30 16 29.7761 16 29.5V16H29.5C29.7761 16 30 15.7761 30 15.5V14.5C30 14.2239 29.7761 14 29.5 14H16V0.5C16 0.223858 15.7761 0 15.5 0H14.5Z",
+        fill: "#C9CDD4"
+      }));
+    }
+
+    /**
+     * 图片选择器组件
+     * @en ImagePicker Component
+     * @type 数据输入
+     * @type_en Data Entry
+     * @name 图片选择器
+     * @name_en ImagePicker
+     */
+
+    var ImagePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _a = props.className,
+          className = _a === void 0 ? '' : _a,
+          style = props.style,
+          _b = props.accept,
+          accept = _b === void 0 ? 'image/*' : _b,
+          _c = props.multiple,
+          multiple = _c === void 0 ? false : _c,
+          capture = props.capture,
+          _d = props.columns,
+          columns = _d === void 0 ? 3 : _d,
+          _e = props.gutter,
+          gutter = _e === void 0 ? 8 : _e,
+          _f = props.limit,
+          limit = _f === void 0 ? 0 : _f,
+          _g = props.images,
+          images = _g === void 0 ? [] : _g,
+          maxSize = props.maxSize,
+          disabled = props.disabled,
+          deleteIcon = props.deleteIcon,
+          selectIcon = props.selectIcon,
+          _h = props.hideDelete,
+          hideDelete = _h === void 0 ? false : _h,
+          _j = props.hideSelect,
+          hideSelect = _j === void 0 ? false : _j,
+          _k = props.alwaysShowSelect,
+          alwaysShowSelect = _k === void 0 ? false : _k,
+          imageProps = props.imageProps,
+          renderLoading = props.renderLoading,
+          renderError = props.renderError,
+          onLongPress = props.onLongPress,
+          onClick = props.onClick,
+          _l = props.onChange,
+          onChange = _l === void 0 ? function () {
+        return null;
+      } : _l,
+          onMaxSizeExceed = props.onMaxSizeExceed,
+          onLimitExceed = props.onLimitExceed,
+          upload = props.upload,
+          selectAdapter = props.selectAdapter;
+      var domRef = React.useRef(null);
+      var fileRef = React.useRef(null);
+      React.useImperativeHandle(ref, function () {
+        return {
+          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 _a;
+
+              var dataURL = (_a = e.target) === null || _a === void 0 ? void 0 : _a.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) {
+        var files = __spreadArrays(event.target.files || []).filter(function (file) {
+          // 过滤maxSize
+          if (maxSize && file.size > maxSize * 1024) {
+            onMaxSizeExceed && onMaxSizeExceed(file);
+            return false;
+          }
+
+          return true;
+        }) || [];
+        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: upload ? 'loading' : 'loaded',
+              file: files[index]
+            };
+          });
+
+          var cacheRes = __spreadArrays(images, res);
+
+          onChange(cacheRes); // 执行upload
+
+          if (typeof upload === 'function') {
+            var propsImageLength_1 = images.length;
+            files.forEach(function (_file, index) {
+              upload(cacheRes[propsImageLength_1 + index]).then(function (data) {
+                cacheRes[propsImageLength_1 + index] = __assign(__assign({}, cacheRes[propsImageLength_1 + index]), data);
+              }).catch(function () {
+                cacheRes[propsImageLength_1 + index].status = 'error';
+              }).finally(function () {
+                cacheRes[propsImageLength_1 + index].status = 'loaded';
+                onChange(__spreadArrays(cacheRes));
+              });
+            });
+          }
+        });
+      };
+
+      var handleDelete = function handleDelete(index) {
+        onChange(images.filter(function (_i, j) {
+          return j !== index;
+        }));
+      }; // click && longPress
+
+
+      var timeOutEvent;
+
+      var handleTouchStart = function handleTouchStart(e, image, index) {
+        e.preventDefault();
+        timeOutEvent = setTimeout(function () {
+          timeOutEvent = 0;
+          typeof onLongPress === 'function' && onLongPress(e, image, index);
+        }, 750);
+      };
+
+      var handleTouchEnd = function handleTouchEnd(e, image, index) {
+        clearTimeout(timeOutEvent);
+
+        if (timeOutEvent !== 0) {
+          typeof onClick === 'function' && onClick(e, image, index);
+        }
+      };
+
+      var handleSelect = function handleSelect() {
+        var _a;
+
+        selectAdapter ? selectAdapter().then(function (_a) {
+          var files = _a.files;
+          return handleChange({
+            target: {
+              files: files
+            }
+          });
+        }) : (_a = fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+      };
+
+      var getGridData = function getGridData(prefixCls, locale) {
+        var _a;
+
+        var errorNode = function errorNode(index) {
+          if (renderError) {
+            return typeof renderError === 'function' ? renderError(index) : renderError;
+          }
+
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            className: prefixCls + "-image-picker-error"
+          }, /*#__PURE__*/React__default["default"].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;
+          return {
+            img: /*#__PURE__*/React__default["default"].createElement("div", {
+              key: index + "-" + url,
+              className: prefixCls + "-image-picker-image"
+            }, /*#__PURE__*/React__default["default"].createElement("div", {
+              onTouchStart: function onTouchStart(e) {
+                return handleTouchStart(e, image, index);
+              },
+              onTouchEnd: function onTouchEnd(e) {
+                return handleTouchEnd(e, image, index);
+              },
+              className: prefixCls + "-image-picker-image-container"
+            }, /*#__PURE__*/React__default["default"].createElement(BaseImage, __assign({
+              showLoading: true,
+              showError: true
+            }, imageProps || {}, {
+              src: url,
+              errorArea: errorNode(index),
+              loadingArea: loadingNode(index),
+              status: status || (imageProps === null || imageProps === void 0 ? void 0 : imageProps.status)
+            })), /*#__PURE__*/React__default["default"].createElement("div", {
+              className: prefixCls + "-image-picker-image-mask"
+            })), !hideDelete && /*#__PURE__*/React__default["default"].createElement("div", {
+              className: prefixCls + "-image-picker-close",
+              onClick: function onClick() {
+                return handleDelete(index);
+              }
+            }, deleteIcon || /*#__PURE__*/React__default["default"].createElement("div", {
+              className: prefixCls + "-image-picker-close-icon"
+            }, /*#__PURE__*/React__default["default"].createElement(IconClose, null)))),
+            title: ''
+          };
+        });
+        var showSelect = !hideSelect && images.length < (limit || Infinity);
+        var disableSelect = disabled || alwaysShowSelect && !showSelect;
+
+        if (showSelect || alwaysShowSelect) {
+          data.push({
+            img: /*#__PURE__*/React__default["default"].createElement("div", {
+              className: cls(prefixCls + "-image-picker-add", (_a = {}, _a[prefixCls + "-image-picker-add-disabled"] = disableSelect, _a)),
+              onClick: handleSelect
+            }, /*#__PURE__*/React__default["default"].createElement("div", {
+              className: prefixCls + "-image-picker-add-container"
+            }, selectIcon || /*#__PURE__*/React__default["default"].createElement("div", {
+              className: prefixCls + "-image-picker-add-icon"
+            }, /*#__PURE__*/React__default["default"].createElement(AddIcon, null)), !selectAdapter ? /*#__PURE__*/React__default["default"].createElement("input", {
+              capture: capture,
+              accept: accept,
+              multiple: multiple,
+              type: "file",
+              onChange: handleChange,
+              ref: fileRef
+            }) : null)),
+            title: ''
+          });
+        }
+
+        return data;
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var _b;
+
+        var prefixCls = _a.prefixCls,
+            _c = _a.locale,
+            locale = _c === void 0 ? defaultLocale : _c;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: cls(prefixCls + "-image-picker", className, (_b = {}, _b[prefixCls + "-image-picker-disabled"] = disabled, _b)),
+          style: style,
+          ref: domRef
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "-image-picker-container"
+        }, /*#__PURE__*/React__default["default"].createElement(Grid, {
+          data: getGridData(prefixCls, locale),
+          gutter: gutter,
+          columns: columns
+        })));
+      });
+    });
+
     /*!
-    * @arco-design/transformable v1.0.1
+    * @arco-design/transformable v1.0.2
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -15957,30 +16434,6 @@
 
     var index$7 = componentWrapper(ImagePreview, methodsGenerator$2(ImagePreview));
 
-    function IconClear(props) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.useCurrentColor,
-          useCurrentColor = _b === void 0 ? true : _b,
-          style = props.style,
-          other = __rest(props, ["className", "useCurrentColor", "style"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
-          className: prefixCls + "-icon " + prefixCls + "-icon-clear " + className,
-          width: "1em",
-          height: "1em",
-          style: style,
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 18 18"
-        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
-          d: "M9 1.1C4.7 1.1 1.1 4.7 1.1 9s3.5 7.9 7.9 7.9 7.9-3.5 7.9-7.9S13.3 1.1 9 1.1zm3.4 10.2c.2.2.2.5 0 .7l-.5.5c-.2.2-.5.2-.7 0L9 10.3l-2.2 2.2c-.2.2-.5.2-.7 0l-.6-.5c-.2-.2-.2-.5 0-.7l2.2-2.2-2.2-2.3c-.2-.2-.2-.5 0-.7l.5-.5c.2-.2.5-.2.7 0l2.2 2.2 2.2-2.2c.2-.2.5-.2.7 0l.5.5c.2.2.2.5 0 .7L10.1 9l2.3 2.3z",
-          fill: useCurrentColor ? 'currentColor' : '#000'
-        }));
-      });
-    }
-
     function useInputLogic(props, inputRef) {
       var value = props.value,
           defaultValue = props.defaultValue,
@@ -16428,7 +16881,7 @@
       });
     });
 
-    var BackArrow = function BackArrow(_a) {
+    function BackArrow(_a) {
       var _b = _a.color,
           color = _b === void 0 ? 'currentColor' : _b;
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -16441,7 +16894,7 @@
         d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9\n                l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
         fill: color
       })));
-    };
+    }
 
     /**
      * 导航栏组件，支持吸顶和沉浸式，支持在指定滚动位置展示，支持根据滚动位置实时更新style。
@@ -16585,30 +17038,6 @@
       });
     });
 
-    function IconClose(props) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.useCurrentColor,
-          useCurrentColor = _b === void 0 ? true : _b,
-          style = props.style,
-          other = __rest(props, ["className", "useCurrentColor", "style"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
-          className: prefixCls + "-icon " + prefixCls + "-icon-close " + className,
-          width: "1em",
-          height: "1em",
-          style: style,
-          viewBox: "0 0 1024 1024",
-          xmlns: "http://www.w3.org/2000/svg"
-        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
-          fill: useCurrentColor ? 'currentColor' : '#000',
-          d: "M509.568 447.083L796.16 160.469a21.333 21.333 0 0130.165 0l30.166 30.166a21.333 21.333 0 010 30.186L569.899 507.435l286.613 286.592a21.333 21.333 0 010 30.165l-30.165 30.165a21.333 21.333 0 01-30.166 0L509.568 567.765 222.933 854.38a21.333 21.333 0 01-30.186 0l-30.166-30.166a21.333 21.333 0 010-30.165l286.614-286.613L162.603 220.8a21.333 21.333 0 010-30.187l30.165-30.165a21.333 21.333 0 0130.187 0l286.613 286.613z"
-        }));
-      });
-    }
-
     /**
      * 可自定义换行或滚动效果，支持循环滚动。
      * @en Line wrapping or scrolling effects can be customized, and circular scrolling is supported.
@@ -18739,7 +19168,9 @@
               background: progressColor
             }
           }, currentPercentage, "%");
-        } else if (position === percentPosition) {
+        }
+
+        if (position === percentPosition) {
           return /*#__PURE__*/React__default["default"].createElement("div", {
             style: {
               color: progressColor
@@ -20688,54 +21119,6 @@
       Group: Group
     });
 
-    function IconStarFill(props) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.useCurrentColor,
-          useCurrentColor = _b === void 0 ? true : _b,
-          style = props.style,
-          other = __rest(props, ["className", "useCurrentColor", "style"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
-          className: prefixCls + "-icon " + prefixCls + "-icon-star-fill " + className,
-          width: "1em",
-          height: "1em",
-          style: style,
-          fill: useCurrentColor ? 'currentColor' : '#000',
-          viewBox: "0 0 1024 1024",
-          xmlns: "http://www.w3.org/2000/svg"
-        }, other), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("style", null)), /*#__PURE__*/React__default["default"].createElement("path", {
-          d: "M497.371 826.514L270.63 936.23c-18.286 7.314-40.229 0-47.543-18.286-3.657-3.657-7.315-10.972-3.657-18.286l25.6-248.686c0-10.971-3.658-18.285-7.315-29.257L69.486 435.2c-14.629-14.629-10.972-36.571 3.657-51.2 3.657-3.657 10.971-7.314 14.628-7.314l245.029-51.2c10.971-3.657 18.286-7.315 21.943-18.286l128-219.429C490.057 73.143 512 65.83 530.286 76.8c3.657 3.657 10.971 7.314 14.628 14.629l128 219.428c3.657 7.314 14.629 14.629 21.943 18.286l245.029 51.2c18.285 3.657 32.914 21.943 25.6 43.886 0 7.314-3.657 10.971-7.315 14.628L789.943 621.714c-7.314 7.315-10.972 18.286-7.314 29.257l25.6 248.686c3.657 18.286-10.972 36.572-32.915 40.229-7.314 0-14.628 0-18.285-3.657L530.286 826.514c-10.972-7.314-25.6-7.314-32.915 0z"
-        }));
-      });
-    }
-
-    function IconStarHalf(props) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.useCurrentColor,
-          useCurrentColor = _b === void 0 ? true : _b,
-          style = props.style,
-          other = __rest(props, ["className", "useCurrentColor", "style"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
-          className: prefixCls + "-icon " + prefixCls + "-icon-star-half " + className,
-          width: "1em",
-          height: "1em",
-          style: style,
-          fill: useCurrentColor ? 'currentColor' : '#000',
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 1024 1024"
-        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
-          d: "M513.8 71.6c-13.4-.9-25.9 5.8-31 16.2l-128 219.4c-3.7 11-11 14.6-21.9 18.3l-245 51.2c-3.7 0-11 3.7-14.6 7.3-14.6 14.6-18.3 36.6-3.7 51.2l168.2 186.5c3.7 11 7.3 18.3 7.3 29.3l-25.6 248.7c-3.7 7.3 0 14.6 3.7 18.3 7.3 18.3 29.3 25.6 47.5 18.3l226.7-109.7c3.9-3.9 10-5.7 16.4-5.4V71.6z"
-        }));
-      });
-    }
-
     /**
      * 评分组件，支持受控模式
      * @en Rate component, supports controlled mode
@@ -21398,7 +21781,7 @@
       renderThumb: baseRenderThumb('')
     });
 
-    var Popover = function Popover(_a) {
+    function Popover(_a) {
       var visible = _a.visible,
           content = _a.content,
           children = _a.children;
@@ -21418,7 +21801,7 @@
       }, content), /*#__PURE__*/React__default["default"].createElement("div", {
         className: prefixCls + "-slider-popover-arrow"
       }))), children);
-    };
+    }
 
     var Thumb = function Thumb(_a) {
       var className = _a.className,
@@ -21458,7 +21841,7 @@
       }, thumbEl));
     };
 
-    var Marks = function Marks(_a) {
+    function Marks(_a) {
       var runTimeConfig = _a.runTimeConfig,
           _b = _a.className,
           className = _b === void 0 ? '' : _b,
@@ -21495,7 +21878,7 @@
           className: prefixCls + "-slider-marks-item-label"
         }, label));
       }));
-    };
+    }
 
     var Slider = /*#__PURE__*/React.forwardRef(function (_, ref) {
       var _a = React.useContext(GlobalContext).prefixCls,
@@ -21666,86 +22049,6 @@
       }));
     });
 
-    function IconAdd(props) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.useCurrentColor,
-          useCurrentColor = _b === void 0 ? true : _b,
-          style = props.style,
-          other = __rest(props, ["className", "useCurrentColor", "style"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
-          className: prefixCls + "-icon " + prefixCls + "-icon-add " + className,
-          width: "1em",
-          height: "1em",
-          style: style,
-          viewBox: "0 0 1024 1024",
-          xmlns: "http://www.w3.org/2000/svg"
-        }, other), /*#__PURE__*/React__default["default"].createElement("path", {
-          fill: useCurrentColor ? 'currentColor' : '#000',
-          d: "M527.317 85.333c9.515 0 12.95.982 16.427 2.859a19.337 19.337 0 018.064 8.064c1.877 3.477 2.859 6.912 2.859 16.427v356.65h356.65c9.515 0 12.95.982 16.427 2.859a19.337 19.337 0 018.064 8.064c1.877 3.477 2.859 6.912 2.859 16.427v30.634c0 9.515-.982 12.95-2.859 16.427a19.392 19.392 0 01-8.064 8.064c-3.477 1.877-6.912 2.859-16.427 2.859h-356.65v356.65c0 9.515-.982 12.95-2.859 16.427a19.392 19.392 0 01-8.064 8.064c-3.477 1.877-6.912 2.859-16.427 2.859h-30.634c-9.515 0-12.95-.982-16.427-2.859a19.392 19.392 0 01-8.064-8.064c-1.877-3.477-2.859-6.912-2.859-16.427l-.021-356.65h-356.63c-9.514 0-12.949-.982-16.426-2.859a19.392 19.392 0 01-8.064-8.064c-1.877-3.477-2.859-6.912-2.859-16.427v-30.634c0-9.515.982-12.95 2.859-16.427a19.392 19.392 0 018.064-8.064c3.477-1.877 6.912-2.859 16.427-2.859l356.65-.021v-356.63c0-9.514.982-12.949 2.859-16.426a19.392 19.392 0 018.064-8.064c3.477-1.877 6.912-2.859 16.427-2.859h30.634z"
-        }));
-      });
-    }
-
-    function IconCheckBold(props) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.useCurrentColor,
-          useCurrentColor = _b === void 0 ? true : _b,
-          style = props.style,
-          other = __rest(props, ["className", "useCurrentColor", "style"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
-          className: prefixCls + "-icon " + prefixCls + "-icon-check-bold " + className,
-          width: "1em",
-          height: "1em",
-          style: style,
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 -0.97 10.07 10.07"
-        }, other), /*#__PURE__*/React__default["default"].createElement("g", {
-          "data-name": "\u56FE\u5C42 2"
-        }, /*#__PURE__*/React__default["default"].createElement("path", {
-          d: "M9.22.12a.49.49 0 00-.7.06L3.86 5.69 1.4 3.57a.51.51 0 00-.71.06l-.57.66A.49.49 0 00.17 5L3 7.38v.07l.69.55a.53.53 0 00.71 0l.6-.71a.22.22 0 000-.08l5-5.82a.51.51 0 00-.11-.71z",
-          fill: useCurrentColor ? 'currentColor' : '#000',
-          fillRule: "evenodd",
-          "data-name": "\u56FE\u5C42 1"
-        })));
-      });
-    }
-
-    function IconCloseBold(props) {
-      var _a = props.className,
-          className = _a === void 0 ? '' : _a,
-          _b = props.useCurrentColor,
-          useCurrentColor = _b === void 0 ? true : _b,
-          style = props.style,
-          other = __rest(props, ["className", "useCurrentColor", "style"]);
-
-      return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
-        var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign({
-          className: prefixCls + "-icon " + prefixCls + "-icon-close-bold " + className,
-          width: "1em",
-          height: "1em",
-          style: style,
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 6.92 6.92"
-        }, other), /*#__PURE__*/React__default["default"].createElement("g", {
-          "data-name": "\u56FE\u5C42 2"
-        }, /*#__PURE__*/React__default["default"].createElement("path", {
-          d: "M6.16.15l.62.62a.5.5 0 010 .7l-2 2 2 2a.51.51 0 010 .71l-.62.62a.51.51 0 01-.71 0l-2-2-2 2a.5.5 0 01-.7 0l-.6-.64a.5.5 0 010-.71l2-2-2-2a.48.48 0 010-.7l.62-.6a.48.48 0 01.7 0l2 2 2-2a.5.5 0 01.69 0z",
-          fill: useCurrentColor ? 'currentColor' : '#000',
-          fillRule: "evenodd",
-          "data-name": "\u56FE\u5C42 1"
-        })));
-      });
-    }
-
     var Step = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var title = props.title,
           description = props.description,
@@ -21772,7 +22075,9 @@
 
         if (current < index) {
           return 'wait';
-        } else if (current === index) {
+        }
+
+        if (current === index) {
           return 'process';
         }
 
@@ -22824,6 +23129,7 @@
     exports.Ellipsis = Ellipsis;
     exports.Grid = Grid;
     exports.Image = BaseImage;
+    exports.ImagePicker = ImagePicker;
     exports.ImagePreview = index$7;
     exports.Input = Input;
     exports.LoadMore = LoadMore;