@hipay/hipay-material-ui 4.0.0 → 4.0.1-beta5

package/HiDatePicker/HiDateRangePicker.js

@@ -1,47 +1,83 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
 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 _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
 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"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(HiDateRangePicker, _React$Component);
+
   var _super = _createSuper(HiDateRangePicker);
+
   function HiDateRangePicker(props) {
     var _this;
+
     (0, _classCallCheck2.default)(this, HiDateRangePicker);
     _this = _super.call(this, props);
+
     _this.handleDayChange = function (name, day) {
       if (day) {
         // if time disabled, focus TO input
@@ -59,43 +95,57 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
             }
           }, 10);
         }
+
         if (_this.props.onChange) {
           _this.handleChange(name, day);
         }
+
         if (_this.props.enableTime) {
           _this.openPanel('time');
         }
       }
     };
+
     _this.handleInputChange = function (inputName) {
       return function (event) {
         _this.handleChange(inputName, event.target.value);
       };
     };
+
     _this.onDayToClick = function (day) {
       var change = (0, _momentTimezone.default)(day) >= (0, _momentTimezone.default)(_this.props.from);
       var today = (0, _momentTimezone.default)();
       var todayDate = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
+
       if (change && day > todayDate && _this.props.disableFutureDays) {
         change = false;
       }
+
       if (change) {
         _this.handleDayChange('to', day);
+
         document.activeElement.blur();
       }
     };
+
     _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');
       } else if (name === 'to' && precision === 'minute') {
         _this.toInput.hideDayPicker();
+
         document.activeElement.blur();
       }
     };
+
     _this.handleChange = function (name, day) {
       var translations = _this.props.translations;
       var date;
@@ -103,21 +153,25 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
       var today = (0, _momentTimezone.default)();
       var now = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
       var _this$props = _this.props,
-        minimumDate = _this$props.minimumDate,
-        disableFutureDays = _this$props.disableFutureDays,
-        format = _this$props.format;
+          minimumDate = _this$props.minimumDate,
+          disableFutureDays = _this$props.disableFutureDays,
+          format = _this$props.format;
+
       if (day instanceof Date) {
         date = day;
       } else if (day) {
         var parsedValue = (0, _momentTimezone.default)(day, _this.props.format, true);
+
         if (parsedValue.isValid()) {
           date = parsedValue.toDate();
         } else {
           error = translations.invalid_format;
         }
       }
+
       if (date) {
         var comparativeDate = name === 'to' ? (0, _momentTimezone.default)(_this.props.from) : (0, _momentTimezone.default)(_this.props.to);
+
         if (name === 'to' && comparativeDate > (0, _momentTimezone.default)(date) || name === 'from' && comparativeDate < (0, _momentTimezone.default)(date)) {
           error = translations.to_superior_from;
         } else if ((0, _momentTimezone.default)(date).utc() < (0, _momentTimezone.default)(minimumDate).utc().startOf('day')) {
@@ -125,6 +179,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         } else if (disableFutureDays && date > now) {
           error = translations.date_superior_max_date.replace('%s', (0, _momentTimezone.default)().format(format));
         }
+
         if (!_this.props.enableTime) {
           if (name === 'from') {
             date.setHours(0, 0, 0);
@@ -133,36 +188,46 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
           }
         }
       }
+
       _this.props.onChange(name, date);
+
       _this.props.onChange("".concat(name, "Error"), error);
     };
+
     _this.handleChangeMobile = function (inputName) {
       return function (event) {
         var date;
+
         if (event.target.value) {
           date = new Date(event.target.value);
         }
+
         _this.props.onChange(inputName, date);
       };
     };
+
     _this.handleCurrentMonthChange = function (day) {
       _this.setState({
         currentMonth: day,
         openedPanel: 'calendar'
       });
     };
+
     _this.handleDayPickerFocus = function (name) {
       _this.setState({
         focusedInput: name
       });
     };
