@arco-design/mobile-react 2.25.3 → 2.26.0

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

@@ -2,21 +2,24 @@ 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;
+      onCancel = props.onCancel,
+      focusing = props.focusing,
+      currentInputValue = props.currentInputValue,
+      text = props.text;
+
   var _useState = useState(focusing || Boolean(currentInputValue)),
-    visible = _useState[0],
-    setVisible = _useState[1];
+      visible = _useState[0],
+      setVisible = _useState[1];
+
   var handleClick = function handleClick() {
-    onCancel == null ? void 0 : onCancel();
-    // 如果不延迟，在聚焦切输入框有值的情况下，点击取消按钮会造成闪烁
+    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]);

package/esm/search-bar/highlight.js

@@ -2,58 +2,64 @@ 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;
+      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;
+      content = _config$content === void 0 ? '' : _config$content,
+      _config$keyword = config.keyword,
+      keyword = _config$keyword === void 0 ? '' : _config$keyword; // 具体实现思路就是将keyword作为split的分隔符，切割content得到数组
 
-  // 具体实现思路就是将keyword作为split的分隔符，切割content得到数组
-  var splitContent = content.split(keyword);
+  var splitContent = content.split(keyword); // 再将高亮后的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);
+      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.js

@@ -8,6 +8,7 @@ import { IconSearch } from '../icon';
 import { useInputLogic } from '../input/hooks';
 import { SearchBarAssociation } from './association';
 import { CancelButton } from './cancel-button';
+
 /**
  * 搜索栏组件
  * @en SearchBar component
@@ -18,70 +19,74 @@ import { CancelButton } from './cancel-button';
  */
 var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useContext = useContext(GlobalContext),
-    prefixCls = _useContext.prefixCls,
-    locale = _useContext.locale;
+      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);
+      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
+    } // 默认情况下，在激活时或有内容时插入一个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,
@@ -91,8 +96,7 @@ var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
     }) : 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
+      keyword: currentInputValue // eslint-disable-next-line @typescript-eslint/no-use-before-define
       ,
       visible: actualVisible,
       associationItems: associationItems,
@@ -105,27 +109,30 @@ var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
       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;
+    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];
-  // 真实的控制搜索联想框显隐，受控模式优先生效
+      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 {
@@ -136,7 +143,6 @@ var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     };
   });
-
   /**
    * 处理非受控逻辑下，搜索联想框的显隐状态
    * @en Handle the display state of the search association box under uncontrolled logic
@@ -144,36 +150,38 @@ var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
    * @param {boolean} newVisible 新的visible
    * @param {string} newValue 新的输入框值
    */
+
   var formatSetAssociationVisible = function formatSetAssociationVisible(newVisible, newValue) {
     if (associationShowType === 'always') {
-      setVisible(true);
-      // 聚焦模式下，直接把visible和newVisible对齐即可
+      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同时满足
+      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
+      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,
@@ -198,6 +206,7 @@ var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
       onClick: handleClick
     })));
   };
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderSearchBar);
 });
 export default SearchBar;

package/esm/search-bar/style/css/index.css

@@ -53,6 +53,7 @@
 .arco-search-bar-input::placeholder {
   color:  #c9cdd4 ;
 }
+.arco-search-bar-input::-webkit-search-decoration,
 .arco-search-bar-input::-webkit-search-cancel-button {
   display: none;
 }

package/esm/search-bar/style/index.less

@@ -46,6 +46,7 @@
       .use-var(color, search-bar-input-placeholder-color);
     }
 
+    &::-webkit-search-decoration,
     &::-webkit-search-cancel-button {
       display: none;
     }