@hipay/hipay-material-ui 2.3.0-rc.5 → 2.3.0-rc.PSYCHE-2530-2

package/es/HiDatePicker/HiDateRangePicker.js

@@ -1,111 +1,161 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment-timezone';
-import MomentLocaleUtils from 'react-day-picker/moment';
-import HiLocaleUtils from './hiLocaleUtils';
-import DayPickerInput from 'react-day-picker/DayPickerInput';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-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';
-import HiFormControl from '../HiForm/HiFormControl';
-import { isMobile } from 'react-device-detect';
-import HiDatePickerMobile from './HiDatePickerMobile';
-
-class HiDateRangePicker extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleDayChange = (name, day) => {
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
+var _moment = _interopRequireDefault(require("react-day-picker/moment"));
+
+var _hiLocaleUtils = _interopRequireDefault(require("./hiLocaleUtils"));
+
+var _DayPickerInput = _interopRequireDefault(require("react-day-picker/DayPickerInput"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+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 _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
+
+var _reactDeviceDetect = require("react-device-detect");
+
+var _HiDatePickerMobile = _interopRequireDefault(require("./HiDatePickerMobile"));
+
+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, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDayChange", function (name, day) {
       if (day) {
         // if time disabled, focus TO input
         // else focus current input
-        if (!this.props.enableTime) {
+        if (!_this.props.enableTime) {
           if (day instanceof Date) {
-            if (name === 'from' && this.toInput) {
-              this.toInput.getInput().focus();
+            if (name === 'from' && _this.toInput) {
+              _this.toInput.getInput().focus();
             }
           }
         } else {
-          this.timeout = setTimeout(() => {
-            if (this[`${name}Input`].getInput()) {
-              this[`${name}Input`].getInput().focus();
+          _this.timeout = setTimeout(function () {
+            if (_this["".concat(name, "Input")].getInput()) {
+              _this["".concat(name, "Input")].getInput().focus();
             }
           }, 10);
         }
 
-        if (this.props.onChange) {
-          this.handleChange(name, day);
+        if (_this.props.onChange) {
+          _this.handleChange(name, day);
         }
 
-        if (this.props.enableTime) {
-          this.openPanel('time');
+        if (_this.props.enableTime) {
+          _this.openPanel('time');
         }
       }
-    };
-
-    this.handleInputChange = inputName => event => {
-      this.handleChange(inputName, event.target.value);
-    };
-
-    this.onDayToClick = day => {
-      let change = moment(day) >= moment(this.props.from);
-      const today = moment().tz(this.props.timezoneName);
-      const todayDate = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleInputChange", function (inputName) {
+      return function (event) {
+        _this.handleChange(inputName, event.target.value);
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDayToClick", function (day) {
+      var change = (0, _momentTimezone.default)(day) >= (0, _momentTimezone.default)(_this.props.from);
+      var today = (0, _momentTimezone.default)().tz(_this.props.timezoneName);
+      var todayDate = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
 
       if (change && day > todayDate) {
         change = false;
       }
 
       if (change) {
-        this.handleDayChange('to', day);
+        _this.handleDayChange('to', day);
+
         document.activeElement.blur();
       }
-    };
-
-    this.handleTimeChange = (name, date, precision) => {
-      this.handleChange(name, date);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTimeChange", function (name, date, precision) {
+      _this.handleChange(name, date);
 
       if (name === 'from' && precision === 'minute') {
-        this.fromInput.hideDayPicker();
-        this.toInput.getInput().focus();
-        this.toInput.showDayPicker();
-        this.openPanel('calendar');
+        _this.fromInput.hideDayPicker();
+
+        _this.toInput.getInput().focus();
+
+        _this.toInput.showDayPicker();
+
+        _this.openPanel('calendar');
       } else if (name === 'to' && precision === 'minute') {
-        this.toInput.hideDayPicker();
+        _this.toInput.hideDayPicker();
+
         document.activeElement.blur();
       }
-    };
-
-    this.handleChange = (name, day) => {
-      const {
-        translations,
-        timezoneName
-      } = this.props;
-      let date;
-      let error;
-      const today = moment().tz(timezoneName);
-      const now = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
-      const {
-        minimumDate,
-        disableFutureDays,
-        format
-      } = this.props;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (name, day) {
+      var _this$props = _this.props,
+          translations = _this$props.translations,
+          timezoneName = _this$props.timezoneName;
+      var date;
+      var error;
+      var today = (0, _momentTimezone.default)().tz(timezoneName);
+      var now = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
+      var _this$props2 = _this.props,
+          minimumDate = _this$props2.minimumDate,
+          disableFutureDays = _this$props2.disableFutureDays,
+          format = _this$props2.format;
 
       if (day instanceof Date) {
         date = day;
       } else if (day) {
-        const parsedValue = moment(day, this.props.format, true);
+        var parsedValue = (0, _momentTimezone.default)(day, _this.props.format, true);
 
         if (parsedValue.isValid()) {
           date = parsedValue.toDate();
@@ -115,17 +165,17 @@ class HiDateRangePicker extends React.Component {
       }
 
       if (date) {
-        const comparativeDate = name === 'to' ? moment(this.props.from) : moment(this.props.to);
+        var comparativeDate = name === 'to' ? (0, _momentTimezone.default)(_this.props.from) : (0, _momentTimezone.default)(_this.props.to);
 
-        if (name === 'to' && comparativeDate > moment(date) || name === 'from' && comparativeDate < moment(date)) {
+        if (name === 'to' && comparativeDate > (0, _momentTimezone.default)(date) || name === 'from' && comparativeDate < (0, _momentTimezone.default)(date)) {
           error = translations.to_superior_from;
-        } else if (moment(date).utc() < moment(minimumDate).utc().startOf('day')) {
-          error = translations.date_inferior_min_date.replace('%s', moment(minimumDate).format(format));
+        } else if ((0, _momentTimezone.default)(date).utc() < (0, _momentTimezone.default)(minimumDate).utc().startOf('day')) {
+          error = translations.date_inferior_min_date.replace('%s', (0, _momentTimezone.default)(minimumDate).format(format));
         } else if (disableFutureDays && date > now) {
-          error = translations.date_superior_max_date.replace('%s', moment().tz(timezoneName).format(format));
+          error = translations.date_superior_max_date.replace('%s', (0, _momentTimezone.default)().tz(timezoneName).format(format));
         }
 
-        if (!this.props.enableTime) {
+        if (!_this.props.enableTime) {
           if (name === 'from') {
             date.setHours(0, 0);
           } else {
@@ -134,415 +184,429 @@ class HiDateRangePicker extends React.Component {
         }
       }
 
-      this.props.onChange(name, date);
-      this.props.onChange(`${name}Error`, error);
-    };
-
-    this.handleChangeMobile = inputName => event => {
-      let date;
+      _this.props.onChange(name, date);
 
-      if (event.target.value) {
-        date = new Date(event.target.value);
-      }
+      _this.props.onChange("".concat(name, "Error"), error);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChangeMobile", function (inputName) {
+      return function (event) {
+        var date;
 
-      this.props.onChange(inputName, date);
-    };
+        if (event.target.value) {
+          date = new Date(event.target.value);
+        }
 
-    this.handleCurrentMonthChange = day => {
-      this.setState({
+        _this.props.onChange(inputName, date);
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCurrentMonthChange", function (day) {
+      _this.setState({
         currentMonth: day,
         openedPanel: 'calendar'
       });
-    };
-
-    this.handleDayPickerFocus = name => {
-      this.setState({
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDayPickerFocus", function (name) {
+      _this.setState({
         focusedInput: name
       });
-    };
-
-    this.handleDayPickerBlur = name => {
-      this.setState({
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDayPickerBlur", function (name) {
+      _this.setState({
         focusedInput: ''
       });
 
-      if (this.props.onBlur) {
-        this.props.onBlur(name);
+      if (_this.props.onBlur) {
+        _this.props.onBlur(name);
       }
 
-      this.timeout = setTimeout(() => {
-        if (!['from', 'to'].includes(this.state.focusedInput)) {
-          this.setState({
+      _this.timeout = setTimeout(function () {
+        if (!['from', 'to'].includes(_this.state.focusedInput)) {
+          _this.setState({
             openedPanel: 'calendar'
           });
         }
       }, 100);
-    };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReset", function (name) {
+      _this.handleChange(name, undefined);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (name) {
+      return function (event) {
+        if (event.key === 'Tab' && !event.shiftKey) {
+          var nodeName = document.activeElement.nodeName;
 
-    this.handleReset = name => {
-      this.handleChange(name, undefined);
-    };
+          if (_this.props[name] && nodeName === 'INPUT' && document.activeElement.nextSibling.children.length > 0) {
+            document.activeElement.nextSibling.focus();
+          } else if (name === 'from') {
+            _this.handleDayPickerBlur('from');
 
-    this.handleKeyDown = name => event => {
-      if (event.key === 'Tab' && !event.shiftKey) {
-        const nodeName = document.activeElement.nodeName;
-
-        if (this.props[name] && nodeName === 'INPUT' && document.activeElement.nextSibling.children.length > 0) {
-          document.activeElement.nextSibling.focus();
-        } else if (name === 'from') {
-          this.handleDayPickerBlur('from');
-          this.handleDayPickerFocus('to');
-          this.toInput.handleInputFocus();
-          setTimeout(() => {
-            document.getElementById(`${this.props.id}-to`).focus();
-          }, 1);
-        } else if (name === 'to') {
-          this.handleDayPickerBlur('to');
-          this.toInput.handleInputBlur(event);
-          setTimeout(() => {
-            document.activeElement.blur();
-          }, 1);
-        }
-      } else if (event.key === 'Escape' && !event.shiftKey) {
-        if (name === 'from') {
-          this.fromInput.hideDayPicker();
-        } else if (name === 'to') {
-          this.toInput.hideDayPicker();
-        }
+            _this.handleDayPickerFocus('to');
 
-        event.stopPropagation();
-      }
-    };
+            _this.toInput.handleInputFocus();
+
+            setTimeout(function () {
+              document.getElementById("".concat(_this.props.id, "-to")).focus();
+            }, 1);
+          } else if (name === 'to') {
+            _this.handleDayPickerBlur('to');
 
-    this.openPanel = panel => {
-      this.setState({
+            _this.toInput.handleInputBlur(event);
+
+            setTimeout(function () {
+              document.activeElement.blur();
+            }, 1);
+          }
+        } else if (event.key === 'Escape' && !event.shiftKey) {
+          if (name === 'from') {
+            _this.fromInput.hideDayPicker();
+          } else if (name === 'to') {
+            _this.toInput.hideDayPicker();
+          }
+
+          event.stopPropagation();
+        }
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openPanel", function (panel) {
+      _this.setState({
         openedPanel: panel
       });
-    };
-
-    this.renderCaption = propsCaption => {
-      return React.createElement(Caption, _extends({
-        onMonthClick: () => this.openPanel('months'),
-        onYearClick: () => this.openPanel('years')
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCaption", function (propsCaption) {
+      return _react.default.createElement(_Caption.default, (0, _extends2.default)({
+        onMonthClick: function onMonthClick() {
+          return _this.openPanel('months');
+        },
+        onYearClick: function onYearClick() {
+          return _this.openPanel('years');
+        }
       }, propsCaption));
-    };
-
-    this.renderNavBar = propsNavBar => {
-      return React.createElement(NavBar, _extends({
-        showClockButton: this.props.enableTime,
-        onClockClick: () => this.openPanel('time')
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderNavBar", function (propsNavBar) {
+      return _react.default.createElement(_NavBar.default, (0, _extends2.default)({
+        showClockButton: _this.props.enableTime,
+        onClockClick: function onClockClick() {
+          return _this.openPanel('time');
+        }
       }, propsNavBar));
-    };
-
-    this.renderOverlay = (name, propsOverlay, staticPosition) => {
-      const rangeOverlayProps = _objectSpread({}, propsOverlay, {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOverlay", function (name, propsOverlay, staticPosition) {
+      var rangeOverlayProps = (0, _objectSpread2.default)({}, propsOverlay, {
         side: name,
-        staticPosition
+        staticPosition: staticPosition
       });
 
-      switch (this.state.openedPanel) {
+      switch (_this.state.openedPanel) {
         case 'time':
-          return this.renderTimePickerOverlay(name, rangeOverlayProps);
+          return _this.renderTimePickerOverlay(name, rangeOverlayProps);
 
         case 'months':
-          return this.renderMonthPickerOverlay(name, rangeOverlayProps);
+          return _this.renderMonthPickerOverlay(name, rangeOverlayProps);
 
         case 'years':
-          return this.renderYearPickerOverlay(name, rangeOverlayProps);
+          return _this.renderYearPickerOverlay(name, rangeOverlayProps);
 
         case 'calendar':
         default:
-          return React.createElement(Overlay, rangeOverlayProps);
+          return _react.default.createElement(_Overlay.default, rangeOverlayProps);
       }
-    };
-
-    this.renderOverlayFrom = propsOverlay => {
-      return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
-    };
-
-    this.renderOverlayTo = propsOverlay => {
-      return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
-    };
-
-    this.renderMonthPickerOverlay = (name, propsOverlay) => {
-      const monthPickerProps = {
-        value: this.state.currentMonth,
-        onChange: this.handleCurrentMonthChange
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOverlayFrom", function (propsOverlay) {
+      return _this.renderOverlay('from', propsOverlay, _this.props.staticPosition);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOverlayTo", function (propsOverlay) {
+      return _this.renderOverlay('to', propsOverlay, _this.props.staticPosition);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMonthPickerOverlay", function (name, propsOverlay) {
+      var monthPickerProps = {
+        value: _this.state.currentMonth,
+        onChange: _this.handleCurrentMonthChange
       };
-      return React.createElement(MonthPickerOverlay, _extends({
-        key: `${name}-month-picker-overlay`
+      return _react.default.createElement(_MonthPickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(name, "-month-picker-overlay")
       }, monthPickerProps, propsOverlay));
-    };
-
-    this.renderTimePickerOverlay = (name, propsOverlay) => {
-      const timePickerProps = {
-        value: this.props[name],
-        onChange: (date, precision) => this.handleTimeChange(name, date, precision),
-        onCalendarClick: () => this.openPanel('calendar')
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderTimePickerOverlay", function (name, propsOverlay) {
+      var timePickerProps = {
+        value: _this.props[name],
+        onChange: function onChange(date, precision) {
+          return _this.handleTimeChange(name, date, precision);
+        },
+        onCalendarClick: function onCalendarClick() {
+          return _this.openPanel('calendar');
+        }
       };
-      return React.createElement(TimePickerOverlay, _extends({
-        key: `${name}-time-picker-overlay`
+      return _react.default.createElement(_TimePickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(name, "-time-picker-overlay")
       }, timePickerProps, propsOverlay));
-    };
-
-    this.renderYearPickerOverlay = (name, propsOverlay) => {
-      const yearPickerProps = {
-        value: this.state.currentMonth,
-        onChange: this.handleCurrentMonthChange,
-        disableFutureDays: this.props.disableFutureDays
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderYearPickerOverlay", function (name, propsOverlay) {
+      var yearPickerProps = {
+        value: _this.state.currentMonth,
+        onChange: _this.handleCurrentMonthChange,
+        disableFutureDays: _this.props.disableFutureDays
       };
-      return React.createElement(YearPickerOverlay, _extends({
-        key: `${name}-year-picker-overlay`
+      return _react.default.createElement(_YearPickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(name, "-year-picker-overlay")
       }, yearPickerProps, propsOverlay));
-    };
+    });
 
-    const _today = moment().tz(this.props.timezoneName);
+    var _today = (0, _momentTimezone.default)().tz(_this.props.timezoneName);
 
-    this.state = {
+    _this.state = {
       currentMonth: new Date(_today.year(), _today.month(), _today.date()),
       focusedInput: '',
       openedPanel: 'calendar'
     };
+    return _this;
   }
 
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      classes,
-      disabled,
-      disabledDays,
-      disableFutureDays,
-      enableTime,
-      labelFrom,
-      labelTo,
-      locale,
-      format,
-      from,
-      fromError,
-      minimumDate,
-      onReset,
-      to,
-      toError,
-      translations,
-      id,
-      staticPosition,
-      errorText,
-      hasSelector,
-      helperIcon,
-      helperText,
-      timezoneName
-    } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText", "timezoneName"]);
-
-    const today = moment().tz(timezoneName);
-    const now = new Date(today.year(), today.month(), today.date(), 23, 59, 59, 999);
-    const modifiers = {
-      start: from,
-      end: to,
-      [classes.currentDay]: new Date(today.year(), today.month(), today.date())
-    };
-    const modifiersStyles = {
-      start: {
-        borderTopLeftRadius: '50%',
-        borderBottomLeftRadius: '50%'
-      },
-      end: {
-        borderTopRightRadius: '50%',
-        borderBottomRightRadius: '50%'
-      }
-    };
-    const selectedDays = [];
-    const 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);
+  (0, _createClass2.default)(HiDateRangePicker, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.timeout);
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this,
+          _classNames;
+
+      var _this$props3 = this.props,
+          classes = _this$props3.classes,
+          disabled = _this$props3.disabled,
+          disabledDays = _this$props3.disabledDays,
+          disableFutureDays = _this$props3.disableFutureDays,
+          enableTime = _this$props3.enableTime,
+          labelFrom = _this$props3.labelFrom,
+          labelTo = _this$props3.labelTo,
+          locale = _this$props3.locale,
+          format = _this$props3.format,
+          from = _this$props3.from,
+          fromError = _this$props3.fromError,
+          minimumDate = _this$props3.minimumDate,
+          onReset = _this$props3.onReset,
+          to = _this$props3.to,
+          toError = _this$props3.toError,
+          translations = _this$props3.translations,
+          id = _this$props3.id,
+          staticPosition = _this$props3.staticPosition,
+          errorText = _this$props3.errorText,
+          hasSelector = _this$props3.hasSelector,
+          helperIcon = _this$props3.helperIcon,
+          helperText = _this$props3.helperText,
+          timezoneName = _this$props3.timezoneName,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText", "timezoneName"]);
+      var today = (0, _momentTimezone.default)().tz(timezoneName);
+      var now = new Date(today.year(), today.month(), today.date(), 23, 59, 59, 999);
+      var modifiers = (0, _defineProperty2.default)({
+        start: from,
+        end: to
+      }, classes.currentDay, new Date(today.year(), today.month(), today.date()));
+      var modifiersStyles = {
+        start: {
+          borderTopLeftRadius: '50%',
+          borderBottomLeftRadius: '50%'
+        },
+        end: {
+          borderTopRightRadius: '50%',
+          borderBottomRightRadius: '50%'
+        }
+      };
+      var selectedDays = [];
+      var selected = {};
 
-    const dayPickerProps = _objectSpread({
-      classNames: classes,
-      disabledDays,
-      firstDayOfWeek: 1,
-      fromMonth: minimumDate,
-      locale,
-      modifiers,
-      modifiersStyles,
-      // Both are required ?
-      selectedDays,
-      todayButton: translations.today,
-      weekdayElement: Weekday
-    }, props);
-
-    const fromDayPickerProps = _objectSpread({}, dayPickerProps, {
-      onTodayButtonClick: this.handleCurrentMonthChange,
-      navbarElement: this.renderNavBar,
-      captionElement: this.renderCaption,
-      disabledDays: _objectSpread({}, dayPickerProps.disabledDays, {
-        before: minimumDate
-      }, disableFutureDays && {
-        after: now
-      }, to && {
-        after: to
-      }),
-      locale,
-      localeUtils: HiLocaleUtils,
-      month: this.state.currentMonth,
-      modifiers: _objectSpread({}, modifiers)
-    });
+      if (from instanceof Date) {
+        selectedDays.push(from);
+        selected.from = from;
+      }
 
-    const toDayPickerProps = _objectSpread({}, dayPickerProps, {
-      onTodayButtonClick: this.handleCurrentMonthChange,
-      navbarElement: this.renderNavBar,
-      onDayClick: this.onDayToClick,
-      captionElement: this.renderCaption,
-      disabledDays: _objectSpread({}, dayPickerProps.disabledDays, {
-        before: minimumDate
-      }, disableFutureDays && {
-        after: now
-      }, from && {
-        before: from
-      }),
-      locale,
-      localeUtils: HiLocaleUtils,
-      month: this.state.currentMonth,
-      modifiers: _objectSpread({}, modifiers)
-    }); // From & To InputProps
-
-
-    const fromInputProps = _objectSpread({}, onReset && {
-      onReset: () => this.handleReset('from')
-    }, props, fromError && {
-      error: true
-    }, labelFrom && {
-      label: labelFrom
-    }, {
-      id: `${id}-from`,
-      onChange: this.handleInputChange('from'),
-      disabled,
-      HiInputProps: {
-        onSubmit: this.props.onSubmit
+      if (to instanceof Date) {
+        selectedDays.push(to);
+        selected.to = to;
       }
-    });
 
-    const toInputProps = _objectSpread({}, onReset && {
-      onReset: () => this.handleReset('to')
-    }, props, toError && {
-      error: true
-    }, labelTo && {
-      label: labelTo
-    }, {
-      id: `${id}-to`,
-      onChange: this.handleInputChange('to'),
-      disabled,
-      HiInputProps: {
-        onSubmit: this.props.onSubmit
+      if (Object.values(selected).length > 0) {
+        selectedDays.push(selected);
       }
-    });
 
-    const toClass = classNames(classes.toInput, {
-      [classes.absolute]: !isMobile && staticPosition === true && this.state.focusedInput === 'from',
-      [classes.right4]: !isMobile && staticPosition === true && this.state.focusedInput === 'from'
-    });
-    let content = React.createElement("div", {
-      className: classNames(classes.root, classes.rangePickerContainer)
-    }, React.createElement("div", {
-      className: classes.fromInput,
-      onFocus: !isMobile ? () => this.handleDayPickerFocus('from') : undefined,
-      onKeyDown: !isMobile ? this.handleKeyDown('from') : undefined
-    }, React.createElement("div", null, !isMobile ? React.createElement(DayPickerInput, {
-      key: '1',
-      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: MomentLocaleUtils.formatDate,
-      parseDate: MomentLocaleUtils.parseDate,
-      onDayChange: day => this.handleDayChange('from', day),
-      placeholder: ''
-    }) : React.createElement(HiDatePickerMobile, {
-      id: this.props.id,
-      label: labelFrom,
-      range: true,
-      required: this.props.required,
-      enableTime: enableTime,
-      value: from,
-      onChange: this.handleChangeMobile('from'),
-      disablePastDays: this.props.disablePastDays,
-      disableFutureDays: disableFutureDays,
-      today: today,
-      minimumDate: minimumDate,
-      format: enableTime ? `${format} HH:mm` : format
-    }))), React.createElement("div", {
-      className: toClass,
-      onFocus: !isMobile ? () => this.handleDayPickerFocus('to') : undefined,
-      onBlur: !isMobile ? () => this.handleDayPickerBlur('to') : undefined,
-      onKeyDown: !isMobile ? this.handleKeyDown('to') : undefined
-    }, !isMobile ? React.createElement(DayPickerInput, {
-      key: '1',
-      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: MomentLocaleUtils.formatDate,
-      parseDate: MomentLocaleUtils.parseDate,
-      placeholder: ''
-    }) : React.createElement(HiDatePickerMobile, {
-      id: this.props.id,
-      label: labelTo,
-      range: true,
-      required: this.props.required,
-      enableTime: enableTime,
-      value: to,
-      onChange: this.handleChangeMobile('to'),
-      disablePastDays: this.props.disablePastDays,
-      disableFutureDays: disableFutureDays,
-      today: today,
-      minimumDate: minimumDate,
-      format: enableTime ? `${format} HH:mm` : format
-    })));
-
-    if (!hasSelector) {
-      content = React.createElement(HiFormControl, {
+      var dayPickerProps = (0, _objectSpread2.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);
+      var fromDayPickerProps = (0, _objectSpread2.default)({}, dayPickerProps, {
+        onTodayButtonClick: this.handleCurrentMonthChange,
+        navbarElement: this.renderNavBar,
+        captionElement: this.renderCaption,
+        disabledDays: (0, _objectSpread2.default)({}, dayPickerProps.disabledDays, {
+          before: minimumDate
+        }, disableFutureDays && {
+          after: now
+        }, {}, to && {
+          after: to
+        }),
+        locale: locale,
+        localeUtils: _hiLocaleUtils.default,
+        month: this.state.currentMonth,
+        modifiers: (0, _objectSpread2.default)({}, modifiers)
+      });
+      var toDayPickerProps = (0, _objectSpread2.default)({}, dayPickerProps, {
+        onTodayButtonClick: this.handleCurrentMonthChange,
+        navbarElement: this.renderNavBar,
+        onDayClick: this.onDayToClick,
+        captionElement: this.renderCaption,
+        disabledDays: (0, _objectSpread2.default)({}, dayPickerProps.disabledDays, {
+          before: minimumDate
+        }, disableFutureDays && {
+          after: now
+        }, {}, from && {
+          before: from
+        }),
+        locale: locale,
+        localeUtils: _hiLocaleUtils.default,
+        month: this.state.currentMonth,
+        modifiers: (0, _objectSpread2.default)({}, modifiers)
+      }); // From & To InputProps
+
+      var fromInputProps = (0, _objectSpread2.default)({}, onReset && {
+        onReset: function onReset() {
+          return _this2.handleReset('from');
+        }
+      }, {}, props, {}, fromError && {
+        error: true
+      }, {}, labelFrom && {
+        label: labelFrom
+      }, {
+        id: "".concat(id, "-from"),
+        onChange: this.handleInputChange('from'),
         disabled: disabled,
-        helperIcon: helperIcon,
-        helperText: helperText,
-        errorText: errorText,
-        error: fromError || toError,
-        label: ' '
-      }, content);
-    }
-
-    return content;
-  }
+        HiInputProps: {
+          onSubmit: this.props.onSubmit
+        }
+      });
+      var toInputProps = (0, _objectSpread2.default)({}, onReset && {
+        onReset: function onReset() {
+          return _this2.handleReset('to');
+        }
+      }, {}, props, {}, toError && {
+        error: true
+      }, {}, labelTo && {
+        label: labelTo
+      }, {
+        id: "".concat(id, "-to"),
+        onChange: this.handleInputChange('to'),
+        disabled: disabled,
+        HiInputProps: {
+          onSubmit: this.props.onSubmit
+        }
+      });
+      var toClass = (0, _classnames.default)(classes.toInput, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.absolute, !_reactDeviceDetect.isMobile && staticPosition === true && this.state.focusedInput === 'from'), (0, _defineProperty2.default)(_classNames, classes.right4, !_reactDeviceDetect.isMobile && staticPosition === true && this.state.focusedInput === 'from'), _classNames));
+
+      var content = _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.root, classes.rangePickerContainer)
+      }, _react.default.createElement("div", {
+        className: classes.fromInput,
+        onFocus: !_reactDeviceDetect.isMobile ? function () {
+          return _this2.handleDayPickerFocus('from');
+        } : undefined,
+        onKeyDown: !_reactDeviceDetect.isMobile ? this.handleKeyDown('from') : undefined
+      }, _react.default.createElement("div", null, !_reactDeviceDetect.isMobile ? _react.default.createElement(_DayPickerInput.default, {
+        key: '1',
+        ref: function ref(el) {
+          _this2.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: function onDayChange(day) {
+          return _this2.handleDayChange('from', day);
+        },
+        placeholder: ''
+      }) : _react.default.createElement(_HiDatePickerMobile.default, {
+        id: this.props.id,
+        label: labelFrom,
+        range: true,
+        required: this.props.required,
+        enableTime: enableTime,
+        value: from,
+        onChange: this.handleChangeMobile('from'),
+        disablePastDays: this.props.disablePastDays,
+        disableFutureDays: disableFutureDays,
+        today: today,
+        minimumDate: minimumDate,
+        format: enableTime ? "".concat(format, " HH:mm") : format
+      }))), _react.default.createElement("div", {
+        className: toClass,
+        onFocus: !_reactDeviceDetect.isMobile ? function () {
+          return _this2.handleDayPickerFocus('to');
+        } : undefined,
+        onBlur: !_reactDeviceDetect.isMobile ? function () {
+          return _this2.handleDayPickerBlur('to');
+        } : undefined,
+        onKeyDown: !_reactDeviceDetect.isMobile ? this.handleKeyDown('to') : undefined
+      }, !_reactDeviceDetect.isMobile ? _react.default.createElement(_DayPickerInput.default, {
+        key: '1',
+        ref: function ref(el) {
+          _this2.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,
+        placeholder: ''
+      }) : _react.default.createElement(_HiDatePickerMobile.default, {
+        id: this.props.id,
+        label: labelTo,
+        range: true,
+        required: this.props.required,
+        enableTime: enableTime,
+        value: to,
+        onChange: this.handleChangeMobile('to'),
+        disablePastDays: this.props.disablePastDays,
+        disableFutureDays: disableFutureDays,
+        today: today,
+        minimumDate: minimumDate,
+        format: enableTime ? "".concat(format, " HH:mm") : format
+      })));
+
+      if (!hasSelector) {
+        content = _react.default.createElement(_HiFormControl.default, {
+          disabled: disabled,
+          helperIcon: helperIcon,
+          helperText: helperText,
+          errorText: errorText,
+          error: fromError || toError,
+          label: ' '
+        }, content);
+      }
 
-}
+      return content;
+    }
+  }]);
+  return HiDateRangePicker;
+}(_react.default.Component);
 
-HiDateRangePicker.defaultProps = {
+(0, _defineProperty2.default)(HiDateRangePicker, "defaultProps", {
   disabledDays: {},
   disableFutureDays: true,
   staticPosition: false,
@@ -568,144 +632,10 @@ HiDateRangePicker.defaultProps = {
     date_superior_max_date: 'Date from cannot be greater than %s',
     date_inferior_min_date: 'Date from cannot be before than %s'
   }
-};
-HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Inactif
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * http://react-day-picker.js.org/api/DayPicker#disabledDays
-   */
-  disabledDays: PropTypes.object,
-
-  /**
-   * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
-   */
-  disableFutureDays: PropTypes.bool,
-
-  /**
-   * Ajoute la gestion de l'heure
-   */
-  enableTime: PropTypes.bool,
-
-  /**
-   * Texte de l'erreur
-   */
-  errorText: PropTypes.string,
-
-  /**
-   * Format des dates affichées
-   */
-  format: PropTypes.string,
-
-  /**
-   * Date de début sélectionnée
-   */
-  from: PropTypes.instanceOf(Date),
-  // from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-
-  /**
-   * Erreur sur date from
-   */
-  fromError: PropTypes.bool,
-
-  /**
-   * @ignore
-   * Si true, on n'enveloppe pas le composant avec un HiFormControl
-   */
-  hasSelector: PropTypes.bool,
-
-  /**
-   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
-   */
-  helperIcon: PropTypes.bool,
-
-  /**
-   * Texte de l'aide
-   */
-  helperText: PropTypes.string,
-
-  /**
-   * 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
-   * @param {string} nom de l'input
-   */
-  onBlur: PropTypes.func,
-
-  /**
-   * Callback à la sélection d'une date
-   * @param {string} nom du champs
-   * @param {string} nouvelle valeur du champs
-   */
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * Callback au reset de l'input
-   * @param {string} nom du champs réinitialisé
-   */
-  onReset: PropTypes.func,
-
-  /**
-   * Callback lorsque l'utilisateur tape sur "Entrée"
-   */
-  onSubmit: PropTypes.func,
-
-  /**
-   * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
-   */
-  staticPosition: PropTypes.bool,
-
-  /**
-   * Timezone de l'utilisateur
-   */
-  timezoneName: PropTypes.string,
-
-  /**
-   * Date de fin sélectionnée
-   */
-  to: PropTypes.instanceOf(Date),
-
-  /**
-   * Erreur sur date to
-   */
-  toError: PropTypes.bool,
-
-  /**
-   * Traductions
-   */
-  translations: PropTypes.object
-} : {};
-export default withStyles(styles, {
+});
+
+var _default = (0, _styles.withStyles)(_stylesheet.default, {
   name: 'HmuiHiDateRangePicker'
-})(HiDateRangePicker);
+})(HiDateRangePicker);
+
+exports.default = _default;