sard 1.0.0-canary.0

package/dist/components.d.ts

@@ -0,0 +1,66 @@
+export * from './accordion';
+export * from './avatar';
+export * from './action-sheet';
+export * from './badge';
+export * from './button';
+export * from './calendar';
+export * from './card';
+export * from './cascader';
+export * from './footer-bar';
+export * from './list';
+export * from './checkbox';
+export * from './config-provider';
+export * from './grid';
+export * from './collapse';
+export * from './count-down';
+export * from './datetime-picker';
+export * from './dialog';
+export * from './dropdown';
+export * from './empty';
+export * from './form';
+export * from './halfline';
+export * from './icon';
+export * from './index-bar';
+export * from './input';
+export * from './stepper';
+export * from './linear-gradient';
+export * from './loading';
+export * from './locale';
+export * from './menu';
+export * from './mesh';
+export * from './modal';
+export * from './navbar';
+export * from './notice-bar';
+export * from './notify';
+export * from './number-keyboard';
+export * from './pagination';
+export * from './password-input';
+export * from './picker';
+export * from './popout';
+export * from './popout-input';
+export * from './popover';
+export * from './popup';
+export * from './pressable';
+export * from './progress-bar';
+export * from './progress-circle';
+export * from './radio';
+export * from './rate';
+export * from './result';
+export * from './safe-area';
+export * from './search';
+export * from './share-sheet';
+export * from './skeleton';
+export * from './slider';
+export * from './space';
+export * from './steps';
+export * from './style';
+export * from './swiper';
+export * from './switch';
+export * from './tabbar';
+export * from './tabs';
+export * from './tag';
+export * from './toast';
+export * from './transition';
+export * from './transition/CSSTransition';
+export * from './template';
+export * from './upload';

package/dist/components.js

@@ -0,0 +1,66 @@
+export * from './accordion';
+export * from './avatar';
+export * from './action-sheet';
+export * from './badge';
+export * from './button';
+export * from './calendar';
+export * from './card';
+export * from './cascader';
+export * from './footer-bar';
+export * from './list';
+export * from './checkbox';
+export * from './config-provider';
+export * from './grid';
+export * from './collapse';
+export * from './count-down';
+export * from './datetime-picker';
+export * from './dialog';
+export * from './dropdown';
+export * from './empty';
+export * from './form';
+export * from './halfline';
+export * from './icon';
+export * from './index-bar';
+export * from './input';
+export * from './stepper';
+export * from './linear-gradient';
+export * from './loading';
+export * from './locale';
+export * from './menu';
+export * from './mesh';
+export * from './modal';
+export * from './navbar';
+export * from './notice-bar';
+export * from './notify';
+export * from './number-keyboard';
+export * from './pagination';
+export * from './password-input';
+export * from './picker';
+export * from './popout';
+export * from './popout-input';
+export * from './popover';
+export * from './popup';
+export * from './pressable';
+export * from './progress-bar';
+export * from './progress-circle';
+export * from './radio';
+export * from './rate';
+export * from './result';
+export * from './safe-area';
+export * from './search';
+export * from './share-sheet';
+export * from './skeleton';
+export * from './slider';
+export * from './space';
+export * from './steps';
+export * from './style';
+export * from './swiper';
+export * from './switch';
+export * from './tabbar';
+export * from './tabs';
+export * from './tag';
+export * from './toast';
+export * from './transition';
+export * from './transition/CSSTransition';
+export * from './template';
+export * from './upload';

package/dist/components.scss

