@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/es/packages/searchbar/searchbar.js

@@ -1,10 +1,13 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useEffect, useRef, useState } from "react";
-import { ArrowLeft, MaskClose, Search } from "@nutui/icons-react";
+import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import { ArrowLeft, Close, MaskClose, Search } from "@nutui/icons-react";
+import classNames from "classnames";
 import { useConfig } from "../configprovider";
 import { ComponentDefaults } from "../../utils/typings";
+import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     placeholder: '',
     shape: 'square',
@@ -17,133 +20,204 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
     right: '',
     rightIn: '',
-    leftIn: /*#__PURE__*/ React.createElement(Search, {
-        width: "16",
-        height: "16"
-    })
+    leftIn: /*#__PURE__*/ React.createElement(Search, null),
+    tag: false
 });
 export var SearchBar = function(props) {
     var classPrefix = 'nut-searchbar';
     var locale = useConfig().locale;
-    var searchRef = useRef(null);
-    var _$_object_spread = _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 = _sliced_to_array(useState(function() {
-        return outerValue;
-    }), 2), value = _useState[0], setValue = _useState[1];
-    var forceFocus = function() {
-        var searchSelf = searchRef.current;
-        searchSelf && searchSelf.focus();
-    };
-    var change = function(event) {
+    var searchInputRef = useRef(null);
+    var _$_object_spread = _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 = _sliced_to_array(usePropsValue({
+        value: outerValue,
+        defaultValue: defaultValue,
+        finalValue: ''
+    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var _useState = _sliced_to_array(useState(tag), 2), innerTag = _useState[0], setInnerTag = _useState[1];
+    var forceFocus = useCallback(function() {
+        var _searchInputRef_current;
+        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
+    }, []);
+    var handleChange = useCallback(function(event) {
         var value = event.target.value;
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value, event));
+        onChange && onChange(value, event);
         setValue(value);
-    };
-    var focus = function(event) {
-        var value = event.target.value;
-        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
-    };
-    var blur = function(event) {
-        var searchSelf = searchRef.current;
-        searchSelf && searchSelf.blur();
-        var value = event.target.value;
-        onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
-    };
+    }, [
+        onChange,
+        setValue
+    ]);
+    var handleInputClick = useCallback(function(event) {
+        onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(event);
+    }, [
+        onInputClick
+    ]);
+    var handleFocus = useCallback(function(event) {
+        var _event_target;
+        onFocus && onFocus((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value, event);
+        if (tag) setInnerTag(false);
+    }, [
+        onFocus,
+        tag
+    ]);
+    var _useState1 = _sliced_to_array(useState(null), 2), blurTimer = _useState1[0], setBlurTimer = _useState1[1];
+    var handleBlur = useCallback(function(event) {
+        var _searchInputRef_current, _event_target;
+        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.blur();
+        onBlur && onBlur((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value, event);
+        if (tag) {
+            var timer = setTimeout(function() {
+                var _event_target;
+                setInnerTag(((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value) ? tag : false);
+            }, 150);
+            setBlurTimer(timer);
+        }
+    }, [
+        onBlur,
+        tag
+    ]);
     useEffect(function() {
-        setValue(outerValue);
+        return function() {
+            if (blurTimer) clearTimeout(blurTimer);
+        };
+    }, [
+        blurTimer
+    ]);
+    var clearaVal = useCallback(function(event) {
+        if (disabled || readOnly) return;
+        setValue('');
+        forceFocus();
+        onChange && onChange('');
+        onClear && onClear(event);
     }, [
-        outerValue
+        disabled,
+        readOnly,
+        onChange,
+        onClear,
+        setValue,
+        forceFocus
+    ]);
+    var onKeydown = useCallback(function(e) {
+        if (e.key === 'Enter') {
+            var event = e.nativeEvent;
+            if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+                event.preventDefault();
+            }
+            onSearch && onSearch(value);
+        }
+    }, [
+        onSearch,
+        value
+    ]);
+    var cls = useMemo(function() {
+        var _obj;
+        return classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-focus"), left || backable), _obj), className);
+    }, [
+        disabled,
+        backable,
+        left,
+        className
     ]);
     useEffect(function() {
-        autoFocus && forceFocus();
+        if (autoFocus) {
+            forceFocus();
+        }
     }, [
-        autoFocus
+        autoFocus,
+        forceFocus
     ]);
     var renderField = function() {
+        var inputCls = classNames("".concat(classPrefix, "-input"));
         return /*#__PURE__*/ React.createElement("input", {
-            className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
-            ref: searchRef,
+            className: inputCls,
+            ref: searchInputRef,
             value: value || '',
             placeholder: placeholder || locale.placeholder,
             disabled: disabled,
             readOnly: readOnly,
             maxLength: maxLength,
             onKeyDown: onKeydown,
-            onChange: function(e) {
-                return change(e);
-            },
-            onFocus: function(e) {
-                return focus(e);
-            },
-            onBlur: function(e) {
-                return blur(e);
-            },
-            onClick: function(e) {
-                return clickInput(e);
-            }
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onClick: handleInputClick
         });
     };
-    var clickInput = function(e) {
-        onInputClick && onInputClick(e);
-    };
-    var renderLeftIn = function() {
+    var renderValueByTags = useCallback(function() {
+        if (!value) {
+            setTimeout(function() {
+                forceFocus();
+            }, 0);
+            return null;
+        }
+        var list = value.split(',');
+        if (!list) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "nut-searchbar-values"
+        }, list.map(function(item, index) {
+            return /*#__PURE__*/ React.createElement("div", {
+                key: "def-".concat(index),
+                className: "nut-searchbar-value",
+                onClick: function(e) {
+                    return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
+                }
+            }, item, /*#__PURE__*/ React.createElement(Close, null));
+        }));
+    }, [
+        value,
+        onItemClick
+    ]);
+    var renderLeftIn = useCallback(function() {
         if (!leftIn) return null;
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
         }, leftIn);
-    };
-    var renderLeft = function() {
+    }, [
+        leftIn
+    ]);
+    var renderLeft = useCallback(function() {
         if (!backable && !left) return null;
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-left")
-        }, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, {
-            width: "16",
-            height: "16"
-        }) : left);
-    };
-    var renderRightIn = function() {
+        }, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, null) : left);
+    }, [
+        backable,
+        left
+    ]);
+    var renderRightIn = useCallback(function() {
         if (!rightIn) return null;
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.isValidElement(rightIn) ? /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
-        }, rightIn);
-    };
-    var renderRight = function() {
+        }, rightIn) : /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-rightin")
+        }, rightIn));
+    }, [
+        rightIn
+    ]);
+    var renderRight = useCallback(function() {
         if (!right) return null;
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-right")
         }, right);
