@spothero/ui 15.10.9 → 16.0.0-beta.0

package/backlog/DateTime/DateTimeRangePicker.js

@@ -1,530 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
-
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _v = _interopRequireDefault(require("uuid/v4"));
-
-var _date = _interopRequireDefault(require("@spothero/utils/date"));
-
-var _time = _interopRequireDefault(require("@spothero/utils/time"));
-
-var _DateTimePicker = _interopRequireDefault(require("./DateTimePicker"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 DateTimeRangePicker = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(DateTimeRangePicker, _Component);
-
-  var _super = _createSuper(DateTimeRangePicker);
-
-  function DateTimeRangePicker(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, DateTimeRangePicker);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onStartChange", function (_ref) {
-      var selectedDate = _ref.selectedDate,
-          selectedTime = _ref.selectedTime;
-      var onStartChange = _this.props.onStartChange;
-      var _this$state = _this.state,
-          endDate = _this$state.endDate,
-          endTime = _this$state.endTime;
-      var newData = {
-        startDate: selectedDate,
-        startTime: selectedTime,
-        endDate: endDate,
-        endTime: endTime
-      };
-
-      _this.setState(_objectSpread({
-        startDate: selectedDate,
-        startTime: selectedTime
-      }, _this._getDisableEndTimeBefore(newData)));
-
-      if (onStartChange) {
-        onStartChange(newData);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onEndChange", function (_ref2) {
-      var selectedDate = _ref2.selectedDate,
-          selectedTime = _ref2.selectedTime;
-      var onEndChange = _this.props.onEndChange;
-      var _this$state2 = _this.state,
-          startDate = _this$state2.startDate,
-          startTime = _this$state2.startTime;
-      var newData = {
-        startDate: startDate,
-        startTime: startTime,
-        endDate: selectedDate,
-        endTime: selectedTime
-      };
-
-      _this.setState(_objectSpread({
-        endDate: selectedDate,
-        endTime: selectedTime
-      }, _this._getDisableEndTimeBefore(newData)));
-
-      if (onEndChange) {
-        onEndChange(newData);
-      }
-    });
-    var startId = props.startId,
-        endId = props.endId,
-        _startDate = props.startDate,
-        _startTime = props.startTime,
-        _endDate = props.endDate,
-        _endTime = props.endTime,
-        disableEndTimeBefore = props.disableEndTimeBefore,
-        startTooltipType = props.startTooltipType,
-        startTooltipMessage = props.startTooltipMessage,
-        endTooltipType = props.endTooltipType,
-        endTooltipMessage = props.endTooltipMessage,
-        tooltipPosition = props.tooltipPosition,
-        updateTooltipPositionOnMove = props.updateTooltipPositionOnMove;
-
-    if (!startId || !endId) {
-      throw new Error("The props 'startId' and 'endId' are required to make DateTimeRangePicker accessible for users using assistive technologies such as screen readers. Check the render method of DateTimeRangePicker.");
-    }
-
-    if (startTooltipType || startTooltipMessage || endTooltipType || endTooltipMessage || tooltipPosition || updateTooltipPositionOnMove) {
-      throw new Error('Tooltip support inside of DateTimePicker was removed in v6.0.0. Use dateNode and timeNode getters in a parent component to add tooltips manually as necessary.');
-    }
-
-    _this.state = {
-      startDate: _startDate,
-      startTime: _startTime,
-      endDate: _endDate,
-      endTime: _endTime,
-      disableEndTimeBefore: disableEndTimeBefore,
-      addErrorClass: false,
-      addHighlightClass: false,
-      endKey: (0, _v.default)()
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(DateTimeRangePicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this._checkInitialTimeDisabling();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          onValid = _this$props.onValid,
-          onInvalid = _this$props.onInvalid;
-      var _this$state3 = this.state,
-          startDate = _this$state3.startDate,
-          startTime = _this$state3.startTime,
-          endDate = _this$state3.endDate,
-          endTime = _this$state3.endTime,
-          addHighlightClass = _this$state3.addHighlightClass;
-      var prevStartDate = prevState.startDate,
-          prevStartTime = prevState.startTime,
-          prevEndDate = prevState.endDate,
-          prevEndTime = prevState.endTime;
-      var startMoment = startDate && startTime ? this._getCombinedDate(startDate, startTime) : null;
-      var endMoment = endDate && endTime ? this._getCombinedDate(endDate, endTime) : null;
-      var validationState = {
-        startDate: startDate,
-        startTime: startTime,
-        endDate: endDate,
-        endTime: endTime,
-        startMoment: startMoment,
-        endMoment: endMoment,
-        isEndDayBeforeStartDay: startMoment && endMoment && endMoment.isBefore(startMoment, 'day'),
-        isEndTimeSameOrBeforeStartTime: startMoment && endMoment && endMoment.isSameOrBefore(startMoment, 'hour')
-      };
-      var isValid = true;
-
-      if (addHighlightClass) {
-        // if the previous state of the component included the highlight class remove it here
-        // so that next time it needs to highlight it can be re-added and the animation plays
-        this._clearHighlightTimeout();
-
-        this._removeHighlightTimeout = setTimeout(function () {
-          _this2.setState({
-            addHighlightClass: false
-          });
-        }, 3000);
-      }
-
-      if (startDate && startTime && endDate && endTime) {
-        if (startDate !== prevStartDate || startTime !== prevStartTime || endDate !== prevEndDate || endTime !== prevEndTime) {
-          isValid = this._checkValidity();
-        }
-      }
-
-      if (!isValid && onInvalid) {
-        onInvalid(validationState);
-      } else if (isValid && onValid) {
-        onValid(validationState);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._clearHighlightTimeout();
-    }
-  }, {
-    key: "_checkInitialTimeDisabling",
-    value: function _checkInitialTimeDisabling() {
-      var _this$state4 = this.state,
-          startDate = _this$state4.startDate,
-          startTime = _this$state4.startTime,
-          endDate = _this$state4.endDate,
-          endTime = _this$state4.endTime;
-
-      var _this$_getDisableEndT = this._getDisableEndTimeBefore({
-        startDate: startDate,
-        startTime: startTime,
-        endDate: endDate,
-        endTime: endTime
-      }),
-          disableEndTimeBefore = _this$_getDisableEndT.disableEndTimeBefore,
-          endKey = _this$_getDisableEndT.endKey;
-
-      this.setState({
-        disableEndTimeBefore: disableEndTimeBefore,
-        endKey: endKey
-      });
-    }
-  }, {
-    key: "_clearHighlightTimeout",
-    value: function _clearHighlightTimeout() {
-      if (this._removeHighlightTimeout) {
-        clearTimeout(this._removeHighlightTimeout);
-      }
-    }
-  }, {
-    key: "_getCombinedDate",
-    value: function _getCombinedDate(date, time) {
-      return _date.default.combineDateAndTime(_date.default.getAsMoment(date), _time.default.getAsMoment(time));
-    }
-  }, {
-    key: "_checkValidity",
-    value: function _checkValidity() {
-      var _this$props2 = this.props,
-          autoBumpInvalidEnabled = _this$props2.autoBumpInvalidEnabled,
-          endTimeBump = _this$props2.endTimeBump,
-          onEndChange = _this$props2.onEndChange;
-      var _this$state5 = this.state,
-          startDate = _this$state5.startDate,
-          startTime = _this$state5.startTime,
-          endDate = _this$state5.endDate,
-          endTime = _this$state5.endTime;
-
-      var start = this._getCombinedDate(startDate, startTime);
-
-      var end = this._getCombinedDate(endDate, endTime);
-
-      var newState = {
-        addErrorClass: false,
-        endDate: endDate,
-        endTime: endTime
-      };
-      var isValid = true;
-
-      if (end.isSameOrBefore(start)) {
-        isValid = false;
-
-        if (autoBumpInvalidEnabled) {
-          isValid = true;
-          var newEnd = start.clone().add(endTimeBump, 'minutes');
-          newState.endDate = newEnd.format('MM/DD/YYYY');
-          newState.endTime = newEnd.format('hh:mm A');
-          newState.addHighlightClass = true;
-          newState.endKey = (0, _v.default)(); // check what times should be disabled based on newly selected values
-
-          var _this$_getDisableEndT2 = this._getDisableEndTimeBefore({
-            startDate: startDate,
-            startTime: startTime,
-            endDate: newState.endDate,
-            endTime: newState.endTime
-          }),
-              disableEndTimeBefore = _this$_getDisableEndT2.disableEndTimeBefore,
-              newEndTime = _this$_getDisableEndT2.endTime;
-
-          newState.disableEndTimeBefore = disableEndTimeBefore;
-
-          if (newEndTime) {
-            newState.endTime = newEndTime;
-          }
-        } else {
-          newState.addErrorClass = true;
-        }
-      }
-
-      this.setState(newState);
-
-      if (onEndChange) {
-        onEndChange({
-          startDate: startDate,
-          startTime: startTime,
-          endDate: newState.endDate,
-          endTime: newState.endTime
-        });
-      }
-
-      return isValid;
-    }
-  }, {
-    key: "_getDisableEndTimeBefore",
-    value: function _getDisableEndTimeBefore(_ref3) {
-      var startDate = _ref3.startDate,
-          startTime = _ref3.startTime,
-          endDate = _ref3.endDate,
-          endTime = _ref3.endTime;
-      var _this$props3 = this.props,
-          timeStep = _this$props3.timeStep,
-          endTimeBump = _this$props3.endTimeBump,
-          autoBumpInvalidEnabled = _this$props3.autoBumpInvalidEnabled,
-          propDisableEndTimeBefore = _this$props3.disableEndTimeBefore;
-      var _this$state6 = this.state,
-          disableEndTimeBefore = _this$state6.disableEndTimeBefore,
-          endKey = _this$state6.endKey;
-      var newState = {
-        disableEndTimeBefore: disableEndTimeBefore,
-        endKey: endKey
-      };
-
-      if (startDate && startTime && endDate && endTime) {
-        var start = this._getCombinedDate(startDate, startTime);
-
-        var end = this._getCombinedDate(endDate, endTime);
-
-        if (start.isSame(end, 'day')) {
-          newState.disableEndTimeBefore = start.clone().add(timeStep, 'minutes').format('hh:mm A');
-          newState.endKey = (0, _v.default)();
-
-          if (start.isSameOrAfter(end, 'hour') && autoBumpInvalidEnabled) {
-            // bump the end time because it will get bumped anyway due to the prior time not being in the list anymore
-            newState.endTime = start.clone().add(endTimeBump, 'minutes').format('hh:mm A');
-            newState.addHighlightClass = true;
-          }
-        } else if (newState.disableEndTimeBefore !== propDisableEndTimeBefore) {
-          newState.disableEndTimeBefore = propDisableEndTimeBefore;
-          newState.endKey = (0, _v.default)();
-        }
-      }
-
-      return newState;
-    }
-    /**
-     * Getter for the start date time picker.
-     *
-     * @public
-     * @returns {Element} - The component reference.
-     */
-
-  }, {
-    key: "startDateTime",
-    get: function get() {
-      return this._startDateTime;
-    }
-    /**
-     * Getter for the end date time picker.
-     *
-     * @public
-     * @returns {Element} - The component reference.
-     */
-
-  }, {
-    key: "endDateTime",
-    get: function get() {
-      return this._endDateTime;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props4 = this.props,
-          className = _this$props4.className,
-          startId = _this$props4.startId,
-          endId = _this$props4.endId,
-          useIcons = _this$props4.useIcons,
-          iconPosition = _this$props4.iconPosition,
-          startDateLabel = _this$props4.startDateLabel,
-          startTimeLabel = _this$props4.startTimeLabel,
-          endDateLabel = _this$props4.endDateLabel,
-          endTimeLabel = _this$props4.endTimeLabel,
-          startDateName = _this$props4.startDateName,
-          startTimeName = _this$props4.startTimeName,
-          endDateName = _this$props4.endDateName,
-          endTimeName = _this$props4.endTimeName,
-          timeStep = _this$props4.timeStep,
-          separator = _this$props4.separator,
-          disableStartPast = _this$props4.disableStartPast,
-          disableStartDateBefore = _this$props4.disableStartDateBefore,
-          disableStartDateAfter = _this$props4.disableStartDateAfter,
-          disableStartTimeBefore = _this$props4.disableStartTimeBefore,
-          disableStartTimeAfter = _this$props4.disableStartTimeAfter,
-          disableEndPast = _this$props4.disableEndPast,
-          disableEndDateBefore = _this$props4.disableEndDateBefore,
-          disableEndDateAfter = _this$props4.disableEndDateAfter,
-          disableEndTimeAfter = _this$props4.disableEndTimeAfter,
-          disableStartDateTimePicker = _this$props4.disableStartDateTimePicker,
-          disableEndDateTimePicker = _this$props4.disableEndDateTimePicker,
-          areAllFieldsEmpty = _this$props4.areAllFieldsEmpty,
-          useTetherShim = _this$props4.useTetherShim,
-          startDateDisplayFormat = _this$props4.startDateDisplayFormat,
-          startTimeDisplayFormat = _this$props4.startTimeDisplayFormat,
-          endDateDisplayFormat = _this$props4.endDateDisplayFormat,
-          endTimeDisplayFormat = _this$props4.endTimeDisplayFormat;
-      var _this$state7 = this.state,
-          startDate = _this$state7.startDate,
-          startTime = _this$state7.startTime,
-          endDate = _this$state7.endDate,
-          endTime = _this$state7.endTime,
-          addErrorClass = _this$state7.addErrorClass,
-          disableEndTimeBefore = _this$state7.disableEndTimeBefore,
-          endKey = _this$state7.endKey,
-          addHighlightClass = _this$state7.addHighlightClass;
-      var classes = (0, _classnames.default)('DateTimeRangePicker', className);
-      var startClasses = (0, _classnames.default)('DateTimePicker-start', {
-        'DateTimePicker-error': areAllFieldsEmpty
-      });
-      var endClasses = (0, _classnames.default)('DateTimePicker-end', {
-        'DateTimePicker-highlight': addHighlightClass
-      }, {
-        'DateTimePicker-error': addErrorClass || areAllFieldsEmpty
-      });
-      var newDisableEndDateBefore = startDate ? startDate : disableEndDateBefore;
-      var overrideInitialEndMonthWithSelected = true; // if the end picker has a date disabled whose month is after the end selected date, make sure the calendar starts with the first selectable month
-
-      if (endDate && newDisableEndDateBefore) {
-        var endMoment = _date.default.getAsMoment(endDate);
-
-        var endBeforeMoment = _date.default.getAsMoment(newDisableEndDateBefore);
-
-        overrideInitialEndMonthWithSelected = endMoment.isAfter(endBeforeMoment);
-      }
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/_react.default.createElement(_DateTimePicker.default, {
-        ref: function ref(node) {
-          _this3._startDateTime = node;
-        },
-        id: startId,
-        dateName: startDateName,
-        timeName: startTimeName,
-        className: startClasses,
-        calendarClassName: "calendar-start",
-        useIcons: useIcons,
-        iconPosition: iconPosition,
-        dateLabel: startDateLabel,
-        timeLabel: startTimeLabel,
-        timeStep: timeStep,
-        selectedDate: startDate,
-        selectedTime: startTime,
-        dateDisplayFormat: startDateDisplayFormat,
-        timeDisplayFormat: startTimeDisplayFormat,
-        onChange: this._onStartChange,
-        disablePast: disableStartPast,
-        disableDateBefore: disableStartDateBefore,
-        disableDateAfter: disableStartDateAfter,
-        disableTimeBefore: disableStartTimeBefore,
-        disableTimeAfter: disableStartTimeAfter,
-        useTetherShim: useTetherShim,
-        datePlaceholder: "Start Date",
-        timePlaceholder: "Start Time",
-        disabled: disableStartDateTimePicker
-      }), separator, /*#__PURE__*/_react.default.createElement(_DateTimePicker.default, {
-        key: endKey,
-        ref: function ref(node) {
-          _this3._endDateTime = node;
-        },
-        id: endId,
-        dateName: endDateName,
-        timeName: endTimeName,
-        className: endClasses,
-        calendarClassName: "calendar-end",
-        useIcons: useIcons,
-        iconPosition: iconPosition,
-        dateLabel: endDateLabel,
-        timeLabel: endTimeLabel,
-        timeStep: timeStep,
-        selectedDate: endDate,
-        selectedTime: endTime,
-        dateDisplayFormat: endDateDisplayFormat,
-        timeDisplayFormat: endTimeDisplayFormat,
-        overrideInitialMonthWithSelected: overrideInitialEndMonthWithSelected,
-        onChange: this._onEndChange,
-        disablePast: disableEndPast,
-        disableDateBefore: newDisableEndDateBefore,
-        disableDateAfter: disableEndDateAfter,
-        disableTimeBefore: disableEndTimeBefore,
-        disableTimeAfter: disableEndTimeAfter,
-        useTetherShim: useTetherShim,
-        datePlaceholder: "End Date",
-        timePlaceholder: "End Time",
-        disabled: disableEndDateTimePicker
-      }));
-    }
-  }]);
-  return DateTimeRangePicker;
-}(_react.Component);
-
-exports.default = DateTimeRangePicker;
-(0, _defineProperty2.default)(DateTimeRangePicker, "defaultProps", {
-  useIcons: true,
-  timeStep: 30,
-  endTimeBump: 30,
-  disableStartPast: true,
-  disableEndPast: true,
-  iconPosition: 'right'
-});