+
     _this.handleDayPickerBlur = function (name) {
       _this.setState({
         focusedInput: ''
       });
+
       if (_this.props.onBlur) {
         _this.props.onBlur(name);
       }
+
       _this.timeout = setTimeout(function () {
         if (!['from', 'to'].includes(_this.state.focusedInput)) {
           _this.setState({
@@ -171,30 +236,33 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         }
       }, 100);
     };
+
     _this.handleReset = function (name) {
       _this.handleChange(name, undefined);
     };
-    /**
-     * Navigate to next focusable dom element with `Tab`
-     *
-     * @param name
-     */
+
     _this.handleKeyDown = function (name) {
       return function (event) {
         if (event.key === 'Tab' && !event.shiftKey) {
           var 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(function () {
               document.getElementById("".concat(_this.props.id, "-to")).focus();
             }, 1);
           } else if (name === 'to') {
             _this.handleDayPickerBlur('to');
+
             _this.toInput.handleInputBlur(event);
+
             setTimeout(function () {
               document.activeElement.blur();
             }, 1);
@@ -205,15 +273,18 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
           } else if (name === 'to') {
             _this.toInput.hideDayPicker();
           }
+
           event.stopPropagation();
         }
       };
     };
+
     _this.openPanel = function (panel) {
       _this.setState({
         openedPanel: panel
       });
     };
+
     _this.renderCaption = function (propsCaption) {
       return /*#__PURE__*/_react.default.createElement(_Caption.default, (0, _extends2.default)({
         onMonthClick: function onMonthClick() {
@@ -224,6 +295,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         }
       }, propsCaption));
     };
+
     _this.renderNavBar = function (propsNavBar) {
       return /*#__PURE__*/_react.default.createElement(_NavBar.default, (0, _extends2.default)({
         showClockButton: _this.props.enableTime,
@@ -232,29 +304,37 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         }
       }, propsNavBar));
     };
+
     _this.renderOverlay = function (name, propsOverlay, staticPosition) {
       var rangeOverlayProps = (0, _objectSpread2.default)({}, propsOverlay, {
         side: name,
         staticPosition: staticPosition
       });
+
       switch (_this.state.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 /*#__PURE__*/_react.default.createElement(_Overlay.default, rangeOverlayProps);
       }
     };
+
     _this.renderOverlayFrom = function (propsOverlay) {
       return _this.renderOverlay('from', propsOverlay, _this.props.staticPosition);
     };
+
     _this.renderOverlayTo = function (propsOverlay) {
       return _this.renderOverlay('to', propsOverlay, _this.props.staticPosition);
     };
+
     _this.renderMonthPickerOverlay = function (name, propsOverlay) {
       var monthPickerProps = {
         value: _this.state.currentMonth,
@@ -264,6 +344,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         key: "".concat(name, "-month-picker-overlay")
       }, monthPickerProps, propsOverlay));
     };
+
     _this.renderTimePickerOverlay = function (name, propsOverlay) {
       var timePickerProps = {
         value: _this.props[name],
@@ -278,6 +359,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         key: "".concat(name, "-time-picker-overlay")
       }, timePickerProps, propsOverlay));
     };
+
     _this.renderYearPickerOverlay = function (name, propsOverlay) {
       var yearPickerProps = {
         value: _this.state.currentMonth,
@@ -288,7 +370,9 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         key: "".concat(name, "-year-picker-overlay")
       }, yearPickerProps, propsOverlay));
     };
+
     var _today = (0, _momentTimezone.default)();
