@cloudbase/weda-ui 3.2.0 → 3.3.0

package/dist/src/web/components/form/select/allTimePicker/index.js

@@ -0,0 +1,944 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useRef, useState } from 'react';
+import Calendar from './calendar';
+import { Portal } from '../../../common/portal';
+import './index.css';
+import { defaultData, defaultDateTime, getCurrentHoursIndex, getCurrentMinutesIndex, getCurrentMonthIndex, getCurrentSecondsIndex, getCurrentYearIndex, getFormatData, getIndex, getIOSNotNaNDate, getLastDate, getStartDate, isSpace, } from './dataUtils';
+/**
+ *  年月日时分秒日期选择器
+ */
+export default function AllTimePicker({ startDate, endDate, defaultDate, title, onAllTimeCallback, }) {
+    // 滑动监听参数
+    const dateRef = useRef();
+    const dateTimeRef = useRef();
+    const heightRef = useRef(40);
+    // 时间、月份切换
+    const [selectMonth, setSelectMonth] = useState(false);
+    const [selectTime, setSelectTime] = useState(false);
+    // 默认选中的日期
+    const [yearIndex, setYearIndex] = useState(getCurrentYearIndex());
+    const [monthIndex, setMonthIndex] = useState(getCurrentMonthIndex());
+    const [hoursIndex, setHoursIndex] = useState(getCurrentHoursIndex());
+    const [minutesIndex, setMinutesIndex] = useState(getCurrentMinutesIndex());
+    const [secondsIndex, setSecondsIndex] = useState(getCurrentSecondsIndex());
+    // 日历选择回调函数
+    const [selectDay, setSelectDay] = useState(new Date().getDate());
+    // 真实日期列表
+    const [date, setRealDate] = useState(defaultData());
+    const [dateTime, setRealDateTime] = useState(defaultDateTime);
+    // 开始时间
+    const [startTime, setStartTime] = useState([]);
+    // 结束时间
+    const [endTime, setEndTime] = useState([]);
+    // 默认时间仅生效一次
+    const timeMode = useRef(false);
+    // 年份联动，滑动时候触发
+    const scrollYear = useRef(false);
+    /**
+     * 当前选中时间的否和开始时候一致
+     */
+    const currentIsStartYear = () => {
+        var _a;
+        if (startTime.length === 0) {
+            return false;
+        }
+        return (startTime[0] === parseInt((_a = date[0].value[yearIndex]) === null || _a === void 0 ? void 0 : _a.replace('年', '')));
+    };
+    const currentIsStartMonth = () => {
+        var _a;
+        if (startTime.length === 0) {
+            return false;
+        }
+        return (startTime[1] === parseInt((_a = date[1].value[monthIndex]) === null || _a === void 0 ? void 0 : _a.replace('月', '')));
+    };
+    const currentIsStartDay = () => {
+        if (startTime.length === 0) {
+            return false;
+        }
+        return startTime[2] === selectDay;
+    };
+    const currentIsStartHours = () => {
+        var _a;
+        if (startTime.length === 0) {
+            return false;
+        }
+        return (startTime[3] ===
+            parseInt((_a = dateTime[0].value[hoursIndex]) === null || _a === void 0 ? void 0 : _a.replace('时', '')));
+    };
+    const currentIsStartMinutes = (index = minutesIndex) => {
+        var _a;
+        if (startTime.length === 0) {
+            return false;
+        }
+        return (startTime[4] === parseInt((_a = dateTime[1].value[index]) === null || _a === void 0 ? void 0 : _a.replace('分', '')));
+    };
+    /**
+     * 当前选中时间的否和开始、结束时候一致
+     */
+    const currentIsEndYear = () => {
+        var _a;
+        if (endTime.length === 0) {
+            return false;
+        }
+        return endTime[0] === parseInt((_a = date[0].value[yearIndex]) === null || _a === void 0 ? void 0 : _a.replace('年', ''));
+    };
+    const currentIsEndMonth = () => {
+        var _a;
+        if (endTime.length === 0) {
+            return false;
+        }
+        return (endTime[1] === parseInt((_a = date[1].value[monthIndex]) === null || _a === void 0 ? void 0 : _a.replace('月', '')));
+    };
+    const currentIsEndDay = () => {
+        if (endTime.length === 0) {
+            return false;
+        }
+        return endTime[2] === selectDay;
+    };
+    const currentIsEndHours = () => {
+        var _a;
+        if (endTime.length === 0) {
+            return false;
+        }
+        return (endTime[3] === parseInt((_a = dateTime[0].value[hoursIndex]) === null || _a === void 0 ? void 0 : _a.replace('时', '')));
+    };
+    const currentIsEndMinutes = () => {
+        var _a;
+        if (endTime.length === 0) {
+            return false;
+        }
+        return (endTime[4] ===
+            parseInt((_a = dateTime[1].value[minutesIndex]) === null || _a === void 0 ? void 0 : _a.replace('分', '')));
+    };
+    const showAreaToast = () => {
+        var _a;
+        (_a = window.app) === null || _a === void 0 ? void 0 : _a.showToast({
+            title: '可选日期时间范围：' + startDate + '~' + endDate,
+            icon: 'none',
+        });
+    };
+    /**
+     * 设置最早开始时间和最晚结束时候的年份
+     */
+    useEffect(() => {
+        var _a, _b;
+        if (startDate !== '' && endDate !== '') {
+            const sd = getIOSNotNaNDate(startDate);
+            const nd = getIOSNotNaNDate(endDate);
+            if (new Date(sd).getTime() > new Date(nd).getTime()) {
+                showAreaToast();
+                return;
+            }
+            // 都不为空
+            // 1、年月限制
+            const start = limitData(startDate);
+            const end = limitData(endDate);
+            setStartTime(start);
+            setEndTime(end);
+            const value = date[0].value.filter((item) => {
+                if (isSpace(item)) {
+                    return true;
+                }
+                const current = parseInt(item.replace('年', ''));
+                return current >= start[0] && current <= end[0];
+            });
+            const id = date[0].id;
+            if (defaultDate) {
+                const dd = new Date(getIOSNotNaNDate(defaultDate)).getTime();
+                if (dd < new Date(sd).getTime() || dd > new Date(nd).getTime()) {
+                    showAreaToast();
+                    return;
+                }
+                const monthData = defaultTimeModeMonth(start, end);
+                setRealDate([{ value, id }, monthData]);
+            }
+            else {
+                setRealDate([{ value, id }, limitMonth(start, end)]);
+            }
+            setYearIndex(2);
+            setMonthIndex(2);
+            setSelectDay(start[2]);
+            //2、时分秒限制
+            setRealDateTime(limitTime(start, false));
+            defaultSelect();
+        }
+        else if (startDate !== '' && endDate === '') {
+            // 结束时间为空
+            // 1、年月限制
+            const start = limitData(startDate);
+            setStartTime(start);
+            const value = date[0].value.filter((item) => {
+                if (isSpace(item)) {
+                    return true;
+                }
+                const current = parseInt(item.replace('年', ''));
+                return current >= start[0];
+            });
+            const id = date[0].id;
+            if (defaultDate) {
+                const sd = getIOSNotNaNDate(startDate);
+                const dd = getIOSNotNaNDate(defaultDate);
+                if (new Date(dd).getTime() < new Date(sd).getTime()) {
+                    (_a = window.app) === null || _a === void 0 ? void 0 : _a.showToast({
+                        title: '可选日期时间范围：' + startDate + '~' + getLastDate(),
+                        icon: 'none',
+                    });
+                    return;
+                }
+                const monthData = defaultTimeModeMonth(start, undefined);
+                setRealDate([{ value, id }, monthData]);
+            }
+            else {
+                setRealDate([{ value, id }, limitMonth(start, undefined)]);
+            }
+            setYearIndex(2);
+            setMonthIndex(2);
+            setSelectDay(start[2]);
+            // 2、时分秒限制
+            setRealDateTime(limitTime(start, false));
+            defaultSelect();
+        }
+        else if (startDate === '' && endDate !== '') {
+            // 开始时间为空
+            const end = limitData(endDate);
+            setEndTime(end);
+            const value = date[0].value.filter((item) => {
+                if (isSpace(item)) {
+                    return true;
+                }
+                const current = parseInt(item.replace('年', ''));
+                return current <= end[0];
+            });
+            const id = date[0].id;
+            const lTime = limitTime(end, true);
+            setRealDateTime(lTime);
+            setSelectDay(end[2]);
+            if (defaultDate) {
+                const ed = getIOSNotNaNDate(endDate);
+                const dd = getIOSNotNaNDate(defaultDate);
+                if (new Date(dd).getTime() > new Date(ed).getTime()) {
+                    (_b = window.app) === null || _b === void 0 ? void 0 : _b.showToast({
+                        title: '可选日期时间范围：' + getStartDate() + '~' + endDate,
+                        icon: 'none',
+                    });
+                    return;
+                }
+                const monthData = defaultTimeModeMonth(undefined, end);
+                setRealDate([{ value, id }, monthData]);
+                setMonthIndex(2);
+                setYearIndex(2);
+                defaultSelect();
+            }
+            else {
+                const lMonth = limitMonth(undefined, end);
+                setRealDate([{ value, id }, lMonth]);
+                setMonthIndex(lMonth.value.length - 3);
+                setYearIndex(value.length - 3);
+                defaultEndSelect(lTime);
+            }
+        }
+        else {
+            // 都为空
+            setStartTime([]);
+            setEndTime([]);
+            if (defaultDate) {
+                const monthData = defaultTimeModeMonth(undefined, undefined);
+                setRealDate([date[0], monthData]);
+            }
+        }
+        timeMode.current = true;
+    }, [startDate, endDate]);
+    /**
+     * 默认选中：更新默认时间
+     */
+    useEffect(() => {
+        if (!defaultDate) {
+            return;
+        }
+        if (!timeMode.current) {
+            return;
+        }
+        const d = new Date(getIOSNotNaNDate(defaultDate));
+        const year = d.getFullYear();
+        const month = d.getMonth() + 1;
+        const hours = d.getHours();
+        const minutes = d.getMinutes();
+        const seconds = d.getSeconds();
+        setYearIndex(getIndex(date[0].value.indexOf(getFormatData(year) + '年')));
+        setMonthIndex(getIndex(date[1].value.indexOf(getFormatData(month) + '月')));
+        setHoursIndex(getIndex(dateTime[0].value.indexOf(getFormatData(hours) + '时')));
+        setMinutesIndex(getIndex(dateTime[1].value.indexOf(getFormatData(minutes) + '分')));
+        setSecondsIndex(getIndex(dateTime[2].value.indexOf(getFormatData(seconds) + '秒')));
+        setSelectDay(d.getDate());
+    }, [date, dateTime]);
+    /**
+     * 限制时间选择至某一范围
+     */
+    // 时间转为数组，方便获取
+    const limitData = (detailTime) => {
+        const date = new Date(getIOSNotNaNDate(detailTime));
+        return [
+            date.getFullYear(),
+            date.getMonth() + 1,
+            date.getDate(),
+            date.getHours(),
+            date.getMinutes(),
+            date.getSeconds(),
+        ];
+    };
+    // 控制月份，防止默认月份不在范围内
+    const limitMonth = (startTime, endTime) => {
+        if (startTime && endTime && startTime[0] === endTime[0]) {
+            const value = defaultData()[1].value.filter((item) => {
+                if (isSpace(item)) {
+                    return true;
+                }
+                const current = parseInt(item.replace('月', ''));
+                return current >= startTime[1] && current <= endTime[1];
+            });
+            const id = date[1].id;
+            return { id, value };
+        }
+        const value = defaultData()[1].value.filter((item) => {
+            if (isSpace(item)) {
+                return true;
+            }
+            const current = parseInt(item.replace('月', ''));
+            if (startTime && endTime) {
+                return current >= startTime[1];
+            }
+            else if (endTime) {
+                return current <= endTime[1];
+            }
+            else {
+                return current >= startTime[1];
+            }
+        });
+        const id = date[1].id;
+        return { id, value };
+    };
+    // 默认时间、最晚最早时间逻辑
+    const defaultTimeModeMonth = (startTime, endTime) => {
+        const time = limitData(defaultDate);
+        if (startTime && endTime) {
+            if (time[0] > startTime[0] && time[0] < endTime[0]) {
+                return defaultData()[1];
+            }
+            if (startTime[0] === endTime[0]) {
+                return limitMonth(startTime, endTime);
+            }
+            if (time[0] === startTime[0]) {
+                return limitMonth(startTime, undefined);
+            }
+            if (time[0] === endTime[0]) {
+                return limitMonth(undefined, endTime);
+            }
+        }
+        else if (startTime) {
+            if (time[0] === startTime[0]) {
+                return limitMonth(startTime, undefined);
+            }
+            else {
+                return defaultData()[1];
+            }
+        }
+        else if (endTime) {
+            if (time[0] === endTime[0]) {
+                return limitMonth(undefined, endTime);
+            }
+            else {
+                return defaultData()[1];
+            }
+        }
+        else {
+            return defaultData()[1];
+        }
+    };
+    // 控制时分秒，防止默认时分秒不在范围内
+    const limitTime = (time, isEnd) => {
+        //时
+        const value1 = defaultDateTime[0].value.filter((item) => {
+            if (isSpace(item)) {
+                return true;
+            }
+            const current = parseInt(item.replace('时', ''));
+            return isEnd ? current <= time[3] : current >= time[3];
+        });
+        const id1 = defaultDateTime[0].id;
+        //分
+        const value2 = defaultDateTime[1].value.filter((item) => {
+            if (isSpace(item)) {
+                return true;
+            }
+            const current = parseInt(item.replace('分', ''));
+            return isEnd ? current <= time[4] : current >= time[4];
+        });
+        const id2 = defaultDateTime[1].id;
+        //秒
+        const value3 = defaultDateTime[2].value.filter((item) => {
+            if (isSpace(item)) {
+                return true;
+            }
+            const current = parseInt(item.replace('秒', ''));
+            return isEnd ? current <= time[5] : current >= time[5];
+        });
+        const id3 = defaultDateTime[2].id;
+        return [
+            { value: value1, id: id1 },
+            { value: value2, id: id2 },
+            { value: value3, id: id3 },
+        ];
+    };
+    // 设置默认防止数组越界
+    const defaultSelect = () => {
+        setHoursIndex(2);
+        setMinutesIndex(2);
+        setSecondsIndex(2);
+    };
+    const defaultEndSelect = (dateTimeValue) => {
+        setHoursIndex(dateTimeValue[0].value.length - 3);
+        setMinutesIndex(dateTimeValue[1].value.length - 3);
+        setSecondsIndex(dateTimeValue[2].value.length - 3);
+    };
+    /**
+     * 年月日时分秒滑动选定位日期
+     */
+    const dateScroll = (e, type) => {
+        timeMode.current = false;
+        switch (type) {
+            case 'date':
+                // 年月
+                setCurrentYear(dateRef.current.children.item(0));
+                setCurrentMonth(dateRef.current.children.item(1));
+                break;
+            case 'dateTime':
+                // 时分秒
+                setCurrentHours(dateTimeRef.current.children.item(0));
+                setCurrentMinutes(dateTimeRef.current.children.item(1));
+                setCurrentSeconds(dateTimeRef.current.children.item(2));
+                break;
+            default:
+                break;
+        }
+    };
+    /**
+     * 获取当下选中的日期的下标
+     */
+    const setCurrentSeconds = (secondsNode) => {
+        if (secondsNode.scrollTop) {
+            const index = Math.round(secondsNode.scrollTop / heightRef.current + 2);
+            setSecondsIndex(index);
+        }
+        else {
+            setSecondsIndex(2);
+        }
+    };
+    const setCurrentMinutes = (minutesNode) => {
+        if (minutesNode.scrollTop) {
+            const index = Math.round(minutesNode.scrollTop / heightRef.current + 2);
+            setMinutesIndex(index);
+        }
+        else {
+            setMinutesIndex(2);
+        }
+    };
+    const setCurrentHours = (hoursNode) => {
+        if (hoursNode.scrollTop) {
+            const index = Math.round(hoursNode.scrollTop / heightRef.current + 2);
+            setHoursIndex(index);
+        }
+        else {
+            setHoursIndex(2);
+        }
+    };
+    const setCurrentYear = (yearNode) => {
+        if (yearNode.scrollTop) {
+            const index = Math.round(yearNode.scrollTop / heightRef.current + 2);
+            setYearIndex(index);
+            setMonthIndex(2);
+            scrollYear.current = true;
+        }
+        else {
+            setYearIndex(2);
+            setMonthIndex(2);
+        }
+    };
+    const setCurrentMonth = (monthNode) => {
+        if (monthNode.scrollTop) {
+            const index = Math.round(monthNode.scrollTop / heightRef.current + 2);
+            setMonthIndex(index);
+        }
+        else {
+            setMonthIndex(2);
+        }
+    };
+    const setCurrentDay = (day) => {
+        timeMode.current = false;
+        setSelectDay(day);
+    };
+    /**
+     * 设置时分秒
+     */
+    useEffect(() => {
+        // 没有配置开始时间和结束时候，不作处理
+        if (startTime.length === 0 && endTime.length === 0) {
+            return;
+        }
+        // 时分秒根据年份月份来设置开始月
+        const sy = currentIsStartYear();
+        const sm = currentIsStartMonth();
+        const sd = currentIsStartDay();
+        const ny = currentIsEndYear();
+        const nm = currentIsEndMonth();
+        const nd = currentIsEndDay();
+        if (sy && sm && sd) {
+            // 当前选择开始年份
+            setRealDateTime(limitTime(startTime, false));
+            defaultSelect();
+        }
+        else if (ny && nm && nd) {
+            // 当前选择结束年份
+            const lTime = limitTime(endTime, true);
+            setRealDateTime(lTime);
+            defaultEndSelect(lTime);
+        }
+        else {
+            // 默认
+            setRealDateTime(defaultDateTime);
+        }
+        // 设置月份防止不在范围内
+        if (sy && sm && selectDay < startTime[2]) {
+            setSelectDay(startTime[2]);
+        }
+        else if (ny && nm && selectDay > endTime[2]) {
+            setSelectDay(endTime[2]);
+        }
+    }, [yearIndex, monthIndex, selectDay]);
+    /**
+     * 月份联动
+     */
+    useEffect(() => {
+        var _a;
+        if (!scrollYear.current) {
+            return;
+        }
+        // 月份根据年份来设置开始月
+        const selectYear = parseInt((_a = date[0].value[yearIndex]) === null || _a === void 0 ? void 0 : _a.replace('年', ''));
+        if (startTime.length > 0 && startTime[0] === selectYear) {
+            // 当前选择开始年份
+            setRealDate([date[0], limitMonth(startTime, undefined)]);
+            if (currentIsStartDay()) {
+                setRealDateTime(limitTime(startTime, false));
+            }
+        }
+        else {
+            // 默认
+            setRealDate([date[0], defaultData()[1]]);
+        }
+        if (endTime.length > 0 && endTime[0] === selectYear) {
+            // 当前选择结束年份
+            const value = defaultData()[1].value.filter((item) => {
+                if (isSpace(item)) {
+                    return true;
+                }
+                const current = parseInt(item.replace('月', ''));
+                return current <= endTime[1];
+            });
+            const id = defaultData()[1].id;
+            setRealDate([date[0], { value, id }]);
+        }
+    }, [yearIndex]);
+    /**
+     * 分秒联动分
+     */
+    useEffect(() => {
+        if (startTime.length === 0 && endTime.length === 0) {
+            return;
+        }
+        // 开始时间限制
+        const sy = currentIsStartYear();
+        const sm = currentIsStartMonth();
+        const sd = currentIsStartDay();
+        const sh = currentIsStartHours();
+        if (sy && sm && sd) {
+            if (sh) {
+                //时间、分钟命中开始
+                const monthValue = dateTime[1].value.filter((item) => {
+                    if (isSpace(item)) {
+                        return true;
+                    }
+                    const current = parseInt(item.replace('分', ''));
+                    return current >= startTime[4];
+                });
+                const monthId = dateTime[1].id;
+                const secondValue = dateTime[2].value.filter((item) => {
+                    if (isSpace(item)) {
+                        return true;
+                    }
+                    const current = parseInt(item.replace('秒', ''));
+                    return current >= startTime[5];
+                });
+                const secondId = dateTime[2].id;
+                setRealDateTime([
+                    dateTime[0],
+                    {
+                        value: monthValue,
+                        id: monthId,
+                    },
+                    { value: secondValue, id: secondId },
+                ]);
+            }
+            else {
+                setRealDateTime([dateTime[0], defaultDateTime[1], defaultDateTime[2]]);
+            }
+        }
+        // 结束时间限制
+        const ny = currentIsEndYear();
+        const nm = currentIsEndMonth();
+        const nd = currentIsEndDay();
+        const nh = currentIsEndHours();
+        if (ny && nm && nd) {
+            if (nh) {
+                //时间、分钟命中开始
+                const monthValue = dateTime[1].value.filter((item) => {
+                    if (isSpace(item)) {
+                        return true;
+                    }
+                    const current = parseInt(item.replace('分', ''));
+                    return current <= endTime[4];
+                });
+                const monthId = dateTime[1].id;
+                const secondValue = dateTime[2].value.filter((item) => {
+                    if (isSpace(item)) {
+                        return true;
+                    }
+                    const current = parseInt(item.replace('秒', ''));
+                    return current <= endTime[5];
+                });
+                const secondId = dateTime[2].id;
+                setRealDateTime([
+                    dateTime[0],
+                    {
+                        value: monthValue,
+                        id: monthId,
+                    },
+                    { value: secondValue, id: secondId },
+                ]);
+            }
+            else {
+                setRealDateTime(limitTime(endTime, true));
+            }
+        }
+    }, [hoursIndex]);
+    /**
+     * 秒联动
+     */
+    useEffect(() => {
+        if (startTime.length === 0 && endTime.length === 0) {
+            return;
+        }
+        // 开始时间限制
+        const sy = currentIsStartYear();
+        const sm = currentIsStartMonth();
+        const sd = currentIsStartDay();
+        const sh = currentIsStartHours();
+        const smin = currentIsStartMinutes();
+        if (sy && sm && sd && sh) {
+            if (smin) {
+                const secondValue = dateTime[2].value.filter((item) => {
+                    if (isSpace(item)) {
+                        return true;
+                    }
+                    const current = parseInt(item.replace('秒', ''));
+                    return current >= startTime[5];
+                });
+                const secondId = dateTime[2].id;
+                setRealDateTime([
+                    dateTime[0],
+                    dateTime[1],
+                    {
+                        value: secondValue,
+                        id: secondId,
+                    },
+                ]);
+            }
+            else {
+                setRealDateTime([dateTime[0], dateTime[1], defaultDateTime[2]]);
+            }
+        }
+        // 结束时间限制
+        const ny = currentIsEndYear();
+        const nm = currentIsEndMonth();
+        const nd = currentIsEndDay();
+        const nh = currentIsEndHours();
+        const nmin = currentIsEndMinutes();
+        if (ny && nm && nd && nh) {
+            if (nmin) {
+                const secondValue = dateTime[2].value.filter((item) => {
+                    if (isSpace(item)) {
+                        return true;
+                    }
+                    const current = parseInt(item.replace('秒', ''));
+                    return current <= endTime[5];
+                });
+                const secondId = dateTime[2].id;
+                setRealDateTime([
+                    dateTime[0],
+                    dateTime[1],
+                    {
+                        value: secondValue,
+                        id: secondId,
+                    },
+                ]);
+            }
+            else {
+                setRealDateTime([dateTime[0], dateTime[1], defaultDateTime[2]]);
+            }
+        }
+    }, [minutesIndex]);
+    /**
+     * 初始化时候设置展示当前时间的位置
+     */
+    useEffect(() => {
+        if (dateRef.current) {
+            // 动态计算高度
+            const item1 = dateRef.current.children.item(0);
+            heightRef.current = item1.scrollHeight / date[0].value.length;
+            // 年月
+            if (item1.scrollBy) {
+                item1.scrollBy({ top: heightRef.current * (yearIndex - 2) });
+            }
+            const item2 = dateRef.current.children.item(1);
+            if (item2.scrollBy) {
+                item2.scrollBy({ top: heightRef.current * (monthIndex - 2) });
+            }
+        }
+    }, [!selectMonth]);
+    useEffect(() => {
+        if (dateTimeRef.current) {
+            // 动态计算高度
+            const item1 = dateTimeRef.current.children.item(0);
+            heightRef.current = item1.scrollHeight / dateTime[0].value.length;
+            // 时分秒
+            if (item1.scrollBy) {
+                item1.scrollBy({ top: heightRef.current * (hoursIndex - 2) });
+            }
+            const item2 = dateTimeRef.current.children.item(1);
+            if (item2.scrollBy) {
+                item2.scrollBy({ top: heightRef.current * (minutesIndex - 2) });
+            }
+            const item3 = dateTimeRef.current.children.item(2);
+            if (item3.scrollBy) {
+                item3.scrollBy({ top: heightRef.current * (secondsIndex - 2) });
+            }
+        }
+    }, [!selectTime]);
+    /**
+     * 日历向前翻页
+     */
+    const preCalendarPage = () => {
+        let isBorder;
+        if (startTime.length > 0) {
+            const m = date[1].value[monthIndex];
+            const sm = getFormatData(startTime[1]) + '月';
+            isBorder = m == sm;
+        }
+        else {
+            isBorder = monthIndex === 2;
+        }
+        if (yearIndex === 2 && isBorder) {
+            // 到底了
+            return;
+        }
+        // 更新日期
+        const value = preCalendarPageUpdateDate();
+        if (monthIndex === 2) {
+            setYearIndex((yearIndex) => yearIndex - 1);
+            // 年减少1.月设为12
+            setMonthIndex(value.length - 3);
+        }
+        else {
+            setMonthIndex((monthIndex) => monthIndex - 1);
+        }
+    };
+    /**
+     * 日历向后翻页
+     */
+    const nextCalendarPage = () => {
+        const isBorder = endTime.length > 0
+            ? date[1].value[monthIndex] === getFormatData(endTime[1]) + '月'
+            : monthIndex === 13;
+        if (yearIndex === date[0].value.length - 3 && isBorder) {
+            // 到顶了
+            return;
+        }
+        nextCalendarPageUpdateDate();
+        // 这块需要根据真实日期来确定，不能根据下标，可能起始不是从1月开始，不满12个月
+        if (monthIndex === date[1].value.length - 3) {
+            setYearIndex((yearIndex) => yearIndex + 1);
+            setMonthIndex(2);
+        }
+        else {
+            setMonthIndex((monthIndex) => monthIndex + 1);
+        }
+    };
+    /**
+     * 翻页更新日期
+     */
+    const preCalendarPageUpdateDate = () => {
+        const id = date[1].id;
+        let value;
+        if ((yearIndex === 2 && startTime.length > 0) ||
+            (yearIndex === 3 && monthIndex === 2)) {
+            // 开始年份===结束年份
+            const sn = endTime.length > 0 && startTime[0] === endTime[0];
+            value = defaultData()[1].value.filter((item) => {
+                if (isSpace(item)) {
+                    return true;
+                }
+                const current = parseInt(item.replace('月', ''));
+                return sn
+                    ? current >= startTime[1] && current <= endTime[1]
+                    : current >= startTime[1];
+            });
+        }
+        else {
+            value = defaultData()[1].value;
+        }
+        setRealDate([date[0], { value, id }]);
+        return value;
+    };
+    const nextCalendarPageUpdateDate = () => {
+        const id = date[1].id;
+        let value;
+        if (endTime.length > 0 &&
+            ((yearIndex === date[0].value.length - 4 && monthIndex === 13) ||
+                yearIndex === date[0].value.length - 3)) {
+            // 开始年份===结束年份
+            const sn = startTime.length > 0 && startTime[0] === endTime[0];
+            // 12月及其以后
+            value = defaultData()[1].value.filter((item) => {
+                if (isSpace(item)) {
+                    return true;
+                }
+                const current = parseInt(item.replace('月', ''));
+                return sn
+                    ? current >= startTime[1] && current <= endTime[1]
+                    : current <= endTime[1];
+            });
+        }
+        else if (yearIndex === 2 && monthIndex !== date[1].value.length - 3) {
+            // 最开始月份
+            value = date[1].value;
+        }
+        else {
+            // 中间月份
+            value = defaultData()[1].value;
+        }
+        setRealDate([date[0], { value, id }]);
+    };
+    const getTimeValue = (timeIndex, valueIndex, name, v) => {
+        let value = dateTime[timeIndex].value[valueIndex];
+        if (value === undefined) {
+            value = dateTime[timeIndex].value[2];
+        }
+        return value === null || value === void 0 ? void 0 : value.replace(name, v);
+    };
+    const getDateValue = (dateIndex, valueIndex, name, v) => {
+        let value = date[dateIndex].value[valueIndex];
+        if (value === undefined) {
+            value = date[dateIndex].value[2];
+        }
+        return value === null || value === void 0 ? void 0 : value.replace(name, v);
+    };
+    return (React.createElement(Portal, { type: "div" },
+        React.createElement("div", { className: "weda-ui-custom-picker" },
+            React.createElement("div", { className: "weda-ui-custom-backdrop", "data-testid": "allTime-backdrop", onClick: () => {
+                    onAllTimeCallback([]);
+                } }),
+            React.createElement("div", { className: "weda-ui-custom-picker__inner" },
+                React.createElement("div", { className: "weda-ui-custom-picker__header" },
+                    React.createElement("div", { "data-testid": "allTime-cancel", className: "weda-ui-custom-picker__header-cancle", onClick: () => {
+                            onAllTimeCallback([]);
+                        } }, "\u53D6\u6D88"),
+                    React.createElement("div", { className: "weda-ui-custom-picker__header-title" }, title),
+                    React.createElement("div", { "data-testid": "allTime-confirm", className: "weda-ui-custom-picker__header-confirm", onClick: () => {
+                            var _a, _b, _c, _d, _e;
+                            const result = [
+                                (_a = date[0].value[yearIndex]) === null || _a === void 0 ? void 0 : _a.replace('年', ''),
+                                (_b = date[1].value[monthIndex]) === null || _b === void 0 ? void 0 : _b.replace('月', ''),
+                                selectDay.toString(),
+                                (_c = dateTime[0].value[hoursIndex]) === null || _c === void 0 ? void 0 : _c.replace('时', ''),
+                                (_d = dateTime[1].value[minutesIndex]) === null || _d === void 0 ? void 0 : _d.replace('分', ''),
+                                (_e = dateTime[2].value[secondsIndex]) === null || _e === void 0 ? void 0 : _e.replace('秒', ''),
+                            ];
+                            onAllTimeCallback(result);
+                        } }, "\u786E\u8BA4")),
+                React.createElement("div", { className: "weda-ui-custom-picker__body" },
+                    React.createElement("div", { className: "weda-ui-custom-picker__select" },
+                        React.createElement("span", { "data-testid": "allTime-click-date", className: `weda-ui-custom-picker__select-item ${selectTime ? '' : 'is-current'}`, onClick: () => {
+                                setSelectTime(false);
+                                setSelectMonth(false);
+                            } }, getDateValue(0, yearIndex, '年', '-') +
+                            getDateValue(1, monthIndex, '月', '-') +
+                            getFormatData(selectDay)),
+                        React.createElement("span", { "data-testid": "allTime-click-time", className: `weda-ui-custom-picker__select-item ${!selectTime ? '' : 'is-current'}`, onClick: () => {
+                                setSelectTime(!selectTime);
+                                setSelectMonth(false);
+                            } }, getTimeValue(0, hoursIndex, '时', ':') +
+                            getTimeValue(1, minutesIndex, '分', ':') +
+                            getTimeValue(2, secondsIndex, '秒', ''))),
+                    React.createElement("div", { className: "weda-ui-custom-calendar-op" },
+                        React.createElement("div", { className: "weda-ui-custom-calendar-op__start" },
+                            React.createElement("span", { "data-testid": "allTime-click-data-arrow-start", className: `weda-ui-custom-calendar-op__select ${selectMonth ? 'is-active' : ''}`, onClick: () => {
+                                    setSelectMonth(!selectMonth);
+                                    setSelectTime(false);
+                                } },
+                                date[0].value[yearIndex],
+                                date[1].value[monthIndex],
+                                React.createElement("i", { className: "weda-ui-icon-arrow-right" }))),
+                        React.createElement("div", { className: "weda-ui-custom-calendar-op__end", style: {
+                                visibility: !selectMonth && !selectTime ? 'visible' : 'hidden',
+                            } },
+                            React.createElement("span", { "data-testid": "pre-calendar-page", className: "weda-ui-icon-turn-pre", onClick: () => {
+                                    timeMode.current = false;
+                                    preCalendarPage();
+                                } }),
+                            React.createElement("span", { "data-testid": "next-calendar-page", className: "weda-ui-icon-turn-next", onClick: () => {
+                                    timeMode.current = false;
+                                    nextCalendarPage();
+                                } }))),
+                    React.createElement("div", { style: { height: '310px' } },
+                        !selectMonth && !selectTime && (React.createElement(Calendar, { startTime: startTime, endTime: endTime, selectYear: getDateValue(0, yearIndex, '年', ''), selectMonth: getDateValue(1, monthIndex, '月', ''), defaultSelectDay: selectDay, setCurrentDay: setCurrentDay })),
+                        selectMonth && (React.createElement("div", { "data-testid": "allTime-scroll-data", className: "weda-ui-custom-picker__cloumns size-s", 
+                            // style={{ display: 'none' }}
+                            onScroll: (e) => {
+                                dateScroll(e, 'date');
+                            }, ref: dateRef }, date.map((cloumn) => {
+                            return (React.createElement("ul", { className: "weda-ui-custom-picker__cloumn", key: cloumn.id }, cloumn.value.map((item, index) => {
+                                const selectIndex = cloumn.id === 'column1' ? yearIndex : monthIndex;
+                                return (React.createElement("li", { key: index, className: `weda-ui-custom-picker__cloumn-item ${index === selectIndex ? 'is-current' : ''}` },
+                                    React.createElement("p", null, item)));
+                            })));
+                        }))),
+                        selectTime && (React.createElement("div", { "data-testid": "allTime-scroll-time", className: "weda-ui-custom-picker__cloumns size-s", 
+                            // style={{ display: 'none' }}
+                            onScroll: (e) => {
+                                dateScroll(e, 'dateTime');
+                            }, ref: dateTimeRef }, dateTime.map((cloumn) => {
+                            return (React.createElement("ul", { className: "weda-ui-custom-picker__cloumn", key: cloumn.id }, cloumn.value.map((item, index) => {
+                                let selectIndex = 8;
+                                if (cloumn.id === 'column1') {
+                                    selectIndex = hoursIndex;
+                                }
+                                else if (cloumn.id === 'column2') {
+                                    selectIndex = minutesIndex;
+                                }
+                                else if (cloumn.id === 'column3') {
+                                    selectIndex = secondsIndex;
+                                }
+                                return (React.createElement("li", { key: index, className: `weda-ui-custom-picker__cloumn-item ${index == selectIndex ? 'is-current' : ''}` },
+                                    React.createElement("p", null, item)));
+                            })));
+                        })))))))));
+}