@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/HiDatePicker/HiDateRangePicker.js

@@ -1,567 +0,0 @@
-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) {
-                if (name === 'from' && this.toInput) {
-                    this.toInput.getInput().focus();
-                } else if (name === 'to') {
-                    document.activeElement.blur();
-                }
-            }
-        } 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.getInput().focus();
-            this.toInput.showDayPicker();
-        } else if (name === 'to' && precision === 'minute') {
-            this.toInput.hideDayPicker();
-            document.activeElement.blur();
-        }
-    }
-
-    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);