@arco-design/mobile-react 2.24.1 → 2.25.0

package/cjs/image-picker/index.js

@@ -1,92 +1,69 @@
 "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,
-      onSelectClick = props.onSelectClick,
-      onDeleteClick = props.onDeleteClick;
+    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,
+    onSelectClick = props.onSelectClick,
+    onDeleteClick = props.onDeleteClick;
   var domRef = (0, _react.useRef)(null);
   var fileRef = (0, _react.useRef)(null);
   var cacheRef = (0, _react.useRef)([]);
@@ -95,35 +72,27 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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
@@ -131,21 +100,17 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         onMaxSizeExceed && onMaxSizeExceed(file);
         return false;
       }
-
       return true;
     }) || [];
-
     if (!fromAdapter) {
       event.target.value = '';
-    } // 截断limit
-
-
+    }
+    // 截断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) {
@@ -157,8 +122,8 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         };
       });
       cacheRef.current = [].concat(images, res);
-      onChange([].concat(cacheRef.current)); // 执行upload
-
+      onChange([].concat(cacheRef.current));
+      // 执行upload
       if (typeof upload === 'function') {
         files.forEach(function (_file) {
           upload(cacheRef.current.find(function (_ref) {
@@ -185,36 +150,30 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     });
   };
-
   var handleDelete = function handleDelete(index) {
     onDeleteClick && onDeleteClick(index);
     onChange(images.filter(function (_i, j) {
       return j !== index;
     }));
-  }; // click && longPress
-
+  };
 
+  // click && longPress
   var timeOutEvent;
-
   var handleTouchStart = function handleTouchStart(e, image, index) {
     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(e) {
     if (e.target !== fileRef.current) {
       var _fileRef$current;
-
       onSelectClick && onSelectClick();
       selectAdapter ? selectAdapter().then(function (_ref4) {
         var files = _ref4.files;
@@ -226,29 +185,24 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }) : (_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;
+        status = image.status;
       return {
         img: /*#__PURE__*/_react.default.createElement("div", {
           key: index + "-" + url,
@@ -284,10 +238,8 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
     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)),
@@ -309,16 +261,13 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         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;
+      _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,
@@ -332,5 +281,15 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })));
   });
 });
-var _default = ImagePicker;
+
+/**
+ * 图片选择器组件
+ * @en ImagePicker Component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 图片选择器
+ * @name_en ImagePicker
+ * @displayName ImagePicker
+ */
+var _default = (0, _mobileUtils.componentWrapper)(ImagePicker, 'ImagePicker');
 exports.default = _default;

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

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

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

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

package/cjs/image-preview/demo/style/css/mobile.css

@@ -29,3 +29,13 @@
   border-radius: 2px;
   overflow: hidden;
 }
+.demo-image-preview-1 .image-description {
+  position: absolute;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  left: 1.08rem;
+  bottom: 0.2rem;
+  font-size: 0.28rem;
+  line-height: 0.44rem;
+  color: #fff;
+}

package/cjs/image-preview/demo/style/mobile.less

@@ -23,3 +23,14 @@
         }
     }
 }
+.demo-image-preview-1 {
+    .image-description {
+        position: absolute;
+        transform: translateZ(0);
+        .rem(left, 54);
+        .rem(bottom, 10);
+        .rem(font-size, 14);
+        .rem(line-height, 22);
+        color: #fff;
+    }
+}

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

@@ -23,6 +23,11 @@ export interface PreviewImageProps {
      * @en Thumbnail fill mode (backgroundPosition), default value is top center
      */
     thumbPosition?: string;
+    /**
+     * 自定义DOM
+     * @en Custom dom
+     */
+    extraNode?: ReactNode;
 }
 export interface ImagePreviewProps extends Pick<CarouselProps, 'animateDurationSlide' | 'showIndicator' | 'hideSingleIndicator' | 'indicatorPos' | 'percentToChange' | 'distanceToChange' | 'speedToChange' | 'swipeable'> {
     /**