@rc-component/util 1.2.2 → 1.3.0

package/es/hooks/useControlledState.d.ts

@@ -0,0 +1,8 @@
+type Updater<T> = (updater: T | ((origin: T) => T)) => void;
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hooks remove the `onChange` & `postState` logic since we only need basic merged state logic.
+ */
+export default function useControlledState<T>(defaultStateValue: T | (() => T), value?: T): [T, Updater<T>];
+export {};

package/es/hooks/useControlledState.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import useLayoutEffect from "./useLayoutEffect";
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hooks remove the `onChange` & `postState` logic since we only need basic merged state logic.
+ */
+export default function useControlledState(defaultStateValue, value) {
+  const [innerValue, setInnerValue] = useState(defaultStateValue);
+  const mergedValue = value !== undefined ? value : innerValue;
+  useLayoutEffect(mount => {
+    if (!mount) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  return [
+  // Value
+  mergedValue,
+  // Update function
+  setInnerValue];
+}

package/es/hooks/useMergedState.d.ts

@@ -1,5 +1,6 @@
 type Updater<T> = (updater: T | ((origin: T) => T), ignoreDestroy?: boolean) => void;
 /**
+ * @deprecated Please use `useControlledState` instead if not need support < React 18.
  * Similar to `useState` but will use props value if provided.
  * Note that internal use rc-util `useState` hook.
  */

package/es/hooks/useMergedState.js

@@ -7,6 +7,7 @@ function hasValue(value) {
 }
 
 /**
+ * @deprecated Please use `useControlledState` instead if not need support < React 18.
  * Similar to `useState` but will use props value if provided.
  * Note that internal use rc-util `useState` hook.
  */

package/es/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useEvent } from './hooks/useEvent';
 export { default as useMergedState } from './hooks/useMergedState';
+export { default as useControlledState } from './hooks/useControlledState';
 export { supportNodeRef, supportRef, useComposeRef } from './ref';
 export { default as get } from './utils/get';
 export { default as set, merge } from './utils/set';

package/es/index.js

@@ -1,5 +1,6 @@
 export { default as useEvent } from "./hooks/useEvent";
 export { default as useMergedState } from "./hooks/useMergedState";
+export { default as useControlledState } from "./hooks/useControlledState";
 export { supportNodeRef, supportRef, useComposeRef } from "./ref";
 export { default as get } from "./utils/get";
 export { default as set, merge } from "./utils/set";

package/lib/hooks/useControlledState.d.ts

@@ -0,0 +1,8 @@
+type Updater<T> = (updater: T | ((origin: T) => T)) => void;
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hooks remove the `onChange` & `postState` logic since we only need basic merged state logic.
+ */
+export default function useControlledState<T>(defaultStateValue: T | (() => T), value?: T): [T, Updater<T>];
+export {};

package/lib/hooks/useControlledState.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useControlledState;
+var _react = require("react");
+var _useLayoutEffect = _interopRequireDefault(require("./useLayoutEffect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hooks remove the `onChange` & `postState` logic since we only need basic merged state logic.
+ */
+function useControlledState(defaultStateValue, value) {
+  const [innerValue, setInnerValue] = (0, _react.useState)(defaultStateValue);
+  const mergedValue = value !== undefined ? value : innerValue;
+  (0, _useLayoutEffect.default)(mount => {
+    if (!mount) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  return [
+  // Value
+  mergedValue,
+  // Update function
+  setInnerValue];
+}

package/lib/hooks/useMergedState.d.ts

@@ -1,5 +1,6 @@
 type Updater<T> = (updater: T | ((origin: T) => T), ignoreDestroy?: boolean) => void;
 /**
+ * @deprecated Please use `useControlledState` instead if not need support < React 18.
  * Similar to `useState` but will use props value if provided.
  * Note that internal use rc-util `useState` hook.
  */

package/lib/hooks/useMergedState.js

@@ -14,6 +14,7 @@ function hasValue(value) {
 }
 
 /**
+ * @deprecated Please use `useControlledState` instead if not need support < React 18.
  * Similar to `useState` but will use props value if provided.
  * Note that internal use rc-util `useState` hook.
  */

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useEvent } from './hooks/useEvent';
 export { default as useMergedState } from './hooks/useMergedState';
+export { default as useControlledState } from './hooks/useControlledState';
 export { supportNodeRef, supportRef, useComposeRef } from './ref';
 export { default as get } from './utils/get';
 export { default as set, merge } from './utils/set';

package/lib/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "useComposeRef", {
     return _ref.useComposeRef;
   }
 });
+Object.defineProperty(exports, "useControlledState", {
+  enumerable: true,
+  get: function () {
+    return _useControlledState.default;
+  }
+});
 Object.defineProperty(exports, "useEvent", {
   enumerable: true,
   get: function () {
@@ -77,6 +83,7 @@ Object.defineProperty(exports, "warning", {
 });
 var _useEvent = _interopRequireDefault(require("./hooks/useEvent"));
 var _useMergedState = _interopRequireDefault(require("./hooks/useMergedState"));
+var _useControlledState = _interopRequireDefault(require("./hooks/useControlledState"));
 var _ref = require("./ref");
 var _get = _interopRequireDefault(require("./utils/get"));
 var _set = _interopRequireWildcard(require("./utils/set"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/util",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Common Utils For React Component",
   "keywords": [
     "react",
@@ -27,6 +27,7 @@
     "coverage": "npm test -- --coverage",
     "lint": "eslint src/ --ext .tsx,.ts & eslint tests/ --ext .tsx,.ts",
     "prepare": "husky install",
+    "prepublishOnly": "npm run compile && rc-np",
     "start": "dumi dev",
     "test": "rc-test"
   },