@arco-design/mobile-react 2.19.1-7cada34.0 → 2.19.1-941e02b.7

package/esm/image/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
-import { cls, handleUnit, nextTick } from '@arco-design/mobile-utils';
+import { cls, defaultLocale, handleUnit, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Loading from '../loading';
 import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '../_helpers';
@@ -39,8 +39,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   var loadingImageRef = 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,
@@ -80,6 +79,7 @@ export var BaseImage = /*#__PURE__*/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 = useMemo(function () {
     var imageStyle = {};
 
@@ -255,7 +255,9 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
-    var prefixCls = _ref.prefixCls;
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-image all-border-box", {
         preview: isPreview
@@ -270,7 +272,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
     }, bottomOverlap || /*#__PURE__*/React.createElement("div", {
       className: "image-placeholder"
     })) : null, /*#__PURE__*/React.createElement("div", {
-      className: cls('image-container', imageStatus, {
+      className: cls('image-container', validStatus, {
         animate: Boolean(animateDuration),
         'static-label': staticLabel
       }),
@@ -285,7 +287,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
         return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
       },
       onError: handleStaticImageError
-    })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/React.createElement("div", {
+    })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-loading-container",
       style: {
         borderRadius: radius
@@ -297,7 +299,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       className: "loading-icon",
       radius: 8.5,
       stroke: 3
-    }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/React.createElement("div", {
+    }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-error-container",
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -308,7 +310,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }, errorArea || /*#__PURE__*/React.createElement("div", {
       className: "image-retry-load"
-    }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/React.createElement("div", {
+    }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/React.createElement("div", {
       className: "image-content image-top-overlap",
       style: {
         borderRadius: radius

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export default function AddIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "30",
+    height: "30",
+    viewBox: "0 0 30 30",
+    fill: "none"
+  }, /*#__PURE__*/React.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/esm/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/esm/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/esm/image-picker/index.d.ts

@@ -0,0 +1,181 @@
+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.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
+    /**
+     * 图片选择适配器
+     * @en Select Adaptor
+     */
+    selectAdapter: () => Promise<SelectCallback>;
+}
+export interface ImagePickerRef {
+    /** 最外层元素 DOM */
+    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/esm/image-picker/index.js

@@ -0,0 +1,282 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls, defaultLocale } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { IconClose } from '../icon';
+import Image from '../image';
+import Grid from '../grid';
+import AddIcon from './add-icon';
+
+/**
+ * 图片选择器组件
+ * @en ImagePicker Component
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 图片选择器
+ * @name_en ImagePicker
+ */
+var ImagePicker = /*#__PURE__*/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 = useRef(null);
+  var fileRef = useRef(null);
+  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) {
+    var files = [].concat(event.target.files || []).filter(function (file) {
+      // 过滤maxSize
+      if (maxSize && file.size > maxSize * 1024) {
+        onMaxSizeExceed && onMaxSizeExceed(file);
+        return false;
+      }
+
+      return true;
+    }) || [];
+    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] = _extends({}, 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;
+      typeof onLongPress === 'function' && onLongPress(e, image, index);
+    }, 750);
+  };
+
+  var handleTouchEnd = function handleTouchEnd(e, image, index) {
+    clearTimeout(timeOutEvent);
+
+    if (timeOutEvent !== 0) {
+      typeof onClick === 'function' && 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
+        }
+      });
+    }) : (_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.createElement("div", {
+        className: prefixCls + "-image-picker-error"
+      }, /*#__PURE__*/React.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.createElement("div", {
+          key: index + "-" + url,
+          className: prefixCls + "-image-picker-image"
+        }, /*#__PURE__*/React.createElement("div", {
+          onTouchStart: function onTouchStart(e) {
+            return handleTouchStart(e, image, index);
+          },
+          onTouchEnd: function onTouchEnd(e) {
+            return handleTouchEnd(e, image, index);
+          },
+          className: prefixCls + "-image-picker-image-container"
+        }, /*#__PURE__*/React.createElement(Image, _extends({
+          showLoading: true,
+          showError: true
+        }, imageProps || {}, {
+          src: url,
+          errorArea: errorNode(index),
+          loadingArea: loadingNode(index),
+          status: status || (imageProps == null ? void 0 : imageProps.status)
+        })), /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "-image-picker-image-mask"
+        })), !hideDelete && /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "-image-picker-close",
+          onClick: function onClick() {
+            return handleDelete(index);
+          }
+        }, deleteIcon || /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "-image-picker-close-icon"
+        }, /*#__PURE__*/React.createElement(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.createElement("div", {
+          className: cls(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
+          onClick: handleSelect
+        }, /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "-image-picker-add-container"
+        }, selectIcon || /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "-image-picker-add-icon"
+        }, /*#__PURE__*/React.createElement(AddIcon, null)), !selectAdapter ? /*#__PURE__*/React.createElement("input", {
+          capture: capture,
+          accept: accept,
+          multiple: multiple,
+          type: "file",
+          onChange: handleChange,
+          ref: fileRef
+        }) : null)),
+        title: ''
+      });
+    }
+
+    return data;
+  };
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
+    var _cls2;
+
+    var prefixCls = _ref2.prefixCls,
+        _ref2$locale = _ref2.locale,
+        locale = _ref2$locale === void 0 ? defaultLocale : _ref2$locale;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
+      style: style,
+      ref: domRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-image-picker-container"
+    }, /*#__PURE__*/React.createElement(Grid, {
+      data: getGridData(prefixCls, locale),
+      gutter: gutter,
+      columns: columns
+    })));
+  });
+});
+export default ImagePicker;