@gdjiami/jm-mrc-components/es/calendar/index.js

移动端可复用组件库

import { __extends } from "tslib";
/**
 * 日历组件
 */
import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { virtualize } from 'react-swipeable-views-utils';
import SingleMonth from './SingleMonth';
import WeekTitle from './WeekTitle';
import { inMonth, monthDiff, Today } from './utils';
export * from './utils';
export * from './type';
export { SingleMonth };
var Swipe = virtualize(SwipeableViews);
var Calendar = /** @class */ (function (_super) {
    __extends(Calendar, _super);
    function Calendar(props) {
        var _this = _super.call(this, props) || this;
        /**
         * 基准日期。日历swiper根据这个基准日期为index，向前向后计算日期
         * 默认为惊天
         */
        _this.state = {
            base: Today,
            index: 0,
            suppressError: false,
        };
        _this.monthCached = {};
        _this.navigate2Today = function () {
            var onChange = _this.props.onChange;
            if (onChange) {
                onChange(Today);
            }
        };
        _this.resetIndex = function (date) {
            // 检查是不否需要更新index
            var diff = monthDiff(date, _this.state.base);
            if (_this.state.index !== diff) {
                _this.setState({ index: diff });
                if (_this.props.onMonthChange) {
                    _this.props.onMonthChange(date);
                }
            }
        };
        _this.renderMonth = function (params) {
            var _a = _this.props, date = _a.date, onChange = _a.onChange, monthStyle = _a.monthStyle, onGetEventsForMonth = _a.onGetEventsForMonth, events = _a.events, legalHolidayEvents = _a.legalHolidayEvents;
            var _b = _this.state, base = _b.base, suppressError = _b.suppressError;
            // 相对于当前月渲染slide
            var month = _this.getMonth(params.index, base);
            var yearMonth = month.getFullYear() + "-" + (month.getMonth() + 1);
            var eventsForMonth = events && events[yearMonth];
            var legalHolidayEventsForMonth = legalHolidayEvents && legalHolidayEvents[yearMonth];
            return (React.createElement(SingleMonth, { key: params.key, date: month, showGetEventError: !suppressError, onGetEventsForMonth: onGetEventsForMonth, events: eventsForMonth, legalHolidayEvents: legalHolidayEventsForMonth, onSuppressError: _this.handleSuppressError, currentSelect: date, onSelect: onChange, style: monthStyle }));
        };
        _this.handleSuppressError = function () {
            _this.setState({ suppressError: true });
            window.sessionStorage.setItem('suppressCalendarError', 'true');
        };
        _this.handleIndexChange = function (index) {
            var _a = _this.props, date = _a.date, onChange = _a.onChange;
            var month = _this.getMonth(index, _this.state.base);
            var newDate = date;
            if (inMonth(month, Today)) {
                newDate = Today;
            }
            else {
                var startOfMonth = new Date(month);
                startOfMonth.setDate(1);
                newDate = startOfMonth;
            }
            // 切换之后，存在一定几率会导致触摸穿透, 即点击到日历，导致日期还停留在以前
            // 所以这里延后触发onChange事件
            _this.changeIndex(index, newDate);
            window.setTimeout(function () {
                if (onChange) {
                    onChange(newDate);
                }
            }, 200);
        };
        _this.getMonth = function (index, relative) {
            if (_this.monthCached[index]) {
                return _this.monthCached[index];
            }
            var month = new Date(relative);
            month.setDate(1);
            month.setMonth(month.getMonth() + index);
            return (_this.monthCached[index] = month);
        };
        var suppressError = window.sessionStorage.getItem('suppressCalendarError');
        if (suppressError) {
            _this.setState({
                suppressError: suppressError === 'true',
            });
        }
        return _this;
    }
    Calendar.prototype.componentDidMount = function () {
        if (this.props.date) {
            this.rebaseIfNeed(Today, this.props.date);
        }
    };
    Calendar.prototype.componentDidUpdate = function (preProps) {
        if (preProps.date !== this.props.date) {
            this.rebaseIfNeed(preProps.date, this.props.date);
        }
    };
    Calendar.prototype.render = function () {
        var _a = this.props, date = _a.date, weekTitleStyle = _a.weekTitleStyle, extraData = _a.extraData, animateHeight = _a.animateHeight;
        var _b = this.state, base = _b.base, index = _b.index, suppressError = _b.suppressError;
        return (React.createElement("div", { className: "jm-calendar" },
            React.createElement(WeekTitle, { style: weekTitleStyle }),
            React.createElement(Swipe
            // base 变动应该重新渲染日历
            , { 
                // base 变动应该重新渲染日历
                key: base.getTime(), className: "jm-calendar__swipe", slideRenderer: this.renderMonth, overscanSlideAfter: 4, overscanSlideBefore: 3, index: index, onChangeIndex: this.handleIndexChange, animateHeight: animateHeight, enableMouseEvents: true, "data-date": date, "data-showerror": !suppressError, "data-extra": extraData })));
    };
    /**
     * 如果日期变动超过两个月。即不是正常的滑动行为，这时候应该重设base
     * @param prev
     * @param current
     */
    Calendar.prototype.rebaseIfNeed = function (prev, current) {
        if (prev === void 0) { prev = Today; }
        if (current === void 0) { current = Today; }
        var diff = monthDiff(prev, current);
        // 跨度
        if (Math.abs(diff) > 2) {
            // 清空缓存
            this.monthCached = {};
            this.setState({ base: current });
        }
        this.resetIndex(current);
    };
    Calendar.prototype.changeIndex = function (index, date) {
        this.setState({ index: index });
        if (this.props.onMonthChange) {
            this.props.onMonthChange(date);
        }
    };
    return Calendar;
}(React.Component));
export default Calendar;