@skyscanner/backpack-web 17.1.0-beta.1 → 17.1.0

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

@@ -1,29 +1,45 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withCalendarState = exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(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");
-const _excluded = ["date", "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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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); }
+/*
+ * 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 React, { Component } from 'react';
+
+import { deprecated, 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';
+
 /**
  * Updates the current focused date
  * @param {Object} currentProps current input properties
@@ -33,15 +49,24 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 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 !(0, _dateUtils.isSameDay)(rawNextSelectedDate, rawSelectedDate);
+
+  return !isSameDay(rawNextSelectedDate, rawSelectedDate);
 };
 
 /**
@@ -52,13 +77,20 @@ 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 (0, _dateUtils.dateToBoundaries)(rawSelectedDate, minDate, maxDate);
+    return dateToBoundaries(rawSelectedDate, minDate, maxDate);
   }
+
   if (initiallyFocusedDate) {
-    return (0, _dateUtils.dateToBoundaries)(initiallyFocusedDate, minDate, maxDate);
+    return dateToBoundaries(initiallyFocusedDate, minDate, maxDate);
   }
+
   return minDate;
 };
 
@@ -67,216 +99,274 @@ const determineFocusedDate = (rawSelectedDate, initiallyFocusedDate, minDate, ma
  * @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 _customProptypes.CALENDAR_SELECTION_TYPE.single:
+    case CALENDAR_SELECTION_TYPE.single:
       rawDate = [selectionConfig.date];
       break;
-    case _customProptypes.CALENDAR_SELECTION_TYPE.range:
+    case CALENDAR_SELECTION_TYPE.range:
       rawDate = [selectionConfig.startDate, selectionConfig.endDate];
       break;
     default:
       rawDate = [null];
       break;
   }
+
   return rawDate;
 };
-const withCalendarState = Calendar => {
-  class BpkCalendarContainer extends _react.Component {
+
+const withCalendarState = (Calendar) => {
+  class BpkCalendarContainer extends Component {
     constructor(props) {
       super(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;
+
+      const minDate = startOfDay(this.props.minDate);
+      const maxDate = 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 = (0, _dateUtils.startOfDay)(nextProps.minDate);
-      const maxDate = (0, _dateUtils.startOfDay)(nextProps.maxDate);
+      const rawNextSelectedDate = getRawSelectedDate(
+        nextProps.selectionConfiguration,
+      );
+
+      const minDate = startOfDay(nextProps.minDate);
+      const maxDate = startOfDay(nextProps.maxDate);
       if (focusedDateHasChanged(this.props, nextProps)) {
         this.setState({
-          focusedDate: (0, _dateUtils.dateToBoundaries)(rawNextSelectedDate[0], minDate, maxDate)
+          focusedDate: dateToBoundaries(
+            rawNextSelectedDate[0],
+            minDate,
+            maxDate,
+          ),
         });
       }
     }
-    render() {
-      const _this$props = this.props,
+
+    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,
-          maxDate,
-          minDate,
-          selectionConfiguration
-        } = _this$props,
-        calendarProps = _objectWithoutProperties(_this$props, _excluded);
+          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 {
+        date,
+        maxDate,
+        minDate,
+        selectionConfiguration,
+        ...calendarProps
+      } = this.props;
+
       delete calendarProps.onDateSelect;
       delete calendarProps.onMonthChange;
-      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__*/_react.default.createElement(Calendar, _extends({
-        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 = 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}
+        />
+      );
     }
   }
+
   BpkCalendarContainer.propTypes = {
-    date: (0, _bpkReactUtils.deprecated)(_propTypes.default.instanceOf(Date), 'Use selectionConfiguration to set selectedDate'),
-    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,
-    selectedDate: (0, _bpkReactUtils.deprecated)(_propTypes.default.instanceOf(Date), 'Use selectionConfiguration to set selectedDate'),
-    initiallyFocusedDate: _propTypes.default.instanceOf(Date)
+    date: deprecated(
+      PropTypes.instanceOf(Date),
+      'Use selectionConfiguration to set selectedDate',
+    ),
+    fixedWidth: PropTypes.bool,
+    maxDate: PropTypes.instanceOf(Date),
+    minDate: PropTypes.instanceOf(Date),
+    onDateSelect: PropTypes.func,
+    onMonthChange: PropTypes.func,
+    selectionConfiguration: CustomPropTypes.SelectionConfiguration,
+    selectedDate: deprecated(
+      PropTypes.instanceOf(Date),
+      'Use selectionConfiguration to set selectedDate',
+    ),
+    initiallyFocusedDate: PropTypes.instanceOf(Date),
   };
+
   BpkCalendarContainer.defaultProps = {
     date: null,
     fixedWidth: true,
-    maxDate: (0, _dateUtils.addMonths)(new Date(), 12),
+    maxDate: addMonths(new Date(), 12),
     minDate: new Date(),
     onDateSelect: null,
     onMonthChange: null,
     selectionConfiguration: {
-      type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
-      date: null
+      type: CALENDAR_SELECTION_TYPE.single,
+      date: null,
     },
     selectedDate: null,
-    initiallyFocusedDate: null
+    initiallyFocusedDate: null,
   };
+
   return BpkCalendarContainer;
 };
-exports.withCalendarState = withCalendarState;
-var _default = withCalendarState((0, _composeCalendar.default)(_BpkCalendarNav.default, _BpkCalendarGridHeader.default, _BpkCalendarGrid.BpkCalendarGridWithTransition, _BpkCalendarDate.default));
-exports.default = _default;
+
+export default withCalendarState(
+  composeCalendar(
+    BpkCalendarNav,
+    BpkCalendarGridHeader,
+    BpkCalendarGridWithTransition,
+    BpkCalendarDate,
+  ),
+);
+export { withCalendarState };