@shopgate/engage/product/components/UnitQuantityPicker/UnitQuantityPicker.js

Shopgate's ENGAGE library.

function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useCallback,useEffect,useState,useRef,useMemo}from'react';import PropTypes from'prop-types';import{i18n,hasNewServices}from'@shopgate/engage/core/helpers';import{UIEvents}from'@shopgate/engage/core';import{useWidgetSettings}from'@shopgate/engage/core/hooks';import{css}from'glamor';import classNames from'classnames';import{themeConfig}from'@shopgate/engage';import{RippleButton,QuantityInput}from'@shopgate/engage/components';import{broadcastLiveMessage}from'@shopgate/engage/a11y/helpers';var variables=themeConfig.variables,colors=themeConfig.colors;var styles={root:css({display:'flex',flexDirection:'row',position:'relative',zIndex:5}).toString(),backdrop:css({zIndex:4,top:0,left:0,height:'100%',width:'100%',position:'fixed'}),inputWrapper:function inputWrapper(_ref){var inputColor=_ref.inputColor,inputBgColor=_ref.inputBgColor;return css(_extends({display:'flex',alignItems:'center',width:'100%',fontSize:16,backgroundColor:"var(--color-background-accent, ".concat(colors.shade8,")")},inputColor&&{color:"".concat(inputColor," !important")},{},inputBgColor&&{backgroundColor:"".concat(inputBgColor," !important")},{' .quantity-label':{paddingLeft:variables.gap.small,paddingRight:4,textAlign:'center',width:'calc(100% - 32px)',textOverflow:'ellipsis',overflow:'hidden',whiteSpace:'nowrap'}}));},input:function input(_ref2){var inputColor=_ref2.inputColor,inputBgColor=_ref2.inputBgColor,hasLabel=_ref2.hasLabel,size=_ref2.size;var fontWeight=size==='large'?600:'normal';return css(_extends({padding:"0 ".concat(variables.gap.small,"px"),textAlign:hasLabel?'left':'center',fontWeight:fontWeight,height:'100%',width:'100%'},inputColor&&{color:"".concat(inputColor)},{},inputBgColor&&{backgroundColor:"".concat(inputBgColor," !important")},{},hasLabel&&{paddingLeft:0},{outline:'none','&:focus:not(:focus-visible)':{outline:'none'}})).toString();},button:function button(_ref3){var _ref3$size=_ref3.size,size=_ref3$size===void 0?'default':_ref3$size,buttonColor=_ref3.buttonColor,buttonBgColor=_ref3.buttonBgColor;var sizeValue=size==='large'?36:28;return css({width:sizeValue,' &&':{minWidth:sizeValue,padding:0},height:sizeValue,fontSize:"".concat(Math.floor(sizeValue/28*100),"% !important"),'&:not(:disabled)':_extends({},buttonColor&&{color:"".concat(buttonColor," !important")},{},buttonBgColor&&{backgroundColor:"".concat(buttonBgColor," !important")})});},buttonRipple:css({padding:0}).toString(),buttonNoRadiusLeft:css({' &&':{borderTopLeftRadius:0,borderBottomLeftRadius:0}}).toString(),buttonNoRadiusRight:css({' &&':{borderTopRightRadius:0,borderBottomRightRadius:0}}).toString(),disabled:css({' > div':{padding:0}}).toString()};/**
 * A Quantity Picker with unit support.
 * @returns {JSX.Element}
 */var UnitQuantityPicker=function UnitQuantityPicker(_ref4){var className=_ref4.className,onChange=_ref4.onChange,value=_ref4.value,allowDecrement=_ref4.allowDecrement,allowIncrement=_ref4.allowIncrement,allowZero=_ref4.allowZero,decrementStep=_ref4.decrementStep,incrementStep=_ref4.incrementStep,maxDecimals=_ref4.maxDecimals,unit=_ref4.unit,disabled=_ref4.disabled,minValue=_ref4.minValue,maxValue=_ref4.maxValue,size=_ref4.size,toggleTabBarOnFocus=_ref4.toggleTabBarOnFocus,quantityLabel=_ref4.quantityLabel;var widgetDefaults=useMemo(function(){if(hasNewServices()){// The widget configuration was introduced with CCP-2449 in PWA6. It's inactive for now
// when running on new services, since for those shops it never existed and the default
// values would introduce breaking changes.
return{};}return{buttonColor:colors.shade8,buttonBgColor:colors.primary,inputColor:colors.dark,inputBgColor:colors.shade8,showLabel:true};},[]);var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker'),_useWidgetSettings$bu=_useWidgetSettings.buttonColor,buttonColor=_useWidgetSettings$bu===void 0?widgetDefaults.buttonColor:_useWidgetSettings$bu,_useWidgetSettings$bu2=_useWidgetSettings.buttonBgColor,buttonBgColor=_useWidgetSettings$bu2===void 0?widgetDefaults.buttonBgColor:_useWidgetSettings$bu2,_useWidgetSettings$in=_useWidgetSettings.inputColor,inputColor=_useWidgetSettings$in===void 0?widgetDefaults.inputColor:_useWidgetSettings$in,_useWidgetSettings$in2=_useWidgetSettings.inputBgColor,inputBgColor=_useWidgetSettings$in2===void 0?widgetDefaults.inputBgColor:_useWidgetSettings$in2,_useWidgetSettings$sh=_useWidgetSettings.showLabel,showLabel=_useWidgetSettings$sh===void 0?widgetDefaults.showLabel:_useWidgetSettings$sh;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isFocused=_useState2[0],setIsFocused=_useState2[1];var inputRef=useRef(null);var handleOnFocus=useCallback(function(){setIsFocused(true);if(toggleTabBarOnFocus){UIEvents.emit('HIDE_TAB_BAR');}},[toggleTabBarOnFocus]);var handleOnBlur=useCallback(function(){setIsFocused(false);if(toggleTabBarOnFocus){UIEvents.emit('SHOW_TAB_BAR');}},[toggleTabBarOnFocus]);var handleManualChange=useCallback(function(newValue){onChange(newValue);var message;if(newValue<value){message='product.decreased_quantity_to';}if(newValue>value){message='product.increased_quantity_to';}if(message){broadcastLiveMessage(message,{params:{quantity:newValue}});}},[onChange,value]);var handleDecrement=useCallback(function(event){var newValue=value-decrementStep;if(newValue<=0&&!allowZero||minValue&&newValue<minValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[allowZero,decrementStep,handleManualChange,minValue,value]);var handleIncrement=useCallback(function(event){var newValue=value+incrementStep;if(maxValue&&newValue>maxValue){newValue=value;}handleManualChange(newValue);event.preventDefault();event.stopPropagation();},[handleManualChange,incrementStep,maxValue,value]);useEffect(function(){if(minValue&&value<minValue){onChange(minValue);}if(maxValue&&value>maxValue){onChange(maxValue);}/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */ /**
   * Handler for pressing "enter" on Android
   */var handleKeyDown=useCallback(function(event){if(event.key==='Enter'&&inputRef.current!==null){try{inputRef.current.blur();}catch(e){// nothing to do here
}}},[]);return React.createElement(React.Fragment,null,isFocused&&// Show hidden backdrop when focused to avoid side effects when user blurs the input
// e.g. opening links unintended
React.createElement("div",{className:styles.backdrop}),React.createElement("div",{className:"".concat(styles.root," ").concat(className)},React.createElement(RippleButton,{type:"secondary",disabled:!allowDecrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button({size:size,buttonColor:buttonColor,buttonBgColor:buttonBgColor}),styles.buttonNoRadiusRight,_defineProperty({},styles.disabled,!allowDecrement||disabled)),onClick:handleDecrement,"aria-label":i18n.text('product.decrease_quantity')},"-"),React.createElement("span",{className:styles.inputWrapper({inputColor:inputColor,inputBgColor:inputBgColor})},quantityLabel&&showLabel&&React.createElement("span",{"aria-hidden":true,className:"quantity-label"},quantityLabel),React.createElement(QuantityInput,{className:styles.input({inputColor:inputColor,inputBgColor:inputBgColor,hasLabel:showLabel&&!!quantityLabel,size:size}),value:value,onChange:onChange,maxDecimals:maxDecimals,unit:unit,disabled:disabled,minValue:minValue,maxValue:maxValue,"aria-label":i18n.text('product.quantity'),onFocus:handleOnFocus,onBlur:handleOnBlur,onKeyDown:handleKeyDown,ref:inputRef})),React.createElement(RippleButton,{type:"secondary",disabled:!allowIncrement||disabled,rippleClassName:styles.buttonRipple,className:classNames(styles.button({size:size,buttonColor:buttonColor,buttonBgColor:buttonBgColor}),styles.buttonNoRadiusLeft,_defineProperty({},styles.disabled,!allowIncrement||disabled)),onClick:handleIncrement,"aria-label":i18n.text('product.increase_quantity')},"+")));};UnitQuantityPicker.defaultProps={className:'',allowZero:false,allowIncrement:true,allowDecrement:true,incrementStep:0.25,decrementStep:0.25,maxDecimals:2,unit:null,disabled:false,minValue:null,size:'default',maxValue:null,quantityLabel:null,toggleTabBarOnFocus:false};export default UnitQuantityPicker;