lucid-ui/dist/cjs/components/CalendarMonth/examples/5.select-range.js

A UI component library from AppNexus.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var react_day_picker_1 = __importDefault(require("react-day-picker"));
var index_1 = require("../../../index");
var CalendarMonth_1 = __importDefault(require("../CalendarMonth"));
exports.default = create_react_class_1.default({
    getInitialState: function () {
        return {
            offset: 0,
            selectMode: 'from',
            from: null,
            to: null,
            cursor: null,
        };
    },
    handlePrev: function () {
        this.setState({
            offset: this.state.offset - 1,
        });
    },
    handleNext: function () {
        this.setState({
            offset: this.state.offset + 1,
        });
    },
    handleDayClick: function (date, _a) {
        var disabled = _a.disabled;
        if (disabled) {
            return;
        }
        var selectMode = this.state.selectMode;
        if (selectMode === 'to') {
            this.setState({
                to: date,
                cursor: date,
            });
        }
        else {
            this.setState({
                from: date,
                selectMode: 'to',
                cursor: date,
            });
        }
    },
    handleDayMouseEnter: function (day, _a) {
        var disabled = _a.disabled;
        if (disabled) {
            this.setState({
                cursor: null,
            });
        }
        else {
            this.setState({
                cursor: day,
            });
        }
    },
    handleDayMouseLeave: function () {
        this.setState({
            cursor: null,
        });
    },
    render: function () {
        var _a = this.state, selectMode = _a.selectMode, from = _a.from, to = _a.to, cursor = _a.cursor, offset = _a.offset;
        return (react_1.default.createElement("section", null,
            react_1.default.createElement("div", { style: { display: 'flex', maxWidth: 800 } },
                react_1.default.createElement(index_1.Button, { onClick: this.handlePrev }, '<'),
                react_1.default.createElement(CalendarMonth_1.default, { monthOffset: offset, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: react_day_picker_1.default.DateUtils.isPastDay }),
                react_1.default.createElement(CalendarMonth_1.default, { monthOffset: offset + 1, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: react_day_picker_1.default.DateUtils.isPastDay }),
                react_1.default.createElement(index_1.Button, { onClick: this.handleNext }, '>')),
            "from: ",
            from && from.toLocaleDateString('en-US'),
            ", to:",
            ' ',
            to && to.toLocaleDateString('en-US')));
    },
});
//# sourceMappingURL=5.select-range.js.map