@birdnet/advanced-react-dates 0.0.0-stage → 1.0.0

package/lib/components/DateRangePickerInputController.js

@@ -0,0 +1,354 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _enzymeShallowEqual = _interopRequireDefault(require("enzyme-shallow-equal"));
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _moment = _interopRequireDefault(require("moment"));
+var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes"));
+var _airbnbPropTypes = require("airbnb-prop-types");
+var _OpenDirectionShape = _interopRequireDefault(require("../shapes/OpenDirectionShape"));
+var _defaultPhrases = require("../defaultPhrases");
+var _getPhrasePropTypes = _interopRequireDefault(require("../utils/getPhrasePropTypes"));
+var _DateRangePickerInput = _interopRequireDefault(require("./DateRangePickerInput"));
+var _IconPositionShape = _interopRequireDefault(require("../shapes/IconPositionShape"));
+var _DisabledShape = _interopRequireDefault(require("../shapes/DisabledShape"));
+var _toMomentObject = _interopRequireDefault(require("../utils/toMomentObject"));
+var _toLocalizedDateString = _interopRequireDefault(require("../utils/toLocalizedDateString"));
+var _isInclusivelyAfterDay = _interopRequireDefault(require("../utils/isInclusivelyAfterDay"));
+var _isBeforeDay = _interopRequireDefault(require("../utils/isBeforeDay"));
+var _constants = require("../constants");
+var propTypes = process.env.NODE_ENV !== "production" ? (0, _airbnbPropTypes.forbidExtraProps)({
+  children: _propTypes["default"].node,
+  startDate: _reactMomentProptypes["default"].momentObj,
+  startDateId: _propTypes["default"].string,
+  startDatePlaceholderText: _propTypes["default"].string,
+  isStartDateFocused: _propTypes["default"].bool,
+  startDateAriaLabel: _propTypes["default"].string,
+  startDateTitleText: _propTypes["default"].string,
+  endDate: _reactMomentProptypes["default"].momentObj,
+  endDateId: _propTypes["default"].string,
+  endDatePlaceholderText: _propTypes["default"].string,
+  isEndDateFocused: _propTypes["default"].bool,
+  endDateAriaLabel: _propTypes["default"].string,
+  endDateTitleText: _propTypes["default"].string,
+  screenReaderMessage: _propTypes["default"].string,
+  showClearDates: _propTypes["default"].bool,
+  showCaret: _propTypes["default"].bool,
+  showDefaultInputIcon: _propTypes["default"].bool,
+  inputIconPosition: _IconPositionShape["default"],
+  disabled: _DisabledShape["default"],
+  required: _propTypes["default"].bool,
+  readOnly: _propTypes["default"].bool,
+  openDirection: _OpenDirectionShape["default"],
+  noBorder: _propTypes["default"].bool,
+  block: _propTypes["default"].bool,
+  small: _propTypes["default"].bool,
+  regular: _propTypes["default"].bool,
+  verticalSpacing: _airbnbPropTypes.nonNegativeInteger,
+  autoComplete: _propTypes["default"].string,
+  keepOpenOnDateSelect: _propTypes["default"].bool,
+  reopenPickerOnClearDates: _propTypes["default"].bool,
+  withFullScreenPortal: _propTypes["default"].bool,
+  minimumNights: _airbnbPropTypes.nonNegativeInteger,
+  isOutsideRange: _propTypes["default"].func,
+  isDayBlocked: _propTypes["default"].func,
+  displayFormat: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
+  onFocusChange: _propTypes["default"].func,
+  onClose: _propTypes["default"].func,
+  onDatesChange: _propTypes["default"].func,
+  onKeyDownArrowDown: _propTypes["default"].func,
+  onKeyDownQuestionMark: _propTypes["default"].func,
+  customInputIcon: _propTypes["default"].node,
+  customArrowIcon: _propTypes["default"].node,
+  customCloseIcon: _propTypes["default"].node,
+  // accessibility
+  isFocused: _propTypes["default"].bool,
+  // i18n
+  phrases: _propTypes["default"].shape((0, _getPhrasePropTypes["default"])(_defaultPhrases.DateRangePickerInputPhrases)),
+  isRTL: _propTypes["default"].bool
+}) : {};
+var defaultProps = {
+  children: null,
+  startDate: null,
+  startDateId: _constants.START_DATE,
+  startDatePlaceholderText: 'Start Date',
+  isStartDateFocused: false,
+  startDateAriaLabel: undefined,
+  startDateTitleText: undefined,
+  endDate: null,
+  endDateId: _constants.END_DATE,
+  endDatePlaceholderText: 'End Date',
+  isEndDateFocused: false,
+  endDateAriaLabel: undefined,
+  endDateTitleText: undefined,
+  screenReaderMessage: '',
+  showClearDates: false,
+  showCaret: false,
+  showDefaultInputIcon: false,
+  inputIconPosition: _constants.ICON_BEFORE_POSITION,
+  disabled: false,
+  required: false,
+  readOnly: false,
+  openDirection: _constants.OPEN_DOWN,
+  noBorder: false,
+  block: false,
+  small: false,
+  regular: false,
+  verticalSpacing: undefined,
+  autoComplete: 'off',
+  keepOpenOnDateSelect: false,
+  reopenPickerOnClearDates: false,
+  withFullScreenPortal: false,
+  minimumNights: 1,
+  isOutsideRange: function isOutsideRange(day) {
+    return !(0, _isInclusivelyAfterDay["default"])(day, (0, _moment["default"])());
+  },
+  isDayBlocked: function isDayBlocked() {
+    return false;
+  },
+  displayFormat: function displayFormat() {
+    return _moment["default"].localeData().longDateFormat('L');
+  },
+  onFocusChange: function onFocusChange() {},
+  onClose: function onClose() {},
+  onDatesChange: function onDatesChange() {},
+  onKeyDownArrowDown: function onKeyDownArrowDown() {},
+  onKeyDownQuestionMark: function onKeyDownQuestionMark() {},
+  customInputIcon: null,
+  customArrowIcon: null,
+  customCloseIcon: null,
+  // accessibility
+  isFocused: false,
+  // i18n
+  phrases: _defaultPhrases.DateRangePickerInputPhrases,
+  isRTL: false
+};
+var DateRangePickerInputController = exports["default"] = /*#__PURE__*/function (_ref2, _ref) {
+  function DateRangePickerInputController(props) {
+    var _this;
+    _this = _ref2.call(this, props) || this;
+    _this.onClearFocus = _this.onClearFocus.bind(_this);
+    _this.onStartDateChange = _this.onStartDateChange.bind(_this);
+    _this.onStartDateFocus = _this.onStartDateFocus.bind(_this);
+    _this.onEndDateChange = _this.onEndDateChange.bind(_this);
+    _this.onEndDateFocus = _this.onEndDateFocus.bind(_this);
+    _this.clearDates = _this.clearDates.bind(_this);
+    return _this;
+  }
+  (0, _inheritsLoose2["default"])(DateRangePickerInputController, _ref2);
+  var _proto = DateRangePickerInputController.prototype;
+  _proto[_ref] = function (nextProps, nextState) {
+    return !(0, _enzymeShallowEqual["default"])(this.props, nextProps) || !(0, _enzymeShallowEqual["default"])(this.state, nextState);
+  };
+  _proto.onClearFocus = function onClearFocus() {
+    var _this$props = this.props,
+      onFocusChange = _this$props.onFocusChange,
+      onClose = _this$props.onClose,
+      startDate = _this$props.startDate,
+      endDate = _this$props.endDate;
+    onFocusChange(null);
+    onClose({
+      startDate: startDate,
+      endDate: endDate
+    });
+  };
+  _proto.onEndDateChange = function onEndDateChange(endDateString) {
+    var _this$props2 = this.props,
+      startDate = _this$props2.startDate,
+      isOutsideRange = _this$props2.isOutsideRange,
+      isDayBlocked = _this$props2.isDayBlocked,
+      minimumNights = _this$props2.minimumNights,
+      keepOpenOnDateSelect = _this$props2.keepOpenOnDateSelect,
+      onDatesChange = _this$props2.onDatesChange,
+      onClose = _this$props2.onClose,
+      onFocusChange = _this$props2.onFocusChange;
+    var endDate = (0, _toMomentObject["default"])(endDateString, this.getDisplayFormat());
+    var isEndDateValid = endDate && !isOutsideRange(endDate) && !isDayBlocked(endDate) && !(startDate && (0, _isBeforeDay["default"])(endDate, startDate.clone().add(minimumNights, 'days')));
+    if (isEndDateValid) {
+      onDatesChange({
+        startDate: startDate,
+        endDate: endDate
+      });
+      if (!keepOpenOnDateSelect) {
+        onFocusChange(null);
+        onClose({
+          startDate: startDate,
+          endDate: endDate
+        });
+      }
+    } else {
+      onDatesChange({
+        startDate: startDate,
+        endDate: null
+      });
+    }
+  };
+  _proto.onEndDateFocus = function onEndDateFocus() {
+    var _this$props3 = this.props,
+      startDate = _this$props3.startDate,
+      onFocusChange = _this$props3.onFocusChange,
+      withFullScreenPortal = _this$props3.withFullScreenPortal,
+      disabled = _this$props3.disabled;
+    if (!startDate && withFullScreenPortal && (!disabled || disabled === _constants.END_DATE)) {
+      // When the datepicker is full screen, we never want to focus the end date first
+      // because there's no indication that that is the case once the datepicker is open and it
+      // might confuse the user
+      onFocusChange(_constants.START_DATE);
+    } else if (!disabled || disabled === _constants.START_DATE) {
+      onFocusChange(_constants.END_DATE);
+    }
+  };
+  _proto.onStartDateChange = function onStartDateChange(startDateString) {
+    var endDate = this.props.endDate;
+    var _this$props4 = this.props,
+      isOutsideRange = _this$props4.isOutsideRange,
+      isDayBlocked = _this$props4.isDayBlocked,
+      minimumNights = _this$props4.minimumNights,
+      onDatesChange = _this$props4.onDatesChange,
+      onFocusChange = _this$props4.onFocusChange,
+      disabled = _this$props4.disabled;
+    var startDate = (0, _toMomentObject["default"])(startDateString, this.getDisplayFormat());
+    var isEndDateBeforeStartDate = startDate && (0, _isBeforeDay["default"])(endDate, startDate.clone().add(minimumNights, 'days'));
+    var isStartDateValid = startDate && !isOutsideRange(startDate) && !isDayBlocked(startDate) && !(disabled === _constants.END_DATE && isEndDateBeforeStartDate);
+    if (isStartDateValid) {
+      if (isEndDateBeforeStartDate) {
+        endDate = null;
+      }
+      onDatesChange({
+        startDate: startDate,
+        endDate: endDate
+      });
+      onFocusChange(_constants.END_DATE);
+    } else {
+      onDatesChange({
+        startDate: null,
+        endDate: endDate
+      });
+    }
+  };
+  _proto.onStartDateFocus = function onStartDateFocus() {
+    var _this$props5 = this.props,
+      disabled = _this$props5.disabled,
+      onFocusChange = _this$props5.onFocusChange;
+    if (!disabled || disabled === _constants.END_DATE) {
+      onFocusChange(_constants.START_DATE);
+    }
+  };
+  _proto.getDisplayFormat = function getDisplayFormat() {
+    var displayFormat = this.props.displayFormat;
+    return typeof displayFormat === 'string' ? displayFormat : displayFormat();
+  };
+  _proto.getDateString = function getDateString(date) {
+    var displayFormat = this.getDisplayFormat();
+    if (date && displayFormat) {
+      return date && date.format(displayFormat);
+    }
+    return (0, _toLocalizedDateString["default"])(date);
+  };
+  _proto.clearDates = function clearDates() {
+    var _this$props6 = this.props,
+      onDatesChange = _this$props6.onDatesChange,
+      reopenPickerOnClearDates = _this$props6.reopenPickerOnClearDates,
+      onFocusChange = _this$props6.onFocusChange;
+    onDatesChange({
+      startDate: null,
+      endDate: null
+    });
+    if (reopenPickerOnClearDates) {
+      onFocusChange(_constants.START_DATE);
+    }
+  };
+  _proto.render = function render() {
+    var _this$props7 = this.props,
+      children = _this$props7.children,
+      startDate = _this$props7.startDate,
+      startDateId = _this$props7.startDateId,
+      startDatePlaceholderText = _this$props7.startDatePlaceholderText,
+      isStartDateFocused = _this$props7.isStartDateFocused,
+      startDateAriaLabel = _this$props7.startDateAriaLabel,
+      startDateTitleText = _this$props7.startDateTitleText,
+      endDate = _this$props7.endDate,
+      endDateId = _this$props7.endDateId,
+      endDatePlaceholderText = _this$props7.endDatePlaceholderText,
+      endDateAriaLabel = _this$props7.endDateAriaLabel,
+      endDateTitleText = _this$props7.endDateTitleText,
+      isEndDateFocused = _this$props7.isEndDateFocused,
+      screenReaderMessage = _this$props7.screenReaderMessage,
+      showClearDates = _this$props7.showClearDates,
+      showCaret = _this$props7.showCaret,
+      showDefaultInputIcon = _this$props7.showDefaultInputIcon,
+      inputIconPosition = _this$props7.inputIconPosition,
+      customInputIcon = _this$props7.customInputIcon,
+      customArrowIcon = _this$props7.customArrowIcon,
+      customCloseIcon = _this$props7.customCloseIcon,
+      disabled = _this$props7.disabled,
+      required = _this$props7.required,
+      readOnly = _this$props7.readOnly,
+      openDirection = _this$props7.openDirection,
+      isFocused = _this$props7.isFocused,
+      phrases = _this$props7.phrases,
+      onKeyDownArrowDown = _this$props7.onKeyDownArrowDown,
+      onKeyDownQuestionMark = _this$props7.onKeyDownQuestionMark,
+      isRTL = _this$props7.isRTL,
+      noBorder = _this$props7.noBorder,
+      block = _this$props7.block,
+      small = _this$props7.small,
+      regular = _this$props7.regular,
+      verticalSpacing = _this$props7.verticalSpacing,
+      autoComplete = _this$props7.autoComplete;
+    var startDateString = this.getDateString(startDate);
+    var endDateString = this.getDateString(endDate);
+    return /*#__PURE__*/_react["default"].createElement(_DateRangePickerInput["default"], {
+      startDate: startDateString,
+      startDateId: startDateId,
+      startDatePlaceholderText: startDatePlaceholderText,
+      isStartDateFocused: isStartDateFocused,
+      startDateAriaLabel: startDateAriaLabel,
+      startDateTitleText: startDateTitleText,
+      endDate: endDateString,
+      endDateId: endDateId,
+      endDatePlaceholderText: endDatePlaceholderText,
+      isEndDateFocused: isEndDateFocused,
+      endDateAriaLabel: endDateAriaLabel,
+      endDateTitleText: endDateTitleText,
+      isFocused: isFocused,
+      disabled: disabled,
+      required: required,
+      readOnly: readOnly,
+      openDirection: openDirection,
+      showCaret: showCaret,
+      showDefaultInputIcon: showDefaultInputIcon,
+      inputIconPosition: inputIconPosition,
+      customInputIcon: customInputIcon,
+      customArrowIcon: customArrowIcon,
+      customCloseIcon: customCloseIcon,
+      phrases: phrases,
+      onStartDateChange: this.onStartDateChange,
+      onStartDateFocus: this.onStartDateFocus,
+      onStartDateShiftTab: this.onClearFocus,
+      onEndDateChange: this.onEndDateChange,
+      onEndDateFocus: this.onEndDateFocus,
+      showClearDates: showClearDates,
+      onClearDates: this.clearDates,
+      screenReaderMessage: screenReaderMessage,
+      onKeyDownArrowDown: onKeyDownArrowDown,
+      onKeyDownQuestionMark: onKeyDownQuestionMark,
+      isRTL: isRTL,
+      noBorder: noBorder,
+      block: block,
+      small: small,
+      regular: regular,
+      verticalSpacing: verticalSpacing,
+      autoComplete: autoComplete
+    }, children);
+  };
+  return DateRangePickerInputController;
+}(_react["default"].PureComponent || _react["default"].Component, !_react["default"].PureComponent && "shouldComponentUpdate");
+DateRangePickerInputController.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+DateRangePickerInputController.defaultProps = defaultProps;