@arco-design/mobile-react 2.20.0 → 2.21.2

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

package/esm/index.d.ts

@@ -41,8 +41,10 @@ export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as Slider } from './slider';
+export { default as SearchBar } from './search-bar';
 export { default as Steps } from './steps';
 export { default as Sticky } from './sticky';
+export { default as SwipeAction } from './swipe-action';
 export { default as SwipeLoad } from './swipe-load';
 export { default as TabBar } from './tab-bar';
 export { default as Tag } from './tag';

package/esm/index.js

@@ -41,8 +41,10 @@ export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as Slider } from './slider';
+export { default as SearchBar } from './search-bar';
 export { default as Steps } from './steps';
 export { default as Sticky } from './sticky';
+export { default as SwipeAction } from './swipe-action';
 export { default as SwipeLoad } from './swipe-load';
 export { default as TabBar } from './tab-bar';
 export { default as Tag } from './tag';

package/esm/input/hooks.js

@@ -30,6 +30,8 @@ export function useInputLogic(props, inputRef) {
       clearShowType = _props$clearShowType === void 0 ? 'focus' : _props$clearShowType,
       _props$clearIcon = props.clearIcon,
       clearIcon = _props$clearIcon === void 0 ? /*#__PURE__*/React.createElement(IconClear, null) : _props$clearIcon,
+      _props$preventEventWh = props.preventEventWhenClearing,
+      preventEventWhenClearing = _props$preventEventWh === void 0 ? true : _props$preventEventWh,
       onClear = props.onClear,
       autoFocus = props.autoFocus;
 
@@ -42,8 +44,30 @@ export function useInputLogic(props, inputRef) {
   }),
       showClear = _useState2[0],
       toggleClear = _useState2[1];
-
-  var focusingRef = useRef(false);
+  /**
+   * clear相关问题背景
+   * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
+   * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
+   *
+   * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
+   * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
+   * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
+   *
+   * 解决思路
+   * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
+   * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
+   * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
+   * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
+   * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
+   *
+   */
+
+
+  var _useState3 = useState(false),
+      isFocusing = _useState3[0],
+      setIsFocusing = _useState3[1];
+
+  var shouldPreventEvent = useRef(false);
   var actualInputValue = value !== void 0 ? value : inputValue;
   var system = useSystem();
   var wrapRef = useRef(null);
@@ -111,7 +135,12 @@ export function useInputLogic(props, inputRef) {
 
   function handleFocus(e) {
     nextTick(function () {
-      focusingRef.current = true;
+      if (preventEventWhenClearing && shouldPreventEvent.current) {
+        shouldPreventEvent.current = false;
+        return;
+      }
+
+      setIsFocusing(true);
       clearShowType === 'focus' && toggleClear(true);
       onFocus && onFocus(e);
     });
@@ -119,7 +148,11 @@ export function useInputLogic(props, inputRef) {
 
   function handleBlur(e) {
     nextTick(function () {
-      focusingRef.current = false;
+      if (preventEventWhenClearing && shouldPreventEvent.current) {
+        return;
+      }
+
+      setIsFocusing(false);
       clearShowType === 'focus' && toggleClear(false);
       onBlur && onBlur(e);
     });
@@ -128,7 +161,7 @@ export function useInputLogic(props, inputRef) {
   function handleClick(e) {
     // 安卓才会有键盘切换不过来的问题，ios不开启此项，因为blur之后不能再自动focus
     // @en Android will have the problem that the keyboard cannot be switched. iOS does not enable this, because it can no longer automatically focus after blur.
-    if (blurBeforeFocus && system === 'android' && !focusingRef.current) {
+    if (blurBeforeFocus && system === 'android' && !isFocusing) {
       inputRef.current && inputRef.current.blur();
       nextTick(function () {
         inputRef.current && inputRef.current.focus();
@@ -151,18 +184,26 @@ export function useInputLogic(props, inputRef) {
       onClear && onClear(e); // 当点击clear前是focus时强制执行focus
       // @en Enforce focus when focus is before clicking clear
 
-      if (focusingRef.current) {
+      if (isFocusing) {
+        if (preventEventWhenClearing) {
+          shouldPreventEvent.current = true;
+        }
+
         inputRef.current && inputRef.current.focus();
       }
     });
   }
 
+  function renderPendNode(pend) {
+    return typeof pend === 'function' ? pend(isFocusing, actualInputValue) : pend;
+  }
+
   function renderWrapper(prefixCls, type, children) {
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-container all-border-box " + (className || ''),
       style: style,
       ref: wrapRef
-    }, prepend, /*#__PURE__*/React.createElement("div", {
+    }, renderPendNode(prepend), /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-wrap", type, "border-" + border, system, {
         disabled: disabled
       }, {
@@ -181,7 +222,7 @@ export function useInputLogic(props, inputRef) {
       onClick: handleClear
     }, clearIcon) : null, suffix ? /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-suffix"
-    }, suffix) : null), append);
+    }, suffix) : null), renderPendNode(append));
   }
 
   return {

package/esm/input/index.d.ts

@@ -43,7 +43,7 @@ export interface InputRef {
 /**
  * 输入框组件，支持添加前后缀。
  * @en The input box, supports adding prefixes and suffixes.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 输入框
  * @name_en Input

package/esm/input/index.js

@@ -7,7 +7,7 @@ import { useInputLogic } from './hooks';
 /**
  * 输入框组件，支持添加前后缀。
  * @en The input box, supports adding prefixes and suffixes.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 输入框
  * @name_en Input

package/esm/input/props.d.ts

@@ -80,12 +80,12 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 输入框头部内容，在输入框外部
      * @en The content of the header of the input box, outside the input box
      */
-    prepend?: React.ReactNode;
+    prepend?: React.ReactNode | ((focusing: boolean, inputValue: string) => React.ReactNode);
     /**
      * 输入框尾部内容，在输入框外部
      * @en The content at the end of the input box, outside the input box
      */
-    append?: React.ReactNode;
+    append?: React.ReactNode | ((focusing: boolean, inputValue: string) => React.ReactNode);
     /**
      * 在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效
      * @en Blur before focusing, that is, the keyboard will be re-bounced when switching between different inputs. It is often used to reload the keyboard when the input type is switched. It is valid on Android.
@@ -102,6 +102,12 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * @default "focus"
      */
     clearShowType?: 'focus' | 'value' | 'always';
+    /**
+     * 在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件
+     * @en Whether to block the onBlur and onFocus events generated when the clear button is clicked in focus mode
+     * @default true
+     */
+    preventEventWhenClearing?: boolean;
     /**
      * 清除按钮类型，也可自定义
      * @en Clear button type, also customizable

package/esm/notice-bar/index.d.ts

@@ -98,7 +98,7 @@ export interface NoticeBarRef {
 /**
  * 可自定义换行或滚动效果，支持循环滚动。
  * @en Line wrapping or scrolling effects can be customized, and circular scrolling is supported.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 通知栏
  * @name_en NoticeBar