@nutui/nutui-react-taro 1.5.2 → 1.5.3-beta.1

package/dist/esm/countdown.taro-5b17c607.js

@@ -0,0 +1,226 @@
+import React__default, { useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { c as cn } from './bem-350c1702.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+
+const defaultProps = {
+    paused: false,
+    startTime: Date.now(),
+    endTime: Date.now(),
+    millisecond: false,
+    format: 'HH:mm:ss',
+    autoStart: true,
+    time: 0,
+    destroy: false,
+};
+const InternalCountDown = (props, ref) => {
+    useConfig();
+    const { paused, startTime, endTime, millisecond, format, autoStart, time, destroy, className, style, onEnd, onPaused, onRestart, onUpdate, children, ...rest } = { ...defaultProps, ...props };
+    const b = cn('countdown');
+    const [restTimeStamp, setRestTime] = useState(0);
+    const stateRef = useRef({
+        pauseTime: 0,
+        curr: 0,
+        isPaused: paused,
+        isIninted: false,
+        timer: 0,
+        restTime: 0,
+        counting: !paused && autoStart,
+        handleEndTime: Date.now(),
+        diffTime: 0, // 设置了 startTime 时，与 date.now() 的差异
+    });
+    // 时间戳转换 或 获取当前时间的时间戳
+    const getTimeStamp = (timeStr) => {
+        if (!timeStr)
+            return Date.now();
+        let t = timeStr;
+        t = t > 0 ? +t : t.toString().replace(/-/g, '/');
+        return new Date(t).getTime();
+    };
+    // 倒计时 interval
+    const initTime = () => {
+        stateRef.current.handleEndTime = endTime;
+        stateRef.current.diffTime = Date.now() - getTimeStamp(startTime); // 时间差
+        if (!stateRef.current.counting)
+            stateRef.current.counting = true;
+        tick();
+    };
+    const tick = () => {
+        stateRef.current.timer = requestAnimationFrame(() => {
+            if (stateRef.current.counting) {
+                const currentTime = Date.now() - stateRef.current.diffTime;
+                const remainTime = Math.max(stateRef.current.handleEndTime - currentTime, 0);
+                stateRef.current.restTime = remainTime;
+                setRestTime(remainTime);
+                if (!remainTime) {
+                    stateRef.current.counting = false;
+                    pause();
+                    onEnd && onEnd();
+                }
+                if (remainTime > 0) {
+                    tick();
+                }
+            }
+        });
+    };
+    // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
+    const formatRemainTime = (t, type) => {
+        const ts = t;
+        const rest = {
+            d: 0,
+            h: 0,
+            m: 0,
+            s: 0,
+            ms: 0,
+        };
+        const SECOND = 1000;
+        const MINUTE = 60 * SECOND;
+        const HOUR = 60 * MINUTE;
+        const DAY = 24 * HOUR;
+        if (ts > 0) {
+            rest.d = ts >= SECOND ? Math.floor(ts / DAY) : 0;
+            rest.h = Math.floor((ts % DAY) / HOUR);
+            rest.m = Math.floor((ts % HOUR) / MINUTE);
+            rest.s = Math.floor((ts % MINUTE) / SECOND);
+            rest.ms = Math.floor(ts % SECOND);
+        }
+        return type === 'custom' ? rest : parseFormat({ ...rest });
+    };
+    const parseFormat = (time) => {
+        const { d } = time;
+        let { h, m, s, ms } = time;
+        let formatCache = format;
+        if (formatCache.includes('DD')) {
+            formatCache = formatCache.replace('DD', padZero(d));
+        }
+        else {
+            h += Number(d) * 24;
+        }
+        if (formatCache.includes('HH')) {
+            formatCache = formatCache.replace('HH', padZero(h));
+        }
+        else {
+            m += Number(h) * 60;
+        }
+        if (formatCache.includes('mm')) {
+            formatCache = formatCache.replace('mm', padZero(m));
+        }
+        else {
+            s += Number(m) * 60;
+        }
+        if (formatCache.includes('ss')) {
+            formatCache = formatCache.replace('ss', padZero(s));
+        }
+        else {
+            ms += Number(s) * 1000;
+        }
+        if (formatCache.includes('S')) {
+            const msC = padZero(ms, 3).toString();
+            if (formatCache.includes('SSS')) {
+                formatCache = formatCache.replace('SSS', msC);
+            }
+            else if (formatCache.includes('SS')) {
+                formatCache = formatCache.replace('SS', msC.slice(0, 2));
+            }
+            else if (formatCache.includes('S')) {
+                formatCache = formatCache.replace('SS', msC.slice(0, 1));
+            }
+        }
+        return formatCache;
+    };
+    const padZero = (num, length = 2) => {
+        num += '';
+        while (num.length < length) {
+            num = `0${num}`;
+        }
+        return num.toString();
+    };
+    // 暂定
+    const pause = () => {
+        cancelAnimationFrame(stateRef.current.timer);
+        stateRef.current.counting = false;
+        onPaused && onPaused(stateRef.current.restTime);
+    };
+    useImperativeHandle(ref, () => ({
+        start: () => {
+            if (!stateRef.current.counting && !autoStart) {
+                stateRef.current.counting = true;
+                stateRef.current.handleEndTime =
+                    Date.now() + Number(stateRef.current.restTime);
+                tick();
+                onRestart && onRestart(stateRef.current.restTime);
+            }
+        },
+        pause: () => {
+            cancelAnimationFrame(stateRef.current.timer);
+            stateRef.current.counting = false;
+            onPaused && onPaused(stateRef.current.restTime);
+        },
+        reset: () => {
+            if (!autoStart) {
+                pause();
+                stateRef.current.restTime = time;
+                setRestTime(time);
+            }
+        },
+    }));
+    // 监听值变更
+    useEffect(() => {
+        const tranTime = formatRemainTime(stateRef.current.restTime, 'custom');
+        onUpdate && onUpdate(tranTime);
+    }, [restTimeStamp]);
+    // 监听暂停
+    useEffect(() => {
+        if (stateRef.current.isIninted) {
+            if (paused) {
+                if (stateRef.current.counting) {
+                    pause();
+                }
+            }
+            else {
+                if (!stateRef.current.counting) {
+                    stateRef.current.counting = true;
+                    stateRef.current.handleEndTime =
+                        Date.now() + Number(stateRef.current.restTime);
+                    tick();
+                }
+                onRestart && onRestart(stateRef.current.restTime);
+            }
+        }
+    }, [paused]);
+    // 监听开始结束时间变更
+    useEffect(() => {
+        if (stateRef.current.isIninted) {
+            initTime();
+        }
+    }, [endTime, startTime]);
+    // 初始化
+    useEffect(() => {
+        if (autoStart) {
+            initTime();
+        }
+        else {
+            stateRef.current.restTime = time;
+            setRestTime(time);
+        }
+        if (!stateRef.current.isIninted) {
+            stateRef.current.isIninted = true;
+        }
+        return componentWillUnmount;
+    }, []);
+    const componentWillUnmount = () => {
+        destroy && cancelAnimationFrame(stateRef.current.timer);
+    };
+    const renderTime = (() => {
+        return formatRemainTime(stateRef.current.restTime);
+    })();
+    return (React__default.createElement("div", { className: `${b()} ${className || ''}`, style: { ...style }, ...rest }, children || (React__default.createElement("div", { className: b('block'), 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+            __html: `${renderTime}`,
+        } }))));
+};
+const CountDown = React__default.forwardRef(InternalCountDown);
+CountDown.defaultProps = defaultProps;
+CountDown.displayName = 'NutCountDown';
+
+export { CountDown as C };

