@kne/react-filter 1.0.4 → 1.0.5

package/dist/index.modern.js

@@ -1467,16 +1467,17 @@ const withFilterValue = WrappedComponent => {
   };
 };
 
-const _excluded$4 = ["label", "onChange", "value", "placeholder"];
+const _excluded$4 = ["label", "onChange", "value", "placeholder", "searchDelay"];
 const {
   Search
 } = Input;
-const SearchInput = withFilterValue(_ref => {
+const SearchInput = withLocale(withFilterValue(_ref => {
   let {
       label,
       onChange,
       value,
-      placeholder
+      placeholder,
+      searchDelay = 500
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const {
@@ -1484,21 +1485,74 @@ const SearchInput = withFilterValue(_ref => {
   } = useIntl({
     moduleName: 'Filter'
   });
+  const propsValue = value == null ? void 0 : value.value;
+  const [inputValue, setInputValue] = useState(propsValue || '');
+  const inputValueRef = useRef('');
+  const onChangeRef = useRef(onChange);
+  const searchTimerRef = useRef(null);
+  const isComposingRef = 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);
+  };
+  useEffect(() => {
+    if (propsValue !== inputValueRef.current) {
+      clearSearchTimer();
+      setInputValue(propsValue || '');
+    }
+  }, [propsValue]);
+  useEffect(() => {
+    return () => {
+      clearSearchTimer();
+    };
+  }, []);
   return /*#__PURE__*/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);
     }
   }));
-});
+}));
 
 /**
  * 从筛选值中提取原始值数组。