@shopgate/engage/product/components/ProductCharacteristics/index.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 _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);}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 React,{Component}from'react';import PropTypes from'prop-types';import isMatch from'lodash/isMatch';import isEqual from'lodash/isEqual';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{responsiveCondition}from'@shopgate/engage/styles';import connect from"./connector";import VariantsContext from"./context";import{isCharacteristicEnabled,getSelectedValue,prepareState,selectCharacteristics}from"./helpers";/**
 * The ProductCharacteristics component.
 */var ProductCharacteristics=/*#__PURE__*/function(_Component){function ProductCharacteristics(_props){var _this2;_classCallCheck(this,ProductCharacteristics);_this2=_callSuper(this,ProductCharacteristics,[_props]);/**
   * Sets the refs to the characteristics selects.
   * @param {Object} props The props to check against.
   */_defineProperty(_this2,"setRefs",function(props){var variants=props.variants;if(variants){variants.characteristics.forEach(function(_char){_this2.refsStore[_char.id]=React.createRef();});}});/**
   * Checks if all selections have been made.
   * @return {boolean}
   */_defineProperty(_this2,"checkSelection",function(){var characteristics=_this2.state.characteristics;var _this2$props=_this2.props,variants=_this2$props.variants,variantId=_this2$props.variantId;if(!variants){return true;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});var selected=!!(filteredValues.length===variants.characteristics.length&&variantId);if(!selected){var firstUnselected=_this2.findUnselectedCharacteristic();if(firstUnselected){var ref=_this2.refsStore[firstUnselected.id];// Focus the item for screen readers and broadcast a related live message.
ref.current.focus();var option=ref.current.innerText;broadcastLiveMessage('product.pick_option_first',{params:{option:option}});if(responsiveCondition('>xs',{webOnly:true})){ref.current.scrollIntoView({behavior:'smooth',block:'center'});}else{ref.current.scrollIntoView({behavior:'smooth'});}_this2.setState({highlight:firstUnselected.id});}}return selected;});_defineProperty(_this2,"checkSelectedCharacteristics",function(){var characteristics=_this2.state.characteristics;var _this2$props2=_this2.props,variantId=_this2$props2.variantId,variants=_this2$props2.variants,finishTimeout=_this2$props2.finishTimeout;if(!variants){return;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});if(filteredValues.length!==variants.characteristics.length){return;}var products=variants.products.filter(function(product){return isMatch(product.characteristics,characteristics);});if(!products.length){return;}if(products[0].id===variantId){return;}setTimeout(function(){_this2.props.navigate(products[0].id);},finishTimeout);});/**
   * Stores a selected characteristic into the local state.
   * @param {Object} selection The selected item.
   */_defineProperty(_this2,"handleSelection",function(selection){var _this2$props3=_this2.props,variants=_this2$props3.variants,setCharacteristics=_this2$props3.setCharacteristics;var id=selection.id,value=selection.value;_this2.setState(function(_ref){var characteristics=_ref.characteristics;var state=prepareState(id,value,characteristics,variants.characteristics,variants.products);setCharacteristics(state);return{characteristics:_extends({},state),highlight:null};},_this2.checkSelectedCharacteristics);});/**
   * @param {Object} selections The selections stored in the state.
   * @param {string} charId The current characteristic ID.
   * @param {Array} values The characteristic values.
   * @param {number} charIndex The characteristic index.
   * @param {string|null} selectedValue selectedValue
   * @param {boolean} charDisabled Whether the characteristic for the values is disabled
   * @return {Array}
   */_defineProperty(_this2,"buildValues",function(selections,charId,values,charIndex,selectedValue,charDisabled){// If this is the first characteristic then all values are selectable.
if(charIndex===0){return values.map(function(value){return _extends({},value,{selectable:!charDisabled,selected:selectedValue===value.id});});}var variants=_this2.props.variants;var subset={};Object.keys(selections).forEach(function(item,index){if(index<charIndex){subset[item]=selections[item];}});// Filter products that match or partially match the current characteristic selection.
var products=variants.products.filter(function(_ref2){var characteristics=_ref2.characteristics;return isMatch(characteristics,subset);});// Check if any of the values are present inside any of the matching products.
return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:charDisabled?false:selectable,selected:selectedValue===value.id});});});/**
   * Resets the highlight state
   */_defineProperty(_this2,"resetHighlight",function(){_this2.setState({highlight:null});});_this2.refsStore={};var _characteristics=selectCharacteristics(_props);_this2.state={highlight:null,characteristics:_characteristics};_props.setCharacteristics(_characteristics);_this2.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this2.checkSelection);return _this2;}/** @inheritDoc */_inherits(ProductCharacteristics,_Component);return _createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
   * @param {Object} nextProps The next component props.
   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.variants&&nextProps.variants){// Initialize refs and characteristics when the variants prop was updated with a valid value.
this.setRefs(nextProps);var characteristics=selectCharacteristics(nextProps);this.setState({characteristics:characteristics},this.checkSelectedCharacteristics);// Inform parent component about potential updates e.g. preselected characteristic values
nextProps.setCharacteristics(characteristics);}else if(nextProps.characteristics&&!isEqual(this.state.characteristics,nextProps.characteristics)){// Sync back characteristics from parent if set
this.setState({characteristics:nextProps.characteristics});}}},{key:"findUnselectedCharacteristic",value:/**
   * Finds the first unselected characteristic.
   * @return {Object|null}
   */function findUnselectedCharacteristic(){var characteristics=this.state.characteristics;var unselected=this.props.variants.characteristics.filter(function(_char2){return!characteristics.hasOwnProperty(_char2.id);});if(unselected.length){return unselected[0];}return null;}},{key:"render",value:/**
   * @return {JSX}
   */function render(){var _this3=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this3.buildValues(characteristics,_char3.id,_char3.values,index,selected,disabled);return _this3.props.render({charRef:_this3.refsStore[_char3.id],disabled:disabled,highlight:_this3.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
select:_this3.handleSelection,selected:selected,values:values,resetHighlight:_this3.resetHighlight});}));}}]);}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null,characteristics:null/**
   * @param {Object} props The component props.
   */});export default connect(ProductCharacteristics);