@shopgate/pwa-common 7.30.3 → 7.31.0-alpha.1

package/components/ProductCharacteristics/index.js

@@ -1,281 +1,19 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import isMatch from 'lodash/isMatch';
-import { broadcastLiveMessage } from '@shopgate/engage/a11y';
-import { responsiveCondition } from '@shopgate/engage/styles';
-import connect from "./connector";
-import VariantsContext from "./context";
-import { isCharacteristicEnabled, getSelectedValue, prepareState, selectCharacteristics } from "./helpers";
+import React, { useEffect } from 'react';
+import { logger } from '@shopgate/engage/core/helpers';
+import { ProductCharacteristics } from '@shopgate/engage/product/components';
 
 /**
- * The ProductCharacteristics component.
- * @deprecated Please use the component via
- *            `import { ProductCharacteristics } from '@shopgate/engage/product'`
+ * @deprecated Use `import { ProductCharacteristics } from '@shopgate/engage/product/components'`.
+ * @param {Object} props The component props.
+ * @returns {JSX}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-let ProductCharacteristics = /*#__PURE__*/function (_Component) {
-  /**
-   * @param {Object} props The component props.
-   */
-  function ProductCharacteristics(_props) {
-    var _this;
-    _this = _Component.call(this, _props) || this;
-    /**
-     * Sets the refs to the characteristics selects.
-     * @param {Object} props The props to check against.
-     */
-    _this.setRefs = props => {
-      const {
-        variants
-      } = props;
-      if (variants) {
-        variants.characteristics.forEach(char => {
-          _this.refsStore[char.id] = /*#__PURE__*/React.createRef();
-        });
-      }
-    };
-    /**
-     * Checks if all selections have been made.
-     * @return {boolean}
-     */
-    _this.checkSelection = () => {
-      const {
-        characteristics
-      } = _this.state;
-      const {
-        variants,
-        variantId
-      } = _this.props;
-      if (!variants) {
-        return true;
-      }
-      const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
-      const selected = !!(filteredValues.length === variants.characteristics.length && variantId);
-      if (!selected) {
-        const firstUnselected = _this.findUnselectedCharacteristic();
-        if (firstUnselected) {
-          const ref = _this.refsStore[firstUnselected.id];
-
-          // Focus the item for screen readers and broadcast a related live message.
-          ref.current.focus();
-          const option = ref.current.innerText;
-          broadcastLiveMessage('product.pick_option_first', {
-            params: {
-              option
-            }
-          });
-          if (responsiveCondition('>xs', {
-            webOnly: true
-          })) {
-            ref.current.scrollIntoView({
-              behavior: 'smooth',
-              block: 'center'
-            });
-          } else {
-            ref.current.scrollIntoView({
-              behavior: 'smooth'
-            });
-          }
-          _this.setState({
-            highlight: firstUnselected.id
-          });
-        }
-      }
-      return selected;
-    };
-    _this.checkSelectedCharacteristics = () => {
-      const {
-        characteristics
-      } = _this.state;
-      const {
-        variantId,
-        variants,
-        finishTimeout
-      } = _this.props;
-      if (!variants) {
-        return;
-      }
-      const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
-      if (filteredValues.length !== variants.characteristics.length) {
-        return;
-      }
-      const products = variants.products.filter(product => isMatch(product.characteristics, characteristics));
-      if (!products.length) {
-        return;
-      }
-      if (products[0].id === variantId) {
-        return;
-      }
-      setTimeout(() => {
-        _this.props.navigate(products[0].id);
-      }, finishTimeout);
-    };
-    /**
-     * Stores a selected characteristic into the local state.
-     * @param {Object} selection The selected item.
-     */
-    _this.handleSelection = selection => {
-      const {
-        variants,
-        setCharacteristics
-      } = _this.props;
-      const {
-        id,
-        value
-      } = selection;
-      _this.setState(({
-        characteristics
-      }) => {
-        const state = prepareState(id, value, characteristics, variants.characteristics, variants.products);
-        setCharacteristics(state);
-        return {
-          characteristics: {
-            ...state
-          },
-          highlight: null
-        };
-      }, _this.checkSelectedCharacteristics);
-    };
-    /**
-     * @param {Object} selections The selections stored in the state.
-     * @param {string} charId The current characteristic ID.
-     * @param {Array} values The characteristic values.
-     * @param {number} charIndex The characteristic index.
-     * @param {string|null} selectedValue selectedValue
-     * @return {Array}
-     */
-    _this.buildValues = (selections, charId, values, charIndex, selectedValue) => {
-      // If this is the first characteristic then all values are selectable.
-      if (charIndex === 0) {
-        return values.map(value => ({
-          ...value,
-          selectable: true,
-          selected: selectedValue === value.id
-        }));
-      }
-      const {
-        variants
-      } = _this.props;
-      const subset = {};
-      Object.keys(selections).forEach((item, index) => {
-        if (index < charIndex) {
-          subset[item] = selections[item];
-        }
-      });
-
-      // Filter products that match or partially match the current characteristic selection.
-      const products = variants.products.filter(({
-        characteristics
-      }) => isMatch(characteristics, subset));
-
-      // Check if any of the values are present inside any of the matching products.
-      return values.map(value => {
-        const selectable = products.some(({
-          characteristics
-        }) => isMatch(characteristics, {
-          [charId]: value.id
-        }));
-        return {
-          ...value,
-          selectable,
-          selected: selectedValue === value.id
-        };
-      });
-    };
-    /**
-     * Resets the highlight state
-     */
-    _this.resetHighlight = () => {
-      _this.setState({
-        highlight: null
-      });
-    };
-    _this.refsStore = {};
-    _this.state = {
-      highlight: null,
-      characteristics: selectCharacteristics(_props)
-    };
-    _this.setRefs(_props);
-    _props.conditioner.addConditioner('product-variants', _this.checkSelection);
-    return _this;
-  }
-
-  /** @inheritDoc */
-  _inheritsLoose(ProductCharacteristics, _Component);
-  var _proto = ProductCharacteristics.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    this.checkSelectedCharacteristics();
-  }
-
-  /**
-   * @param {Object} nextProps The next component props.
-   */;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.props.variants && nextProps.variants) {
-      // Initialize refs and characteristics when the variants prop was updated with a valid value.
-      this.setRefs(nextProps);
-      this.setState({
-        characteristics: selectCharacteristics(nextProps)
-      }, this.checkSelectedCharacteristics);
-    }
-  };
-  /**
-   * Finds the first unselected characteristic.
-   * @return {Object|null}
-   */
-  _proto.findUnselectedCharacteristic = function findUnselectedCharacteristic() {
-    const {
-      characteristics
-    } = this.state;
-    const unselected = this.props.variants.characteristics.filter(char => !characteristics.hasOwnProperty(char.id));
-    if (unselected.length) {
-      return unselected[0];
-    }
-    return null;
-  }
-
-  /**
-   * @return {JSX}
-   */;
-  _proto.render = function render() {
-    const {
-      characteristics
-    } = this.state;
-    const {
-      variants
-    } = this.props;
-    if (!variants) {
-      return null;
-    }
-    return /*#__PURE__*/_jsx(VariantsContext.Provider, {
-      value: this.state,
-      children: variants.characteristics.map((char, index) => {
-        const disabled = !isCharacteristicEnabled(characteristics, index);
-        const selected = getSelectedValue(char.id, characteristics);
-        const values = this.buildValues(characteristics, char.id, char.values, index, selected);
-        return this.props.render({
-          charRef: this.refsStore[char.id],
-          disabled,
-          highlight: this.state.highlight === char.id,
-          id: char.id,
-          key: char.id,
-          label: char.label,
-          swatch: !!char.swatch,
-          // BETA
-          select: this.handleSelection,
-          selected,
-          values,
-          resetHighlight: this.resetHighlight
-        });
-      })
-    });
-  };
-  return ProductCharacteristics;
-}(Component);
-ProductCharacteristics.defaultProps = {
-  finishTimeout: 0,
-  variantId: null,
-  variants: null
+const DeprecatedProductCharacteristics = props => {
+  useEffect(() => {
+    logger.warn('===== ProductCharacteristics deprecated =====\n' + 'The ProductCharacteristics component ' + '(@shopgate/pwa-common/components/ProductCharacteristics) is deprecated.\n' + 'Please use: import { ProductCharacteristics } from \'@shopgate/engage/product/components\'.\n' + '===================================');
+  }, []);
+  return /*#__PURE__*/_jsx(ProductCharacteristics, {
+    ...props
+  });
 };
-export default connect(ProductCharacteristics);
+export default DeprecatedProductCharacteristics;

package/components/RangeSlider/index.js

@@ -1,262 +1,19 @@
-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';
-import styles from "./style";
-import RangeSliderHandle from "./components/Handle";
-import { generateLinearEasingCallback, generateExponentialEasingCallback, getRangeStyle, getTouchPositionX, getAbsoluteValue, getRelativeValue } from "./helper";
+import React, { useEffect } from 'react';
+import { logger } from '@shopgate/engage/core/helpers';
+import { RangeSlider } from '@shopgate/engage/components';
 
 /**
- * The range slider component.
- * @deprecated Will be remove in v7.0.0.
- *             Please use `import { RangeSlider } from '@shopgate/engage/components'` instead.
+ * @deprecated Use `import { RangeSlider } from '@shopgate/engage/components'` instead.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let RangeSlider = /*#__PURE__*/function (_Component) {
-  /**
-   * Constructor
-   * @param {Object} props The component properties
-   */
-  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;
-
-      // Calculate the relative offset to the handles center
-      const handleDOMElement = event.target;
-      // Get the handles bounding rectangle ...
-      const handleRect = handleDOMElement.getBoundingClientRect();
-      // ... 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;
-    };
-    /**
-     * Processes move events on handles.
-     * @param {Object} event The touch event
-     */
-    _this.handleTouchMove = event => {
-      if (_this.props.min === _this.props.max) {
-        return;
-      }
-      if (_this.draggedHandle === null) {
-        return;
-      }
-      const {
-        offsetWidth,
-        offsetLeft
-      } = _this.domElement;
-      // Calculate the absolute offset where the element was touched...
-      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) {
-        // Right handle dragged
-        if (_this.state.rangeMin < deltaX) {
-          stateUpdate.rangeMax = Math.min(1, deltaX);
-          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - _this.state.rangeMax);
-        } else {
-          // Not in valid range, swap handles
-          _this.draggedHandle = 0;
-          stateUpdate.rangeMax = _this.state.rangeMin;
-          stateUpdate.rangeMin = deltaX;
-          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - _this.state.rangeMin);
-        }
-      } else if (_this.draggedHandle === 0) {
-        // Left handle dragged
-        if (_this.state.rangeMax > deltaX) {
-          stateUpdate.rangeMin = Math.max(0, deltaX);
-          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - _this.state.rangeMin);
-        } else {
-          // Not in valid range, swap handles
-          _this.draggedHandle = 1;
-          stateUpdate.rangeMin = _this.state.rangeMax;
-          stateUpdate.rangeMax = deltaX;
-          _this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - _this.state.rangeMax);
-        }
-      }
-      _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;
-    };
-    /**
-     * Processes outer range touch end events.
-     * @param {Object} event The touch event
-     */
-    _this.handleRangeTouch = event => {
-      const {
-        offsetWidth,
-        offsetLeft
-      } = _this.domElement;
-      const dx = (getTouchPositionX(event) - offsetLeft) / offsetWidth;
-      const d0 = Math.abs(_this.state.rangeMin - dx);
-      const d1 = Math.abs(_this.state.rangeMax - dx);
-      if (d0 < d1) {
-        _this.draggedHandle = 0;
-      } else {
-        _this.draggedHandle = 1;
-      }
-      _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.state = _this.getRange(props);
-    return _this;
-  }
-
-  /**
-   * Sets the global event listeners when component mounts.
-   */
-  _inheritsLoose(RangeSlider, _Component);
-  var _proto = RangeSlider.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    document.addEventListener('touchend', this.handleTouchEnd);
-    document.addEventListener('touchmove', this.handleTouchMove);
-  }
-
-  /**
-   * Updates the component properties.
-   * @param {Object} newProps The new component properties.
-   */;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(newProps) {
-    this.setState(this.getRange(newProps));
-  }
-
-  /**
-   * Removes the global event listeners when component unmounts.
-   */;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('touchend', this.handleTouchEnd);
-    document.removeEventListener('touchmove', this.handleTouchMove);
-  }
-
-  /**
-   * Get the easing function.
-   */;
-  /**
-   * Get range min and max from props.
-   * @param {Object} props The component props.
-   * @returns {Object} The new state
-   */
-  _proto.getRange = function getRange(props) {
-    const {
-      value,
-      min,
-      max
-    } = props;
-    return {
-      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.
-   */
-  _proto.triggerChangeCallback = function triggerChangeCallback() {
-    const {
-      value,
-      onChange,
-      min,
-      max
-    } = this.props;
-    if (!onChange) {
-      return;
-    }
-    const newRange = [getAbsoluteValue(this.ease(this.state.rangeMin), min, max, true), getAbsoluteValue(this.ease(this.state.rangeMax), min, max, true)];
-    if (newRange !== value) {
-      onChange(newRange);
-    }
-  }
-
-  /**
-   * Creates a new handle component.
-   * @param {number} index The index of the component. Must be either 0 or 1.
-   * @returns {JSX}
-   */;
-  _proto.makeHandle = function makeHandle(index) {
-    return /*#__PURE__*/_jsx(RangeSliderHandle, {
-      index: index,
-      onTouchStart: this.handleTouchStart,
-      active: this.draggedHandle === index,
-      classNames: this.props.classNames
-    });
-  }
-
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */;
-  _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__*/_jsx("div", {
-      className: `${this.props.classNames.container || ''} common__range-slider`,
-      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: {},
-  easing: 'linear',
-  factor: 2,
-  max: 100,
-  min: 0,
-  resolution: 1,
-  value: [0, 100],
-  onChange: null
+import { jsx as _jsx } from "react/jsx-runtime";
+const DeprecatedRangeSlider = props => {
+  useEffect(() => {
+    logger.warn('===== RangeSlider deprecated =====\n' + 'The RangeSlider component and its related components ' + '(@shopgate/pwa-common/components/RangeSlider) are deprecated.\n' + 'Please use: import { RangeSlider } from \'@shopgate/engage/components\'.\n' + '===================================');
+  }, []);
+  return /*#__PURE__*/_jsx(RangeSlider, {
+    ...props
+  });
 };
-export default RangeSlider;
+export default DeprecatedRangeSlider;

package/components/Select/components/Item/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  item: {
+    display: 'block'
+  }
+});
 
 /**
  * The select item component.
@@ -8,12 +14,17 @@ import styles from "./style";
  * @param {React.Children} props.children - Some content to display inside.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-const SelectItem = props => /*#__PURE__*/_jsx("div", {
-  className: `${styles} ${props.className}`,
-  onTouchEnd: () => props.onSelect(props.value, props.label),
-  children: props.label
-});
+const SelectItem = props => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.item, props.className),
+    onTouchEnd: () => props.onSelect(props.value, props.label),
+    children: props.label
+  });
+};
 
 /**
  * The component prop types.