@shopgate/engage/favorites/components/Item/ItemQuantity.js

Shopgate's ENGAGE library.

import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { connect } from 'react-redux';
import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSettings";
import UnitQuantityPicker from "../../../product/components/UnitQuantityPicker/UnitQuantityPicker";
import { jsx as _jsx } from "react/jsx-runtime";
const styles = {
  root: css({
    width: 120
  })
};

/**
 * @return {Function} The extended component props.
 */
const makeMapStateToProps = () => state => ({
  wishlistItemQuantityEnabled: getWishlistItemQuantityEnabled(state)
});

/**
 *
 * @param {Object} props The component props
 * @returns {JSX}
 */
const ItemQuantity = ({
  wishlistItemQuantityEnabled,
  quantity,
  onChange
}) => {
  const [internalQuantity, setInternalQuantity] = useState(quantity);
  const handleChange = useCallback(newQuantity => {
    setInternalQuantity(newQuantity);
    onChange(newQuantity);
  }, [onChange]);
  useEffect(() => {
    setInternalQuantity(quantity);
  }, [quantity]);
  if (!wishlistItemQuantityEnabled) {
    return null;
  }
  return /*#__PURE__*/_jsx("div", {
    className: styles.root,
    children: /*#__PURE__*/_jsx(UnitQuantityPicker, {
      maxValue: 99,
      minValue: 1,
      maxDecimals: 0,
      incrementStep: 1,
      decrementStep: 1,
      onChange: handleChange,
      value: internalQuantity,
      toggleTabBarOnFocus: true
    })
  });
};
export default connect(makeMapStateToProps)(ItemQuantity);