@d-matrix/utils 1.27.1 → 1.28.0

package/dist/react/index.js

@@ -1,12 +1,15 @@
-export * from './useDisableContextMenu';
-export * from './useStateCallback';
-export * from './renderToString';
-export * from './useIsMounted';
-export * from './useCopyToClipboard';
-export * from './enhancedComponent';
-export * from './useDeepCompareRef';
-export * from './types';
-export * from './useForwardRef';
-export * from './useIsomorphicLayoutEffect';
-export * from './useMediaQuery';
-export * from './useIsFirstRender';
+export * from './useDisableContextMenu';
+export * from './useStateCallback';
+export * from './renderToString';
+export * from './useIsMounted';
+export * from './useCopyToClipboard';
+export * from './enhancedComponent';
+export * from './useDeepCompareRef';
+export * from './types';
+export * from './useForwardRef';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';
+export * from './useIsFirstRender';
+export * from './useStateCallback';
+export * from './useSafeTimeout';
+export * from './useId';

package/dist/react/renderToString.d.ts

@@ -1,3 +1,3 @@
-import { ReactElement } from 'react';
-export declare const render: <P>(element: ReactElement<P, string | import("react").JSXElementConstructor<any>>) => Promise<string>;
-export declare const cleanup: () => void;
+import { ReactElement } from 'react';
+export declare const render: <P>(element: ReactElement<P, string | import("react").JSXElementConstructor<any>>) => Promise<string>;
+export declare const cleanup: () => void;

package/dist/react/renderToString.js

@@ -1,30 +1,30 @@
-import ReactDOM from 'react-dom';
-let container;
-export const render = (element) => {
-    return new Promise((resolve, reject) => {
-        if (document === undefined) {
-            return reject('只支持浏览器环境');
-        }
-        container = document.createElement('div');
-        container.id = 'template-container';
-        container.style.cssText = 'position: absolute; left: -9999px;';
-        document.body.appendChild(container);
-        ReactDOM.render(element, container, () => {
-            if (container) {
-                resolve(container.innerHTML);
-            }
-            else {
-                reject('组件容器不存在');
-            }
-        });
-    });
-};
-export const cleanup = () => {
-    if (container === null)
-        return;
-    const isUnmounted = ReactDOM.unmountComponentAtNode(container);
-    if (isUnmounted) {
-        document.body.removeChild(container);
-        container = null;
-    }
-};
+import ReactDOM from 'react-dom';
+let container;
+export const render = (element) => {
+    return new Promise((resolve, reject) => {
+        if (document === undefined) {
+            return reject('只支持浏览器环境');
+        }
+        container = document.createElement('div');
+        container.id = 'template-container';
+        container.style.cssText = 'position: absolute; left: -9999px;';
+        document.body.appendChild(container);
+        ReactDOM.render(element, container, () => {
+            if (container) {
+                resolve(container.innerHTML);
+            }
+            else {
+                reject('组件容器不存在');
+            }
+        });
+    });
+};
+export const cleanup = () => {
+    if (container === null)
+        return;
+    const isUnmounted = ReactDOM.unmountComponentAtNode(container);
+    if (isUnmounted) {
+        document.body.removeChild(container);
+        container = null;
+    }
+};

package/dist/react/types.d.ts

