@shopgate/pwa-ui-shared 7.30.0-alpha.10 → 7.30.0-alpha.12

package/Ripple/index.js

@@ -1,3 +1,5 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
@@ -11,59 +13,64 @@ import style from "./style";
 /**
  * The ripple component.
  */
-class Ripple extends PureComponent {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Ripple = /*#__PURE__*/function (_PureComponent) {
   /**
    * Constructor.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function Ripple(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * Triggers adding of a new ripple on touch start event.
      * @param {Object} event The even object.
      */
-    this.handleClick = event => {
-      if (this.props.disabled) {
+    _this.handleClick = event => {
+      if (_this.props.disabled) {
         return;
       }
-      this.addRipple(event, true);
-      this.props.onClick();
+      _this.addRipple(event, true);
+      _this.props.onClick();
     };
     /**
      * Will be triggered from the ripple animation component, when the
      * ripple animation is over. It removes the ripple from the queue again.
      */
-    this.removeRipple = () => {
-      if (!this.mounted) {
+    _this.removeRipple = () => {
+      if (!_this.mounted) {
         return;
       }
-      this.setState(prevState => {
+      _this.setState(prevState => {
         const ripples = shift(prevState.ripples);
-        this.props.onComplete();
+        _this.props.onComplete();
         return {
           ripples,
           hasRipples: !!ripples.length
         };
       });
     };
-    this.state = {
+    _this.state = {
       ripples: [],
       nextKey: 0,
       hasRipples: false
     };
-    this.duration = 500;
-    this.ignoreNextMouseDown = false;
-    this.mounted = false;
-    this.offset = null;
-    this.position = null;
-    this.rootNode = null;
-    this.style = null;
+    _this.duration = 500;
+    _this.ignoreNextMouseDown = false;
+    _this.mounted = false;
+    _this.offset = null;
+    _this.position = null;
+    _this.rootNode = null;
+    _this.style = null;
+    return _this;
   }
 
   /**
    * Sets the `mounted` flag to true.
    */
-  componentDidMount() {
+  _inheritsLoose(Ripple, _PureComponent);
+  var _proto = Ripple.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const {
       fill
     } = this.props;
@@ -94,42 +101,21 @@ class Ripple extends PureComponent {
 
   /**
    * Sets the `mounted` flag to false
-   */
-  componentWillUnmount() {
+   */;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this.mounted = false;
   }
 
   /**
    * Calculate the size of the ripple.
    * @returns {number}
-   */
-  get rippleSize() {
-    if (this.props.size) {
-      if (this.props.fill) {
-        return this.props.size * 2;
-      }
-      return this.props.size;
-    }
-
-    /**
-     * We want the Ripple to fill the element. We set the diameter of the Ripple
-     * to double the distance of the opposing corners of the node. That way the Ripple
-     * will reach the furthest away corner if you click at a corner.
-     */
-    if (this.props.fill) {
-      return Math.sqrt(this.rootNode.offsetWidth ** 2 + this.rootNode.offsetHeight ** 2) * 2;
-    }
-
-    // Otherwise we set the size to be the smaller of the element's height and width.
-    return Math.min(this.rootNode.offsetWidth, this.rootNode.offsetHeight);
-  }
-
+   */;
   /**
    * Calculates the ripple position from the event.
    * @param {Object} event The event object.
    * @returns {Object} An object containing x and y values for the ripple.
    */
-  getRipplePosition(event) {
+  _proto.getRipplePosition = function getRipplePosition(event) {
     // If the Ripple is to fill the element then we should set the
     // Starting position to be where the user clicked within that element.
     if (this.props.fill) {
@@ -145,13 +131,13 @@ class Ripple extends PureComponent {
       this.position.y = pageY - this.offset.top;
     }
     return this.position;
-  }
+  };
   /**
    * Adds a new Ripple to the queue.
    * @param {Object} event The event object.
    * @param {boolean} isTouchGenerated Whether the action was triggered by a touch or click.
    */
-  addRipple(event, isTouchGenerated) {
+  _proto.addRipple = function addRipple(event, isTouchGenerated) {
     // If the adding of the Ripple was already triggered
     // By a touch start event, no further action will be done.
     if (this.ignoreNextMouseDown && !isTouchGenerated) {
@@ -172,16 +158,15 @@ class Ripple extends PureComponent {
     } = this.state;
 
     // Append the new ripple to the ripples array.
-    ripples.push(/*#__PURE__*/React.createElement(RippleAnimation, {
+    ripples.push(/*#__PURE__*/_jsx(RippleAnimation, {
       color: this.props.color,
       duration: this.duration,
       fill: this.props.fill,
-      key: this.state.nextKey,
       onComplete: this.removeRipple,
       size: this.rippleSize,
       x: x,
       y: y
-    }));
+    }, this.state.nextKey));
     this.ignoreNextMouseDown = isTouchGenerated;
 
     // Update the state.
@@ -197,34 +182,59 @@ class Ripple extends PureComponent {
   /**
    * Renders all the ripples in the queue.
    * @returns {JSX|null}
-   */
-  renderRipples() {
+   */;
+  _proto.renderRipples = function renderRipples() {
     // It only needs to render, if there is at least one ripple in the queue.
     if (!this.state.hasRipples) {
       return null;
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container
-    }, this.state.ripples);
+    return /*#__PURE__*/_jsx("div", {
+      className: style.container,
+      children: this.state.ripples
+    });
   }
 
   /**
    * Renders the final ripple component including it's contents.
    * @returns {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     /* eslint-disable jsx-a11y/click-events-have-key-events,
     jsx-a11y/no-static-element-interactions */
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: `ui-shared__ripple ${this.props.className}`,
       "data-test-id": "Ripple",
       onClick: this.handleClick,
-      style: this.style
-    }, this.renderRipples(), this.props.children);
+      style: this.style,
+      children: [this.renderRipples(), this.props.children]
+    });
     /* eslint-enable jsx-a11y/click-events-have-key-events,
     jsx-a11y/no-static-element-interactions */
-  }
-}
+  };
+  return _createClass(Ripple, [{
+    key: "rippleSize",
+    get: function () {
+      if (this.props.size) {
+        if (this.props.fill) {
+          return this.props.size * 2;
+        }
+        return this.props.size;
+      }
+
+      /**
+       * We want the Ripple to fill the element. We set the diameter of the Ripple
+       * to double the distance of the opposing corners of the node. That way the Ripple
+       * will reach the furthest away corner if you click at a corner.
+       */
+      if (this.props.fill) {
+        return Math.sqrt(this.rootNode.offsetWidth ** 2 + this.rootNode.offsetHeight ** 2) * 2;
+      }
+
+      // Otherwise we set the size to be the smaller of the element's height and width.
+      return Math.min(this.rootNode.offsetWidth, this.rootNode.offsetHeight);
+    }
+  }]);
+}(PureComponent);
 Ripple.defaultProps = {
   className: '',
   color: themeConfig.colors.dark,

package/RippleButton/index.js

@@ -1,4 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
+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 Ripple from "../Ripple";
@@ -9,34 +10,25 @@ import style from "../Button/style";
  * The ripple button component is a special derivation of the basic button component
  * that adds a ripple effect when clicked.
  */
-class RippleButton extends Component {
-  /**
-   * Getter for the calculated button props.
-   * @returns {Object}
-   */
-  get buttonProps() {
-    return {
-      className: `${this.props.className} ui-shared__ripple-button`,
-      disabled: this.props.disabled,
-      onClick: this.props.onClick,
-      flat: this.props.flat,
-      type: this.props.type,
-      wrapContent: false,
-      'aria-label': this.props['aria-label'],
-      'aria-haspopup': this.props['aria-haspopup']
-    };
+import { jsx as _jsx } from "react/jsx-runtime";
+let RippleButton = /*#__PURE__*/function (_Component) {
+  function RippleButton() {
+    return _Component.apply(this, arguments) || this;
   }
-
+  _inheritsLoose(RippleButton, _Component);
+  var _proto = RippleButton.prototype;
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     if (this.props.disabled) {
       // Don't show the ripple effect when the button is disabled.
-      return /*#__PURE__*/React.createElement(Button, _extends({}, this.buttonProps, {
-        wrapContent: true
-      }), this.props.children);
+      return /*#__PURE__*/_jsx(Button, {
+        ...this.buttonProps,
+        wrapContent: true,
+        children: this.props.children
+      });
     }
     const rippleProps = {
       className: `${style.contentWrapper} ${this.props.rippleClassName}`,
@@ -44,11 +36,36 @@ class RippleButton extends Component {
       size: this.props.rippleSize,
       overflow: true
     };
-    return /*#__PURE__*/React.createElement(Button, _extends({}, this.buttonProps, {
-      testId: this.props.testId
-    }), /*#__PURE__*/React.createElement(Ripple, rippleProps, this.props.children));
-  }
-}
+    return /*#__PURE__*/_jsx(Button, {
+      ...this.buttonProps,
+      testId: this.props.testId,
+      children: /*#__PURE__*/_jsx(Ripple, {
+        ...rippleProps,
+        children: this.props.children
+      })
+    });
+  };
+  return _createClass(RippleButton, [{
+    key: "buttonProps",
+    get:
+    /**
+     * Getter for the calculated button props.
+     * @returns {Object}
+     */
+    function () {
+      return {
+        className: `${this.props.className} ui-shared__ripple-button`,
+        disabled: this.props.disabled,
+        onClick: this.props.onClick,
+        flat: this.props.flat,
+        type: this.props.type,
+        wrapContent: false,
+        'aria-label': this.props['aria-label'],
+        'aria-haspopup': this.props['aria-haspopup']
+      };
+    }
+  }]);
+}(Component);
 RippleButton.defaultProps = {
   ...Button.defaultProps,
   rippleClassName: '',

package/RippleButton/spec.js

@@ -5,40 +5,47 @@ import Button from '@shopgate/pwa-common/components/Button';
 import Ripple from "../Ripple";
 import styles from "../Button/style";
 import RippleButton from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<RippleButton />', () => {
   it('should render as a regular ripple button effect if type is omitted', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RippleButton, null, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(RippleButton, {
+      children: "Press me"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
   });
   it('should render as a regular ripple button if type is explicitly defined', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
-      type: "regular"
-    }, "Press me"));
+    const wrapper = mount(/*#__PURE__*/_jsx(RippleButton, {
+      type: "regular",
+      children: "Press me"
+    }));
     expect(trim(wrapper.find(Button).props().className)).toEqual(`ui-shared__button ${styles.regular(false).button}  ui-shared__ripple-button`);
     expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as a primary ripple button', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
-      type: "primary"
-    }, "Press me"));
+    const wrapper = mount(/*#__PURE__*/_jsx(RippleButton, {
+      type: "primary",
+      children: "Press me"
+    }));
     expect(trim(wrapper.find(Button).props().className)).toEqual(`ui-shared__button ${styles.primary(false).button}  ui-shared__ripple-button`);
     expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as a secondary ripple button', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
-      type: "secondary"
-    }, "Press me"));
+    const wrapper = mount(/*#__PURE__*/_jsx(RippleButton, {
+      type: "secondary",
+      children: "Press me"
+    }));
     expect(trim(wrapper.find(Button).props().className)).toEqual(`ui-shared__button ${styles.secondary(false).button}  ui-shared__ripple-button`);
     expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as a disabled ripple button', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
-      disabled: true
-    }, "Press me"));
+    const wrapper = mount(/*#__PURE__*/_jsx(RippleButton, {
+      disabled: true,
+      children: "Press me"
+    }));
     expect(wrapper.find(Button).props().disabled).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });

