@nutui/nutui-react 3.0.11 → 3.0.13-beta.0

package/dist/cjs/packages/range/style-jmapp/style.css

@@ -45,6 +45,8 @@
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary));
   border-radius: 2px;
+}
+.nut-range-bar-animate {
   transition: all 0.2s;
 }
 .nut-range-button {
@@ -173,7 +175,7 @@
   position: absolute;
   width: 36px;
   height: 100%;
-  top: initial;
+  top: 0px;
   right: 50%;
   overflow: visible;
   font-size: 12px;

package/dist/cjs/packages/range/style-jrkf/range.scss

@@ -46,7 +46,10 @@
     max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
-    transition: all 0.2s;
+
+    &-animate {
+      transition: all 0.2s;
+    }
   }
 
   &-button {
@@ -204,7 +207,8 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    top: initial;
+    // top: initial;
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: 12px;

package/dist/cjs/packages/range/style-jrkf/style.css

@@ -45,6 +45,8 @@
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff6666));
   border-radius: 2px;
+}
+.nut-range-bar-animate {
   transition: all 0.2s;
 }
 .nut-range-button {
@@ -173,7 +175,7 @@
   position: absolute;
   width: 36px;
   height: 100%;
-  top: initial;
+  top: 0px;
   right: 50%;
   overflow: visible;
   font-size: 12px;

package/dist/cjs/packages/range/utils.d.ts

@@ -0,0 +1,3 @@
+import { RangeValue } from "../../types";
+export declare const isSameValue: (newValue: RangeValue, oldValue: RangeValue) => boolean;
+export declare const handleOverlap: (value: number[]) => number[];

package/dist/cjs/packages/range/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    handleOverlap: function() {
+        return handleOverlap;
+    },
+    isSameValue: function() {
+        return isSameValue;
+    }
+});
+var isSameValue = function isSameValue(newValue, oldValue) {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+};
+var handleOverlap = function handleOverlap(value) {
+    return value[0] > value[1] ? value.slice(0).reverse() : value;
+};

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

@@ -8,14 +8,18 @@ Object.defineProperty(exports, "SearchBar", {
         return 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");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _iconsreact = require("@nutui/icons-react");
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _configprovider = require("../configprovider");
 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',
@@ -28,133 +32,204 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     left: '',
     right: '',
     rightIn: '',
-    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreact.Search, {
-        width: "16",
-        height: "16"
-    })
+    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreact.Search, null),
+    tag: false
 });
 var SearchBar = function SearchBar(props) {
     var classPrefix = 'nut-searchbar';
     var locale = (0, _configprovider.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 change = function change(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 handleChange = (0, _react.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 focus(event) {
-        var value = event.target.value;
-        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
-    };
-    var blur = function blur(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 = (0, _react.useCallback)(function(event) {
+        onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(event);
+    }, [
+        onInputClick
+    ]);
+    var handleFocus = (0, _react.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 = (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_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
+    ]);
     (0, _react.useEffect)(function() {
-        setValue(outerValue);
+        return function() {
+            if (blurTimer) clearTimeout(blurTimer);
+        };
+    }, [
+        blurTimer
+    ]);
+    var clearaVal = (0, _react.useCallback)(function(event) {
+        if (disabled || readOnly) return;
+        setValue('');
+        forceFocus();
+        onChange && onChange('');
+        onClear && onClear(event);
     }, [
-        outerValue
+        disabled,
+        readOnly,
+        onChange,
+        onClear,
+        setValue,
+        forceFocus
+    ]);
+    var onKeydown = (0, _react.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 = (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() {
-        autoFocus && forceFocus();
+        if (autoFocus) {
+            forceFocus();
+        }
     }, [
-        autoFocus
+        autoFocus,
+        forceFocus
     ]);
     var renderField = function renderField() {
+        var inputCls = (0, _classnames.default)("".concat(classPrefix, "-input"));
         return /*#__PURE__*/ _react.default.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 onChange(e) {
-                return change(e);
-            },
-            onFocus: function onFocus(e) {
-                return focus(e);
-            },
-            onBlur: function onBlur(e) {
-                return blur(e);
-            },
-            onClick: function onClick(e) {
-                return clickInput(e);
-            }
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onClick: handleInputClick
         });
     };
-    var clickInput = function clickInput(e) {
-        onInputClick && onInputClick(e);
-    };
-    var renderLeftIn = function renderLeftIn() {
+    var renderValueByTags = (0, _react.useCallback)(function() {
+        if (!value) {
+            setTimeout(function() {
+                forceFocus();
+            }, 0);
+            return null;
+        }
+        var list = value.split(',');
+        if (!list) return null;
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: "nut-searchbar-values"
+        }, list.map(function(item, index) {
+            return /*#__PURE__*/ _react.default.createElement("div", {
+                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(_iconsreact.Close, null));
+        }));
+    }, [
+        value,
+        onItemClick
+    ]);
+    var renderLeftIn = (0, _react.useCallback)(function() {
         if (!leftIn) return null;
         return /*#__PURE__*/ _react.default.createElement("div", {
             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("div", {
             className: "".concat(classPrefix, "-left")
-        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowLeft, {
-            width: "16",
-            height: "16"
-        }) : left);
-    };
-    var renderRightIn = function renderRightIn() {
+        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowLeft, null) : left);
+    }, [
+        backable,
+        left
+    ]);
+    var renderRightIn = (0, _react.useCallback)(function() {
         if (!rightIn) return null;
-        return /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.isValidElement(rightIn) ? /*#__PURE__*/ _react.default.createElement("div", {
             className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
-        }, rightIn);
-    };
-    var renderRight = function renderRight() {
+        }, rightIn) : /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-rightin")
+        }, rightIn));
+    }, [
+        rightIn
+    ]);
+    var renderRight = (0, _react.useCallback)(function() {
         if (!right) return null;
         return /*#__PURE__*/ _react.default.createElement("div", {
             className: "".concat(classPrefix, "-right")
         }, right);
-    };
-    var handleClear = function handleClear() {
+    }, [
+        right
+    ]);
+    var renderClear = (0, _react.useCallback)(function() {
+        if (!value || !clearable) return null;
         return /*#__PURE__*/ _react.default.createElement("div", {
             className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
-            onClick: function onClick(e) {
-                return clearaVal(e);
-            }
+            onClick: clearaVal,
+            "aria-label": "清除"
         }, /*#__PURE__*/ _react.default.createElement(_iconsreact.MaskClose, null));
-    };
-    var clearaVal = function clearaVal(event) {
-        if (disabled || readOnly) {
-            return;
-        }
-        setValue('');
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
-        onClear && onClear(event);
-        forceFocus();
-    };
-    var onKeydown = function onKeydown(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.default.createElement("div", {
-        className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),
+        className: cls,
         style: style
     }, renderLeft(), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content ").concat(shape === 'round' ? "".concat(classPrefix, "-round") : '')
-    }, renderLeftIn(), renderField(), clearable && !value && renderRightIn(), clearable && value && handleClear()), renderRight());
+        className: (0, _classnames.default)("".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-round"), shape === 'round'))
+    }, renderLeftIn(), renderField(), innerTag ? 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,