@nutui/nutui-react-taro 3.0.11 → 3.0.12

package/dist/cjs/packages/searchbar/searchbar.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "SearchBar", {
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
@@ -17,8 +18,10 @@ var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _components = require("@tarojs/components");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _index = require("../configprovider/index");
 var _typings = require("../../utils/typings");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     placeholder: '',
     shape: 'square',
@@ -31,127 +34,228 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     left: '',
     right: '',
     rightIn: '',
-    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Search, {
-        size: "16"
-    })
+    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Search, null),
+    tag: false
 });
 var SearchBar = function SearchBar(props) {
     var classPrefix = 'nut-searchbar';
     var locale = (0, _index.useConfig)().locale;
-    var searchRef = (0, _react.useRef)(null);
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick;
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
-        return outerValue;
-    }), 2), value = _useState[0], setValue = _useState[1];
-    var forceFocus = function forceFocus() {
-        var searchSelf = searchRef.current;
-        searchSelf && searchSelf.focus();
-    };
-    var onInput = function onInput(event) {
+    var searchInputRef = (0, _react.useRef)(null);
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, tag = _$_object_spread.tag, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick, onItemClick = _$_object_spread.onItemClick;
+    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
+        value: outerValue,
+        defaultValue: defaultValue,
+        finalValue: ''
+    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(tag), 2), innerTag = _useState[0], setInnerTag = _useState[1];
+    var forceFocus = (0, _react.useCallback)(function() {
+        var _searchInputRef_current;
+        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
+    }, []);
+    var handleInput = (0, _react.useCallback)(function(event) {
         var _event_detail;
-        var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
+        var eventValue = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
         if (value === eventValue) return;
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
+        onChange && onChange(eventValue, event);
         setValue(eventValue);
         eventValue === '' && forceFocus();
-    };
-    var focus = function focus(event) {
-        var _event_detail;
-        onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
-    };
-    var blur = function blur(event) {
+    }, [
+        onChange,
+        setValue,
+        forceFocus,
+        value
+    ]);
+    var handleFocus = (0, _react.useCallback)(function(event) {
         var _event_detail;
-        var searchSelf = searchRef.current;
-        searchSelf && searchSelf.blur();
-        onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
-    };
+        onFocus && onFocus((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
+        if (tag) setInnerTag(false);
+    }, [
+        onFocus
+    ]);
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), blurTimer = _useState1[0], setBlurTimer = _useState1[1];
+    var handleBlur = (0, _react.useCallback)(function(event) {
+        var _searchInputRef_current, _event_detail;
+        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.blur();
+        onBlur && onBlur((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
+        if (tag) {
+            var timer = setTimeout(function() {
+                if (_taro.default.getEnv() === 'WEB') {
+                    var _event_target;
+                    setInnerTag(((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value) ? tag : false);
+                } else {
+                    setInnerTag(tag);
+                }
+            }, 200);
+            setBlurTimer(timer);
+        }
+    }, [
+        onBlur,
+        tag,
+        value
+    ]);
     (0, _react.useEffect)(function() {
-        setValue(outerValue || '');
+        return function() {
+            if (blurTimer) clearTimeout(blurTimer);
+        };
     }, [
-        outerValue
+        blurTimer
+    ]);
+    var clearaVal = (0, _react.useCallback)(function(event) {
+        if (disabled || readOnly) return;
+        setValue('');
+        forceFocus();
+        onChange && onChange('');
+        onClear && onClear(event);
+    }, [
+        disabled,
+        readOnly,
+        onChange,
+        onClear,
+        setValue
+    ]);
+    var cls = (0, _react.useMemo)(function() {
+        var _obj;
+        return (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-focus"), left || backable), _obj), className);
+    }, [
+        disabled,
+        backable,
+        left,
+        className
     ]);
     (0, _react.useEffect)(function() {
-        if (_taro.default.getEnv() === 'WEB') {
-            autoFocus && forceFocus();
+        if (autoFocus) {
+            forceFocus();
+        }
+        if (tag && !innerTag) {
+            forceFocus();
         }
     }, [
-        autoFocus
+        autoFocus,
+        forceFocus,
+        innerTag
     ]);
     var renderField = function renderField() {
-        return /*#__PURE__*/ _react.default.createElement(_components.Input, {
-            className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
-            ref: searchRef,
-            style: style,
-            value: (value || '').toString(),
+        var inputCls = (0, _classnames.default)("".concat(classPrefix, "-input"));
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, _taro.default.getEnv() === 'WEB' ? /*#__PURE__*/ _react.default.createElement(_components.Input, {
+            className: inputCls,
+            ref: searchInputRef,
+            style: (0, _object_spread._)({}, style, {
+                color: "".concat(innerTag ? 'transparent' : '#333')
+            }),
+            value: value,
             placeholder: placeholder || locale.placeholder,
             disabled: disabled || readOnly,
             maxlength: maxLength,
             autoFocus: autoFocus,
-            onInput: onInput,
-            onFocus: focus,
-            onBlur: blur,
-            onClick: clickInput,
+            onInput: handleInput,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onClick: onInputClick,
             onConfirm: onConfirm
-        });
-    };
-    var clickInput = function clickInput(e) {
-        onInputClick && onInputClick(e);
+        }) : /*#__PURE__*/ _react.default.createElement(_components.Input, {
+            className: inputCls,
+            ref: searchInputRef,
+            style: (0, _object_spread._)({}, style, {
+                color: "".concat(innerTag ? 'transparent' : '#333')
+            }),
+            value: value,
+            placeholder: placeholder || locale.placeholder,
+            disabled: disabled || readOnly,
+            maxlength: maxLength,
+            focus: autoFocus,
+            onInput: handleInput,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onClick: onInputClick,
+            onConfirm: onConfirm
+        }));
     };
-    var renderLeftIn = function renderLeftIn() {
+    var renderValueByTags = (0, _react.useCallback)(function() {
+        if (!innerTag) return null;
+        if (!value) {
+            setTimeout(function() {
+                forceFocus();
+            }, 0);
+            return null;
+        }
+        var list = value.split(',');
+        if (!list) return null;
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "nut-searchbar-values"
+        }, list.map(function(item, index) {
+            return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                key: "def-".concat(index),
+                className: "nut-searchbar-value",
+                onClick: function onClick(e) {
+                    return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
+                }
+            }, item, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null));
+        }));
+    }, [
+        value,
+        onItemClick,
+        innerTag
+    ]);
+    var renderLeftIn = (0, _react.useCallback)(function() {
         if (!leftIn) return null;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
         }, leftIn);
