@arco-design/mobile-react 2.19.1 → 2.19.2-ee92494.5

package/cjs/image-picker/index.js

@@ -0,0 +1,307 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _icon = require("../icon");
+
+var _image = _interopRequireDefault(require("../image"));
+
+var _grid = _interopRequireDefault(require("../grid"));
+
+var _addIcon = _interopRequireDefault(require("./add-icon"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 图片选择器组件
+ * @en ImagePicker Component
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 图片选择器
+ * @name_en ImagePicker
+ */
+var ImagePicker = /*#__PURE__*/(0, _react.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;
+  var domRef = (0, _react.useRef)(null);
+  var fileRef = (0, _react.useRef)(null);
+  (0, _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 _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 = [].concat(event.target.files || []).filter(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: upload ? 'loading' : 'loaded',
+          file: files[index]
+        };
+      });
+      var cacheRes = [].concat(images, res);
+      onChange(cacheRes); // 执行upload
+
+      if (typeof upload === 'function') {
+        var propsImageLength = images.length;
+        files.forEach(function (_file, index) {
+          upload(cacheRes[propsImageLength + index]).then(function (data) {
+            cacheRes[propsImageLength + index] = (0, _extends2.default)({}, cacheRes[propsImageLength + index], data);
+          }).catch(function () {
+            cacheRes[propsImageLength + index].status = 'error';
+          }).finally(function () {
+            cacheRes[propsImageLength + index].status = 'loaded';
+            onChange([].concat(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;
+      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() {
+    var _fileRef$current;
+
+    selectAdapter ? selectAdapter().then(function (_ref) {
+      var files = _ref.files;
+      return handleChange({
+        target: {
+          files: files
+        }
+      }, true);
+    }) : (_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.default.createElement("div", {
+        className: prefixCls + "-image-picker-error"
+      }, /*#__PURE__*/_react.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.createElement("div", {
+          key: index + "-" + url,
+          className: prefixCls + "-image-picker-image"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          onTouchStart: function onTouchStart(e) {
+            return handleTouchStart(e, image, index);
+          },
+          onClick: function onClick(e) {
+            return handleClick(e, image, index);
+          },
+          className: prefixCls + "-image-picker-image-container"
+        }, /*#__PURE__*/_react.default.createElement(_image.default, (0, _extends2.default)({
+          showLoading: true,
+          showError: true
+        }, imageProps || {}, {
+          src: url,
+          errorArea: errorNode(index),
+          loadingArea: loadingNode(index),
+          status: status || (imageProps == null ? void 0 : imageProps.status)
+        })), /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-image-picker-image-mask"
+        })), !hideDelete && /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-image-picker-close",
+          onClick: function onClick() {
+            return handleDelete(index);
+          }
+        }, deleteIcon || /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-image-picker-close-icon"
+        }, /*#__PURE__*/_react.default.createElement(_icon.IconClose, null)))),
+        title: ''
+      };
+    });
+    var showSelect = !hideSelect && images.length < (limit || Infinity);
+    var disableSelect = disabled || alwaysShowSelect && !showSelect;
+
+    if (showSelect || alwaysShowSelect) {
+      var _cls;
+
+      data.push({
+        img: /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _mobileUtils.cls)(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
+          onClick: handleSelect
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-image-picker-add-container"
+        }, selectIcon || /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-image-picker-add-icon"
+        }, /*#__PURE__*/_react.default.createElement(_addIcon.default, null)), !selectAdapter ? /*#__PURE__*/_react.default.createElement("input", {
+          capture: capture,
+          accept: accept,
+          multiple: multiple,
+          type: "file",
+          onChange: function onChange(e) {
+            return handleChange(e);
+          },
+          ref: fileRef
+        }) : null)),
+        title: ''
+      });
+    }
+
+    return data;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+    var _cls2;
+
+    var prefixCls = _ref2.prefixCls,
+        _ref2$locale = _ref2.locale,
+        locale = _ref2$locale === void 0 ? _mobileUtils.defaultLocale : _ref2$locale;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
+      style: style,
+      ref: domRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-image-picker-container"
+    }, /*#__PURE__*/_react.default.createElement(_grid.default, {
+      data: getGridData(prefixCls, locale),
+      gutter: gutter,
+      columns: columns
+    })));
+  });
+});
+var _default = ImagePicker;
+exports.default = _default;

package/cjs/image-picker/style/css/index.css

