lucid-ui/dist/esm/components/CalendarMonth/CalendarMonth.stories.js

A UI component library from Xandr.

import React from 'react';
import createClass from 'create-react-class';
import CalendarMonth from './CalendarMonth';
import ReactDayPicker from 'react-day-picker';
import _ from 'lodash';
import Button from '../Button/Button';
export default {
    title: 'Private/CalendarMonth',
    component: CalendarMonth,
    parameters: {
        docs: {
            description: {
                component: CalendarMonth.peek.description,
            },
        },
    },
};
/* Selected Day */
export const SelectedDay = () => {
    const Component = createClass({
        render() {
            return (React.createElement("section", { style: { maxWidth: 400 } },
                React.createElement(CalendarMonth, { selectedDays: new Date() })));
        },
    });
    return React.createElement(Component, null);
};
SelectedDay.storyName = 'SelectedDay';
/* Disabled Days */
export const DisabledDays = () => {
    const Component = createClass({
        render() {
            return (React.createElement("section", { style: { maxWidth: 400 } },
                React.createElement(CalendarMonth, { disabledDays: ReactDayPicker.DateUtils.isPastDay })));
        },
    });
    return React.createElement(Component, null);
};
DisabledDays.storyName = 'DisabledDays';
/* Custom Daypicker Modifiers */
export const CustomDaypickerModifiers = () => {
    const Component = createClass({
        render() {
            return (React.createElement("section", { style: { maxWidth: 400 } },
                React.createElement(CalendarMonth, { modifiers: {
                        tuesday: (day) => day.getDay() === 2,
                    } }),
                React.createElement("style", null, `
					.lucid-CalendarMonth .DayPicker-Day--tuesday {
						border: 1px dotted gray;
					}
				`)));
        },
    });
    return React.createElement(Component, null);
};
CustomDaypickerModifiers.storyName = 'CustomDaypickerModifiers';
/* Select Dates */
export const SelectDates = () => {
    const Component = createClass({
        getInitialState() {
            return {
                offset: 0,
                selectedDays: [],
                cursor: null,
            };
        },
        handlePrev() {
            this.setState({
                offset: this.state.offset - 1,
            });
        },
        handleNext() {
            this.setState({
                offset: this.state.offset + 1,
            });
        },
        handleDayClick(date, { disabled }) {
            if (disabled) {
                return;
            }
            const { selectedDays } = this.state;
            this.setState({
                selectedDays: _.xorWith(selectedDays, [date], ReactDayPicker.DateUtils.isSameDay),
                cursor: date,
            });
        },
        handleDayMouseEnter(day, { disabled }) {
            if (disabled) {
                this.setState({
                    cursor: null,
                });
            }
            else {
                this.setState({
                    cursor: day,
                });
            }
        },
        handleDayMouseLeave() {
            this.setState({
                cursor: null,
            });
        },
        render() {
            const { selectedDays, cursor, offset } = this.state;
            return (React.createElement("section", null,
                React.createElement("div", { style: { display: 'flex', maxWidth: 468 } },
                    React.createElement(Button, { onClick: this.handlePrev }, '<'),
                    React.createElement(CalendarMonth, { monthOffset: offset, selectedDays: selectedDays, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: ReactDayPicker.DateUtils.isPastDay }),
                    React.createElement(Button, { onClick: this.handleNext }, '>')),
                "selectedDays:",
                ' ',
                _.map(selectedDays, (selected) => selected.toLocaleDateString('en-US')).join(', ')));
        },
    });
    return React.createElement(Component, null);
};
SelectDates.storyName = 'SelectDates';
/* Select Range */
export const SelectRange = () => {
    const Component = createClass({
        getInitialState() {
            return {
                offset: 0,
                selectMode: 'from',
                from: null,
                to: null,
                cursor: null,
            };
        },
        handlePrev() {
            this.setState({
                offset: this.state.offset - 1,
            });
        },
        handleNext() {
            this.setState({
                offset: this.state.offset + 1,
            });
        },
        handleDayClick(date, { disabled }) {
            if (disabled) {
                return;
            }
            const { selectMode } = this.state;
            if (selectMode === 'to') {
                this.setState({
                    to: date,
                    cursor: date,
                });
            }
            else {
                this.setState({
                    from: date,
                    selectMode: 'to',
                    cursor: date,
                });
            }
        },
        handleDayMouseEnter(day, { disabled }) {
            if (disabled) {
                this.setState({
                    cursor: null,
                });
            }
            else {
                this.setState({
                    cursor: day,
                });
            }
        },
        handleDayMouseLeave() {
            this.setState({
                cursor: null,
            });
        },
        render() {
            const { selectMode, from, to, cursor, offset } = this.state;
            return (React.createElement("section", null,
                React.createElement("div", { style: { display: 'flex', maxWidth: 800 } },
                    React.createElement(Button, { onClick: this.handlePrev }, '<'),
                    React.createElement(CalendarMonth, { monthOffset: offset, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: ReactDayPicker.DateUtils.isPastDay }),
                    React.createElement(CalendarMonth, { monthOffset: offset + 1, selectMode: selectMode, from: from, to: to, cursor: cursor, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, disabledDays: ReactDayPicker.DateUtils.isPastDay }),
                    React.createElement(Button, { onClick: this.handleNext }, '>')),
                "from: ",
                from && from.toLocaleDateString('en-US'),
                ", to:",
                ' ',
                to && to.toLocaleDateString('en-US')));
        },
    });
    return React.createElement(Component, null);
};
SelectRange.storyName = 'SelectRange';
/* Show Cursor */
export const ShowCursor = () => {
    const Component = createClass({
        UNSAFE_componentWillMount() {
            this.fromDate = new Date();
            this.fromDate.setDate(1);
        },
        render() {
            return (React.createElement("section", { style: { maxWidth: 400 } },
                "Cursor for day selectMode:",
                React.createElement(CalendarMonth, { cursor: new Date() }),
                "Cursor for range selectMode:",
                React.createElement(CalendarMonth, { selectMode: 'to', from: this.fromDate, cursor: new Date() })));
        },
    });
    return React.createElement(Component, null);
};
ShowCursor.storyName = 'ShowCursor';
//# sourceMappingURL=CalendarMonth.stories.js.map