@nutui/nutui-react-taro 1.4.4 → 1.4.5

package/dist/esm/calendar.taro-4ed72058.js

@@ -0,0 +1,38 @@
+import React__default from 'react';
+import { P as Popup } from './popup.taro-cb777e09.js';
+import { U as Utils, C as CalendarItem } from './calendaritem.taro-1ebe428d.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+
+const defaultProps = {
+    type: 'one',
+    isAutoBackFill: false,
+    poppable: true,
+    visible: false,
+    title: '日历选择',
+    defaultValue: '',
+    startDate: Utils.getDay(0),
+    endDate: Utils.getDay(365),
+    onClose: () => { },
+    onChoose: (param) => { },
+};
+const Calendar = (props) => {
+    const { locale } = useConfig();
+    const { children, poppable, visible, type, isAutoBackFill, title, defaultValue, startDate, endDate, onClose, onChoose, } = { ...defaultProps, ...props };
+    const close = () => {
+        onClose && onClose();
+    };
+    const update = () => { };
+    const choose = (param) => {
+        close();
+        onChoose && onChoose(param);
+    };
+    const closePopup = () => {
+        close();
+    };
+    return (React__default.createElement(React__default.Fragment, null, poppable ? (React__default.createElement(Popup, { visible: visible, position: "bottom", round: true, duration: 0.5, closeable: true, destroyOnClose: true, onClickOverlay: closePopup, onClickCloseIcon: closePopup, style: { height: '85vh' } },
+        React__default.createElement(CalendarItem, { type: type, isAutoBackFill: isAutoBackFill, poppable: poppable, title: locale.calendaritem.title || title, defaultValue: defaultValue, startDate: startDate, endDate: endDate, onUpdate: update, onClose: close, onChoose: choose }))) : (React__default.createElement(CalendarItem, { type: type, isAutoBackFill: isAutoBackFill, poppable: poppable, title: locale.calendaritem.title, defaultValue: defaultValue, startDate: startDate, endDate: endDate, onClose: close, onChoose: choose }))));
+};
+Calendar.defaultProps = defaultProps;
+Calendar.displayName = 'NutCalendar';
+
+export { Calendar as C };

package/dist/esm/calendaritem.taro-1ebe428d.js

