@shopgate/engage/product/components/QuantityPicker/index.js

Shopgate's ENGAGE library.

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { logger } from "../../../core/helpers";
import { useWidgetStyles } from "../../../core/hooks";
import { I18n, SheetDrawer, SheetList } from "../../../components";
import { useQuantityRange } from "./hooks";
import { jsx as _jsx } from "react/jsx-runtime";
let deprecationWarning = 'QuantityPicker is deprecated in favor of the UnitQuantityPicker component.\nUnitQuantityPicker now additionally supports units and floating point values.';

/** */
function triggerDeprecation() {
  if (deprecationWarning) {
    logger.warn(deprecationWarning);
    deprecationWarning = null;
  }
}

/**
 * The QuantityPicker component.
 * @deprecated Use UnitQuantityPicker to also support different units for quantity.
 * @returns {JSX}
 */
const QuantityPicker = ({
  conditioner,
  setQuantity,
  stock
}) => {
  triggerDeprecation();
  const [opened, setOpened] = useState(false);
  const [resolveValue, setResolveValue] = useState(null);
  const [promiseResolve, setPromiseResolve] = useState(null);

  /**
   * Handle select quantity
   * @param {number} quantity quantity
   */
  const handleSelectQuantity = quantity => {
    setQuantity(quantity);
    setResolveValue(true);
    setOpened(false);
  };

  /**
   * Handle close / cancel sheet
   */
  const handleCloseSheet = () => {
    if (resolveValue) {
      return;
    }
    setResolveValue(false);
    setOpened(false);
  };

  /**
   * Open sheet to select quantity,
   * wait user selection before proceed
   * @returns {Promise<any>}
   */
  const checkQuantity = () => new Promise(resolve => {
    // Set resolve function
    setPromiseResolve(() => resolve);

    // Open sheet
    setOpened(true);
  });

  // Mount effect
  useEffect(() => {
    // Add most late conditioner
    conditioner.addConditioner('product-quantity', checkQuantity, 100);
  }, [conditioner]);

  // Update resolveValue effect
  useEffect(() => {
    if (resolveValue === null) {
      return;
    }
    if (promiseResolve) {
      promiseResolve(resolveValue);
    }
    setResolveValue(null);
  }, [promiseResolve, resolveValue]);
  const styles = useWidgetStyles('@shopgate/engage/product/QuantityPicker');
  const quantityRange = useQuantityRange(stock);
  if (!stock) {
    return null;
  }
  const {
    min,
    max
  } = quantityRange;
  const items = Array(max - min + 1).fill(min).map((v, index) => String(v + index));
  return /*#__PURE__*/_jsx(SheetDrawer, {
    title: /*#__PURE__*/_jsx(I18n.Text, {
      string: "product.quantity"
    }),
    isOpen: opened,
    onClose: handleCloseSheet,
    contentClassName: css(styles.sheet).toString(),
    children: /*#__PURE__*/_jsx(SheetList, {
      children: items.map(item => /*#__PURE__*/_jsx(SheetList.Item, {
        title: item,
        onClick: () => handleSelectQuantity(parseInt(item, 10))
      }, item))
    })
  });
};
QuantityPicker.defaultProps = {
  stock: null
};
export default QuantityPicker;