sard 1.0.0-canary.0

package/dist/use/useInertRef.js

@@ -0,0 +1,15 @@
+/**
+ * useRef 的惰性初始化版本，
+ * 接受一个函数，在函数中计算并返回初始的 MutableRefObject，
+ * 此函数只在初始渲染时被调用。
+ */
+import { useRef } from 'react';
+export function useInertRef(callback) {
+    const ref = useRef();
+    const initialized = useRef(false);
+    if (!initialized.current) {
+        ref.current = callback();
+        initialized.current = true;
+    }
+    return ref;
+}

package/dist/use/useInternalSelect.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+type IconType = 'square' | 'circle' | 'record';
+export interface InternalSelectContextValue {
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: number;
+    type?: IconType;
+    icon?: (checked: boolean) => ReactNode;
+    checkedColor?: string;
+}
+export declare const InternalSelectContext: import("react").Context<InternalSelectContextValue>;
+export interface InternalCheckProps extends Omit<BaseProps, 'children'> {
+    children?: ReactNode | ((checked: boolean, toggle: () => void) => ReactNode);
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value?: any;
+    onChange?: (checked: boolean, value: any) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: number;
+    type?: IconType;
+    icon?: (checked: boolean) => ReactNode;
+    checkedColor?: string;
+    onClick?: (event: ITouchEvent) => void;
+}
+export declare const useInternalSelect: <T extends "multiple" | "single">(checkType: T, checkClass: string, props: InternalCheckProps) => import("react/jsx-runtime").JSX.Element;
+export interface InternalCheckGroupProps<T extends 'single' | 'multiple', V = T extends 'single' ? any : any[]> {
+    children?: ReactNode;
+    value?: V;
+    defaultValue?: V;
+    onChange?: (value: V) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: number;
+    type?: IconType;
+    icon?: (checked: boolean) => ReactNode;
+    checkedColor?: string;
+}
+export declare const useInternalCheckGroup: <T extends "multiple" | "single">(checkType: T, props: InternalCheckGroupProps<T, T extends "single" ? any : any[]>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/use/useInternalSelect.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import { Icon } from '../icon';
+import { isFunction, isNullish } from '../utils';
+import { SelectContext, useSelect, useSelectGroup } from './useSelect';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useBem } from './useBem';
+import { useEvent } from './useEvent';
+export const InternalSelectContext = createContext(null);
+const mapTypeIcon = {
+    square: ['square', 'check-square-fill'],
+    circle: ['circle', 'check-circle-fill'],
+    record: ['circle', 'record-circle'],
+};
+export const useInternalSelect = (checkType, checkClass, props) => {
+    const { className, style, children, checked, defaultChecked, value, onChange, disabled, readOnly, size, type, icon, checkedColor, onClick, ...restProps } = props;
+    const [bem] = useBem(checkClass);
+    const [isChecked, toggle] = useSelect(checkType, {
+        defaultValue: defaultChecked,
+        value: checked,
+        trigger: onChange,
+        initialValue: false,
+    }, value);
+    if (isFunction(children)) {
+        return (_jsx(InternalSelectContext.Provider, { value: null, children: children(isChecked, toggle) }));
+    }
+    const internalContext = useContext(InternalSelectContext);
+    const mergedDisabled = disabled ?? internalContext?.disabled;
+    const mergedReadOnly = readOnly ?? internalContext?.readOnly;
+    const mergedSize = size ?? internalContext?.size;
+    const mergedType = type ??
+        internalContext?.type ??
+        (checkType === 'single' ? 'record' : 'square');
+    const mergedIcon = icon ?? internalContext?.icon;
+    const mergedCheckedColor = checkedColor ?? internalContext?.checkedColor;
+    const handleCheckboxClick = useEvent((event) => {
+        if (!mergedDisabled && !mergedReadOnly) {
+            toggle();
+        }
+        onClick?.(event);
+    });
+    return (_jsx(CustomWrapper, { children: _jsx(InternalSelectContext.Provider, { value: null, children: _jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m('checked', isChecked), bem.m('disabled', mergedDisabled), bem.m('readonly', mergedReadOnly), className), style: style, onClick: handleCheckboxClick, children: [mergedIcon ? (mergedIcon(isChecked)) : (_jsx(Icon, { className: classNames(bem.e('icon'), bem.em('icon', 'checked', isChecked), bem.em('icon', 'disabled', mergedDisabled)), size: mergedSize, color: isChecked && !mergedDisabled ? mergedCheckedColor : undefined, name: mapTypeIcon[mergedType][isChecked ? 1 : 0] })), !isNullish(children) && (_jsx(View, { className: classNames(bem.e('label'), bem.em('label', 'disabled', mergedDisabled)), children: children }))] }) }) }));
+};
+export const useInternalCheckGroup = (checkType, props) => {
+    const { children, value, defaultValue, onChange, disabled, readOnly, size, type, icon, checkedColor, } = props;
+    const context = useSelectGroup({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: () => (checkType === 'single' ? '' : []),
+    });
+    const internalContext = useMemo(() => {
+        return {
+            disabled,
+            readOnly,
+            size,
+            type,
+            icon,
+            checkedColor,
+        };
+    }, [disabled, readOnly, size, type, icon, checkedColor]);
+    return (_jsx(InternalSelectContext.Provider, { value: internalContext, children: _jsx(SelectContext.Provider, { value: context, children: children }) }));
+};