package/ScannerOverlay/components/CameraOverlay/index.js

@@ -6,9 +6,12 @@ import styles from "./style";
 /**
  * @returns {JSX}
  */
-const CameraOverlay = () => /*#__PURE__*/React.createElement(SurroundPortals, {
-  portalName: SCANNER_CAMERA
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles
-}, /*#__PURE__*/React.createElement("div", null)));
+import { jsx as _jsx } from "react/jsx-runtime";
+const CameraOverlay = () => /*#__PURE__*/_jsx(SurroundPortals, {
+  portalName: SCANNER_CAMERA,
+  children: /*#__PURE__*/_jsx("div", {
+    className: styles,
+    children: /*#__PURE__*/_jsx("div", {})
+  })
+});
 export default CameraOverlay;

package/ScannerOverlay/components/ScannerBar/components/FlashlightButton/index.js

@@ -9,28 +9,32 @@ import styles from "./style";
  * The FlashlightButton component.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FlashlightButton = ({
   flashlightState,
   onToggle
-}) => /*#__PURE__*/React.createElement(SurroundPortals, {
-  portalName: SCANNER_FLASH
-}, /*#__PURE__*/React.createElement("button", {
-  className: styles.button,
-  onClick: onToggle,
-  role: "link",
-  type: "button",
-  "aria-label": i18n.text(flashlightState ? 'scanner.flashlight.switchOff' : 'scanner.flashlight.switchOn')
-}, /*#__PURE__*/React.createElement(ToggleIcon, {
-  on: flashlightState,
-  onIcon: /*#__PURE__*/React.createElement(FlashEnabledIcon, {
-    className: styles.icon
-  }),
-  offIcon: /*#__PURE__*/React.createElement(FlashDisabledIcon, {
-    className: styles.icon
-  })
-})), /*#__PURE__*/React.createElement("div", {
-  className: "sr-only",
-  role: "status",
-  "aria-live": "polite"
-}, i18n.text(flashlightState ? 'scanner.flashlight.on' : 'scanner.flashlight.off')));
+}) => /*#__PURE__*/_jsxs(SurroundPortals, {
+  portalName: SCANNER_FLASH,
+  children: [/*#__PURE__*/_jsx("button", {
+    className: styles.button,
+    onClick: onToggle,
+    role: "link",
+    type: "button",
+    "aria-label": i18n.text(flashlightState ? 'scanner.flashlight.switchOff' : 'scanner.flashlight.switchOn'),
+    children: /*#__PURE__*/_jsx(ToggleIcon, {
+      on: flashlightState,
+      onIcon: /*#__PURE__*/_jsx(FlashEnabledIcon, {
+        className: styles.icon
+      }),
+      offIcon: /*#__PURE__*/_jsx(FlashDisabledIcon, {
+        className: styles.icon
+      })
+    })
+  }), /*#__PURE__*/_jsx("div", {
+    className: "sr-only",
+    role: "status",
+    "aria-live": "polite",
+    children: i18n.text(flashlightState ? 'scanner.flashlight.on' : 'scanner.flashlight.off')
+  })]
+});
 export default FlashlightButton;

