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

Shopgate's ENGAGE library.

function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}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";var 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}
 */var QuantityPicker=function QuantityPicker(_ref){var conditioner=_ref.conditioner,setQuantity=_ref.setQuantity,stock=_ref.stock;triggerDeprecation();var _useState=useState(false),_useState2=_slicedToArray(_useState,2),opened=_useState2[0],setOpened=_useState2[1];var _useState3=useState(null),_useState4=_slicedToArray(_useState3,2),resolveValue=_useState4[0],setResolveValue=_useState4[1];var _useState5=useState(null),_useState6=_slicedToArray(_useState5,2),promiseResolve=_useState6[0],setPromiseResolve=_useState6[1];/**
   * Handle select quantity
   * @param {number} quantity quantity
   */var handleSelectQuantity=function handleSelectQuantity(quantity){setQuantity(quantity);setResolveValue(true);setOpened(false);};/**
   * Handle close / cancel sheet
   */var handleCloseSheet=function handleCloseSheet(){if(resolveValue){return;}setResolveValue(false);setOpened(false);};/**
   * Open sheet to select quantity,
   * wait user selection before proceed
   * @returns {Promise<any>}
   */var checkQuantity=function checkQuantity(){return new Promise(function(resolve){// Set resolve function
setPromiseResolve(function(){return resolve;});// Open sheet
setOpened(true);});};// Mount effect
useEffect(function(){// Add most late conditioner
conditioner.addConditioner('product-quantity',checkQuantity,100);},[conditioner]);// Update resolveValue effect
useEffect(function(){if(resolveValue===null){return;}if(promiseResolve){promiseResolve(resolveValue);}setResolveValue(null);},[promiseResolve,resolveValue]);var styles=useWidgetStyles('@shopgate/engage/product/QuantityPicker');var quantityRange=useQuantityRange(stock);if(!stock){return null;}var min=quantityRange.min,max=quantityRange.max;var items=Array(max-min+1).fill(min).map(function(v,index){return String(v+index);});return React.createElement(SheetDrawer,{title:React.createElement(I18n.Text,{string:"product.quantity"}),isOpen:opened,onClose:handleCloseSheet,contentClassName:css(styles.sheet).toString()},React.createElement(SheetList,null,items.map(function(item){return React.createElement(SheetList.Item,{title:item,key:item,onClick:function onClick(){return handleSelectQuantity(parseInt(item,10));}});})));};QuantityPicker.defaultProps={stock:null};export default QuantityPicker;