@wzyjs/hooks 0.3.28 → 0.3.30

package/dist/antd/index.d.ts

@@ -1,8 +1,5 @@
 export * from './useForm';
-export * from './useImperativeHandleForm';
 export * from './useModalConfirmFooter';
 export * from './usePaginationState';
-export * from './useHideFooter';
-export * from './useHovered';
 export * from './useStep';
 export * from './useDateRange';

package/dist/antd/index.js

@@ -1,8 +1,5 @@
 export * from './useForm';
-export * from './useImperativeHandleForm';
 export * from './useModalConfirmFooter';
 export * from './usePaginationState';
-export * from './useHideFooter';
-export * from './useHovered';
 export * from './useStep';
 export * from './useDateRange';

package/dist/antd/useDateRange.js

@@ -50,6 +50,7 @@ const checkDateRules = (dateRange) => {
     // 如果没有匹配到任何规则，可以根据需要返回默认值，这里假设返回 0
     return 0;
 };
+// 功能：管理 antd RangePicker 日期范围，内置常用预设并按日、周、月规则前后切换。
 export const useDateRange = (config) => {
     const { defaultDateRange = PresetType.TODAY } = config;
     const [dateRange, setDateRange] = useState(Array.isArray(defaultDateRange)

package/dist/antd/useForm.js

@@ -3,6 +3,7 @@ import { Form } from 'antd';
 const cloneDeep = (value) => {
     return JSON.parse(JSON.stringify(value));
 };
+// 功能：封装 antd Form，维护表单原始值和转换后的查询参数，并提供查询、重置、清空、赋值和 ref 暴露能力。
 export const useForm = (options = {}) => {
     const [form] = Form.useForm();
     useImperativeHandle(options.ref, () => form);

package/dist/antd/useModalConfirmFooter.d.ts

@@ -1,8 +1,13 @@
+import type { ComponentType, ReactNode } from 'react';
 interface Option {
     onOk?: () => Promise<void>;
     onConfirm?: () => void;
 }
-export declare const useModalConfirmFooter: (option: Option) => {
-    footer: (_: unknown, extra: any) => import("react/jsx-runtime").JSX.Element;
-};
+interface ModalFooterExtra {
+    CancelBtn: ComponentType;
+}
+interface ModalConfirmFooter {
+    footer: (_: unknown, extra: ModalFooterExtra) => ReactNode;
+}
+export declare const useModalConfirmFooter: (option: Option) => ModalConfirmFooter;
 export {};

package/dist/antd/useModalConfirmFooter.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Space, Popconfirm, Button } from 'antd';
+// 功能：为 antd Modal 生成带 Popconfirm 二次确认的 footer。
 export const useModalConfirmFooter = (option) => {
     const { onOk, onConfirm } = option;
     const [open, setOpen] = useState(false);

package/dist/antd/usePaginationState.js

@@ -1,4 +1,6 @@
 import { useMemo, useState } from 'react';
+// 功能：管理 antd Pagination/Table 分页状态，并生成后端常用的 pageNum/pageSize 参数。
+// 与 ahooks/usePagination 区别：这里只管理 antd 分页配置和参数，不负责请求数据、loading 或 total 状态。
 export const usePaginationState = (paginationProps) => {
     const options = {
         current: 1,

package/dist/antd/useStep.js

@@ -4,6 +4,7 @@ export var Dir;
     Dir["Prev"] = "Prev";
     Dir["Next"] = "Next";
 })(Dir || (Dir = {}));
+// 功能：管理简单步骤 current，并提供带切换前校验和前后回调的上一页、下一页方法。
 export const useStep = (option) => {
     const { defaultCurrent = 0, onChangeCheck, onChangeBefore, onChangeAfter } = option;
     const [current, setCurrent] = useState(defaultCurrent);

package/dist/common/index.d.ts

@@ -1,7 +1,6 @@
-export * from './useEffectValue';
-export * from './useVisibleInfo';
+export * from './useComputeState';
 export * from './useClick';
-export * from './useDebouncedEffect';
+export * from './useDeepDebouncedEffect';
 export * from './useMergeState';
-export * from './useControlValue';
+export * from './useControlState';
 export * from './useOnceEffect';

package/dist/common/index.js

@@ -1,7 +1,6 @@
-export * from './useEffectValue';
-export * from './useVisibleInfo';
+export * from './useComputeState';
 export * from './useClick';
-export * from './useDebouncedEffect';
+export * from './useDeepDebouncedEffect';
 export * from './useMergeState';
-export * from './useControlValue';
+export * from './useControlState';
 export * from './useOnceEffect';

package/dist/common/useClick.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+// 功能：自动判断是单击还是双击，单击会延迟触发以等待可能出现的第二次点击。
 export const useClick = (option) => {
     const { onClick, onDoubleClick, delay = 300 } = option;
     const clickCount = useRef(0);

package/dist/common/useComputeState.d.ts

@@ -0,0 +1 @@
+export declare const useComputeState: (defaultValue: any, fn: any, deps?: any[]) => any[];

package/dist/common/{useEffectValue.js → useComputeState.js}

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-export const useEffectValue = (defaultValue, fn, deps = []) => {
+// 功能：初始化一个可手动 set 的 state，并在 deps 变化时用 fn 自动计算 state。
+export const useComputeState = (defaultValue, fn, deps = []) => {
     const [value, setValue] = useState(defaultValue);
     useEffect(() => setValue(fn()), deps);
     return [value, setValue];

package/dist/common/useControlState.d.ts

@@ -0,0 +1,2 @@
+import { SetStateAction, Dispatch } from 'react';
+export declare const useControlState: <T>(state: T) => [T, Dispatch<SetStateAction<T>>];

package/dist/common/useControlState.js

@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+// 功能：维护一个本地 state，并在外部传入的 state 变化时更新，以外部值为准。
+// 与 ahooks/useControllableValue 区别：这里只镜像外部值，不处理 value/defaultValue/onChange 的受控非受控组件协议。
+export const useControlState = (state) => {
+    const [state_, setState_] = useState(state);
+    useEffect(() => {
+        setState_(state);
+    }, [state]);
+    return [state_, setState_];
+};

package/dist/common/useDeepDebouncedEffect.d.ts

@@ -0,0 +1,2 @@
+import { type DependencyList } from 'react';
+export declare const useDeepDebouncedEffect: (effect: () => void | Promise<void>, deps: DependencyList, options?: any) => void;

package/dist/common/useDeepDebouncedEffect.js

@@ -0,0 +1,12 @@
+import { useDebounceFn, useDeepCompareEffect } from 'ahooks';
+// 功能：在 deps 深比较变化后，以 debounce 方式执行 effect。
+// 与 ahooks/useDebounceEffect 区别：这里使用深比较依赖，默认 wait 为 300ms。
+export const useDeepDebouncedEffect = (effect, deps, options = { wait: 300 }) => {
+    const { run, cancel } = useDebounceFn(effect, options);
+    useDeepCompareEffect(() => {
+        run();
+        return () => {
+            cancel();
+        };
+    }, deps);
+};

package/dist/common/useMergeState.d.ts

@@ -1,3 +1,4 @@
 type StateType = Record<string, any>;
-export declare const useMergeState: <T extends StateType>(initialState: T) => [T, (partialState: Partial<T>) => void];
+type MergeMode = 'deep' | 'shallow';
+export declare const useMergeState: <T extends StateType>(initialState: T, mergeMode?: MergeMode) => [T, (partialState: Partial<T>) => void];
 export {};

package/dist/common/useMergeState.js

@@ -1,12 +1,22 @@
 import { useState } from 'react';
-import _ from 'lodash';
-export const useMergeState = (initialState) => {
+import { merge } from 'lodash-es';
+// 功能：管理对象 state，并用 lodash.merge 对局部更新做深度合并。
+// 与 ahooks/useSetState 区别：这里是深度合并，ahooks/useSetState 是浅合并。
+export const useMergeState = (initialState, mergeMode = 'deep') => {
     const [state, setState] = useState(initialState);
     const mergeState = (partialState) => {
         if (typeof partialState !== 'object' || partialState === null) {
             throw new Error('mergeState must be called with an object');
         }
-        setState((prevState) => _.merge({}, prevState, partialState));
+        setState((prevState) => {
+            if (mergeMode === 'shallow') {
+                return {
+                    ...prevState,
+                    ...partialState,
+                };
+            }
+            return merge({}, prevState, partialState);
+        });
     };
     return [state, mergeState];
 };

package/dist/common/useOnceEffect.d.ts

@@ -1 +1,2 @@
-export declare const useOnceEffect: (effect: () => boolean, deps: React.DependencyList) => void;
+import { DependencyList } from 'react';
+export declare const useOnceEffect: (effect: () => boolean, deps: DependencyList) => void;

package/dist/common/useOnceEffect.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+// 功能：在 deps 变化时执行 effect，effect 返回 true 即使后再次触发也不执行。
 export const useOnceEffect = (effect, deps) => {
     const [hasRun, setHasRun] = useState(false);
     useEffect(() => {

package/dist/dom/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useElement';
 export * from './useElementScrollVisible';
-export * from './useCacheValue';
+export * from './useCacheState';
+export * from './useHovered';

package/dist/dom/index.js

@@ -1,3 +1,4 @@
 export * from './useElement';
 export * from './useElementScrollVisible';
-export * from './useCacheValue';
+export * from './useCacheState';
+export * from './useHovered';

package/dist/dom/{useCacheValue.d.ts → useCacheState.d.ts}

@@ -1,3 +1,3 @@
-export declare const useCacheValue: <T>(key: string | undefined, value: T | undefined, onChange: ((value: T | undefined) => void) | undefined) => {
+export declare const useCacheState: <T>(key: string | undefined, value: T | undefined, onChange: ((value: T | undefined) => void) | undefined) => {
     updateValue: (newValue: T | undefined) => void;
 };

package/dist/dom/{useCacheValue.js → useCacheState.js}

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
-export const useCacheValue = (key, value, onChange) => {
+// 功能：给受控值增加 localStorage 缓存恢复和写入能力，并通过 onChange 回写外部状态。
+export const useCacheState = (key, value, onChange) => {
     const loadedRef = useRef(false);
     // Load from cache on mount
     useEffect(() => {

package/dist/dom/useElement.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+// 功能：返回一个元素 ref，并通过 ResizeObserver 记录元素尺寸变化后的 contentRect。
 export const useElement = () => {
     const elementRef = useRef(null);
     const [elementStyles, setElementStyles] = useState();

package/dist/dom/useElementScrollVisible.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-// 判断某元素滚动时，指定元素是否显示
+// 功能：监听滚动容器滚动，判断目标元素在容器视口内、上方或下方。
 export const useElementScrollVisible = (scroll, target) => {
     const $scroll = document.querySelector(scroll) || {};
     const $scrollRect = $scroll.getBoundingClientRect();

package/dist/{antd → dom}/useHovered.js

@@ -1,4 +1,5 @@
 import { useBoolean } from 'ahooks';
+// 功能：返回 hover 状态和可直接 spread 到元素上的 mouse enter/leave 事件 props。
 export const useHovered = () => {
     const [isHovered, { setTrue, setFalse }] = useBoolean(false);
     const hoverProps = {

package/dist/web.d.ts

@@ -1,6 +1,4 @@
 export * from 'ahooks';
-export { useCopyToClipboard, useCookie, useUpdate } from 'react-use';
-export { default as useUrlState } from '@ahooksjs/use-url-state';
 export * from './common';
 export * from './antd';
 export * from './dom';

package/dist/web.js

@@ -1,6 +1,4 @@
 export * from 'ahooks';
-export { useCopyToClipboard, useCookie, useUpdate } from 'react-use';
-export { default as useUrlState } from '@ahooksjs/use-url-state';
 export * from './common';
 export * from './antd';
 export * from './dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/hooks",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "description": "description",
   "author": "wzy",
   "type": "module",
@@ -34,15 +34,22 @@
     }
   },
   "dependencies": {
-    "@ahooksjs/use-url-state": "^3.5.1",
     "ahooks": "^3.8.4",
-    "antd": "^5.24.3",
     "dayjs": "^1.11.12",
-    "react": "^19.1.0",
-    "react-use": "^17.4.0"
+    "lodash-es": "^4.17.21"
+  },
+  "peerDependencies": {
+    "antd": "^6.3.1",
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^19.1.10",
+    "antd": "^6.3.1",
+    "react": "^19.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfb708a071a9f7f0e2c819760c95427d7196623b"
+  "gitHead": "4e50539cd20e721602a057645c9b859530a1b8c5"
 }

package/dist/antd/useHideFooter.d.ts

@@ -1 +0,0 @@
-export declare const useHideFooter: (el?: string) => void;

package/dist/antd/useHideFooter.js

@@ -1,11 +0,0 @@
-import { useEffect } from 'react';
-// 进入时隐藏指定元素，销毁时恢复该元素
-export const useHideFooter = (el = '.ant-layout-footer') => {
-    useEffect(() => {
-        const e = document.querySelector(el);
-        e.style.display = 'none';
-        return () => {
-            e.style.display = 'block';
-        };
-    }, []);
-};

package/dist/antd/useImperativeHandleForm.d.ts

@@ -1,5 +0,0 @@
-import { type Ref } from 'react';
-import { type FormInstance } from 'antd';
-export declare const useImperativeHandleForm: (ref: Ref<FormInstance>) => {
-    form: FormInstance<any>;
-};

package/dist/antd/useImperativeHandleForm.js

@@ -1,9 +0,0 @@
-import { useImperativeHandle } from 'react';
-import { Form } from 'antd';
-export const useImperativeHandleForm = (ref) => {
-    const [form] = Form.useForm();
-    useImperativeHandle(ref, () => form);
-    return {
-        form,
-    };
-};

package/dist/common/useControlValue.d.ts

@@ -1 +0,0 @@
-export declare const useControlValue: <T>(state: T) => [T, React.Dispatch<React.SetStateAction<T>>];

package/dist/common/useControlValue.js

@@ -1,8 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useControlValue = (state) => {
-    const [state_, setState_] = useState(state);
-    useEffect(() => {
-        setState_(state);
-    }, [state]);
-    return [state_, setState_];
-};

package/dist/common/useDebouncedEffect.d.ts

@@ -1,2 +0,0 @@
-import { type DependencyList } from 'react';
-export declare const useDebouncedEffect: <T>(effect: () => (T | Promise<T>), deps: DependencyList, options?: any) => T;

package/dist/common/useDebouncedEffect.js

@@ -1,13 +0,0 @@
-import { useState } from 'react';
-import { useDebounceFn, useDeepCompareEffect } from 'ahooks';
-export const useDebouncedEffect = (effect, deps, options = { wait: 300 }) => {
-    const { run, cancel } = useDebounceFn(effect, options);
-    const [value, setValue] = useState();
-    useDeepCompareEffect(() => {
-        setValue(run());
-        return () => {
-            cancel();
-        };
-    }, deps);
-    return value;
-};

package/dist/common/useEffectValue.d.ts

@@ -1 +0,0 @@
-export declare const useEffectValue: (defaultValue: any, fn: any, deps?: any[]) => any[];

package/dist/common/useVisibleInfo.d.ts

@@ -1,5 +0,0 @@
-export declare const useVisibleInfo: (v: boolean, i: any) => (boolean | any[] | {
-    setTrue: () => void;
-    setFalse: () => void;
-    toggle: () => void;
-})[];

package/dist/common/useVisibleInfo.js

@@ -1,18 +0,0 @@
-import { useState } from 'react';
-// visible和info的集合体
-export const useVisibleInfo = (v = false, i) => {
-    const [visible, setVisible] = useState(v);
-    const [info, setInfo] = useState(i);
-    return [
-        visible,
-        {
-            setTrue: () => setVisible(true),
-            setFalse: () => setVisible(false),
-            toggle: () => setVisible(!visible),
-        },
-        [
-            info,
-            setInfo,
-        ],
-    ];
-};