@shopgate/pwa-common/components/Select/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 styles from"./style";import SelectItem from"./components/Item";var DEFAULT_PLACEHOLDER_TEXT='Select ...';/**
 * Finds an item in a list of items by value.
 * @param {Array} items - The list of items.
 * @param {*} value - The value to look for.
 * @returns {*} The found item or undefined.
 */var findItemByValue=function findItemByValue(items,value){return items.filter(function(item){return item.value===value;}).shift();};/**
 * Converts an item of any type (e.g. string or number)
 * to an object representation containing value and label properties.
 * @param {*} item - An item of any type.
 * @returns {Object} An object representation of the item.
 */var normalizeItem=function normalizeItem(item){return{value:item.value||item,label:item.label||item.value||item};};/**
 * The select component.
 * @param {Object} props - The component props.
 * @param {React.Children} props.children - Some content to display inside.
 */var Select=/*#__PURE__*/function(_Component){/**
   * The constructor.
   * @param {Object} props - The component props.
   */function Select(props){var _this2;_classCallCheck(this,Select);_this2=_callSuper(this,Select,[props]);/**
   * Triggers the onChange callback if the selected value has changed.
   * @param {Object} nextState - The next state.
   */_defineProperty(_this2,"triggerChangeCallback",function(nextState){if(_this2.state.selected&&_this2.state.selected.value===nextState.selected.value){return;}if(_this2.props.onChange instanceof Function){_this2.props.onChange(nextState.selected.value);}});/**
   * Handles any interaction the user does outside of the component.
   * In this case the select gets closed.
   * @param {Event} event - The event of the user interaction (e.g. TouchEvent).
   */_defineProperty(_this2,"handleInteractionOutside",function(event){if(!_this2.domElement.contains(event.target)){_this2.setState({isOpen:false});}});/**
   * Gets called when a new item is selected
   * @param {*} value - The selected value.
   * @param {string} label - The selected label.
   */_defineProperty(_this2,"handleItemSelect",function(value,label){var stateUpdate={selected:{label:label,value:value},isOpen:false};_this2.triggerChangeCallback(stateUpdate);_this2.setState(stateUpdate);});/**
   * Toggles the open state of the component.
   */_defineProperty(_this2,"toggleOpenState",function(){_this2.setState(function(_ref){var isOpen=_ref.isOpen;return{isOpen:!isOpen};});});_this2.state={selected:null,isOpen:false};_this2.domElement=null;if(props.value){_this2.state.selected=normalizeItem(findItemByValue(props.items,props.value));}return _this2;}/**
   * Adds event listener when the component is mounted.
   */_inherits(Select,_Component);return _createClass(Select,[{key:"componentDidMount",value:function componentDidMount(){document.addEventListener('touchstart',this.handleInteractionOutside);}/**
   * Updates the selected item when the value prop changes.
   * @param {Object} nextProps - The next props.
   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.state.selected||nextProps.value!==this.state.selected.value){this.state.selected=normalizeItem(findItemByValue(nextProps.items,nextProps.value));}}/**
   * Removes event listener when the component will unmount.
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){document.removeEventListener('touchstart',this.handleInteractionOutside);}},{key:"render",value:/**
   * Renders the component.
   * @returns {JSX}
   */function render(){var _this3=this;var hasSelection=this.state.selected&&this.state.selected.value!==undefined;var selectedLabel=hasSelection?this.state.selected.label:this.props.placeholder;var items=this.state.isOpen?React.createElement("div",{className:styles.items},this.props.items.map(function(item){var normalizedItem=normalizeItem(item);var selected=hasSelection&&_this3.state.selected.value===normalizedItem.value;return React.createElement(SelectItem,{key:normalizedItem.value,value:normalizedItem.value,label:normalizedItem.label,selected:selected,onSelect:_this3.handleItemSelect});})):null;return React.createElement("div",{className:"".concat(styles.container," ").concat(this.props.className," common_select"),ref:function ref(_ref2){_this3.domElement=_ref2;}},React.createElement("div",{onTouchStart:this.toggleOpenState},React.createElement("span",null,selectedLabel),React.createElement("span",{className:styles.selectHandle},"\u25BE")),items);}}]);}(Component);/**
   * The component prop types.
   * @type {Object}
   */ /**
   * The component default props.
   * @type {Object}
   */_defineProperty(Select,"defaultProps",{className:'',items:[],onChange:function onChange(){},placeholder:DEFAULT_PLACEHOLDER_TEXT,value:null});export default Select;