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

A UI component library from Xandr.

import React from 'react';
import createClass from 'create-react-class';
import timemachine from 'timemachine';
import DateSelect from './DateSelect';
import Button from '../Button/Button';
export default {
    title: 'Controls/DateSelect',
    component: DateSelect,
    subcomponents: { 'DateSelect.CalendarMonth': DateSelect.CalendarMonth },
    parameters: {
        docs: {
            description: {
                component: DateSelect.peek.description,
            },
        },
        layout: 'centered',
    },
    args: DateSelect.defaultProps,
};
export const Basic = (args) => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    const Component = createClass({
        getInitialState() {
            return {
                selectedDate: null,
            };
        },
        handleSelectDate(date) {
            this.setState({
                selectedDate: date,
            });
        },
        render() {
            const { selectedDate } = this.state;
            return (React.createElement("section", { style: { maxWidth: 400 } },
                React.createElement(DateSelect, { ...args, selectedDays: selectedDate, onSelectDate: this.handleSelectDate }),
                "selected date:",
                ' ',
                selectedDate && selectedDate.toLocaleDateString('en-US')));
        },
    });
    return React.createElement(Component, null);
};
/* Select Range */
export const SelectRange = () => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    const Component = createClass({
        getInitialState() {
            return {
                selectMode: 'from',
                from: null,
                to: null,
            };
        },
        handleSelectDate(date) {
            const { selectMode } = this.state;
            this.setState({
                selectMode: 'to',
                [selectMode]: date,
            });
        },
        handleReset() {
            this.setState({
                selectMode: 'from',
                from: null,
                to: null,
            });
        },
        render() {
            const { selectMode, from, to } = this.state;
            return (React.createElement("section", { style: { maxWidth: 400 } },
                React.createElement(DateSelect, { from: from, to: to, selectMode: selectMode, onSelectDate: this.handleSelectDate }),
                React.createElement("div", null,
                    "from: ",
                    from && from.toLocaleDateString('en-US'),
                    ", to:",
                    ' ',
                    to && to.toLocaleDateString('en-US')),
                React.createElement(Button, { kind: 'primary', onClick: this.handleReset }, "Reset")));
        },
    });
    return React.createElement(Component, null);
};
/* Disabled Days */
export const DisabledDays = () => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    function isPastDay(date) {
        const day = new Date(date.getTime()).setHours(0, 0, 0, 0);
        const today = new Date().setHours(0, 0, 0, 0);
        return day < today;
    }
    return (React.createElement("section", { style: { maxWidth: 400 } },
        React.createElement(DateSelect, { disabledDays: isPastDay })));
};
/* Initial Month */
export const InitialMonth = () => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    return (React.createElement("section", { style: { maxWidth: 400 } },
        React.createElement(DateSelect, { initialMonth: new Date(2016, 1), selectedDays: new Date(2016, 1, 17) })));
};
/* Mutiple Months */
export const MutipleMonths = () => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    return (React.createElement(DateSelect, { selectedDays: new Date(), monthsShown: 3, calendarsRendered: 9, showDivider: true }));
};
MutipleMonths.parameters = {
    layout: 'padded',
};
/* Custom Modifiers */
export const CustomModifiers = () => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    return (React.createElement("section", { style: { maxWidth: 400 } },
        React.createElement(DateSelect, null,
            React.createElement(DateSelect.CalendarMonth, { modifiers: {
                    tuesday: (date) => date.getDay() === 2,
                } })),
        React.createElement("style", null, `
					.lucid-CalendarMonth .DayPicker-Day--tuesday {
						border: 1px dotted gray;
					}
				`)));
};
/* Relative Font Size */
export const RelativeFontSize = () => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    const Component = createClass({
        getInitialState() {
            return {
                selectedDate: null,
            };
        },
        handleSelectDate(date) {
            this.setState({
                selectedDate: date,
            });
        },
        render() {
            const { selectedDate } = this.state;
            return (React.createElement("section", null,
                React.createElement(DateSelect, { isFontSizeRelative: true, style: {
                        width: 600,
                        height: 400,
                    }, selectedDays: selectedDate, onSelectDate: this.handleSelectDate }),
                "selected date:",
                ' ',
                selectedDate && selectedDate.toLocaleDateString('en-US')));
        },
    });
    return React.createElement(Component, null);
};
/* Disable Slide Panel */
export const DisableSlidePanel = () => {
    timemachine.config({
        dateString: 'December 25, 2018 13:12:59',
    });
    const Component = createClass({
        getInitialState() {
            return {
                selectedDate: null,
            };
        },
        handleSelectDate(date) {
            this.setState({
                selectedDate: date,
            });
        },
        render() {
            const { selectedDate } = this.state;
            return (React.createElement("section", { style: { maxWidth: 800 } },
                React.createElement(DateSelect, { useSlidePanel: false, selectedDays: selectedDate, onSelectDate: this.handleSelectDate, monthsShown: 2, showDivider: true }),
                "selected date:",
                ' ',
                selectedDate && selectedDate.toLocaleDateString('en-US')));
        },
    });
    return React.createElement(Component, null);
};
//# sourceMappingURL=DateSelect.stories.js.map