@skyscanner/backpack-web 21.0.2 → 22.0.0-beta.1

package/bpk-component-calendar/src/BpkCalendarContainer.js

@@ -1,45 +1,31 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import { isRTL } from '../../bpk-react-utils';
-
-import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
-import BpkCalendarNav from './BpkCalendarNav';
-import { BpkCalendarGridWithTransition } from './BpkCalendarGrid';
-import BpkCalendarGridHeader from './BpkCalendarGridHeader';
-import BpkCalendarDate from './BpkCalendarDate';
-import composeCalendar from './composeCalendar';
-import {
-  addDays,
-  addMonths,
-  dateToBoundaries,
-  isAfter,
-  isSameMonth,
-  isSameDay,
-  lastDayOfMonth,
-  setMonthYear,
-  startOfDay,
-  startOfMonth,
-} from './date-utils';
-
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withCalendarState = exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _customProptypes = _interopRequireWildcard(require("./custom-proptypes"));
+var _BpkCalendarNav = _interopRequireDefault(require("./BpkCalendarNav"));
+var _BpkCalendarGrid = require("./BpkCalendarGrid");
+var _BpkCalendarGridHeader = _interopRequireDefault(require("./BpkCalendarGridHeader"));
+var _BpkCalendarDate = _interopRequireDefault(require("./BpkCalendarDate"));
+var _composeCalendar = _interopRequireDefault(require("./composeCalendar"));
+var _dateUtils = require("./date-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["maxDate", "minDate", "selectionConfiguration"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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) { _defineProperty(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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /**
  * Updates the current focused date
  * @param {Object} currentProps current input properties
@@ -49,24 +35,15 @@ import {
 const focusedDateHasChanged = (currentProps, nextProps) => {
   const currentSelectConfig = currentProps.selectionConfiguration;
   const nextSelectConfig = nextProps.selectionConfiguration;
-
-  const rawNextSelectedDate =
-    nextSelectConfig.date || nextSelectConfig.startDate;
-  const rawSelectedDate =
-    currentSelectConfig.date || currentSelectConfig.startDate;
-
+  const rawNextSelectedDate = nextSelectConfig.date || nextSelectConfig.startDate;
+  const rawSelectedDate = currentSelectConfig.date || currentSelectConfig.startDate;
   if (!rawSelectedDate && !rawNextSelectedDate) {
     return false;
   }
-
-  if (
-    (rawSelectedDate && !rawNextSelectedDate) ||
-    (!rawSelectedDate && rawNextSelectedDate)
-  ) {
+  if (rawSelectedDate && !rawNextSelectedDate || !rawSelectedDate && rawNextSelectedDate) {
     return true;
   }
-
-  return !isSameDay(rawNextSelectedDate, rawSelectedDate);
+  return !(0, _dateUtils.isSameDay)(rawNextSelectedDate, rawSelectedDate);
 };
 
 /**
@@ -77,20 +54,13 @@ const focusedDateHasChanged = (currentProps, nextProps) => {
  * @param {Date} maxDate max available date to be selectable in the calendar
  * @returns {Date} which date to be focused on the calendar when it loads
  */
-const determineFocusedDate = (
-  rawSelectedDate,
-  initiallyFocusedDate,
-  minDate,
-  maxDate,
-) => {
+const determineFocusedDate = (rawSelectedDate, initiallyFocusedDate, minDate, maxDate) => {
   if (rawSelectedDate) {
-    return dateToBoundaries(rawSelectedDate, minDate, maxDate);
+    return (0, _dateUtils.dateToBoundaries)(rawSelectedDate, minDate, maxDate);
   }
-
   if (initiallyFocusedDate) {
-    return dateToBoundaries(initiallyFocusedDate, minDate, maxDate);
+    return (0, _dateUtils.dateToBoundaries)(initiallyFocusedDate, minDate, maxDate);
   }
-
   return minDate;
 };
 
@@ -99,259 +69,211 @@ const determineFocusedDate = (
  * @param {Object} selectionConfig - The configuration of calendar to be used
  * @returns {Array} An array or single of multiple dates
  */
-const getRawSelectedDate = (selectionConfig) => {
+const getRawSelectedDate = selectionConfig => {
   let rawDate = [];
-
   switch (selectionConfig.type) {
-    case CALENDAR_SELECTION_TYPE.single:
+    case _customProptypes.CALENDAR_SELECTION_TYPE.single:
       rawDate = [selectionConfig.date];
       break;
-    case CALENDAR_SELECTION_TYPE.range:
+    case _customProptypes.CALENDAR_SELECTION_TYPE.range:
       rawDate = [selectionConfig.startDate, selectionConfig.endDate];
       break;
     default:
       rawDate = [null];
       break;
   }
-
   return rawDate;
 };
-
-const withCalendarState = (Calendar) => {
-  class BpkCalendarContainer extends Component {
+const withCalendarState = Calendar => {
+  class BpkCalendarContainer extends _react.Component {
     constructor(props) {
       super(props);
-
-      const minDate = startOfDay(this.props.minDate);
-      const maxDate = startOfDay(this.props.maxDate);
-
-      const rawSelectedDate = getRawSelectedDate(
-        this.props.selectionConfiguration,
-      );
-
-      const { initiallyFocusedDate } = this.props;
-
+      _defineProperty(this, "handleDateFocus", (event, {
+        date,
+        source
+      }) => {
+        const {
+          onMonthChange
+        } = this.props;
+        const focusedDate = (0, _dateUtils.dateToBoundaries)(date, (0, _dateUtils.startOfDay)(this.props.minDate), (0, _dateUtils.startOfDay)(this.props.maxDate));
+        const didMonthChange = !(0, _dateUtils.isSameMonth)(this.state.focusedDate, focusedDate);
+        this.setState({
+          preventKeyboardFocus: false,
+          focusedDate
+        }, () => {
+          if (onMonthChange && didMonthChange) {
+            onMonthChange(event, {
+              month: (0, _dateUtils.startOfMonth)(focusedDate),
+              source
+            });
+          }
+        });
+      });
+      _defineProperty(this, "handleDateSelect", date => {
+        const {
+          onDateSelect,
+          selectionConfiguration
+        } = this.props;
+        const keyboardFocusState = {
+          preventKeyboardFocus: false
+        };
+        if (onDateSelect) {
+          const newDate = (0, _dateUtils.dateToBoundaries)(date, (0, _dateUtils.startOfDay)(this.props.minDate), (0, _dateUtils.startOfDay)(this.props.maxDate));
+          if (selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && ((0, _dateUtils.isAfter)(newDate, selectionConfiguration.startDate) || (0, _dateUtils.isSameDay)(newDate, selectionConfiguration.startDate))) {
+            onDateSelect(selectionConfiguration.startDate, newDate);
+          } else {
+            onDateSelect(newDate);
+          }
+        } else {
+          this.setState(keyboardFocusState);
+        }
+      });
+      _defineProperty(this, "handleMonthChange", (event, {
+        month,
+        source
+      }) => {
+        this.handleDateFocus(event, {
+          date: (0, _dateUtils.setMonthYear)(this.state.focusedDate, month.getMonth(), month.getFullYear()),
+          source
+        });
+      });
+      _defineProperty(this, "handleDateKeyDown", event => {
+        event.persist();
+        const reverse = (0, _bpkReactUtils.isRTL)() ? -1 : 1;
+        const {
+          focusedDate
+        } = this.state;
+        const source = 'GRID';
+        let preventDefault = true;
+        switch (event.key) {
+          case 'ArrowRight':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, reverse * 1),
+              source
+            });
+            break;
+          case 'ArrowLeft':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, reverse * -1),
+              source
+            });
+            break;
+          case 'ArrowUp':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, -7),
+              source
+            });
+            break;
+          case 'ArrowDown':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addDays)(focusedDate, 7),
+              source
+            });
+            break;
+          case 'PageUp':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addMonths)(focusedDate, -1),
+              source
+            });
+            break;
+          case 'PageDown':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.addMonths)(focusedDate, 1),
+              source
+            });
+            break;
+          case 'Home':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.startOfMonth)(focusedDate),
+              source
+            });
+            break;
+          case 'End':
+            this.handleDateFocus(event, {
+              date: (0, _dateUtils.lastDayOfMonth)(focusedDate),
+              source
+            });
+            break;
+          default:
+            preventDefault = false;
+            break;
+        }
+        if (preventDefault) {
+          event.preventDefault();
+        }
+      });
+      const minDate = (0, _dateUtils.startOfDay)(this.props.minDate);
+      const maxDate = (0, _dateUtils.startOfDay)(this.props.maxDate);
+      const rawSelectedDate = getRawSelectedDate(this.props.selectionConfiguration);
+      const {
+        initiallyFocusedDate
+      } = this.props;
       this.state = {
         preventKeyboardFocus: true,
-        focusedDate: determineFocusedDate(
-          rawSelectedDate[0],
-          initiallyFocusedDate,
-          minDate,
-          maxDate,
-        ),
+        focusedDate: determineFocusedDate(rawSelectedDate[0], initiallyFocusedDate, minDate, maxDate)
       };
     }
