@skyscanner/backpack-web 6.0.0-alpha.2 → 7.0.0

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

@@ -1,164 +1,182 @@
-"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() {
+/*
+ * 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 {
       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() {
-      documentRef.addEventListener('scroll', this.checkInView, _objectSpread({}, this.getPassiveArgs()));
+    componentDidMount(): void {
+      documentRef.addEventListener('scroll', this.checkInView, {
+        ...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() {
+    componentWillUnmount(): void {
       this.removeEventListeners();
     }
 
-    getPassiveArgs() {
-      return this.supportsPassiveEvents() ? {
-        capture: true,
-        passive: true
-      } : {
-        capture: true
-      };
-    }
+    setInView = (): void => {
+      this.setState(() => ({
+        inView: true,
+      }));
+      this.removeEventListeners();
+    };
 
-    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)));
+    getPassiveArgs(): { capture: boolean } {
+      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>
+      );
+    }
   }
+  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,45 +1,66 @@
-"use strict";
+/*
+ * 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 */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = withLoadingBehavior;
+import React, { type AbstractComponent } from 'react';
 
-var _react = _interopRequireDefault(require("react"));
+import { wrapDisplayName } from '../../bpk-react-utils';
 
-var _bpkReactUtils = require("../../bpk-react-utils");
+type InjectedProps = {|
+  onLoad: () => mixed,
+  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 {
+export default function withLoadingBehavior<Config>(
+  Component: AbstractComponent<{| ...Config, ...InjectedProps |}>,
+): AbstractComponent<Config> {
+  class WithLoadingBehavior<C: Config> extends React.Component<
+    C,
+    {| loading: boolean |},
+  > {
     constructor() {
       super();
 
-      _defineProperty(this, "onLoad", () => {
-        this.setState(() => ({
-          loading: false
-        }));
-      });
-
       this.state = {
-        loading: true
+        loading: true,
       };
     }
 
+    onLoad = () => {
+      this.setState(() => ({
+        loading: false,
+      }));
+    };
+
     render() {
-      return /*#__PURE__*/_react.default.createElement(Component, _extends({
-        onLoad: this.onLoad,
-        loading: this.state.loading
-      }, this.props));
+      return (
+        <Component
+          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/README.md

@@ -0,0 +1,187 @@
+# bpk-component-infinite-scroll
+
+> Backpack infinite scroll component.
+
+## Installation
+
+```sh
+npm install bpk-component-infinite-scroll --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import PropTypes from 'prop-types';
+import BpkButton from 'bpk-component-button';
+import BpkSpinner, { SPINNER_TYPES } from 'bpk-component-spinner';
+import withInfiniteScroll, {
+  ArrayDataSource,
+} from 'bpk-component-infinite-scroll';
+
+const SomeList = ({ elements }) => (
+  <div id="list">
+    {elements.map(element => (
+      <div key={element} style={{ height: '50px' }}>
+        {element}
+      </div>
+    ))}
+  </div>
+);
+
+const elementsArray = [
+  'element 1',
+  'element 2',
+  'element 3',
+  'element 4',
+  'element 5',
+  'element 6',
+  'element 7',
+  'element 8',
+  'element 9',
+  'element 10',
+];
+
+const CustomLoading = () => (
+  <div>
+    <BpkSpinner type={SPINNER_TYPES.primary} />
+  </div>
+);
+
+const CustomSeeMore = ({ onSeeMoreClick }) => (
+  <div>
+    <BpkButton onClick={onSeeMoreClick}>See More</BpkButton>
+  </div>
+);
+
+const InfiniteList = withInfiniteScroll(SomeList);
+const dataSource = new ArrayDataSource(elementsArray);
+
+export default () => (
+  <InfiniteList
+    dataSource={dataSource}
+    renderLoadingComponent={CustomLoading}
+    renderSeeMoreComponent={CustomSeeMore}
+    seeMoreAfter={1}
+  />
+);
+```
+
+## Accompanying classes
+
+## DataSource
+
+`DataSource` is a class used by the BpkInfiniteScroll component to fetch items
+and listen for changes in the data and react to it by reloading the current items
+in the list.
+
+### Methods
+
+`fetchItems(index, nElements)`
+
+Called by the `InfiniteScroll` component every time new data is
+requested (by scrolling down) and should return the data starting from `index` plus `nElements` (number of elements). It should return a promise object.
+
+Example:
+
+```js
+fetchItems(0, 5); // should return 5 items starting from position 0
+fetchItems(5, 5); // should return 5 items starting from position 5
+```
+
+_Calling this method directly in the `DataSource` class will result in an error, it should be implemented by the subclass extending `DataSource`._
+
+`onDataChange(cb)`
+
+Adds a new change listener to this `DataSource`, to be called when data is updated. Returns true if added or false otherwise.
+
+`removeListener(cb)`
+
+Removes the callback from the list of change listeners. Returns true if removed or false otherwise.
+
+`triggerListeners(...args)`
+
+Triggers all listeners in response to data changes. This method should be
+used by subclasses to tell the `InfiniteScroll` component it should refresh
+its data.
+
+```js
+import React from 'react';
+import PropTypes from 'prop-types';
+import withInfiniteScroll, { DataSource } from 'bpk-component-infinite-scroll';
+
+const SomeList = ({ elements }) => (
+  <div id="list">
+    {elements.map(element => (
+      <div key={element} style={{ height: '50px' }}>
+        {element}
+      </div>
+    ))}
+  </div>
+);
+
+class RemoteFlightsDataSource extends DataSource {
+  constructor() {
+    super();
+    myWebSocketConnection.on('dataChange', () => {
+      // tell the `InfiniteScroll` component to refresh its data
+      this.triggerListeners();
+    });
+  }
+
+  fetchItems(index, nElements) {
+    return fetch(`https://my-api/flights?start=${index}&count=${nElements}`);
+  }
+}
+
+const InfiniteList = withInfiniteScroll(SomeList);
+
+export default () => (
+  <InfiniteList dataSource={new RemoteFlightsDataSource()} />
+);
+```
+
+## ArrayDataSource
+
+`ArrayDataSource` is a class that extends from `DataSource`. Accepts an array
+as a parameter in the constructor and uses it as source for the infinite scroll.
+
+> See [Usage](#Usage) for an example of this class in use.
+
+### Methods
+
+_refer to the `DataSource` methods section for a list of all methods_
+
+`fetchItems(index, nElements)`
+
+Returns a subset of the array data.
+
+`updateData(newData)`
+
+Updates the internal array and triggers all listeners.
+
+## Props
+
+| Property                | PropType                         | Required | Default Value |
+| ----------------------- | -------------------------------- | -------- | ------------- |
+| dataSource              | instanceOf(DataSource)           | true     | -             |
+| elementsPerScroll       | number                           | false    | 5             |
+| initiallyLoadedElements | number                           | false    | 5             |
+| loaderMinDisplay        | oneOf(['small', 'half', 'full']) | false    | 'full'        |
+| onScroll                | func                             | false    | null          |
+| onScrollFinished        | func                             | false    | null          |
+| renderLoadingComponent  | func                             | false    | null          |
+| renderSeeMoreComponent  | func                             | false    | null          |
+| seeMoreAfter            | number                           | false    | null          |
+
+## `elementsPerScroll`
+
+How many more elements to load every time the user reaches the bottom of the list.
+
+## `initiallyLoadedElements`
+
+How many more elements to load every time the user reaches the bottom of the list.
+
+### `seeMoreAfter`
+
+`seeMoreAfter` is how many scrolls should happen before a 'See more' button is displayed. This only happens once.

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

@@ -1,32 +1,3 @@
-"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
  *
@@ -44,5 +15,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _withInfiniteScroll.default;
-exports.default = _default;
+
+/* @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;

package/bpk-component-infinite-scroll/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "bpk-component-infinite-scroll",
+  "version": "4.1.12",
+  "description": "Backpack infinite scroll component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^6.0.0",
+    "intersection-observer": "^0.7.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-button": "^6.2.7",
+    "bpk-component-list": "^4.0.5",
+    "bpk-component-spinner": "^5.1.12",
+    "bpk-storybook-utils": "^1.1.11"
+  }
+}