@shopgate/pwa-ui-shared 7.30.3 → 7.31.0-alpha.1

package/Ripple/index.js

@@ -1,240 +1,186 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React, { useState, useRef, useCallback, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 import clamp from 'lodash/clamp';
 import { shift } from '@shopgate/pwa-common/helpers/data';
 import { getOffset } from '@shopgate/pwa-common/helpers/dom';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import RippleAnimation from "./components/RippleAnimation";
-import style from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    position: 'absolute',
+    zIndex: 0,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%'
+  }
+});
 
 /**
  * The ripple component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let Ripple = /*#__PURE__*/function (_PureComponent) {
-  /**
-   * Constructor.
-   * @param {Object} props The component 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) {
-        return;
-      }
-      _this.addRipple(event, true);
-      _this.props.onClick();
+const Ripple = ({
+  children,
+  className,
+  color,
+  disabled,
+  fill,
+  onClick,
+  onComplete,
+  overflow,
+  size
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [{
+    ripples,
+    hasRipples
+  }, setRippleState] = useState({
+    ripples: [],
+    nextKey: 0,
+    hasRipples: false
+  });
+  const durationRef = useRef(500);
+  const ignoreNextMouseDownRef = useRef(false);
+  const mountedRef = useRef(false);
+  const offsetRef = useRef(null);
+  const positionRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const rootRef = useRef(null);
+  const [containerStyle, setContainerStyle] = useState(null);
+  const getRippleSize = useCallback(() => {
+    const rootNode = rootRef.current;
+    if (!rootNode) {
+      return 0;
+    }
+    if (size) {
+      return fill ? size * 2 : size;
+    }
+    if (fill) {
+      return Math.sqrt(rootNode.offsetWidth ** 2 + rootNode.offsetHeight ** 2) * 2;
+    }
+    return Math.min(rootNode.offsetWidth, rootNode.offsetHeight);
+  }, [fill, size]);
+  useLayoutEffect(() => {
+    const rootNode = rootRef.current;
+    if (!rootNode) {
+      return undefined;
+    }
+    mountedRef.current = true;
+    positionRef.current = {
+      x: rootNode.offsetWidth / 2,
+      y: rootNode.offsetHeight / 2
     };
-    /**
-     * 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) {
-        return;
+    const rippleSize = (() => {
+      if (size) {
+        return fill ? size * 2 : size;
       }
-      _this.setState(prevState => {
-        const ripples = shift(prevState.ripples);
-        _this.props.onComplete();
-        return {
-          ripples,
-          hasRipples: !!ripples.length
-        };
-      });
-    };
-    _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;
-    return _this;
-  }
-
-  /**
-   * Sets the `mounted` flag to true.
-   */
-  _inheritsLoose(Ripple, _PureComponent);
-  var _proto = Ripple.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    const {
-      fill
-    } = this.props;
-
-    // Reference to Ripple container (for now and later).
-    this.rootNode = findDOMNode(this); // eslint-disable-line react/no-find-dom-node
-
-    // Initially set the position values to be in the middle of the element.
-    // If the Ripple's starting point has to follow the user's touch
-    // Location then this is checked later.
-    this.position = {
-      x: this.rootNode.offsetWidth / 2,
-      y: this.rootNode.offsetHeight / 2
-    };
-
-    // Determine the duration based on the size of the ripple.
-    this.duration = clamp(Math.round(Math.log(this.rippleSize) * 100 - (fill ? -75 : 50)), 0, 10000);
-
-    // Set the `mounted` flag to true.
-    this.mounted = true;
-
-    // If the Ripple is not allowed to overflow then apply some styles to the parent container.
-    this.style = !this.props.overflow ? {
+      if (fill) {
+        return Math.sqrt(rootNode.offsetWidth ** 2 + rootNode.offsetHeight ** 2) * 2;
+      }
+      return Math.min(rootNode.offsetWidth, rootNode.offsetHeight);
+    })();
+    durationRef.current = clamp(Math.round(Math.log(rippleSize) * 100 - (fill ? -75 : 50)), 0, 10000);
+    setContainerStyle(!overflow ? {
       overflow: 'hidden',
       position: 'relative'
-    } : null;
-  }
-
-  /**
-   * Sets the `mounted` flag to false
-   */;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  /**
-   * Calculate the size of the ripple.
-   * @returns {number}
-   */;
-  /**
-   * 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.
-   */
-  _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) {
-      // Determine if event is a touch event.
+    } : null);
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [fill, overflow, size]);
+  const getRipplePosition = useCallback(event => {
+    if (fill) {
       const isTouchEvent = event.touches && event.touches.length;
-
-      // Find the center points of the event.
       const pageX = isTouchEvent ? event.touches[0].pageX : event.pageX;
       const pageY = isTouchEvent ? event.touches[0].pageY : event.pageY;
-
-      // The pointer location is relative to the element offset.
-      this.position.x = pageX - this.offset.left;
-      this.position.y = pageY - this.offset.top;
+      positionRef.current = {
+        x: pageX - offsetRef.current.left,
+        y: pageY - offsetRef.current.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.
-   */
-  _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) {
-      this.ignoreNextMouseDown = false;
+    return positionRef.current;
+  }, [fill]);
+  const removeRipple = useCallback(() => {
+    if (!mountedRef.current) {
       return;
     }
-
-    // Get the position of the element and store it.
-    this.offset = getOffset(this.rootNode);
-
-    // Receive the x and y position for the new Ripple.
+    setRippleState(prev => {
+      const nextRipples = shift(prev.ripples);
+      onComplete();
+      return {
+        ripples: nextRipples,
+        nextKey: prev.nextKey,
+        hasRipples: !!nextRipples.length
+      };
+    });
+  }, [onComplete]);
+  const addRipple = useCallback((event, isTouchGenerated) => {
+    if (ignoreNextMouseDownRef.current && !isTouchGenerated) {
+      ignoreNextMouseDownRef.current = false;
+      return;
+    }
+    const rootNode = rootRef.current;
+    if (!rootNode) {
+      return;
+    }
+    offsetRef.current = getOffset(rootNode);
     const {
       x,
       y
-    } = this.getRipplePosition(event);
-    const {
-      ripples
-    } = this.state;
-
-    // Append the new ripple to the ripples array.
-    ripples.push(/*#__PURE__*/_jsx(RippleAnimation, {
-      color: this.props.color,
-      duration: this.duration,
-      fill: this.props.fill,
-      onComplete: this.removeRipple,
-      size: this.rippleSize,
-      x: x,
-      y: y
-    }, this.state.nextKey));
-    this.ignoreNextMouseDown = isTouchGenerated;
-
-    // Update the state.
-    this.setState(({
-      nextKey
-    }) => ({
-      ripples,
-      nextKey: nextKey + 1,
-      hasRipples: true
-    }));
-  }
-
-  /**
-   * Renders all the ripples in the queue.
-   * @returns {JSX|null}
-   */;
-  _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__*/_jsx("div", {
-      className: style.container,
-      children: this.state.ripples
-    });
-  }
-
-  /**
-   * Renders the final ripple component including it's contents.
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    /* eslint-disable jsx-a11y/click-events-have-key-events,
-    jsx-a11y/no-static-element-interactions */
-    return /*#__PURE__*/_jsxs("div", {
-      className: `ui-shared__ripple ${this.props.className}`,
-      "data-test-id": "Ripple",
-      onClick: this.handleClick,
-      style: this.style,
-      children: [this.renderRipples(), this.props.children]
+    } = getRipplePosition(event);
+    const rippleSize = getRippleSize();
+    setRippleState(prev => {
+      const nextRipples = [].concat(prev.ripples);
+      nextRipples.push(/*#__PURE__*/_jsx(RippleAnimation, {
+        color: color,
+        duration: durationRef.current,
+        fill: fill,
+        onComplete: removeRipple,
+        size: rippleSize,
+        x: x,
+        y: y
+      }, prev.nextKey));
+      return {
+        ripples: nextRipples,
+        nextKey: prev.nextKey + 1,
+        hasRipples: true
+      };
     });
-    /* 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);
+    ignoreNextMouseDownRef.current = isTouchGenerated;
+  }, [color, fill, getRipplePosition, getRippleSize, removeRipple]);
+  const handleClick = useCallback(event => {
+    if (disabled) {
+      return;
     }
-  }]);
-}(PureComponent);
+    addRipple(event, true);
+    onClick();
+  }, [addRipple, disabled, onClick]);
+
+  /* eslint-disable jsx-a11y/click-events-have-key-events,
+  jsx-a11y/no-static-element-interactions */
+  return /*#__PURE__*/_jsxs("div", {
+    ref: rootRef,
+    className: cx('ui-shared__ripple', className),
+    "data-test-id": "Ripple",
+    onClick: handleClick,
+    style: containerStyle,
+    children: [hasRipples ? /*#__PURE__*/_jsx("div", {
+      className: classes.container,
+      children: ripples
+    }) : null, children]
+  });
+  /* eslint-enable jsx-a11y/click-events-have-key-events,
+  jsx-a11y/no-static-element-interactions */
+};
 Ripple.defaultProps = {
   className: '',
   color: themeConfig.colors.dark,

package/RippleButton/index.js

@@ -1,75 +1,78 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import BaseButton from '@shopgate/pwa-common/components/Button';
+import { makeStyles, cx } from '@shopgate/engage/styles';
 import Ripple from "../Ripple";
 import Button from "../Button";
-import style from "../Button/style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  contentWrapper: {
+    padding: theme.spacing(0, 2, 0)
+  }
+}));
 
 /**
  * The ripple button component is a special derivation of the basic button component
  * that adds a ripple effect when clicked.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-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}
-   */
-  _proto.render = function render() {
-    if (this.props.disabled) {
-      // Don't show the ripple effect when the button is disabled.
-      return /*#__PURE__*/_jsx(Button, {
-        ...this.buttonProps,
-        wrapContent: true,
-        children: this.props.children
-      });
-    }
-    const rippleProps = {
-      className: `${style.contentWrapper} ${this.props.rippleClassName}`,
-      fill: true,
-      size: this.props.rippleSize,
-      overflow: true
-    };
+const RippleButton = ({
+  children,
+  className,
+  disabled,
+  flat,
+  onClick,
+  rippleClassName,
+  rippleSize,
+  testId,
+  type,
+  'aria-label': ariaLabel,
+  'aria-haspopup': ariaHaspopup
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const buttonProps = {
+    className: `${className} ui-shared__ripple-button`,
+    disabled,
+    onClick,
+    flat,
+    type,
+    wrapContent: false,
+    'aria-label': ariaLabel,
+    'aria-haspopup': ariaHaspopup
+  };
+  if (disabled) {
     return /*#__PURE__*/_jsx(Button, {
-      ...this.buttonProps,
-      testId: this.props.testId,
-      children: /*#__PURE__*/_jsx(Ripple, {
-        ...rippleProps,
-        children: this.props.children
-      })
+      ...buttonProps,
+      wrapContent: true,
+      children: children
     });
+  }
+  const rippleProps = {
+    className: cx(classes.contentWrapper, rippleClassName),
+    fill: true,
+    size: rippleSize,
+    overflow: true
   };
-  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);
+  return /*#__PURE__*/_jsx(Button, {
+    ...buttonProps,
+    testId: testId,
+    children: /*#__PURE__*/_jsx(Ripple, {
+      ...rippleProps,
+      children: children
+    })
+  });
+};
 RippleButton.defaultProps = {
-  ...Button.defaultProps,
+  ...BaseButton.defaultProps,
+  className: '',
+  flat: false,
+  type: 'primary',
+  wrapContent: true,
+  testId: 'Button',
   rippleClassName: '',
-  rippleSize: null,
-  testId: 'Button'
+  rippleSize: null
 };
 export default RippleButton;

package/RippleButton/spec.js

@@ -1,25 +1,27 @@
 import trim from 'lodash/trim';
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import Button from '@shopgate/pwa-common/components/Button';
+import { mount } from 'enzyme';
+import BaseButton 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__*/_jsx(RippleButton, {
+    const wrapper = mount(/*#__PURE__*/_jsx(RippleButton, {
       children: "Press me"
     }));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
+    expect(wrapper.find(Ripple).text()).toEqual('Press me');
   });
   it('should render as a regular ripple button if type is explicitly defined', () => {
     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`);
+    const base = wrapper.find(BaseButton);
+    expect(base.exists()).toBe(true);
+    expect(trim(base.props().className)).toMatch(/^ui-shared__button /);
+    expect(trim(base.props().className)).toContain('ui-shared__ripple-button');
     expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
     expect(wrapper).toMatchSnapshot();
   });
@@ -28,7 +30,9 @@ describe('<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`);
+    const base = wrapper.find(BaseButton);
+    expect(trim(base.props().className)).toMatch(/^ui-shared__button /);
+    expect(trim(base.props().className)).toContain('ui-shared__ripple-button');
     expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
     expect(wrapper).toMatchSnapshot();
   });