-
     UNSAFE_componentWillReceiveProps(nextProps) {
-      const rawNextSelectedDate = getRawSelectedDate(
-        nextProps.selectionConfiguration,
-      );
-
-      const minDate = startOfDay(nextProps.minDate);
-      const maxDate = startOfDay(nextProps.maxDate);
+      const rawNextSelectedDate = getRawSelectedDate(nextProps.selectionConfiguration);
+      const minDate = (0, _dateUtils.startOfDay)(nextProps.minDate);
+      const maxDate = (0, _dateUtils.startOfDay)(nextProps.maxDate);
       if (focusedDateHasChanged(this.props, nextProps)) {
         this.setState({
-          focusedDate: dateToBoundaries(
-            rawNextSelectedDate[0],
-            minDate,
-            maxDate,
-          ),
+          focusedDate: (0, _dateUtils.dateToBoundaries)(rawNextSelectedDate[0], minDate, maxDate)
         });
       }
     }
-
-    handleDateFocus = (event, { date, source }) => {
-      const { onMonthChange } = this.props;
-      const focusedDate = dateToBoundaries(
-        date,
-        startOfDay(this.props.minDate),
-        startOfDay(this.props.maxDate),
-      );
-      const didMonthChange = !isSameMonth(this.state.focusedDate, focusedDate);
-
-      this.setState(
-        {
-          preventKeyboardFocus: false,
-          focusedDate,
-        },
-        () => {
-          if (onMonthChange && didMonthChange) {
-            onMonthChange(event, { month: startOfMonth(focusedDate), source });
-          }
-        },
-      );
-    };
-
-    handleDateSelect = (date) => {
-      const { onDateSelect, selectionConfiguration } = this.props;
-      const keyboardFocusState = { preventKeyboardFocus: false };
-
-      if (onDateSelect) {
-        const newDate = dateToBoundaries(
-          date,
-          startOfDay(this.props.minDate),
-          startOfDay(this.props.maxDate),
-        );
-
-        if (
-          selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range &&
-          selectionConfiguration.startDate &&
-          !selectionConfiguration.endDate &&
-          (isAfter(newDate, selectionConfiguration.startDate) ||
-            isSameDay(newDate, selectionConfiguration.startDate))
-        ) {
-          onDateSelect(selectionConfiguration.startDate, newDate);
-        } else {
-          onDateSelect(newDate);
-        }
-      } else {
-        this.setState(keyboardFocusState);
-      }
-    };
-
-    handleMonthChange = (event, { month, source }) => {
-      this.handleDateFocus(event, {
-        date: setMonthYear(
-          this.state.focusedDate,
-          month.getMonth(),
-          month.getFullYear(),
-        ),
-        source,
-      });
-    };
-
-    handleDateKeyDown = (event) => {
-      event.persist();
-      const reverse = isRTL() ? -1 : 1;
-      const { focusedDate } = this.state;
-      const source = 'GRID';
-      let preventDefault = true;
-
-      switch (event.key) {
-        case 'ArrowRight':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, reverse * 1),
-            source,
-          });
-          break;
-        case 'ArrowLeft':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, reverse * -1),
-            source,
-          });
-          break;
-        case 'ArrowUp':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, -7),
-            source,
-          });
-          break;
-        case 'ArrowDown':
-          this.handleDateFocus(event, {
-            date: addDays(focusedDate, 7),
-            source,
-          });
-          break;
-        case 'PageUp':
-          this.handleDateFocus(event, {
-            date: addMonths(focusedDate, -1),
-            source,
-          });
-          break;
-        case 'PageDown':
-          this.handleDateFocus(event, {
-            date: addMonths(focusedDate, 1),
-            source,
-          });
-          break;
-        case 'Home':
-          this.handleDateFocus(event, {
-            date: startOfMonth(focusedDate),
-            source,
-          });
-          break;
-        case 'End':
-          this.handleDateFocus(event, {
-            date: lastDayOfMonth(focusedDate),
-            source,
-          });
-          break;
-        default:
-          preventDefault = false;
-          break;
-      }
-
-      if (preventDefault) {
-        event.preventDefault();
-      }
-    };
-
     render() {
-      const { maxDate, minDate, selectionConfiguration, ...calendarProps } =
-        this.props;
-
+      const _this$props = this.props,
+        {
+          maxDate,
+          minDate,
+          selectionConfiguration
+        } = _this$props,
+        calendarProps = _objectWithoutProperties(_this$props, _excluded);
       delete calendarProps.onDateSelect;
       delete calendarProps.onMonthChange;
-
-      const sanitisedMinDate = startOfDay(minDate);
-      const sanitisedMaxDate = startOfDay(maxDate);
-
-      const sanitisedFocusedDate = dateToBoundaries(
-        this.state.focusedDate,
-        sanitisedMinDate,
-        sanitisedMaxDate,
-      );
-      const month = startOfMonth(sanitisedFocusedDate);
-
-      return (
-        <Calendar
-          onDateClick={this.handleDateSelect}
-          onDateKeyDown={this.handleDateKeyDown}
-          onMonthChange={this.handleMonthChange}
-          month={month}
-          preventKeyboardFocus={this.state.preventKeyboardFocus}
-          focusedDate={sanitisedFocusedDate}
-          {...calendarProps}
-          minDate={sanitisedMinDate}
-          maxDate={sanitisedMaxDate}
-          selectionConfiguration={selectionConfiguration}
-        />
-      );
+      const sanitisedMinDate = (0, _dateUtils.startOfDay)(minDate);
+      const sanitisedMaxDate = (0, _dateUtils.startOfDay)(maxDate);
+      const sanitisedFocusedDate = (0, _dateUtils.dateToBoundaries)(this.state.focusedDate, sanitisedMinDate, sanitisedMaxDate);
+      const month = (0, _dateUtils.startOfMonth)(sanitisedFocusedDate);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, _objectSpread(_objectSpread({
+        onDateClick: this.handleDateSelect,
+        onDateKeyDown: this.handleDateKeyDown,
+        onMonthChange: this.handleMonthChange,
+        month: month,
+        preventKeyboardFocus: this.state.preventKeyboardFocus,
+        focusedDate: sanitisedFocusedDate
+      }, calendarProps), {}, {
+        minDate: sanitisedMinDate,
+        maxDate: sanitisedMaxDate,
+        selectionConfiguration: selectionConfiguration
+      }));
     }
   }