package/dist/use/useLayoutUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 用法同 useLayoutEffect，但只在 update 阶段调用
+ */
+import { useLayoutEffect } from 'react';
+export declare const useLayoutUpdateEffect: typeof useLayoutEffect;

package/dist/use/useLayoutUpdateEffect.js

@@ -0,0 +1,18 @@
+/**
+ * 用法同 useLayoutEffect，但只在 update 阶段调用
+ */
+import { useLayoutEffect, useRef } from 'react';
+export const useLayoutUpdateEffect = (callback, deps) => {
+    const firstMount = useRef(false);
+    useLayoutEffect(() => {
+        if (firstMount.current) {
+            return callback();
+        }
+    }, deps);
+    useLayoutEffect(() => {
+        firstMount.current = true;
+        return () => {
+            firstMount.current = false;
+        };
+    }, []);
+};

package/dist/use/usePropRef.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 通过 useRef 保存最新的 prop，以便可以在 useCallback 函数里面使用。
+ */
+/// <reference types="react" />
+export declare function usePropRef<T>(prop: T): import("react").MutableRefObject<T>;

package/dist/use/usePropRef.js

@@ -0,0 +1,9 @@
+/**
+ * 通过 useRef 保存最新的 prop，以便可以在 useCallback 函数里面使用。
+ */
+import { useRef } from 'react';
+export function usePropRef(prop) {
+    const ref = useRef(prop);
+    ref.current = prop;
+    return ref;
+}

package/dist/use/useResize.d.ts

@@ -0,0 +1,2 @@
+import { DebounceOptions } from '../utils';
+export declare function useResize(func: (...args: unknown[]) => unknown, wait: number, options?: DebounceOptions): void;

package/dist/use/useResize.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import Taro from '@tarojs/taro';
+import { throttle } from '../utils';
+import { useEvent } from './useEvent';
+export function useResize(func, wait, options) {
+    const fn = useEvent(func);
+    useEffect(() => {
+        const handler = throttle(fn, wait, options);
+        Taro.onWindowResize(handler);
+        return () => {
+            Taro.offWindowResize(handler);
+        };
+    }, []);
+}

package/dist/use/useResizeObserver.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 用于解决组件不显示时无法操作节点滚动或尺寸相关接口的问题
+ */
+/// <reference types="react" />
+export declare function useResizeObserver(callback: (...args: unknown[]) => unknown): readonly [import("react").MemoExoticComponent<() => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<any>, any>>];

package/dist/use/useResizeObserver.js

@@ -0,0 +1,38 @@
+/**
+ * 用于解决组件不显示时无法操作节点滚动或尺寸相关接口的问题
+ */
+import { useMemo, useRef, createElement, memo } from 'react';
+import { useEvent } from './useEvent';
+export function useResizeObserver(callback) {
+    const resizeObserver = useRef();
+    const memoCallback = useEvent(() => {
+        callback();
+    });
+    const observe = useEvent((node) => {
+        resizeObserver.current?.disconnect();
+        if (node) {
+            resizeObserver.current = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    if (entry.contentRect.width > 0) {
+                        memoCallback();
+                    }
+                }
+            });
+            resizeObserver.current.observe(node);
+        }
+    });
+    const ResizeSpy = useMemo(() => memo(() => createElement('div', {
+        style: {
+            position: 'fixed',
+            zIndex: -1,
+            width: 1,
+            height: 0,
+            pointerEvents: 'none',
+            opacity: 0,
+        },
+        ref: (node) => {
+            observe(node);
+        },
+    })), []);
+    return [ResizeSpy];
+}

