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

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

@@ -1,85 +1,52 @@
-/*
- * 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, {
-  Component,
-  type Element,
-  type Config,
-  type AbstractComponent,
-} from 'react';
-import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
-import omit from 'lodash/omit';
-import extend from 'lodash/extend';
-
-import './intersection-observer';
-import DataSource from './DataSource';
-import STYLES from './withInfiniteScroll.module.scss';
-
-const getClassNames = cssModules(STYLES);
-
-type ScrollEvent = {
-  currentIndex: number,
-};
+"use strict";
 
-type ScrollFinishedEvent = {
-  totalNumberElements: number,
-};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-export type Props = {
-  dataSource: DataSource<any>,
-  elementsPerScroll: number,
-  initiallyLoadedElements: number,
-  loaderIntersectionTrigger: ?('small' | 'half' | 'full'),
-  onScroll: ?(o: ScrollEvent) => void,
-  onScrollFinished: ?(o: ScrollFinishedEvent) => void,
-  renderLoadingComponent: ?() => Element<any>,
-  renderSeeMoreComponent: ?({
-    onSeeMoreClick: (event: SyntheticEvent<any>) => mixed,
-  }) => Element<any>,
-  seeMoreAfter: ?number,
-};
+var _react = _interopRequireWildcard(require("react"));
 
-export type State = {
-  index: number,
-  elementsToRender: Array<any>,
-  isListFinished: boolean,
-  showSeeMore: boolean,
-};
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-type ExtendedProps = {
-  elements: Array<any>,
-};
+var _bpkReactUtils = require("../../bpk-react-utils");
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _extend = _interopRequireDefault(require("lodash/extend"));
+
+require("./intersection-observer");
+
+var _DataSource = _interopRequireDefault(require("./DataSource"));
+
+var _withInfiniteScrollModule = _interopRequireDefault(require("./withInfiniteScroll.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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 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; }
 
+const getClassNames = (0, _bpkReactUtils.cssModules)(_withInfiniteScrollModule.default);
 const propTypes = {
-  initiallyLoadedElements: PropTypes.number,
-  elementsPerScroll: PropTypes.number,
-  dataSource: PropTypes.instanceOf(DataSource).isRequired,
-  loaderIntersectionTrigger: PropTypes.oneOf(['small', 'half', 'full']),
-  onScroll: PropTypes.func,
-  onScrollFinished: PropTypes.func,
-  renderLoadingComponent: PropTypes.func,
-  renderSeeMoreComponent: PropTypes.func,
-  seeMoreAfter: PropTypes.number,
+  initiallyLoadedElements: _propTypes.default.number,
+  elementsPerScroll: _propTypes.default.number,
+  dataSource: _propTypes.default.instanceOf(_DataSource.default).isRequired,
+  loaderIntersectionTrigger: _propTypes.default.oneOf(['small', 'half', 'full']),
+  onScroll: _propTypes.default.func,
+  onScrollFinished: _propTypes.default.func,
+  renderLoadingComponent: _propTypes.default.func,
+  renderSeeMoreComponent: _propTypes.default.func,
+  seeMoreAfter: _propTypes.default.number
 };
-
 const defaultProps = {
   initiallyLoadedElements: 5,
   elementsPerScroll: 5,
@@ -88,56 +55,97 @@ const defaultProps = {
   onScrollFinished: null,
   renderLoadingComponent: null,
   renderSeeMoreComponent: null,
-  seeMoreAfter: null,
+  seeMoreAfter: null
 };
 
-type PropsWithDefault = Config<Props, typeof defaultProps>;
+const withInfiniteScroll = ComponentToExtend => {
+  var _class;
 
-const withInfiniteScroll = <T: ExtendedProps>(
-  ComponentToExtend: AbstractComponent<T>,
-): AbstractComponent<PropsWithDefault & $Diff<T, ExtendedProps>> =>
-  class WithInfiniteScroll extends Component<Props, State> {
-    handleIntersection: IntersectionObserverCallback;
+  return _class = class WithInfiniteScroll extends _react.Component {
+    constructor(props) {
+      super(props);
 
-    handleKeyPress: (e: SyntheticKeyboardEvent<HTMLButtonElement>) => void;
+      _defineProperty(this, "handleIntersection", void 0);
 
-    handleSeeMoreClick: (e: SyntheticEvent<HTMLButtonElement>) => void;
+      _defineProperty(this, "handleKeyPress", void 0);
 
-    observer: IntersectionObserver;
+      _defineProperty(this, "handleSeeMoreClick", void 0);
 
-    sentinel: ?HTMLElement;
+      _defineProperty(this, "observer", void 0);
 
-    static propTypes = { ...propTypes };
+      _defineProperty(this, "sentinel", void 0);
 
-    static defaultProps = { ...defaultProps };
+      _defineProperty(this, "updateData", () => {
+        const {
+          index
+        } = this.state; // This means updateData was called before any data was loaded, e.g.
+        // An ArrayDataSource initialized empty and then changed latter on via `updateData`
+        // In this case we want to load new data and not just replace the old one.
+        // "See More After" should also be computed again in this case.
 
-    constructor(props: Props) {
-      super(props);
+        const isFirstLoad = index < this.props.elementsPerScroll;
+        this.fetchItems({
+          index: 0,
+          elementsPerScroll: isFirstLoad ? this.props.elementsPerScroll : index,
+          elementsToRender: [],
+          computeShowSeeMore: isFirstLoad
+        }).then(newState => this.setStateAfterDsUpdate(newState));
+      });
+
+      _defineProperty(this, "handleIntersection", entries => {
+        const {
+          onScroll
+        } = this.props;
+        const entry = entries[0];
+
+        if (entry.isIntersecting) {
+          if (this.sentinel) {
+            this.observer.unobserve(this.sentinel);
+          }
+
+          if (onScroll) {
+            onScroll({
+              currentIndex: this.state.index
+            });
+          }
+
+          return this.fetchItems().then(newState => {
+            this.setState(newState);
+          });
+        }
+
+        return Promise.resolve();
+      });
+
+      _defineProperty(this, "handleSeeMoreClick", () => {
+        this.fetchItems().then(newState => {
+          this.setState(newState);
+        });
+      });
 
       this.state = {
         index: 0,
         elementsToRender: [],
         isListFinished: false,
-        showSeeMore: false,
+        showSeeMore: false
       };
-
       this.props.dataSource.onDataChange(this.updateData);
-
       const thresholds = {
         small: 0.01,
         half: 0.5,
-        full: 0.99, // using 0.99 instead of 1 to avoid problems with float precision in IE11
+        full: 0.99 // using 0.99 instead of 1 to avoid problems with float precision in IE11
+
       };
       const displaySize = this.props.loaderIntersectionTrigger || 'full';
       this.observer = new IntersectionObserver(this.handleIntersection, {
-        threshold: thresholds[displaySize] || thresholds.full,
+        threshold: thresholds[displaySize] || thresholds.full
       });
     }
 
     componentDidMount() {
       this.fetchItems({
-        elementsPerScroll: this.props.initiallyLoadedElements,
-      }).then((newState) => {
+        elementsPerScroll: this.props.initiallyLoadedElements
+      }).then(newState => {
         this.setState(newState);
       });
     }
@@ -153,145 +161,111 @@ const withInfiniteScroll = <T: ExtendedProps>(
         this.fetchItems({
           index: 0,
           elementsPerScroll: this.props.elementsPerScroll,
-          elementsToRender: [],
-        }).then((newState) => this.setStateAfterDsUpdate(newState));
+          elementsToRender: []
+        }).then(newState => this.setStateAfterDsUpdate(newState));
       }
     }
 
     componentWillUnmount() {
       this.props.dataSource.removeListener(this.updateData);
+
       if (this.sentinel) {
         this.observer.unobserve(this.sentinel);
       }
     }
 
-    setStateAfterDsUpdate(newState: State) {
+    setStateAfterDsUpdate(newState) {
       // After a data source update (calling updateData in the data source or changing the dataSource prop)
       // all visible data is fetched again (from 0 to current index) to update the list with the new data.
       // If after this call there is no elementsToRender or index present in state
       // it means the new data source has no items and we need to
       // reset the list, which we do by setting `elementsToRender` to `[]` and `index` to `0`
-      const { elementsToRender, index } = newState;
-      this.setState({
-        ...newState,
+      const {
+        elementsToRender,
+        index
+      } = newState;
+      this.setState(_objectSpread(_objectSpread({}, newState), {}, {
         elementsToRender: elementsToRender || [],
-        index: index || 0,
-      });
+        index: index || 0
+      }));
     }
 
-    updateData = () => {
-      const { index } = this.state;
-      // This means updateData was called before any data was loaded, e.g.
-      // An ArrayDataSource initialized empty and then changed latter on via `updateData`
-      // In this case we want to load new data and not just replace the old one.
-      // "See More After" should also be computed again in this case.
-      const isFirstLoad = index < this.props.elementsPerScroll;
-      this.fetchItems({
-        index: 0,
-        elementsPerScroll: isFirstLoad ? this.props.elementsPerScroll : index,
-        elementsToRender: [],
-        computeShowSeeMore: isFirstLoad,
-      }).then((newState) => this.setStateAfterDsUpdate(newState));
-    };
-
-    fetchItems(config): Promise<$Shape<State>> {
-      const { onScrollFinished, seeMoreAfter } = this.props;
-      const { computeShowSeeMore, elementsPerScroll, elementsToRender, index } =
-        extend(
-          {
-            index: this.state.index,
-            elementsPerScroll: this.props.elementsPerScroll,
-            elementsToRender: this.state.elementsToRender,
-            computeShowSeeMore: true,
-          },
-          config,
-        );
-
-      return this.props.dataSource
-        .fetchItems(index, elementsPerScroll)
-        .then((nextElements) => {
-          let result = {
-            isListFinished: true,
+    fetchItems(config) {
+      const {
+        onScrollFinished,
+        seeMoreAfter
+      } = this.props;
+      const {
+        computeShowSeeMore,
+        elementsPerScroll,
+        elementsToRender,
+        index
+      } = (0, _extend.default)({
+        index: this.state.index,
+        elementsPerScroll: this.props.elementsPerScroll,
+        elementsToRender: this.state.elementsToRender,
+        computeShowSeeMore: true
+      }, config);
+      return this.props.dataSource.fetchItems(index, elementsPerScroll).then(nextElements => {
+        let result = {
+          isListFinished: true
+        };
+
+        if (nextElements && nextElements.length > 0) {
+          const nextIndex = index + elementsPerScroll;
+          result = {
+            index: nextIndex,
+            elementsToRender: (elementsToRender || []).concat(nextElements),
+            showSeeMore: computeShowSeeMore ? seeMoreAfter === index / elementsPerScroll : this.state.showSeeMore,
+            isListFinished: nextElements.length < elementsPerScroll
           };
-          if (nextElements && nextElements.length > 0) {
-            const nextIndex = index + elementsPerScroll;
-            result = {
-              index: nextIndex,
-              elementsToRender: (elementsToRender || []).concat(nextElements),
-              showSeeMore: computeShowSeeMore
-                ? seeMoreAfter === index / elementsPerScroll
-                : this.state.showSeeMore,
-              isListFinished: nextElements.length < elementsPerScroll,
-            };
-          }
-          if (onScrollFinished && result.isListFinished) {
-            onScrollFinished({
-              totalNumberElements: elementsToRender.length,
-            });
-          }
-          return result;
-        });
-    }
-
-    handleIntersection = (entries: Array<IntersectionObserverEntry>) => {
-      const { onScroll } = this.props;
-      const entry = entries[0];
-      if (entry.isIntersecting) {
-        if (this.sentinel) {
-          this.observer.unobserve(this.sentinel);
         }
-        if (onScroll) {
-          onScroll({ currentIndex: this.state.index });
+
+        if (onScrollFinished && result.isListFinished) {
+          onScrollFinished({
+            totalNumberElements: elementsToRender.length
+          });
         }
-        return this.fetchItems().then((newState) => {
-          this.setState(newState);
-        });
-      }
-      return Promise.resolve();
-    };
 
-    handleSeeMoreClick = () => {
-      this.fetchItems().then((newState) => {
-        this.setState(newState);
+        return result;
       });
-    };
+    }
 
     render() {
-      const { elementsToRender, isListFinished, showSeeMore } = this.state;
-      const { renderLoadingComponent, renderSeeMoreComponent } = this.props;
-
-      const rest = omit(this.props, Object.keys(propTypes));
-
+      const {
+        elementsToRender,
+        isListFinished,
+        showSeeMore
+      } = this.state;
+      const {
+        renderLoadingComponent,
+        renderSeeMoreComponent
+      } = this.props;
+      const rest = (0, _omit.default)(this.props, Object.keys(propTypes));
       let loadingOrButton = null;
 
       if (!isListFinished) {
         if (showSeeMore && renderSeeMoreComponent) {
           loadingOrButton = renderSeeMoreComponent({
-            onSeeMoreClick: this.handleSeeMoreClick,
+            onSeeMoreClick: this.handleSeeMoreClick
           });
         } else {
-          loadingOrButton = (
-            <div
-              ref={(spinner) => {
-                this.sentinel = spinner;
-              }}
-              className={
-                renderLoadingComponent ? null : getClassNames('bpk-sentinel')
-              }
-            >
-              {renderLoadingComponent && renderLoadingComponent()}
-            </div>
-          );
+          loadingOrButton = /*#__PURE__*/_react.default.createElement("div", {
+            ref: spinner => {
+              this.sentinel = spinner;
+            },
+            className: renderLoadingComponent ? null : getClassNames('bpk-sentinel')
+          }, renderLoadingComponent && renderLoadingComponent());
         }
       }
 
