@ttk/component/src/datePicker/index.js

ttk组件库

import React from 'react'
import { DatePicker } from 'antd'
import classNames from 'classnames'
import moment from 'moment'

function momentToString(v, format) {
    if (!v)
        return v
    return moment(v).format(format)
}
function DatePickerComponent(props) {
    let className = classNames({
        'mk-datepicker': true,
        [props.className]: !!props.className
    })
    return <DatePicker {...props} className={className} />
}

class TimerPicker extends React.Component {
    constructor(props) {
        super(props);
        this.lastVaule = null; // 上次打开picker的value，用于非“确定”关闭时，设置回原值
        this.state = {
            open: false,
            value: moment(props.value, props.format || 'HH:mm:ss'),
        }
    }

    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            this.setState({
                value: moment(nextProps.value, nextProps.format || 'HH:mm:ss'),
            });
        }
    }

    onOpenChange = (open) => {
        if (!open) {
            const newState = { open };
            if (this.lastVaule) {
                newState.value = moment(this.lastVaule, this.props.format || 'HH:mm:ss');
                if (this.props.onChange) {
                    this.props.onChange(newState.value, this.lastVaule);
                }
                this.lastVaule = null;
            }
            // 弹窗关闭时，设置回原始值
            this.setState(newState);
        } else {
            this.lastVaule = this.props.value;
            this.setState({ open }, this.openTimerPicker)
        }
        if (this.props.onOpenChange) {
            this.props.onOpenChange(open);
        }
    }

    /**
     * 自动切换时间模式
     */
    openTimerPicker = () => {
        if (this.state.open) {
            const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
            if (timeBtn) {
                this.setTimeBtn(timeBtn);
            } else {
                this.interval = setInterval(() => {
                    const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
                    if (timeBtn) {
                        this.setTimeBtn(timeBtn);
                        clearInterval(this.interval);
                    }
                }, 16);
            }
        }
    }

    setTimeBtn = (timeBtn) => {
        if (timeBtn.style.visibility !== 'hidden') {
            timeBtn.style.visibility = 'hidden';
        }
    }

    onChange = (date, dateString) => {
        console.log(date, dateString);
        this.setState({ value: date })
        if (this.props.onChange) {
            this.props.onChange(date, dateString);
        }
    }

    onOk = (date) => {
        this.lastVaule = null;
        const dateString = date.format(this.props.format || 'HH:mm:ss');
        this.setState({ value: date })
        if (this.props.onOk) {
            this.props.onOk(date, dateString);
        }
    }

    render() {
        let className = classNames({
            'mk-timer-picker': true,
            [this.props.className]: !!this.props.className
        })
        const { value, open } = this.state
        // 这里声明了未使用的props，是为了避免...rest覆盖，不要删掉
        const { mode: pMode, value: pValue, showTime, onOpenChange, onChange, onOk, ...rest } = this.props;
        return (
            <DatePicker
                value={value}
                open={open}
                mode='time'
                format="HH:mm:ss"
                showTime
                onOpenChange={this.onOpenChange}
                onChange={this.onChange}
                onOk={this.onOk}
                {...rest}
                className={className}
            />
        );
    }
}

class YearPicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: 'year',
            open: false,
            value: props.value,
        }
    }

    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            this.setState({
                value: nextProps.value,
            });
        }
    }

    onOpenChange = (open) => {
        this.setState({ open });
        if (this.props.onOpenChange) {
            this.props.onOpenChange(open);
        }
    }

    onPanelChange = (value, mode) => {
        if (mode) {
            // 先设值，使切换模式后DatePicker内日期显示正常，再设置回原值
            this.setState({ value, mode }, () => { this.setState({value: this.props.value}) });
        } else {
            // mode为空，选择了年
            this.setState({ value, open: false });
            if (this.props.onChange) {
                this.props.onChange(value, momentToString(value, this.props.format || 'YYYY'));
            }
        }
        if (this.props.onPanelChange) {
            this.props.onPanelChange(value, mode);
        }
    }

    onChange = (date, dateString) => {
        this.setState({ value: date })
        if (this.props.onChange) {
            this.props.onChange(date, dateString);
        }
    }

    render() {
        let className = classNames({
            'mk-yearpicker': true,
            [this.props.className]: !!this.props.className
        })
        const { mode, open, value } = this.state
        const { mode: pMode, value: pValue, onOpenChange, onPanelChange, onChange, ...rest } = this.props;
        return (
            <DatePicker
                value={value}
                open={open}
                mode={mode}
                format="YYYY"
                onOpenChange={this.onOpenChange}
                onPanelChange={this.onPanelChange}
                onChange={this.onChange}
                {...rest}
                className={className}
            />
        );
    }
}

class MonthRangePicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: ['month', 'month'],
            value: props.value || [],
        }
    }

    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            this.setState({
                value: nextProps.value || [],
            });
        }
    }

    onOpenChange = (open) => {
        if (!open) {
            // 弹窗关闭时，设置回原始值
            this.setState({ value: this.props.value })
        } else {
            this.dismissTimeBtn();
        }
        if (this.props.onOpenChange) {
            this.props.onOpenChange(open);
        }
    }

    onPanelChange = (value, mode) => {
        this.setState({
            value,
            mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]],
        });
        if (this.props.onPanelChange) {
            this.props.onPanelChange(value, mode);
        }
    }

    dismissTimeBtn = () => {
        const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
        if (timeBtn) {
            timeBtn.style.visibility = 'hidden';
        } else {
            this.interval = setInterval(() => {
                const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
                if (timeBtn) {
                    timeBtn.style.visibility = 'hidden';
                    clearInterval(this.interval);
                }
            }, 16);
        }
    }

    onChange = (dates, dateStrings) => {
        this.setState({ value: dates })
        if (this.props.onChange) {
            this.props.onChange(dates, dateStrings);
        }
    }

    onOk = (dates) => {
        if (this.props.onChange) {
            this.props.onChange(dates, [
                momentToString(dates[0], this.props.format || 'YYYY-MM'),
                momentToString(dates[1], this.props.format || 'YYYY-MM')
            ]);
        }
    }

    render() {
        let className = classNames({
            'mk-month-range-picker': true,
            [this.props.className]: !!this.props.className
        })
        const { mode, value } = this.state
        const { mode: pMode, value: pValue, format, onOpenChange, onPanelChange, onChange, onOk, ...rest } = this.props;
        return (
            <DatePicker.RangePicker
                value={value}
                mode={mode}
                format={format || "YYYY-MM"}
                showTime
                onOpenChange={this.onOpenChange}
                onPanelChange={this.onPanelChange}
                onChange={this.onChange}
                onOk={this.onOk}
                {...rest}
                className={className}
            />
        );
    }
}

class YearRangePicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: ['year', 'year'],
            value: props.value || [],
        }
    }

    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            this.setState({
                value: nextProps.value || [],
            });
        }
    }

    onOpenChange = (open) => {
        if (!open) {
            // 弹窗关闭时，设置回原始值
            this.setState({ value: this.props.value })
        } else {
            this.dismissTimeBtn();
        }
        this.setState({ open })
        if (this.props.onOpenChange) {
            this.props.onOpenChange(open);
        }
    }

    onPanelChange = (value, mode) => {
        this.setState({ value, mode }, ()=>{
            this.setState({
                mode: [mode[0] === null ? 'year' : mode[0], mode[1] === null ? 'year' : mode[1]],
            });
        });
        if (this.props.onPanelChange) {
            this.props.onPanelChange(value, mode);
        }
    }

    dismissTimeBtn = () => {
        const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
        if (timeBtn) {
            timeBtn.style.visibility = 'hidden';
        } else {
            this.interval = setInterval(() => {
                const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
                if (timeBtn) {
                    timeBtn.style.visibility = 'hidden';
                    clearInterval(this.interval);
                }
            }, 16);
        }
    }

    onChange = (dates, dateStrings) => {
        this.setState({ value: dates })
        if (this.props.onChange) {
            this.props.onChange(dates, dateStrings);
        }
    }

    onOk = (dates) => {
        if (this.props.onChange) {
            if (dates[0].isAfter(dates[1])) {
                dates.reverse();
            }
            this.props.onChange(dates, [
                momentToString(dates[0], this.props.format || 'YYYY'),
                momentToString(dates[1], this.props.format || 'YYYY')
            ]);
        }
    }

    render() {
        let className = classNames({
            'mk-year-range-picker': true,
            [this.props.className]: !!this.props.className
        })
        const { mode, value } = this.state
        const { mode: pMode, value: pValue, onOpenChange, onPanelChange, onChange, onOk, ...rest } = this.props;
        return (
            <DatePicker.RangePicker
                value={value}
                mode={mode}
                format="YYYY"
                showTime
                onOpenChange={this.onOpenChange}
                onPanelChange={this.onPanelChange}
                onChange={this.onChange}
                onOk={this.onOk}
                {...rest}
                className={className}
            />
        );
    }
}

class TimerRangePicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            value: this.timeStringsToMoment(props.value, props.format),
        }
    }

    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            this.setState({
                value: this.timeStringsToMoment(nextProps.value, nextProps.format),
            });
        }
    }
    
    timeStringsToMoment = (dateStrings, format = 'HH:mm:ss') => {
        const values = [];
        if (Array.isArray(dateStrings) && dateStrings.length === 2) {
            values.push(moment(dateStrings[0], format));
            values.push(moment(dateStrings[1], format));
        }
        return values;
    }

    momentToTimeStrings = (dates, format = 'HH:mm:ss') => {
        const values = [];
        if (Array.isArray(dates) && dates.length === 2) {
            values.push(dates[0].format(format));
            values.push(dates[1].format(format));
        }
        return values;
    }

    onOpenChange = (open) => {
        this.setState({ open }, this.openTimerPicker);
        if (this.props.onOpenChange) {
            this.props.onOpenChange(open);
        }
    }

    /**
     * 自动切换时间模式
     */
    openTimerPicker = () => {
        if (this.state.open) {
            const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
            if (timeBtn) {
                this.setTimeBtn(timeBtn);
            } else {
                this.interval = setInterval(() => {
                    const timeBtn = document.querySelector('.ant-calendar-time-picker-btn');
                    if (timeBtn) {
                        this.setTimeBtn(timeBtn);
                        clearInterval(this.interval);
                    }
                }, 16);
            }
        }
    }

    setTimeBtn = (timeBtn) => {
        if (timeBtn.style.visibility !== 'hidden') {
            timeBtn.click();
            timeBtn.style.visibility = 'hidden';
        }
    }

    onOk = (dates) => {
        if (dates[0].isAfter(dates[1])) {
            dates.reverse();
        }
        this.setState({ value: dates });
        if (this.props.onChange) {
            this.props.onChange(dates, this.momentToTimeStrings(dates, this.props.format));
        }
    }

    render() {
        let className = classNames({
            'mk-timer-range-picker': true,
            [this.props.className]: !!this.props.className
        })
        const { value, open } = this.state
        const { mode: pMode, value: pValue, onOpenChange, onChange, ...rest } = this.props;
        return (
            <DatePicker.RangePicker
                value={value}
                open={open}
                format="HH:mm:ss"
                showTime
                onOpenChange={this.onOpenChange}
                onOk={this.onOk}
                {...rest}
                className={className}
            />
        );
    }
}

DatePickerComponent.TimerRangePicker = TimerRangePicker
DatePickerComponent.MonthRangePicker = MonthRangePicker
DatePickerComponent.YearRangePicker = YearRangePicker
DatePickerComponent.TimerPicker = TimerPicker
DatePickerComponent.YearPicker = YearPicker
DatePickerComponent.MonthPicker = DatePicker.MonthPicker
DatePickerComponent.RangePicker = DatePicker.RangePicker
DatePickerComponent.momentToString = momentToString
DatePickerComponent.moment = moment

export default DatePickerComponent