lucid-ui/dist/cjs/components/CalendarMonth/examples/4.select-dates.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 lodash_1 = __importDefault(require("lodash"));
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,
            selectedDays: [],
            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 selectedDays = this.state.selectedDays;
        this.setState({
            selectedDays: lodash_1.default.xorWith(selectedDays, [date], react_day_picker_1.default.DateUtils.isSameDay),
            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, selectedDays = _a.selectedDays, cursor = _a.cursor, offset = _a.offset;
        return (react_1.default.createElement("section", null,
            react_1.default.createElement("div", { style: { display: 'flex', maxWidth: 468 } },
                react_1.default.createElement(index_1.Button, { onClick: this.handlePrev }, '<'),
                react_1.default.createElement(CalendarMonth_1.default, { monthOffset: offset, selectedDays: selectedDays, 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 }, '>')),
            "selectedDays:",
            ' ',
            lodash_1.default.map(selectedDays, function (selected) {
                return selected.toLocaleDateString('en-US');
            }).join(', ')));
    },
});
//# sourceMappingURL=4.select-dates.js.map