-      return (
-        <div>
-          <ComponentToExtend {...rest} elements={elementsToRender} />
-          {loadingOrButton}
-        </div>
-      );
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ComponentToExtend, _extends({}, rest, {
+        elements: elementsToRender
+      })), loadingOrButton);
     }
-  };
 
-export default withInfiniteScroll;
+  }, _defineProperty(_class, "propTypes", _objectSpread({}, propTypes)), _defineProperty(_class, "defaultProps", _objectSpread({}, defaultProps)), _class;
+};
+
+var _default = withInfiniteScroll;
+exports.default = _default;

package/bpk-component-input/index.js

@@ -1,50 +1,67 @@
-/*
- * 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 BpkInput from './src/BpkInput';
-import withOpenEvents from './src/withOpenEvents';
-import {
-  propTypes,
-  defaultProps,
-  CLEAR_BUTTON_MODES,
-  INPUT_TYPES as TYPES,
-  type Props,
-} from './src/common-types';
-import themeAttributes from './src/themeAttributes';
-
-export default BpkInput;
-
-// TODO: Remove these in the next major
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CLEAR_BUTTON_MODES", {
+  enumerable: true,
+  get: function () {
+    return _commonTypes.CLEAR_BUTTON_MODES;
+  }
+});
+exports.default = exports.INPUT_TYPES = void 0;
+Object.defineProperty(exports, "defaultProps", {
+  enumerable: true,
+  get: function () {
+    return _commonTypes.defaultProps;
+  }
+});
+Object.defineProperty(exports, "propTypes", {
+  enumerable: true,
+  get: function () {
+    return _commonTypes.propTypes;
+  }
+});
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+Object.defineProperty(exports, "withOpenEvents", {
+  enumerable: true,
+  get: function () {
+    return _withOpenEvents.default;
+  }
+});
+
+var _BpkInput = _interopRequireDefault(require("./src/BpkInput"));
+
+var _withOpenEvents = _interopRequireDefault(require("./src/withOpenEvents"));
+
+var _commonTypes = require("./src/common-types");
+
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+
+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 _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; }
+
+var _default = _BpkInput.default; // TODO: Remove these in the next major
+
+exports.default = _default;
 const DEPRECATED_INPUT_TYPES = {
   TEXT: 'text',
   EMAIL: 'email',
   NUMBER: 'number',
   PASSWORD: 'password',
-  TEL: 'tel',
+  TEL: 'tel'
 };
 
-export type BpkInputProps = Props;
-export const INPUT_TYPES = { ...DEPRECATED_INPUT_TYPES, ...TYPES };
-export {
-  propTypes,
-  defaultProps,
-  withOpenEvents,
-  CLEAR_BUTTON_MODES,
-  themeAttributes,
-};
+const INPUT_TYPES = _objectSpread(_objectSpread({}, DEPRECATED_INPUT_TYPES), _commonTypes.INPUT_TYPES);
+
+exports.INPUT_TYPES = INPUT_TYPES;

package/bpk-component-input/src/BpkClearButton-test.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _BpkClearButton = _interopRequireDefault(require("./BpkClearButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+describe('BpkClearButton', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkClearButton.default, {
+      label: "Clear",
+      onClick: () => null
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a custom class', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkClearButton.default, {
+      label: "Clear",
+      onClick: () => null,
+      className: "foo-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});