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

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

@@ -1,228 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _bpkComponentSpinner = require("../../bpk-component-spinner");
-
-var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
-
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-
-var _customPropTypes = require("./customPropTypes");
-
-var _BpkImageModule = _interopRequireDefault(require("./BpkImage.css"));
-
-var _BpkImageBorderRadiusStyles = _interopRequireDefault(require("./BpkImageBorderRadiusStyles"));
-
-const _excluded = ["altText", "hidden", "onImageLoad"],
-      _excluded2 = ["altText", "aspectRatio", "borderRadiusStyle", "className", "height", "inView", "loading", "onLoad", "style", "width"];
-
-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 _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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkImageModule.default);
-
-class Image extends _react.Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "img", void 0);
-
-    _defineProperty(this, "setImgRef", el => {
-      this.img = el;
-    });
-
-    this.img = null;
-  }
-
-  componentDidMount() {
-    if (this.img && this.img.src && this.img.complete) {
-      if (this.props.onImageLoad) {
-        this.props.onImageLoad();
-      }
-    }
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      altText,
-      hidden,
-      onImageLoad
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-    const imgClassNames = [getClassName('bpk-image__img')];
-
-    if (hidden) {
-      imgClassNames.push(getClassName('bpk-image__img--hidden'));
-    }
-
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _react.default.createElement("img", _extends({
-        className: imgClassNames.join(' '),
-        alt: altText,
-        onLoad: onImageLoad,
-        ref: this.setImgRef
-      }, rest))
-    );
-  }
-
-}
-
-_defineProperty(Image, "propTypes", {
-  altText: _propTypes.default.string.isRequired,
-  hidden: _propTypes.default.bool,
-  onImageLoad: _propTypes.default.func.isRequired
-});
-
-_defineProperty(Image, "defaultProps", {
-  hidden: false
-});
-
-class BpkImage extends _react.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "onImageLoad", void 0);
-
-    _defineProperty(this, "placeholder", void 0);
-
-    _defineProperty(this, "onImageLoad", () => {
-      if (this.props.onLoad) {
-        this.props.onLoad();
-      }
-    });
-
-    _defineProperty(this, "getAspectRatio", () => {
-      if (this.props.aspectRatio) {
-        return this.props.aspectRatio;
-      }
-
-      if (this.props.width && this.props.height) {
-        return this.props.width / this.props.height;
-      }
-
-      return 1;
-    });
-  }
-
-  render() {
-    const _this$props2 = this.props,
-          {
-      altText,
-      aspectRatio,
-      borderRadiusStyle,
-      className,
-      height,
-      inView,
-      loading,
-      onLoad,
-      style,
-      width
-    } = _this$props2,
-          rest = _objectWithoutProperties(_this$props2, _excluded2);
-
-    const classNames = [getClassName('bpk-image')];
-    const aspectRatioPercentage = `${100 / this.getAspectRatio()}%`;
-
-    if (!loading) {
-      classNames.push(getClassName('bpk-image--no-background'));
-    }
-
-    if (borderRadiusStyle !== _BpkImageBorderRadiusStyles.default.none) {
-      classNames.push(getClassName(`bpk-image--border-radius-${_BpkImageBorderRadiusStyles.default[borderRadiusStyle]}`));
-    } // wraps a div with maxWidth and maxHeight set iff full-width is no required.
-    // This ensures that the css / html do not reserve too much spacing
-    // when width 100% is not being used
-
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: style,
-      className: className
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: div => {
-        this.placeholder = div;
-      },
-      style: {
-        height: 0,
-        paddingBottom: aspectRatioPercentage
-      },
-      className: classNames.join(' '),
-      suppressHydrationWarning: this.props.suppressHydrationWarning
-    }, inView &&
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(Image, _extends({
-      hidden: loading,
-      altText: altText,
-      onImageLoad: this.onImageLoad
-    }, rest)), loading && /*#__PURE__*/_react.default.createElement(_CSSTransition.default, {
-      classNames: {
-        exit: getClassName('bpk-image__spinner--shown'),
-        exitActive: getClassName('bpk-image__spinner--hidden')
-      },
-      timeout: parseInt(_base.animations.durationBase, 10)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: getClassName('bpk-image__spinner')
-    }, /*#__PURE__*/_react.default.createElement(_bpkComponentSpinner.BpkSpinner, null))), typeof window === 'undefined' && (!inView || loading) && /*#__PURE__*/_react.default.createElement("noscript", null, /*#__PURE__*/_react.default.createElement(Image, _extends({
-      altText: altText,
-      onImageLoad: this.onImageLoad
-    }, rest)))));
-  }
-
-}
-
-_defineProperty(BpkImage, "propTypes", {
-  altText: _propTypes.default.string.isRequired,
-  src: _propTypes.default.string.isRequired,
-  aspectRatio: _customPropTypes.widthHeightAspectRatioPropType,
-  borderRadiusStyle: _propTypes.default.oneOf(Object.keys(_BpkImageBorderRadiusStyles.default)),
-  className: _propTypes.default.string,
-  inView: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
-  onLoad: _propTypes.default.func,
-  style: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  suppressHydrationWarning: _propTypes.default.bool,
-  height: (0, _bpkReactUtils.deprecated)(_customPropTypes.widthHeightAspectRatioPropType, 'Use "aspectRatio" instead of "width" and "height".'),
-  width: (0, _bpkReactUtils.deprecated)(_customPropTypes.widthHeightAspectRatioPropType, 'Use "aspectRatio" instead of "width" and "height".')
-});
-
-_defineProperty(BpkImage, "defaultProps", {
-  aspectRatio: null,
-  borderRadiusStyle: _BpkImageBorderRadiusStyles.default.none,
-  className: null,
-  height: null,
-  inView: true,
-  loading: false,
-  onLoad: null,
-  style: {},
-  suppressHydrationWarning: false,
-  width: null
-});
-
-var _default = BpkImage;
-exports.default = _default;

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

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-/*
- * 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.
- */
-const BORDER_RADIUS_STYLES = {
-  none: 'none',
-  sm: 'sm'
-};
-var _default = BORDER_RADIUS_STYLES;
-exports.default = _default;

