@gdjiami/jm-mrc-components/es/date-time-picker/index.js

移动端可复用组件库

import { __extends, __read } from "tslib";
/**
 * 时间选择器
 */
import React from 'react';
import MultiPicker from '@gdjiami/rmc-picker/es/MultiPicker';
import Picker from '@gdjiami/rmc-picker/es/Picker';
import Modal from 'antd-mobile/es/modal';
import { isSameDay, Today, isSameHour } from '../calendar';
import { format, formatTime } from '../date-picker/utils';
var defaultDisabledBefore = new Date(0);
var defaultDisabledAfter = new Date(2100, 1, 1);
var DateTimePicker = /** @class */ (function (_super) {
    __extends(DateTimePicker, _super);
    function DateTimePicker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            dateList: genDateList(_this.props.value || Today, undefined, _this.props.disabledBefore, _this.props.disabledAfter),
            hourList: genHourList(_this.props.disabledBefore, _this.props.disabledAfter),
            minuteList: genMinList(_this.props.disabledBefore, _this.props.disabledAfter),
            visible: false,
            base: _this.props.value || Today,
            value: normalizeValue(_this.props.value || Today),
        };
        _this.handleOk = function () {
            _this.setState({ visible: false });
        };
        _this.handleSelectChange = function (_a) {
            var _b = __read(_a, 3), date = _b[0], hour = _b[1], min = _b[2];
            var value = parseValue(date);
            value.setHours(hour);
            value.setMinutes(min);
            if (_this.props.onChange) {
                _this.props.onChange(value);
            }
        };
        _this.handleShow = function () {
            _this.setState({ visible: true, lastValue: _this.props.value });
        };
        _this.handleCancel = function () {
            _this.setState({
                visible: false,
            });
            if (_this.props.onChange) {
                _this.props.onChange(_this.state.lastValue);
            }
        };
        return _this;
    }
    DateTimePicker.getDerivedStateFromProps = function (nextProps, prevState) {
        var res = {};
        if (nextProps.value &&
            ((nextProps.value !== prevState.base &&
                !isSameDay(prevState.base, nextProps.value)) ||
                nextProps.disabledBefore !== prevState.dateList.before ||
                nextProps.disabledAfter !== prevState.dateList.after)) {
            res.dateList = genDateList(nextProps.value, undefined, nextProps.disabledBefore, nextProps.disabledAfter);
        }
        if (nextProps.disabledBefore !== prevState.dateList.before ||
            nextProps.disabledAfter !== prevState.dateList.after) {
            res.hourList = genHourList(nextProps.disabledBefore, nextProps.disabledAfter);
            res.minuteList = genMinList(nextProps.disabledBefore, nextProps.disabledAfter);
        }
        if (nextProps.value && nextProps.value !== prevState.base) {
            res.value = normalizeValue(nextProps.value);
            res.base = nextProps.value;
        }
        return res;
    };
    DateTimePicker.prototype.render = function () {
        var _a = this.props, children = _a.children, title = _a.title;
        var _b = this.state, dateList = _b.dateList, visible = _b.visible, value = _b.value, base = _b.base;
        return (React.createElement(React.Fragment, null,
            children(base, this.handleShow),
            React.createElement(Modal, { transparent: true, maskClosable: false, visible: !!visible, className: "jm-date-picker", wrapClassName: "jm-date-picker__wrapper" },
                React.createElement("div", { className: "jm-date-picker__header-bar" },
                    React.createElement("div", { className: "jm-date-picker__action", onClick: this.handleCancel }, "\u53D6\u6D88"),
                    React.createElement("div", { className: "jm-date-picker__title" }, title),
                    React.createElement("div", { className: "jm-date-picker__action", onClick: this.handleOk }, "\u786E\u5B9A")),
                React.createElement("header", { className: "jm-date-picker__header" },
                    React.createElement("div", { className: "jm-date-picker__date-display" }, format(base, false, true)),
                    React.createElement("div", { className: "jm-date-picker__time-display" }, formatTime(base))),
                React.createElement(MultiPicker, { selectedValue: value, onValueChange: this.handleSelectChange, className: "jm-date-picker__body" },
                    React.createElement(Picker, { className: "jm-date-picker__date" }, dateList.list.map(function (i) { return (React.createElement(Picker.Item, { value: i.value, key: i.label }, i.label)); })),
                    React.createElement(Picker, null, this.renderHour()),
                    React.createElement(Picker, null, this.renderMin())))));
    };
    DateTimePicker.prototype.renderHour = function () {
        var _a = this.props, disabledAfter = _a.disabledAfter, disabledBefore = _a.disabledBefore;
        var _b = this.state, hourList = _b.hourList, base = _b.base;
        var list = disabledBefore && isSameDay(disabledBefore, base)
            ? hourList.before
            : disabledAfter && isSameDay(disabledAfter, base)
                ? hourList.after
                : hourList.normal;
        return list.map(function (i) { return (React.createElement(Picker.Item, { value: i.value, key: i.label }, i.label)); });
    };
    DateTimePicker.prototype.renderMin = function () {
        var _a = this.props, disabledAfter = _a.disabledAfter, disabledBefore = _a.disabledBefore;
        var _b = this.state, minuteList = _b.minuteList, base = _b.base;
        var list = disabledBefore && isSameHour(disabledBefore, base)
            ? minuteList.before
            : disabledAfter && isSameHour(disabledAfter, base)
                ? minuteList.after
                : minuteList.normal;
        return list.map(function (i) { return (React.createElement(Picker.Item, { value: i.value, key: i.label }, i.label)); });
    };
    DateTimePicker.defaultProps = {
        title: '',
    };
    return DateTimePicker;
}(React.Component));
export default DateTimePicker;
/**
 * 将时间转换为picker可以接受的形式
 */