@@ -0,0 +1,571 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { g as getRectByTaro } from './useClientRect-bf69d7b3.js';
+
+const Utils = {
+    /**
+     * 是否为闫年
+     * @return {Boolse} true|false
+     */
+    isLeapYear(y) {
+        return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
+    },
+    /**
+     * 返回星期数
+     * @return {String}
+     */
+    getWhatDay(year, month, day) {
+        const date = new Date(`${year}/${month}/${day}`);
+        const index = date.getDay();
+        const dayNames = [
+            '星期日',
+            '星期一',
+            '星期二',
+            '星期三',
+            '星期四',
+            '星期五',
+            '星期六',
+        ];
+        return dayNames[index];
+    },
+    /**
+     * 返回星期数
+     * @return {Number}
+     */
+    getMonthPreDay(year, month) {
+        const date = new Date(`${year}/${month}/01`);
+        let day = date.getDay();
+        if (day == 0) {
+            day = 7;
+        }
+        return day;
+    },
+    /**
+     * 返回月份天数
+     * @return {Number}
+     */
+    getMonthDays(year, month) {
+        if (/^0/.test(month)) {
+            month = month.split('')[1];
+        }
+        return [
+            0,
+            31,
+            this.isLeapYear(Number(year)) ? 29 : 28,
+            31,
+            30,
+            31,
+            30,
+            31,
+            31,
+            30,
+            31,
+            30,
+            31,
+        ][month];
+    },
+    /**
+     * 补齐数字位数
+     * @return {string}
+     */
+    getNumTwoBit(n) {
+        n = Number(n);
+        return (n > 9 ? '' : '0') + n;
+    },
+    /**
+     * 日期对象转成字符串
+     * @return {string}
+     */
+    date2Str(date, split) {
+        split = split || '-';
+        const y = date.getFullYear();
+        const m = this.getNumTwoBit(date.getMonth() + 1);
+        const d = this.getNumTwoBit(date.getDate());
+        return [y, m, d].join(split);
+    },
+    /**
+     * 返回日期格式字符串
+     * @param {Number} 0返回今天的日期、1返回明天的日期，2返回后天得日期，依次类推
+     * @return {string} '2014-12-31'
+     */
+    getDay(i) {
+        i = i || 0;
+        let date = new Date();
+        const diff = i * (1000 * 60 * 60 * 24);
+        date = new Date(date.getTime() + diff);
+        return this.date2Str(date);
+    },
+    /**
+     * 时间比较
+     * @return {Boolean}
+     */
+    compareDate(date1, date2) {
+        const startTime = new Date(date1.replace('-', '/').replace('-', '/'));
+        const endTime = new Date(date2.replace('-', '/').replace('-', '/'));
+        if (startTime >= endTime) {
+            return false;
+        }
+        return true;
+    },
+    /**
+     * 时间是否相等
+     * @return {Boolean}
+     */
+    isEqual(date1, date2) {
+        const startTime = new Date(date1).getTime();
+        const endTime = new Date(date2).getTime();
+        if (startTime == endTime) {
+            return true;
+        }
+        return false;
+    },
+};
+
+function requestAniFrame() {
+    if (typeof window !== 'undefined') {
+        return (window.requestAnimationFrame ||
+            function (callback) {
+                window.setTimeout(callback, 1000 / 60);
+            });
+    }
+    return function (callback) {
+        setTimeout(callback, 1000 / 60);
+    };
+}
+var requestAniFrame$1 = requestAniFrame();
+
+const defaultProps = {
+    type: 'one',
+    isAutoBackFill: false,
+    poppable: true,
+    visible: false,
+    title: '日历选择',
+    defaultValue: '',
+    startDate: Utils.getDay(0),
+    endDate: Utils.getDay(365),
+    onChoose: (data) => { },
+    onUpdate: () => { },
+    onClose: () => { },
+};
+const CalendarItem = (props) => {
+    const { locale } = useConfig();
+    const { type, isAutoBackFill, poppable, title, defaultValue, startDate, endDate, onChoose, onUpdate, onClose, } = { ...defaultProps, ...props };
+    const weeks = locale.calendaritem.weekdays;
+    const [yearMonthTitle, setYearMonthTitle] = useState('');
+    const [unLoadPrev, setUnLoadPrev] = useState(false);
+    const [monthsData, setMonthsData] = useState([]);
+    const [state] = useState({
+        currDate: '',
+        touchParams: {
+            startY: 0,
+            endY: 0,
+            startTime: 0,
+            endTime: 0,
+            lastY: 0,
+            lastTime: 0,
+        },
+        transformY: 0,
+        translateY: 0,
+        scrollDistance: 0,
+        defaultData: [],
+        chooseData: [],
+        monthsData: [],
+        dayPrefix: 'calendar-month-day',
+        startData: '',
+        endData: '',
+        isRange: type === 'range',
+        timer: 0,
+    });
+    const weeksPanel = useRef(null);
+    const months = useRef(null);
+    const monthsPanel = useRef(null);
+    const b = cn('calendar');
+    const classes = classNames({
+        [`${b('')}-tile`]: !poppable,
+        [`${b('')}-nofooter`]: !!isAutoBackFill,
+    }, b(''));
+    const headerClasses = classNames({
+        [`${b('')}-header`]: true,
+        [`${b('')}-header-tile`]: !poppable,
+    });
+    const monthitemclasses = classNames({
+        'calendar-month-item': true,
+        [`${type === 'range' ? 'month-item-range' : ''}`]: true,
+    });
+    const splitDate = (date) => {
+        return date.split('-');
+    };
+    const isStart = (currDate) => {
+        return Utils.isEqual(state.currDate[0], currDate);
+    };
+    const isEnd = (currDate) => {
+        return Utils.isEqual(state.currDate[1], currDate);
+    };
+    const getCurrDate = (day, month, isRange) => {
+        return isRange
+            ? `${month.curData[3]}-${month.curData[4]}-${Utils.getNumTwoBit(+day.day)}`
+            : `${month.curData[0]}-${month.curData[1]}-${Utils.getNumTwoBit(+day.day)}`;
+    };
+    const getClass = (day, month, isRange) => {
+        const currDate = getCurrDate(day, month, isRange);
+        if (day.type === 'curr') {
+            if ((!state.isRange && Utils.isEqual(state.currDate, currDate)) ||
+                (state.isRange && (isStart(currDate) || isEnd(currDate)))) {
+                return `${state.dayPrefix}-active`;
+            }
+            if ((startDate && Utils.compareDate(currDate, startDate)) ||
+                (endDate && Utils.compareDate(endDate, currDate))) {
+                return `${state.dayPrefix}-disabled`;
+            }
+            if (state.isRange &&
+                Array.isArray(state.currDate) &&
+                Object.values(state.currDate).length === 2 &&
+                Utils.compareDate(state.currDate[0], currDate) &&
+                Utils.compareDate(currDate, state.currDate[1])) {
+                return `${state.dayPrefix}-choose`;
+            }
+            return null;
+        }
+        return `${state.dayPrefix}-disabled`;
+    };
+    const isActive = (day, month) => {
+        return (state.isRange &&
+            day.type === 'curr' &&
+            getClass(day, month) === 'calendar-month-day-active');
+    };
+    const isCurrDay = (month, day) => {
+        const date = `${month.curData[0]}-${month.curData[1]}-${day}`;
+        return Utils.isEqual(date, Utils.date2Str(new Date()));
+    };
+    const confirm = () => {
+        if ((state.isRange && state.chooseData.length === 2) || !state.isRange) {
+            onChoose && onChoose(state.chooseData);
+            if (poppable) {
+                onUpdate && onUpdate();
+            }
+        }
+    };
+    const chooseDay = (day, month, isFirst, isRange) => {
+        if (getClass(day, month, isRange) !== `${state.dayPrefix}-disabled`) {
+            let days = [...month.curData];
+            days = isRange ? days.splice(3) : days.splice(0, 3);
+            days[2] =
+                typeof day.day === 'number' ? Utils.getNumTwoBit(day.day) : day.day;
+            days[3] = `${days[0]}-${days[1]}-${days[2]}`;
+            days[4] = Utils.getWhatDay(+days[0], +days[1], +days[2]);
+            if (!state.isRange) {
+                state.currDate = days[3];
+                state.chooseData = [...days];
+            }
+            else {
+                if (Object.values(state.currDate).length === 2) {
+                    state.currDate = [days[3]];
+                }
+                else if (Utils.compareDate(state.currDate[0], days[3])) {
+                    Array.isArray(state.currDate) && state.currDate.push(days[3]);
+                }
+                else {
+                    Array.isArray(state.currDate) && state.currDate.unshift(days[3]);
+                }
+                if (state.chooseData.length === 2 || !state.chooseData.length) {
+                    state.chooseData = [...days];
+                }
+                else if (Utils.compareDate(state.chooseData[3], days[3])) {
+                    state.chooseData = [[...state.chooseData], [...days]];
+                }
+                else {
+                    state.chooseData = [[...days], [...state.chooseData]];
+                }
+            }
+            if (isAutoBackFill && !isFirst) {
+                confirm();
+            }
+            setMonthsData(state.monthsData.slice());
+        }
+    };
+    const isStartTip = (day, month) => {
+        if (isActive(day, month)) {
+            return isStart(getCurrDate(day, month));
+        }
+        return false;
+    };
+    // 是否有结束提示
+    const isEndTip = (day, month) => {
+        if (isStartTip(day, month)) {
+            return false;
+        }
+        return isActive(day, month);
+    };
+    // 获取当前月数据
+    const getCurrData = (type) => {
+        const monthData = type === 'prev'
+            ? state.monthsData[0]
+            : state.monthsData[state.monthsData.length - 1];
+        let year = parseInt(monthData.curData[0]);
+        let month = parseInt(monthData.curData[1].toString().replace(/^0/, ''));
+        switch (type) {
+            case 'prev':
+                month === 1 && (year -= 1);
+                month = month === 1 ? 12 : --month;
+                break;
+            case 'next':
+                month === 12 && (year += 1);
+                month = month === 12 ? 1 : ++month;
+                break;
+        }
+        return [
+            year,
+            Utils.getNumTwoBit(month),
+            Utils.getMonthDays(String(year), String(month)),
+        ];
+    };
+    // 获取日期状态
+    const getDaysStatus = (days, type) => {
+        // 修复：当某个月的1号是周日时，月份下方会空出来一行
+        if (type === 'prev' && days >= 7) {
+            days -= 7;
+        }
+        return Array.from(Array(days), (v, k) => {
+            return {
+                day: k + 1,
+                type,
+            };
+        });
+    };
+    // 获取月数据
+    const getMonth = (curData, type) => {
+        const preMonthDays = Utils.getMonthPreDay(+curData[0], +curData[1]);
+        const currMonthDays = Utils.getMonthDays(curData[0], curData[1]);
+        const title = {
+            year: curData[0],
+            month: curData[1],
+        };
+        const monthInfo = {
+            curData,
+            title: locale.calendaritem.monthTitle(title.year, title.month),
+            monthData: [
+                ...getDaysStatus(preMonthDays, 'prev'),
+                ...getDaysStatus(currMonthDays, 'curr'),
+            ],
+        };
+        if (type === 'next') {
+            if (!state.endData ||
+                !Utils.compareDate(`${state.endData[0]}-${state.endData[1]}-${Utils.getMonthDays(state.endData[0], state.endData[1])}`, `${curData[0]}-${curData[1]}-${curData[2]}`)) {
+                state.monthsData.push(monthInfo);
+            }
+        }
+        else if (!state.startData ||
+            !Utils.compareDate(`${curData[0]}-${curData[1]}-${curData[2]}`, `${state.startData[0]}-${state.startData[1]}-01`)) {
+            state.monthsData.unshift(monthInfo);
+        }
+        else {
+            setUnLoadPrev(true);
+        }
+        setMonthsData(state.monthsData);
+    };
+    // 监听月份滚动，改变月份标题
+    const loadScroll = () => {
+        if (!props.poppable) {
+            return false;
+        }
+        requestAniFrame$1(async () => {
+            if (weeksPanel?.current && monthsPanel?.current) {
+                const weeksPanelRes = await getRectByTaro(weeksPanel?.current);
+                weeksPanelRes?.bottom;
+                const monthsDoms = monthsPanel.current.getElementsByClassName('calendar-month');
+                for (let i = 0; i < monthsDoms.length; i++) {
+                }
+            }
+        });
+    };
+    // 设置月份滚动距离和速度
+    const setTransform = (translateY = 0, type, time = 1000) => {
+        if (monthsPanel?.current) {
+            if (type === 'end') {
+                monthsPanel.current.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
+                clearTimeout(state.timer);
+                state.timer = window.setTimeout(() => {
+                    loadScroll();
+                }, time);
+            }
+            else {
+                monthsPanel.current.style.webkitTransition = '';
+                loadScroll();
+            }
+            monthsPanel.current.style.webkitTransform = `translateY(${translateY}px)`;
+            state.scrollDistance = translateY;
+        }
+    };
+    // 计算滚动方向和距离
+    const setMove = (move, type, time) => {
+        let updateMove = move + state.transformY;
+        const h = months.current?.offsetHeight || 0;
+        const offsetHeight = monthsPanel.current?.offsetHeight || 0;
+        if (type === 'end') {
+            // 限定滚动距离
+            if (updateMove > 0) {
+                updateMove = 0;
+            }
+            if (updateMove < 0 && updateMove < -offsetHeight + h) {
+                updateMove = -offsetHeight + h;
+            }
+            if (offsetHeight <= h && state.monthsData.length === 1) {
+                updateMove = 0;
+            }
+            setTransform(updateMove, type, time);
+        }
+        else {
+            if (updateMove > 0 && updateMove > 100) {
+                updateMove = 100;
+            }
+            if (updateMove < -offsetHeight + h - 100 && state.monthsData.length > 1) {
+                updateMove = -offsetHeight + h - 100;
+            }
+            if (updateMove < 0 &&
+                updateMove < -100 &&
+                state.monthsData.length === 1) {
+                updateMove = -100;
+            }
+            setTransform(updateMove);
+        }
+    };
+    const onTouchStart = (event) => {
+        event.stopPropagation();
+        const changedTouches = event.changedTouches[0];
+        state.touchParams.startY = changedTouches.pageY;
+        state.touchParams.startTime = event.timeStamp || Date.now();
+        state.transformY = state.scrollDistance;
+    };
+    const onTouchMove = (event) => {
+        event.stopPropagation();
+        const changedTouches = event.changedTouches[0];
+        state.touchParams.lastY = changedTouches.pageY;
+        state.touchParams.lastTime = event.timeStamp || Date.now();
+        const move = state.touchParams.lastY - state.touchParams.startY;
+        if (Math.abs(move) < 5) {
+            return false;
+        }
+        setMove(move);
+    };
+    const onTouchEnd = (event) => {
+        event.stopPropagation();
+        const changedTouches = event.changedTouches[0];
+        state.touchParams.lastY = changedTouches.pageY;
+        state.touchParams.lastTime = event.timeStamp || Date.now();
+        let move = state.touchParams.lastY - state.touchParams.startY;
+        if (Math.abs(move) < 5) {
+            return false;
+        }
+        const updateMove = move + state.transformY;
+        const h = months.current?.offsetHeight || 0;
+        const offsetHeight = monthsPanel.current?.offsetHeight || 0;
+        if (updateMove > 0) {
+            getMonth(getCurrData('prev'), 'prev');
+        }
+        else if (updateMove < 0 &&
+            updateMove < -offsetHeight + (Math.abs(move) > h ? Math.abs(move) : h) * 5) {
+            getMonth(getCurrData('next'), 'next');
+            if (Math.abs(move) >= 300) {
+                getMonth(getCurrData('next'), 'next');
+            }
+        }
+        let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
+        if (moveTime <= 300) {
+            move *= 2;
+            moveTime += 1000;
+            setMove(move, 'end', moveTime);
+        }
+        else {
+            setMove(move, 'end');
+        }
+    };
+    const initData = () => {
+        // 初始化开始结束数据
+        state.startData = startDate ? splitDate(startDate) : '';
+        state.endData = endDate ? splitDate(endDate) : '';
+        // 初始化当前日期
+        if (!defaultValue) {
+            state.currDate = state.isRange
+                ? [Utils.date2Str(new Date()), Utils.getDay(1)]
+                : Utils.date2Str(new Date());
+        }
+        else {
+            state.currDate = state.isRange ? [...defaultValue] : defaultValue;
+        }
+        // 日期转化为数组
+        if (state.isRange && Array.isArray(state.currDate)) {
+            if (startDate &&
+                Utils.compareDate(state.currDate[0], startDate)) {
+                state.currDate.splice(0, 1, startDate);
+            }
+            if (endDate && Utils.compareDate(endDate, state.currDate[1])) {
+                state.currDate.splice(1, 1, endDate);
+            }
+            state.defaultData = [
+                ...splitDate(state.currDate[0]),
+                ...splitDate(state.currDate[1]),
+            ];
+        }
+        else {
+            if (startDate &&
+                Utils.compareDate(state.currDate, startDate)) {
+                state.currDate = startDate;
+            }
+            else if (endDate &&
+                !Utils.compareDate(state.currDate, endDate)) {
+                state.currDate = endDate;
+            }
+            state.defaultData = [...splitDate(state.currDate)];
+        }
+        getMonth(state.defaultData, 'next');
+        setYearMonthTitle(state.monthsData[0].title);
+        let i = 1;
+        do {
+            getMonth(getCurrData('next'), 'next');
+        } while (i++ < 4);
+        if (state.isRange) {
+            chooseDay({ day: state.defaultData[2], type: 'curr' }, state.monthsData[0], true);
+            chooseDay({ day: state.defaultData[5], type: 'curr' }, state.monthsData[0], true, true);
+        }
+        else {
+            chooseDay({ day: state.defaultData[2], type: 'curr' }, state.monthsData[0], true);
+        }
+    };
+    useEffect(() => {
+        initData();
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: classes },
+            React__default.createElement("div", { className: headerClasses },
+                poppable ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: "calendar-title" }, locale.calendaritem.title),
+                    React__default.createElement("div", { className: "calendar-curr-month" }, yearMonthTitle))) : (''),
+                React__default.createElement("div", { className: "calendar-weeks", ref: weeksPanel }, weeks.map((item) => (React__default.createElement("div", { className: "calendar-week-item", key: item }, item))))),
+            React__default.createElement("div", { className: "nut-calendar-content", onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, ref: months },
+                React__default.createElement("div", { className: "calendar-months-panel", ref: monthsPanel },
+                    React__default.createElement("div", { className: "calendar-loading-tip" }, !unLoadPrev
+                        ? locale.calendaritem.loadPreviousMonth
+                        : locale.calendaritem.noEarlierMonth),
+                    monthsData.map((month, key) => (React__default.createElement("div", { className: "calendar-month", key: key },
+                        React__default.createElement("div", { className: "calendar-month-title" }, month.title),
+                        React__default.createElement("div", { className: "calendar-month-con" },
+                            React__default.createElement("div", { className: monthitemclasses }, month.monthData &&
+                                month.monthData.map((day, index) => (React__default.createElement("div", { className: [
+                                        'calendar-month-day',
+                                        getClass(day, month),
+                                    ].join(' '), key: index, onClick: () => {
+                                        chooseDay(day, month);
+                                    } },
+                                    React__default.createElement("div", { className: "calendar-day" }, day.type === 'curr' ? day.day : ''),
+                                    isCurrDay(month, day.day) ? (React__default.createElement("div", { className: "calendar-curr-tip-curr" }, locale.calendaritem.today)) : (''),
+                                    isStartTip(day, month) ? (React__default.createElement("div", { className: "calendar-day-tip" }, locale.calendaritem.start)) : (''),
+                                    isEndTip(day, month) ? (React__default.createElement("div", { className: "calendar-day-tip" }, locale.calendaritem.end)) : (''))))))))))),
+            poppable && !isAutoBackFill ? (React__default.createElement("div", { className: "nut-calendar-footer" },
+                React__default.createElement("div", { className: "calendar-confirm-btn", onClick: confirm }, locale.confirm))) : (''))));
+};
+CalendarItem.defaultProps = defaultProps;
+CalendarItem.displayName = 'NutCalendarItem';
+
+export { CalendarItem as C, Utils as U };

