@shopgate/engage/cart/components/CartItem/CartItemQuantityPicker.js

Shopgate's ENGAGE library.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import PropTypes from 'prop-types';
import { i18n } from '@shopgate/engage/core';
import QuantityInput from '@shopgate/engage/components/QuantityInput';
import { inputStyle } from "./CartItemQuantityPicker.style";

/**
 * @typedef {Object} Props
 * @property {boolean} [editMode]
 * @property {function(number):void} [onChange]
 * @property {function(boolean):void} [onToggleEditMode]
 * @property {number} [quantity]
 * @property {string} [unit]
 * @property {boolean} [disabled]
 * @property {boolean} [hasCatchWeight]
 */

/**
 * The Quantity Picker component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
export let CartItemQuantityPicker = /*#__PURE__*/function (_React$Component) {
  /**
   * Constructor.
   * @param {Object} props The component props.
   */
  function CartItemQuantityPicker(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.input = void 0;
    /**
     * Handles the input click event.
     * @param {Event} event The click event.
     */
    _this.handleInputClick = event => {
      event.stopPropagation();
      event.preventDefault();
      if (_this.props.onToggleEditMode) {
        _this.props.onToggleEditMode(true);
      }
    };
    _this.handleInputFocus = () => {
      if (_this.props.onToggleEditMode) {
        _this.props.onToggleEditMode(true);
      }
    };
    /**
     * Handles the form submission event.
     * @param {Event} event The submit event.
     */
    _this.handleSubmitForm = event => {
      event.preventDefault();
      if (_this.input.current) {
        _this.input.current.blur();
      }
    };
    /**
     * Handles the input blur event.
     * @param {Event} event The blur event.
     * @param {number} newQuantity The new quantity value.
     */
    _this.handleInputBlur = (event, newQuantity) => {
      const {
        onChange
      } = _this.props;
      if (_this.props.onToggleEditMode) {
        _this.props.onToggleEditMode(false);
      }
      if (_this.props.quantity !== newQuantity) {
        if (onChange) {
          onChange(newQuantity);
        }
      }
    };
    _this.input = /*#__PURE__*/React.createRef();
    return _this;
  }

  /**
   * Called after mount. Focuses the input if the edit mode is active.
   */
  _inheritsLoose(CartItemQuantityPicker, _React$Component);
  var _proto = CartItemQuantityPicker.prototype;
  _proto.componentDidMount = function componentDidMount() {
    if (this.props.editMode && this.input.current) {
      this.input.current.focus();
    }
    if (this.input.current) {
      this.input.current.addEventListener('contextmenu', event => {
        event.preventDefault();
        event.stopPropagation();
        return false;
      });
    }
  }

  /**
   * The componentWillReceiveProps lifecycle hook. I will bring the input into the correct state.
   * @param {Object} nextProps The next set of props.
   */;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.input.current) {
      if (nextProps.editMode) {
        this.input.current.focus();
      } else {
        this.input.current.blur();
      }
    }
  };
  /**
   * Renders the component.
   * @return {JSX.Element}
   */
  _proto.render = function render() {
    const {
      unit,
      hasCatchWeight
    } = this.props;
    const hasCustomUnit = unit && hasCatchWeight || false;
    return /*#__PURE__*/_jsx("form", {
      onSubmit: this.handleSubmitForm,
      className: "theme__cart__product__quantity-picker",
      children: /*#__PURE__*/_jsx(QuantityInput, {
        ref: this.input,
        className: inputStyle.toString(),
        value: this.props.quantity,
        onClick: this.handleInputClick,
        onFocus: this.handleInputFocus,
        onBlur: this.handleInputBlur,
        unit: hasCustomUnit ? unit : null,
        maxDecimals: hasCustomUnit ? 2 : 0,
        "data-test-id": "quantityPicker",
        disabled: this.props.disabled,
        "aria-label": i18n.text('product.quantity')
      })
    });
  };
  return CartItemQuantityPicker;
}(React.Component);
/**
 * @type {Props}
 */
CartItemQuantityPicker.defaultProps = {
  editMode: false,
  onChange: () => {},
  unit: null,
  quantity: 1,
  onToggleEditMode: () => {},
  disabled: false,
  hasCatchWeight: false
};