@arco-design/mobile-react 2.19.1 → 2.21.0

package/cjs/grid/index.js

@@ -50,14 +50,21 @@ var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
 
   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,
@@ -71,7 +78,7 @@ var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
 
       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,
@@ -100,12 +107,6 @@ var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }) : 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/cjs/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/cjs/image/index.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 增强版的 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
@@ -53,10 +53,10 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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,
@@ -96,6 +96,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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 = {};
 
@@ -176,6 +177,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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,
@@ -271,7 +273,9 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   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
@@ -286,9 +290,10 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, 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"
@@ -301,7 +306,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         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
@@ -313,7 +318,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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();
@@ -324,7 +329,7 @@ var BaseImage = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     }, 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/cjs/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/cjs/image/style/index.less

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

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = AddIcon;
+
+var _react = _interopRequireDefault(require("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/cjs/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/cjs/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/cjs/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/cjs/image-picker/index.js

@@ -0,0 +1,331 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+var _exportNames = {};
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _es6Promise = require("es6-promise");
+
+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"));
+
+var _type = require("./type");
+
+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;