package/dist/use/useSelect.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { UseControllableValueOptions } from './useControllableValue';
+export interface SelectContextValue<V> {
+    value: V;
+    onChange: (value: V) => void;
+}
+export interface UseSelectOptions extends UseControllableValueOptions<boolean> {
+    clearable?: boolean;
+}
+export declare const SelectContext: import("react").Context<SelectContextValue<any>>;
+export declare function useSelect<T extends 'single' | 'multiple', V>(type: T, options: UseSelectOptions, value: V): readonly [boolean, () => void];
+export declare function useSelectGroup<V>(options: UseControllableValueOptions<V>): {
+    value: V;
+    onChange: (val: V) => void;
+};

package/dist/use/useSelect.js

@@ -0,0 +1,56 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, } from 'react';
+import { useControllableValue, } from './useControllableValue';
+import { useEvent } from './useEvent';
+export const SelectContext = createContext(null);
+export function useSelect(type, options, value) {
+    const context = useContext(SelectContext);
+    const { clearable } = options;
+    const [innerSelected, setInnerSelected] = useControllableValue(options);
+    useEffect(() => {
+        if (context) {
+            setInnerSelected(type === 'single'
+                ? context.value === value
+                : context.value.includes(value), value);
+        }
+    }, [context]);
+    const toggle = useEvent(() => {
+        if (type === 'single' && innerSelected && !clearable) {
+            return;
+        }
+        if (context) {
+            let nextValue;
+            if (type === 'single') {
+                if (innerSelected) {
+                    nextValue = undefined;
+                }
+                else {
+                    nextValue = value;
+                }
+            }
+            else {
+                if (innerSelected) {
+                    nextValue = context.value.filter((item) => item !== value);
+                }
+                else {
+                    nextValue = context.value.concat(value);
+                }
+            }
+            context.onChange(nextValue);
+        }
+        else {
+            setInnerSelected(type === 'single' ? true : !innerSelected, value);
+        }
+    });
+    return [innerSelected, toggle];
+}
+export function useSelectGroup(options) {
+    const [innerValue, setInnerValue] = useControllableValue(options);
+    const handleChange = useCallback((val) => {
+        setInnerValue(val);
+    }, []);
+    const context = useMemo(() => ({
+        value: innerValue,
+        onChange: handleChange,
+    }), [innerValue]);
+    return context;
+}

package/dist/use/useSelectorId.d.ts

@@ -0,0 +1 @@
+export declare function useSelectorId(perfix?: string): string;

package/dist/use/useSelectorId.js

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+import { uniqid } from '../utils';
+export function useSelectorId(perfix) {
+    return useMemo(() => uniqid(perfix), []);
+}

package/dist/use/useSetTimeout.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 使在函数组件中更好使用 setTimeout，可以重置或清除定时器
+ */
+import { AnyFunction } from '../base';
+interface UseSetTimeoutOptions {
+    canDelay?: AnyFunction;
+    tailing?: boolean;
+}
+export declare function useSetTimeout(callback: AnyFunction, duration: number, options?: UseSetTimeoutOptions): readonly [(...args: any[]) => void, () => void, () => boolean];
+export {};

package/dist/use/useSetTimeout.js

@@ -0,0 +1,34 @@
+/**
+ * 使在函数组件中更好使用 setTimeout，可以重置或清除定时器
+ */
+import { useEffect, useRef } from 'react';
+import { useEvent } from './useEvent';
+export function useSetTimeout(callback, duration, options = {}) {
+    const { canDelay = () => true, tailing } = options;
+    const timer = useRef(0);
+    const func = useEvent(callback);
+    const canDelayCallback = useEvent(canDelay);
+    const cancel = useEvent(() => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = 0;
+            if (tailing) {
+                func();
+            }
+        }
+    });
+    const doSomethingLater = useEvent((...args) => {
+        cancel();
+        if (canDelayCallback()) {
+            timer.current = setTimeout(() => {
+                timer.current = 0;
+                func(...args);
+            }, duration);
+        }
+    });
+    const isWaitingToDoSomething = useEvent(() => {
+        return !!timer.current;
+    });
+    useEffect(() => cancel, []);
+    return [doSomethingLater, cancel, isWaitingToDoSomething];
+}

