@shopgate/engage/components/Picker/index.js

Shopgate's ENGAGE library.

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;}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 _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);}import React,{Component}from'react';import PropTypes from'prop-types';import{ConnectedReactPortal}from'@shopgate/engage/components';import{withForwardedRef}from"../../core";import PickerModal from"./components/Modal";import PickerButton from"./components/Button";import PickerList from"./components/List";/**
 * 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){if(item!==null&&typeof item!=='undefined'){var itemDefaults={value:item.value||item,label:item.label||item.value||item,disabled:item.disabled||false};if(_typeof(item)==='object'){return _extends({},itemDefaults,{},item);}return itemDefaults;}return null;};/**
 * Finds an item index in a list of items by value.
 * @param {Array} items - The list of items.
 * @param {*} value - The value to look for.
 * @returns {number} The found item index or undefined.
 */var findItemIndexByValue=function findItemIndexByValue(items,value){return items.map(normalizeItem).findIndex(function(item){return item.value===value;});};/**
 * The picker component (acts like a selectbox).
 */var Picker=/*#__PURE__*/function(_Component){/**
   * The constructor.
   * @param {Object} props - The component props.
   */function Picker(props){var _this2;_classCallCheck(this,Picker);_this2=_callSuper(this,Picker,[props]);/**
   * Triggers the onChange callback if the selected value has changed.
   * @param {Object} nextValue - The value the user picked.
   */_defineProperty(_this2,"triggerChangeCallback",function(nextValue){var nextSelectedIndex=findItemIndexByValue(_this2.props.items,nextValue);if(nextSelectedIndex>-1&&_this2.state.selectedIndex!==nextSelectedIndex){_this2.props.onChange(nextValue);}_this2.props.onSelect(nextValue);});/**
   * Triggers the onChange callback if the selected value has changed.
   * @param {Object} nextOpenState - The value the user picked.
   */_defineProperty(_this2,"triggerCloseCallback",function(nextOpenState){if(_this2.state.isOpen&&!nextOpenState){_this2.props.onClose();}});/**
   * Gets called when a new item is selected
   * @param {string} value - The selected value.
   */_defineProperty(_this2,"handleItemSelect",function(value){_this2.triggerChangeCallback(value);_this2.setState({selectedIndex:findItemIndexByValue(_this2.props.items,value)});});/**
   * Sets or toggles the open state of the component.
   * @param {boolean} [open] New open state.
   */_defineProperty(_this2,"toggleOpenState",function(open){_this2.setState(function(_ref){var isOpen=_ref.isOpen;var nextIsOpen=typeof open==='boolean'?open:!isOpen;_this2.triggerCloseCallback(nextIsOpen);return{isOpen:nextIsOpen};});});_this2.state={selectedIndex:findItemIndexByValue(props.items,props.value),isOpen:props.isOpen};return _this2;}/**
   * Updates the selected item when the value prop changes.
   * @param {Object} nextProps - The next props.
   */_inherits(Picker,_Component);return _createClass(Picker,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Only update if a value is present and also changed.
if(!this.selectedItem||nextProps.value!==this.selectedItem.value){this.setState({selectedIndex:findItemIndexByValue(nextProps.items,nextProps.value)});}if(this.props.isOpen!==nextProps.isOpen&&nextProps.isOpen!==this.state.isOpen){this.setState({isOpen:nextProps.isOpen});}}/**
   * Getter for the selected item.
   */},{key:"selectedItem",get:function get(){return normalizeItem(this.props.items[this.state.selectedIndex]);}},{key:"render",value:/**
   * Renders the component.
   * @returns {JSX}
   */function render(){var _this3=this;var hasSelection=!!this.selectedItem;var buttonValue=hasSelection?this.selectedItem.label:'';var buttonLabel=hasSelection?this.props.label:this.props.placeholder;var buttonProps=_extends({},this.props.buttonProps,{label:buttonLabel,value:buttonValue,disabled:this.props.disabled,openList:this.props.disabled?null:function(){_this3.toggleOpenState(true);}});var modalProps={isOpen:this.state.isOpen,duration:this.props.duration,onClose:function onClose(){return _this3.toggleOpenState(false);}};var listProps={items:this.props.items.map(normalizeItem),selectedIndex:this.state.selectedIndex,onSelect:this.handleItemSelect};return React.createElement("div",{role:"button",className:"".concat(this.props.className," engage__picker"),ref:this.props.forwardedRef,tabIndex:0,"aria-haspopup":true},React.createElement(this.props.buttonComponent,buttonProps),React.createElement(ConnectedReactPortal,{onClose:function onClose(){return _this3.toggleOpenState(false);},isOpened:true},React.createElement(this.props.modalComponent,modalProps,React.createElement(this.props.listComponent,listProps))));}}]);}(Component);_defineProperty(Picker,"defaultProps",{buttonComponent:PickerButton,buttonProps:{},duration:300,disabled:false,forwardedRef:null,label:'',listComponent:PickerList,modalComponent:PickerModal,className:'',isOpen:false,items:[],onChange:function onChange(){},onClose:function onClose(){},onSelect:function onSelect(){},placeholder:'Pick ...',value:null});export default withForwardedRef(Picker);