sard 1.0.0-canary.0

package/dist/upload/index.scss

@@ -0,0 +1,247 @@
+@import '../style/base.scss';
+// #variables
+$sar-upload-preview-width: 88px !default;
+$sar-upload-preview-height: 88px !default;
+$sar-upload-preview-gap: 8px !default;
+$sar-upload-preview-border-radius: $sar-rounded !default;
+$sar-upload-preview-bg-color: $sar-secondary-bg-color !default;
+$sar-upload-preview-video-bg-color: $sar-black !default;
+
+$sar-upload-file-color: $sar-body-color !default;
+$sar-upload-file-icon-font-size: 20px !default;
+$sar-upload-file-name-margin-top: 4px !default;
+$sar-upload-file-name-padding-x: 4px !default;
+$sar-upload-file-name-font-size: $sar-text-sm !default;
+
+$sar-upload-status-color: $sar-white !default;
+$sar-upload-status-bg-color: $sar-mask-illegible !default;
+$sar-upload-status-icon-font-size: 20px !default;
+$sar-upload-status-message-margin-top: 4px !default;
+$sar-upload-status-message-padding-x: 4px !default;
+$sar-upload-status-message-font-size: $sar-text-sm !default;
+
+$sar-upload-close-top: 2px !default;
+$sar-upload-close-right: 2px !default;
+$sar-upload-close-width: 20px !default;
+$sar-upload-close-height: 20px !default;
+$sar-upload-close-font-size: $sar-text-sm !default;
+$sar-upload-close-color: $sar-white !default;
+$sar-upload-close-bg-color: $sar-mask-illegible !default;
+
+$sar-upload-select-width: 88px !default;
+$sar-upload-select-height: 88px !default;
+$sar-upload-select-font-size: 24px !default;
+$sar-upload-select-color: $sar-secondary-color !default;
+$sar-upload-select-border-radius: $sar-rounded !default;
+$sar-upload-select-bg-color: $sar-secondary-bg-color !default;
+$sar-upload-select-active-bg-color: $sar-active-deep-bg-color !default;
+
+$sar-upload-video-play-bg-color: $sar-mask-legible !default;
+$sar-upload-video-play-color: rgba(white, 0.8) !default;
+
+$sar-upload-loading-size: 20px !default;
+
+// 暗黑模式
+$sar-upload-preview-dark-bg-color: $sar-dark-secondary-bg-color !default;
+$sar-upload-file-dark-color: $sar-dark-body-color !default;
+$sar-upload-select-dark-color: $sar-dark-secondary-color !default;
+$sar-upload-select-dark-bg-color: $sar-dark-secondary-bg-color !default;
+$sar-upload-select-active-dark-bg-color: $sar-dark-active-deep-bg-color !default;
+// #endvariables
+
+@include bem(upload) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(wrapper) {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: $sar-upload-preview-gap;
+  }
+
+  @include e(preview) {
+    @include universal;
+    width: $sar-upload-preview-width;
+    height: $sar-upload-preview-height;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: $sar-upload-preview-border-radius;
+    background-color: $sar-upload-preview-bg-color;
+
+    @include m(video) {
+      background-color: $sar-upload-preview-video-bg-color;
+    }
+  }
+
+  @include e(image) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(video-wrapper) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+    @include ifweb {
+      border-radius: inherit;
+    }
+  }
+
+  @include e(video) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+    @include ifweb {
+      border-radius: inherit;
+
+      taro-video-control {
+        display: none;
+      }
+    }
+  }
+
+  @include e(video-play) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    background-color: $sar-upload-video-play-bg-color;
+  }
+
+  @include e(video-play-icon) {
+    color: $sar-upload-video-play-color;
+  }
+
+  @include e(file) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: $sar-upload-file-color;
+  }
+
+  @include e(file-icon) {
+    font-size: $sar-upload-file-icon-font-size;
+  }
+
+  @include e(file-name) {
+    @include universal;
+    max-width: 100%;
+    padding: 0 $sar-upload-file-name-padding-x;
+    margin-top: $sar-upload-file-name-margin-top;
+    font-size: $sar-upload-file-name-font-size;
+  }
+
+  @include e(status) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: $sar-upload-status-color;
+    background-color: $sar-upload-status-bg-color;
+  }
+
+  @include e(failed-icon) {
+    font-size: $sar-upload-status-icon-font-size;
+    color: $sar-upload-status-color;
+  }
+
+  @include e(loading-icon) {
+    color: $sar-upload-status-color;
+  }
+
+  @include e(status-message) {
+    @include universal;
+    max-width: 100%;
+    padding: 0 $sar-upload-status-message-padding-x;
+    margin-top: $sar-upload-status-message-margin-top;
+    font-size: $sar-upload-status-message-font-size;
+    color: $sar-upload-status-color;
+  }
+
+  @include e(remove) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 20;
+    width: auto;
+  }
+
+  @include e(close) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+    width: $sar-upload-close-width;
+    height: $sar-upload-close-height;
+    margin-right: $sar-upload-close-right;
+    margin-top: $sar-upload-close-top;
+    border-radius: $sar-rounded-full;
+    background-color: $sar-upload-close-bg-color;
+  }
+
+  @include e(close-icon) {
+    font-size: $sar-upload-close-font-size;
+    color: $sar-upload-close-color;
+  }
+
+  @include e(select) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+    width: $sar-upload-select-width;
+    height: $sar-upload-select-height;
+    color: $sar-upload-select-color;
+    border-radius: $sar-upload-select-border-radius;
+    background-color: $sar-upload-select-bg-color;
+
+    @include m(pressed) {
+      background-color: $sar-upload-select-active-bg-color;
+    }
+
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+
+  @include e(select-icon) {
+    font-size: $sar-upload-select-font-size;
+  }
+}
+
+@include theme(dark) {
+  @include bem(upload) {
+    @include e(preview) {
+      background-color: $sar-upload-preview-dark-bg-color;
+    }
+
+    @include e(file) {
+      color: $sar-upload-file-dark-color;
+    }
+
+    @include e(select) {
+      color: $sar-upload-select-dark-color;
+      background-color: $sar-upload-select-dark-bg-color;
+
+      @include m(pressed) {
+        background-color: $sar-upload-select-active-dark-bg-color;
+      }
+    }
+  }
+}

