@kne/react-filter 1.0.4 → 1.0.5

package/dist/index.js

@@ -1493,33 +1493,90 @@ const withFilterValue = WrappedComponent => {
   };
 };
 
-const _excluded$2 = ["label", "onChange", "value", "placeholder"];
+const _excluded$2 = ["label", "onChange", "value", "placeholder", "searchDelay"];
 const Search = antd.Input.Search;
-const SearchInput = withFilterValue(_ref => {
+const SearchInput = withLocale(withFilterValue(_ref => {
   let label = _ref.label,
     onChange = _ref.onChange,
     value = _ref.value,
     placeholder = _ref.placeholder,
+    _ref$searchDelay = _ref.searchDelay,
+    searchDelay = _ref$searchDelay === void 0 ? 500 : _ref$searchDelay,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const _useIntl = reactIntl.useIntl({
       moduleName: 'Filter'
     }),
     formatMessage = _useIntl.formatMessage;
+  const propsValue = value == null ? void 0 : value.value;
+  const _useState = react.useState(propsValue || ''),
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
+  const inputValueRef = react.useRef('');
+  const onChangeRef = react.useRef(onChange);
+  const searchTimerRef = react.useRef(null);
+  const isComposingRef = react.useRef(false);
+  inputValueRef.current = inputValue;
+  onChangeRef.current = onChange;
+  const clearSearchTimer = () => {
+    if (searchTimerRef.current) {
+      clearTimeout(searchTimerRef.current);
+      searchTimerRef.current = null;
+    }
+  };
+  const submitSearch = searchValue => {
+    onChangeRef.current == null || onChangeRef.current(searchValue ? {
+      label: searchValue,
+      value: searchValue
+    } : null);
+  };
+  const scheduleSearch = searchValue => {
+    clearSearchTimer();
+    searchTimerRef.current = setTimeout(() => {
+      searchTimerRef.current = null;
+      submitSearch(searchValue);
+    }, searchDelay);
+  };
+  react.useEffect(() => {
+    if (propsValue !== inputValueRef.current) {
+      clearSearchTimer();
+      setInputValue(propsValue || '');
+    }
+  }, [propsValue]);
+  react.useEffect(() => {
+    return () => {
+      clearSearchTimer();
+    };
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsx(Search, _extends({}, props, {
     placeholder: placeholder || formatMessage({
       id: 'inputPlaceholder'
     }, {
       label
     }),
-    value: (value == null ? void 0 : value.value) || '',
-    onSearch: value => {
-      onChange({
-        label: value,
-        value
-      });
+    value: inputValue,
+    onChange: e => {
+      const nextValue = e.target.value;
+      setInputValue(nextValue);
+      if (!isComposingRef.current) {
+        scheduleSearch(nextValue);
+      }
+    },
+    onCompositionStart: () => {
+      isComposingRef.current = true;
+      clearSearchTimer();
+    },
+    onCompositionEnd: e => {
+      isComposingRef.current = false;
+      const nextValue = e.target.value;
+      setInputValue(nextValue);
+      scheduleSearch(nextValue);
+    },
+    onSearch: searchValue => {
+      clearSearchTimer();
+      submitSearch(searchValue);
     }
   }));
-});
+}));
 
 /**
  * 从筛选值中提取原始值数组。