@skyscanner/backpack-web 9.0.0 → 9.1.0-alpha.1

package/bpk-component-image/src/withLazyLoading.js

@@ -1,182 +1,164 @@
-/*
- * 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.
- */
-/* @flow strict */
-
-import React, { type Node, type ComponentType } from 'react';
-import PropTypes from 'prop-types';
-import throttle from 'lodash/throttle';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
-
-type WithLazyLoadingProps = {
-  className: ?string,
-  style: ?{},
-};
-
-type WithLazyLoadingState = {
-  inView: boolean,
-};
-
-export default function withLazyLoading(
-  Component: ComponentType<any>,
-  documentRef: typeof window,
-): ComponentType<any> {
-  class WithLazyLoading extends React.Component<
-    WithLazyLoadingProps,
-    WithLazyLoadingState,
-  > {
-    checkInView: () => void;
-
-    element: ?HTMLElement;
-
-    isInViewPort: () => boolean;
-
-    placeholderReference: string;
-
-    removeEventListeners: () => void;
-
-    setInView: () => void;
-
-    state: WithLazyLoadingState;
-
-    supportsPassiveEvents: () => boolean;
-
-    static propTypes = {
-      style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-      className: PropTypes.string,
-    };
-
-    static defaultProps = {
-      style: null,
-      className: null,
-    };
-
-    constructor(): void {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withLazyLoading;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _bpkReactUtils = require("../../bpk-react-utils");
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+const _excluded = ["className", "style"];
+
+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 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function withLazyLoading(Component, documentRef) {
+  class WithLazyLoading extends _react.default.Component {
+    constructor() {
       super();
 
+      _defineProperty(this, "checkInView", void 0);
+
+      _defineProperty(this, "element", void 0);
+
+      _defineProperty(this, "isInViewPort", void 0);
+
+      _defineProperty(this, "placeholderReference", void 0);
+
+      _defineProperty(this, "removeEventListeners", void 0);
+
+      _defineProperty(this, "setInView", void 0);
+
+      _defineProperty(this, "state", void 0);
+
+      _defineProperty(this, "supportsPassiveEvents", void 0);
+
+      _defineProperty(this, "setInView", () => {
+        this.setState(() => ({
+          inView: true
+        }));
+        this.removeEventListeners();
+      });
+
+      _defineProperty(this, "removeEventListeners", () => {
+        documentRef.removeEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
+        documentRef.removeEventListener('resize', this.checkInView);
+        documentRef.removeEventListener('orientationchange', this.checkInView);
+        documentRef.removeEventListener('fullscreenchange', this.checkInView);
+      });
+
+      _defineProperty(this, "checkInView", (0, _throttle.default)(() => {
+        if (this.isInViewPort()) {
+          this.setInView();
+        }
+      }, 250));
+
+      _defineProperty(this, "supportsPassiveEvents", () => {
+        let supportsPassiveOption = false;
+
+        try {
+          const opts = Object.defineProperty({}, 'passive', {
+            get() {
+              supportsPassiveOption = true;
+              return supportsPassiveOption;
+            }
+
+          });
+          window.addEventListener('test', null, opts);
+          window.removeEventListener('test');
+        } catch (e) {
+          return false;
+        }
+
+        return supportsPassiveOption;
+      });
+
+      _defineProperty(this, "isInViewPort", () => {
+        if (!this.element) return false;
+        const rect = this.element.getBoundingClientRect();
+        const viewPortHeight = Math.max(window.innerHeight, documentRef.documentElement.clientHeight);
+        const viewPortWidth = Math.max(window.innerWidth, documentRef.documentElement.clientWidth);
+        return rect.bottom >= 0 && rect.right >= 0 && rect.top < viewPortHeight && rect.left < viewPortWidth;
+      });
+
       this.state = {
-        inView: false,
+        inView: false
       };
     }
 
-    componentDidMount(): void {
-      documentRef.addEventListener('scroll', this.checkInView, {
-        ...this.getPassiveArgs(),
-      });
+    componentDidMount() {
+      documentRef.addEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
       documentRef.addEventListener('resize', this.checkInView);
       documentRef.addEventListener('orientationchange', this.checkInView);
-      documentRef.addEventListener('fullscreenchange', this.checkInView);
-      // call checkInView immediately incase the
+      documentRef.addEventListener('fullscreenchange', this.checkInView); // call checkInView immediately incase the
       // component is already in view prior to scrolling
+
       this.checkInView();
     }
 
-    componentWillUnmount(): void {
+    componentWillUnmount() {
       this.removeEventListeners();
     }
 
-    setInView = (): void => {
-      this.setState(() => ({
-        inView: true,
-      }));
-      this.removeEventListeners();
-    };
-
-    getPassiveArgs(): { capture: boolean } {
-      return this.supportsPassiveEvents()
-        ? { capture: true, passive: true }
-        : { capture: true };
+    getPassiveArgs() {
+      return this.supportsPassiveEvents() ? {
+        capture: true,
+        passive: true
+      } : {
+        capture: true
+      };
     }
 
-    removeEventListeners = (): void => {
-      documentRef.removeEventListener('scroll', this.checkInView, {
-        ...this.getPassiveArgs(),
-      });
-      documentRef.removeEventListener('resize', this.checkInView);
-      documentRef.removeEventListener('orientationchange', this.checkInView);
-      documentRef.removeEventListener('fullscreenchange', this.checkInView);
-    };
-
-    checkInView = throttle(() => {
-      if (this.isInViewPort()) {
-        this.setInView();
-      }
-    }, 250);
-
-    // This function is taken from modernizr
-    // See https://github.com/modernizr/modernizr
-    supportsPassiveEvents = (): boolean => {
-      let supportsPassiveOption = false;
-      try {
-        const opts = Object.defineProperty({}, 'passive', {
-          get() {
-            supportsPassiveOption = true;
-            return supportsPassiveOption;
-          },
-        });
-        window.addEventListener('test', null, opts);
-        window.removeEventListener('test');
-      } catch (e) {
-        return false;
-      }
-      return supportsPassiveOption;
-    };
-
-    isInViewPort = (): boolean => {
-      if (!this.element) return false;
-      const rect = this.element.getBoundingClientRect();
-
-      const viewPortHeight = Math.max(
-        window.innerHeight,
-        documentRef.documentElement.clientHeight,
-      );
-      const viewPortWidth = Math.max(
-        window.innerWidth,
-        documentRef.documentElement.clientWidth,
-      );
-
-      return (
-        rect.bottom >= 0 &&
-        rect.right >= 0 &&
-        rect.top < viewPortHeight &&
-        rect.left < viewPortWidth
-      );
-    };
-
-    render(): Node {
-      const { className, style, ...rest } = this.props;
-
-      return (
-        <div
-          id={this.placeholderReference}
-          ref={(element) => {
-            this.element = element;
-          }}
-          style={style}
-          className={className}
-        >
-          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-          <Component inView={this.state.inView} {...rest} />
-        </div>
-      );
+    render() {
+      const _this$props = this.props,
+            {
+        className,
+        style
+      } = _this$props,
+            rest = _objectWithoutProperties(_this$props, _excluded);
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: this.placeholderReference,
+        ref: element => {
+          this.element = element;
+        },
+        style: style,
+        className: className
+      }, /*#__PURE__*/_react.default.createElement(Component, _extends({
+        inView: this.state.inView
+      }, rest)));
     }
+
   }
-  WithLazyLoading.displayName = wrapDisplayName(Component, 'withLazyLoading');
 
+  _defineProperty(WithLazyLoading, "propTypes", {
+    style: _propTypes.default.object,
+    // eslint-disable-line react/forbid-prop-types
+    className: _propTypes.default.string
+  });
+
+  _defineProperty(WithLazyLoading, "defaultProps", {
+    style: null,
+    className: null
+  });
+
+  WithLazyLoading.displayName = (0, _bpkReactUtils.wrapDisplayName)(Component, 'withLazyLoading');
   return WithLazyLoading;
-}
+}

package/bpk-component-image/src/withLoadingBehavior.js

@@ -1,66 +1,45 @@
-/*
- * 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.
- */
-/* @flow */
+"use strict";
 
-import React, { type AbstractComponent } from 'react';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withLoadingBehavior;
 
-import { wrapDisplayName } from '../../bpk-react-utils';
+var _react = _interopRequireDefault(require("react"));
 
-type InjectedProps = {|
-  onLoad: () => mixed,
-  loading: boolean,
-|};
+var _bpkReactUtils = require("../../bpk-react-utils");
 
-export default function withLoadingBehavior<Config>(
-  Component: AbstractComponent<{| ...Config, ...InjectedProps |}>,
-): AbstractComponent<Config> {
-  class WithLoadingBehavior<C: Config> extends React.Component<
-    C,
-    {| loading: boolean |},
-  > {
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function withLoadingBehavior(Component) {
+  class WithLoadingBehavior extends _react.default.Component {
     constructor() {
       super();
 
+      _defineProperty(this, "onLoad", () => {
+        this.setState(() => ({
+          loading: false
+        }));
+      });
+
       this.state = {
-        loading: true,
+        loading: true
       };
     }
 
-    onLoad = () => {
-      this.setState(() => ({
-        loading: false,
-      }));
-    };
-
     render() {
-      return (
-        <Component
-          onLoad={this.onLoad}
-          loading={this.state.loading}
-          {...this.props}
-        />
-      );
+      return /*#__PURE__*/_react.default.createElement(Component, _extends({
+        onLoad: this.onLoad,
+        loading: this.state.loading
+      }, this.props));
     }
+
   }
-  WithLoadingBehavior.displayName = wrapDisplayName(
-    Component,
-    'withLoadingBehavior',
-  );
 
+  WithLoadingBehavior.displayName = (0, _bpkReactUtils.wrapDisplayName)(Component, 'withLoadingBehavior');
   return WithLoadingBehavior;
-}
+}

package/bpk-component-infinite-scroll/index.css

@@ -0,0 +1,5 @@
+/*  imported from withInfiniteScroll.module.scss  */
+
+@keyframes withInfiniteScroll-module__bpk-keyframe-spin___5I3YA{100%{transform:rotate(1turn)}}
+
+.withInfiniteScroll-module__bpk-sentinel___wvIvG{width:100%;height:1.5rem}

package/bpk-component-infinite-scroll/index.js

@@ -1,3 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ArrayDataSource", {
+  enumerable: true,
+  get: function () {
+    return _DataSource.ArrayDataSource;
+  }
+});
+Object.defineProperty(exports, "DataSource", {
+  enumerable: true,
+  get: function () {
+    return _DataSource.default;
+  }
+});
+exports.default = void 0;
+
+var _withInfiniteScroll = _interopRequireDefault(require("./src/withInfiniteScroll"));
+
+var _DataSource = _interopRequireWildcard(require("./src/DataSource"));
+
+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 }; }
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,15 +44,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import withInfiniteScroll, {
-  type Props as WithInfiniteScrollProps,
-} from './src/withInfiniteScroll';
-
-export { default as DataSource, ArrayDataSource } from './src/DataSource';
-
-export type { WithInfiniteScrollProps };
-
-export default withInfiniteScroll;
+var _default = _withInfiniteScroll.default;
+exports.default = _default;

package/bpk-component-infinite-scroll/src/DataSource.js

@@ -1,3 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrayDataSource = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,71 +24,81 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class DataSource {
+  constructor() {
+    _defineProperty(this, "listeners", void 0);
 
-/* @flow strict */
-
-class DataSource<T = any> {
-  listeners: Array<() => mixed>;
+    _defineProperty(this, "triggerListeners", void 0);
 
-  triggerListeners: (...args: Array<any>) => void;
+    _defineProperty(this, "triggerListeners", (...args) => {
+      this.listeners.forEach(cb => cb(...args));
+    });
 
-  constructor() {
     this.listeners = [];
   }
-
   /* eslint-disable-next-line no-unused-vars, class-methods-use-this */
-  fetchItems(index: number, nElements: number): Promise<Array<T>> {
+
+
+  fetchItems(index, nElements) {
     throw new Error('Not implemented');
   }
 
-  onDataChange(callback: () => mixed): boolean {
+  onDataChange(callback) {
     if (this.listeners.indexOf(callback) === -1) {
       this.listeners.push(callback);
       return true;
     }
+
     return false;
   }
 
-  removeListener(callback: () => mixed): boolean {
+  removeListener(callback) {
     const index = this.listeners.indexOf(callback);
+
     if (index !== -1) {
       this.listeners.splice(index, 1);
       return true;
     }
+
     return false;
   }
 
-  triggerListeners = (...args: Array<any>): void => {
-    this.listeners.forEach((cb) => cb(...args));
-  };
 }
 
-export class ArrayDataSource<T = any> extends DataSource<T> {
-  elements: Array<T>;
-
-  constructor(elementsArray: Array<T>) {
+class ArrayDataSource extends DataSource {
+  constructor(elementsArray) {
     super();
+
+    _defineProperty(this, "elements", void 0);
+
     this.elements = elementsArray;
   }
 
-  fetchItems(index: number, nElements: number): Promise<Array<T>> {
-    const { elements } = this;
-    return new Promise((resolve) => {
+  fetchItems(index, nElements) {
+    const {
+      elements
+    } = this;
+    return new Promise(resolve => {
       const totalElements = elements.length;
       const n = totalElements - index;
+
       if (n <= 0) {
         return resolve([]);
       }
+
       const start = Math.max(index, 0);
       const end = Math.max(start, start + nElements);
       return resolve(elements.slice(start, end));
     });
   }
 
-  updateData(newElementsArray: Array<T>) {
+  updateData(newElementsArray) {
     this.elements = newElementsArray;
     this.triggerListeners();
   }
+
 }
 
-export default DataSource;
+exports.ArrayDataSource = ArrayDataSource;
+var _default = DataSource;
+exports.default = _default;

package/bpk-component-infinite-scroll/src/intersection-observer.js

@@ -1,3 +1,5 @@
+"use strict";
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,13 +17,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 if (typeof window === 'undefined') {
   global.IntersectionObserver = class {
     observe() {} // eslint-disable-line class-methods-use-this
 
+
     unobserve() {} // eslint-disable-line class-methods-use-this
+
+
   };
 } else {
-  require('intersection-observer'); /* eslint-disable-line global-require */
-}
+  require('intersection-observer');
+  /* eslint-disable-line global-require */
+
+}