@jelper/hooks 0.2.0 → 1.0.0

package/es/useAsync.js

@@ -0,0 +1,73 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-18 23:44:38
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:53:22
+ */
+import { useEffect, useState } from 'react';
+import useRtCb from './useRtCb';
+import useCreate from './useCreate';
+import useIsUnmounted from './useIsUnmounted';
+import useUnmount from './useUnmount';
+const defOpt = {
+    immediate: false,
+    catchParam: false,
+};
+const useAsync = (asyncFn, opt = defOpt) => {
+    const [data, setData] = useState();
+    const [param, setParam] = useState(opt.defParam || {});
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [controller, setController] = useState();
+    const isUnmounted = useIsUnmounted();
+    useEffect(() => {
+        if (!controller || !opt.onAbort) {
+            return;
+        }
+        const onAbort = opt.onAbort;
+        controller.signal.addEventListener('abort', onAbort);
+        return () => {
+            controller.signal.removeEventListener('abort', onAbort);
+        };
+    }, [controller]);
+    const run = useRtCb((runParam) => {
+        const currParam = opt.catchParam ? Object.assign(Object.assign({}, param), (runParam || {})) : runParam;
+        setLoading(true);
+        setError(undefined);
+        if (controller) {
+            controller.abort();
+        }
+        const abortController = new AbortController();
+        setController(abortController);
+        return asyncFn(currParam, { signal: abortController.signal })
+            .then((resData) => {
+            if (isUnmounted() || abortController.signal.aborted)
+                return;
+            setData(opt.format ? opt.format(resData) : resData);
+            setParam(currParam);
+            setLoading(false);
+        }, (err) => {
+            if (isUnmounted() || abortController.signal.aborted)
+                return Promise.reject(err);
+            setError(err);
+            setLoading(false);
+        }).finally(() => {
+            if (isUnmounted())
+                return;
+            setController(undefined);
+        });
+    });
+    const refresh = useRtCb(() => run(param));
+    useCreate(() => {
+        if (opt.immediate) {
+            run(param);
+        }
+    });
+    useUnmount(() => {
+        if (controller) {
+            controller.abort();
+        }
+    });
+    return [data, { run, refresh, loading, error, param }];
+};
+export default useAsync;

package/es/useBoolState.js

@@ -0,0 +1,23 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:16:34
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-16 11:21:54
+ */
+import { useState, useCallback } from 'react';
+const useBoolState = (value) => {
+    const [val, setVal] = useState(value);
+    const switchFn = useCallback((switchValue) => {
+        if (switchValue === undefined || switchValue === null) {
+            setVal((oldVal) => !oldVal);
+        }
+        else if (typeof switchValue === 'boolean' || typeof switchValue === 'function') {
+            setVal(switchValue);
+        }
+        else {
+            setVal(!!switchValue);
+        }
+    }, []);
+    return [val, switchFn];
+};
+export default useBoolState;

package/es/useCreate.js

@@ -0,0 +1,11 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:34:59
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:53:33
+ */
+import { useState } from 'react';
+const useCreate = (cb) => {
+    useState(cb);
+};
+export default useCreate;

package/es/useDebounce.js

@@ -0,0 +1,18 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-19 22:55:14
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:55:14
+ */
+import { debounce } from 'lodash-es';
+import { useMemo } from 'react';
+import useRtCb from './useRtCb';
+const useDebounce = (cb, wait, opts) => {
+    const rtCb = useRtCb(cb);
+    return useMemo(() => {
+        return debounce((...arg) => {
+            rtCb(...arg);
+        }, wait, opts);
+    }, []);
+};
+export default useDebounce;

package/es/useIgnoreAbortErrCb.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-19 22:28:14
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:57:23
+ */
+import { useCallback } from "react";
+const useIgnoreAbortErrCb = (cb, deps = [], opts) => {
+    return useCallback((err) => {
+        var _a;
+        if (err.name === 'AbortError')
+            return (_a = opts === null || opts === void 0 ? void 0 : opts.onAbort) === null || _a === void 0 ? void 0 : _a.call(opts, err);
+        return cb(err);
+    }, deps);
+};
+export default useIgnoreAbortErrCb;