@@ -37,7 +41,9 @@ describe('<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`);
+    const base = wrapper.find(BaseButton);
+    expect(trim(base.props().className)).toMatch(/^ui-shared__button /);
+    expect(trim(base.props().className)).toContain('ui-shared__ripple-button');
     expect(wrapper.find(Ripple).render().text()).toEqual('Press me');
     expect(wrapper).toMatchSnapshot();
   });
@@ -46,7 +52,7 @@ describe('<RippleButton />', () => {
       disabled: true,
       children: "Press me"
     }));
-    expect(wrapper.find(Button).props().disabled).toBe(true);
+    expect(wrapper.find(BaseButton).props().disabled).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });
 });

package/ScannerOverlay/components/CameraOverlay/index.js

@@ -1,17 +1,61 @@
 import React from 'react';
 import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
 import { SCANNER_CAMERA } from '@shopgate/pwa-common-commerce/scanner/constants/Portals';
-import styles from "./style";
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const edgeHeight = 45;
+const edgeWidth = 35;
+const edgeBorderWidth = 3;
+const useStyles = makeStyles()(theme => ({
+  root: {
+    height: '90%',
+    width: '100%',
+    ':before,:after,>:before,>:after': {
+      display: 'block',
+      content: '""',
+      width: edgeWidth,
+      height: edgeHeight,
+      position: 'absolute',
+      borderStyle: 'solid',
+      borderColor: themeColors.light
+    },
+    ':before': {
+      top: theme.spacing(8),
+      left: theme.spacing(4),
+      borderWidth: `${edgeBorderWidth}px 0 0 ${edgeBorderWidth}px`
+    },
+    ':after': {
+      top: theme.spacing(8),
+      right: theme.spacing(4),
+      borderWidth: `${edgeBorderWidth}px ${edgeBorderWidth}px 0 0`
+    },
+    '>:before': {
+      bottom: theme.spacing(8),
+      left: theme.spacing(4),
+      borderWidth: `0 0 ${edgeBorderWidth}px ${edgeBorderWidth}px`
+    },
+    '>:after': {
+      bottom: theme.spacing(8),
+      right: theme.spacing(4),
+      borderWidth: `0 ${edgeBorderWidth}px ${edgeBorderWidth}px 0`
+    }
+  }
+}));
 
 /**
- * @returns {JSX}
+ * @returns {JSX.Element}
  */
-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", {})
-  })
-});
+const CameraOverlay = () => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: SCANNER_CAMERA,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.root,
+      children: /*#__PURE__*/_jsx("div", {})
+    })
+  });
+};
 export default CameraOverlay;