@shopgate/engage/product/components/Characteristics/Characteristic/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,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Transition from'react-transition-group/Transition';import{ResponsiveContainer,ArrowDropIcon}from'@shopgate/engage/components';import Sheet from"./components/Sheet";import styles from"./style";import transition from"../transition";/**
 * A single characteristic.
 */var Characteristic=/*#__PURE__*/function(_PureComponent){function Characteristic(){var _this2;_classCallCheck(this,Characteristic);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Characteristic,[].concat(args));_defineProperty(_this2,"state",{highlight:false,sheet:false});/**
   * @param {string} defaultLabel The default button label.
   * @return {string}
   */_defineProperty(_this2,"getButtonLabel",function(defaultLabel){if(!_this2.props.selected){return defaultLabel;}var value=_this2.props.values.find(function(val){return val.id===_this2.props.selected;});return value.label;});/**
   * @param {Object} event The event object.
   */_defineProperty(_this2,"handleButtonClick",function(event){event.preventDefault();if(_this2.props.disabled){return;}_this2.setState({sheet:true});});/**
   * @param {string} valueId The ID of the selected value.
   */_defineProperty(_this2,"handleItemSelection",function(valueId){_this2.props.select({id:_this2.props.id,value:valueId});_this2.closeSheet();});_defineProperty(_this2,"closeSheet",function(){_this2.setState({sheet:false});});_defineProperty(_this2,"sheetDidClose",function(){if(_this2.props.charRef&&_this2.props.charRef.current){// Focus the element that triggered the CharacteristicsSheet after it closes
_this2.props.charRef.current.focus();}});_defineProperty(_this2,"removeHighlight",function(){_this2.setState({highlight:false});});/**
   * Renders the transition contents.
   * @param {string} state The current transition state.
   * @returns {JSX}
   */_defineProperty(_this2,"transitionRenderer",function(state){var _this2$context$i18n=_this2.context.i18n(),__=_this2$context$i18n.__;var _this2$props=_this2.props,disabled=_this2$props.disabled,selected=_this2$props.selected,charRef=_this2$props.charRef,label=_this2$props.label;var translatedLabel=__('product.pick_an_attribute',[label]);var buttonLabel=_this2.getButtonLabel(translatedLabel);var classes=classNames(styles.button,_defineProperty({},styles.buttonDisabled,disabled),'theme__product__characteristic');return React.createElement("div",{role:"button","aria-disabled":disabled,"aria-haspopup":!disabled,tabIndex:0,className:classes,onClick:_this2.handleButtonClick,onKeyDown:function onKeyDown(){},ref:charRef,style:transition[state],"data-test-id":label},selected&&React.createElement("div",{className:"".concat(styles.label," theme__product__characteristic__label")},label),React.createElement("div",_extends({className:"".concat(styles.selection," theme__product__characteristic__selection")},selected&&{'data-selected':true}),buttonLabel),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement("div",{className:styles.arrow},React.createElement(ArrowDropIcon,null))));});return _this2;}_inherits(Characteristic,_PureComponent);return _createClass(Characteristic,[{key:"UNSAFE_componentWillReceiveProps",value:/**
   * @param {Object} nextProps The next component props.
   */function UNSAFE_componentWillReceiveProps(nextProps){this.setState({highlight:nextProps.highlight});}},{key:"render",value:/**
   * @return {JSX}
   */function render(){var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;var _this$props=this.props,id=_this$props.id,selected=_this$props.selected,values=_this$props.values,charRef=_this$props.charRef;var displayLabel=this.props.label;var translatedLabel=__('product.pick_an_attribute',[displayLabel]);return React.createElement(Fragment,null,React.createElement(Transition,{"in":this.state.highlight,timeout:500,onEntered:this.removeHighlight},this.transitionRenderer),React.createElement(Sheet,{charId:id,contextRef:charRef,items:values,label:translatedLabel,onClose:this.closeSheet,onDidClose:this.sheetDidClose,onSelect:this.handleItemSelection,open:this.state.sheet,selectedValue:selected}));}}]);}(PureComponent);_defineProperty(Characteristic,"contextTypes",{i18n:PropTypes.func});_defineProperty(Characteristic,"defaultProps",{selected:null});export default Characteristic;