-
   BpkCalendarContainer.propTypes = {
-    fixedWidth: PropTypes.bool,
-    maxDate: PropTypes.instanceOf(Date),
-    minDate: PropTypes.instanceOf(Date),
-    onDateSelect: PropTypes.func,
-    onMonthChange: PropTypes.func,
-    selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-    initiallyFocusedDate: PropTypes.instanceOf(Date),
+    fixedWidth: _propTypes.default.bool,
+    maxDate: _propTypes.default.instanceOf(Date),
+    minDate: _propTypes.default.instanceOf(Date),
+    onDateSelect: _propTypes.default.func,
+    onMonthChange: _propTypes.default.func,
+    selectionConfiguration: _customProptypes.default.SelectionConfiguration,
+    initiallyFocusedDate: _propTypes.default.instanceOf(Date)
   };
-
   BpkCalendarContainer.defaultProps = {
     fixedWidth: true,
-    maxDate: addMonths(new Date(), 12),
+    maxDate: (0, _dateUtils.addMonths)(new Date(), 12),
     minDate: new Date(),
     onDateSelect: null,
     onMonthChange: null,
     selectionConfiguration: {
-      type: CALENDAR_SELECTION_TYPE.single,
-      date: null,
+      type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
+      date: null
     },
-    initiallyFocusedDate: null,
+    initiallyFocusedDate: null
   };
-
   return BpkCalendarContainer;
 };
-
-export default withCalendarState(
-  composeCalendar(
-    BpkCalendarNav,
-    BpkCalendarGridHeader,
-    BpkCalendarGridWithTransition,
-    BpkCalendarDate,
-  ),
-);
-export { withCalendarState };
+exports.withCalendarState = withCalendarState;
+var _default = withCalendarState((0, _composeCalendar.default)(_BpkCalendarNav.default, _BpkCalendarGridHeader.default, _BpkCalendarGrid.BpkCalendarGridWithTransition, _BpkCalendarDate.default));
+exports.default = _default;