fastlion-amis/lib/components/Schedule/datePicker.js

一种MIS页面生成工具

"use strict";
var _this = this;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var dayjs_1 = (0, tslib_1.__importDefault)(require("dayjs"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var localeData_1 = (0, tslib_1.__importDefault)(require("dayjs/plugin/localeData"));
require("dayjs/locale/zh-cn");
var zh_CN_1 = (0, tslib_1.__importDefault)(require("./zh_CN"));
require("moment/locale/zh-cn");
var calendar_min_js_1 = (0, tslib_1.__importDefault)(require("./calendar.min.js"));
var antd_1 = require("antd");
var weekOfYear_1 = (0, tslib_1.__importDefault)(require("dayjs/plugin/weekOfYear"));
var icons_1 = require("@ant-design/icons");
require("./datePicker.scss");
// 国际化，设置周一为第一天
dayjs_1.default.extend(localeData_1.default);
dayjs_1.default.extend(weekOfYear_1.default);
dayjs_1.default.locale("zh-cn");
var throttle = function (fun, time) {
    var delay = 0;
    return function () {
        var params = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            params[_i] = arguments[_i];
        }
        var now = +new Date();
        if (now - delay > time) {
            fun.apply(_this, params);
            delay = now;
        }
    };
};
var ScheduleList = function (props, ref) {
    var onDateSelected = props.onDateSelected, _a = props.events, events = _a === void 0 ? [] : _a, initDate = props.initDate, _b = props.showCalendar, showCalendar = _b === void 0 ? true : _b, onToggleCalendar = props.onToggleCalendar, onSelectMonth = props.onSelectMonth, onPanelToggle = props.onPanelToggle, viewType = props.viewType, _c = props.isWeekView, defaultWeek = _c === void 0 ? true : _c, isMobile = props.isMobile, render = props.render, alertText = props.alertText;
    // const CalendarComp = () => {
    var current = (0, react_1.useRef)({
        currentDate: initDate !== null && initDate !== void 0 ? initDate : (0, dayjs_1.default)().format("YYYY-MM-DD"),
        // currentDate: initDate,
        isTouch: false,
        touchStartX: 0,
        touchStartY: 0,
        calendarRef: { offsetWidth: 0 },
    }).current;
    var dayjsDate = (0, dayjs_1.default)(current.currentDate);
    var generateMonthData = function (dayjsDate) {
        //返回当前月份的第一天
        var currentMonthFirstDay = dayjsDate.startOf("month");
        // 返回当月的第一周第一天
        var currentMonthStartDay = currentMonthFirstDay.startOf("week");
        //上一个月
        var prevMonthFirstDay = currentMonthFirstDay.subtract(1, "month");
        var prevMonthStartDay = prevMonthFirstDay.startOf("week");
        //下一个月
        var nextMonthFirstDay = currentMonthFirstDay.add(1, "month");
        var nextMonthStartDay = nextMonthFirstDay.startOf("week");
        return {
            currentMonthFirstDay: currentMonthFirstDay,
            generateMonthDateList: [
                new Array(42)
                    .fill("")
                    .map(function (_, index) { return prevMonthStartDay.add(index, "day"); }),
                new Array(42)
                    .fill("")
                    .map(function (_, index) { return currentMonthStartDay.add(index, "day"); }),
                new Array(42)
                    .fill("")
                    .map(function (_, index) { return nextMonthStartDay.add(index, "day"); }),
            ],
        };
    };
    /**
     *
     * @param {*} dayjsDate dayjs对象
     */
    var generateWeekData = function (dayjsDate) {
        var currenWeekStartDay = dayjsDate.startOf("week");
        var prevWeekStartDay = currenWeekStartDay.subtract(1, "week");
        var nextWeekStartDay = currenWeekStartDay.add(1, "week");
        return {
            currenWeekFirstDay: currenWeekStartDay,
            generateWeekDateList: [
                new Array(7).fill("").map(function (_, index) { return prevWeekStartDay.add(index, "day"); }),
                new Array(7).fill("").map(function (_, index) { return currenWeekStartDay.add(index, "day"); }),
                new Array(7).fill("").map(function (_, index) { return nextWeekStartDay.add(index, "day"); }),
            ],
        };
    };
    var _d = generateMonthData(dayjsDate), currentMonthFirstDay = _d.currentMonthFirstDay, _e = _d.generateMonthDateList, generateMonthDateList = _e === void 0 ? [] : _e;
    var _f = generateWeekData(dayjsDate), currenWeekFirstDay = _f.currenWeekFirstDay, _g = _f.generateWeekDateList, generateWeekDateList = _g === void 0 ? [] : _g;
    var _h = (0, react_1.useState)(currentMonthFirstDay), monthFirstDay = _h[0], setMonthFirstDay = _h[1];
    var _j = (0, react_1.useState)(generateMonthDateList), mountDateList = _j[0], setMonthDateList = _j[1]; // 月日历需要展示的日期 包括前一月 当月 下一月
    var _k = (0, react_1.useState)(currenWeekFirstDay), weekFirstDay = _k[0], setWeekFirstDay = _k[1]; // 周日历需要展示的日期  包括前一周 当周 下一周
    var _l = (0, react_1.useState)(generateWeekDateList), weekDateList = _l[0], setWeekDateList = _l[1];
    var _m = (0, react_1.useState)(current.currentDate), selectDate = _m[0], setSelectDate = _m[1];
    var _o = (0, react_1.useState)(0), moveIndex = _o[0], setMoveIndex = _o[1];
    var _p = (0, react_1.useState)({ x: 0, y: 0 }), touch = _p[0], setTouch = _p[1]; //Y轴
    var _q = (0, react_1.useState)((defaultWeek)), isWeekView = _q[0], setIsWeekView = _q[1]; //true/周日历 false/月日历
    var _r = (0, react_1.useState)(0), weekInd = _r[0], selectWeekInd = _r[1]; //记录周日历选中的index
    var weekList = [{ id: 1, name: "一", }, { id: 2, name: "二", }, { id: 3, name: "三", }, { id: 4, name: "四", }, { id: 5, name: "五", }, { id: 6, name: "六", }, { id: 7, name: "日", },];
    var handleTouchStart = function (e) {
        current.isTouch = true;
        e.stopPropagation();
        var touches = e.touches[0];
        current.touchStartX = touches.clientX;
        current.touchStartY = touches.clientY;
    };
    var handleTouchMove = throttle(function (e) {
        e.stopPropagation();
        var touches = e.touches[0];
        var moveX = touches.clientX - current.touchStartX;
        var moveY = touches.clientY - current.touchStartY;
        var calendarWidth = current.calendarRef.offsetWidth;
        if (Math.abs(moveX) > Math.abs(moveY)) {
            // 左右滑动
            setTouch({ x: moveX / calendarWidth, y: 0 });
        }
    }, 25);
    var handleTouchEnd = function (e, touchInfo, type) {
        current.isTouch = false;
        e === null || e === void 0 ? void 0 : e.stopPropagation();
        var touchSource = touchInfo !== null && touchInfo !== void 0 ? touchInfo : touch;
        var touchX = Math.abs(touchSource.x);
        var touchY = Math.abs(touchSource.y);
        var newTranslateIndex = touchSource.x > 0 ? moveIndex + 1 : moveIndex - 1;
        var toggleType = type !== null && type !== void 0 ? type : (isWeekView ? "week" : "month");
        var toggleDate = selectDate;
        if (touchX > touchY && touchX > 0.15) {
            // 如果是周视图
            if (isWeekView) {
                var firstDayMap = {
                    week: weekFirstDay,
                    month: monthFirstDay,
                };
                var nextWeekFirstDay = firstDayMap[toggleType !== null && toggleType !== void 0 ? toggleType : "week"][touchSource.x > 0 ? "subtract" : "add"](1, toggleType);
                var _a = generateWeekData(nextWeekFirstDay), _b = _a.currenWeekFirstDay, currenWeekFirstDay_1 = _b === void 0 ? null : _b, _c = _a.generateWeekDateList, generateWeekDateList_1 = _c === void 0 ? [] : _c;
                updateWeekView(newTranslateIndex, currenWeekFirstDay_1, generateWeekDateList_1);
                if (toggleType === "week") {
                    //周日历滚动默认选中
                    var currentWeekDays = generateWeekDateList_1[1];
                    var selectWeekDay = currentWeekDays[weekInd];
                    var formSelectWeekDay = handleFormDate(selectWeekDay, "YYYY-MM-DD");
                    // 周模式，获取当月第一天
                    var selectedDateFirstDay = (0, dayjs_1.default)(selectWeekDay).date(1);
                    toggleDate = (0, dayjs_1.default)(formSelectWeekDay).format("YYYY-MM-DD");
                    setMonthFirstDay(selectedDateFirstDay);
                    setSelectDate(formSelectWeekDay);
                }
                else if (toggleType === "month") {
                    //周日历滚动默认选中
                    var formSelectWeekDay = handleFormDate(nextWeekFirstDay, "YYYY-MM-DD");
                    toggleDate = (0, dayjs_1.default)(formSelectWeekDay).format("YYYY-MM-DD");
                    // 周模式，获取当月第一天
                    setMonthFirstDay(nextWeekFirstDay);
                    setSelectDate(formSelectWeekDay);
                }
            }
            else {
                // 如果是月视图
                if (toggleType === "month") {
                    //月日历
                    var nextMonthFirstDay = monthFirstDay[touchSource.x > 0 ? "subtract" : "add"](1, "month");
                    var _d = generateMonthData(nextMonthFirstDay), _e = _d.currentMonthFirstDay, currentMonthFirstDay_1 = _e === void 0 ? null : _e, _f = _d.generateMonthDateList, generateMonthDateList_1 = _f === void 0 ? [] : _f;
                    toggleDate = (0, dayjs_1.default)(currentMonthFirstDay_1).format("YYYY-MM-DD");
                    updateMonthView(newTranslateIndex, currentMonthFirstDay_1, generateMonthDateList_1);
                }
            }
        }
        setTouch({ x: 0, y: 0 });
        onDateSelected(toggleDate, true);
    };
    /** 下一页 */
    var handleNext = function (e, type) {
        if (showCalendar) {
            handleTouchEnd(e, { x: -0.5, y: 0 }, type);
        }
        else {
            setSelectDate(function (date) {
                var newDate = (0, dayjs_1.default)(date);
                if (type === 'month') {
                    var currentMonth_1 = (0, dayjs_1.default)(date).month();
                    newDate = (0, dayjs_1.default)(date).month(currentMonth_1 + 1).date(1);
                }
                else if (type === 'week') {
                    var currentWeek = (0, dayjs_1.default)(date).week();
                    newDate = (0, dayjs_1.default)(date).week(currentWeek + 1);
                }
                onToggleCalendar === null || onToggleCalendar === void 0 ? void 0 : onToggleCalendar(type, "next", newDate);
                return newDate;
            });
        }
    };
    /** 上一页 */
    var handlePrev = function (e, type) {
        if (showCalendar) {
            handleTouchEnd(e, { x: 0.5, y: 0 }, type);
        }
        else {
            setSelectDate(function (date) {
                var newDate = (0, dayjs_1.default)(date);
                if (type === 'month') {
                    var currentMonth_2 = (0, dayjs_1.default)(date).month();
                    newDate = (0, dayjs_1.default)(date).month(currentMonth_2 - 1).date(1);
                }
                else if (type === 'week') {
                    var currentWeek = (0, dayjs_1.default)(date).week();
                    newDate = (0, dayjs_1.default)(date).week(currentWeek - 1);
                }
                onToggleCalendar === null || onToggleCalendar === void 0 ? void 0 : onToggleCalendar(type, "prev", newDate);
                return newDate;
            });
        }
    };
    //更新月日历视图
    var updateMonthView = function (index, currentFirstDay, dateList) {
        setMoveIndex(index);
        setMonthFirstDay(currentFirstDay);
        setMonthDateList(dateList);
    };
    //更新周日历视图
    var updateWeekView = function (index, currentFirstDay, dateList) {
        setMoveIndex(index);
        setWeekFirstDay(currentFirstDay);
        setWeekDateList(dateList);
    };
    var handleFormDate = function (date, exp) {
        return (0, dayjs_1.default)(date).format(exp);
    };
    //日历选中逻辑
    var handleSelectDate = function (formDate, isOtherMonthDay, index) {
        var selectM = handleFormDate(formDate, "YYYYMM");
        var currentM = handleFormDate(monthFirstDay, "YYYYMM");
        if (!isOtherMonthDay) {
            //在当月点击上一个月或者下一个月
            var _a = generateMonthData((0, dayjs_1.default)(formDate)).generateMonthDateList, generateMonthDateList_2 = _a === void 0 ? [] : _a;
            var newTranslateIndex = selectM < currentM ? moveIndex + 1 : moveIndex - 1;
            updateMonthView(newTranslateIndex, (0, dayjs_1.default)(formDate), generateMonthDateList_2);
        }
        if (isWeekView) {
            //周日历 记录选中的位置
            // selectWeekInd(index);
        }
        setSelectDate(formDate);
        //更新日历选中样式
        onDateSelected(formDate, true);
    };
    var today = (0, dayjs_1.default)().format('YYYY-MM-DD');
    //渲染选中样式
    var renderClassName = function (formDate) {
        if (selectDate === formDate)
            return "selectDay";
        if (formDate === today)
            return "currentDay";
        var matchEvent = events.find(function (item) { return (0, dayjs_1.default)(item.start).format('YYYY-MM-DD') === formDate; });
        if (matchEvent) {
            if (matchEvent.bgColor)
                return matchEvent.bgColor;
        }
        return "";
    };
    //月日历/周日历切换
    var handleIsMonthView = function () {
        var dayjsDate = (0, dayjs_1.default)(selectDate);
        var _a = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, generateMonthData(dayjsDate)), generateWeekData(dayjsDate)), _b = _a.generateWeekDateList, generateWeekDateList = _b === void 0 ? [] : _b, _c = _a.generateMonthDateList, generateMonthDateList = _c === void 0 ? [] : _c;
        var flag = !isWeekView;
        if (flag) {
            //更新周日历
            setWeekFirstDay(dayjsDate);
            setWeekDateList(generateWeekDateList);
            handleSetWeekIndex(selectDate, generateWeekDateList);
        }
        else {
            //更新月日历
            setMonthFirstDay(dayjsDate);
            setMonthDateList(generateMonthDateList);
        }
        setIsWeekView(flag);
    };
    //设置周日历选中的位置
    var handleSetWeekIndex = function (selectDate, generateWeekDateList) {
        var currentWeekDateList = generateWeekDateList[1];
        var weekIndex = 0;
        currentWeekDateList.forEach(function (v, index) {
            if (handleFormDate(v, "YYYY-MM-DD") === selectDate)
                weekIndex = index;
        });
        selectWeekInd(weekIndex);
    };
    // 当从面板切换年月
    var handleYearMonthChange = function (val, valStr, stopPropagation) {
        // const nextFirstDay = valStr + "-01";
        // 如果是手动重置，则按指定的日期来初始化
        var nextFirstDay = stopPropagation ? (0, dayjs_1.default)(valStr).startOf('week').format('YYYY-MM-DD') : (0, dayjs_1.default)(valStr).startOf('M').format('YYYY-MM-DD');
        var parsedDay = (0, dayjs_1.default)(nextFirstDay);
        if (showCalendar && isWeekView) {
            setMonthFirstDay(parsedDay);
            if (isWeekView) {
                setSelectDate(nextFirstDay);
                var _a = generateWeekData(parsedDay), _b = _a.currenWeekFirstDay, currenWeekFirstDay_2 = _b === void 0 ? null : _b, _c = _a.generateWeekDateList, generateWeekDateList_2 = _c === void 0 ? [] : _c;
                updateWeekView(0, currenWeekFirstDay_2, generateWeekDateList_2);
            }
            // 更新日期
            !stopPropagation && onDateSelected(nextFirstDay);
        }
        else if (!isWeekView && !showCalendar) {
            onSelectMonth === null || onSelectMonth === void 0 ? void 0 : onSelectMonth(nextFirstDay);
        }
        else if (!isWeekView && showCalendar) {
            // 更新某月视图
            var _d = generateMonthData((0, dayjs_1.default)(nextFirstDay)), _e = _d.currentMonthFirstDay, currentMonthFirstDay_2 = _e === void 0 ? null : _e, _f = _d.generateMonthDateList, generateMonthDateList_3 = _f === void 0 ? [] : _f;
            setMonthFirstDay((0, dayjs_1.default)(nextFirstDay));
            // toggleDate = dayjs(currentMonthFirstDay).format("YYYY-MM-DD");
            updateMonthView(0, currentMonthFirstDay_2, generateMonthDateList_3);
        }
    };
    var handleGetTerm = function (date) {
        var _a;
        var Y = Number((0, dayjs_1.default)(date).get('y'));
        var M = Number((0, dayjs_1.default)(date).get('M')) + 1;
        var D = Number((0, dayjs_1.default)(date).get('D'));
        var _b = (_a = calendar_min_js_1.default.getDateBySolar(Y, M, D)) !== null && _a !== void 0 ? _a : {}, term = _b.term, festival = _b.festival, lDayZH = _b.lDayZH;
        return term || festival || lDayZH;
    };
    var renderDotClassName = function (date) {
        var _a, _b;
        var parsedDay = (0, dayjs_1.default)(date).format('YYYY-MM-DD').valueOf();
        var dotColor = (_b = (_a = events.find(function (item) {
            var isMatch = false;
            var startDay = (0, dayjs_1.default)(item.startTime).startOf('d').format('YYYY-MM-DD').valueOf();
            var endDay = (0, dayjs_1.default)(item.endTime).endOf('d').format('YYYY-MM-DD').valueOf();
            isMatch = parsedDay >= startDay && parsedDay <= endDay;
            return isMatch;
        })) === null || _a === void 0 ? void 0 : _a['color']) !== null && _b !== void 0 ? _b : '';
        return dotColor;
    };
    (0, react_1.useEffect)(function () {
        if (!isWeekView) {
            //月日历, 如果是当月则默认选中当天
            // const mOfToday = dayjs().get('M');
            // const currentMNum = dayjs(monthFirstDay).get('M');
            // const isSame = mOfToday === currentMNum;
            var currentM = (0, dayjs_1.default)(monthFirstDay).format("YYYY-MM-DD");
            setSelectDate(currentM);
            onDateSelected(currentM);
        }
    }, [monthFirstDay, isWeekView]);
    (0, react_1.useEffect)(function () {
        if (showCalendar) {
            var formatDate = (0, dayjs_1.default)(initDate).format('YYYY-MM-DD');
            handleSetWeekIndex(current.currentDate, weekDateList);
            setSelectDate(formatDate);
        }
    }, []);
    // useEffect(() => {
    //   console.log('debug-initDate??', initDate);
    //   if (initDate) {
    //     handleYearMonthChange('', dayjs(initDate).format('YYYY-MM'), true);
    //   }
    // }, [initDate]);
    var handleViewTypeChange = function (val, mode) {
        if (mode === 'month') {
            var newDate = (0, dayjs_1.default)(val).date(1).format('YYYY-MM-DD');
            setSelectDate(newDate);
            onPanelToggle === null || onPanelToggle === void 0 ? void 0 : onPanelToggle(newDate, mode);
        }
    };
    var currentMonth = (0, react_1.useMemo)(function () {
        return (0, dayjs_1.default)(selectDate).format("YYYY年MM月");
    }, [selectDate]);
    var showWeekToggler = (0, react_1.useCallback)(function () {
        return ['timeGridDay', 'timeGridWeek'].includes(viewType) && isWeekView;
    }, [viewType, isWeekView]);
    (0, react_1.useImperativeHandle)(ref, function () { return ({
        handleYearMonthChange: handleYearMonthChange
    }); });
    return (react_1.default.createElement("div", { className: "schedule-view-wrap " + (isMobile ? 'mobile' : '') + " showFold" },
        react_1.default.createElement("div", { className: "schedule-list-section" },
            react_1.default.createElement("div", { className: "calendar-comp" },
                react_1.default.createElement("div", { className: "calendar-header" },
                    react_1.default.createElement("div", { className: "icon", onClick: function (e) { return handlePrev(e, "month"); } },
                        react_1.default.createElement(icons_1.DoubleLeftOutlined, { style: { fontSize: 18 } })),
                    showWeekToggler() ? (react_1.default.createElement("div", { className: "icon", onClick: function (e) { return handlePrev(e, "week"); } },
                        react_1.default.createElement(icons_1.LeftOutlined, { style: { fontSize: 18 } }))) : null,
                    react_1.default.createElement("div", { className: "date-time" },
                        react_1.default.createElement("div", { className: "picker-box" },
                            react_1.default.createElement("div", { className: "picker" },
                                react_1.default.createElement(antd_1.DatePicker, { style: { width: 240, cursor: 'pointer' }, picker: "month", onChange: handleYearMonthChange, onPanelChange: handleViewTypeChange, value: (0, moment_1.default)(selectDate), inputReadOnly: true, locale: zh_CN_1.default, allowClear: false, getPopupContainer: function () { return document.querySelector('.week-toggler-box.calendar'); }, popupClassName: "schedule-date-picker" }))),
                        react_1.default.createElement("div", { className: "date-text" }, currentMonth)),
                    showWeekToggler() ? (react_1.default.createElement("div", { className: "icon", onClick: function (e) { return handleNext(e, "week"); } },
                        react_1.default.createElement(icons_1.RightOutlined, { style: { fontSize: 18 } }))) : null,
                    react_1.default.createElement("div", { className: "icon", onClick: function (e) { return handleNext(e, "month"); } },
                        react_1.default.createElement(icons_1.DoubleRightOutlined, { style: { fontSize: 18 } }))),
                showCalendar ? (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("div", { className: "week-list" }, weekList.map(function (item) {
                        return (react_1.default.createElement("span", { className: "week-item", key: item.id }, item.name));
                    })),
                    react_1.default.createElement("div", { className: "calendar-comp-wrap pullHeight " + (isWeekView ? 'weekView' : 'monthView'), ref: function (e) { return (current.calendarRef = e); }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
                        react_1.default.createElement("div", { className: "calendar-comp-section", style: {
                                transform: "translateX(" + -moveIndex * 100 + "%)",
                            } }, (isWeekView ? weekDateList : mountDateList).map(function (item, index) {
                            return (react_1.default.createElement("div", { key: index, className: "calendar-list-day", style: {
                                    transform: "translateX(" + (index - 1 + moveIndex + (current.isTouch ? touch.x : 0)) * 100 + "%)",
                                    transitionDuration: (current.isTouch ? 0.1 : 0.3) + "s",
                                } }, item.map(function (date, ind) {
                                var isOtherMonthDay = date.isSame(monthFirstDay, "month");
                                var formDate = handleFormDate(date, "YYYY-MM-DD");
                                return (react_1.default.createElement("div", { key: ind, onClick: function () {
                                        handleSelectDate(formDate, isOtherMonthDay, ind);
                                    }, className: "item " + (isOtherMonthDay ? "current" : "other") },
                                    react_1.default.createElement("div", { className: "dayItem " + renderClassName(formDate) },
                                        date.format("DD"),
                                        react_1.default.createElement("div", { className: "lunar-date" }, handleGetTerm(formDate)),
                                        react_1.default.createElement("div", { className: "event-dot " + renderDotClassName(date) }))));
                            })));
                        })),
                        react_1.default.createElement("div", { className: "calendar-fold", onClick: function () { handleIsMonthView(); } },
                            react_1.default.createElement("div", null, alertText ? render === null || render === void 0 ? void 0 : render('tpl', { type: 'tpl', tpl: alertText }) : null),
                            isWeekView ? react_1.default.createElement(icons_1.DownOutlined, null) : react_1.default.createElement(icons_1.UpOutlined, null))))) : null))));
    // };
    // return (
    //   <>
    //     <div className="schedule-view-wrap">
    //       <div className="schedule-list-section">
    //         {/* 日历组件 */}
    //         <CalendarComp />
    //       </div>
    //     </div>
    //   </>
    // );
};
exports.default = (0, react_1.forwardRef)(ScheduleList);
//# sourceMappingURL=./components/Schedule/datePicker.js.map