@aiszlab/relax 2.1.1 → 2.1.2-beta.0

package/dist/hooks/use-controlled-state.cjs

@@ -3,13 +3,14 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var isUndefined = require('../is/is-undefined.cjs');
-var useUpdateEffect = require('./use-update-effect.cjs');
 var isFunction = require('../is/is-function.cjs');
+var useEvent = require('./use-event.cjs');
+var reactDom = require('react-dom');
 
 function useControlledState(controlledState) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     defaultState = _ref.defaultState,
-    onUpdate = _ref.onUpdate;
+    onChange = _ref.onChange;
   // initialize state
   var _useState = react.useState(function () {
       // default use controlled state
@@ -25,19 +26,27 @@ function useControlledState(controlledState) {
     _useState2 = _slicedToArray(_useState, 2),
     _state = _useState2[0],
     _setState = _useState2[1];
-  // sync value back to `undefined` when it from control to un-control
-  useUpdateEffect.useUpdateEffect(function () {
-    if (controlledState !== _state) {
-      onUpdate === null || onUpdate === void 0 || onUpdate(controlledState, _state);
-    }
-    if (!isUndefined.isUndefined(controlledState)) {
+  // 变更状态函数
+  // 变更内容为函数，且需要触发`onChange`，那么本次状态更新必为同步
+  // 其余继续保持批处理逻辑
+  var setState = useEvent.useEvent(function (action) {
+    if (isFunction.isFunction(action)) {
+      if (onChange) {
+        reactDom.flushSync(function () {
+          _setState(action);
+        });
+        onChange(_state);
+        return;
+      }
+      _setState(action);
       return;
     }
-    _setState(defaultState !== null && defaultState !== void 0 ? defaultState : controlledState);
-  }, [controlledState]);
+    _setState(action);
+    onChange === null || onChange === void 0 || onChange(action);
+  });
   // use controlled
   var state = isUndefined.isUndefined(controlledState) ? _state : controlledState;
-  return [state, _setState];
+  return [state, setState];
 }
 
 exports.useControlledState = useControlledState;

package/dist/hooks/use-controlled-state.d.ts

@@ -7,10 +7,10 @@ type UsingControlledState<S> = {
      */
     defaultState?: State<S>;
     /**
-     * @description
-     * value update callback
+     * 状态发生改变后触发的回调事件
+     * @default undefined
      */
-    onUpdate?: (next: Partialable<S>, prev: Partialable<S>) => void;
+    onChange?: (state: Partialable<S>) => void;
 };
 type UsedControlledState<T> = [T, Dispatch<SetStateAction<T>>];
 /**
@@ -21,7 +21,7 @@ type UsedControlledState<T> = [T, Dispatch<SetStateAction<T>>];
  */
 declare function useControlledState<T>(): UsedControlledState<Partialable<T>>;
 declare function useControlledState<T>(controlledState: T): UsedControlledState<T>;
-declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<undefined>): UsedControlledState<T>;
+declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<T>): UsedControlledState<T>;
 declare function useControlledState<T>(controlledState: Partialable<T>, usingControlledState: RequiredIn<UsingControlledState<T>, "defaultState">): UsedControlledState<T>;
 declare function useControlledState<T>(controlledState: T, usingControlledState: UsingControlledState<T>): UsedControlledState<T>;
 export { useControlledState };

package/dist/hooks/use-controlled-state.mjs

@@ -1,13 +1,14 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState } from 'react';
 import { isUndefined } from '../is/is-undefined.mjs';
-import { useUpdateEffect } from './use-update-effect.mjs';
 import { isFunction } from '../is/is-function.mjs';
+import { useEvent } from './use-event.mjs';
+import { flushSync } from 'react-dom';
 
 function useControlledState(controlledState) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     defaultState = _ref.defaultState,
-    onUpdate = _ref.onUpdate;
+    onChange = _ref.onChange;
   // initialize state
   var _useState = useState(function () {
       // default use controlled state
@@ -23,19 +24,27 @@ function useControlledState(controlledState) {
     _useState2 = _slicedToArray(_useState, 2),
     _state = _useState2[0],
     _setState = _useState2[1];
-  // sync value back to `undefined` when it from control to un-control
-  useUpdateEffect(function () {
-    if (controlledState !== _state) {
-      onUpdate === null || onUpdate === void 0 || onUpdate(controlledState, _state);
-    }
-    if (!isUndefined(controlledState)) {
+  // 变更状态函数
+  // 变更内容为函数，且需要触发`onChange`，那么本次状态更新必为同步
+  // 其余继续保持批处理逻辑
+  var setState = useEvent(function (action) {
+    if (isFunction(action)) {
+      if (onChange) {
+        flushSync(function () {
+          _setState(action);
+        });
+        onChange(_state);
+        return;
+      }
+      _setState(action);
       return;
     }
-    _setState(defaultState !== null && defaultState !== void 0 ? defaultState : controlledState);
-  }, [controlledState]);
+    _setState(action);
+    onChange === null || onChange === void 0 || onChange(action);
+  });
   // use controlled
   var state = isUndefined(controlledState) ? _state : controlledState;
-  return [state, _setState];
+  return [state, setState];
 }
 
 export { useControlledState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "2.1.1",
+  "version": "2.1.2-beta.0",
   "description": "react utils collection",
   "exports": {
     ".": {