@shopgate/pwa-common 7.30.0-alpha.9 → 7.30.0-beta.2

package/components/RangeSlider/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { logger } from '@shopgate/pwa-core/helpers';
@@ -10,20 +12,22 @@ import { generateLinearEasingCallback, generateExponentialEasingCallback, getRan
  * @deprecated Will be remove in v7.0.0.
  *             Please use `import { RangeSlider } from '@shopgate/engage/components'` instead.
  */
-class RangeSlider extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let RangeSlider = /*#__PURE__*/function (_Component) {
   /**
    * Constructor
    * @param {Object} props The component properties
    */
-  constructor(props) {
-    super(props);
+  function RangeSlider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Processes touch start events on handles.
      * @param {Object} event The touch event
      * @param {number} index The index of the touched handle.
      */
-    this.handleTouchStart = (event, index) => {
-      this.draggedHandle = index;
+    _this.handleTouchStart = (event, index) => {
+      _this.draggedHandle = index;
 
       // Calculate the relative offset to the handles center
       const handleDOMElement = event.target;
@@ -32,97 +36,100 @@ class RangeSlider extends Component {
       // ... and calculate its absolute center.
       const handleCenterX = handleRect.left + handleDOMElement.offsetWidth / 2;
       // Store the signed distanced between the current touch offset and the handle center.
-      this.touchOffset = getTouchPositionX(event) - handleCenterX;
+      _this.touchOffset = getTouchPositionX(event) - handleCenterX;
     };
     /**
      * Processes move events on handles.
      * @param {Object} event The touch event
      */
-    this.handleTouchMove = event => {
-      if (this.props.min === this.props.max) {
+    _this.handleTouchMove = event => {
+      if (_this.props.min === _this.props.max) {
         return;
       }
-      if (this.draggedHandle === null) {
+      if (_this.draggedHandle === null) {
         return;
       }
       const {
         offsetWidth,
         offsetLeft
-      } = this.domElement;
+      } = _this.domElement;
       // Calculate the absolute offset where the element was touched...
-      let deltaX = getTouchPositionX(event) - offsetLeft - this.touchOffset;
+      let deltaX = getTouchPositionX(event) - offsetLeft - _this.touchOffset;
 
       // ...and convert it into a relative value between [0...1].
       deltaX = Math.max(0, Math.min(1, deltaX / offsetWidth));
       const stateUpdate = {};
-      if (this.draggedHandle === 1) {
+      if (_this.draggedHandle === 1) {
         // Right handle dragged
-        if (this.state.rangeMin < deltaX) {
+        if (_this.state.rangeMin < deltaX) {
           stateUpdate.rangeMax = Math.min(1, deltaX);
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - _this.state.rangeMax);
         } else {
           // Not in valid range, swap handles
-          this.draggedHandle = 0;
-          stateUpdate.rangeMax = this.state.rangeMin;
+          _this.draggedHandle = 0;
+          stateUpdate.rangeMax = _this.state.rangeMin;
           stateUpdate.rangeMin = deltaX;
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - _this.state.rangeMin);
         }
-      } else if (this.draggedHandle === 0) {
+      } else if (_this.draggedHandle === 0) {
         // Left handle dragged
-        if (this.state.rangeMax > deltaX) {
+        if (_this.state.rangeMax > deltaX) {
           stateUpdate.rangeMin = Math.max(0, deltaX);
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - _this.state.rangeMin);
         } else {
           // Not in valid range, swap handles
-          this.draggedHandle = 1;
-          stateUpdate.rangeMin = this.state.rangeMax;
+          _this.draggedHandle = 1;
+          stateUpdate.rangeMin = _this.state.rangeMax;
           stateUpdate.rangeMax = deltaX;
-          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - _this.state.rangeMax);
         }
       }
-      this.draggedHandlePixelOffset *= this.domElement.offsetWidth;
-      this.setState(stateUpdate, this.triggerChangeCallback);
+      _this.draggedHandlePixelOffset *= _this.domElement.offsetWidth;
+      _this.setState(stateUpdate, _this.triggerChangeCallback);
     };
     /**
      * Processes global touch end events for handles.
      * @param {Object} e The touch event
      */
-    this.handleTouchEnd = () => {
-      this.touchOffset = 0;
-      this.draggedHandle = null;
+    _this.handleTouchEnd = () => {
+      _this.touchOffset = 0;
+      _this.draggedHandle = null;
     };
     /**
      * Processes outer range touch end events.
      * @param {Object} event The touch event
      */
-    this.handleRangeTouch = event => {
+    _this.handleRangeTouch = event => {
       const {
         offsetWidth,
         offsetLeft
-      } = this.domElement;
+      } = _this.domElement;
       const dx = (getTouchPositionX(event) - offsetLeft) / offsetWidth;
-      const d0 = Math.abs(this.state.rangeMin - dx);
-      const d1 = Math.abs(this.state.rangeMax - dx);
+      const d0 = Math.abs(_this.state.rangeMin - dx);
+      const d1 = Math.abs(_this.state.rangeMax - dx);
       if (d0 < d1) {
-        this.draggedHandle = 0;
+        _this.draggedHandle = 0;
       } else {
-        this.draggedHandle = 1;
+        _this.draggedHandle = 1;
       }
-      this.handleTouchMove(event);
+      _this.handleTouchMove(event);
     };
     logger.warn('===== RangeSlider deprecated =====\nThe RangeSlider component and it\'s related components (@shopgate/pwa-common/component/RangeSlider) are deprecated and will be removed in @shopgate/engage v7.0.0.\nPlease use: import { RangeSlider } from \'@shopgate/engage/components\'.\n===================================');
-    this.draggedHandle = null; // 0 for left handle, 1 for right handle or null
-    this.domElement = null;
-    this.touchOffset = 0;
-    this.draggedHandlePixelOffset = 0; // The absolute pixel delta of the last handle move event.
+    _this.draggedHandle = null; // 0 for left handle, 1 for right handle or null
+    _this.domElement = null;
+    _this.touchOffset = 0;
+    _this.draggedHandlePixelOffset = 0; // The absolute pixel delta of the last handle move event.
 
-    this.state = this.getRange(props);
+    _this.state = _this.getRange(props);
+    return _this;
   }
 
   /**
    * Sets the global event listeners when component mounts.
    */
-  componentDidMount() {
+  _inheritsLoose(RangeSlider, _Component);
+  var _proto = RangeSlider.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     document.addEventListener('touchend', this.handleTouchEnd);
     document.addEventListener('touchmove', this.handleTouchMove);
   }
@@ -130,45 +137,28 @@ class RangeSlider extends Component {
   /**
    * Updates the component properties.
    * @param {Object} newProps The new component properties.
-   */
-  UNSAFE_componentWillReceiveProps(newProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(newProps) {
     this.setState(this.getRange(newProps));
   }
 
   /**
    * Removes the global event listeners when component unmounts.
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     document.removeEventListener('touchend', this.handleTouchEnd);
     document.removeEventListener('touchmove', this.handleTouchMove);
   }
 
   /**
    * Get the easing function.
-   */
-  get ease() {
-    return {
-      linear: generateLinearEasingCallback(this.props.resolution),
-      exponential: generateExponentialEasingCallback(this.props.factor)
-    }[this.props.easing];
-  }
-
-  /**
-   * Get the function to invert an eased value to it's original value.
-   */
-  get invertedEase() {
-    return {
-      linear: generateLinearEasingCallback(this.props.resolution),
-      exponential: generateExponentialEasingCallback(1 / this.props.factor)
-    }[this.props.easing];
-  }
-
+   */;
   /**
    * Get range min and max from props.
    * @param {Object} props The component props.
    * @returns {Object} The new state
    */
-  getRange(props) {
+  _proto.getRange = function getRange(props) {
     const {
       value,
       min,
@@ -178,11 +168,11 @@ class RangeSlider extends Component {
       rangeMin: this.invertedEase(getRelativeValue(value[0], min, max)),
       rangeMax: this.invertedEase(getRelativeValue(value[1], min, max))
     };
-  }
+  };
   /**
    * Calls the change callback in case of a state update.
    */
-  triggerChangeCallback() {
+  _proto.triggerChangeCallback = function triggerChangeCallback() {
     const {
       value,
       onChange,
@@ -202,9 +192,9 @@ class RangeSlider extends Component {
    * Creates a new handle component.
    * @param {number} index The index of the component. Must be either 0 or 1.
    * @returns {JSX}
-   */
-  makeHandle(index) {
-    return /*#__PURE__*/React.createElement(RangeSliderHandle, {
+   */;
+  _proto.makeHandle = function makeHandle(index) {
+    return /*#__PURE__*/_jsx(RangeSliderHandle, {
       index: index,
       onTouchStart: this.handleTouchStart,
       active: this.draggedHandle === index,
@@ -215,25 +205,49 @@ class RangeSlider extends Component {
   /**
    * Renders the component.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     // Calculate the animation speed.
     const animationSpeed = Math.round(1000 / this.props.animationSpeed * this.draggedHandlePixelOffset);
     const rangeStyle = getRangeStyle(this.state.rangeMin, this.state.rangeMax, animationSpeed > 10 ? animationSpeed : 0);
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: `${this.props.classNames.container || ''} common__range-slider`,
-      onTouchStart: this.handleRangeTouch
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${this.props.classNames.outerRange || ''} ${styles.outerRange}`,
-      ref: ref => {
-        this.domElement = ref;
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${this.props.classNames.range || ''} ${styles.range}`,
-      style: rangeStyle
-    }, this.makeHandle(0), this.makeHandle(1))));
-  }
-}
+      onTouchStart: this.handleRangeTouch,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${this.props.classNames.outerRange || ''} ${styles.outerRange}`,
+        ref: ref => {
+          this.domElement = ref;
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${this.props.classNames.range || ''} ${styles.range}`,
+          style: rangeStyle,
+          children: [this.makeHandle(0), this.makeHandle(1)]
+        })
+      })
+    });
+  };
+  return _createClass(RangeSlider, [{
+    key: "ease",
+    get: function () {
+      return {
+        linear: generateLinearEasingCallback(this.props.resolution),
+        exponential: generateExponentialEasingCallback(this.props.factor)
+      }[this.props.easing];
+    }
+
+    /**
+     * Get the function to invert an eased value to it's original value.
+     */
+  }, {
+    key: "invertedEase",
+    get: function () {
+      return {
+        linear: generateLinearEasingCallback(this.props.resolution),
+        exponential: generateExponentialEasingCallback(1 / this.props.factor)
+      }[this.props.easing];
+    }
+  }]);
+}(Component);
 RangeSlider.defaultProps = {
   animationSpeed: 500,
   classNames: {},

package/components/Route/RouteNotFound.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { router } from '@virtuous/conductor';
@@ -7,21 +9,17 @@ import ErrorBoundary from "../ErrorBoundary";
 /**
  * The RouteNotFound component
  */
-class RouteNotFound extends React.Component {
-  /**
-   * @returns {Object}
-   */
-  get currentRoute() {
-    const {
-      [router.routeIndex]: [, route]
-    } = this.context.stack;
-    return route;
+import { jsx as _jsx } from "react/jsx-runtime";
+let RouteNotFound = /*#__PURE__*/function (_React$Component) {
+  function RouteNotFound() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
+  _inheritsLoose(RouteNotFound, _React$Component);
+  var _proto = RouteNotFound.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     if (router.match(this.currentRoute.pathname)) {
       return null;
     }
@@ -36,13 +34,26 @@ class RouteNotFound extends React.Component {
     context.visible = true;
     context.pattern = '';
     context.is404 = true;
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
-      key: "error.404"
-    }, /*#__PURE__*/React.createElement(RouteContext.Provider, {
-      key: "404",
-      value: context
-    }, /*#__PURE__*/React.createElement(Component, null)));
-  }
-}
+    return /*#__PURE__*/_jsx(ErrorBoundary, {
+      children: /*#__PURE__*/_jsx(RouteContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/_jsx(Component, {})
+      }, "404")
+    }, "error.404");
+  };
+  return _createClass(RouteNotFound, [{
+    key: "currentRoute",
+    get:
+    /**
+     * @returns {Object}
+     */
+    function () {
+      const {
+        [router.routeIndex]: [, route]
+      } = this.context.stack;
+      return route;
+    }
+  }]);
+}(React.Component);
 RouteNotFound.contextType = RouterContext;
 export default RouteNotFound;

package/components/Route/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { router } from '@virtuous/conductor';
@@ -9,29 +11,27 @@ import RouteNotFound from "./RouteNotFound";
 /**
  * The Route component.
  */
-class Route extends React.Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Route = /*#__PURE__*/function (_React$Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function Route(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
     router.register(props.pattern, props.transform);
+    return _this;
   }
 
   /**
    * TODO: Move to router
    */
-  get currentRoute() {
-    const {
-      [router.routeIndex]: [, route]
-    } = this.context.stack;
-    return route;
-  }
-
+  _inheritsLoose(Route, _React$Component);
+  var _proto = Route.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       cache,
       component: Component,
@@ -67,17 +67,27 @@ class Route extends React.Component {
        * to enforce re-remounting routes which where replaced by itself.
        */
       const replaceRouteId = context?.state?.replaceRouteId || '';
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
-        key: `error.${route.id}_${replaceRouteId}`
-      }, /*#__PURE__*/React.createElement(RouteContext.Provider, {
-        key: `${route.id}_${replaceRouteId}`,
-        value: context
-      }, /*#__PURE__*/React.createElement(Suspense, {
-        fallback: /*#__PURE__*/React.createElement(Loading, null)
-      }, /*#__PURE__*/React.createElement(Component, null))));
+      return /*#__PURE__*/_jsx(ErrorBoundary, {
+        children: /*#__PURE__*/_jsx(RouteContext.Provider, {
+          value: context,
+          children: /*#__PURE__*/_jsx(Suspense, {
+            fallback: /*#__PURE__*/_jsx(Loading, {}),
+            children: /*#__PURE__*/_jsx(Component, {})
+          })
+        }, `${route.id}_${replaceRouteId}`)
+      }, `error.${route.id}_${replaceRouteId}`);
     });
-  }
-}
+  };
+  return _createClass(Route, [{
+    key: "currentRoute",
+    get: function () {
+      const {
+        [router.routeIndex]: [, route]
+      } = this.context.stack;
+      return route;
+    }
+  }]);
+}(React.Component);
 Route.contextType = RouterContext;
 Route.NotFound = RouteNotFound;
 Route.defaultProps = {

package/components/Router/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import "core-js/modules/es.string.replace.js";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -16,6 +17,7 @@ import connect from "./connector";
  * Adds additional history listeners to compensate bugs and improve the behaviour within
  * browser environments.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const createBrowserListeners = () => {
   const {
     history
@@ -63,17 +65,18 @@ const createBrowserListeners = () => {
 /**
  * The Router component.
  */
-class Router extends React.Component {
+let Router = /*#__PURE__*/function (_React$Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function Router(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
     /**
      * Updates the user initialized component state
      */
-    this.setUserInitialized = () => {
-      this.setState({
+    _this.setUserInitialized = () => {
+      _this.setState({
         userInitialized: true
       });
     };
@@ -81,7 +84,7 @@ class Router extends React.Component {
      * Determines the current location from the browser history
      * @returns {string}
      */
-    this.getHistoryLocation = () => {
+    _this.getHistoryLocation = () => {
       const {
         hash,
         pathname,
@@ -93,11 +96,11 @@ class Router extends React.Component {
      * Determines if the current route is a protected route
      * @returns {null|string}
      */
-    this.getRouteProtector = () => authRoutes.getProtector(this.getHistoryLocation());
+    _this.getRouteProtector = () => authRoutes.getProtector(_this.getHistoryLocation());
     /**
      * @param {Object} data Data for the update method
      */
-    this.update = data => {
+    _this.update = data => {
       const {
         prev,
         next
@@ -107,12 +110,12 @@ class Router extends React.Component {
          * The only change right now compared to the original component. When invoked for "onUpdate"
          * only the updated route is passed instead of an object with prev and next.
          */
-        this.setState({
+        _this.setState({
           updated: Date.now()
         });
         return;
       }
-      this.setState({
+      _this.setState({
         prev: prev ? prev.id : null,
         next: next.id,
         updated: Date.now()
@@ -121,22 +124,24 @@ class Router extends React.Component {
     if (typeof props.history === 'function') {
       router.constructor(props.history);
     }
-    this.state = {
+    _this.contextValue = null;
+    _this.state = {
       prev: null,
       next: null,
       updated: null,
       userInitialized: false,
-      initialRouteProtected: !!this.getRouteProtector()
+      initialRouteProtected: !!_this.getRouteProtector()
     };
-    UIEvents.addListener(EVENT_USER_INITIALIZED, this.setUserInitialized);
-    onDidPush(this.update);
-    onDidPop(this.update);
-    onDidReplace(this.update);
-    onDidReset(this.update);
-    onUpdate(this.update);
+    UIEvents.addListener(EVENT_USER_INITIALIZED, _this.setUserInitialized);
+    onDidPush(_this.update);
+    onDidPop(_this.update);
+    onDidReplace(_this.update);
+    onDidReset(_this.update);
+    onUpdate(_this.update);
     if (hasWebBridge() || hasSGJavaScriptBridge()) {
       createBrowserListeners();
     }
+    return _this;
   }
 
   /**
@@ -144,7 +149,9 @@ class Router extends React.Component {
    * @param {Object} nextState The next component state.
    * @returns {boolean}
    */
-  shouldComponentUpdate(nextProps, nextState) {
+  _inheritsLoose(Router, _React$Component);
+  var _proto = Router.prototype;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     const {
       isUserLoggedIn
     } = this.props;
@@ -159,8 +166,8 @@ class Router extends React.Component {
    * Replaces the initial route with a protector if necessary
    * @param {Object} nextProps The next component props
    * @param {Object} nextState The next components state
-   */
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+   */;
+  _proto.UNSAFE_componentWillUpdate = function UNSAFE_componentWillUpdate(nextProps, nextState) {
     const {
       isUserLoggedIn
     } = nextProps;
@@ -203,6 +210,8 @@ class Router extends React.Component {
           }
         }
       });
+
+      // eslint-disable-next-line react/no-will-update-set-state
       this.setState({
         initialRouteProtected: false
       });
@@ -211,14 +220,14 @@ class Router extends React.Component {
 
   /**
    * Removes the listener for the EVENT_USER_INITIALIZED event
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(EVENT_USER_INITIALIZED, this.setUserInitialized);
-  }
+  };
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children
     } = this.props;
@@ -236,15 +245,23 @@ class Router extends React.Component {
       return null;
     }
     const stack = Array.from(routeStack.getAll());
-    return /*#__PURE__*/React.createElement(RouterContext.Provider, {
-      value: {
-        prev,
-        next,
-        stack
-      }
-    }, children);
-  }
-}
+    const nextContextValue = {
+      prev,
+      next,
+      stack
+    };
+
+    // Only update the reference if something actually changed.
+    if (!this.contextValue || this.contextValue.prev !== prev || this.contextValue.next !== next || this.contextValue.stack !== stack) {
+      this.contextValue = nextContextValue;
+    }
+    return /*#__PURE__*/_jsx(RouterContext.Provider, {
+      value: this.contextValue,
+      children: children
+    });
+  };
+  return Router;
+}(React.Component);
 Router.defaultProps = {
   history: null,
   isUserLoggedIn: false