@arco-design/mobile-react 2.20.0 → 2.21.0

package/umd/image-picker/type.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

package/umd/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/umd/image-preview/index.js

@@ -1012,7 +1012,7 @@
   /**
    * 图片预览组件，支持循环轮播、双指/双击缩放、缩略图放大效果。
    * @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/umd/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/umd/index.js

@@ -1,22 +1,22 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./action-sheet", "./cell", "./loading", "./badge", "./avatar", "./button", "./carousel", "./toast", "./switch", "./checkbox", "./circle-progress", "./collapse", "./tabs", "./context-provider", "./dialog", "./count-down", "./date-picker", "./dropdown", "./dropdown-menu", "./ellipsis", "./grid", "./image", "./show-monitor", "./image-picker", "./image-preview", "./input", "./load-more", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./slider", "./steps", "./sticky", "./swipe-load", "./tab-bar", "./tag", "./textarea", "./transition"], factory);
+    define(["exports", "./action-sheet", "./cell", "./loading", "./badge", "./avatar", "./button", "./carousel", "./toast", "./switch", "./checkbox", "./circle-progress", "./collapse", "./tabs", "./context-provider", "./dialog", "./count-down", "./date-picker", "./dropdown", "./dropdown-menu", "./ellipsis", "./grid", "./image", "./show-monitor", "./image-picker", "./image-preview", "./input", "./load-more", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./slider", "./search-bar", "./steps", "./sticky", "./swipe-action", "./swipe-load", "./tab-bar", "./tag", "./textarea", "./transition"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./action-sheet"), require("./cell"), require("./loading"), require("./badge"), require("./avatar"), require("./button"), require("./carousel"), require("./toast"), require("./switch"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./tabs"), require("./context-provider"), require("./dialog"), require("./count-down"), require("./date-picker"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./grid"), require("./image"), require("./show-monitor"), require("./image-picker"), require("./image-preview"), require("./input"), require("./load-more"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./slider"), require("./steps"), require("./sticky"), require("./swipe-load"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./transition"));
+    factory(exports, require("./action-sheet"), require("./cell"), require("./loading"), require("./badge"), require("./avatar"), require("./button"), require("./carousel"), require("./toast"), require("./switch"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./tabs"), require("./context-provider"), require("./dialog"), require("./count-down"), require("./date-picker"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./grid"), require("./image"), require("./show-monitor"), require("./image-picker"), require("./image-preview"), require("./input"), require("./load-more"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./slider"), require("./search-bar"), require("./steps"), require("./sticky"), require("./swipe-action"), require("./swipe-load"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./transition"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.actionSheet, global.cell, global.loading, global.badge, global.avatar, global.button, global.carousel, global.toast, global._switch, global.checkbox, global.circleProgress, global.collapse, global.tabs, global.contextProvider, global.dialog, global.countDown, global.datePicker, global.dropdown, global.dropdownMenu, global.ellipsis, global.grid, global.image, global.showMonitor, global.imagePicker, global.imagePreview, global.input, global.loadMore, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.slider, global.steps, global.sticky, global.swipeLoad, global.tabBar, global.tag, global.textarea, global.transition);
+    factory(mod.exports, global.actionSheet, global.cell, global.loading, global.badge, global.avatar, global.button, global.carousel, global.toast, global._switch, global.checkbox, global.circleProgress, global.collapse, global.tabs, global.contextProvider, global.dialog, global.countDown, global.datePicker, global.dropdown, global.dropdownMenu, global.ellipsis, global.grid, global.image, global.showMonitor, global.imagePicker, global.imagePreview, global.input, global.loadMore, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.slider, global.searchBar, global.steps, global.sticky, global.swipeAction, global.swipeLoad, global.tabBar, global.tag, global.textarea, global.transition);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _actionSheet, _cell, _loading, _badge, _avatar, _button, _carousel, _toast, _switch, _checkbox, _circleProgress, _collapse, _tabs, _contextProvider, _dialog, _countDown, _datePicker, _dropdown, _dropdownMenu, _ellipsis, _grid, _image, _showMonitor, _imagePicker, _imagePreview, _input, _loadMore, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _slider, _steps, _sticky, _swipeLoad, _tabBar, _tag, _textarea, _transition) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _actionSheet, _cell, _loading, _badge, _avatar, _button, _carousel, _toast, _switch, _checkbox, _circleProgress, _collapse, _tabs, _contextProvider, _dialog, _countDown, _datePicker, _dropdown, _dropdownMenu, _ellipsis, _grid, _image, _showMonitor, _imagePicker, _imagePreview, _input, _loadMore, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _slider, _searchBar, _steps, _sticky, _swipeAction, _swipeLoad, _tabBar, _tag, _textarea, _transition) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
-  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.Sticky = _exports.Steps = _exports.Slider = _exports.ShowMonitor = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Input = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
+  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.SwipeAction = _exports.Sticky = _exports.Steps = _exports.Slider = _exports.ShowMonitor = _exports.SearchBar = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Input = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
   _actionSheet = _interopRequireDefault(_actionSheet);
   _exports.ActionSheet = _actionSheet.default;
   _cell = _interopRequireDefault(_cell);
@@ -103,10 +103,14 @@
   _exports.Rate = _rate.default;
   _slider = _interopRequireDefault(_slider);
   _exports.Slider = _slider.default;
+  _searchBar = _interopRequireDefault(_searchBar);
+  _exports.SearchBar = _searchBar.default;
   _steps = _interopRequireDefault(_steps);
   _exports.Steps = _steps.default;
   _sticky = _interopRequireDefault(_sticky);
   _exports.Sticky = _sticky.default;
+  _swipeAction = _interopRequireDefault(_swipeAction);
+  _exports.SwipeAction = _swipeAction.default;
   _swipeLoad = _interopRequireDefault(_swipeLoad);
   _exports.SwipeLoad = _swipeLoad.default;
   _tabBar = _interopRequireDefault(_tabBar);

package/umd/input/hooks.js

@@ -52,6 +52,8 @@
         clearShowType = _props$clearShowType === void 0 ? 'focus' : _props$clearShowType,
         _props$clearIcon = props.clearIcon,
         clearIcon = _props$clearIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_IconClear.default, null) : _props$clearIcon,
+        _props$preventEventWh = props.preventEventWhenClearing,
+        preventEventWhenClearing = _props$preventEventWh === void 0 ? true : _props$preventEventWh,
         onClear = props.onClear,
         autoFocus = props.autoFocus;
 
@@ -64,8 +66,30 @@
     }),
         showClear = _useState2[0],
         toggleClear = _useState2[1];
+    /**
+     * 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 focusingRef = (0, _react.useRef)(false);
+
+    var _useState3 = (0, _react.useState)(false),
+        isFocusing = _useState3[0],
+        setIsFocusing = _useState3[1];
+
+    var shouldPreventEvent = (0, _react.useRef)(false);
     var actualInputValue = value !== void 0 ? value : inputValue;
     var system = (0, _helpers.useSystem)();
     var wrapRef = (0, _react.useRef)(null);
@@ -133,7 +157,12 @@
 
     function handleFocus(e) {
       (0, _mobileUtils.nextTick)(function () {
-        focusingRef.current = true;
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+          shouldPreventEvent.current = false;
+          return;
+        }
+
+        setIsFocusing(true);
         clearShowType === 'focus' && toggleClear(true);
         onFocus && onFocus(e);
       });
@@ -141,7 +170,11 @@
 
     function handleBlur(e) {
       (0, _mobileUtils.nextTick)(function () {
-        focusingRef.current = false;
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+          return;
+        }
+
+        setIsFocusing(false);
         clearShowType === 'focus' && toggleClear(false);
         onBlur && onBlur(e);
       });
@@ -150,7 +183,7 @@
     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();
         (0, _mobileUtils.nextTick)(function () {
           inputRef.current && inputRef.current.focus();
@@ -173,18 +206,26 @@
         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.default.createElement("div", {
         className: prefixCls + "-container all-border-box " + (className || ''),
         style: style,
         ref: wrapRef
-      }, prepend, /*#__PURE__*/_react.default.createElement("div", {
+      }, renderPendNode(prepend), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-wrap", type, "border-" + border, system, {
           disabled: disabled
         }, {
@@ -203,7 +244,7 @@
         onClick: handleClear
       }, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-suffix"
