@arco-design/mobile-react 2.19.1 → 2.21.0

package/umd/ellipsis/index.d.ts

@@ -4,7 +4,7 @@ export * from './type';
 /**
  * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
  * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 文本缩略
  * @name_en Ellipsis

package/umd/ellipsis/index.js

@@ -35,7 +35,7 @@
   /**
    * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
    * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 文本缩略
    * @name_en Ellipsis

package/umd/grid/index.js

@@ -57,14 +57,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.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,
@@ -78,7 +85,7 @@
         }
 
         var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? 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 ? void 0 : gutter.x) || 0;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -107,12 +114,6 @@
         }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/_react.default.createElement("i", {
           className: "horizontal-border"
         }) : null);
-      }), fakeGrids.map(function (_, i) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _mobileUtils.cls)(prefix + "-rows-item fake-col"),
-          key: i,
-          style: widthStyle
-        });
       }));
     };
 

package/umd/image/index.d.ts

@@ -14,7 +14,6 @@ export interface ImageProps {
     /**
      * 指定图片状态，staticLabel=false时有效
      * @en The specified image state, valid when staticLabel=false
-     * @default "init"
      */
     status?: ImageStatus;
     /**
@@ -178,7 +177,7 @@ export interface ImageRef {
 /**
  * 增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
  * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 图片
  * @name_en Image

package/umd/image/index.js

@@ -28,7 +28,7 @@
   /**
    * 增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
    * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 图片
    * @name_en Image
@@ -57,10 +57,10 @@
     var wrapRef = (0, _react.useRef)(null);
     var retryCountRef = (0, _react.useRef)(0);
     var loadingImageRef = (0, _react.useRef)(null);
+    var hasLoadedRef = (0, _react.useRef)(false);
     var style = props.style,
         className = props.className,
-        _props$status = props.status,
-        status = _props$status === void 0 ? 'init' : _props$status,
+        status = props.status,
         src = props.src,
         width = props.width,
         height = props.height,
@@ -100,6 +100,7 @@
     var isPreview = Boolean(fit.indexOf('preview') >= 0);
     var actualBoxWidth = boxWidth || windowWidth;
     var actualBoxHeight = boxHeight || windowHeight;
+    var validStatus = status === undefined ? imageStatus : status;
     var attrs = (0, _react.useMemo)(function () {
       var imageStyle = {};
 
@@ -180,6 +181,7 @@
       image.onload = function (evt) {
         loadingImageRef.current = null;
         imageDomRef.current = image;
+        hasLoadedRef.current = true;
         changeStatus('loaded');
         var _image$width = image.width,
             imageWidth = _image$width === void 0 ? 0 : _image$width,
@@ -275,7 +277,9 @@
     }
 
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
-      var prefixCls = _ref.prefixCls;
+      var prefixCls = _ref.prefixCls,
+          _ref$locale = _ref.locale,
+          locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-image all-border-box", {
           preview: isPreview
@@ -290,9 +294,10 @@
       }, bottomOverlap || /*#__PURE__*/_react.default.createElement("div", {
         className: "image-placeholder"
       })) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)('image-container', imageStatus, {
+        className: (0, _mobileUtils.cls)('image-container', validStatus, {
           animate: Boolean(animateDuration),
-          'static-label': staticLabel
+          'static-label': staticLabel,
+          'has-loaded': hasLoadedRef.current
         }),
         style: (0, _helpers.getStyleWithVendor)({
           transitionDuration: animateDuration + "ms"
@@ -305,7 +310,7 @@
           return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
         },
         onError: handleStaticImageError
-      })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/_react.default.createElement("div", {
+      })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-loading-container",
         style: {
           borderRadius: radius
@@ -317,7 +322,7 @@
         className: "loading-icon",
         radius: 8.5,
         stroke: 3
-      }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/_react.default.createElement("div", {
+      }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-error-container",
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -328,7 +333,7 @@
         }
       }, errorArea || /*#__PURE__*/_react.default.createElement("div", {
         className: "image-retry-load"
-      }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
+      }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-top-overlap",
         style: {
           borderRadius: radius

package/umd/image/style/css/index.css

@@ -66,7 +66,8 @@
 }
 .arco-image .image-container.static-label,
 .arco-image .image-container.loaded,