@@ -0,0 +1,65 @@
+// 1. 无依赖
+@import './badge/index.scss';
+@import './calendar/index.scss';
+@import './ellipsis/index.scss';
+@import './grid/index.scss';
+@import './halfline/index.scss';
+@import './icon/index.scss';
+@import './loading/index.scss';
+@import './pagination/index.scss';
+@import './progress-bar/index.scss';
+@import './progress-circle/index.scss';
+@import './safe-area/index.scss';
+@import './skeleton/index.scss';
+@import './slider/index.scss';
+@import './space/index.scss';
+@import './swiper/index.scss';
+@import './tabs/index.scss';
+@import './transition/index.scss';
+
+// 2. 只依赖1
+@import './accordion/index.scss';
+@import './avatar/index.scss';
+@import './button/index.scss';
+@import './card/index.scss';
+@import './checkbox/index.scss';
+@import './collapse/index.scss';
+@import './empty/index.scss';
+@import './footer-bar/index.scss';
+@import './form/index.scss';
+@import './index-bar/index.scss';
+@import './input/index.scss';
+@import './list/index.scss';
+@import './mask/index.scss';
+@import './menu/index.scss';
+@import './mesh/index.scss';
+@import './navbar/index.scss';
+@import './notice-bar/index.scss';
+@import './number-keyboard/index.scss';
+@import './password-input/index.scss';
+@import './picker/index.scss';
+@import './popup/index.scss';
+@import './radio/index.scss';
+@import './rate/index.scss';
+@import './result/index.scss';
+@import './steps/index.scss';
+@import './switch/index.scss';
+@import './tabbar/index.scss';
+@import './tag/index.scss';
+@import './upload/index.scss';
+
+// 3. 依赖1或2、有被依赖
+@import './popout/index.scss';
+
+// 4. 无被依赖
+@import './action-sheet/index.scss';
+@import './cascader/index.scss';
+@import './dialog/index.scss';
+@import './dropdown/index.scss';
+@import './notify/index.scss';
+@import './popout-input/index.scss';
+@import './popover/index.scss';
+@import './search/index.scss';
+@import './share-sheet/index.scss';
+@import './stepper/index.scss';
+@import './toast/index.scss';

package/dist/config-provider/index.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+export interface Bem {
+    namespace?: string;
+    blockSeparator?: string;
+    elementSeparator?: string;
+    modifierSeparator?: string;
+}
+export interface ConfigProviderContextValue {
+    theme: string;
+    lang: string;
+    bem?: Bem;
+}
+export declare const ConfigProviderContext: import("react").Context<ConfigProviderContextValue>;
+export interface ConfigProviderProps {
+    children?: ReactNode;
+    theme?: string;
+    lang?: string;
+    bem?: Bem;
+}
+export declare const ConfigProvider: FC<ConfigProviderProps>;
+export default ConfigProvider;

package/dist/config-provider/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useMemo } from 'react';
+import { Locale } from '../locale';
+export const ConfigProviderContext = createContext({
+    theme: 'light',
+    lang: 'zh-CN',
+    bem: {},
+});
+export const ConfigProvider = (props) => {
+    const { children, theme = 'light', lang = 'zh-CN', bem } = props;
+    const context = useMemo(() => {
+        return {
+            theme,
+            lang,
+            bem,
+        };
+    }, [theme, lang, bem]);
+    return (_jsx(ConfigProviderContext.Provider, { value: context, children: _jsx(Locale, { children: children }) }));
+};
+export default ConfigProvider;

package/dist/count-down/index.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../base';
+export interface CountDownRef {
+    start: () => void;
+    pause: () => void;
+    reset: () => void;
+}
+export interface CountDownCurrentTime {
+    milliseconds: number;
+    seconds: number;
+    minutes: number;
+    hours: number;
+    days: number;
+    total: number;
+}
+export interface CountDownProps extends Omit<BaseProps, 'children'> {
+    children?: (time: CountDownCurrentTime) => ReactNode;
+    time?: number;
+    autoStart?: boolean;
+    format?: string;
+    interval?: number;
+    onChange?: (time: CountDownCurrentTime) => void;
+    onFinish?: () => void;
+}
+export declare const CountDown: import("react").ForwardRefExoticComponent<CountDownProps & import("react").RefAttributes<CountDownRef>>;
+export default CountDown;