package/ScannerOverlay/components/ScannerBar/components/ScannerInstructions/index.js

@@ -5,9 +5,11 @@ import { SCANNER_INSTRUCTIONS } from '@shopgate/engage/scanner/constants';
  * The Scanner Instructions component.
  * @returns {JSX.Element}
  */
-const ScannerInstructions = () => /*#__PURE__*/React.createElement(SurroundPortals, {
-  portalName: SCANNER_INSTRUCTIONS
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: "scanner.instructions"
-}));
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScannerInstructions = () => /*#__PURE__*/_jsx(SurroundPortals, {
+  portalName: SCANNER_INSTRUCTIONS,
+  children: /*#__PURE__*/_jsx(I18n.Text, {
+    string: "scanner.instructions"
+  })
+});
 export default ScannerInstructions;

package/ScannerOverlay/components/ScannerBar/index.js

@@ -13,23 +13,28 @@ import styles from "./style";
  * @param {Function} props.onToggleFlashlight The toggle event triggered by the user.
  * @returns {React.ReactPortal} A React portal that renders the scanner bar in the AppFooter.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ScannerBar = ({
   flashlightState,
   onToggleFlashlight
-}) => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(SurroundPortals, {
+}) => /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(SurroundPortals, {
   portalName: SCANNER_BAR,
   portalProps: {
     flashlightState,
     onToggleFlashlight
-  }
-}, /*#__PURE__*/React.createElement(Grid, {
-  className: `${styles.container} ui-shared__scanner-bar`
-}, /*#__PURE__*/React.createElement(Grid.Item, {
-  className: styles.column
-}, /*#__PURE__*/React.createElement(FlashlightButton, {
-  onToggle: onToggleFlashlight,
-  flashlightState: flashlightState
-})), /*#__PURE__*/React.createElement(Grid.Item, {
-  className: styles.column
-}, /*#__PURE__*/React.createElement(ScannerInstructions, null)))), document.getElementById('AppFooter'));
+  },
+  children: /*#__PURE__*/_jsxs(Grid, {
+    className: `${styles.container} ui-shared__scanner-bar`,
+    children: [/*#__PURE__*/_jsx(Grid.Item, {
+      className: styles.column,
+      children: /*#__PURE__*/_jsx(FlashlightButton, {
+        onToggle: onToggleFlashlight,
+        flashlightState: flashlightState
+      })
+    }), /*#__PURE__*/_jsx(Grid.Item, {
+      className: styles.column,
+      children: /*#__PURE__*/_jsx(ScannerInstructions, {})
+    })]
+  })
+}), document.getElementById('AppFooter'));
 export default ScannerBar;

