@hipay/hipay-material-ui 2.0.0-beta.35 → 2.0.0-beta.37

package/HiDatePicker/HiDateRangePicker.js

@@ -0,0 +1,756 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _moment = _interopRequireDefault(require("react-day-picker/moment"));
+
+var _DayPickerInput = _interopRequireDefault(require("react-day-picker/DayPickerInput"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _helpers = require("../utils/helpers");
+
+var _Caption = _interopRequireDefault(require("./Caption"));
+
+var _Overlay = _interopRequireDefault(require("./Overlays/Overlay"));
+
+var _TimePickerOverlay = _interopRequireDefault(require("./Overlays/TimePickerOverlay"));
+
+var _MonthPickerOverlay = _interopRequireDefault(require("./Overlays/MonthPickerOverlay"));
+
+var _YearPickerOverlay = _interopRequireDefault(require("./Overlays/YearPickerOverlay"));
+
+var _NavBar = _interopRequireDefault(require("./NavBar"));
+
+var _Weekday = _interopRequireDefault(require("./Weekday"));
+
+var _HiForm = require("../HiForm");
+
+var _stylesheet = _interopRequireDefault(require("./stylesheet"));
+
+var HiDateRangePicker =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiDateRangePicker, _React$Component);
+
+  function HiDateRangePicker(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDateRangePicker);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangePicker).call(this));
+
+    _this.handleInputChange = function (inputName) {
+      return function (event) {
+        _this.event = event;
+
+        _this.props.onChange(inputName, event.target.value);
+      };
+    };
+
+    _this.handleDayPickerFocus = function (name) {
+      return function () {
+        _this.setState({
+          focusedInput: name
+        });
+      };
+    };
+
+    _this.handleDayPickerBlur = function (name) {
+      return function () {
+        _this.setState({
+          focusedInput: ''
+        });
+
+        if (_this.props.onBlur) {
+          _this.props.onBlur(name);
+        }
+      };
+    };
+
+    _this.state = {
+      fromCurrentMonth: props.from ? props.from : new Date(),
+      toCurrentMonth: props.to ? props.to : new Date(),
+      focusedInput: ''
+    };
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleDayChange = _this.handleDayChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleDayChangeFrom = _this.handleDayChangeFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleDayChangeTo = _this.handleDayChangeTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleCurrentMonthChange = _this.handleCurrentMonthChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleCurrentMonthChangeFrom = _this.handleCurrentMonthChangeFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleCurrentMonthChangeTo = _this.handleCurrentMonthChangeTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleTimeChange = _this.handleTimeChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleCalendarClick = _this.handleCalendarClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleCalendarClickFrom = _this.handleCalendarClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleCalendarClickTo = _this.handleCalendarClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClockClick = _this.handleClockClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClockClickFrom = _this.handleClockClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClockClickTo = _this.handleClockClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleMonthClick = _this.handleMonthClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleMonthClickFrom = _this.handleMonthClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleMonthClickTo = _this.handleMonthClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleYearClick = _this.handleYearClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleYearClickFrom = _this.handleYearClickFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleYearClickTo = _this.handleYearClickTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleInputChange = _this.handleInputChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.openPanel = _this.openPanel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderCaption = _this.renderCaption.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderCaptionFrom = _this.renderCaptionFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderCaptionTo = _this.renderCaptionTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderNavBar = _this.renderNavBar.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderNavBarFrom = _this.renderNavBarFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderNavBarTo = _this.renderNavBarTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderOverlay = _this.renderOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderOverlayFrom = _this.renderOverlayFrom.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderOverlayTo = _this.renderOverlayTo.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderMonthPickerOverlay = _this.renderMonthPickerOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderTimePickerOverlay = _this.renderTimePickerOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderYearPickerOverlay = _this.renderYearPickerOverlay.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.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: "handleDayChange",
+    value: function handleDayChange(name, day, modifiers) {
+      var _this3 = this;
+
+      if (day) {
+        // 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') {
+              if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
+                // trigger blur only if user clicks on date into calendar
+                // else keep focus to see day selection into calendar
+                document.activeElement.blur();
+              }
+
+              delete this.event;
+            }
+          }
+        } else {
+          this.timeout = setTimeout(function () {
+            if (_this3["".concat(name, "Input")].getInput()) {
+              _this3["".concat(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 _this$setState;
+
+      this.setState((_this$setState = {}, (0, _defineProperty2.default)(_this$setState, "".concat(name, "CurrentMonth"), day), (0, _defineProperty2.default)(_this$setState, "".concat(name, "OpenedPanel"), 'calendar'), _this$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.getInput().focus();
+        this.toInput.showDayPicker();
+      } else if (name === 'to' && precision === 'minute') {
+        this.toInput.hideDayPicker();
+        document.activeElement.blur();
+      }
+    }
+  }, {
+    key: "handleReset",
+    value: function handleReset(name) {
+      var _this4 = this;
+
+      this.handleCurrentMonthChange(name, new Date());
+      this.timeout = setTimeout(function () {
+        if (_this4.props.onReset) {
+          _this4.props.onReset(name);
+        }
+      }, 0);
+    }
+  }, {
+    key: "openPanel",
+    value: function openPanel(name, panel) {
+      this.setState((0, _defineProperty2.default)({}, "".concat(name, "OpenedPanel"), panel));
+    }
+  }, {
+    key: "renderCaption",
+    value: function renderCaption(name, propsCaption) {
+      return _react.default.createElement(_Caption.default, (0, _extends2.default)({
+        onMonthClick: this["handleMonthClick".concat((0, _helpers.capitalize)(name))],
+        onYearClick: this["handleYearClick".concat((0, _helpers.capitalize)(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 _react.default.createElement(_NavBar.default, (0, _extends2.default)({
+        showClockButton: this.props.enableTime,
+        onClockClick: this["handleClockClick".concat((0, _helpers.capitalize)(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, staticPosition) {
+      var rangeOverlayProps = (0, _extends2.default)({}, propsOverlay, {
+        side: name,
+        staticPosition: staticPosition
+      });
+
+      switch (this.state["".concat(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.default.createElement(_Overlay.default, rangeOverlayProps);
+      }
+    }
+  }, {
+    key: "renderOverlayFrom",
+    value: function renderOverlayFrom(propsOverlay) {
+      return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
+    }
+  }, {
+    key: "renderOverlayTo",
+    value: function renderOverlayTo(propsOverlay) {
+      return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
+    }
+  }, {
+    key: "renderMonthPickerOverlay",
+    value: function renderMonthPickerOverlay(name, propsOverlay) {
+      var monthPickerProps = {
+        value: this.state["".concat(name, "CurrentMonth")],
+        onChange: this["handleCurrentMonthChange".concat((0, _helpers.capitalize)(name))]
+      };
+      return _react.default.createElement(_MonthPickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(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".concat((0, _helpers.capitalize)(name))]
+      };
+      return _react.default.createElement(_TimePickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(name, "-time-picker-overlay")
+      }, timePickerProps, propsOverlay));
+    }
+  }, {
+    key: "renderYearPickerOverlay",
+    value: function renderYearPickerOverlay(name, propsOverlay) {
+      var yearPickerProps = {
+        value: this.state["".concat(name, "CurrentMonth")],
+        onChange: this["handleCurrentMonthChange".concat((0, _helpers.capitalize)(name))],
+        disabledFutureDays: this.props.disableFutureDays,
+        disabledPastDays: this.props.disablePastDays
+      };
+      return _react.default.createElement(_YearPickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(name, "-year-picker-overlay")
+      }, yearPickerProps, propsOverlay));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this6 = this,
+          _classNames;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          disabledDays = _this$props.disabledDays,
+          disablePastDays = _this$props.disablePastDays,
+          disableFutureDays = _this$props.disableFutureDays,
+          enableTime = _this$props.enableTime,
+          labelFrom = _this$props.labelFrom,
+          labelTo = _this$props.labelTo,
+          locale = _this$props.locale,
+          format = _this$props.format,
+          from = _this$props.from,
+          minimumDate = _this$props.minimumDate,
+          onReset = _this$props.onReset,
+          to = _this$props.to,
+          translations = _this$props.translations,
+          id = _this$props.id,
+          staticPosition = _this$props.staticPosition,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "minimumDate", "onReset", "to", "translations", "id", "staticPosition"]);
+      var _this$state = this.state,
+          fromCurrentMonth = _this$state.fromCurrentMonth,
+          toCurrentMonth = _this$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 selectedDays = [];
+      var selected = {};
+
+      if (from instanceof Date) {
+        selectedDays.push(from);
+        selected.from = from;
+      }
+
+      if (to instanceof Date) {
+        selectedDays.push(to);
+        selected.to = to;
+      }
+
+      if (Object.values(selected).length > 0) {
+        selectedDays.push(selected);
+      }
+
+      var dayPickerProps = (0, _extends2.default)({
+        classNames: classes,
+        disabledDays: disabledDays,
+        firstDayOfWeek: 1,
+        fromMonth: minimumDate,
+        locale: locale,
+        modifiers: modifiers,
+        modifiersStyles: modifiersStyles,
+        // Both are required ?
+        selectedDays: selectedDays,
+        todayButton: translations.today,
+        weekdayElement: _Weekday.default
+      }, props); // Build Props for the From DatePicker
+      // Disable days after 'to' date if define
+
+      var after;
+
+      if (to instanceof Date && disableFutureDays) {
+        after = to < now ? now : to;
+      } else if (to instanceof Date) {
+        after = to;
+      } else if (disableFutureDays) {
+        after = now;
+      }
+
+      var disabledDaysFrom = (0, _extends2.default)({}, disablePastDays && {
+        before: now
+      }, (to || disableFutureDays) && {
+        after: after
+      }, disabledDays);
+      var fromDayPickerProps = (0, _extends2.default)({}, dayPickerProps, {
+        onTodayButtonClick: this.handleCurrentMonthChangeFrom,
+        NavBarElement: this.renderNavBarFrom,
+        captionElement: this.renderCaptionFrom,
+        disabledDays: disabledDaysFrom,
+        month: fromCurrentMonth,
+        modifiers: (0, _extends2.default)({}, modifiers, {
+          disabled: disabledDaysFrom
+        })
+      }); // Build Props for the To DatePicker
+      // Disable days before 'from' date if define
+
+      var before;
+
+      if (from instanceof Date && disablePastDays) {
+        before = from < now ? now : from;
+      } else if (from instanceof Date) {
+        before = from;
+      } else if (disablePastDays) {
+        before = now;
+      }
+
+      var disabledDaysTo = (0, _extends2.default)({}, (from || disablePastDays) && {
+        before: before
+      }, disableFutureDays && {
+        after: now
+      }, disabledDays);
+      var toDayPickerProps = (0, _extends2.default)({}, dayPickerProps, {
+        onTodayButtonClick: this.handleCurrentMonthChangeTo,
+        NavBarElement: this.renderNavBarTo,
+        captionElement: this.renderCaptionTo,
+        disabledDays: disabledDaysTo,
+        month: toCurrentMonth,
+        modifiers: (0, _extends2.default)({}, modifiers, {
+          disabled: disabledDaysTo
+        })
+      }); // From & To InputProps
+
+      var fromInputProps = (0, _extends2.default)({}, onReset && {
+        onReset: function onReset() {
+          return _this6.handleReset('from');
+        }
+      }, props, labelFrom && {
+        label: labelFrom
+      }, {
+        id: "".concat(id, "-from"),
+        onChange: this.handleInputChange('from')
+      });
+      var toInputProps = (0, _extends2.default)({}, onReset && {
+        onReset: function onReset() {
+          return _this6.handleReset('to');
+        }
+      }, props, labelTo && {
+        label: labelTo
+      }, {
+        id: "".concat(id, "-to"),
+        onChange: this.handleInputChange('to')
+      });
+      var toClass = (0, _classnames.default)(classes.toInput, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'), (0, _defineProperty2.default)(_classNames, classes.right4, staticPosition === true && this.state.focusedInput === 'from'), _classNames));
+      return _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.root, classes.rangePickerContainer)
+      }, _react.default.createElement("div", {
+        className: classes.fromInput,
+        onFocus: this.handleDayPickerFocus('from'),
+        onBlur: this.handleDayPickerBlur('from')
+      }, _react.default.createElement("div", null, _react.default.createElement(_DayPickerInput.default, {
+        ref: function ref(el) {
+          _this6.fromInput = el;
+        },
+        value: from,
+        hideOnDayClick: false,
+        overlayComponent: this.renderOverlayFrom,
+        dayPickerProps: fromDayPickerProps,
+        component: _HiForm.HiTextField,
+        inputProps: fromInputProps,
+        format: enableTime ? "".concat(format, " HH:mm") : format,
+        formatDate: _moment.default.formatDate,
+        parseDate: _moment.default.parseDate,
+        onDayChange: this.handleDayChangeFrom,
+        placeholder: ''
+      }))), _react.default.createElement("div", {
+        className: toClass,
+        onFocus: this.handleDayPickerFocus('to'),
+        onBlur: this.handleDayPickerBlur('to')
+      }, _react.default.createElement(_DayPickerInput.default, {
+        ref: function ref(el) {
+          _this6.toInput = el;
+        },
+        value: to,
+        hideOnDayClick: false,
+        overlayComponent: this.renderOverlayTo,
+        dayPickerProps: toDayPickerProps,
+        component: _HiForm.HiTextField,
+        inputProps: toInputProps,
+        format: enableTime ? "".concat(format, " HH:mm") : format,
+        formatDate: _moment.default.formatDate,
+        parseDate: _moment.default.parseDate,
+        onDayChange: this.handleDayChangeTo,
+        placeholder: ''
+      })));
+    }
+  }]);
+  return HiDateRangePicker;
+}(_react.default.Component);
+
+HiDateRangePicker.defaultProps = {
+  disabledDays: [],
+  disablePastDays: false,
+  disableFutureDays: false,
+  staticPosition: 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.default.object,
+
+  /**
+   * Inactif
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Définie les jours non sélectionnables
+   */
+  disabledDays: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object, _propTypes.default.instanceOf(Date)]),
+
+  /**
+   * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
+   */
+  disableFutureDays: _propTypes.default.bool,
+
+  /**
+   * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+   */
+  disablePastDays: _propTypes.default.bool,
+
+  /**
+   * Ajoute la gestion de l'heure
+   */
+  enableTime: _propTypes.default.bool,
+
+  /**
+   * Format des dates affichées
+   */
+  format: _propTypes.default.string,
+
+  /**
+   * Date de début sélectionnée
+   */
+  from: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
+
+  /**
+   * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+   */
+  id: _propTypes.default.string.isRequired,
+
+  /**
+   * Label du champs de début
+   */
+  labelFrom: _propTypes.default.string,
+
+  /**
+   * Label du champs de fin
+   */
+  labelTo: _propTypes.default.string,
+
+  /**
+   * Locale utilisée
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Date minimale sélectionnable
+   */
+  minimumDate: _propTypes.default.instanceOf(Date),
+
+  /**
+   * Callback à la sélection d'une date
+   * @param {string} nom de l'input
+   */
+  onBlur: _propTypes.default.func,
+
+  /**
+   * Callback à la sélection d'une date
+   * @param {string} nom du champs
+   * @param {string} nouvelle valeur du champs
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Callback au reset de l'input
+   * @param {string} nom du champs réinitialisé
+   */
+  onReset: _propTypes.default.func,
+
+  /**
+   * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+   */
+  staticPosition: _propTypes.default.bool,
+
+  /**
+   * Date de fin sélectionnée
+   */
+  to: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string]),
+
+  /**
+   * Traductions
+   */
+  translations: _propTypes.default.object
+} : {};
+
+var _default = (0, _withStyles.default)(_stylesheet.default, {
+  name: 'HmuiHiDateRangePicker'
+})(HiDateRangePicker);
+
+exports.default = _default;