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

Shopgate's ENGAGE library.

function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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;}import*as React from'react';import{i18n}from'@shopgate/engage/core';import QuantityInput from'@shopgate/engage/components/QuantityInput';import{inputStyle}from"./CartItemQuantityPicker.style";/**
 * The Quantity Picker component.
 */export var CartItemQuantityPicker=/*#__PURE__*/function(_React$Component){/**
   * Constructor.
   * @param {Object} props The component props.
   */function CartItemQuantityPicker(props){var _this2;_classCallCheck(this,CartItemQuantityPicker);_this2=_callSuper(this,CartItemQuantityPicker,[props]);/**
   * The default quantity.
   * @type {number}
   */_defineProperty(_this2,"defaultQuantity",1);/**
   * Event handler for the the onClick event of the input.
   * @param {Object} event The event object.
   */_defineProperty(_this2,"handleInputClick",function(event){// Prevent the native focus event ...
event.stopPropagation();event.preventDefault();if(_this2.props.onToggleEditMode){_this2.props.onToggleEditMode(true);}});/**
   * Event handler for the onFocus event of the input.
   */_defineProperty(_this2,"handleInputFocus",function(){if(_this2.props.onToggleEditMode){_this2.props.onToggleEditMode(true);}});/**
   * Event handler for the onSubmit event of the form which wraps the input.
   * @param {Object} event The event object.
   */_defineProperty(_this2,"handleSubmitForm",function(event){event.preventDefault();if(_this2.input.current){_this2.input.current.blur();}});/**
   * Event handler for the the onBlur event of the input.
   * @param {Object} event The event object.
   * @param {number} newQuantity The event object.
   */_defineProperty(_this2,"handleInputBlur",function(event,newQuantity){var onChange=_this2.props.onChange;// Deactivate the edit mode
if(_this2.props.onToggleEditMode){_this2.props.onToggleEditMode(false);}if(_this2.props.quantity!==newQuantity){if(onChange){onChange(newQuantity);}}});_this2.regex=/^([0-9.,]+)$/;_this2.input=React.createRef();return _this2;}/**
   * Called after mount. Focuses the input if the edit mode is active.
   */_inherits(CartItemQuantityPicker,_React$Component);return _createClass(CartItemQuantityPicker,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.editMode&&this.input.current){this.input.current.focus();}if(this.input.current){/**
       * Prevent the opening of the context menu when this
       * input is focused and the value is selected.
       */this.input.current.addEventListener('contextmenu',function(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.
   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.input.current){if(nextProps.editMode){this.input.current.focus();}else{this.input.current.blur();}}}},{key:"initialQuantity",get:/**
   * Returns the initial quantity based on the props.
   * If the props are set to 0 or lower, it will fall back to 1.
   * @return {number}
   */function get(){if(this.props.quantity&&(this.props.quantity===0||this.props.quantity<this.defaultQuantity)){return this.defaultQuantity;}return this.props.quantity||this.defaultQuantity;}},{key:"render",value:/**
   * Renders the component.
   * @return {JSX}
   */function render(){var _this$props=this.props,unit=_this$props.unit,hasCatchWeight=_this$props.hasCatchWeight;var hasCustomUnit=unit&&hasCatchWeight||false;return React.createElement("form",{onSubmit:this.handleSubmitForm,className:"theme__cart__product__quantity-picker"},React.createElement(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')}));}}]);}(React.Component);_defineProperty(CartItemQuantityPicker,"defaultProps",{editMode:false,onChange:function onChange(){},unit:null,quantity:1,onToggleEditMode:function onToggleEditMode(){},disabled:false,hasCatchWeight:false});