-      }, suffix) : null), append);
+      }, suffix) : null), renderPendNode(append));
     }
 
     return {

package/umd/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/umd/input/index.js

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

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

package/umd/notice-bar/index.js

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

package/umd/picker/index.d.ts

@@ -38,7 +38,7 @@ export interface PickerRef {
 /**
  * 选择器组件，形式是弹起的浮层。
  * @en The selector component, in the form of a popup layer.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 选择器
  * @name_en Picker

package/umd/picker/index.js

@@ -80,7 +80,7 @@
   /**
    * 选择器组件，形式是弹起的浮层。
    * @en The selector component, in the form of a popup layer.
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    * @name 选择器
    * @name_en Picker

package/umd/picker-view/index.d.ts

@@ -45,7 +45,7 @@ export interface PickerViewRef {
 /**
  * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
  * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 选择器视图
  * @name_en PickerView

package/umd/picker-view/index.js

@@ -44,7 +44,7 @@
   /**
    * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
    * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    * @name 选择器视图
    * @name_en PickerView

package/umd/popover/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Partial<import
  * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
  * @name 气泡卡片
  * @name_en Popover
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 export default _default;

package/umd/popover/index.js

@@ -33,7 +33,7 @@
    * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
    * @name 气泡卡片
    * @name_en Popover
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    */
 

package/umd/popup-swiper/index.js

@@ -139,13 +139,14 @@
       var movingFromDirec = allowedDirections.includes(fromDirec) ? fromDirec : '';
       var disDirection = exitDirection || movingFromDirec;
       var direcValue = ['top', 'bottom'].includes(disDirection) ? 'Y' : 'X';
+      var direcRatio = ['bottom', 'right'].includes(disDirection) ? 1 : -1;
 
       switch (movingFromDirec) {
         case 'top':
         case 'bottom':
           setDistance({
             direction: direcValue,
-            value: Math[movingFromDirec === 'top' ? 'min' : 'max'](0, disY)
+            value: Math.abs(disY) * direcRatio
           });
           break;
 
@@ -153,7 +154,7 @@
         case 'right':
           setDistance({
             direction: direcValue,
-            value: Math[movingFromDirec === 'left' ? 'min' : 'max'](0, disX)
+            value: Math.abs(disX) * direcRatio
           });
           break;
 

package/umd/radio/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
  * @en Radio button, click to switch selection when available, supports disabled state and radio option group.
  * @name 单选框
  * @name_en Radio
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 export default _default;

package/umd/radio/index.js

@@ -33,7 +33,7 @@
    * @en Radio button, click to switch selection when available, supports disabled state and radio option group.
    * @name 单选框
    * @name_en Radio
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    */
 

package/umd/rate/index.d.ts

@@ -97,7 +97,7 @@ export interface RateRef {
 /**
  * 评分组件，支持受控模式
  * @en Rate component, supports controlled mode
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 评分
  * @name_en Rate

package/umd/rate/index.js

@@ -28,7 +28,7 @@
   /**
    * 评分组件，支持受控模式
    * @en Rate component, supports controlled mode
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    * @name 评分
    * @name_en Rate

package/umd/search-bar/association.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SearchBarAssociationProps } from './type';
+export declare function SearchBarAssociation<Data>(props: SearchBarAssociationProps<Data>): JSX.Element;

package/umd/search-bar/association.js

@@ -0,0 +1,101 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@arco-design/mobile-utils", "react", "./highlight"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@arco-design/mobile-utils"), require("react"), require("./highlight"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.mobileUtils, global.react, global.highlight);
+    global.association = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _react, _highlight) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.SearchBarAssociation = SearchBarAssociation;
+  _react = _interopRequireDefault(_react);
+
+  function SearchBarAssociation(props) {
+    var _cls;
+
+    var prefixCls = props.prefixCls,
+        _props$associationIte = props.associationItems,
+        associationItems = _props$associationIte === void 0 ? [] : _props$associationIte,
+        highlightClassName = props.highlightClassName,
+        _props$highlightMode = props.highlightMode,
+        highlightMode = _props$highlightMode === void 0 ? 'none' : _props$highlightMode,
+        highlightStyle = props.highlightStyle,
+        onAssociationClick = props.onAssociationClick,
+        onAssociationItemClick = props.onAssociationItemClick,
+        renderAssociation = props.renderAssociation,
+        renderAssociationItem = props.renderAssociationItem,
+        keyword = props.keyword,
+        visible = props.visible;
+    var searchBarAssociationPrefixCls = prefixCls + "-association";
+    var defaultHighlightClassName = searchBarAssociationPrefixCls + "-item-highlight";
+
+    var renderHighlightNode = function renderHighlightNode(content) {
+      if (!content || !keyword || highlightMode === 'none') {
+        return content;
+      }
+
+      var config = {
+        keyword: keyword,
+        content: content,
+        highlightClassName: highlightClassName || defaultHighlightClassName,
+        highlightStyle: highlightStyle
+      };
+
+      if (highlightMode === 'contain') {
+        return (0, _highlight.highlightWithContainMode)(config);
+      }
+
+      if (highlightMode === 'prefix') {
+        return (0, _highlight.highlightWithPrefixMode)(config);
+      }
+
+      return typeof highlightMode === 'function' ? highlightMode(content, keyword, defaultHighlightClassName) : content;
+    };
+
+    var renderItem = function renderItem(item, index) {
+      var itemContent = item.content;
+      var node = itemContent; // itemContent为string类型，并且开启高亮模式才去走渲染高亮内容的逻辑
+      // @en When `itemContent` is a string, and the highlight mode is turned on, the logic of rendering the highlighted content is performed
+
+      if (typeof itemContent === 'string' && highlightMode !== 'none') {
+        node = renderHighlightNode(itemContent);
+      }
+
+      if (renderAssociationItem) {
+        node = renderAssociationItem(item, index, node);
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: searchBarAssociationPrefixCls + "-item",
+        onClick: function onClick() {
+          return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index);
+        }
+      }, node);
+    };
+
+    var renderContent = function renderContent() {
+      var associationContent = associationItems.map(renderItem);
+
+      if (renderAssociation) {
+        return renderAssociation(associationContent);
+      }
+
+      return associationContent;
+    };
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(searchBarAssociationPrefixCls, (_cls = {}, _cls[searchBarAssociationPrefixCls + "-visible"] = visible, _cls)),
+      onClick: onAssociationClick
+    }, renderContent());
+  }
+});

package/umd/search-bar/cancel-button.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface CancelButtonProps {
+    className: string;
+    onCancel?: () => void;
+    focusing: boolean;
+    currentInputValue: string;
+    text?: string;
+}
+export declare function CancelButton(props: CancelButtonProps): JSX.Element | null;
+export {};

package/umd/search-bar/cancel-button.js

@@ -0,0 +1,52 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@arco-design/mobile-utils", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@arco-design/mobile-utils"), require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.mobileUtils, global.react);
+    global.cancelButton = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _react) {
+  "use strict";
+
+  _exports.__esModule = true;
+  _exports.CancelButton = CancelButton;
+  _react = _interopRequireWildcard(_react);
+
+  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; }
+
+  function CancelButton(props) {
+    var className = props.className,
+        onCancel = props.onCancel,
+        focusing = props.focusing,
+        currentInputValue = props.currentInputValue,
+        text = props.text;
+
+    var _useState = (0, _react.useState)(focusing || Boolean(currentInputValue)),
+        visible = _useState[0],
+        setVisible = _useState[1];
+
+    var handleClick = function handleClick() {
+      onCancel == null ? void 0 : onCancel(); // 如果不延迟，在聚焦切输入框有值的情况下，点击取消按钮会造成闪烁
+      // @en If there is no delay, when the focus cut input box has a value, clicking the cancel button will cause flickering
+
+      (0, _mobileUtils.nextTick)(function () {
+        setVisible(false);
+      });
+    };
+
+    (0, _react.useEffect)(function () {
+      setVisible(focusing || Boolean(currentInputValue));
+    }, [focusing, currentInputValue]);
+    return visible ? /*#__PURE__*/_react.default.createElement("span", {
+      className: className,
+      onClick: handleClick
+    }, text) : null;
+  }
+});

package/umd/search-bar/demo/style/css/mobile.css

@@ -0,0 +1,5 @@
+#demo-search-bar .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  font-size: 0.32rem;
+}

package/umd/search-bar/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import '../../../../style/mixin.less';
+
+#demo-search-bar {
+  .arcodesign-mobile-demo-content {
+    padding: 0;
+    background: transparent;
+    .rem(font-size, 16)
+  }
+}

package/umd/search-bar/highlight.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SearchBarAssociationHighlightConfig } from './type';
+/**
+ * 高亮搜索候选项中，包含的关键字
+ *
+ */
+export declare function highlightWithContainMode(config: SearchBarAssociationHighlightConfig): React.ReactNode[];
+/**
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
+ *
+ */
+export declare function highlightWithPrefixMode(config: SearchBarAssociationHighlightConfig): string | (string | JSX.Element)[];