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

package/HiDatePicker/HiDateRangePicker.js

@@ -0,0 +1,713 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _moment = require('react-day-picker/moment');
+
+var _DayPickerInput = require('react-day-picker/DayPickerInput');
+
+var _DayPickerInput2 = _interopRequireDefault(_DayPickerInput);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _helpers = require('../utils/helpers');
+
+var _Caption = require('./Caption');
+
+var _Caption2 = _interopRequireDefault(_Caption);
+
+var _Overlay = require('./Overlays/Overlay');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+var _TimePickerOverlay = require('./Overlays/TimePickerOverlay');
+
+var _TimePickerOverlay2 = _interopRequireDefault(_TimePickerOverlay);
+
+var _MonthPickerOverlay = require('./Overlays/MonthPickerOverlay');
+
+var _MonthPickerOverlay2 = _interopRequireDefault(_MonthPickerOverlay);
+
+var _YearPickerOverlay = require('./Overlays/YearPickerOverlay');
+
+var _YearPickerOverlay2 = _interopRequireDefault(_YearPickerOverlay);
+
+var _Navbar = require('./Navbar');
+
+var _Navbar2 = _interopRequireDefault(_Navbar);
+
+var _Weekday = require('./Weekday');
+
+var _Weekday2 = _interopRequireDefault(_Weekday);
+
+var _HiForm = require('../HiForm');
+
+var _stylesheet = require('./stylesheet');
+
+var _stylesheet2 = _interopRequireDefault(_stylesheet);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var HiDateRangePicker = function (_React$Component) {
+    (0, _inherits3.default)(HiDateRangePicker, _React$Component);
+
+    function HiDateRangePicker(props) {
+        (0, _classCallCheck3.default)(this, HiDateRangePicker);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangePicker.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangePicker)).call(this));
+
+        _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);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiDateRangePicker, [{
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps) {
+            var _this2 = this;
+
+            // Focus From input on enabling
+            if (prevProps.disabled === true && this.props.disabled === false) {
+                this.timeout = setTimeout(function () {
+                    if (_this2.fromInput.getInput()) {
+                        _this2.fromInput.getInput().focus();
+                    }
+                }, 0);
+            }
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            clearTimeout(this.timeout);
+        }
+    }, {
+        key: 'handleReset',
+        value: function handleReset(name) {
+            var _this3 = this;
+
+            if (name === 'from') {
+                this.handleCurrentMonthChange(name, new Date());
+            } else {
+                this.handleCurrentMonthChange(name, this.props.from);
+            }
+
+            this.timeout = setTimeout(function () {
+                if (_this3.props.onReset) {
+                    _this3.props.onReset(name);
+                }
+            }, 0);
+        }
+    }, {
+        key: 'handleDayChange',
+        value: function handleDayChange(name, day, modifiers) {
+            var _this4 = this;
+
+            // if time disabled, focus TO input
+            // else focus current input
+            if (!this.props.enableTime) {
+                if (day instanceof Date) {
+                    this.timeout = setTimeout(function () {
+                        if (_this4.toInput && _this4.toInput.getInput()) {
+                            _this4.toInput.getInput().focus();
+                        }
+                    }, 0);
+                }
+            } else {
+                this.timeout = setTimeout(function () {
+                    if (_this4[name + 'Input'].getInput()) {
+                        _this4[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');
+            }
+        }
+    }, {
+        key: 'handleDayChangeFrom',
+        value: function handleDayChangeFrom(day, modifiers) {
+            this.handleDayChange('from', day, modifiers);
+        }
+    }, {
+        key: 'handleDayChangeTo',
+        value: function handleDayChangeTo(day, modifiers) {
+            this.handleDayChange('to', day, modifiers);
+        }
+    }, {
+        key: 'handleCurrentMonthChange',
+        value: function handleCurrentMonthChange(name, day) {
+            var _setState;
+
+            this.setState((_setState = {}, (0, _defineProperty3.default)(_setState, name + 'CurrentMonth', day), (0, _defineProperty3.default)(_setState, name + 'OpenedPanel', 'calendar'), _setState));
+        }
+    }, {
+        key: 'handleCurrentMonthChangeFrom',
+        value: function handleCurrentMonthChangeFrom(day) {
+            this.handleCurrentMonthChange('from', day);
+        }
+    }, {
+        key: 'handleCurrentMonthChangeTo',
+        value: function handleCurrentMonthChangeTo(day) {
+            this.handleCurrentMonthChange('to', day);
+        }
+    }, {
+        key: 'handleCalendarClick',
+        value: function handleCalendarClick(name) {
+            this.openPanel(name, 'calendar');
+        }
+    }, {
+        key: 'handleCalendarClickFrom',
+        value: function handleCalendarClickFrom() {
+            this.handleCalendarClick('from');
+        }
+    }, {
+        key: 'handleCalendarClickTo',
+        value: function handleCalendarClickTo() {
+            this.handleCalendarClick('to');
+        }
+    }, {
+        key: 'handleClockClick',
+        value: function handleClockClick(name) {
+            this.openPanel(name, 'time');
+        }
+    }, {
+        key: 'handleClockClickFrom',
+        value: function handleClockClickFrom() {
+            this.handleClockClick('from');
+        }
+    }, {
+        key: 'handleClockClickTo',
+        value: function handleClockClickTo() {
+            this.handleClockClick('to');
+        }
+    }, {
+        key: 'handleMonthClick',
+        value: function handleMonthClick(name) {
+            this.openPanel(name, 'months');
+        }
+    }, {
+        key: 'handleMonthClickFrom',
+        value: function handleMonthClickFrom() {
+            this.handleMonthClick('from');
+        }
+    }, {
+        key: 'handleMonthClickTo',
+        value: function handleMonthClickTo() {
+            this.handleMonthClick('to');
+        }
+    }, {
+        key: 'handleYearClick',
+        value: function handleYearClick(name) {
+            this.openPanel(name, 'years');
+        }
+    }, {
+        key: 'handleYearClickFrom',
+        value: function handleYearClickFrom() {
+            this.handleYearClick('from');
+        }
+    }, {
+        key: 'handleYearClickTo',
+        value: function handleYearClickTo() {
+            this.handleYearClick('to');
+        }
+    }, {
+        key: 'handleTimeChange',
+        value: function 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();
+            }
+        }
+    }, {
+        key: 'openPanel',
+        value: function openPanel(name, panel) {
+            this.setState((0, _defineProperty3.default)({}, name + 'OpenedPanel', panel));
+        }
+    }, {
+        key: 'renderCaption',
+        value: function renderCaption(name, propsCaption) {
+            return _react2.default.createElement(_Caption2.default, (0, _extends3.default)({
+                onMonthClick: this['handleMonthClick' + (0, _helpers.capitalizeFirstLetter)(name)],
+                onYearClick: this['handleYearClick' + (0, _helpers.capitalizeFirstLetter)(name)]
+            }, propsCaption));
+        }
+    }, {
+        key: 'renderCaptionFrom',
+        value: function renderCaptionFrom(propsCaption) {
+            return this.renderCaption('from', propsCaption);
+        }
+    }, {
+        key: 'renderCaptionTo',
+        value: function renderCaptionTo(propsCaption) {
+            return this.renderCaption('to', propsCaption);
+        }
+    }, {
+        key: 'renderNavbar',
+        value: function renderNavbar(name, propsNavbar) {
+            return _react2.default.createElement(_Navbar2.default, (0, _extends3.default)({
+                showClockButton: this.props.enableTime,
+                onClockClick: this['handleClockClick' + (0, _helpers.capitalizeFirstLetter)(name)]
+            }, propsNavbar));
+        }
+    }, {
+        key: 'renderNavbarFrom',
+        value: function renderNavbarFrom(propsNavbar) {
+            return this.renderNavbar('from', propsNavbar);
+        }
+    }, {
+        key: 'renderNavbarTo',
+        value: function renderNavbarTo(propsNavbar) {
+            return this.renderNavbar('to', propsNavbar);
+        }
+    }, {
+        key: 'renderOverlay',
+        value: function renderOverlay(name, propsOverlay) {
+            var rangeOverlayProps = (0, _extends3.default)({}, 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 _react2.default.createElement(_Overlay2.default, rangeOverlayProps);
+            }
+        }
+    }, {
+        key: 'renderOverlayFrom',
+        value: function renderOverlayFrom(propsOverlay) {
+            return this.renderOverlay('from', propsOverlay);
+        }
+    }, {
+        key: 'renderOverlayTo',
+        value: function renderOverlayTo(propsOverlay) {
+            return this.renderOverlay('to', propsOverlay);
+        }
+    }, {
+        key: 'renderMonthPickerOverlay',
+        value: function renderMonthPickerOverlay(name, propsOverlay) {
+            var monthPickerProps = {
+                value: this.state[name + 'CurrentMonth'],
+                onChange: this['handleCurrentMonthChange' + (0, _helpers.capitalizeFirstLetter)(name)]
+            };
+
+            return _react2.default.createElement(_MonthPickerOverlay2.default, (0, _extends3.default)({
+                key: name + '-month-picker-overlay'
+            }, monthPickerProps, propsOverlay));
+        }
+    }, {
+        key: 'renderTimePickerOverlay',
+        value: function renderTimePickerOverlay(name, propsOverlay) {
+            var _this5 = this;
+
+            var timePickerProps = {
+                value: this.props[name],
+                onChange: function onChange(date, precision) {
+                    return _this5.handleTimeChange(name, date, precision);
+                },
+                onCalendarClick: this['handleCalendarClick' + (0, _helpers.capitalizeFirstLetter)(name)]
+            };
+            return _react2.default.createElement(_TimePickerOverlay2.default, (0, _extends3.default)({
+                key: name + '-time-picker-overlay'
+            }, timePickerProps, propsOverlay));
+        }
+    }, {
+        key: 'renderYearPickerOverlay',
+        value: function renderYearPickerOverlay(name, propsOverlay) {
+            var yearPickerProps = {
+                value: this.state[name + 'CurrentMonth'],
+                onChange: this['handleCurrentMonthChange' + (0, _helpers.capitalizeFirstLetter)(name)],
+                disabledFutureDays: this.props.disableFutureDays,
+                disabledPastDays: this.props.disablePastDays
+            };
+
+            return _react2.default.createElement(_YearPickerOverlay2.default, (0, _extends3.default)({
+                key: name + '-year-picker-overlay'
+            }, yearPickerProps, propsOverlay));
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this6 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                disabledDays = _props.disabledDays,
+                disablePastDays = _props.disablePastDays,
+                disableFutureDays = _props.disableFutureDays,
+                enableTime = _props.enableTime,
+                labelFrom = _props.labelFrom,
+                labelTo = _props.labelTo,
+                locale = _props.locale,
+                format = _props.format,
+                from = _props.from,
+                minimumDate = _props.minimumDate,
+                onReset = _props.onReset,
+                to = _props.to,
+                translations = _props.translations,
+                id = _props.id,
+                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
+            var _state = this.state,
+                fromCurrentMonth = _state.fromCurrentMonth,
+                toCurrentMonth = _state.toCurrentMonth;
+
+
+            var now = new Date();
+
+            var modifiers = {
+                start: from,
+                end: to
+            };
+
+            var modifiersStyles = {
+                start: {
+                    borderTopLeftRadius: '50%',
+                    borderBottomLeftRadius: '50%'
+                },
+                end: {
+                    borderTopRightRadius: '50%',
+                    borderBottomRightRadius: '50%'
+                }
+            };
+
+            var dayPickerProps = (0, _extends3.default)({
+                classNames: classes,
+                disabledDays: disabledDays,
+                firstDayOfWeek: 1,
+                fromMonth: minimumDate,
+                locale: locale,
+                modifiers: modifiers,
+                modifiersStyles: modifiersStyles,
+                // Both are required ?
+                selectedDays: [from, { from: from, to: to }],
+                todayButton: translations.today,
+                weekdayElement: _Weekday2.default
+            }, props);
+
+            // Build Props for the From DatePicker
+            // Disable days after 'to' date if define
+
+            var after = void 0;
+            if (to && disableFutureDays) {
+                after = to < now ? now : to;
+            } else if (to) {
+                after = to;
+            } else if (disableFutureDays) {
+                after = now;
+            }
+
+            var disabledDaysFrom = (0, _extends3.default)({}, disablePastDays && {
+                before: now
+            }, (to || disableFutureDays) && {
+                after: after
+            }, disabledDays);
+
+            var fromDayPickerProps = (0, _extends3.default)({}, dayPickerProps, {
+                onTodayButtonClick: this.handleCurrentMonthChangeFrom,
+                navbarElement: this.renderNavbarFrom,
+                captionElement: this.renderCaptionFrom,
+                disabledDays: disabledDaysFrom,
+                month: fromCurrentMonth,
+                modifiers: (0, _extends3.default)({}, modifiers, {
+                    disabled: disabledDaysFrom
+                })
+            });
+
+            // Build Props for the To DatePicker
+            // Disable days before 'from' date if define
+
+            var before = void 0;
+            if (from && disablePastDays) {
+                before = from < now ? now : from;
+            } else if (from) {
+                before = from;
+            } else if (disablePastDays) {
+                before = now;
+            }
+
+            var disabledDaysTo = (0, _extends3.default)({}, (from || disablePastDays) && {
+                before: before
+            }, disableFutureDays && {
+                after: now
+            }, disabledDays);
+
+            var toDayPickerProps = (0, _extends3.default)({}, dayPickerProps, {
+                onTodayButtonClick: this.handleCurrentMonthChangeTo,
+                navbarElement: this.renderNavbarTo,
+                captionElement: this.renderCaptionTo,
+                disabledDays: disabledDaysTo,
+                month: toCurrentMonth,
+                modifiers: (0, _extends3.default)({}, modifiers, {
+                    disabled: disabledDaysTo
+                })
+            });
+
+            // From & To InputProps
+
+            var fromInputProps = (0, _extends3.default)({}, onReset && {
+                onReset: function onReset() {
+                    return _this6.handleReset('from');
+                }
+            }, props, labelFrom && {
+                label: labelFrom
+            }, {
+                id: id + '-from'
+            });
+
+            var toInputProps = (0, _extends3.default)({}, onReset && {
+                onReset: function onReset() {
+                    return _this6.handleReset('to');
+                }
+            }, props, labelTo && {
+                label: labelTo
+            }, {
+                id: id + '-to'
+            });
+
+            return _react2.default.createElement(
+                'div',
+                { className: classes.root },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.fromInput },
+                    _react2.default.createElement(_DayPickerInput2.default, {
+                        ref: function ref(el) {
+                            _this6.fromInput = el;
+                        },
+                        value: from,
+                        hideOnDayClick: false,
+                        overlayComponent: this.renderOverlayFrom,
+                        dayPickerProps: fromDayPickerProps,
+                        component: _HiForm.HiTextField,
+                        inputProps: fromInputProps,
+                        format: enableTime ? format + ' HH:mm' : format,
+                        formatDate: _moment.formatDate,
+                        parseDate: _moment.parseDate,
+                        onDayChange: this.handleDayChangeFrom,
+                        placeholder: ''
+                    })
+                ),
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.toInput },
+                    _react2.default.createElement(_DayPickerInput2.default, {
+                        ref: function ref(el) {
+                            _this6.toInput = el;
+                        },
+                        value: to,
+                        hideOnDayClick: false,
+                        overlayComponent: this.renderOverlayTo,
+                        dayPickerProps: toDayPickerProps,
+                        component: _HiForm.HiTextField,
+                        inputProps: toInputProps,
+                        format: enableTime ? format + ' HH:mm' : format,
+                        formatDate: _moment.formatDate,
+                        parseDate: _moment.parseDate,
+                        onDayChange: this.handleDayChangeTo,
+                        placeholder: ''
+                    })
+                )
+            );
+        }
+    }]);
+    return HiDateRangePicker;
+}(_react2.default.Component); //  weak
+
+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: _propTypes2.default.object,
+    /**
+     * Inactif
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Définie les jours non sélectionnables
+     */
+    disabledDays: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object, _propTypes2.default.instanceOf(Date)]),
+    /**
+     * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
+     */
+    disableFutureDays: _propTypes2.default.bool,
+    /**
+     * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+     */
+    disablePastDays: _propTypes2.default.bool,
+    /**
+     * Ajoute la gestion de l'heure
+     */
+    enableTime: _propTypes2.default.bool,
+    /**
+     * Format des dates affichées
+     */
+    format: _propTypes2.default.string,
+    /**
+     * Date de début sélectionnée
+     */
+    from: _propTypes2.default.instanceOf(Date),
+    /**
+     * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+     */
+    id: _propTypes2.default.string.isRequired,
+    /**
+     * Label du champs de début
+     */
+    labelFrom: _propTypes2.default.string,
+    /**
+     * Label du champs de fin
+     */
+    labelTo: _propTypes2.default.string,
+    /**
+     * Locale utilisée
+     */
+    locale: _propTypes2.default.string,
+    /**
+     * Date minimale sélectionnable
+     */
+    minimumDate: _propTypes2.default.instanceOf(Date),
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * Callback au reset de l'input
+     */
+    onReset: _propTypes2.default.func,
+    /**
+     * Date de fin sélectionnée
+     */
+    to: _propTypes2.default.instanceOf(Date),
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object
+} : {};
+exports.default = (0, _withStyles2.default)(_stylesheet2.default, { name: 'HmuiHiDateRangePicker' })(HiDateRangePicker);