package/es/useInterval.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: apathyjade
+ * @Date: 2023-12-14 16:51:29
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 23:11:26
+ */
+import { useCallback, useEffect, useRef } from 'react';
+const useInterval = () => {
+    const timerRef = useRef();
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) {
+            window.clearInterval(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, []);
+    const bindTimer = useCallback((callback, timeout, ...arg) => {
+        clearTimer();
+        timerRef.current = window.setInterval(() => {
+            timerRef.current = undefined;
+            callback(...arg);
+        }, timeout);
+    }, []);
+    useEffect(() => clearTimer);
+    return [
+        bindTimer,
+        clearTimer,
+    ];
+};
+export default useInterval;

package/es/useIsMounted.js

@@ -0,0 +1,18 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 21:34:27
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-16 21:37:21
+ */
+import { useCallback, useEffect, useRef } from 'react';
+const useIsMounted = () => {
+    const ref = useRef(false);
+    useEffect(() => {
+        ref.current = true;
+        return () => {
+            ref.current = false;
+        };
+    }, []);
+    return useCallback(() => ref.current, []);
+};
+export default useIsMounted;

package/es/useIsUnmounted.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 21:33:24
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-16 21:35:46
+ */
+import { useCallback, useEffect, useRef } from 'react';
+const useIsUnmounted = () => {
+    const ref = useRef(false);
+    useEffect(() => {
+        return () => {
+            ref.current = true;
+        };
+    }, []);
+    return useCallback(() => ref.current, []);
+};
+export default useIsUnmounted;

package/es/useMount.js

@@ -0,0 +1,11 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-18 00:21:16
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-18 00:21:16
+ */
+import { useEffect } from 'react';
+const useMount = (cb) => {
+    useEffect(cb, []);
+};
+export default useMount;

package/es/useOption.js

@@ -0,0 +1,19 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:35:37
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-16 21:31:54
+ */
+import { useCallback, useState } from 'react';
+const useOption = (defOpt = {}) => {
+    const [initOpt] = useState(defOpt);
+    const [option, setOption] = useState(initOpt);
+    const reset = useCallback(() => {
+        setOption(initOpt);
+    }, [initOpt]);
+    const update = useCallback((newOpts) => {
+        setOption((oldOpts) => (Object.assign(Object.assign({}, (oldOpts || {})), (typeof newOpts === 'function' ? newOpts(oldOpts) : newOpts || {}))));
+    }, []);
+    return [option, { setOption, reset, update }];
+};
+export default useOption;

package/es/useResizeObserver.js

@@ -0,0 +1,50 @@
+/*
+ * @Author: apathyjade
+ * @Date: 2023-11-24 10:52:51
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 23:17:45
+ */
+import { useCallback, useEffect } from 'react';
+let resizeObserver = null;
+let observeCatch = null;
+function init() {
+    if (resizeObserver) {
+        return;
+    }
+    observeCatch = new Map();
+    resizeObserver = new window.ResizeObserver((targets) => {
+        targets === null || targets === void 0 ? void 0 : targets.forEach((item) => {
+            var _a;
+            (_a = observeCatch === null || observeCatch === void 0 ? void 0 : observeCatch.get(item === null || item === void 0 ? void 0 : item.target)) === null || _a === void 0 ? void 0 : _a(item);
+        });
+    });
+}
+;
+const observe = (target, cb) => {
+    if (!resizeObserver) {
+        init();
+    }
+    observeCatch === null || observeCatch === void 0 ? void 0 : observeCatch.set(target, cb);
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(target);
+};
+const unobserve = (target) => {
+    if (!resizeObserver) {
+        init();
+    }
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(target);
+    observeCatch === null || observeCatch === void 0 ? void 0 : observeCatch.delete(target);
+};
+export default function useResizeObserver(dom, cb) {
+    const selfObserve = useCallback(() => {
+        observe(dom, cb);
+    }, [dom, cb]);
+    const selfUnobserve = useCallback(() => {
+        unobserve(dom);
+    }, [dom]);
+    useEffect(() => {
+        observe(dom, cb);
+        return () => unobserve(dom);
+    }, [dom, cb]);
+    return [selfObserve, selfUnobserve];
+}
+;