package/dist/use/index.d.ts

@@ -0,0 +1,20 @@
+export * from './useAutoplay';
+export * from './useIndexableMap';
+export * from './useResize';
+export * from './useResizeObserver';
+export * from './useSetTimeout';
+export * from './useSelectorId';
+export * from './useStopMovePropagate';
+export * from './useBrush';
+export * from './useBem';
+export * from './useSelect';
+export * from './useControllableValue';
+export * from './useEvent';
+export * from './useForceRender';
+export * from './useInertRef';
+export * from './useLayoutUpdateEffect';
+export * from './useUpdateEffect';
+export * from './usePropRef';
+export * from './useThrottle';
+export * from './useWatchStateSync';
+export * from './useUpdateWatchSync';

package/dist/use/index.js

@@ -0,0 +1,20 @@
+export * from './useAutoplay';
+export * from './useIndexableMap';
+export * from './useResize';
+export * from './useResizeObserver';
+export * from './useSetTimeout';
+export * from './useSelectorId';
+export * from './useStopMovePropagate';
+export * from './useBrush';
+export * from './useBem';
+export * from './useSelect';
+export * from './useControllableValue';
+export * from './useEvent';
+export * from './useForceRender';
+export * from './useInertRef';
+export * from './useLayoutUpdateEffect';
+export * from './useUpdateEffect';
+export * from './usePropRef';
+export * from './useThrottle';
+export * from './useWatchStateSync';
+export * from './useUpdateWatchSync';

package/dist/use/useAutoplay.d.ts

@@ -0,0 +1 @@
+export declare function useAutoplay(callback: () => void, interval: number, autoplay: boolean): [() => void, () => void];

package/dist/use/useAutoplay.js