package/dist/count-down/index.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
+import classNames from 'classnames';
+import { Text } from '@tarojs/components';
+import { useBem, useEvent, useForceRender } from '../use';
+function padZero(n, length = 2) {
+    return String(n).padStart(length, '0');
+}
+function getCurrentTime(remainTime) {
+    return {
+        milliseconds: remainTime % 1000,
+        seconds: ~~(remainTime / 1000) % 60,
+        minutes: ~~(remainTime / 1000 / 60) % 60,
+        hours: ~~(remainTime / 1000 / 60 / 60) % 60,
+        days: ~~(remainTime / 1000 / 60 / 60 / 24),
+        total: remainTime,
+    };
+}
+function formatTime(format, currentTime) {
+    return format
+        .replace(/DD/g, padZero(currentTime.days))
+        .replace(/HH/g, padZero(currentTime.hours))
+        .replace(/mm/g, padZero(currentTime.minutes))
+        .replace(/ss/g, padZero(currentTime.seconds))
+        .replace(/s/g, String(currentTime.seconds))
+        .replace(/SSS/g, padZero(currentTime.milliseconds, 3))
+        .replace(/SS/g, padZero(currentTime.milliseconds, 3).slice(0, 2))
+        .replace(/S/g, padZero(currentTime.milliseconds, 3).slice(0, 1));
+}
+export const CountDown = forwardRef((props, ref) => {
+    const { className, style, children, time = 0, autoStart = true, onChange, onFinish, interval = 1000, format = 'HH:mm:ss', ...restProps } = props;
+    const [bem] = useBem('count-down');
+    const forceRender = useForceRender();
+    const remainTime = useRef(time);
+    const endTime = useRef(0);
+    const timer = useRef();
+    const paused = useRef(true);
+    const intervalTime = useRef(0);
+    const tickHook = (now) => {
+        const time = Math.floor(now / interval);
+        if (time !== intervalTime.current) {
+            intervalTime.current = time;
+            onChange?.(getCurrentTime(remainTime.current));
+            forceRender();
+        }
+    };
+    const tick = () => {
+        const now = Date.now();
+        remainTime.current = Math.max(endTime.current - now, 0);
+        tickHook(now);
+        if (remainTime.current === 0) {
+            pause();
+            onFinish?.();
+            return;
+        }
+        timer.current = setTimeout(() => {
+            tick();
+        }, 16);
+    };
+    const start = useEvent(() => {
+        if (!paused.current) {
+            return;
+        }
+        paused.current = false;
+        endTime.current = Date.now() + remainTime.current;
+        tick();
+    });
+    const pause = useEvent(() => {
+        if (paused.current) {
+            return;
+        }
+        clearTimeout(timer.current);
+        timer.current = undefined;
+        paused.current = true;
+    });
+    const reset = useEvent(() => {
+        pause();
+        remainTime.current = time;
+        forceRender();
+    });
+    useImperativeHandle(ref, () => ({
+        start,
+        pause,
+        reset,
+    }), []);
+    useEffect(() => {
+        if (autoStart) {
+            start();
+        }
+        return pause;
+    }, []);
+    const currentTime = useMemo(() => getCurrentTime(remainTime.current), [remainTime.current]);
+    return (_jsx(Text, { ...restProps, className: classNames(bem.b(), className), style: style, children: children ? children(currentTime) : formatTime(format, currentTime) }));
+});
+export default CountDown;

package/dist/datetime-picker/index.d.ts

@@ -0,0 +1,36 @@
+import { ForwardRefExoticComponent, RefAttributes, PropsWithoutRef, ReactNode } from 'react';
+import { BaseProps } from '../base';
+import { PopoutProps } from '../popout';
+export type DatetimeLetter = 'y' | 'M' | 'd' | 'h' | 'm' | 's';
+export interface DatetimeColumnOption {
+    value: number;
+    label?: ReactNode;
+    zerofill?: string;
+    [key: PropertyKey]: any;
+}
+export type DatetimePickerRef = {
+    getValueForcibly: () => Date;
+};
+export type DateEvery = [number, number, number, number, number, number];
+export interface DatetimePickerProps extends BaseProps {
+    type?: string;
+    min?: Date;
+    max?: Date;
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (value: Date) => void;
+    filter?: (letter: DatetimeLetter, value: number, date: Date, index: number) => boolean;
+    formatter?: (letter: DatetimeLetter, option: DatetimeColumnOption, date: Date, index: number) => ReactNode;
+    withPopout?: boolean;
+    popoutProps?: PopoutProps;
+    outletFormatter?: (type: string, date?: Date) => string;
+}
+export interface DatetimePickerFC extends ForwardRefExoticComponent<PropsWithoutRef<DatetimePickerProps> & RefAttributes<DatetimePickerRef>> {
+    alwaysHasValue: boolean;
+    outletFormatter: typeof outletFormatter;
+    defaultOutletFormatter: typeof defaultOutletFormatter;
+}
+declare function defaultOutletFormatter(type: string, date?: Date): string;
+declare function outletFormatter(props: DatetimePickerProps, value?: Date): string;
+export declare const DatetimePicker: DatetimePickerFC;
+export default DatetimePicker;

