@arco-design/mobile-react 2.25.3 → 2.26.0

package/umd/search-bar/index.js

@@ -14,14 +14,18 @@
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
   _exports.__esModule = true;
   _exports.default = void 0;
   _extends2 = _interopRequireDefault(_extends2);
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
   _react = _interopRequireWildcard(_react);
   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"];
+
   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; }
+
   /**
    * 搜索栏组件
    * @en SearchBar component
@@ -32,70 +36,72 @@
    */
   var SearchBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _useContext = (0, _react.useContext)(_contextProvider.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.default.createElement(_icon.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+        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.default.createElement(_icon.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
     var inputRef = (0, _react.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.default.createElement(_cancelButton.CancelButton, {
         focusing: focusing,
         currentInputValue: currentInputValue,
@@ -105,8 +111,7 @@
       }) : actionButton;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, appendNode, formatActionButton, enableAssociation ? /*#__PURE__*/_react.default.createElement(_association.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,
@@ -119,27 +124,30 @@
         renderAssociationItem: renderAssociationItem
       }) : null);
     };
+
     var _useInputLogic = (0, _hooks.useInputLogic)((0, _extends2.default)({
-        className: (0, _mobileUtils.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: (0, _mobileUtils.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 = (0, _react.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;
     (0, _react.useImperativeHandle)(ref, function () {
       return {
@@ -150,7 +158,6 @@
         }
       };
     });
-
     /**
      * 处理非受控逻辑下，搜索联想框的显隐状态
      * @en Handle the display state of the search association box under uncontrolled logic
@@ -158,36 +165,38 @@
      * @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.default.createElement("input", (0, _extends2.default)({}, nativeProps, {
         id: id,
@@ -212,6 +221,7 @@
         onClick: handleClick
       })));
     };
+
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderSearchBar);
   });
   var _default = SearchBar;

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