@shopgate/pwa-common/components/SelectBox/index.js

Common library for the Shopgate Connect PWA.

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 React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import find from'lodash/find';import Dropdown from"../Dropdown";import I18n from"../I18n";import SelectBoxItem from"./components/Item";import styles from"./style";/**
 * The select box component.
 */var SelectBox=/*#__PURE__*/function(_Component){/**
   * Initializes the component.
   * @param {Object} props The components props.
   */function SelectBox(props){var _this2;_classCallCheck(this,SelectBox);_this2=_callSuper(this,SelectBox,[props]);/**
   * When dropdown animation is finished.
   */_defineProperty(_this2,"onDropdownComplete",function(){_this2.dropdownCompleted=true;});/**
   * Handles any interaction the user does outside of the component.
   * In this case the select gets closed.
   * @param {Object} event The event object.
   */_defineProperty(_this2,"handleInteractionOutside",function(event){_this2.setState({isOpen:false});event.preventDefault();event.stopPropagation();});/**
   * Sets the open state to true
   */_defineProperty(_this2,"handleOpenList",function(){if(_this2.state.isOpen){return;}_this2.dropdownCompleted=false;_this2.setState({isOpen:true});if(_this2.firstItemRef){_this2.firstItemRef.focus();}});/**
   * Sets the new active selection.
   * @param {string} value Value of the selected item.
   */_defineProperty(_this2,"handleSelectionUpdate",function(value){var selection=find(_this2.props.items,{value:value});_this2.setState({selected:selection,isOpen:false});// Delay the callback to make sure actions are fired after animations are done.
setTimeout(function(){_this2.props.handleSelectionUpdate(selection.value);},_this2.props.duration);if(_this2.controlRef){_this2.controlRef.focus();}});/** @param {HTMLElement} ref The element */_defineProperty(_this2,"setControlRef",function(ref){_this2.controlRef=ref;});/** @param {HTMLElement} ref The element */_defineProperty(_this2,"setFirstItemRef",function(ref){_this2.firstItemRef=ref;});_this2.dropdownCompleted=false;_this2.state={isOpen:false,selected:find(props.items,{value:props.initialValue})};return _this2;}/**
   * Reset selected when changing the initial value.
    * @param {Object} nextProps The next props the component will receive.
   */_inherits(SelectBox,_Component);return _createClass(SelectBox,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.initialValue!==nextProps.initialValue){this.setState({selected:find(nextProps.items,{value:nextProps.initialValue})});}}},{key:"render",value:/**
   * Renders the component
   * @returns {JSX}
   */function render(){var _this3=this;var Icon=this.props.icon;var _this$props$className=this.props.classNames,icon=_this$props$className.icon,_this$props$className2=_this$props$className.iconOpen,iconOpen=_this$props$className2===void 0?null:_this$props$className2,selection=_this$props$className.selection,button=_this$props$className.button,dropdown=_this$props$className.dropdown,selectItem=_this$props$className.selectItem,selectItemSelected=_this$props$className.selectItemSelected;var buttonLabel=this.state.selected?this.state.selected.label:this.props.defaultText;var iconClasses=classNames(icon,_defineProperty({},iconOpen,this.state.isOpen&&iconOpen!==null));return React.createElement("div",{className:"".concat(this.props.className," common__select-box"),"data-test-id":this.props.testId},React.createElement("button",{className:button,onClick:this.handleOpenList,"data-test-id":buttonLabel,type:"button","aria-haspopup":true,"aria-expanded":this.state.isOpen?true:null,"aria-controls":buttonLabel,ref:this.setControlRef},React.createElement("span",{className:selection},React.createElement(I18n.Text,{string:buttonLabel})),React.createElement("div",{className:iconClasses},React.createElement(Icon,null))),React.createElement(Dropdown,{className:dropdown,isOpen:this.state.isOpen,onComplete:this.onDropdownComplete,duration:this.props.duration},React.createElement("ul",{role:"menu",id:buttonLabel,tabIndex:"-1"},this.props.items.map(function(item){return React.createElement(SelectBoxItem,{classNames:{selectItem:selectItem,selectItemSelected:selectItemSelected},wrapper:_this3.props.item,key:item.value,value:item.value,label:item.label,handleSelectionUpdate:_this3.handleSelectionUpdate,isSelected:buttonLabel===item.label,forwardedRef:buttonLabel===item.label?_this3.setFirstItemRef:null});}))),this.state.isOpen&&React.createElement("button",{className:styles.overlay,onClick:this.handleInteractionOutside,onTouchMove:this.handleInteractionOutside,type:"button","aria-hidden":true}));}}]);}(Component);_defineProperty(SelectBox,"defaultProps",{className:'',classNames:{},duration:225,defaultText:'filter.sort.default',handleSelectionUpdate:function handleSelectionUpdate(){},initialValue:null,testId:null});export default SelectBox;