SlimRangeCalendar.jsx

import React from 'react';
import PropTypes from 'prop-types';
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';

import classnames from 'classnames';
import CalendarPart from 'rc-calendar/lib/range-calendar/CalendarPart';
import TodayButton from 'rc-calendar/lib/calendar/TodayButton';
import OkButton from 'rc-calendar/lib/calendar/OkButton';
import TimePickerButton from 'rc-calendar/lib/calendar/TimePickerButton';
import { getTodayTime, isAllowedDate } from 'rc-calendar/lib/util/';


import 'rc-calendar/assets/index.css';


export default class SlimRangeCalendar extends RangeCalendar {
    render() {
        const { props, state } = this;
        const {
            prefixCls, dateInputPlaceholder,
            timePicker, showOk, locale, showClear,
            showToday, type,
        } = props;
        const {
            hoverValue,
            selectedValue,
            mode,
            showTimePicker,
        } = state;
        const className = {
            [props.className]: !!props.className,
            [prefixCls]: 1,
            [`${prefixCls}-hidden`]: !props.visible,
            [`${prefixCls}-range`]: 1,
            [`${prefixCls}-show-time-picker`]: showTimePicker,
            [`${prefixCls}-week-number`]: props.showWeekNumber,
        };
        const classes = classnames(className);
        const newProps = {
            selectedValue: state.selectedValue,
            onSelect: this.onSelect,
            onDayHover: type === 'start' && selectedValue[1] ||
                type === 'end' && selectedValue[0] || !!hoverValue.length ?
                this.onDayHover : undefined,
        };

        let placeholder1;
        let placeholder2;

        if (dateInputPlaceholder) {
            if (Array.isArray(dateInputPlaceholder)) {
                [placeholder1, placeholder2] = dateInputPlaceholder;
            } else {
                placeholder1 = placeholder2 = dateInputPlaceholder;
            }
        }
        const showOkButton = showOk === true || showOk !== false && !!timePicker;
        const cls = classnames({
            [`${prefixCls}-footer`]: true,
            [`${prefixCls}-range-bottom`]: true,
            [`${prefixCls}-footer-show-ok`]: showOkButton,
        });

        const startValue = this.getStartValue();
        const endValue = this.getEndValue();
        const todayTime = getTodayTime(startValue);
        const thisMonth = todayTime.month();
        const thisYear = todayTime.year();
        const isTodayInView =
            startValue.year() === thisYear && startValue.month() === thisMonth ||
            endValue.year() === thisYear && endValue.month() === thisMonth;
        const nextMonthOfStart = startValue.clone().add(1, 'months');
        const isClosestMonths = nextMonthOfStart.year() === endValue.year() &&
            nextMonthOfStart.month() === endValue.month();
        return (
            <div
                ref={this.saveRoot}
                className={classes}
                style={props.style}
                tabIndex="0"
            >
                {props.renderSidebar()}
                <div className={`${prefixCls}-panel`}>
                    {showClear && selectedValue[0] && selectedValue[1] ?
                        <a
                            className={`${prefixCls}-clear-btn`}
                            role="button"
                            title={locale.clear}
                            onClick={this.clear}
                        /> : null}
                    <div
                        className={`${prefixCls}-date-panel`}
                        onMouseLeave={type !== 'both' ? this.onDatePanelLeave : undefined}
                        onMouseEnter={type !== 'both' ? this.onDatePanelEnter : undefined}
                    >
                        <CalendarPart
                            {...props}
                            {...newProps}
                            hoverValue={hoverValue}
                            direction="left"
                            disabledTime={this.disabledStartTime}
                            disabledMonth={this.disabledStartMonth}
                            format={this.getFormat()}
                            value={startValue}
                            mode={mode[0]}
                            placeholder={placeholder1}
                            onInputSelect={this.onStartInputSelect}
                            onValueChange={this.onStartValueChange}
                            onPanelChange={this.onStartPanelChange}
                            showDateInput={this.props.showDateInput}
                            timePicker={timePicker}
                            showTimePicker={showTimePicker}
                            enablePrev
                            enableNext
                        />
                    </div>
                    <div className={cls}>
                        {props.renderFooter()}
                        {showToday || props.timePicker || showOkButton ? (
                            <div className={`${prefixCls}-footer-btn`}>
                                {showToday ? (
                                    <TodayButton
                                        {...props}
                                        disabled={isTodayInView}
                                        value={state.value[0]}
                                        onToday={this.onToday}
                                        text={locale.backToToday}
                                    />
                                ) : null}
                                {props.timePicker ?
                                    <TimePickerButton
                                        {...props}
                                        showTimePicker={showTimePicker}
                                        onOpenTimePicker={this.onOpenTimePicker}
                                        onCloseTimePicker={this.onCloseTimePicker}
                                        timePickerDisabled={!this.hasSelectedValue() || hoverValue.length}
                                    /> : null}
                                {showOkButton ?
                                    <OkButton
                                        {...props}
                                        onOk={this.onOk}
                                        okDisabled={!this.isAllowedDateAndTime(selectedValue) ||
                                            !this.hasSelectedValue() || hoverValue.length
                                        }
                                    /> : null}
                            </div>
                        ) : null}
                    </div>
                </div>
            </div>
        );
    }
}