@@ -0,0 +1,34 @@
+import { useRef, useEffect } from 'react';
+import { useEvent } from './useEvent';
+export function useAutoplay(callback, interval, autoplay) {
+    const timer = useRef(0);
+    const play = useEvent(() => {
+        stop();
+        timer.current = setInterval(() => {
+            callback();
+        }, interval);
+    });
+    const stop = useEvent(() => {
+        if (timer.current) {
+            clearInterval(timer.current);
+            timer.current = 0;
+        }
+    });
+    const autoPlay = useEvent(() => {
+        if (autoplay) {
+            play();
+        }
+    });
+    useEffect(() => {
+        if (autoplay) {
+            play();
+        }
+        else {
+            stop();
+        }
+    }, [autoplay, interval]);
+    useEffect(() => () => {
+        stop();
+    }, []);
+    return [autoPlay, stop];
+}

package/dist/use/useBem.d.ts

@@ -0,0 +1,9 @@
+type IsType = boolean | number | string | null;
+export declare function useBem(block: string | number): readonly [{
+    b(): string;
+    e(element: string | number | undefined, is?: IsType): string;
+    m(modifier: string | number | undefined, is?: IsType): string;
+    em(element: string | number, modifier: string | number | undefined, is?: IsType): string;
+    bem(block: string | number, element?: string | number, modifier?: string | number, is?: boolean | number | string | null): string;
+}];
+export {};

package/dist/use/useBem.js

@@ -0,0 +1,52 @@
+import { useContext, useMemo } from 'react';
+import { ConfigProviderContext } from '../config-provider';
+const defaultBem = {
+    namespace: 'sar',
+    blockSeparator: '-',
+    elementSeparator: '__',
+    modifierSeparator: '_',
+};
+export function useBem(block) {
+    const { bem: contextBem } = useContext(ConfigProviderContext);
+    const bem = useMemo(() => {
+        const { namespace, blockSeparator, elementSeparator, modifierSeparator } = Object.assign({}, defaultBem, contextBem);
+        const prefix = namespace + blockSeparator + block;
+        return {
+            b() {
+                return prefix;
+            },
+            e(element, is) {
+                if (arguments.length === 2 && !is) {
+                    return '';
+                }
+                return prefix + elementSeparator + element;
+            },
+            m(modifier, is) {
+                if (arguments.length === 2 && !is) {
+                    return '';
+                }
+                return prefix + modifierSeparator + modifier;
+            },
+            em(element, modifier, is) {
+                if (arguments.length === 3 && !is) {
+                    return '';
+                }
+                return (prefix + elementSeparator + element + modifierSeparator + modifier);
+            },
+            bem(block, element, modifier, is) {
+                if (arguments.length === 4 && !is) {
+                    return '';
+                }
+                let className = namespace + blockSeparator + block;
+                if (element) {
+                    className += elementSeparator + element;
+                }
+                if (modifier) {
+                    className += modifierSeparator + modifier;
+                }
+                return className;
+            },
+        };
+    }, [contextBem]);
+    return [bem];
+}

package/dist/use/useBrush.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 对触摸的坐标信息进行简单封装
+ */
+import { ITouchEvent } from '@tarojs/components';
+type Axis = '' | 'horizontal' | 'vertical';
+export interface Brush {
+    startX: number;
+    startY: number;
+    deltaX: number;
+    deltaY: number;
+    offsetX: number;
+    offsetY: number;
+    clientX: number;
+    clientY: number;
+    axis: Axis;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+    reset: () => void;
+    start: (event: ITouchEvent) => void;
+    move: (event: ITouchEvent) => void;
+}
+export declare function useBrush(): Brush;
+export {};

package/dist/use/useBrush.js