package/dist/datetime-picker/index.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, forwardRef, useImperativeHandle, } from 'react';
+import { CustomWrapper } from '@tarojs/components';
+import { Picker } from '../picker';
+import { useEvent, useControllableValue, useLayoutUpdateEffect } from '../use';
+import { formatDate, getDaysInMonth, minmax } from '../utils';
+import useTranslate from '../locale/useTranslate';
+import Popout from '../popout';
+const getMinDate = () => {
+    return new Date(new Date().getFullYear() - 10, 0, 1, 0, 0, 0);
+};
+const getMaxDate = () => {
+    return new Date(new Date().getFullYear() + 10, 11, 31, 23, 59, 59);
+};
+const strategies = {
+    y: [0, 4, 0, 0, (d) => d.getFullYear(), (d, val) => d.setFullYear(val)],
+    M: [1, 2, 1, 12, (d) => d.getMonth() + 1, (d, val) => d.setMonth(val - 1)],
+    d: [2, 2, 1, 31, (d) => d.getDate(), (d, val) => d.setDate(val)],
+    h: [3, 2, 0, 23, (d) => d.getHours(), (d, val) => d.setHours(val)],
+    m: [4, 2, 0, 59, (d) => d.getMinutes(), (d, val) => d.setMinutes(val)],
+    s: [5, 2, 0, 59, (d) => d.getSeconds(), (d, val) => d.setSeconds(val)],
+};
+const letterArray = ['y', 'M', 'd', 'h', 'm', 's'];
+function getBoundaryValue(isMax, endDate, currentDate) {
+    const currEvery = [endDate.getFullYear()];
+    const minOrMaxIndex = isMax ? 3 : 2;
+    let aside = true;
+    let prevGetter = strategies.y[4];
+    letterArray.slice(1).forEach((letter, index) => {
+        const strategy = strategies[letter];
+        let minOrMax = strategy[minOrMaxIndex];
+        if (isMax && letter === 'd') {
+            minOrMax = getDaysInMonth(currentDate.getFullYear(), currentDate.getMonth());
+        }
+        aside = aside && currEvery[index] === prevGetter(currentDate);
+        currEvery[index + 1] = aside ? strategy[4](endDate) : minOrMax;
+        prevGetter = strategy[4];
+    });
+    return currEvery;
+}
+function correctDate(date, minDate, maxDate) {
+    let minAside = true;
+    let maxAside = true;
+    let prevGetter = strategies.y[4];
+    letterArray.slice(1).forEach((letter, index) => {
+        const strategy = strategies[letter];
+        let minValue = strategy[2];
+        let maxValue = strategy[3];
+        if (letter === 'd') {
+            maxValue = getDaysInMonth(date[0], date[1] - 1);
+        }
+        const currGetter = strategy[4];
+        if ((minAside = minAside && prevGetter(minDate) === date[index])) {
+            minValue = currGetter(minDate);
+        }
+        if ((maxAside = maxAside && prevGetter(maxDate) === date[index])) {
+            maxValue = currGetter(maxDate);
+        }
+        date[index + 1] = minmax(date[index + 1], minValue, maxValue);
+        prevGetter = currGetter;
+    });
+}
+const getColumnData = (count, start, length, letter, currentDate, translate, filter, formatter) => {
+    let column = Array(count)
+        .fill(0)
+        .map((_, i) => ({
+        value: i + start,
+    }));
+    if (filter) {
+        column = column.filter((option, i) => filter(letter, option.value, currentDate, i));
+    }
+    column.forEach((option) => {
+        option.zerofill = String(option.value).padStart(length, '0');
+        option.label = option.zerofill + translate(letter);
+    });
+    if (formatter) {
+        column.forEach((option, i) => {
+            option.label = formatter(letter, option, currentDate, i);
+        });
+    }
+    return column;
+};
+const mapLetterFullname = {
+    y: 'YYYY',
+    M: 'MM',
+    d: 'DD',
+    h: 'HH',
+    m: 'mm',
+    s: 'ss',
+};
+function defaultOutletFormatter(type, date) {
+    if (!date) {
+        return '';
+    }
+    const letters = type.split('');
+    const dateLetter = [];
+    const timeLetter = [];
+    'yMd'.split('').forEach((letter) => {
+        if (letters.includes(letter)) {
+            dateLetter.push(letter);
+        }
+    });
+    'hms'.split('').forEach((letter) => {
+        if (letters.includes(letter)) {
+            timeLetter.push(letter);
+        }
+    });
+    const dateTemplate = dateLetter
+        .map((letter) => mapLetterFullname[letter])
+        .join('-');
+    const timeTemplate = timeLetter
+        .map((letter) => mapLetterFullname[letter])
+        .join(':');
+    return formatDate(date, [dateTemplate, timeTemplate].filter(Boolean).join(' '));
+}
+function outletFormatter(props, value) {
+    const formatter = props.outletFormatter ?? DatetimePicker.defaultOutletFormatter;
+    return formatter(props.type || 'yMd', value);
+}
+export const DatetimePicker = forwardRef((props, ref) => {
+    const { t } = useTranslate('datetimePicker');
+    const { type = 'yMd', min, max, value, defaultValue, onChange, filter, formatter, withPopout, popoutProps, outletFormatter, ...restProps } = props;
+    void outletFormatter;
+    const innerType = useMemo(() => {
+        return type.split('');
+    }, [type]);
+    const minDate = useMemo(() => min || getMinDate(), [min]);
+    const maxDate = useMemo(() => {
+        const maxDate = max || getMaxDate();
+        return maxDate < minDate ? new Date(minDate) : maxDate;
+    }, [max]);
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: () => new Date(),
+        postValue: (value) => {
+            value = value ?? new Date();
+            return value.getTime() < minDate.getTime()
+                ? minDate
+                : value.getTime() > maxDate.getTime()
+                    ? maxDate
+                    : value;
+        },
+    });
+    const pickerValue = useMemo(() => {
+        return innerType.map((letter) => {
+            return strategies[letter][4](innerValue);
+        });
+    }, [innerValue, innerType]);
+    const pickerRef = useRef(null);
+    const columnsMap = useRef({});
+    const minValuesRef = useRef([]);
+    const maxValuesRef = useRef([]);
+    const createColumnData = (types, currentDate) => {
+        minValuesRef.current = getBoundaryValue(false, minDate, currentDate);
+        maxValuesRef.current = getBoundaryValue(true, maxDate, currentDate);
+        const getColumnDataByType = (letter) => {
+            const strategy = strategies[letter];
+            const index = strategy[0];
+            return getColumnData(maxValuesRef.current[index] - minValuesRef.current[index] + 1, minValuesRef.current[index], strategy[1], letter, currentDate, t, filter, formatter);
+        };
+        return types.map((letter) => (columnsMap.current[letter] = getColumnDataByType(letter)));
+    };
+    const [columns, setColumns] = useState(() => createColumnData(innerType, innerValue));
+    const getChangedLetter = (currentDate) => {
+        const minValues = getBoundaryValue(false, minDate, currentDate);
+        const maxValues = getBoundaryValue(true, maxDate, currentDate);
+        return letterArray.filter((_, i) => minValues[i] !== minValuesRef.current[i] ||
+            maxValues[i] !== maxValuesRef.current[i]);
+    };
+    const updateColumns = useEvent((currentDate) => {
+        const changedLetter = getChangedLetter(currentDate);
+        if (changedLetter.length) {
+            const changedColumns = createColumnData(changedLetter, currentDate);
+            const columns = innerType.map((letter) => {
+                for (let i = 0, l = changedLetter.length; i < l; i++) {
+                    if (changedLetter[i] === letter) {
+                        return changedColumns[i];
+                    }
+                }
+                return columnsMap.current[letter];
+            });
+            setColumns(columns);
+        }
+    });
+    const getDateByPickerValue = useEvent((value) => {
+        const currEvery = letterArray.map((letter) => {
+            const stratery = strategies[letter];
+            for (let i = 0, l = innerType.length; i < l; i++) {
+                if (innerType[i] === letter) {
+                    return value[i];
+                }
+            }
+            return stratery[4](innerValue);
+        });
+        correctDate(currEvery, minDate, maxDate);
+        currEvery[1]--;
+        const date = new Date(...currEvery);
+        updateColumns(date);
+        return date;
+    });
+    const handleChange = useEvent((value) => {
+        const nextDate = getDateByPickerValue(value);
+        setInnerValue(nextDate);
+    });
+    useLayoutUpdateEffect(() => {
+        if (value !== undefined) {
+            updateColumns(innerValue);
+        }
+    }, [value]);
+    const getValueForcibly = useEvent(() => {
+        const value = pickerRef.current.getValueForcibly();
+        return getDateByPickerValue(value);
+    });
+    useImperativeHandle(ref, () => ({
+        getValueForcibly,
+    }), []);
+    const renderElement = () => {
+        return (_jsx(CustomWrapper, { children: _jsx(Picker, { ...restProps, columns: columns, value: pickerValue, onChange: handleChange, ref: pickerRef }) }));
+    };
+    if (withPopout) {
+        return _jsx(Popout, { ...popoutProps, children: renderElement() });
+    }
+    return renderElement();
+});
+DatetimePicker.alwaysHasValue = true;
+DatetimePicker.outletFormatter = outletFormatter;
+DatetimePicker.defaultOutletFormatter = defaultOutletFormatter;
+export default DatetimePicker;