package/dist/esm/card.taro-39055e82.js

@@ -0,0 +1,32 @@
+import React__default from 'react';
+import { P as Price } from './price.taro-8801462e.js';
+import { T as Tag } from './tag.taro-00fe554d.js';
+import { c as cn } from './bem-893ad28d.js';
+
+const defaultProps = {};
+const Card = (props) => {
+    const { className, style, imgUrl, title, price, vipPrice, shopDesc, delivery, shopName, shopTagTpl, originTpl, prolistTpl, footerTpl, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('card');
+    return (React__default.createElement("div", { className: `${b()} ${className}`, style: style, ...rest },
+        React__default.createElement("div", { className: b('left') },
+            React__default.createElement("img", { src: imgUrl, alt: "" })),
+        React__default.createElement("div", { className: b('right') },
+            React__default.createElement("div", { className: b('right__title') }, title),
+            prolistTpl,
+            React__default.createElement("div", { className: b('right__price') },
+                React__default.createElement(Price, { price: price }),
+                originTpl || (React__default.createElement(Price, { className: b('right__price__origin'), price: vipPrice }))),
+            React__default.createElement("div", { className: b('right__other') }, shopTagTpl || (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Tag, { type: "danger" }, shopDesc),
+                React__default.createElement(Tag, { plain: true }, delivery)))),
+            React__default.createElement("div", { className: b('right__shop') },
+                React__default.createElement("div", { className: b('right__shop__name') }, shopName),
+                footerTpl))));
+};
+Card.defaultProps = defaultProps;
+Card.displayName = 'NutCard';
+
+export { Card as C };