@@ -0,0 +1,61 @@
+/**
+ * 对触摸的坐标信息进行简单封装
+ */
+import { useRef } from 'react';
+function getDirection(x, y) {
+    return x > y ? 'horizontal' : 'vertical';
+}
+export function useBrush() {
+    const brush = useRef({
+        startX: 0,
+        startY: 0,
+        deltaX: 0,
+        deltaY: 0,
+        offsetX: 0,
+        offsetY: 0,
+        clientX: 0,
+        clientY: 0,
+        axis: '',
+        isVertical: () => {
+            const b = brush.current;
+            return b.axis === 'vertical';
+        },
+        isHorizontal: () => {
+            const b = brush.current;
+            return b.axis === 'horizontal';
+        },
+        reset: () => {
+            const b = brush.current;
+            b.startX = 0;
+            b.startY = 0;
+            b.deltaX = 0;
+            b.deltaY = 0;
+            b.offsetX = 0;
+            b.offsetY = 0;
+            b.clientX = 0;
+            b.clientY = 0;
+            b.axis = '';
+        },
+        start: (event) => {
+            const b = brush.current;
+            const touch = event.touches[0];
+            b.reset();
+            b.startX = touch.clientX;
+            b.startY = touch.clientY;
+        },
+        move: (event) => {
+            const b = brush.current;
+            const touch = event.touches[0];
+            b.clientX = touch.clientX;
+            b.clientY = touch.clientY;
+            b.deltaX = (touch.clientX < 0 ? 0 : touch.clientX) - b.startX;
+            b.deltaY = touch.clientY - b.startY;
+            b.offsetX = Math.abs(b.deltaX);
+            b.offsetY = Math.abs(b.deltaY);
+            if (b.axis === '') {
+                b.axis = getDirection(b.offsetX, b.offsetY);
+            }
+        },
+    });
+    return brush.current;
+}

package/dist/use/useControllableValue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 可受控的状态
+ */
+import { SetStateAction } from 'react';
+export interface UseControllableValueOptions<T> {
+    value?: T;
+    defaultValue?: T;
+    trigger?: (value: T, ...args: any[]) => void;
+    initialValue?: T | (() => T);
+    postValue?: (value: T) => T;
+}
+export declare function useControllableValue<T, R = T>(options?: UseControllableValueOptions<T>): readonly [R, (v: SetStateAction<T>, ...args: any[]) => void];

package/dist/use/useControllableValue.js

@@ -0,0 +1,59 @@
+/**
+ * 可受控的状态
+ */
+import { useRef, useMemo } from 'react';
+import { useForceRender } from './useForceRender';
+import { useEvent } from './useEvent';
+import { isFunction, isNullish, isUndefined } from '../utils';
+import { useUpdateWatchSync } from './useUpdateWatchSync';
+function getMayFnValue(value) {
+    return isFunction(value) ? value() : value;
+}
+function hasValue(value) {
+    return !isUndefined(value);
+}
+function noValue(value) {
+    return isUndefined(value);
+}
+export function useControllableValue(options = {}) {
+    const { defaultValue, value, trigger, initialValue, postValue } = options;
+    const stateRef = useRef(useMemo(() => {
+        return hasValue(value)
+            ? value
+            : hasValue(defaultValue)
+                ? defaultValue
+                : getMayFnValue(initialValue);
+    }, []));
+    // 受控
+    if (hasValue(value)) {
+        stateRef.current = value;
+    }
+    // 受控切换到非受控
+    useUpdateWatchSync(() => {
+        if (noValue(value)) {
+            stateRef.current = value;
+        }
+    }, [value]);
+    if (isNullish(stateRef.current) && !isNullish(initialValue)) {
+        stateRef.current = getMayFnValue(initialValue);
+    }
+    if (postValue) {
+        stateRef.current = postValue(stateRef.current);
+    }
+    const forceRender = useForceRender();
+    // change（同步）
+    const setState = useEvent((v, ...args) => {
+        const nextState = isFunction(v)
+            ? v(stateRef.current)
+            : v;
+        if (nextState === stateRef.current) {
+            return;
+        }
+        if (noValue(value)) {
+            stateRef.current = nextState;
+            forceRender();
+        }
+        trigger?.(nextState, ...args);
+    });
+    return [stateRef.current, setState];
+}