package/dist/dialog/Agent.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DialogProps, DialogRef } from './Dialog';
+import { AgentProps, MapIdAgent } from '../utils/imperative';
+export declare const mapIdAgent: MapIdAgent<DialogProps, DialogRef>;
+export declare const DialogAgent: (agentProps: AgentProps<DialogProps>) => import("react").CElement<any, import("react").Component<any, any, any>>;
+export default DialogAgent;

package/dist/dialog/Agent.js

@@ -0,0 +1,7 @@
+import { Dialog } from './Dialog';
+import { useAgent } from '../utils/imperative';
+export const mapIdAgent = {};
+export const DialogAgent = (agentProps) => {
+    return useAgent(Dialog, agentProps, mapIdAgent, 'dialog');
+};
+export default DialogAgent;

package/dist/dialog/Dialog.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { PopupProps } from '../popup';
+import { ButtonProps } from '../button';
+export type DialogCloseType = 'close' | 'cancel' | 'confirm';
+type DialogButtonType = 'round' | 'text';
+export interface DialogProps extends PopupProps {
+    title?: ReactNode;
+    message?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    headed?: boolean;
+    buttonType?: DialogButtonType;
+    showCancel?: boolean;
+    cancelText?: ReactNode;
+    cancelProps?: ButtonProps;
+    showConfirm?: boolean;
+    confirmText?: ReactNode;
+    confirmProps?: ButtonProps;
+    maskClosable?: boolean;
+    onClose?: () => void | Promise<any>;
+    onCancel?: () => void | Promise<any>;
+    onConfirm?: () => void | Promise<any>;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+}
+export interface DialogRef {
+}
+export type DialogFC = ForwardRefExoticComponent<PropsWithoutRef<DialogProps> & RefAttributes<DialogRef>>;
+export declare const Dialog: DialogFC;
+export default Dialog;