@aiszlab/relax 1.0.18 → 1.0.20

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

@@ -0,0 +1,13 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { type State } from '../utils/is-state-getter';
+interface Props<T> {
+    defaultState?: State<T>;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * controlled state
+ */
+export declare const useControlledState: <T>(controlledState: State<T>, { defaultState }?: Props<T>) => [T, Dispatch<SetStateAction<T>>];
+export {};

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

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { isStateGetter } from '../utils/is-state-getter.js';
+import { isVoid } from '../utils/is-void.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * controlled state
+ */
+const useControlledState = (controlledState, { defaultState } = {}) => {
+    /// initialize state
+    const [state, setState] = useState(() => {
+        if (isStateGetter(controlledState))
+            return controlledState();
+        if (isVoid(controlledState)) {
+            if (isVoid(defaultState))
+                return controlledState;
+            if (isStateGetter(defaultState))
+                return defaultState();
+            return defaultState;
+        }
+        return controlledState;
+    });
+    useEffect(() => {
+        // when state is not controlled
+        if (isVoid(controlledState))
+            return;
+        // if state is equal with value
+        if (controlledState === state)
+            return;
+        /// update inner state
+        setState(controlledState);
+    }, [controlledState]);
+    return [state, setState];
+};
+
+export { useControlledState };

package/dist/{use-once-state.d.ts → hooks/use-once-state.d.ts}

@@ -4,4 +4,4 @@
  * @description
  * state always be same after first render
  */
-export declare const useOnceState: <T>(initialState: T | (() => T)) => T;
+export declare const useOnceState: <T>(initialState: State<T>) => T;

package/dist/index.d.ts

@@ -1,8 +1,19 @@
-export { useBoolean } from './use-boolean';
-export { useDebounceCallback } from './use-debounce-callback';
-export { useImageLoader } from './use-image-loader';
-export { useMount } from './use-mount';
-export { useMounted } from './use-mounted';
-export { useTimeout } from './use-timeout';
-export { useControlledState } from './use-controlled-state';
-export { useOnceState } from './use-once-state';
+/**
+ * @description
+ * hooks
+ */
+export { useBoolean } from './hooks/use-boolean';
+export { useDebounceCallback } from './hooks/use-debounce-callback';
+export { useImageLoader } from './hooks/use-image-loader';
+export { useMount } from './hooks/use-mount';
+export { useMounted } from './hooks/use-mounted';
+export { useTimeout } from './hooks/use-timeout';
+export { useControlledState } from './hooks/use-controlled-state';
+export { useOnceState } from './hooks/use-once-state';
+/**
+ * @description
+ * utils
+ */
+export { isRefable } from './utils/is-refable';
+export { isVoid } from './utils/is-void';
+export { isStateGetter } from './utils/is-state-getter';

package/dist/index.js

@@ -1,8 +1,11 @@
-export { useBoolean } from './use-boolean.js';
-export { useDebounceCallback } from './use-debounce-callback.js';
-export { useImageLoader } from './use-image-loader.js';
-export { useMount } from './use-mount.js';
-export { useMounted } from './use-mounted.js';
-export { useTimeout } from './use-timeout.js';
-export { useControlledState } from './use-controlled-state.js';
-export { useOnceState } from './use-once-state.js';
+export { useBoolean } from './hooks/use-boolean.js';
+export { useDebounceCallback } from './hooks/use-debounce-callback.js';
+export { useImageLoader } from './hooks/use-image-loader.js';
+export { useMount } from './hooks/use-mount.js';
+export { useMounted } from './hooks/use-mounted.js';
+export { useTimeout } from './hooks/use-timeout.js';
+export { useControlledState } from './hooks/use-controlled-state.js';
+export { useOnceState } from './hooks/use-once-state.js';
+export { isRefable } from './utils/is-refable.js';
+export { isVoid } from './utils/is-void.js';
+export { isStateGetter } from './utils/is-state-getter.js';

package/dist/utils/is-refable.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+/**
+ * @description
+ */
+export declare const isRefable: (node: ReactNode) => boolean;

package/dist/utils/is-refable.js

@@ -0,0 +1,34 @@
+import { isValidElement } from 'react';
+import { isFragment, isMemo } from 'react-is';
+
+/**
+ * @description
+ */
+const isRefable = (node) => {
+    if (!isValidElement(node)) {
+        return false;
+    }
+    if (isFragment(node)) {
+        return false;
+    }
+    return _RefableElement(node);
+};
+/**
+ * @description
+ * refable element
+ */
+const _RefableElement = (element) => {
+    var _a, _b;
+    const type = isMemo(element) ? element.type.type : element.type;
+    // Function component node
+    if (typeof type === 'function' && !((_a = type.prototype) === null || _a === void 0 ? void 0 : _a.render)) {
+        return false;
+    }
+    // Class component
+    if (typeof element === 'function' && !((_b = element.prototype) === null || _b === void 0 ? void 0 : _b.render)) {
+        return false;
+    }
+    return true;
+};
+
+export { isRefable };

package/dist/utils/is-state-getter.d.ts

@@ -0,0 +1,14 @@
+type StateGetter<T> = () => T;
+/**
+ * @description
+ * state setter
+ *
+ * used by initial state, default state, controlled state
+ */
+export type State<T> = T | StateGetter<T>;
+/**
+ * @description
+ * is state getter
+ */
+export declare const isStateGetter: <T>(state: State<T>) => state is StateGetter<T>;
+export {};

package/dist/utils/is-state-getter.js

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * is state getter
+ */
+const isStateGetter = (state) => {
+    return typeof state === 'function';
+};
+
+export { isStateGetter };

package/dist/utils/is-void.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description
+ * is undefined
+ */
+export declare const isVoid: (value: unknown) => value is undefined;

package/dist/utils/is-void.js

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * is undefined
+ */
+const isVoid = (value) => {
+    return value === void 0;
+};
+
+export { isVoid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "react utils collection",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,6 +11,7 @@
     "pub": "npm run clean:build && npm run build && npm publish"
   },
   "dependencies": {
+    "react-is": "^18.2.0",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
@@ -22,6 +23,7 @@
     "@rollup/plugin-typescript": "^11.1.1",
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
+    "@types/react-is": "^18.2.2",
     "rollup": "^3.27.0",
     "typescript": "^5.1.3"
   },

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

@@ -1,12 +0,0 @@
-import { type Dispatch, type SetStateAction } from 'react';
-interface Props<T> {
-    defaultState: T;
-}
-/**
- * @author murukal
- *
- * @description
- * controlled state
- */
-export declare const useControlledState: <T>(controlledState?: T | (() => T) | undefined, props?: Props<T> | undefined) => [T | undefined, Dispatch<SetStateAction<T | undefined>>];
-export {};

package/dist/use-controlled-state.js

@@ -1,33 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * @author murukal
- *
- * @description
- * controlled state
- */
-const useControlledState = (controlledState, props) => {
-    const [state, setState] = useState(() => {
-        if (controlledState === void 0) {
-            return props === null || props === void 0 ? void 0 : props.defaultState;
-        }
-        if (typeof controlledState === 'function') {
-            return controlledState();
-        }
-        return controlledState;
-    });
-    useEffect(() => {
-        // when state is not controlled
-        if (controlledState === void 0) {
-            return;
-        }
-        // if state is equal with value
-        if (controlledState === state) {
-            return;
-        }
-        setState(controlledState);
-    }, [controlledState]);
-    return [state, setState];
-};
-
-export { useControlledState };