react-dropdown-advanced/components/DropDownMenu.js

An advanced pure React Dropdown control with many customisable options.

"use strict";var _createClass=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),ReactDOM=require("react-dom"),DropDownItems_1=require("./DropDownItems"),__utils=require("../utils"),DropDownMenu=function(e){function n(e){_classCallCheck(this,n);var t=_possibleConstructorReturn(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.isOpen=!1,t._usingFontAwesomeImages=!0,t.asyncCallback=function(e){setTimeout(function(){return e()})},t.state={listVisible:!1,dropDownItems:[],element:t.props.__element},t.props.__closeHelper&&(t.props.__closeHelper.acceptClose=function(){return t.hide()}),t.show=t.show.bind(t),t.hide=t.hide.bind(t),t}return _inherits(n,React.Component),_createClass(n,[{key:"componentDidMount",value:function(){null!=this.state.element&&(this.props.openOnCreate?this.doShowNow():this.attachClick())}},{key:"componentWillUnmount",value:function(){}},{key:"componentDidUpdate",value:function(e,t){}},{key:"hasFontAwesomeImgType",value:function(){return null!=this.getAllActionItems().find(function(e){return e.isLeftImgFontAwesome()})}},{key:"hasOptionItems",value:function(){return null!=this.state.dropDownItems.find(function(e){return e.isOptionItem})}},{key:"showingImages",value:function(){var e=null!=this.getAllActionItems().find(function(e){return e.hasImg}),t=0<this.getAllOptionItems().length;return e||t}},{key:"getAllActionItems",value:function(){return this.state.dropDownItems.filter(function(e){return e.isActionItem})}},{key:"getAllOptionItems",value:function(){return this.state.dropDownItems.filter(function(e){return e.isOptionItem})}},{key:"getCheckedOptionItems",value:function(){return this.getAllOptionItems().filter(function(e){return e.isChecked})}},{key:"toggle",value:function(t){if(0==t.groupBy.length)t.toggle();else{if(t.isChecked)return;t.toggle(),this.getAllOptionItems().filter(function(e){return e!=t&&e.groupBy==t.groupBy}).forEach(function(e){return e.isChecked=!1})}}},{key:"select",value:function(e,t){if(t.preventDefault(),t.stopImmediatePropagation(),!(e.isHeaderItem||e.isSeperatorItem||e.isDisabled)){if(e.isActionItem&&t.target.className.includes("img-right")&&(e.asActionItem(e).clickedImage=t.target.dataset.imgRight||""),e.isOptionItem){var n=e;this.toggle(n),this.raiseOnChecked(n),this.forceUpdate()}if(e.isActionItem){var i=e;i.clicked&&i.clicked(i)}this.raiseOnClicked(e),(this._lastItem=e).isActionItem&&this.props.closeOnActionItemClick&&this.hide(),e.isOptionItem&&this.props.closeOnOptionItemClick&&this.hide()}}},{key:"mouseEnter",value:function(e,t){t.nativeEvent.stopImmediatePropagation(),e.isSeperatorItem||this.raiseOnHover(e)}},{key:"mouseLeave",value:function(e,t){t.nativeEvent.stopImmediatePropagation(),this.raiseOnHover(null)}},{key:"show",value:function(){this.setState({listVisible:!0,dropDownItems:this.getItems()}),document.addEventListener("click",this.hide)}},{key:"hide",value:function(){if(this.setState({listVisible:!1}),document.removeEventListener("click",this.hide),this.raiseOnClosed(),this.props.openOnCreate&&this.props.__element){var e=this.props.__element.getElementsByClassName("dd-menu-new");[].concat(_toConsumableArray(e)).forEach(function(e){return e.remove()})}}},{key:"raiseOnOpened",value:function(){var e=this;this.isOpen=!0,this.asyncCallback(function(){return e.props.onOpened()})}},{key:"raiseOnClosed",value:function(){var e=this;this.isOpen=!1,this.asyncCallback(function(){return e.props.onClose(e._lastItem,e.getCheckedOptionItems(),e.getAllOptionItems())})}},{key:"raiseOnClicked",value:function(e){var t=this;this.asyncCallback(function(){return t.props.onClick(e,t.getCheckedOptionItems(),t.getAllOptionItems())})}},{key:"raiseOnChecked",value:function(e){var t=this;this.asyncCallback(function(){return t.props.onChecked(e,t.getCheckedOptionItems(),t.getAllOptionItems())})}},{key:"raiseOnHover",value:function(e){var t=this;this.asyncCallback(function(){return t.props.onHover(e)})}},{key:"getItems",value:function(){var t=this,e=[];return 0<this.props.items.length&&(e=this.props.items),this.props.getItems&&(e=this.props.getItems()),this.props.getItemsAsync&&this.props.getItemsAsync().then(function(e){t.state.listVisible||(e.length=0),t.setState({dropDownItems:e})}),0!=e.length||this.props.getItemsAsync||e.push(new DropDownItems_1.ActionItem("a","No items provided!")),e}},{key:"getDropDownClass",value:function(){var e=this.props.direction;return e==DropDownItems_1.DropDownDirection.DownLeft?"down-left":e==DropDownItems_1.DropDownDirection.DownRight?"down-right":e==DropDownItems_1.DropDownDirection.UpLeft?"up-left":e==DropDownItems_1.DropDownDirection.UpRight?"up-right":void 0}},{key:"getStyle",value:function(){var e=window.getComputedStyle(this.state.element);(""==e.position||"static"==e.position)&&this.props.setRelativePosition&&(this.state.element.style.position="relative");var t,n,i,o,s="relative"==e.position,r="absolute"==e.position,l=__utils.getCoords(this.state.element);s||r?(t={position:"absolute",top:l.height+"px",right:"0px"},n={position:"absolute",top:l.height+"px",left:"0px"},i={position:"absolute",bottom:l.height+"px",right:"0px"},o={position:"absolute",bottom:l.height+"px",left:"0px"}):(t={position:"fixed",top:l.bottom+"px",right:l.rightFromWindow+"px"},n={position:"fixed",top:l.bottom+"px",left:l.left+"px"},i={position:"fixed",bottom:l.topFromWindow+"px",right:l.rightFromWindow+"px"},o={position:"fixed",bottom:l.topFromWindow+"px",left:l.left+"px"});var a=this.props.direction;return a==DropDownItems_1.DropDownDirection.UpLeft?i:a==DropDownItems_1.DropDownDirection.UpRight?o:a==DropDownItems_1.DropDownDirection.DownLeft?t:a==DropDownItems_1.DropDownDirection.DownRight?n:void 0}},{key:"attachClick",value:function(){var e=this;this.state.element.addEventListener("click",function(){e.doShowNow()})}},{key:"doShowNow",value:function(){var e=this;this.isOpen||(this.raiseOnOpened(),setTimeout(function(){e.show()}))}},{key:"lookForParent",value:function(e){var t=this;e&&this.setState({element:e.parentElement},function(){return t.attachClick()})}},{key:"dealWithItemClick",value:function(e,t){var n=this;e&&e.addEventListener("click",function(e){n.select(t,e)})}},{key:"renderListItems",value:function(){var n=this;if(!this.state.listVisible)return null;var e="";return this.showingImages()&&this.props.alignText&&(e=this.hasFontAwesomeImgType()||this.hasOptionItems()?"increase-left-margin-fa":DropDownItems_1.ActionItem.useMaterialImage24?"increase-left-margin-md-24":"increase-left-margin-md-18"),this.state.dropDownItems.map(function(t){return React.createElement("div",{key:t.key,className:t.ddclass,style:{position:"relative"},ref:function(e){n.dealWithItemClick(e,t)},onMouseEnter:n.mouseEnter.bind(n,t),onMouseLeave:n.mouseLeave.bind(n,t)},t.render(e))})}},{key:"render",value:function(){var t=this;if(null!=this.state.element){var e=this.state.listVisible?this.getStyle():{};return React.createElement("div",{className:"dda-container "+(this.state.listVisible?"show":""),style:e,title:""},React.createElement("div",{className:"dda-dropdown-list "+this.getDropDownClass()},this.renderListItems()))}return React.createElement("div",{ref:function(e){t.lookForParent(e)}}," ")}}]),n}();DropDownMenu.defaultProps={direction:DropDownItems_1.DropDownDirection.DownRight,closeOnActionItemClick:!0,closeOnOptionItemClick:!1,items:[],getItems:void 0,getItemsAsync:void 0,onClick:function(){},onClose:function(){},onChecked:function(){},onOpened:function(){},onHover:function(){},maxHeight:260,alignText:!0,openOnCreate:!1,setRelativePosition:!0},exports.DropDownMenu=DropDownMenu;var DropDownControl=function(){function o(e,t,n,i){_classCallCheck(this,o),this.element=void 0,this.direction=DropDownItems_1.DropDownDirection.DownRight,this.closeOnActionItemClick=!0,this.closeOnOptionItemClick=!1,this.alignText=!0,this.setToRelativePositionIfNotSet=!0,this.__closeHelper=new CloseHelper,this.openOnCreate=!1,this.getItems=void 0,this.items=[],this.element=e,this.items=t||[],this.onClick=n||void 0,this.direction=i||DropDownItems_1.DropDownDirection.DownRight}return _createClass(o,[{key:"close",value:function(){this.__closeHelper.close()}},{key:"createMenu",value:function(){var e=this;setTimeout(function(){return e.createMenu2()},1)}},{key:"createMenu2",value:function(){if("string"==typeof this.element||this.element instanceof String){var e=this.element;if(e.length<=1)throw"Incorrect selector!";if(e.startsWith("#"))this.element=document.getElementById(e.substr(1));else{if(!e.includes("."))throw"You have to identify an element either by #id or .classname(s)";var t=document.querySelectorAll(e);if(1!=t.length)throw 1<t.length?"Multiple targets for DropDownMenu's were identified for class: "+e:"The target for this DropDownMenu could not be identified for class: "+e;this.element=t[0]}}if(!this.element)throw"No element could be found to attach the react-dropdown-advanced to!";var n=document.createElement("div");n.classList.add("dd-menu-new"),this.element.appendChild(n),ReactDOM.render(React.createElement(DropDownMenu,{__element:this.element,__closeHelper:this.__closeHelper,direction:this.direction,alignText:this.alignText,setRelativePosition:this.setToRelativePositionIfNotSet,closeOnActionItemClick:this.closeOnActionItemClick,closeOnOptionItemClick:this.closeOnOptionItemClick,items:this.items,getItems:this.getItems,getItemsAsync:this.getItemsAsync,onClick:this.onClick,onClose:this.onClose,onChecked:this.onChecked,onOpened:this.onOpened,onHover:this.onHover,openOnCreate:this.openOnCreate}),n)}}]),o}();exports.DropDownControl=DropDownControl;var CloseHelper=function(){function e(){_classCallCheck(this,e)}return _createClass(e,[{key:"close",value:function(){this&&this.acceptClose&&this.acceptClose()}}]),e}();exports.CloseHelper=CloseHelper;