@arco-design/mobile-react 2.20.0 → 2.21.2

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 type { 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;

package/esm/search-bar/index.js

@@ -0,0 +1,212 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["inputClass", "inputStyle", "type", "nativeProps", "id", "name", "maxLength", "placeholder", "readOnly", "onKeyUp", "onKeyPress", "disabled", "pattern", "prefix", "append", "textAlign", "actionButton", "clearable", "clearShowType", "shape", "className", "enableAssociation", "associationVisible", "associationShowType", "associationItems", "highlightClassName", "highlightMode", "highlightStyle", "onCancel", "onAssociationClick", "onAssociationItemClick", "renderAssociation", "renderAssociationItem"];
+import { cls } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle, useContext, useState } from 'react';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import { IconSearch } from '../icon';
+import { useInputLogic } from '../input/hooks';
+import { SearchBarAssociation } from './association';
+import { CancelButton } from './cancel-button';
+
+/**
+ * 搜索栏组件
+ * @en SearchBar component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 搜索栏
+ * @name_en SearchBar
+ */
+var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls,
+      locale = _useContext.locale;
+
+  var searchBarPrefixCls = prefixCls + "-search-bar";
+
+  var inputClass = props.inputClass,
+      inputStyle = props.inputStyle,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'search' : _props$type,
+      nativeProps = props.nativeProps,
+      id = props.id,
+      name = props.name,
+      maxLength = props.maxLength,
+      _props$placeholder = props.placeholder,
+      placeholder = _props$placeholder === void 0 ? locale == null ? void 0 : locale.SearchBar.placeholder : _props$placeholder,
+      readOnly = props.readOnly,
+      onKeyUp = props.onKeyUp,
+      onKeyPress = props.onKeyPress,
+      disabled = props.disabled,
+      pattern = props.pattern,
+      _props$prefix = props.prefix,
+      prefix = _props$prefix === void 0 ? /*#__PURE__*/React.createElement(IconSearch, {
+    className: searchBarPrefixCls + "-search-icon"
+  }) : _props$prefix,
+      append = props.append,
+      _props$textAlign = props.textAlign,
+      textAlign = _props$textAlign === void 0 ? 'left' : _props$textAlign,
+      actionButton = props.actionButton,
+      _props$clearable = props.clearable,
+      clearable = _props$clearable === void 0 ? true : _props$clearable,
+      _props$clearShowType = props.clearShowType,
+      clearShowType = _props$clearShowType === void 0 ? 'value' : _props$clearShowType,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'square' : _props$shape,
+      className = props.className,
+      _props$enableAssociat = props.enableAssociation,
+      enableAssociation = _props$enableAssociat === void 0 ? false : _props$enableAssociat,
+      associationVisible = props.associationVisible,
+      _props$associationSho = props.associationShowType,
+      associationShowType = _props$associationSho === void 0 ? 'default' : _props$associationSho,
+      associationItems = props.associationItems,
+      highlightClassName = props.highlightClassName,
+      highlightMode = props.highlightMode,
+      highlightStyle = props.highlightStyle,
+      onCancel = props.onCancel,
+      onAssociationClick = props.onAssociationClick,
+      onAssociationItemClick = props.onAssociationItemClick,
+      renderAssociation = props.renderAssociation,
+      renderAssociationItem = props.renderAssociationItem,
+      inputProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var inputRef = useRef(null);
+  /**
+   * 格式化搜索输入框尾部要插入的内容
+   * @en Format the content to be inserted at the end of the search input box
+   */
+
+  var formatAppendProp = function formatAppendProp(focusing, currentInputValue) {
+    var appendNode = null;
+
+    if (typeof append === 'function') {
+      appendNode = append(focusing, currentInputValue);
+    } else {
+      appendNode = append;
+    } // 默认情况下，在激活时或有内容时插入一个cancelBtn
+    // @en By default inserts a cancelBtn on activation or when there is content
+
+
+    var formatActionButton = typeof actionButton === 'undefined' ? /*#__PURE__*/React.createElement(CancelButton, {
+      focusing: focusing,
+      currentInputValue: currentInputValue,
+      className: searchBarPrefixCls + "-cancel-btn",
+      onCancel: onCancel,
+      text: locale == null ? void 0 : locale.SearchBar.cancelBtn
+    }) : actionButton;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, appendNode, formatActionButton, enableAssociation ? /*#__PURE__*/React.createElement(SearchBarAssociation, {
+      prefixCls: searchBarPrefixCls,
+      keyword: currentInputValue // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      ,
+      visible: actualVisible,
+      associationItems: associationItems,
+      highlightClassName: highlightClassName,
+      highlightMode: highlightMode,
+      highlightStyle: highlightStyle,
+      onAssociationClick: onAssociationClick,
+      onAssociationItemClick: onAssociationItemClick,
+      renderAssociation: renderAssociation,
+      renderAssociationItem: renderAssociationItem
+    }) : null);
+  };
+
+  var _useInputLogic = useInputLogic(_extends({
+    className: cls(className, searchBarPrefixCls + "-" + shape),
+    prefix: prefix,
+    clearable: clearable,
+    append: formatAppendProp,
+    clearShowType: clearShowType
+  }, inputProps), inputRef),
+      inputValue = _useInputLogic.inputValue,
+      handleChange = _useInputLogic.handleChange,
+      handleInput = _useInputLogic.handleInput,
+      handleKeyDown = _useInputLogic.handleKeyDown,
+      handleFocus = _useInputLogic.handleFocus,
+      handleBlur = _useInputLogic.handleBlur,
+      handleClick = _useInputLogic.handleClick,
+      renderWrapper = _useInputLogic.renderWrapper,
+      wrapRef = _useInputLogic.wrapRef;
+
+  var _useState = useState(associationShowType === 'always' || (associationShowType === 'value' || associationShowType === 'default') && Boolean(inputValue)),
+      visible = _useState[0],
+      setVisible = _useState[1]; // 真实的控制搜索联想框显隐，受控模式优先生效
+  // @en Control the display and hide of the search association box, and the controlled mode takes effect first
+
+
+  var actualVisible = associationVisible != null ? associationVisible : visible;
+  useImperativeHandle(ref, function () {
+    return {
+      dom: wrapRef.current,
+      input: inputRef.current,
+      toggleAssociation: function toggleAssociation(newVisible) {
+        setVisible(newVisible != null ? newVisible : !visible);
+      }
+    };
+  });
+  /**
+   * 处理非受控逻辑下，搜索联想框的显隐状态
+   * @en Handle the display state of the search association box under uncontrolled logic
+   *
+   * @param {boolean} newVisible 新的visible
+   * @param {string} newValue 新的输入框值
+   */
+
+  var formatSetAssociationVisible = function formatSetAssociationVisible(newVisible, newValue) {
+    if (associationShowType === 'always') {
+      setVisible(true); // 聚焦模式下，直接把visible和newVisible对齐即可
+      // @en In focus mode, just align visible and newVisible directly
+    } else if (associationShowType === 'focus') {
+      setVisible(newVisible); // 聚焦 + 有值模式下，需要newVisible为true和newValue.length > 0同时满足
+      // @en In focus + valued mode, newVisible is required to be true and newValue.length > 0 to be satisfied at the same time
+    } else if (associationShowType === 'default') {
+      setVisible(newVisible && Boolean(newValue)); // 仅有值模式下，visible需要newValue.length > 0
+      // @en In value-only mode, visible requires newValue.length > 0
+    } else if (associationShowType === 'value') {
+      setVisible(Boolean(newValue));
+    }
+  };
+
+  var handleInputFocus = function handleInputFocus(e) {
+    formatSetAssociationVisible(true, e.target.value);
+    handleFocus(e);
+  };
+
+  var handleInputBlur = function handleInputBlur(e) {
+    formatSetAssociationVisible(false, e.target.value);
+    handleBlur(e);
+  };
+
+  var handleInputChange = function handleInputChange(e) {
+    var newValue = e.target.value;
+    formatSetAssociationVisible(Boolean(newValue), newValue);
+    handleChange(e);
+  };
+
+  var renderSearchBar = function renderSearchBar() {
+    return renderWrapper(searchBarPrefixCls, type, /*#__PURE__*/React.createElement("input", _extends({}, nativeProps, {
+      id: id,
+      name: name,
+      maxLength: maxLength,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      onKeyUp: onKeyUp,
+      onKeyPress: onKeyPress,
+      ref: inputRef,
+      className: cls(searchBarPrefixCls + "-input", inputClass, searchBarPrefixCls + "-input-" + textAlign),
+      style: inputStyle,
+      value: inputValue,
+      type: type,
+      disabled: disabled,
+      pattern: pattern,
+      onChange: handleInputChange,
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      onClick: handleClick
+    })));
+  };
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, renderSearchBar);
+});
+export default SearchBar;