-    };
-    var renderLeft = function renderLeft() {
+    }, [
+        leftIn
+    ]);
+    var renderLeft = (0, _react.useCallback)(function() {
         if (!backable && !left) return null;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-left")
-        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowLeft, {
-            size: "16"
-        }) : left);
-    };
-    var renderRightIn = function renderRightIn() {
+        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowLeft, null) : left);
+    }, [
+        backable,
+        left
+    ]);
+    var renderRightIn = (0, _react.useCallback)(function() {
         if (!rightIn) return null;
-        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.isValidElement(rightIn) ? /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
-        }, rightIn);
-    };
-    var renderRight = function renderRight() {
+        }, rightIn) : /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-rightin")
+        }, rightIn));
+    }, [
+        rightIn
+    ]);
+    var renderRight = (0, _react.useCallback)(function() {
         if (!right) return null;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-right")
         }, right);
-    };
-    var handleClear = function handleClear() {
+    }, [
+        right
+    ]);
+    var renderClear = (0, _react.useCallback)(function() {
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-clear  ").concat(classPrefix, "-icon"),
-            onClick: function onClick(e) {
-                return clearaVal(e);
-            }
-        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, {
-            size: 16
-        }));
-    };
-    var clearaVal = function clearaVal(event) {
-        if (disabled || readOnly) {
-            return;
-        }
-        setValue('');
-        forceFocus();
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
-        onClear && onClear(event);
-    };
+            className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
+            style: {
+                visibility: "".concat(!innerTag && value && clearable ? 'visible' : 'hidden')
+            },
+            onClick: clearaVal,
+            "aria-label": "清除"
+        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, null));
+    }, [
+        value,
+        clearable,
+        clearaVal,
+        innerTag
+    ]);
     var onConfirm = function onConfirm() {
         onSearch && onSearch(value);
     };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),