package/ScannerOverlay/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Fragment, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import AppScanner from '@shopgate/pwa-core/classes/Scanner';
@@ -7,44 +8,52 @@ import ScannerBar from "./components/ScannerBar";
 /**
  * The scanner overlay component.
  */
-class ScannerOverlay extends PureComponent {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+let ScannerOverlay = /*#__PURE__*/function (_PureComponent) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
-    this.handleToggleFlashlight = () => {
-      this.setState({
+  function ScannerOverlay(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
+    _this.handleToggleFlashlight = () => {
+      _this.setState({
         flashlight: AppScanner.toggleFlashlight()
       });
     };
-    this.state = {
+    _this.state = {
       flashlight: props.flashlight
     };
+    return _this;
   }
 
   /**
    * @param {Object} nextProps New props to apply.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(ScannerOverlay, _PureComponent);
+  var _proto = ScannerOverlay.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.state.flashlight !== nextProps.flashlight) {
       this.setState({
         flashlight: nextProps.flashlight
       });
     }
-  }
+  };
   /**
    * Render the camera overlay and the bottom bar with its contents.
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CameraOverlay, null), /*#__PURE__*/React.createElement(ScannerBar, {
-      flashlightState: this.state.flashlight,
-      onToggleFlashlight: this.handleToggleFlashlight
-    }));
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(CameraOverlay, {}), /*#__PURE__*/_jsx(ScannerBar, {
+        flashlightState: this.state.flashlight,
+        onToggleFlashlight: this.handleToggleFlashlight
+      })]
+    });
+  };
+  return ScannerOverlay;
+}(PureComponent);
 ScannerOverlay.defaultProps = {
   flashlight: false
 };