@@ -1,9 +1,9 @@
-import type { ForwardRefExoticComponent, NamedExoticComponent, ComponentPropsWithoutRef, ComponentPropsWithRef, RefAttributes, ElementType } from 'react';
-export declare type ComponentRef<T extends ElementType> = T extends NamedExoticComponent<ComponentPropsWithoutRef<T> & RefAttributes<infer Method>> ? Method : ComponentPropsWithRef<T> extends RefAttributes<infer Method> ? Method : never;
-export declare type InferRef<T> = T extends ForwardRefExoticComponent<infer Ref> ? Ref extends React.RefAttributes<infer RefElement> ? RefElement : never : never;
-declare type ReactRefComponent<Props extends {
-    ref?: React.Ref<any> | string;
-}> = (props: Props) => React.ReactNode;
-declare type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
-export declare type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
-export {};
+import type { ForwardRefExoticComponent, NamedExoticComponent, ComponentPropsWithoutRef, ComponentPropsWithRef, RefAttributes, ElementType } from 'react';
+export declare type ComponentRef<T extends ElementType> = T extends NamedExoticComponent<ComponentPropsWithoutRef<T> & RefAttributes<infer Method>> ? Method : ComponentPropsWithRef<T> extends RefAttributes<infer Method> ? Method : never;
+export declare type InferRef<T> = T extends ForwardRefExoticComponent<infer Ref> ? Ref extends React.RefAttributes<infer RefElement> ? RefElement : never : never;
+declare type ReactRefComponent<Props extends {
+    ref?: React.Ref<any> | string;
+}> = (props: Props) => React.ReactNode;
+declare type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
+export declare type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
+export {};

package/dist/react/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/react/useCopyToClipboard.d.ts

@@ -1,21 +1,21 @@
-export interface UseCopyToClipboardProps {
-    /**
-     * 重置复制成功状态延迟
-     */
-    timeout?: number;
-    /**
-     * @param copiedText 复制的文本
-     * @returns
-     */
-    onCopy?: (copiedText: string) => void | undefined;
-    /**
-     *
-     * @param error 复制错误对象
-     * @returns
-     */
-    onError?: (error: Error) => void | undefined;
-}
-export declare function useCopyToClipboard(props?: UseCopyToClipboardProps): {
-    isCopied: Boolean;
-    copyToClipboard: (value: string) => void;
-};
+export interface UseCopyToClipboardProps {
+    /**
+     * 重置复制成功状态延迟
+     */
+    timeout?: number;
+    /**
+     * @param copiedText 复制的文本
+     * @returns
+     */
+    onCopy?: (copiedText: string) => void | undefined;
+    /**
+     *
+     * @param error 复制错误对象
+     * @returns
+     */
+    onError?: (error: Error) => void | undefined;
+}
+export declare function useCopyToClipboard(props?: UseCopyToClipboardProps): {
+    isCopied: Boolean;
+    copyToClipboard: (value: string) => void;
+};

package/dist/react/useCopyToClipboard.js

