@arco-design/mobile-react 2.20.0 → 2.21.0

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

package/esm/notice-bar/index.js

@@ -6,7 +6,7 @@ import IconClose from '../icon/IconClose';
 /**
  * 可自定义换行或滚动效果，支持循环滚动。
  * @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/esm/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/esm/picker/index.js

@@ -48,7 +48,7 @@ var getInitialValue = function getInitialValue(value, data, cascade) {
 /**
  * 选择器组件，形式是弹起的浮层。
  * @en The selector component, in the form of a popup layer.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 选择器
  * @name_en Picker

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

@@ -11,7 +11,7 @@ export { MultiPicker, PickerCell, Cascader };
 /**
  * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
  * @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/esm/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/esm/popover/index.js

@@ -13,7 +13,7 @@ var Menu = componentGenerator(Popover);
  * @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/esm/popup-swiper/index.js

@@ -118,13 +118,14 @@ var PopupSwiper = /*#__PURE__*/forwardRef(function (props, ref) {
     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;
 
@@ -132,7 +133,7 @@ var PopupSwiper = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'right':
         setDistance({
           direction: direcValue,
-          value: Math[movingFromDirec === 'left' ? 'min' : 'max'](0, disX)
+          value: Math.abs(disX) * direcRatio
         });
         break;
 

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

@@ -13,7 +13,7 @@ var Group = componentGenerator(Radio);
  * @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/esm/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/esm/rate/index.js

@@ -8,7 +8,7 @@ import { useUpdateEffect } from '../_helpers';
 /**
  * 评分组件，支持受控模式
  * @en Rate component, supports controlled mode
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 评分
  * @name_en Rate

package/esm/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/esm/search-bar/association.js

@@ -0,0 +1,82 @@
+import { cls } from '@arco-design/mobile-utils';
+import React from 'react';
+import { highlightWithContainMode, highlightWithPrefixMode } from './highlight';
+export 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 highlightWithContainMode(config);
+    }
+
+    if (highlightMode === 'prefix') {
+      return 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.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.createElement("div", {
+    className: cls(searchBarAssociationPrefixCls, (_cls = {}, _cls[searchBarAssociationPrefixCls + "-visible"] = visible, _cls)),
+    onClick: onAssociationClick
+  }, renderContent());
+}

package/esm/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/esm/search-bar/cancel-button.js

@@ -0,0 +1,30 @@
+import { nextTick } from '@arco-design/mobile-utils';
+import React, { useEffect, useState } from 'react';
+export function CancelButton(props) {
+  var className = props.className,
+      onCancel = props.onCancel,
+      focusing = props.focusing,
+      currentInputValue = props.currentInputValue,
+      text = props.text;
+
+  var _useState = 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
+
+    nextTick(function () {
+      setVisible(false);
+    });
+  };
+
+  useEffect(function () {
+    setVisible(focusing || Boolean(currentInputValue));
+  }, [focusing, currentInputValue]);
+  return visible ? /*#__PURE__*/React.createElement("span", {
+    className: className,
+    onClick: handleClick
+  }, text) : null;
+}

package/esm/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/esm/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/esm/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)[];

package/esm/search-bar/highlight.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["content", "keyword"];
+import React from 'react';
+
+function createHighlightNode(config, index) {
+  var keyword = config.keyword,
+      highlightClassName = config.highlightClassName,
+      highlightStyle = config.highlightStyle;
+  return /*#__PURE__*/React.createElement("span", {
+    className: highlightClassName,
+    style: highlightStyle,
+    key: index
+  }, keyword);
+}
+/**
+ * 高亮搜索候选项中，包含的关键字
+ *
+ */
+
+
+export function highlightWithContainMode(config) {
+  var _config$content = config.content,
+      content = _config$content === void 0 ? '' : _config$content,
+      _config$keyword = config.keyword,
+      keyword = _config$keyword === void 0 ? '' : _config$keyword; // 具体实现思路就是将keyword作为split的分隔符，切割content得到数组
+
+  var splitContent = content.split(keyword); // 再将高亮后的keyword节点，插空填入数组
+
+  var highlightResult = splitContent.reduce(function (prev, word, index) {
+    prev.push(word);
+
+    if (index !== splitContent.length - 1) {
+      prev.push(createHighlightNode(config, index));
+    }
+
+    return prev;
+  }, []);
+  return highlightResult;
+}
+/**
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
+ *
+ */
+
+export function highlightWithPrefixMode(config) {
+  var _config$content2 = config.content,
+      content = _config$content2 === void 0 ? '' : _config$content2,
+      _config$keyword2 = config.keyword,
+      keyword = _config$keyword2 === void 0 ? '' : _config$keyword2,
+      otherConfig = _objectWithoutPropertiesLoose(config, _excluded);
+
+  var splitIndex = -1;
+
+  for (var i = 0; i < keyword.length; i++) {
+    if (i >= content.length || content[i] !== keyword[i]) {
+      break;
+    }
+
+    splitIndex = i;
+  }
+
+  return splitIndex > -1 ? [createHighlightNode(_extends({}, otherConfig, {
+    keyword: content.substring(0, splitIndex + 1)
+  }), 0), content.substring(splitIndex + 1)] : content;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SearchAssociationBaseItem, SearchBarProps, SearchBarRef } from './type';
+export { SearchBarProps, SearchBarRef, SearchAssociationHighlightMode, SearchAssociationItem, SearchAssociationShowType, SearchBarShape, } from './type';
+/**
+ * 搜索栏组件
+ * @en SearchBar component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 搜索栏
+ * @name_en SearchBar
+ */
+declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps<SearchAssociationBaseItem> & React.RefAttributes<SearchBarRef>>;
+export default SearchBar;