+        className: cls,
         style: style
     }, renderLeft(), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-content ").concat(shape === 'round' ? "".concat(classPrefix, "-round") : '')
+        className: (0, _classnames.default)("".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-round"), shape === 'round'))
     }, renderLeftIn(), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-searchbar-input-box"
-    }, renderField()), clearable && !value && renderRightIn(), clearable && value && handleClear()), renderRight());
+    }, renderField()), renderValueByTags(), renderClear(), renderRightIn()), renderRight());
 };
 SearchBar.displayName = 'NutSearchBar';

package/dist/cjs/packages/searchbar/style/searchbar.scss

@@ -9,28 +9,114 @@
   box-sizing: border-box;
   justify-content: center;
 
+  .nut-icon {
+    width: $searchbar-icon-size;
+    height: $searchbar-icon-size;
+    font-size: $searchbar-icon-size;
+  }
+
   &-content {
+    position: relative;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $searchbar-content-padding;
+    padding: 0 $searchbar-gap;
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
+    border: 1px solid $color-primary;
   }
 
   &-icon {
     display: flex;
     justify-content: center;
     align-items: center;
+    color: $color-primary;
+  }
+
+  &-leftin {
+    margin-right: $searchbar-inner-gap;
   }
 
-  &-clear,
   &-rightin {
-    width: 16px;
-    height: 16px;
-    color: var(--nutui-black-5);
+    font-size: 15px;
+    font-weight: 500;
+    color: $color-primary;
+
+    &.nut-searchbar-icon {
+      color: var(--nutui-black-5);
+    }
+  }
+
+  &-input-box,
+  &-input {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  &-input {
+    border: 0;
+    outline: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: $searchbar-font-size;
+    color: $searchbar-input-text-color;
+    caret-color: $searchbar-input-curror-color;
+    background: transparent;
+    text-align: $searchbar-input-text-align;
+  }
+
+  &-clear {
+    &.nut-searchbar-icon {
+      position: relative;
+      .nut-icon {
+        width: 12px;
+        height: 12px;
+        color: var(--nutui-black-5);
+        margin-right: $searchbar-inner-gap;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 200%;
+        left: -20%;
+      }
+    }
+  }
+
+  &-values {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    z-index: 2;
+    background-color: #fff;
+    top: 9px;
+    left: 6px;
+    font-size: 12px;
+    line-height: 12px;
+
+    .nut-searchbar-value {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 4px 8px;
+      background-color: #f7f8fc;
+      border-radius: 4px;
+      margin-right: 2px;
+    }
+
+    .nut-icon {
+      width: 6px;
+      height: 6px;
+      font-size: 6px;
+      color: #c2c4cc;
+      margin-left: 4px;
+    }
   }
 
   &-left,
@@ -93,26 +179,6 @@
     }
   }
 
-  &-input-box,
-  &-input {
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-
-  &-input {
-    border: 0;
-    outline: 0;
-    box-sizing: border-box;
-    width: 100%;
-    padding: $searchbar-input-padding;
-    font-size: $searchbar-font-size;
-    color: $searchbar-input-text-color;
-    caret-color: $searchbar-input-curror-color;
-    background: transparent;
-    text-align: $searchbar-input-text-align;
-  }
-
   &-round {
     border-radius: $searchbar-content-round-border-radius;
   }
@@ -120,6 +186,14 @@
   &-disabled {
     cursor: not-allowed;
   }
+
+  &-focus {
+    padding: 5px $searchbar-gap;
+
+    .nut-searchbar-content {
+      border: 0.5px solid #ff5c67;
+    }
+  }
 }
 
 [dir='rtl'] .nut-searchbar,