@arco-design/mobile-react 2.20.0 → 2.21.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.21.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.1...@arco-design/mobile-react@2.21.0) (2022-08-29)
+
+
+### Bug Fixes
+
+* `Button` support coverIconWhenLoading ([#33](https://github.com/arco-design/arco-design-mobile/issues/33)) ([4213959](https://github.com/arco-design/arco-design-mobile/commit/421395918c8dc8ec8e6cb742aeed46503eaef925))
+* `Dropdown` optimize animation when direction changed ([2022692](https://github.com/arco-design/arco-design-mobile/commit/20226924759486d66ecae7a8e466bc1c676cd923))
+* `Dropdown` support customize select icon & value of string type ([9eb6f5d](https://github.com/arco-design/arco-design-mobile/commit/9eb6f5db76d2a1975e61a478d897522cf8bcbf8e))
+* `DropdownMenu` optimize renderSelectLabel params ([1c685fd](https://github.com/arco-design/arco-design-mobile/commit/1c685fd85851f6735d1d91dc49c6f28ade0a858c))
+* `ImagePicker` convert event.target.files to array ([dec36f1](https://github.com/arco-design/arco-design-mobile/commit/dec36f1edf313e34bb1fd290ce314206639a5717))
+* `ImagePicker` fix uploaded images change ([#44](https://github.com/arco-design/arco-design-mobile/issues/44)) ([7511837](https://github.com/arco-design/arco-design-mobile/commit/75118376f7b08f39a2c438737075a0af0d39004d))
+* `ImagePicker` optimize display when uploading ([a99f2f3](https://github.com/arco-design/arco-design-mobile/commit/a99f2f3e2927ce2f263a496da09e391395a8b545))
+* `NavBar` trigger caculation when showOffset changes ([06119ce](https://github.com/arco-design/arco-design-mobile/commit/06119ceeefb286ac963dae0f8b49a1112063d1b9))
+* `PopupSwiper` optimize moving direction ([fe1d100](https://github.com/arco-design/arco-design-mobile/commit/fe1d100fb3aba069ad66255c93654823beebf249))
+* `ShowMonitor` support flush visible status ([#31](https://github.com/arco-design/arco-design-mobile/issues/31)) ([bdad151](https://github.com/arco-design/arco-design-mobile/commit/bdad151e8a466f20e3e033ccec9a5d458ff4fbf4))
+* `Steps` converge style to token ([6cf4f26](https://github.com/arco-design/arco-design-mobile/commit/6cf4f267a271dc0d03f559c4aca8199f9fcae2ec))
+* `Tabs` limit max scroll distance close ([#37](https://github.com/arco-design/arco-design-mobile/issues/37)) ([e716d01](https://github.com/arco-design/arco-design-mobile/commit/e716d014dfa34c4159d4011d2a1ccd5b7d133b4c)), closes [#36](https://github.com/arco-design/arco-design-mobile/issues/36)
+* components classname optimize: `Avatar` & `Button` & `Badge` ([e6b70dd](https://github.com/arco-design/arco-design-mobile/commit/e6b70dd5eebb23646f2e7639b8a8a73bd51e57c3))
+
+
+### Features
+
+* add new component `ImagePicker` ([#24](https://github.com/arco-design/arco-design-mobile/issues/24)) ([73f6156](https://github.com/arco-design/arco-design-mobile/commit/73f615651f46dc670f29733f6b99ec56795fc48b))
+* add new component `SearchBar` ([#22](https://github.com/arco-design/arco-design-mobile/issues/22)) ([36cf4d4](https://github.com/arco-design/arco-design-mobile/commit/36cf4d4d61506358cd84b41738d817db8399c04f))
+* add new component `SwipeAction` ([221dc57](https://github.com/arco-design/arco-design-mobile/commit/221dc5776a508fcccd27de992e1ae58d137b7fb6))
+
+
+
+
+
 # [2.20.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.1...@arco-design/mobile-react@2.20.0) (2022-08-12)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.19.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.19.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.19.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.19.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/avatar/index.d.ts

@@ -9,7 +9,7 @@ declare const _default: React.ForwardRefExoticComponent<AvatarProps<ImageProps &
 /**
  * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
  * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 头像
  * @name_en Avatar

package/cjs/avatar/index.js

@@ -171,7 +171,7 @@ var Avatar = componentGenerator(_image.BaseImage);
 /**
  * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
  * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 头像
  * @name_en Avatar

package/cjs/badge/index.d.ts

@@ -71,7 +71,7 @@ export interface BadgeRef {
 /**
  * 在右上角展示徽标数字或小红点
  * @en Display the badge number or small red dot in the upper right corner
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 徽标
  * @name_en Badge

package/cjs/badge/index.js

@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 在右上角展示徽标数字或小红点
  * @en Display the badge number or small red dot in the upper right corner
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 徽标
  * @name_en Badge

package/cjs/carousel/index.d.ts

@@ -357,7 +357,7 @@ export interface CarouselRef {
 /**
  * 轮播组件，支持自定义轮播索引样式及滑块宽度。**需要注意的是，如果正使用`fastclick`，需要为 touchstart 的 target 添加`needsclick`类**（<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick" target="_blank">详情戳这里</a>），以规避`fastclick`逻辑与组件内部的手势冲突。（如果使用了`list`属性则无需额外添加）
  * @en Carousel component, supports custom carousel index style and slider width. **Note that if you are using `fastclick`, you need to add a `needsclick` class to the touchstart target ** (<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements- with-needsclick" target="_blank">click here for details</a>) to avoid `fastclick` logic conflicts with gestures inside the component. (no need to add if `list` is set)
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 轮播图
  * @name_en Carousel

package/cjs/carousel/index.js

@@ -22,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 轮播组件，支持自定义轮播索引样式及滑块宽度。**需要注意的是，如果正使用`fastclick`，需要为 touchstart 的 target 添加`needsclick`类**（<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick" target="_blank">详情戳这里</a>），以规避`fastclick`逻辑与组件内部的手势冲突。（如果使用了`list`属性则无需额外添加）
  * @en Carousel component, supports custom carousel index style and slider width. **Note that if you are using `fastclick`, you need to add a `needsclick` class to the touchstart target ** (<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements- with-needsclick" target="_blank">click here for details</a>) to avoid `fastclick` logic conflicts with gestures inside the component. (no need to add if `list` is set)
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 轮播图
  * @name_en Carousel

package/cjs/cell/index.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
  * @en Cell, including cells and cell group, are often used to set items, forms, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 单元格
  * @name_en Cell

package/cjs/cell/index.js

@@ -22,7 +22,7 @@ var Group = (0, _group.componentGenerator)(_cell.Cell);
 /**
  * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
  * @en Cell, including cells and cell group, are often used to set items, forms, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 单元格
  * @name_en Cell

package/cjs/checkbox/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
  * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
  * @name 复选框
  * @name_en Checkbox
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 export default _default;

package/cjs/checkbox/index.js

@@ -29,7 +29,7 @@ var Group = (0, _group.componentGenerator)(_checkbox.Checkbox);
  * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
  * @name 复选框
  * @name_en Checkbox
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 

package/cjs/collapse/index.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 折叠面板组件，支持手风琴模式。
  * @en Collapse supports accordion mode.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 折叠面板
  * @name_en Collapse

package/cjs/collapse/index.js

@@ -31,7 +31,7 @@ Object.keys(_type).forEach(function (key) {
 /**
  * 折叠面板组件，支持手风琴模式。
  * @en Collapse supports accordion mode.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 折叠面板
  * @name_en Collapse

package/cjs/count-down/index.d.ts

@@ -6,7 +6,7 @@ export * from './type';
  * @en Countdown Component
  * @name 倒计时
  * @name_en CountDown
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<CountDownRef>>;

package/cjs/count-down/index.js

@@ -30,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @en Countdown Component
  * @name 倒计时
  * @name_en CountDown
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 var CountDown = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

package/cjs/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/cjs/date-picker/index.js

@@ -51,7 +51,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/cjs/dropdown/dropdown.js

@@ -96,7 +96,7 @@ function componentGenerator(Comp) {
     // @en down=0 is to expand upwards, 1 is to expand downwards
 
 
-    var _useState3 = (0, _react.useState)(direction === 'down'),
+    var _useState3 = (0, _react.useState)(null),
         down = _useState3[0],
         setDown = _useState3[1];
 
@@ -135,12 +135,15 @@ function componentGenerator(Comp) {
 
     (0, _helpers.usePopupScroll)(showDropdown, domRef.current, getScrollContainer);
     (0, _helpers.usePreventBodyScroll)(showDropdown, preventBodyScroll, initialBodyOverflow);
-    (0, _react.useEffect)(function () {
+    var updateDown = (0, _react.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()) || {
@@ -155,7 +158,7 @@ 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;
@@ -172,7 +175,7 @@ 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
@@ -213,19 +216,27 @@ function componentGenerator(Comp) {
       };
     }, [showDropdown, clickOtherToClose, handleCancel]);
     (0, _react.useEffect)(function () {
-      (0, _mobileUtils.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);
+      (0, _mobileUtils.nextTick)(function () {
+        setOptionsWrapperHeight(wrapperHeight);
       });
-    }, [showDropdown, options.length, height]);
+    }, [showDropdown, options.length, height, updateDown]);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current
@@ -234,13 +245,17 @@ function componentGenerator(Comp) {
 
     function getOptionsStyle() {
       var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
-      return (0, _helpers.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 (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, transStyle, {
         overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
         maxHeight: maxHeight + "px"
-      });
+      }));
     }
 
     function renderInnerOptions() {
@@ -274,6 +289,7 @@ function componentGenerator(Comp) {
         },
         onExited: function onExited(el) {
           el.style.visibility = 'hidden';
+          setDown(null);
         },
         mountOnEnter: mountOnEnter,
         unmountOnExit: unmountOnExit

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

@@ -34,7 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
  * @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/cjs/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/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

package/cjs/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