@jelper/hooks 0.1.2 → 0.3.0

package/es/useAsync.js

@@ -0,0 +1,33 @@
+import useSafeState from './useSafeState';
+import useRtCb from './useRtCb';
+import useCreate from './useCreate';
+const useAsync = (asyncFn, opt = {
+    immediate: false,
+    catchParam: false,
+}) => {
+    const [data, setData] = useSafeState(null);
+    const [param, setParam] = useSafeState(opt.defParam || {});
+    const [loading, setLoading] = useSafeState(false);
+    const [error, setError] = useSafeState(null);
+    const run = useRtCb((runParam) => {
+        const currParam = opt.catchParam ? Object.assign(Object.assign({}, param), (runParam || {})) : runParam;
+        setLoading(true);
+        setError(null);
+        return asyncFn(currParam)
+            .then(opt.format)
+            .then((resData) => {
+            setData(resData);
+            setParam(currParam);
+        }, setError)
+            .finally(() => {
+            setLoading(false);
+        });
+    });
+    useCreate(() => {
+        if (opt.immediate) {
+            run(param);
+        }
+    });
+    return { data, run, loading, error };
+};
+export default useAsync;

package/es/useBoolState.js

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import useSafeState from './useSafeState';
+const useBoolState = (value) => {
+    const [val, setVal] = useSafeState(value);
+    const switchFn = useCallback((switchValue) => {
+        if (typeof switchValue === 'boolean') {
+            setVal(switchValue);
+        }
+        else {
+            setVal((oldVal) => !oldVal);
+        }
+    }, []);
+    return [val, switchFn];
+};
+export default useBoolState;

package/es/useCreate.js

@@ -0,0 +1,5 @@
+import { useState } from 'react';
+const useCreate = (cb) => {
+    useState(cb);
+};
+export default useCreate;

package/es/useDebounce.js

@@ -0,0 +1,12 @@
+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/useInterval.js

@@ -0,0 +1,25 @@
+/*
+ * @Author: apathyjade
+ * @Date: 2023-12-14 16:51:29
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2024-03-14 16:32:55
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import useRtCb from './useRtCb';
+const useInterval = (callback, delay) => {
+    const timerRef = useRef();
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) {
+            window.clearInterval(timerRef.current);
+        }
+    }, []);
+    const cb = useRtCb(callback);
+    useEffect(() => {
+        timerRef.current = window.setInterval(cb, delay);
+        return () => {
+            clearTimer();
+        };
+    }, [delay]);
+    return clearTimer;
+};
+export default useInterval;

package/es/useIsUnmount.js

@@ -0,0 +1,11 @@
+import { useCallback, useEffect, useRef } from 'react';
+const useIsUnmount = () => {
+    const ref = useRef(true);
+    useEffect(() => {
+        return () => {
+            ref.current = false;
+        };
+    }, []);
+    return useCallback(() => !ref.current, []);
+};
+export default useIsUnmount;

package/es/useListener.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import useRtCb from './useRtCb';
+import useRtEffect from './useRtEffect';
+const useListener = (type, listener, options) => {
+    const cb = useRtCb(listener);
+    const remove = useCallback(() => {
+        window.removeEventListener(type, cb);
+    }, []);
+    useRtEffect(() => {
+        window.addEventListener(type, cb, options);
+        return () => {
+            window.removeEventListener(type, cb);
+        };
+    });
+    return remove;
+};
+export default useListener;

package/es/useMount.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+import useRtRef from './useRtRef';
+const useMount = (cb) => {
+    const ref = useRtRef(cb);
+    useEffect(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref);
+    });
+};
+export default useMount;

package/es/useParamsState.js

@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+import useSafeState from './useSafeState';
+export default function useParamsState(defData) {
+    const [data, setData] = useSafeState(defData);
+    const update = useCallback((params) => {
+        setData((oldVal) => (Object.assign(Object.assign({}, (oldVal || {})), params)));
+    }, []);
+    return [data, update, setData];
+}

package/es/useResizeObserver.js

@@ -0,0 +1,50 @@
+/*
+ * @Author: apathyjade
+ * @Date: 2023-11-24 10:52:51
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2024-03-14 16:34:42
+ */
+import { useEffect } from 'react';
+import useSafeCb from './useSafeCb';
+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 = useSafeCb(() => {
+        observe(dom, cb);
+    }, [dom, cb]);
+    const selfUnobserve = useSafeCb(() => {
+        unobserve(dom);
+    }, [dom]);
+    useEffect(() => {
+        observe(dom, cb);
+        return () => unobserve(dom);
+    }, [dom, cb]);
+    return [selfObserve, selfUnobserve];
+}
+;

