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

package/umd/image/index.js

@@ -59,8 +59,7 @@
     var loadingImageRef = (0, _react.useRef)(null);
     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 +99,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 = {};
 
@@ -275,7 +275,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,7 +292,7 @@
       }, 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
         }),
@@ -305,7 +307,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 +319,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 +330,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-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,184 @@
+import React, { InputHTMLAttributes } from 'react';
+import { ImageProps } from '../image';
+export interface ImagePickItem {
+    /**
+     * 图片地址
+     * @en Image Url
+     */
+    url: string;
+    /**
+     * 图片文件
+     * @en Image File
+     */
+    file?: File;
+    /**
+     * 图片状态
+     * @en Image Status
+     * @default 'loaded'
+     */
+    status: 'loaded' | 'loading' | 'error';
+}
+export interface AdapterFile {
+    url?: string;
+    size: number;
+    name: string;
+}
+export interface SelectCallback {
+    files: AdapterFile[];
+}
+export interface ImagePickerProps {
+    /**
+     * 自定义类名
+     * @en Custom className
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 已选择图片列表
+     * @en selected images list
+     */
+    images: ImagePickItem[];
+    /**
+     * 可以选择的文件类型
+     * @en Available File Types
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * 是否支持多选
+     * @en Whether To Support Multiple Selection
+     */
+    multiple?: boolean;
+    /**
+     * 图片选取模式 Image selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     * @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
+     */
+    capture?: InputHTMLAttributes<unknown>['capture'];
+    /**
+     * 一行展示图片张数
+     * @en The Number Of Pictures Displayed In A Row
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * 格子间的间距
+     * @en spacing between grids
+     * @default 8
+     */
+    gutter?: number;
+    /**
+     * 最多选择图片张数，超出数量自动隐藏上传按钮，0表示不做限制
+     * @en max Pictures Can Choose
+     */
+    limit?: number;
+    /**
+     * 文件大小限制，单位为K
+     * @en File size limit, in K
+     */
+    maxSize?: number;
+    /**
+     * 是否隐藏删除Icon
+     * @en Whether to hide delete Icon
+     * @default false
+     */
+    hideDelete?: boolean;
+    /**
+     * 是否隐藏选择Icon
+     * @en Whether to hide Select Icon
+     * @default false
+     */
+    hideSelect?: boolean;
+    /**
+     * 是否总是展示选择Icon，默认情况下当图片数量超出limit值时会自动隐藏选择Icon
+     * @en Whether to always show Select Icon
+     * @default false
+     */
+    alwaysShowSelect?: boolean;
+    /**
+     * 禁用选择和删除图片
+     * @en Disable Select & Delete Image
+     */
+    disabled?: boolean;
+    /**
+     * 自定义删除图标
+     * @en Defined Delete Icon
+     */
+    deleteIcon?: React.ReactNode;
+    /**
+     * 自定义选择图标
+     * @en Defined Select Icon
+     */
+    selectIcon?: React.ReactNode;
+    /**
+     * 透传给图片的属性
+     * @en Attributes passed through to the image
+     */
+    imageProps?: ImageProps;
+    /**
+     * 自定义上传失败展示
+     * @en Defined upload failed display
+     */
+    renderError?: (index?: number) => React.ReactNode | React.ReactNode;
+    /**
+     * 自定义上传中展示
+     * @en Defined uploading display
+     */
+    renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
+    /**
+     * 上传方法
+     * @en upload function
+     */
+    upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
+    onSelect?: (...args: any[]) => void;
+    /**
+     * 已选图片列表发生变化
+     * @en The list of selected images changes
+     */
+    onChange?: (fileList: ImagePickItem[]) => Promise<void>;
+    /**
+     * 图片超过限制大小
+     * @en Image exceeds size limit
+     */
+    onMaxSizeExceed?: (file: File) => void;
+    /**
+     * 选择张数超过限制
+     * @en The number of pictures exceeds the limit
+     */
+    onLimitExceed?: (files: File[]) => void;
+    /**
+     * 图片点击
+     * @en click event
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
+    /**
+     * 图片长按事件
+     * @en long press event
+     */
+    onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
+    /**
+     * 图片选择适配器
+     * @en Select Adaptor
+     */
+    selectAdapter: () => Promise<SelectCallback>;
+}
+export interface ImagePickerRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 图片选择器组件
+ * @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,310 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "../icon", "../image", "../grid", "./add-icon"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../icon"), require("../image"), require("../grid"), require("./add-icon"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.icon, global.image, global.grid, global.addIcon);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _icon, _image, _grid, _addIcon) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _image = _interopRequireDefault(_image);
+  _grid = _interopRequireDefault(_grid);
+  _addIcon = _interopRequireDefault(_addIcon);
+
+  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;
+});