@arco-design/mobile-react 2.20.0 → 2.21.0

package/esm/date-picker/index.d.ts

@@ -12,7 +12,7 @@ export interface DatePickerRef {
 /**
  * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
  * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 日期时间选择器
  * @name_en DatePicker

package/esm/date-picker/index.js

@@ -21,7 +21,7 @@ var initDate = Date.now();
 /**
  * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
  * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 日期时间选择器
  * @name_en DatePicker

package/esm/dropdown/dropdown.js

@@ -78,7 +78,7 @@ export function componentGenerator(Comp) {
     // @en down=0 is to expand upwards, 1 is to expand downwards
 
 
-    var _useState3 = useState(direction === 'down'),
+    var _useState3 = useState(null),
         down = _useState3[0],
         setDown = _useState3[1];
 
@@ -117,12 +117,15 @@ export function componentGenerator(Comp) {
 
     usePopupScroll(showDropdown, domRef.current, getScrollContainer);
     usePreventBodyScroll(showDropdown, preventBodyScroll, initialBodyOverflow);
-    useEffect(function () {
+    var updateDown = useCallback(function (wrapperHeight) {
       var _dropdownContainer$cu2;
 
       // 为0的时候不改变
       // @en Does not change when it is 0
-      if (optionsWrapperHeight === 0) return;
+      if (wrapperHeight === 0) {
+        return;
+      }
+
       var tempEl = getAnchorElement ? getAnchorElement() : (_dropdownContainer$cu2 = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu2.parentElement;
 
       var _ref = (tempEl == null ? void 0 : tempEl.getBoundingClientRect()) || {
@@ -137,7 +140,7 @@ export function componentGenerator(Comp) {
       var tempMaskHeight = windowHeight - tempTop; // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
       // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
 
-      var tempDown = direction !== 'up' && optionsWrapperHeight < tempMaskHeight || optionsWrapperHeight > tempTop;
+      var tempDown = direction !== 'up' && wrapperHeight < tempMaskHeight || wrapperHeight > tempTop;
 
       if (tempDown) {
         maskHeight.current = tempMaskHeight;
@@ -154,7 +157,7 @@ export function componentGenerator(Comp) {
       }
 
       setDown(tempDown);
-    }, [dropdownContainer, optionsWrapperHeight, props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
+    }, [props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
     /**
      * 取消选择
      * @en Cancel selection
@@ -195,19 +198,27 @@ export function componentGenerator(Comp) {
       };
     }, [showDropdown, clickOtherToClose, handleCancel]);
     useEffect(function () {
-      nextTick(function () {
-        if (height !== void 0) {
-          // 受控模式下，完全交由外层控制
-          // @en In controlled mode, it is completely controlled by the outer layer
-          setOptionsWrapperHeight(height);
+      var wrapperHeight = 0;
+
+      if (height !== void 0) {
+        // 受控模式下，完全交由外层控制
+        // @en In controlled mode, it is completely controlled by the outer layer
+        wrapperHeight = height;
+      } else {
+        if (!optionsContainer.current) return;
+
+        if (!showDropdown) {
+          wrapperHeight = 0;
         } else {
-          if (!optionsContainer.current) return;
-          if (!showDropdown) setOptionsWrapperHeight(0);else {
-            setOptionsWrapperHeight(optionsContainer.current.getBoundingClientRect().height);
-          }
+          wrapperHeight = optionsContainer.current.getBoundingClientRect().height;
         }
+      }
+
+      updateDown(wrapperHeight);
+      nextTick(function () {
+        setOptionsWrapperHeight(wrapperHeight);
       });
-    }, [showDropdown, options.length, height]);
+    }, [showDropdown, options.length, height, updateDown]);
     useImperativeHandle(ref, function () {
       return {
         dom: domRef.current
@@ -216,13 +227,17 @@ export function componentGenerator(Comp) {
 
     function getOptionsStyle() {
       var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
-      return getStyleWithVendor({
-        // height: `${optionsWrapperHeight}px`,
-        transform: optionsWrapperHeight ? '' : trans,
-        transition: "transform " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction,
+      var transStyle = down === null ? {
+        opacity: 0
+      } : {
+        opacity: 1,
+        transform: optionsWrapperHeight ? 'translateY(0)' : trans,
+        transition: "all " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction
+      };
+      return getStyleWithVendor(_extends({}, transStyle, {
         overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
         maxHeight: maxHeight + "px"
-      });
+      }));
     }
 
     function renderInnerOptions() {
@@ -256,6 +271,7 @@ export function componentGenerator(Comp) {
         },
         onExited: function onExited(el) {
           el.style.visibility = 'hidden';
+          setDown(null);
         },
         mountOnEnter: mountOnEnter,
         unmountOnExit: unmountOnExit

package/esm/dropdown/style/css/index.css

@@ -47,6 +47,9 @@
 }
 .arco-dropdown-options-item-icon {
   position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
   right:  0.32rem ;
   color: transparent;
 }

package/esm/dropdown/style/index.less

@@ -55,6 +55,8 @@
 
             &-icon {
                 position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
                 .use-var(right, dropdown-options-item-icon-right);
                 color: transparent;
             }

package/esm/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/esm/ellipsis/index.js

@@ -8,7 +8,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/esm/image/index.d.ts

@@ -177,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/esm/image/index.js

@@ -8,7 +8,7 @@ import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '.
 /**
  * 增强版的 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/esm/image-picker/index.d.ts

@@ -1,181 +1,10 @@
-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 以图片自身加载状态而定
-     * @default_en According to inner status of the image
-     */
-    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?: Partial<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>;
-    /**
-     * 已选图片列表发生变化
-     * @en The list of selected images changes
-     */
-    onChange?: (fileList: ImagePickItem[]) => 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;
-}
+import React from 'react';
+import { ImagePickerProps, ImagePickerRef } from './type';
+export * from './type';
 /**
  * 图片选择器组件
  * @en ImagePicker Component
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 图片选择器
  * @name_en ImagePicker

package/esm/image-picker/index.js

@@ -1,20 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { Promise } from 'es6-promise';
 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';
-
+export * from './type';
 /**
  * 图片选择器组件
  * @en ImagePicker Component
- * @type 数据输入
+ * @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,
@@ -57,6 +59,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       selectAdapter = props.selectAdapter;
   var domRef = useRef(null);
   var fileRef = useRef(null);
+  var cacheRef = useRef([]);
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
@@ -92,7 +95,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var handleChange = function handleChange(event, fromAdapter) {
-    var files = [].concat(event.target.files || []).filter(function (file) {
+    var files = Array.prototype.filter.call(event.target.files || [], function (file) {
       // 过滤maxSize
       if (maxSize && file.size > maxSize * 1024) {
         onMaxSizeExceed && onMaxSizeExceed(file);
@@ -123,20 +126,30 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           file: files[index]
         };
       });
-      var cacheRes = [].concat(images, res);
-      onChange(cacheRes); // 执行upload
+      cacheRef.current = [].concat(images, res);
+      onChange([].concat(cacheRef.current)); // 执行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, {
+        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] = _extends({}, cacheRef.current[index], data, {
               status: undefined
             });
           }).catch(function () {
-            cacheRes[propsImageLength + index].status = 'error';
+            var index = cacheRef.current.findIndex(function (_ref3) {
+              var file = _ref3.file;
+              return file === _file;
+            });
+            cacheRef.current[index].status = 'error';
           }).finally(function () {
-            onChange([].concat(cacheRes));
+            onChange([].concat(cacheRef.current));
           });
         });
       }
@@ -171,8 +184,8 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var handleSelect = function handleSelect() {
     var _fileRef$current;
 
-    selectAdapter ? selectAdapter().then(function (_ref) {
-      var files = _ref.files;
+    selectAdapter ? selectAdapter().then(function (_ref4) {
+      var files = _ref4.files;
       return handleChange({
         target: {
           files: files
@@ -267,12 +280,12 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     return data;
   };
 
-  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref5) {
     var _cls2;
 
-    var prefixCls = _ref2.prefixCls,
-        _ref2$locale = _ref2.locale,
-        locale = _ref2$locale === void 0 ? defaultLocale : _ref2$locale;
+    var prefixCls = _ref5.prefixCls,
+        _ref5$locale = _ref5.locale,
+        locale = _ref5$locale === void 0 ? defaultLocale : _ref5$locale;
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
       style: style,

package/esm/image-picker/type.d.ts

@@ -0,0 +1,174 @@
+import { InputHTMLAttributes } from 'react';
+import { ImageProps } from '../image';
+export interface ImagePickItem {
+    /**
+     * 图片地址
+     * @en Image Url
+     */
+    url: string;
+    /**
+     * 图片文件
+     * @en Image File
+     */
+    file?: File;
+    /**
+     * 图片状态
+     * @en Image Status
+     * @default 以图片自身加载状态而定
+     * @default_en According to inner status of the image
+     */
+    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?: Partial<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>;
+    /**
+     * 已选图片列表发生变化
+     * @en The list of selected images changes
+     */
+    onChange?: (fileList: ImagePickItem[]) => 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;
+}

package/esm/image-picker/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -280,7 +280,7 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
 /**
  * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
  * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 图片预览
  * @name_en ImagePreview

package/esm/image-preview/index.js

@@ -983,7 +983,7 @@ export function methodsGenerator(Comp) {
 /**
  * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
  * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 图片预览
  * @name_en ImagePreview