package/es/useRtCb.js

@@ -0,0 +1,10 @@
+import useSafeCb from './useSafeCb';
+import useRtRef from './useRtRef';
+const useRtCb = (cb, deps) => {
+    const ref = useRtRef(cb);
+    return useSafeCb((...arg) => {
+        var _a;
+        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...arg);
+    }, deps);
+};
+export default useRtCb;

package/es/useRtEffect.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+import useRtCb from './useRtCb';
+const useRtEffect = (cb, deps) => {
+    const rtCb = useRtCb(cb, deps);
+    useEffect(rtCb, [rtCb]);
+};
+export default useRtEffect;

package/es/useRtRef.js

@@ -0,0 +1,7 @@
+import { useRef } from "react";
+export default function useRtRef(val) {
+    const ref = useRef();
+    ref.current = val;
+    return ref;
+}
+;

package/es/useRtState.js

@@ -0,0 +1,28 @@
+/*
+ * @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;
+export default function useRtState(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];
+}

package/es/useSafeCb.js

@@ -0,0 +1,11 @@
+import { useCallback } from 'react';
+import useIsUnmount from './useIsUnmount';
+const useSafeCb = (cb, deps) => {
+    const isUnmount = useIsUnmount();
+    return useCallback((...arg) => {
+        if (!isUnmount()) {
+            return cb(...arg);
+        }
+    }, deps || []);
+};
+export default useSafeCb;

package/es/useSafeState.js

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import useSafeCb from './useSafeCb';
+const useSafeState = (value) => {
+    const [state, setState] = useState(value);
+    const setCb = useSafeCb(setState);
+    return [state, setCb];
+};
+export default useSafeState;

package/es/useThrottle.js

@@ -0,0 +1,19 @@
+import { throttle } from 'lodash-es';
+import { useMemo } from 'react';
+import useRtCb from './useRtCb';
+/**
+ * 用于节流函数的钩子函数
+ * @param cb - 要节流的函数
+ * @param wait - 节流延迟时间，默认为0
+ * @param opts - 节流选项对象，默认为{}
+ * @returns 节流函数
+ */
+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,34 @@
+/*
+ * @Author: apathyjade
+ * @Date: 2023-12-14 16:51:29
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2023-12-14 17:15:27
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import useRtCb from './useRtCb';
+/**
+ * 使用定时器在指定延迟后执行回调函数
+ * @param callback - 回调函数
+ * @param delay - 延迟时间（毫秒）
+ * @returns clearTimer - 清除定时器的函数
+ */
+const useTimeout = (callback, delay) => {
+    const timerRef = useRef();
+    /**
+     * 清除定时器
+     */
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+    }, []);
+    const cb = useRtCb(callback);
+    useEffect(() => {
+        timerRef.current = window.setTimeout(cb, delay);
+        return () => {
+            clearTimer();
+        };
+    }, [delay]);
+    return clearTimer;
+};
+export default useTimeout;

package/es/useUnmount.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+const useUnmount = (cb) => {
+    const ref = useRef(cb);
+    ref.current = cb;
+    useEffect(() => {
+        return () => {
+            ref.current();
+        };
+    }, []);
+};
+export default useUnmount;

package/es/useUpdateEffect.js

@@ -0,0 +1,12 @@
+import { useRef, useEffect } from 'react';
+export default function useUpdateEffect(cb, deps) {
+    const ref = useRef(true);
+    useEffect(() => {
+        if (ref.current) {
+            ref.current = false;
+            return;
+        }
+        return cb();
+    }, deps);
+}
+;