@@ -0,0 +1,147 @@
+.arco-image-picker {
+  font-size:  0.28rem ;
+}
+.arco-image-picker-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+}
+.arco-image-picker-image {
+  position: relative;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  padding-top: 100%;
+  border-radius:  0.04rem ;
+  overflow: hidden;
+}
+.arco-image-picker-image-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+}
+.arco-image-picker-image .arco-image {
+  height: 100%;
+  width: 100%;
+}
+.arco-image-picker-image-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.arco-image-picker-add {
+  background-color:  #f7f8fa ;
+  border-radius:  0.04rem ;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: 100%;
+}
+.arco-image-picker-add-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  text-align: center;
+  font-size:  0.24rem ;
+  color:  #86909c ;
+}
+.arco-image-picker-add-icon {
+  font-size:  0.6rem ;
+  color:  #d8d8d8 ;
+}
+.arco-image-picker-add-icon svg {
+  display: block;
+}
+.arco-image-picker-add-disabled {
+  pointer-events: none;
+}
+.arco-image-picker-add-disabled .arco-image-picker-add-icon {
+  opacity:  0.7 ;
+}
+.arco-image-picker-add input {
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+.arco-image-picker-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+}
+.arco-image-picker-close-icon {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  font-size:  0.24rem ;
+  width:  0.36rem ;
+  height:  0.36rem ;
+  color:  #ffffff ;
+  background:  rgba(0, 0, 0, 0.3) ;
+  border-radius:  0 0.04rem ;
+}
+.arco-image-picker-error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  background:  rgba(0, 0, 0, 0.5) ;
+  color:  #ffffff ;
+  font-size:  0.28rem ;
+}
+.arco-image-picker-disabled {
+  pointer-events: none;
+}

package/cjs/image-picker/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/cjs/image-picker/style/css/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("./index.css");

package/cjs/image-picker/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/cjs/image-picker/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("./index.less");

package/cjs/image-picker/style/index.less

@@ -0,0 +1,116 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-image-picker {
+    .use-var(font-size, image-picker-font-size);
+    &-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .container() {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        left: 0;
+    }
+    &-image {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 100%;
+        .use-var(border-radius, image-picker-border-radius);
+        overflow: hidden;
+        &-container {
+            .container()
+        }
+        .@{prefix}-image {
+            height: 100%;
+            width: 100%;
+        }
+        &-mask {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+        }
+    }
+    &-add {
+        .use-var(background-color, image-picker-add-background);
+        .use-var(border-radius, image-picker-border-radius);
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding-top: 100%;
+        &-container {
+            .container();
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            .use-var(font-size, image-picker-add-text-font-size);
+            .use-var(color, image-picker-add-text-color);
+        }
+        &-icon {
+            .use-var(font-size, image-picker-add-icon-font-size);
+            .use-var(color, image-picker-add-icon-color);
+            svg {
+                display: block;
+            }
+        }
+        &-disabled {
+            pointer-events: none;
+        }
+        &-disabled &-icon {
+            .use-var(opacity, image-picker-disabled-opacity);
+        }
+        input {
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+    }
+    &-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+        &-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(font-size, image-picker-close-font-size);
+            .use-var(width, image-picker-close-width);
+            .use-var(height, image-picker-close-height);
+            .use-var(color, image-picker-close-color);
+            .use-var(background, image-picker-close-background);
+            .use-var(border-radius, image-picker-close-border-radius);
+        }
+    }
+    &-error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .use-var(background, image-picker-error-background);
+        .use-var(color, image-picker-error-color);
+        .use-var(font-size, image-picker-font-size);
+    }
+}
+
+.@{prefix}-image-picker-disabled {
+    pointer-events: none;
+}

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

@@ -268,9 +268,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "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" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
+    open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "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">) => {
         close: () => void;
-        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "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" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
+        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "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; /**
          * 是否可循环滑动
          * @en Whether it can be swiped circularly
          * @default false

package/cjs/index.d.ts

@@ -21,6 +21,7 @@ export { default as Ellipsis } from './ellipsis';
 export { default as Grid } from './grid';
 export { default as Image } from './image';
 export { default as ShowMonitor } from './show-monitor';
+export { default as ImagePicker } from './image-picker';
 export { default as ImagePreview } from './image-preview';
 export { default as Input } from './input';
 export { default as LoadMore } from './load-more';

package/cjs/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
+exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
 
 var _actionSheet = _interopRequireDefault(require("./action-sheet"));
 
@@ -97,6 +97,10 @@ var _showMonitor = _interopRequireDefault(require("./show-monitor"));
 
 exports.ShowMonitor = _showMonitor.default;
 
+var _imagePicker = _interopRequireDefault(require("./image-picker"));
+
+exports.ImagePicker = _imagePicker.default;
+
 var _imagePreview = _interopRequireDefault(require("./image-preview"));
 
 exports.ImagePreview = _imagePreview.default;

package/cjs/steps/demo/style/css/mobile.css

@@ -61,5 +61,5 @@
   background: #165DFF;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
-  font-size: 12PX;
+  font-size: 11PX;
 }

package/cjs/steps/demo/style/mobile.less

@@ -30,7 +30,7 @@
             }
             .set-steps-color(#165DFF);
             .@{prefix}-steps-item-custom-icon {
-                font-size: 12PX;
+                font-size: 11PX;
             }
         }
     }