-.arco-image .image-container.error {
+.arco-image .image-container.error,
+.arco-image .image-container.has-loaded {
   opacity: 1;
 }
 .arco-image .image-container.animate {

package/umd/image/style/index.less

@@ -66,7 +66,8 @@
 
         &.static-label,
         &.loaded,
-        &.error {
+        &.error,
+        &.has-loaded {
             opacity: 1;
         }
 

package/umd/image-picker/add-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AddIcon(): JSX.Element;

package/umd/image-picker/add-icon.js

@@ -0,0 +1,35 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.addIcon = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = AddIcon;
+  _react = _interopRequireDefault(_react);
+
+  function AddIcon() {
+    return /*#__PURE__*/_react.default.createElement("svg", {
+      width: "30",
+      height: "30",
+      viewBox: "0 0 30 30",
+      fill: "none"
+    }, /*#__PURE__*/_react.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"
+    }));
+  }
+});

package/umd/image-picker/demo/style/css/mobile.css

@@ -0,0 +1,40 @@
+#demo-image-picker .demo-space {
+  font-size: 14px;
+  line-height: 1;
+  margin: 8px 0;
+}
+#demo-image-picker #demo-order-5 .custom-delete {
+  top: 4px;
+  right: 4px;
+  font-size: 18px;
+  position: absolute;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  line-height: 16px;
+  text-align: center;
+}
+#demo-image-picker #demo-order-5 .custom-delete-bg {
+  background-color: #0000004d;
+}
+#demo-image-picker #demo-order-6 .loading,
+#demo-image-picker #demo-order-6 .loading1,
+#demo-image-picker #demo-order-6 .load-error,
+#demo-image-picker #demo-order-6 .load-error1 {
+  background: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  line-height: 1.5;
+  font-size: 14px;
+  color: #fff;
+  width: 100%;
+  height: 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;
+}

package/umd/image-picker/demo/style/mobile.less

@@ -0,0 +1,42 @@
+@import '../../../../style/mixin.less';
+
+#demo-image-picker {
+    .demo-space{
+        font-size: 14px;
+        line-height: 1;
+        margin: 8px 0;
+    }
+    #demo-order-5 {
+        .custom-delete {
+            top: 4px;
+            right: 4px;
+            font-size: 18px;
+            position: absolute;
+            border-radius: 50%;
+            width: 18px;
+            height: 18px;
+            line-height: 16px;
+            text-align: center;
+        }
+        .custom-delete-bg {
+            background-color: #0000004d;
+        }
+    }
+    #demo-order-6 {
+        .loading,
+        .loading1,
+        .load-error,
+        .load-error1 {
+            background: rgba(0, 0, 0, 0.5);
+            text-align: center;
+            line-height: 1.5;
+            font-size: 14px;
+            color: #fff;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}

package/umd/image-picker/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ImagePickerProps, ImagePickerRef } from './type';
+export * from './type';
+/**
+ * 图片选择器组件
+ * @en ImagePicker Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 图片选择器
+ * @name_en ImagePicker
+ */
+declare const ImagePicker: React.ForwardRefExoticComponent<ImagePickerProps & React.RefAttributes<ImagePickerRef>>;
+export default ImagePicker;

package/umd/image-picker/index.js

@@ -0,0 +1,329 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "es6-promise", "@arco-design/mobile-utils", "../context-provider", "../icon", "../image", "../grid", "./add-icon", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("es6-promise"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../icon"), require("../image"), require("../grid"), require("./add-icon"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.es6Promise, global.mobileUtils, global.contextProvider, global.icon, global.image, global.grid, global.addIcon, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _es6Promise, _mobileUtils, _contextProvider, _icon, _image, _grid, _addIcon, _type) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  var _exportNames = {};
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _image = _interopRequireDefault(_image);
+  _grid = _interopRequireDefault(_grid);
+  _addIcon = _interopRequireDefault(_addIcon);
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
+
+  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);
+    var cacheRef = (0, _react.useRef)([]);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+
+    var parseFile = function parseFile(file) {
+      return new _es6Promise.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;
+      } // 解析文件生成预览
+
+
+      _es6Promise.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(images, 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;
+              });
+              cacheRef.current[index] = (0, _extends2.default)({}, cacheRef.current[index], data, {
+                status: undefined
+              });
+            }).catch(function () {
+              var index = cacheRef.current.findIndex(function (_ref3) {
+                var file = _ref3.file;
+                return file === _file;
+              });
+              cacheRef.current[index].status = 'error';
+            }).finally(function () {
+              onChange([].concat(cacheRef.current));
+            });
+          });
+        }
+      });
+    };
+
+    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 (_ref4) {
+        var files = _ref4.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 (_ref5) {
+      var _cls2;
+
+      var prefixCls = _ref5.prefixCls,
+          _ref5$locale = _ref5.locale,
+          locale = _ref5$locale === void 0 ? _mobileUtils.defaultLocale : _ref5$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;
+});