package/dist/use/useStopMovePropagate.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useStopMovePropagate<T>(ref: React.RefObject<T>, immediate?: boolean): {
+    readonly on: () => void;
+    readonly off: () => void;
+};

package/dist/use/useStopMovePropagate.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react';
+export function useStopMovePropagate(ref, immediate) {
+    const handler = useCallback((event) => {
+        if (immediate) {
+            event.stopImmediatePropagation();
+        }
+        else {
+            event.stopPropagation();
+        }
+    }, []);
+    const on = useCallback(() => {
+        if (ref.current instanceof EventTarget) {
+            ref.current.addEventListener('touchmove', handler, {
+                passive: false,
+            });
+        }
+    }, []);
+    const off = useCallback(() => {
+        if (ref.current instanceof EventTarget) {
+            ref.current.removeEventListener('touchmove', handler);
+        }
+    }, []);
+    useEffect(() => {
+        on();
+        return off;
+    }, []);
+    return { on, off };
+}

package/dist/use/useThrottle.d.ts

@@ -0,0 +1,8 @@
+import { DebounceOptions } from '../utils';
+import { AnyFunction } from '../base';
+export declare function useThrottle(callback: AnyFunction, wait: number, options?: DebounceOptions): {
+    (...args: any[]): any;
+    cancel: () => void;
+    flush: () => any;
+    pending: () => boolean;
+};

package/dist/use/useThrottle.js

@@ -0,0 +1,11 @@
+import { useEffect, useMemo } from 'react';
+import { throttle } from '../utils';
+import { useEvent } from './useEvent';
+export function useThrottle(callback, wait, options) {
+    const cb = useEvent(callback);
+    const handler = useMemo(() => {
+        return throttle(cb, wait, options);
+    }, []);
+    useEffect(() => () => handler.cancel(), []);
+    return handler;
+}

package/dist/use/useUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 用法同 useEffect update 阶段调用
+ */
+import { useEffect } from 'react';
+export declare const useUpdateEffect: typeof useEffect;

package/dist/use/useUpdateEffect.js

@@ -0,0 +1,18 @@
+/**
+ * 用法同 useEffect update 阶段调用
+ */
+import { useEffect, useRef } from 'react';
+export const useUpdateEffect = (callback, deps) => {
+    const firstMount = useRef(false);
+    useEffect(() => {
+        if (firstMount.current) {
+            return callback();
+        }
+    }, deps);
+    useEffect(() => {
+        firstMount.current = true;
+        return () => {
+            firstMount.current = false;
+        };
+    }, []);
+};

package/dist/use/useUpdateWatchSync.d.ts

@@ -0,0 +1,5 @@
+/**
+ * update 阶段的同步监听
+ */
+import { DependencyList } from 'react';
+export declare function useUpdateWatchSync(factory: () => void, deps: DependencyList | undefined): void;

package/dist/use/useUpdateWatchSync.js

@@ -0,0 +1,18 @@
+/**
+ * update 阶段的同步监听
+ */
+import { useLayoutEffect, useMemo, useRef } from 'react';
+export function useUpdateWatchSync(factory, deps) {
+    const firstMount = useRef(false);
+    useLayoutEffect(() => {
+        firstMount.current = true;
+        return () => {
+            firstMount.current = false;
+        };
+    }, []);
+    return useMemo(() => {
+        if (firstMount.current) {
+            factory();
+        }
+    }, deps);
+}

package/dist/use/useWatchStateSync.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 扩展 useState 的功能，可以同步监听 value 以便更新自身的值
+ */
+export declare function useWatchStateSync<T>(value: T): readonly [T, (value: T) => void];

package/dist/use/useWatchStateSync.js

@@ -0,0 +1,18 @@
+/**
+ * 扩展 useState 的功能，可以同步监听 value 以便更新自身的值
+ */
+import { useMemo, useRef } from 'react';
+import { useForceRender } from './useForceRender';
+import { useEvent } from './useEvent';
+export function useWatchStateSync(value) {
+    const forceRender = useForceRender();
+    const stateRef = useRef(value);
+    useMemo(() => {
+        stateRef.current = value;
+    }, [value]);
+    const setState = useEvent((value) => {
+        stateRef.current = value;
+        forceRender();
+    });
+    return [stateRef.current, setState];
+}