package/dist/use/useEvent.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 在保持函数引用不变的前提下，可以在函数里面访问最新的变量。
+ */
+export declare function useEvent<T extends Function>(callback: T): T;

package/dist/use/useEvent.js

@@ -0,0 +1,12 @@
+/**
+ * 在保持函数引用不变的前提下，可以在函数里面访问最新的变量。
+ */
+import { useRef, useCallback } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function useEvent(callback) {
+    const callbackRef = useRef();
+    callbackRef.current = callback;
+    return useCallback(((...args) => {
+        return callbackRef.current?.(...args);
+    }), []);
+}

package/dist/use/useForceRender.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 强制更新组件
+ */
+/// <reference types="react" />
+export declare function useForceRender(): import("react").DispatchWithoutAction;

package/dist/use/useForceRender.js

@@ -0,0 +1,8 @@
+/**
+ * 强制更新组件
+ */
+import { useReducer } from 'react';
+export function useForceRender() {
+    const [, forceRender] = useReducer((s) => s + 1, 0);
+    return forceRender;
+}

package/dist/use/useIndexableMap.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 实现了 Map 的部分接口，另外，还增加了与下标相关的一些方法。
+ */
+export declare class IndexableMap<K, V> {
+    data: [K, V][];
+    constructor(initialData?: [K, V][]);
+    get size(): number;
+    get(key: K): V;
+    set(key: K, value: V): void;
+    delete(key: K): void;
+    clear(): void;
+    keys(): K[];
+    values(): V[];
+    forEach(callback: (value: V, key: K, self: IndexableMap<K, V>) => void): void;
+    entries(): [K, V][];
+    getIndexByKey(key: K): number;
+    getIndexByValue(value: V): number;
+    getKeyByIndex(index: any): K;
+    getValueByIndex(index: any): V;
+}
+export declare function useIndexableMap<K, V>(initData: [K, V][]): IndexableMap<K, V>;

package/dist/use/useIndexableMap.js

@@ -0,0 +1,65 @@
+/**
+ * 实现了 Map 的部分接口，另外，还增加了与下标相关的一些方法。
+ */
+import { useMemo } from 'react';
+export class IndexableMap {
+    data;
+    constructor(initialData = []) {
+        this.data = initialData;
+    }
+    get size() {
+        return this.data.length;
+    }
+    get(key) {
+        return this.data.find((item) => item[0] === key)?.[1];
+    }
+    set(key, value) {
+        const item = this.data.find((item) => item[0] === key);
+        if (!item) {
+            this.data.push([key, value]);
+        }
+        else {
+            item[1] = value;
+        }
+    }
+    delete(key) {
+        const index = this.data.findIndex((item) => item[0] === key);
+        if (index !== -1) {
+            this.data.splice(index, 1);
+        }
+    }
+    clear() {
+        this.data.length = 0;
+    }
+    keys() {
+        return this.data.map((item) => item[0]);
+    }
+    values() {
+        return this.data.map((item) => item[1]);
+    }
+    forEach(callback) {
+        this.data.forEach((item) => {
+            callback(item[1], item[0], this);
+        });
+    }
+    entries() {
+        return this.data;
+    }
+    getIndexByKey(key) {
+        return this.data.findIndex((item) => item[0] === key);
+    }
+    getIndexByValue(value) {
+        return this.data.findIndex((item) => item[1] === value);
+    }
+    getKeyByIndex(index) {
+        return this.data[index]?.[0];
+    }
+    getValueByIndex(index) {
+        return this.data[index]?.[1];
+    }
+}
+export function useIndexableMap(initData) {
+    return useMemo(() => {
+        return new IndexableMap(initData);
+    }, []);
+}

package/dist/use/useInertRef.d.ts

@@ -0,0 +1,7 @@
+/**
+ * useRef 的惰性初始化版本，
+ * 接受一个函数，在函数中计算并返回初始的 MutableRefObject，
+ * 此函数只在初始渲染时被调用。
+ */
+/// <reference types="react" />
+export declare function useInertRef<T>(callback: () => T): import("react").MutableRefObject<T>;