@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/es/HiDatePicker/HiDateRangePicker.js

@@ -0,0 +1,657 @@
+"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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+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));
+
+    _this.handleDayChange = function (name, day) {
+      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 {
+          _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.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) {
+        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;
+      var error;
+      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;
+
+      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')) {
+          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', (0, _momentTimezone.default)().format(format));
+        }
+
+        if (!_this.props.enableTime) {
+          if (name === 'from') {
+            date.setHours(0, 0, 0);
+          } else {
+            date.setHours(23, 59, 59);
+          }
+        }
+      }
+
+      _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({
+            openedPanel: 'calendar'
+          });
+        }
+      }, 100);
+    };
+
+    _this.handleReset = function (name) {
+      _this.handleChange(name, undefined);
+    };
+
+    _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);
+          }
+        } else if (event.key === 'Escape' && !event.shiftKey) {
+          if (name === 'from') {
+            _this.fromInput.hideDayPicker();
+          } else if (name === 'to') {
+            _this.toInput.hideDayPicker();
+          }
+
+          event.stopPropagation();
+        }
+      };
+    };
+
+    _this.openPanel = function (panel) {
+      _this.setState({
+        openedPanel: panel
+      });
+    };
+
+    _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 = 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 = 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 _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,
+        onChange: _this.handleCurrentMonthChange
+      };
+      return _react.default.createElement(_MonthPickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(name, "-month-picker-overlay")
+      }, monthPickerProps, propsOverlay));
+    };
+
+    _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.default.createElement(_TimePickerOverlay.default, (0, _extends2.default)({
+        key: "".concat(name, "-time-picker-overlay")
+      }, timePickerProps, propsOverlay));
+    };
+
+    _this.renderYearPickerOverlay = function (name, propsOverlay) {
+      var yearPickerProps = {
+        value: _this.state.currentMonth,
+        onChange: _this.handleCurrentMonthChange,
+        disableFutureDays: _this.props.disableFutureDays
+      };
+      return _react.default.createElement(_YearPickerOverlay.default, (0, _extends2.default)({
+        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: '',
+      openedPanel: 'calendar'
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDateRangePicker, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.timeout);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      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,
+          helperIconLeft = _this$props2.helperIconLeft,
+          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", "helperIconLeft", "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)({
+        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 = {};
+
+      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,
+        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,
+        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,
+          helperIconLeft: helperIconLeft,
+          helperText: helperText,
+          errorText: errorText,
+          error: fromError || toError,
+          label: ' '
+        }, content);
+      }
+
+      return content;
+    }
+  }]);
+  return HiDateRangePicker;
+}(_react.default.Component);
+
+HiDateRangePicker.defaultProps = {
+  disabledDays: {},
+  disableFutureDays: true,
+  staticPosition: false,
+  enableTime: false,
+  hasSelector: false,
+  format: 'YYYY-MM-DD',
+  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',
+    invalid_format: 'The date format is not valid',
+    to_superior_from: 'Date from cannot be greater than date to',
+    missing_date_from: 'Missing date from',
+    missing_date_to: 'Missing date to',
+    date_superior_max_date: 'Date from cannot be greater than %s',
+    date_inferior_min_date: 'Date from cannot be before than %s'
+  }
+};
+
+var _default = (0, _styles.withStyles)(_stylesheet.default, {
+  name: 'HmuiHiDateRangePicker'
+})(HiDateRangePicker);
+
+exports.default = _default;