package/es/useRtCb.js

@@ -0,0 +1,15 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-17 00:22:11
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-17 00:22:56
+ */
+import { useCallback } from 'react';
+import useRtRef from './useRtRef';
+const useRtCb = (cb, deps = []) => {
+    const ref = useRtRef(cb);
+    return useCallback((...args) => {
+        return ref.current(...args);
+    }, deps);
+};
+export default useRtCb;

package/es/useRtRef.js

@@ -0,0 +1,13 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 22:19:57
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-17 00:10:45
+ */
+import { useRef } from 'react';
+const useRtRef = (val) => {
+    const ref = useRef(val);
+    ref.current = val;
+    return ref;
+};
+export default useRtRef;

package/es/useSafeRunner.js

@@ -0,0 +1,20 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:36:09
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:41:39
+ */
+import { useCallback } from 'react';
+import useIsUnmount from "./useIsUnmounted";
+const useSafeRunner = () => {
+    const isUnmount = useIsUnmount();
+    return useCallback((cb, unmountCb) => {
+        if (isUnmount()) {
+            unmountCb === null || unmountCb === void 0 ? void 0 : unmountCb();
+        }
+        else {
+            cb();
+        }
+    }, []);
+};
+export default useSafeRunner;

package/es/useThrottle.js

@@ -0,0 +1,18 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-19 22:55:28
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:55:48
+ */
+import { throttle } from 'lodash-es';
+import { useMemo } from 'react';
+import useRtCb from './useRtCb';
+const useThrottle = (cb, wait, opts) => {
+    const rtCb = useRtCb(cb);
+    return useMemo(() => {
+        return throttle((...arg) => {
+            rtCb(...arg);
+        }, wait, opts);
+    }, []);
+};
+export default useThrottle;

package/es/useTimeout.js

@@ -0,0 +1,29 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-19 23:10:13
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 23:10:13
+ */
+import { useCallback, useEffect, useRef } from 'react';
+const useTimeout = () => {
+    const timerRef = useRef();
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, []);
+    const bindTimer = useCallback((callback, timeout, ...arg) => {
+        clearTimer();
+        timerRef.current = window.setTimeout(() => {
+            timerRef.current = undefined;
+            callback(...arg);
+        }, timeout);
+    }, []);
+    useEffect(() => clearTimer);
+    return [
+        bindTimer,
+        clearTimer,
+    ];
+};
+export default useTimeout;

package/es/useUnmount.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:35:20
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-18 00:17:09
+ */
+import { useEffect } from 'react';
+import useRtRef from './useRtRef';
+const useUnmount = (cb) => {
+    const ref = useRtRef(cb);
+    useEffect(() => {
+        return () => {
+            ref.current();
+        };
+    }, []);
+};
+export default useUnmount;

package/es/useUpdateEff.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:35:13
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-16 11:35:13
+ */
+import { useRef, useEffect } from 'react';
+const useUpdateEffect = (cb, deps) => {
+    const ref = useRef(false);
+    useEffect(() => {
+        if (ref.current) {
+            return cb();
+        }
+        ref.current = true;
+    }, deps);
+};
+export default useUpdateEffect;

package/es/useValue.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: jade <apathyjade@outlook.com>
+ * @Version: 0.0.1
+ * @Date: 2023-04-05 14:39:52
+ * @Last Modified by:   jade
+ * @Last Modified Time: 2023-04-05 14:39:52
+ */
+import { useState, useEffect } from 'react';
+import useRtCb from './useRtCb';
+const defEqual = (a, b) => a === b;
+const useValue = (value, onChange, opts) => {
+    const { isEqual = defEqual } = opts || {};
+    const [val, setVal] = useState(value);
+    const updateValue = useRtCb((value) => {
+        setVal(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }, []);
+    const [oldValue, setOldValue] = useState(value);
+    useEffect(() => {
+        if (!isEqual(value, oldValue)) {
+            setOldValue(value);
+            if (!isEqual(value, val)) {
+                updateValue(value);
+            }
+        }
+    }, [value, oldValue, val]);
+    return [val, setVal];
+};
+export default useValue;