@hipay/hipay-material-ui 1.0.0-beta.1

package/es/HiDatePicker/HiDateRangePicker.js

@@ -0,0 +1,565 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+//  weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { formatDate, parseDate } from 'react-day-picker/moment';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import withStyles from '../styles/withStyles';
+import { capitalizeFirstLetter } from '../utils/helpers';
+import Caption from './Caption';
+import Overlay from './Overlays/Overlay';
+import TimePickerOverlay from './Overlays/TimePickerOverlay';
+import MonthPickerOverlay from './Overlays/MonthPickerOverlay';
+import YearPickerOverlay from './Overlays/YearPickerOverlay';
+import Navbar from './Navbar';
+import Weekday from './Weekday';
+import { HiTextField } from '../HiForm';
+import styles from './stylesheet';
+
+class HiDateRangePicker extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.state = {
+            fromOpenedPanel: 'calendar',
+            fromCurrentMonth: props.from ? props.from : new Date(),
+            toOpenedPanel: 'calendar',
+            toCurrentMonth: props.to ? props.to : new Date()
+        };
+
+        this.handleReset = this.handleReset.bind(this);
+        this.handleDayChange = this.handleDayChange.bind(this);
+        this.handleDayChangeFrom = this.handleDayChangeFrom.bind(this);
+        this.handleDayChangeTo = this.handleDayChangeTo.bind(this);
+
+        this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
+        this.handleCurrentMonthChangeFrom = this.handleCurrentMonthChangeFrom.bind(this);
+        this.handleCurrentMonthChangeTo = this.handleCurrentMonthChangeTo.bind(this);
+        this.handleTimeChange = this.handleTimeChange.bind(this);
+        this.handleCalendarClick = this.handleCalendarClick.bind(this);
+        this.handleCalendarClickFrom = this.handleCalendarClickFrom.bind(this);
+        this.handleCalendarClickTo = this.handleCalendarClickTo.bind(this);
+        this.handleClockClick = this.handleClockClick.bind(this);
+        this.handleClockClickFrom = this.handleClockClickFrom.bind(this);
+        this.handleClockClickTo = this.handleClockClickTo.bind(this);
+        this.handleMonthClick = this.handleMonthClick.bind(this);
+        this.handleMonthClickFrom = this.handleMonthClickFrom.bind(this);
+        this.handleMonthClickTo = this.handleMonthClickTo.bind(this);
+        this.handleYearClick = this.handleYearClick.bind(this);
+        this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
+        this.handleYearClickTo = this.handleYearClickTo.bind(this);
+
+        this.openPanel = this.openPanel.bind(this);
+
+        this.renderCaption = this.renderCaption.bind(this);
+        this.renderCaptionFrom = this.renderCaptionFrom.bind(this);
+        this.renderCaptionTo = this.renderCaptionTo.bind(this);
+
+        this.renderNavbar = this.renderNavbar.bind(this);
+        this.renderNavbarFrom = this.renderNavbarFrom.bind(this);
+        this.renderNavbarTo = this.renderNavbarTo.bind(this);
+
+        this.renderOverlay = this.renderOverlay.bind(this);
+        this.renderOverlayFrom = this.renderOverlayFrom.bind(this);
+        this.renderOverlayTo = this.renderOverlayTo.bind(this);
+
+        this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
+        this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
+        this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
+    }
+
+    componentDidUpdate(prevProps) {
+        // Focus From input on enabling
+        if (prevProps.disabled === true && this.props.disabled === false) {
+            this.timeout = setTimeout(() => {
+                if (this.fromInput.getInput()) {
+                    this.fromInput.getInput().focus();
+                }
+            }, 0);
+        }
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeout);
+    }
+
+    handleReset(name) {
+        if (name === 'from') {
+            this.handleCurrentMonthChange(name, new Date());
+        } else {
+            this.handleCurrentMonthChange(name, this.props.from);
+        }
+
+        this.timeout = setTimeout(() => {
+            if (this.props.onReset) {
+                this.props.onReset(name);
+            }
+        }, 0);
+    }
+
+    handleDayChange(name, day, modifiers) {
+        // if time disabled, focus TO input
+        // else focus current input
+        if (!this.props.enableTime) {
+            if (day instanceof Date) {
+                this.timeout = setTimeout(() => {
+                    if (this.toInput && this.toInput.getInput()) {
+                        this.toInput.getInput().focus();
+                    }
+                }, 0);
+            }
+        } else {
+            this.timeout = setTimeout(() => {
+                if (this[`${name}Input`].getInput()) {
+                    this[`${name}Input`].getInput().focus();
+                }
+            }, 10);
+        }
+
+        if (this.props.onChange) {
+            // Keep Time if set
+            if (this.props.enableTime) {
+                if (this.props[name]) {
+                    day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
+                } else {
+                    day.setHours(0, 0);
+                }
+            }
+            this.props.onChange(name, day);
+        }
+
+        if (this.props.enableTime) {
+            this.openPanel(name, 'time');
+        }
+    }
+    handleDayChangeFrom(day, modifiers) {
+        this.handleDayChange('from', day, modifiers);
+    }
+    handleDayChangeTo(day, modifiers) {
+        this.handleDayChange('to', day, modifiers);
+    }
+
+    handleCurrentMonthChange(name, day) {
+        this.setState({
+            [`${name}CurrentMonth`]: day,
+            [`${name}OpenedPanel`]: 'calendar'
+        });
+    }
+    handleCurrentMonthChangeFrom(day) {
+        this.handleCurrentMonthChange('from', day);
+    }
+    handleCurrentMonthChangeTo(day) {
+        this.handleCurrentMonthChange('to', day);
+    }
+
+    handleCalendarClick(name) {
+        this.openPanel(name, 'calendar');
+    }
+    handleCalendarClickFrom() {
+        this.handleCalendarClick('from');
+    }
+    handleCalendarClickTo() {
+        this.handleCalendarClick('to');
+    }
+
+    handleClockClick(name) {
+        this.openPanel(name, 'time');
+    }
+    handleClockClickFrom() {
+        this.handleClockClick('from');
+    }
+    handleClockClickTo() {
+        this.handleClockClick('to');
+    }
+
+    handleMonthClick(name) {
+        this.openPanel(name, 'months');
+    }
+    handleMonthClickFrom() {
+        this.handleMonthClick('from');
+    }
+    handleMonthClickTo() {
+        this.handleMonthClick('to');
+    }
+
+    handleYearClick(name) {
+        this.openPanel(name, 'years');
+    }
+    handleYearClickFrom() {
+        this.handleYearClick('from');
+    }
+    handleYearClickTo() {
+        this.handleYearClick('to');
+    }
+
+    handleTimeChange(name, date, precision) {
+        this.props.onChange(name, date);
+        if (name === 'from' && precision === 'minute') {
+            this.fromInput.hideDayPicker();
+            this.toInput.showDayPicker();
+        } else if (name === 'to' && precision === 'minute') {
+            this.toInput.hideDayPicker();
+        }
+    }
+
+    openPanel(name, panel) {
+        this.setState({
+            [`${name}OpenedPanel`]: panel
+        });
+    }
+
+    renderCaption(name, propsCaption) {
+        return React.createElement(Caption, _extends({
+            onMonthClick: this[`handleMonthClick${capitalizeFirstLetter(name)}`],
+            onYearClick: this[`handleYearClick${capitalizeFirstLetter(name)}`]
+        }, propsCaption));
+    }
+    renderCaptionFrom(propsCaption) {
+        return this.renderCaption('from', propsCaption);
+    }
+    renderCaptionTo(propsCaption) {
+        return this.renderCaption('to', propsCaption);
+    }
+
+    renderNavbar(name, propsNavbar) {
+        return React.createElement(Navbar, _extends({
+            showClockButton: this.props.enableTime,
+            onClockClick: this[`handleClockClick${capitalizeFirstLetter(name)}`]
+        }, propsNavbar));
+    }
+    renderNavbarFrom(propsNavbar) {
+        return this.renderNavbar('from', propsNavbar);
+    }
+    renderNavbarTo(propsNavbar) {
+        return this.renderNavbar('to', propsNavbar);
+    }
+
+    renderOverlay(name, propsOverlay) {
+        const rangeOverlayProps = _extends({}, propsOverlay, {
+            side: name
+        });
+
+        switch (this.state[`${name}OpenedPanel`]) {
+            case 'time':
+                return this.renderTimePickerOverlay(name, rangeOverlayProps);
+            case 'months':
+                return this.renderMonthPickerOverlay(name, rangeOverlayProps);
+            case 'years':
+                return this.renderYearPickerOverlay(name, rangeOverlayProps);
+            case 'calendar':
+            default:
+                return React.createElement(Overlay, rangeOverlayProps);
+        }
+    }
+    renderOverlayFrom(propsOverlay) {
+        return this.renderOverlay('from', propsOverlay);
+    }
+    renderOverlayTo(propsOverlay) {
+        return this.renderOverlay('to', propsOverlay);
+    }
+
+    renderMonthPickerOverlay(name, propsOverlay) {
+        const monthPickerProps = {
+            value: this.state[`${name}CurrentMonth`],
+            onChange: this[`handleCurrentMonthChange${capitalizeFirstLetter(name)}`]
+        };
+
+        return React.createElement(MonthPickerOverlay, _extends({
+            key: `${name}-month-picker-overlay`
+        }, monthPickerProps, propsOverlay));
+    }
+
+    renderTimePickerOverlay(name, propsOverlay) {
+        const timePickerProps = {
+            value: this.props[name],
+            onChange: (date, precision) => this.handleTimeChange(name, date, precision),
+            onCalendarClick: this[`handleCalendarClick${capitalizeFirstLetter(name)}`]
+        };
+        return React.createElement(TimePickerOverlay, _extends({
+            key: `${name}-time-picker-overlay`
+        }, timePickerProps, propsOverlay));
+    }
+
+    renderYearPickerOverlay(name, propsOverlay) {
+        const yearPickerProps = {
+            value: this.state[`${name}CurrentMonth`],
+            onChange: this[`handleCurrentMonthChange${capitalizeFirstLetter(name)}`],
+            disabledFutureDays: this.props.disableFutureDays,
+            disabledPastDays: this.props.disablePastDays
+        };
+
+        return React.createElement(YearPickerOverlay, _extends({
+            key: `${name}-year-picker-overlay`
+        }, yearPickerProps, propsOverlay));
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            classes,
+            disabledDays,
+            disablePastDays,
+            disableFutureDays,
+            enableTime,
+            labelFrom,
+            labelTo,
+            locale,
+            format,
+            from,
+            minimumDate,
+            onReset,
+            to,
+            translations,
+            id
+        } = _props,
+              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
+
+        const { fromCurrentMonth, toCurrentMonth } = this.state;
+
+        const now = new Date();
+
+        const modifiers = {
+            start: from,
+            end: to
+        };
+
+        const modifiersStyles = {
+            start: {
+                borderTopLeftRadius: '50%',
+                borderBottomLeftRadius: '50%'
+            },
+            end: {
+                borderTopRightRadius: '50%',
+                borderBottomRightRadius: '50%'
+            }
+        };
+
+        const dayPickerProps = _extends({
+            classNames: classes,
+            disabledDays,
+            firstDayOfWeek: 1,
+            fromMonth: minimumDate,
+            locale,
+            modifiers,
+            modifiersStyles,
+            // Both are required ?
+            selectedDays: [from, { from, to }],
+            todayButton: translations.today,
+            weekdayElement: Weekday
+        }, props);
+
+        // Build Props for the From DatePicker
+        // Disable days after 'to' date if define
+
+        let after;
+        if (to && disableFutureDays) {
+            after = to < now ? now : to;
+        } else if (to) {
+            after = to;
+        } else if (disableFutureDays) {
+            after = now;
+        }
+
+        const disabledDaysFrom = _extends({}, disablePastDays && {
+            before: now
+        }, (to || disableFutureDays) && {
+            after
+        }, disabledDays);
+
+        const fromDayPickerProps = _extends({}, dayPickerProps, {
+            onTodayButtonClick: this.handleCurrentMonthChangeFrom,
+            navbarElement: this.renderNavbarFrom,
+            captionElement: this.renderCaptionFrom,
+            disabledDays: disabledDaysFrom,
+            month: fromCurrentMonth,
+            modifiers: _extends({}, modifiers, {
+                disabled: disabledDaysFrom
+            })
+        });
+
+        // Build Props for the To DatePicker
+        // Disable days before 'from' date if define
+
+        let before;
+        if (from && disablePastDays) {
+            before = from < now ? now : from;
+        } else if (from) {
+            before = from;
+        } else if (disablePastDays) {
+            before = now;
+        }
+
+        const disabledDaysTo = _extends({}, (from || disablePastDays) && {
+            before
+        }, disableFutureDays && {
+            after: now
+        }, disabledDays);
+
+        const toDayPickerProps = _extends({}, dayPickerProps, {
+            onTodayButtonClick: this.handleCurrentMonthChangeTo,
+            navbarElement: this.renderNavbarTo,
+            captionElement: this.renderCaptionTo,
+            disabledDays: disabledDaysTo,
+            month: toCurrentMonth,
+            modifiers: _extends({}, modifiers, {
+                disabled: disabledDaysTo
+            })
+        });
+
+        // From & To InputProps
+
+        const fromInputProps = _extends({}, onReset && {
+            onReset: () => this.handleReset('from')
+        }, props, labelFrom && {
+            label: labelFrom
+        }, {
+            id: `${id}-from`
+        });
+
+        const toInputProps = _extends({}, onReset && {
+            onReset: () => this.handleReset('to')
+        }, props, labelTo && {
+            label: labelTo
+        }, {
+            id: `${id}-to`
+        });
+
+        return React.createElement(
+            'div',
+            { className: classes.root },
+            React.createElement(
+                'div',
+                { className: classes.fromInput },
+                React.createElement(DayPickerInput, {
+                    ref: el => {
+                        this.fromInput = el;
+                    },
+                    value: from,
+                    hideOnDayClick: false,
+                    overlayComponent: this.renderOverlayFrom,
+                    dayPickerProps: fromDayPickerProps,
+                    component: HiTextField,
+                    inputProps: fromInputProps,
+                    format: enableTime ? `${format} HH:mm` : format,
+                    formatDate: formatDate,
+                    parseDate: parseDate,
+                    onDayChange: this.handleDayChangeFrom,
+                    placeholder: ''
+                })
+            ),
+            React.createElement(
+                'div',
+                { className: classes.toInput },
+                React.createElement(DayPickerInput, {
+                    ref: el => {
+                        this.toInput = el;
+                    },
+                    value: to,
+                    hideOnDayClick: false,
+                    overlayComponent: this.renderOverlayTo,
+                    dayPickerProps: toDayPickerProps,
+                    component: HiTextField,
+                    inputProps: toInputProps,
+                    format: enableTime ? `${format} HH:mm` : format,
+                    formatDate: formatDate,
+                    parseDate: parseDate,
+                    onDayChange: this.handleDayChangeTo,
+                    placeholder: ''
+                })
+            )
+        );
+    }
+}
+
+HiDateRangePicker.defaultProps = {
+    disabledDays: [],
+    disablePastDays: false,
+    disableFutureDays: false,
+    enableTime: false,
+    format: 'YYYY-DD-MM',
+    labelFrom: 'Start',
+    labelTo: 'End',
+    locale: 'fr-FR',
+    minimumDate: new Date(2013, 4, 1), // by default 1 May 2013
+    translations: {
+        today: 'today',
+        hour: 'Hour',
+        minute: 'Minute',
+        month: 'Month',
+        year: 'Year'
+    }
+};
+HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Inactif
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Définie les jours non sélectionnables
+     */
+    disabledDays: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.instanceOf(Date)]),
+    /**
+     * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
+     */
+    disableFutureDays: PropTypes.bool,
+    /**
+     * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+     */
+    disablePastDays: PropTypes.bool,
+    /**
+     * Ajoute la gestion de l'heure
+     */
+    enableTime: PropTypes.bool,
+    /**
+     * Format des dates affichées
+     */
+    format: PropTypes.string,
+    /**
+     * Date de début sélectionnée
+     */
+    from: PropTypes.instanceOf(Date),
+    /**
+     * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+     */
+    id: PropTypes.string.isRequired,
+    /**
+     * Label du champs de début
+     */
+    labelFrom: PropTypes.string,
+    /**
+     * Label du champs de fin
+     */
+    labelTo: PropTypes.string,
+    /**
+     * Locale utilisée
+     */
+    locale: PropTypes.string,
+    /**
+     * Date minimale sélectionnable
+     */
+    minimumDate: PropTypes.instanceOf(Date),
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: PropTypes.func,
+    /**
+     * Callback au reset de l'input
+     */
+    onReset: PropTypes.func,
+    /**
+     * Date de fin sélectionnée
+     */
+    to: PropTypes.instanceOf(Date),
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiDateRangePicker' })(HiDateRangePicker);