@rc-component/select 1.1.3 → 1.1.5

package/es/BaseSelect/index.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import cls from 'classnames';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
-import useMergedState from "@rc-component/util/es/hooks/useMergedState";
+import useControlledState from "@rc-component/util/es/hooks/useControlledState";
 import isMobile from "@rc-component/util/es/isMobile";
 import { useComposeRef } from "@rc-component/util/es/ref";
 import { getDOM } from "@rc-component/util/es/Dom/findDOMNode";
@@ -150,10 +150,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   useLayoutEffect(() => {
     setRendered(true);
   }, []);
-  const [innerOpen, setInnerOpen] = useMergedState(false, {
-    defaultValue: defaultOpen,
-    value: open
-  });
+  const [innerOpen, setInnerOpen] = useControlledState(defaultOpen || false, open);
   let mergedOpen = rendered ? innerOpen : false;
 
   // Not trigger `open` in `combobox` when `notFoundContent` is empty

package/es/Select.d.ts

@@ -125,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/es/Select.js

@@ -30,7 +30,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * - `combobox` mode not support `optionLabelProp`
  */
 
-import useMergedState from "@rc-component/util/es/hooks/useMergedState";
+import useControlledState from "@rc-component/util/es/hooks/useControlledState";
 import warning from "@rc-component/util/es/warning";
 import * as React from 'react';
 import BaseSelect, { isMultiple } from "./BaseSelect";
@@ -127,10 +127,8 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   /* eslint-enable react-hooks/exhaustive-deps */);
 
   // =========================== Search ===========================
-  const [mergedSearchValue, setSearchValue] = useMergedState('', {
-    value: searchValue,
-    postState: search => search || ''
-  });
+  const [internalSearchValue, setSearchValue] = useControlledState('', searchValue);
+  const mergedSearchValue = internalSearchValue || '';
 
   // =========================== Option ===========================
   const parsedOptions = useOptions(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
@@ -185,9 +183,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [mergedFieldNames, optionLabelProp, valueOptions]);
 
   // =========================== Values ===========================
-  const [internalValue, setInternalValue] = useMergedState(defaultValue, {
-    value
-  });
+  const [internalValue, setInternalValue] = useControlledState(defaultValue, value);
 
   // Merged value with LabelValueType
   const rawLabeledValues = React.useMemo(() => {

package/es/hooks/useDelayReset.js

@@ -10,15 +10,24 @@ export default function useDelayReset(timeout = 10) {
   const cancelLatest = () => {
     window.clearTimeout(delayRef.current);
   };
-  React.useEffect(() => cancelLatest, []);
+  React.useEffect(() => {
+    return () => {
+      cancelLatest();
+    };
+  }, []);
   const delaySetBool = (value, callback) => {
     cancelLatest();
-    delayRef.current = window.setTimeout(() => {
-      setBool(value);
-      if (callback) {
-        callback();
-      }
-    }, timeout);
+    if (value === true) {
+      // true 值立即设置
+      setBool(true);
+      callback?.();
+    } else {
+      // false 值延迟设置
+      delayRef.current = window.setTimeout(() => {
+        setBool(false);
+        callback?.();
+      }, timeout);
+    }
   };
   return [bool, delaySetBool, cancelLatest];
 }

package/lib/BaseSelect/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.isMultiple = exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
-var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
+var _useControlledState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useControlledState"));
 var _isMobile = _interopRequireDefault(require("@rc-component/util/lib/isMobile"));
 var _ref = require("@rc-component/util/lib/ref");
 var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
@@ -160,10 +160,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   (0, _useLayoutEffect.default)(() => {
     setRendered(true);
   }, []);
-  const [innerOpen, setInnerOpen] = (0, _useMergedState.default)(false, {
-    defaultValue: defaultOpen,
-    value: open
-  });
+  const [innerOpen, setInnerOpen] = (0, _useControlledState.default)(defaultOpen || false, open);
   let mergedOpen = rendered ? innerOpen : false;
 
   // Not trigger `open` in `combobox` when `notFoundContent` is empty

package/lib/Select.d.ts

@@ -125,7 +125,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     classNames?: Partial<Record<SemanticName, string>>;
     styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
-declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
     Option: typeof Option;
     OptGroup: typeof OptGroup;
 };

package/lib/Select.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
+var _useControlledState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useControlledState"));
 var _warning = _interopRequireDefault(require("@rc-component/util/lib/warning"));
 var React = _interopRequireWildcard(require("react"));
 var _BaseSelect = _interopRequireWildcard(require("./BaseSelect"));
@@ -134,10 +134,8 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   /* eslint-enable react-hooks/exhaustive-deps */);
 
   // =========================== Search ===========================
-  const [mergedSearchValue, setSearchValue] = (0, _useMergedState.default)('', {
-    value: searchValue,
-    postState: search => search || ''
-  });
+  const [internalSearchValue, setSearchValue] = (0, _useControlledState.default)('', searchValue);
+  const mergedSearchValue = internalSearchValue || '';
 
   // =========================== Option ===========================
   const parsedOptions = (0, _useOptions.default)(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
@@ -192,9 +190,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [mergedFieldNames, optionLabelProp, valueOptions]);
 
   // =========================== Values ===========================
-  const [internalValue, setInternalValue] = (0, _useMergedState.default)(defaultValue, {
-    value
-  });
+  const [internalValue, setInternalValue] = (0, _useControlledState.default)(defaultValue, value);
 
   // Merged value with LabelValueType
   const rawLabeledValues = React.useMemo(() => {

package/lib/hooks/useDelayReset.js

@@ -17,15 +17,24 @@ function useDelayReset(timeout = 10) {
   const cancelLatest = () => {
     window.clearTimeout(delayRef.current);
   };
-  React.useEffect(() => cancelLatest, []);
+  React.useEffect(() => {
+    return () => {
+      cancelLatest();
+    };
+  }, []);
   const delaySetBool = (value, callback) => {
     cancelLatest();
-    delayRef.current = window.setTimeout(() => {
-      setBool(value);
-      if (callback) {
-        callback();
-      }
-    }, timeout);
+    if (value === true) {
+      // true 值立即设置
+      setBool(true);
+      callback?.();
+    } else {
+      // false 值延迟设置
+      delayRef.current = window.setTimeout(() => {
+        setBool(false);
+        callback?.();
+      }, timeout);
+    }
   };
   return [bool, delaySetBool, cancelLatest];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"
@@ -51,7 +51,7 @@
   "dependencies": {
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/motion": "^1.1.4",
-    "@rc-component/util": "^1.2.1",
+    "@rc-component/util": "^1.3.0",
     "classnames": "2.x",
     "rc-overflow": "^1.4.0",
     "rc-virtual-list": "^3.5.2"