-    };
-    var handleClear = function() {
+    }, [
+        right
+    ]);
+    var renderClear = useCallback(function() {
+        if (!value || !clearable) return null;
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
-            onClick: function(e) {
-                return clearaVal(e);
-            }
+            onClick: clearaVal,
+            "aria-label": "清除"
         }, /*#__PURE__*/ React.createElement(MaskClose, null));
-    };
-    var clearaVal = function(event) {
-        if (disabled || readOnly) {
-            return;
-        }
-        setValue('');
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
-        onClear && onClear(event);
-        forceFocus();
-    };
-    var onKeydown = function(e) {
-        if (e.key === 'Enter') {
-            var event = e.nativeEvent;
-            if (typeof event.cancelable !== 'boolean' || event.cancelable) {
-                event.preventDefault();
-            }
-            onSearch && onSearch(value);
-        }
-    };
+    }, [
+        value,
+        clearable,
+        clearaVal
+    ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),
+        className: cls,
         style: style
     }, renderLeft(), /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-content ").concat(shape === 'round' ? "".concat(classPrefix, "-round") : '')
-    }, renderLeftIn(), renderField(), clearable && !value && renderRightIn(), clearable && value && handleClear()), renderRight());
+        className: classNames("".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-round"), shape === 'round'))
+    }, renderLeftIn(), renderField(), innerTag ? renderValueByTags() : renderClear(), renderRightIn()), renderRight());
 };
 SearchBar.displayName = 'NutSearchBar';

package/dist/es/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,