+
     _this.state = {
       currentMonth: new Date(_today.year(), _today.month(), _today.date()),
       focusedInput: '',
@@ -296,6 +380,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
+
   (0, _createClass2.default)(HiDateRangePicker, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
@@ -304,31 +389,33 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this2 = this,
+          _classNames;
+
       var _this$props2 = this.props,
-        classes = _this$props2.classes,
-        disabled = _this$props2.disabled,
-        disabledDays = _this$props2.disabledDays,
-        disableFutureDays = _this$props2.disableFutureDays,
-        enableTime = _this$props2.enableTime,
-        labelFrom = _this$props2.labelFrom,
-        labelTo = _this$props2.labelTo,
-        locale = _this$props2.locale,
-        format = _this$props2.format,
-        from = _this$props2.from,
-        fromError = _this$props2.fromError,
-        minimumDate = _this$props2.minimumDate,
-        onReset = _this$props2.onReset,
-        to = _this$props2.to,
-        toError = _this$props2.toError,
-        translations = _this$props2.translations,
-        id = _this$props2.id,
-        staticPosition = _this$props2.staticPosition,
-        errorText = _this$props2.errorText,
-        hasSelector = _this$props2.hasSelector,
-        helperIcon = _this$props2.helperIcon,
-        helperText = _this$props2.helperText,
-        props = (0, _objectWithoutProperties2.default)(_this$props2, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
+          classes = _this$props2.classes,
+          disabled = _this$props2.disabled,
+          disabledDays = _this$props2.disabledDays,
+          disableFutureDays = _this$props2.disableFutureDays,
+          enableTime = _this$props2.enableTime,
+          labelFrom = _this$props2.labelFrom,
+          labelTo = _this$props2.labelTo,
+          locale = _this$props2.locale,
+          format = _this$props2.format,
+          from = _this$props2.from,
+          fromError = _this$props2.fromError,
+          minimumDate = _this$props2.minimumDate,
+          onReset = _this$props2.onReset,
+          to = _this$props2.to,
+          toError = _this$props2.toError,
+          translations = _this$props2.translations,
+          id = _this$props2.id,
+          staticPosition = _this$props2.staticPosition,
+          errorText = _this$props2.errorText,
+          hasSelector = _this$props2.hasSelector,
+          helperIcon = _this$props2.helperIcon,
+          helperText = _this$props2.helperText,
+          props = (0, _objectWithoutProperties2.default)(_this$props2, ["classes", "disabled", "disabledDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "fromError", "minimumDate", "onReset", "to", "toError", "translations", "id", "staticPosition", "errorText", "hasSelector", "helperIcon", "helperText"]);
       var today = (0, _momentTimezone.default)();
       var now = new Date(today.year(), today.month(), today.date(), 23, 59, 59, 999);
       var modifiers = (0, _defineProperty2.default)({
@@ -347,17 +434,21 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
       };
       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, _objectSpread2.default)({
         classNames: classes,
         disabledDays: disabledDays,
@@ -403,9 +494,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         localeUtils: _hiLocaleUtils.default,
         month: this.state.currentMonth,
         modifiers: (0, _objectSpread2.default)({}, modifiers)
-      });
-
-      // From & To InputProps
+      }); // From & To InputProps
 
       var fromInputProps = (0, _objectSpread2.default)({}, onReset && {
         onReset: function onReset() {
@@ -439,7 +528,8 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
           onSubmit: this.props.onSubmit
         }
       });
-      var toClass = (0, _classnames.default)(classes.toInput, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, classes.absolute, !_reactDeviceDetect.isMobile && staticPosition === true && this.state.focusedInput === 'from'), classes.right4, !_reactDeviceDetect.isMobile && staticPosition === true && this.state.focusedInput === 'from'));
+      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 = /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(classes.root, classes.rangePickerContainer)
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -517,6 +607,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
         minimumDate: minimumDate,
         format: enableTime ? "".concat(format, " HH:mm") : format
       })));
+
       if (!hasSelector) {
         content = /*#__PURE__*/_react.default.createElement(_HiFormControl.default, {
           disabled: disabled,
@@ -527,11 +618,13 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
           label: ' '
         }, content);
       }
+
       return content;
     }
   }]);
   return HiDateRangePicker;
 }(_react.default.Component);
+
 HiDateRangePicker.defaultProps = {
   disabledDays: {},
   disableFutureDays: true,
@@ -558,6 +651,9 @@ HiDateRangePicker.defaultProps = {
     date_inferior_min_date: 'Date from cannot be before than %s'
   }
 };
-var _default = exports.default = (0, _withStyles.default)(_stylesheet.default, {
+
+var _default = (0, _withStyles.default)(_stylesheet.default, {
   name: 'HmuiHiDateRangePicker'
-})(HiDateRangePicker);
+})(HiDateRangePicker);
+
+exports.default = _default;