@@ -1,44 +1,44 @@
-import { useCallback, useState } from 'react';
-import { useIsMounted } from './useIsMounted';
-export function useCopyToClipboard(props) {
-    const { timeout = 2000, onCopy, onError } = props !== null && props !== void 0 ? props : {};
-    const isMounted = useIsMounted();
-    const [isCopied, setIsCopied] = useState(false);
-    const copyToClipboard = useCallback((value) => {
-        var _a;
-        if (!isMounted())
-            return;
-        if (typeof window === 'undefined' || !((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText)) {
-            const error = new Error(`Cannot copy to clipboard, navigator.clipboard.writeText is not defined`);
-            if (process.env.NODE_ENV === 'development')
-                console.error(error);
-            onError === null || onError === void 0 ? void 0 : onError(error);
-            return;
-        }
-        if (typeof value !== 'string') {
-            const error = new Error(`Cannot copy typeof ${typeof value} to clipboard, must be a string`);
-            if (process.env.NODE_ENV === 'development')
-                console.error(error);
-            onError === null || onError === void 0 ? void 0 : onError(error);
-            return;
-        }
-        if (value === '') {
-            const error = new Error(`Cannot copy empty string to clipboard.`);
-            if (process.env.NODE_ENV === 'development')
-                console.error(error);
-            onError === null || onError === void 0 ? void 0 : onError(error);
-            return;
-        }
-        navigator.clipboard
-            .writeText(value)
-            .then(() => {
-            setIsCopied(true);
-            onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
-            setTimeout(() => {
-                setIsCopied(false);
-            }, timeout);
-        })
-            .catch((error) => onError === null || onError === void 0 ? void 0 : onError(error));
-    }, [onCopy, onError, timeout]);
-    return { isCopied, copyToClipboard };
-}
+import { useCallback, useState } from 'react';
+import { useIsMounted } from './useIsMounted';
+export function useCopyToClipboard(props) {
+    const { timeout = 2000, onCopy, onError } = props !== null && props !== void 0 ? props : {};
+    const isMounted = useIsMounted();
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = useCallback((value) => {
+        var _a;
+        if (!isMounted())
+            return;
+        if (typeof window === 'undefined' || !((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText)) {
+            const error = new Error(`Cannot copy to clipboard, navigator.clipboard.writeText is not defined`);
+            if (process.env.NODE_ENV === 'development')
+                console.error(error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        if (typeof value !== 'string') {
+            const error = new Error(`Cannot copy typeof ${typeof value} to clipboard, must be a string`);
+            if (process.env.NODE_ENV === 'development')
+                console.error(error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        if (value === '') {
+            const error = new Error(`Cannot copy empty string to clipboard.`);
+            if (process.env.NODE_ENV === 'development')
+                console.error(error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        navigator.clipboard
+            .writeText(value)
+            .then(() => {
+            setIsCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
+            setTimeout(() => {
+                setIsCopied(false);
+            }, timeout);
+        })
+            .catch((error) => onError === null || onError === void 0 ? void 0 : onError(error));
+    }, [onCopy, onError, timeout]);
+    return { isCopied, copyToClipboard };
+}

package/dist/react/useDeepCompareRef.d.ts

@@ -1,2 +1,2 @@
-import { DependencyList } from 'react';
-export declare const useDeepCompareRef: (deps: DependencyList) => React.MutableRefObject<number>;
+import { DependencyList } from 'react';
+export declare const useDeepCompareRef: (deps: DependencyList) => React.MutableRefObject<number>;

package/dist/react/useDeepCompareRef.js

@@ -1,11 +1,11 @@
-import { useRef } from 'react';
-import isEqual from 'react-fast-compare';
-export const useDeepCompareRef = (deps) => {
-    const ref = useRef();
-    const signalRef = useRef(0);
-    if (deps === undefined || !isEqual(deps, ref.current)) {
-        ref.current = deps;
-        signalRef.current += 1;
-    }
-    return signalRef;
-};
+import { useRef } from 'react';
+import isEqual from 'react-fast-compare';
+export const useDeepCompareRef = (deps) => {
+    const ref = useRef();
+    const signalRef = useRef(0);
+    if (deps === undefined || !isEqual(deps, ref.current)) {
+        ref.current = deps;
+        signalRef.current += 1;
+    }
+    return signalRef;
+};

package/dist/react/useDisableContextMenu.d.ts

@@ -1,7 +1,7 @@
-declare type ContextMenuTarget = () => Element | Document | undefined | null;
-/**
- * 在HTML元素上禁用右键菜单
- * @param target 默认为 () => document
- */
-export declare const useDisableContextMenu: (target?: ContextMenuTarget) => void;
-export {};
+declare type ContextMenuTarget = () => Element | Document | undefined | null;
+/**
+ * 在HTML元素上禁用右键菜单
+ * @param target 默认为 () => document
+ */
+export declare const useDisableContextMenu: (target?: ContextMenuTarget) => void;
+export {};

package/dist/react/useDisableContextMenu.js

@@ -1,24 +1,24 @@
-import { useEffect, useRef } from "react";
-const defaultContextMenuTarget = () => document;
-/**
- * 在HTML元素上禁用右键菜单
- * @param target 默认为 () => document
- */
-export const useDisableContextMenu = (target = defaultContextMenuTarget) => {
-    const targetFn = useRef(target);
-    targetFn.current = target;
-    useEffect(() => {
-        const el = targetFn.current();
-        if (!el)
-            return;
-        const onContextMenu = (e) => {
-            e.preventDefault();
-        };
-        el.addEventListener('contextmenu', onContextMenu);
-        return () => {
-            if (!el)
-                return;
-            el.removeEventListener('contextmenu', onContextMenu);
-        };
-    }, []);
-};
+import { useEffect, useRef } from "react";
+const defaultContextMenuTarget = () => document;
+/**
+ * 在HTML元素上禁用右键菜单
+ * @param target 默认为 () => document
+ */
+export const useDisableContextMenu = (target = defaultContextMenuTarget) => {
+    const targetFn = useRef(target);
+    targetFn.current = target;
+    useEffect(() => {
+        const el = targetFn.current();
+        if (!el)
+            return;
+        const onContextMenu = (e) => {
+            e.preventDefault();
+        };
+        el.addEventListener('contextmenu', onContextMenu);
+        return () => {
+            if (!el)
+                return;
+            el.removeEventListener('contextmenu', onContextMenu);
+        };
+    }, []);
+};

package/dist/react/useEventCallback.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Alternative to useCallback that doesn't update the callback when dependencies change
+ *
+ * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ * @see https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;

package/dist/react/useEventCallback.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+// allow the hook to work in SSR
+const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+/**
+ * Alternative to useCallback that doesn't update the callback when dependencies change
+ *
+ * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ * @see https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export const useEventCallback = (fn) => {
+    const ref = React.useRef(() => {
+        throw new Error('Cannot call an event handler while rendering.');
+    });
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => ref.current(...args), []);
+};

package/dist/react/useForwardRef.d.ts

@@ -1,9 +1,9 @@
-import { ForwardedRef } from 'react';
-/**
- * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
- * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
- * @param ref
- * @param initialValue
- * @returns
- */
-export declare const useForwardRef: <T>(ref: ForwardedRef<T>, initialValue?: any) => import("react").MutableRefObject<T>;
+import { ForwardedRef } from 'react';
+/**
+ * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
+ * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
+ * @param ref
+ * @param initialValue
+ * @returns
+ */
+export declare const useForwardRef: <T>(ref: ForwardedRef<T>, initialValue?: any) => import("react").MutableRefObject<T>;

package/dist/react/useForwardRef.js

@@ -1,22 +1,22 @@
-import { useEffect, useRef } from 'react';
-/**
- * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
- * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
- * @param ref
- * @param initialValue
- * @returns
- */
-export const useForwardRef = (ref, initialValue = null) => {
-    const targetRef = useRef(initialValue);
-    useEffect(() => {
-        if (!ref)
-            return;
-        if (typeof ref === 'function') {
-            ref(targetRef.current);
-        }
-        else {
-            ref.current = targetRef.current;
-        }
-    }, [ref]);
-    return targetRef;
-};
+import { useEffect, useRef } from 'react';
+/**
+ * https://stackoverflow.com/questions/66060217/i-cant-type-the-ref-correctly-using-useref-hook-in-typescript
+ * 解决 Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void' TS类型错误
+ * @param ref
+ * @param initialValue
+ * @returns
+ */
+export const useForwardRef = (ref, initialValue = null) => {
+    const targetRef = useRef(initialValue);
+    useEffect(() => {
+        if (!ref)
+            return;
+        if (typeof ref === 'function') {
+            ref(targetRef.current);
+        }
+        else {
+            ref.current = targetRef.current;
+        }
+    }, [ref]);
+    return targetRef;
+};

package/dist/react/useId.d.ts

@@ -0,0 +1 @@
+export declare const useId: (id?: string | undefined) => string;

package/dist/react/useId.js

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+function makeId() {
+    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    let id = '';
+    for (let i = 0; i < 10; i += 1) {
+        id += chars[Math.floor(Math.random() * chars.length)];
+    }
+    return id;
+}
+export const useId = (id) => {
+    return useMemo(() => id !== null && id !== void 0 ? id : makeId(), [id]);
+};

package/dist/react/useIsFirstRender.d.ts

@@ -1,6 +1,6 @@
-/**
- * 使用 useIsFirstRender 区分第一次和后续渲染
- * useIsFirstRender 对于确定当前渲染是否是组件的第一个渲染很有用。当你想在初始渲染时有条件地执行某些逻辑或渲染特定组件时，这个钩子特别有价值，提供了一种有效的方法来区分第一次和后续渲染。
- * @returns boolean true 表示第一次渲染，false 表示其他渲染
- */
-export declare function useIsFirstRender(): boolean;
+/**
+ * 使用 useIsFirstRender 区分第一次和后续渲染
+ * useIsFirstRender 对于确定当前渲染是否是组件的第一个渲染很有用。当你想在初始渲染时有条件地执行某些逻辑或渲染特定组件时，这个钩子特别有价值，提供了一种有效的方法来区分第一次和后续渲染。
+ * @returns boolean true 表示第一次渲染，false 表示其他渲染
+ */
+export declare function useIsFirstRender(): boolean;

package/dist/react/useIsFirstRender.js

@@ -1,14 +1,14 @@
-import { useRef } from 'react';
-/**
- * 使用 useIsFirstRender 区分第一次和后续渲染
- * useIsFirstRender 对于确定当前渲染是否是组件的第一个渲染很有用。当你想在初始渲染时有条件地执行某些逻辑或渲染特定组件时，这个钩子特别有价值，提供了一种有效的方法来区分第一次和后续渲染。
- * @returns boolean true 表示第一次渲染，false 表示其他渲染
- */
-export function useIsFirstRender() {
-    const renderRef = useRef(true);
-    if (renderRef.current === true) {
-        renderRef.current = false;
-        return true;
-    }
-    return renderRef.current;
-}
+import { useRef } from 'react';
+/**
+ * 使用 useIsFirstRender 区分第一次和后续渲染
+ * useIsFirstRender 对于确定当前渲染是否是组件的第一个渲染很有用。当你想在初始渲染时有条件地执行某些逻辑或渲染特定组件时，这个钩子特别有价值，提供了一种有效的方法来区分第一次和后续渲染。
+ * @returns boolean true 表示第一次渲染，false 表示其他渲染
+ */
+export function useIsFirstRender() {
+    const renderRef = useRef(true);
+    if (renderRef.current === true) {
+        renderRef.current = false;
+        return true;
+    }
+    return renderRef.current;
+}

package/dist/react/useIsMounted.d.ts

@@ -1,2 +1,2 @@
-/** 用于判断组件是否挂载 */
-export declare function useIsMounted(): () => boolean;
+/** 用于判断组件是否挂载 */
+export declare function useIsMounted(): () => boolean;

package/dist/react/useIsMounted.js

@@ -1,13 +1,13 @@
-import { useCallback, useEffect, useRef } from 'react';
-/** 用于判断组件是否挂载 */
-export function useIsMounted() {
-    const mountedRef = useRef(false);
-    const get = useCallback(() => mountedRef.current, []);
-    useEffect(() => {
-        mountedRef.current = true;
-        return () => {
-            mountedRef.current = false;
-        };
-    }, []);
-    return get;
-}
+import { useCallback, useEffect, useRef } from 'react';
+/** 用于判断组件是否挂载 */
+export function useIsMounted() {
+    const mountedRef = useRef(false);
+    const get = useCallback(() => mountedRef.current, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}

package/dist/react/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,2 @@
-import { useEffect } from 'react';
-export declare const useIsomorphicLayoutEffect: typeof useEffect;
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/react/useIsomorphicLayoutEffect.js

@@ -1,2 +1,2 @@
-import { useEffect, useLayoutEffect } from 'react';
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/react/useMediaQuery.d.ts

@@ -1,14 +1,14 @@
-declare type UseMediaQueryOptions = {
-    /**
-     * The default value to return if the hook is being run on the server.
-     * @default false
-     */
-    defaultValue?: boolean;
-    /**
-     * If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
-     * @default true
-     */
-    initializeWithValue?: boolean;
-};
-export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue }?: UseMediaQueryOptions): boolean;
-export {};
+declare type UseMediaQueryOptions = {
+    /**
+     * The default value to return if the hook is being run on the server.
+     * @default false
+     */
+    defaultValue?: boolean;
+    /**
+     * If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
+     * @default true
+     */
+    initializeWithValue?: boolean;
+};
+export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue }?: UseMediaQueryOptions): boolean;
+export {};