package/dist/utils/animate.d.ts

@@ -0,0 +1,28 @@
+export declare function easeInQuad(k: number): number;
+export declare function easeOutQuad(k: number): number;
+export declare function easeInOutQuad(k: number): number;
+export declare function easeOutSine(k: number): number;
+export declare function easeOutCubic(k: number): number;
+export interface AnimateOptions {
+    from: number;
+    to: number;
+    duration?: number;
+    step?: (value: number) => void;
+    finish?: (value: number) => void;
+    easing?: (k: number) => number;
+}
+export interface AnimateStop {
+    (): void;
+    finish(): void;
+}
+export declare function animate({ from, to, duration, step, finish, easing, }: AnimateOptions): AnimateStop;
+interface Point {
+    x: number;
+    y: number;
+}
+export declare function getDistanceByTowPoints(p1: Point, p2: Point): number;
+export declare function getAngle360(p1: Point, p2: Point): number;
+export type Direction = 'right' | 'left' | 'up' | 'down';
+export declare function getDirectionByAngle(angle: number): Direction;
+export declare function getDirectionByTwoPoints(p1: Point, p2: Point): Direction;
+export {};

package/dist/utils/animate.js

@@ -0,0 +1,81 @@
+import { minmax, noop } from './utils';
+export function easeInQuad(k) {
+    return k * k;
+}
+export function easeOutQuad(k) {
+    return k * (2 - k);
+}
+export function easeInOutQuad(k) {
+    if ((k *= 2) < 1)
+        return 0.5 * k * k;
+    return -0.5 * (--k * (k - 2) - 1);
+}
+export function easeOutSine(k) {
+    return Math.sin((k * Math.PI) / 2);
+}
+export function easeOutCubic(k) {
+    return --k * k * k + 1;
+}
+export function animate({ from = 0, to = 0, duration = 0, step = noop, finish, easing = easeOutQuad, }) {
+    const total = to - from;
+    const begin = Date.now();
+    let progress = 0;
+    let over = false;
+    const stop = () => {
+        over = true;
+    };
+    stop.finish = () => {
+        stop();
+        step(to);
+        finish?.(to);
+    };
+    const stepCallback = () => {
+        if (over) {
+            return;
+        }
+        progress = minmax((Date.now() - begin) / duration, 0, 1);
+        const value = easing(progress) * total + from;
+        step(value);
+        if (progress === 1) {
+            stop();
+            return finish?.(value);
+        }
+        requestAnimationFrame(stepCallback);
+    };
+    if (duration === 0) {
+        step(to);
+        finish?.(to);
+    }
+    else {
+        requestAnimationFrame(stepCallback);
+    }
+    return stop;
+}
+// 计算两点之间的距离
+export function getDistanceByTowPoints(p1, p2) {
+    return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
+}
+// 根据起始点和结束点坐标获取角度: 以3点钟方向为0度，逆时针递增
+export function getAngle360(p1, p2) {
+    const angle = 90 - (Math.atan2(p1.y - p2.y, p2.x - p1.x) / Math.PI) * 180;
+    return angle < 0 ? angle + 360 : angle;
+}
+export function getDirectionByAngle(angle) {
+    if (angle <= 45 || angle >= 315) {
+        return 'up';
+    }
+    else if (angle > 45 && angle < 135) {
+        return 'right';
+    }
+    else if (angle >= 135 && angle <= 225) {
+        return 'down';
+    }
+    else {
+        // angle > 225 && angle < 315
+        return 'left';
+    }
+}
+// 根据起始点和结束点获取方向（上下左右）
+export function getDirectionByTwoPoints(p1, p2) {
+    return getDirectionByAngle(getAngle360(p1, p2));
+}

package/dist/utils/createPubSub.d.ts

@@ -0,0 +1,8 @@
+export interface PubSub {
+    on(type: string, handler: (...args: unknown[]) => unknown): void;
+    off(type?: string, handler?: (...args: unknown[]) => unknown): void;
+    emit(type: string, ...payload: any[]): void;
+    once(type: string, handler: (...args: unknown[]) => unknown): void;
+}
+export declare function createPubSub(): PubSub;
+export declare const pubSub: PubSub;