package/bpk-component-image/src/accessibility-test.js

@@ -1,68 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-
-var _BpkImage = _interopRequireDefault(require("./BpkImage"));
-
-var _BpkBackgroundImage = _interopRequireDefault(require("./BpkBackgroundImage"));
-
-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('BpkImage accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkImage.default, {
-      altText: "image description",
-      aspectRatio: 816 / 544,
-      src: "./path/to/image.jpg"
-    }));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-  });
-});
-describe('BpkBackgroundImage accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkBackgroundImage.default, {
-      aspectRatio: 612 / 408,
-      style: {
-        width: '100%',
-        height: '20rem'
-      },
-      src: "./path/to/image.jpg"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        opacity: 0.7,
-        marginLeft: _base.spacingSm,
-        paddingTop: _base.spacingSm
-      }
-    })));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-  });
-});

package/bpk-component-image/src/customPropTypes-test.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _customPropTypes = require("./customPropTypes");
-
-/*
- * 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.
- */
-
-/* eslint-disable backpack/use-tokens */
-describe('widthHeightAspectRatioPropType', () => {
-  it('should fail if width but not height specified', () => {
-    const result = (0, _customPropTypes.widthHeightAspectRatioPropType)({
-      width: 40
-    }, 'height', 'BpkImage');
-    expect(result).toEqual(expect.any(Error));
-  });
-  it('should fail if height but not width specified', () => {
-    const result = (0, _customPropTypes.widthHeightAspectRatioPropType)({
-      height: 40
-    }, 'height', 'BpkImage');
-    expect(result).toEqual(expect.any(Error));
-  });
-  it('should fail if height, width and aspectRatio not specified', () => {
-    const result = (0, _customPropTypes.widthHeightAspectRatioPropType)({}, 'height', 'BpkImage');
-    expect(result).toEqual(expect.any(Error));
-  });
-  it('should be valid if height and width specified', () => {
-    const result = (0, _customPropTypes.widthHeightAspectRatioPropType)({
-      height: 20,
-      width: 40
-    }, 'height', 'BpkImage');
-    expect(result).toBeNull();
-  });
-  it('should be valid if aspectRatio specified', () => {
-    const result = (0, _customPropTypes.widthHeightAspectRatioPropType)({
-      aspectRatio: 2
-    }, 'aspectRatio', 'BpkImage');
-    expect(result).toBeNull();
-  });
-});

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

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.widthHeightAspectRatioPropType = void 0;
-
-/*
- * 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.
- */
-// eslint-disable-next-line import/prefer-default-export
-const widthHeightAspectRatioPropType = (props, propName, componentName) => {
-  const usingWidthHeight = props.width && props.height;
-  const usingAspectRatio = !!props.aspectRatio;
-
-  if (!usingWidthHeight && !usingAspectRatio) {
-    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. You must either specify "width" and "height" or you must specify "aspectRatio".`);
-  }
-
-  return null;
-};
-
-exports.widthHeightAspectRatioPropType = widthHeightAspectRatioPropType;

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

@@ -1,92 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _withLazyLoading = _interopRequireDefault(require("./withLazyLoading"));
-
-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.
- */
-const createDocumentMock = () => {
-  const mock = jest.fn();
-  mock.addEventListener = jest.fn();
-  mock.removeEventListener = jest.fn();
-  mock.documentElement = jest.fn();
-  return mock;
-};
-
-describe('withLazyLoading', () => {
-  it('should return the original component', () => {
-    const documentMock = createDocumentMock();
-
-    const MockImageComponent = () => /*#__PURE__*/_react.default.createElement("div", null, "Fake Image");
-
-    const LazyLoadedImage = (0, _withLazyLoading.default)(MockImageComponent, documentMock);
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LazyLoadedImage, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should add inView prop', () => {
-    const documentMock = createDocumentMock();
-    const mockImageComponent = jest.fn();
-
-    const MockImageComponent = props => {
-      mockImageComponent(props);
-      return /*#__PURE__*/_react.default.createElement("div", null, "Fake Image");
-    };
-
-    const LazyLoadedImage = (0, _withLazyLoading.default)(MockImageComponent, documentMock);
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LazyLoadedImage, null));
-    expect(mockImageComponent).toHaveBeenCalledWith(expect.objectContaining({
-      inView: false
-    }));
-  });
-  it('scroll listener args should be correct when mounting', () => {
-    const documentMock = createDocumentMock();
-
-    const MockImageComponent = () => /*#__PURE__*/_react.default.createElement("div", null, "Fake Image");
-
-    const LazyLoadedImage = (0, _withLazyLoading.default)(MockImageComponent, documentMock);
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LazyLoadedImage, null));
-    expect(documentMock.addEventListener.mock.calls.length).toBe(4);
-    expect(documentMock.addEventListener.mock.calls[0][0]).toEqual('scroll');
-    expect(documentMock.addEventListener.mock.calls[0][2]).toEqual({
-      capture: true
-    });
-  });
-  it('scroll listener args should be correct when unmounting', () => {
-    const documentMock = createDocumentMock();
-
-    const MockImageComponent = () => /*#__PURE__*/_react.default.createElement("div", null, "Fake Image");
-
-    const LazyLoadedImage = (0, _withLazyLoading.default)(MockImageComponent, documentMock);
-    const {
-      unmount
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LazyLoadedImage, null));
-    unmount();
-    expect(documentMock.removeEventListener.mock.calls.length).toBe(4);
-    expect(documentMock.removeEventListener.mock.calls[0][0]).toEqual('scroll');
-    expect(documentMock.removeEventListener.mock.calls[0][2]).toEqual({
-      capture: true
-    });
-  });
-});

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

@@ -1,164 +0,0 @@
-"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
-      };
-    }
-
-    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
-      // component is already in view prior to scrolling
-
-      this.checkInView();
-    }
-
-    componentWillUnmount() {
-      this.removeEventListeners();
-    }
-
-    getPassiveArgs() {
-      return this.supportsPassiveEvents() ? {
-        capture: true,
-        passive: true
-      } : {
-        capture: true
-      };
-    }
-
-    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)));
-    }
-
-  }
-
-  _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;
-}