package/dist/esm/datepicker.taro-477ad357.js

@@ -0,0 +1,275 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { P as Picker } from './picker.taro-0073eeaa.js';
+import { u as useConfig } from './configprovider-67d19d3a.js';
+import { View } from '@tarojs/components';
+
+const currentYear = new Date().getFullYear();
+const defaultProps = {
+    modelValue: null,
+    visible: false,
+    title: '',
+    type: 'date',
+    isShowChinese: false,
+    threeDimensional: true,
+    minuteStep: 1,
+    minDate: new Date(currentYear - 10, 0, 1),
+    maxDate: new Date(currentYear + 10, 11, 31),
+};
+const DatePicker = (props) => {
+    const { minDate, maxDate, type, isShowChinese, minuteStep, modelValue, visible, title, formatter, onCloseDatePicker, onConfirmDatePicker, filter, onChange, threeDimensional, className, style, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const { locale } = useConfig();
+    const [show, setShow] = useState(false);
+    const [currentDate, setCurrentDate] = useState(modelValue);
+    const [defaultValue, setDefaultValue] = useState([]);
+    const [listData, setListData] = useState([]);
+    const pickerRef = useRef(null);
+    const isDate = (val) => {
+        return (Object.prototype.toString.call(val) === '[object Date]' &&
+            !Number.isNaN(val.getTime()));
+    };
+    const datepickerLang = locale.datepicker;
+    const zhCNType = {
+        day: datepickerLang.day,
+        year: datepickerLang.year,
+        month: datepickerLang.month,
+        hour: datepickerLang.hour,
+        minute: datepickerLang.min,
+        seconds: datepickerLang.seconds,
+    };
+    const formatValue = (value) => {
+        let cvalue = value;
+        if (!cvalue || (cvalue && !isDate(cvalue))) {
+            cvalue = minDate;
+        }
+        let timestmp = Math.max(cvalue.getTime(), minDate.getTime());
+        timestmp = Math.min(timestmp, maxDate.getTime());
+        return new Date(timestmp);
+    };
+    function getMonthEndDay(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+    const getBoundary = (type, value) => {
+        const boundary = type === 'min' ? minDate : maxDate;
+        const year = boundary.getFullYear();
+        let month = 1;
+        let date = 1;
+        let hour = 0;
+        let minute = 0;
+        if (type === 'max') {
+            month = 12;
+            date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+            hour = 23;
+            minute = 59;
+        }
+        const seconds = minute;
+        if (value.getFullYear() === year) {
+            month = boundary.getMonth() + 1;
+            if (value.getMonth() + 1 === month) {
+                date = boundary.getDate();
+                if (value.getDate() === date) {
+                    hour = boundary.getHours();
+                    if (value.getHours() === hour) {
+                        minute = boundary.getMinutes();
+                    }
+                }
+            }
+        }
+        return {
+            [`${type}Year`]: year,
+            [`${type}Month`]: month,
+            [`${type}Date`]: date,
+            [`${type}Hour`]: hour,
+            [`${type}Minute`]: minute,
+            [`${type}Seconds`]: seconds,
+        };
+    };
+    const ranges = (date) => {
+        const curDate = date || currentDate;
+        if (!curDate)
+            return [];
+        const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary('max', curDate);
+        const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = getBoundary('min', curDate);
+        let result = [
+            {
+                type: 'year',
+                range: [minYear, maxYear],
+            },
+            {
+                type: 'month',
+                range: [minMonth, maxMonth],
+            },
+            {
+                type: 'day',
+                range: [minDate, maxDate],
+            },
+            {
+                type: 'hour',
+                range: [minHour, maxHour],
+            },
+            {
+                type: 'minute',
+                range: [minMinute, maxMinute],
+            },
+            {
+                type: 'seconds',
+                range: [minSeconds, maxSeconds],
+            },
+        ];
+        switch (type.toLocaleLowerCase()) {
+            case 'date':
+                result = result.slice(0, 3);
+                break;
+            case 'datetime':
+                result = result.slice(0, 5);
+                break;
+            case 'time':
+                result = result.slice(3, 6);
+                break;
+            case 'year-month':
+                result = result.slice(0, 2);
+                break;
+            case 'hour-minutes':
+                result = result.slice(3, 5);
+                break;
+            case 'month-day':
+                result = result.slice(1, 3);
+                break;
+            case 'datehour':
+                result = result.slice(0, 4);
+                break;
+        }
+        return result;
+    };
+    const updateChooseValueCustmer = (index, selectedValue, cacheValueData) => {
+        if (['date', 'datetime', 'datehour', 'month-day', 'year-month'].includes(type.toLocaleLowerCase())) {
+            const formatDate = [];
+            selectedValue.forEach((item) => {
+                formatDate.push(item);
+            });
+            if (type.toLocaleLowerCase() === 'month-day' && formatDate.length < 3) {
+                formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
+            }
+            if (type.toLocaleLowerCase() === 'year-month' && formatDate.length < 3) {
+                formatDate.push(new Date(modelValue || minDate || maxDate).getDate());
+            }
+            const year = Number(formatDate[0]);
+            const month = Number(formatDate[1]) - 1;
+            const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+            let date = null;
+            if (type.toLocaleLowerCase() === 'date' ||
+                type.toLocaleLowerCase() === 'month-day' ||
+                type.toLocaleLowerCase() === 'year-month') {
+                date = new Date(year, month, day);
+            }
+            else if (type.toLocaleLowerCase() === 'datetime') {
+                date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+            }
+            else if (type.toLocaleLowerCase() === 'datehour') {
+                date = new Date(year, month, day, Number(formatDate[3]));
+            }
+            const isEqual = currentDate?.getTime() === date?.getTime();
+            date &&
+                isDate(date) &&
+                !isEqual &&
+                setCurrentDate(formatValue(date));
+        }
+        props.onChange && props.onChange(index, selectedValue, cacheValueData);
+    };
+    const padZero = (num, targetLength = 2) => {
+        let str = `${num}`;
+        while (str.length < targetLength) {
+            str = `0${str}`;
+        }
+        return str;
+    };
+    const formatterOption = (type, value) => {
+        let fOption = null;
+        if (formatter) {
+            fOption = formatter(type, {
+                text: padZero(value, 2),
+                value: padZero(value, 2),
+            });
+        }
+        else {
+            const padMin = padZero(value, 2);
+            const fatter = isShowChinese ? zhCNType[type] : '';
+            fOption = { text: padMin + fatter, value: padMin };
+        }
+        return fOption;
+    };
+    const generateValue = (min, max, val, type, columnIndex) => {
+        let cmin = min;
+        const arr = [];
+        let index = 0;
+        while (cmin <= max) {
+            arr.push(formatterOption(type, cmin));
+            if (type === 'minute') {
+                cmin += minuteStep;
+            }
+            else {
+                cmin++;
+            }
+            if (cmin <= val) {
+                index++;
+            }
+        }
+        defaultValue[columnIndex] = arr[index].value;
+        setDefaultValue([...defaultValue]);
+        if (props.filter && props.filter(type, arr)) {
+            return props.filter(type, arr);
+        }
+        return arr;
+    };
+    const getDateIndex = (type) => {
+        if (!currentDate)
+            return 0;
+        let d = 0;
+        if (type === 'year') {
+            d = currentDate.getFullYear();
+        }
+        else if (type === 'month') {
+            d = currentDate.getMonth() + 1;
+        }
+        else if (type === 'day') {
+            d = currentDate.getDate();
+        }
+        else if (type === 'hour') {
+            d = currentDate.getHours();
+        }
+        else if (type === 'minute') {
+            d = currentDate.getMinutes();
+        }
+        else if (type === 'seconds') {
+            d = currentDate.getSeconds();
+        }
+        return d;
+    };
+    const columns = (date) => {
+        const val = ranges(date).map((res, columnIndex) => {
+            return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+        });
+        return val || [];
+    };
+    useEffect(() => {
+        setCurrentDate(formatValue(modelValue));
+    }, []);
+    useEffect(() => {
+        setCurrentDate(formatValue(modelValue));
+    }, [modelValue]);
+    useEffect(() => {
+        setShow(visible);
+    }, [visible]);
+    useEffect(() => {
+        if (currentDate) {
+            setListData(columns());
+        }
+    }, [currentDate]);
+    return (React__default.createElement(View, { className: `nut-datepicker ${className || ''}`, style: style, ...rest, catchMove: true }, listData.length > 0 && (React__default.createElement(Picker, { title: title, isVisible: show, listData: listData, onClose: onCloseDatePicker, defaultValueData: defaultValue, onConfirm: (values, options) => onConfirmDatePicker && onConfirmDatePicker(values, options), onChange: (index, value, list) => updateChooseValueCustmer(index, value, list), threeDimensional: threeDimensional, ref: pickerRef }))));
+};
+DatePicker.defaultProps = defaultProps;
+DatePicker.displayName = 'NutDatePicker';
+
+export { DatePicker as D };

package/dist/esm/dialog.taro-a3267d29.js

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { B as Button } from './button.taro-9244d065.js';
+import { View } from '@tarojs/components';
+import { CSSTransition } from 'react-transition-group';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+
+const Content = (props) => {
+    const { visible, title, footer, textAlign, footerDirection, onClickSelf, children, } = props;
+    let headerNode;
+    if (title) {
+        headerNode = React__default.createElement("div", { className: "nut-dialog__header" }, title);
+    }
+    let footerNode;
+    if (footer) {
+        footerNode = (React__default.createElement("div", { className: classNames('nut-dialog__footer', {
+                [footerDirection]: footerDirection,
+            }) }, footer));
+    }
+    const handleClick = () => {
+        onClickSelf && onClickSelf();
+    };
+    return (React__default.createElement("div", { className: "nut-dialog__outer", onClick: handleClick },
+        React__default.createElement("div", { className: "nut-dialog", style: { display: visible ? 'flex' : 'none' } },
+            headerNode,
+            React__default.createElement("div", { className: "nut-dialog__content", style: { textAlign } },
+                React__default.createElement("div", null, children)),
+            footerNode)));
+};
+Content.displayName = 'NutContent';
+
+function Mask(props) {
+    return React.createElement("div", { className: "nut-dialog__mask" });
+}
+
+const DialogWrap = (props) => {
+    const { className, style, visible, mask, closeOnClickOverlay, lockScroll, onClosed, onCancel, } = props;
+    const handleClick = (e) => {
+        if (closeOnClickOverlay && visible && e.target === e.currentTarget) {
+            onClosed?.();
+            onCancel?.();
+            lockScroll && document.body.classList.remove('nut-overflow-hidden');
+        }
+    };
+    const wrapStyle = {
+        ...style,
+        display: visible ? 'block' : 'none',
+    };
+    if (lockScroll && visible) {
+        document.body.classList.add('nut-overflow-hidden');
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        mask ? (React__default.createElement(CSSTransition, { in: visible, timeout: 300, classNames: "fadeDialog", unmountOnExit: true, appear: true },
+            React__default.createElement(Mask, null))) : null,
+        React__default.createElement("div", { className: classNames('nut-dialog__wrap', className), onClick: handleClick, style: wrapStyle },
+            React__default.createElement(Content, { ...props, visible: visible }))));
+};
+DialogWrap.displayName = 'NutDialogWrap';
+
+const DialogWrapper = (props) => {
+    const { visible, lockScroll } = props;
+    return (React__default.createElement(View, { style: { display: visible ? 'block' : 'none' }, catchMove: lockScroll },
+        React__default.createElement(DialogWrap, { ...props })));
+};
+DialogWrapper.displayName = 'NutDialogWrapper';
+
+const defaultProps = {
+    okText: '',
+    cancelText: '',
+    mask: true,
+    closeOnClickOverlay: true,
+    noFooter: false,
+    noOkBtn: false,
+    noCancelBtn: false,
+    okBtnDisabled: false,
+    cancelAutoClose: true,
+    textAlign: 'center',
+    footerDirection: 'horizontal',
+    lockScroll: false,
+};
+const BaseDialog = forwardRef((props, ref) => {
+    const { locale } = useConfig();
+    const { visible, footer, noOkBtn, noCancelBtn, lockScroll, okBtnDisabled, cancelAutoClose, okText, cancelText, onClosed, onCancel, onOk, ...restProps } = props;
+    const renderFooter = function () {
+        if (footer === null)
+            return '';
+        const handleCancel = function (e) {
+            e.stopPropagation();
+            if (!cancelAutoClose)
+                return;
+            onClosed?.();
+            onCancel?.();
+            if (lockScroll && visible) {
+                document.body.classList.remove('nut-overflow-hidden');
+            }
+        };
+        const handleOk = function (e) {
+            e.stopPropagation();
+            onClosed?.();
+            onOk?.(e);
+            if (lockScroll && visible) {
+                document.body.classList.remove('nut-overflow-hidden');
+            }
+        };
+        const footerContent = footer || (React__default.createElement(React__default.Fragment, null,
+            !noCancelBtn && (React__default.createElement(Button, { size: "small", plain: true, type: "primary", className: "nut-dialog__footer-cancel", onClick: (e) => handleCancel(e) }, cancelText || locale.cancel)),
+            !noOkBtn && (React__default.createElement(Button, { size: "small", type: "primary", className: classNames('nut-dialog__footer-ok', {
+                    disabled: okBtnDisabled,
+                }), disabled: okBtnDisabled, onClick: (e) => handleOk(e) }, okText || locale.confirm))));
+        return footerContent;
+    };
+    return (React__default.createElement(DialogWrapper, { ...restProps, visible: visible, lockScroll: lockScroll, footer: renderFooter(), onClosed: onClosed, onCancel: onCancel }));
+});
+BaseDialog.defaultProps = defaultProps;
+BaseDialog.displayName = 'NutDialog';
+
+export { BaseDialog as B };

package/dist/esm/divider.taro-26d1d8b4.js

@@ -0,0 +1,35 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    contentPosition: 'center',
+    dashed: false,
+    hairline: true,
+    direction: 'horizontal',
+};
+const Divider = (props) => {
+    const { children, contentPosition, dashed, hairline, styles, className, direction, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const dividerBem = cn('divider');
+    const classes = direction === 'horizontal'
+        ? classNames({
+            [dividerBem()]: true,
+            [dividerBem('center')]: children,
+            [dividerBem('left')]: contentPosition === 'left',
+            [dividerBem('right')]: contentPosition === 'right',
+            [dividerBem('dashed')]: dashed,
+            [dividerBem('hairline')]: hairline,
+        })
+        : classNames({
+            [dividerBem()]: true,
+            [dividerBem('vertical')]: direction === 'vertical',
+        });
+    return (React__default.createElement("div", { className: `${classes} ${className || ''}`, style: styles, ...rest }, children));
+};
+Divider.defaultProps = defaultProps;
+Divider.displayName = 'NutDivider';
+
+export { Divider as D };