function normalizeValue(date) {
    return [genValue(date), date.getHours(), date.getMinutes()];
}
function genValue(date) {
    return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate();
}
function parseValue(str) {
    var _a = __read(str.split('/').map(function (i) { return parseInt(i); }), 3), year = _a[0], month = _a[1], date = _a[2];
    return new Date(year, month, date);
}
/**
 * 生成日期列表
 */
function genDateList(date, length, disabledBefore, disabledAfter) {
    if (length === void 0) { length = 100; }
    var before = disabledBefore || defaultDisabledBefore;
    var after = disabledAfter || defaultDisabledAfter;
    var list = [{ label: format(date), value: genValue(date) }];
    var prev = new Date(date);
    var next = new Date(date);
    var prevFinished = false;
    var nextFinished = false;
    for (var i = 1; i <= length; i++) {
        if (!prevFinished) {
            prev = new Date(prev);
            prev.setDate(prev.getDate() - 1);
            if (prev < before && !isSameDay(prev, before)) {
                prevFinished = true;
            }
            else {
                list.unshift({ label: format(prev), value: genValue(prev) });
            }
        }
        if (!nextFinished) {
            next = new Date(next);
            next.setDate(next.getDate() + 1);
            if (next > after && !isSameDay(next, after)) {
                nextFinished = true;
            }
            else {
                list.push({ label: format(next), value: genValue(next) });
            }
        }
        if (prevFinished && nextFinished) {
            break;
        }
    }
    return { list: list, before: disabledBefore, after: disabledAfter };
}
function genHourList(disabledBefore, disabledAfter) {
    if (disabledBefore === void 0) { disabledBefore = defaultDisabledBefore; }
    if (disabledAfter === void 0) { disabledAfter = defaultDisabledAfter; }
    var before = [];
    var after = [];
    var normal = [];
    var sameDay = isSameDay(disabledBefore, disabledAfter);
    for (var i = disabledBefore.getHours(), l = sameDay ? disabledAfter.getHours() + 1 : 24; i < l; i++) {
        before.push({
            label: ('0' + i).slice(-2),
            value: i,
        });
    }
    if (sameDay) {
        after = before;
    }
    else {
        for (var i = 0; i < disabledAfter.getHours() + 1; i++) {
            after.push({
                label: ('0' + i).slice(-2),
                value: i,
            });
        }
    }
    for (var i = 0; i < 24; i++) {
        normal.push({
            label: ('0' + i).slice(-2),
            value: i,
        });
    }
    return { before: before, after: after, normal: normal, inSameComponent: sameDay };
}
function genMinList(disabledBefore, disabledAfter) {
    if (disabledBefore === void 0) { disabledBefore = defaultDisabledBefore; }
    if (disabledAfter === void 0) { disabledAfter = defaultDisabledAfter; }
    var before = [];
    var after = [];
    var normal = [];
    var sameHour = isSameDay(disabledBefore, disabledAfter) &&
        disabledBefore.getHours() === disabledAfter.getHours();
    for (var i = disabledBefore.getMinutes() + 1, l = sameHour ? disabledAfter.getMinutes() : 60; i < l; i++) {
        before.push({
            label: ('0' + i).slice(-2),
            value: i,
        });
    }
    if (sameHour) {
        after = before;
    }
    else {
        for (var i = 0; i < disabledAfter.getMinutes(); i++) {
            after.push({
                label: ('0' + i).slice(-2),
                value: i,
            });
        }
    }
    for (var i = 0; i < 60; i++) {
        normal.push({
            label: ('0' + i).slice(-2),
            value: i,
        });
    }
    return { before: before, after: after, normal: normal, inSameComponent: sameHour };
}