react-dropdown-advanced/components/DropDownItems.js

An advanced pure React Dropdown control with many customisable options.

"use strict";var _createClass=function(){function r(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,i){return t&&r(e.prototype,t),i&&r(e,i),e}}();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)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(exports,"__esModule",{value:!0});var DropDownDirection,React=require("react"),__utils=require("../utils");!function(e){e[e.DownRight=0]="DownRight",e[e.DownLeft=1]="DownLeft",e[e.UpRight=2]="UpRight",e[e.UpLeft=3]="UpLeft"}(DropDownDirection=exports.DropDownDirection||(exports.DropDownDirection={}));var DropDownItemBase=function(){function t(e){_classCallCheck(this,t),this.key="",this.isDisabled=!1,this.data=void 0,e||(e=__utils.createGuidRight5()),this.key=e}return _createClass(t,[{key:"asActionItem",value:function(e){return e}},{key:"asOptionItem",value:function(e){return e}},{key:"setTitle",value:function(e,t){null!=e&&(e.setAttribute("title",""),e.offsetWidth<e.scrollWidth&&e.setAttribute("title",t))}},{key:"render",value:function(e){return React.createElement("span",{className:"dda-dropdown-item"},"not implemented")}},{key:"isActionItem",get:function(){return this.constructor.toString()===ActionItem.toString()}},{key:"isOptionItem",get:function(){return this.constructor.toString()===OptionItem.toString()}},{key:"isSeperatorItem",get:function(){return this.constructor.toString()===SeperatorItem.toString()}},{key:"isHeaderItem",get:function(){return this.constructor.toString()===HeaderItem.toString()}},{key:"ddclass",get:function(){var e="";return this.isActionItem&&(e="action"),this.isOptionItem&&(e="option"),this.isSeperatorItem&&(e="seperator"),this.isHeaderItem&&(e="header"),this.isDisabled&&(e+=" disabled "),e}}]),t}();exports.DropDownItemBase=DropDownItemBase;var SeperatorItem=function(e){function t(){return _classCallCheck(this,t),_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,""))}return _inherits(t,DropDownItemBase),_createClass(t,[{key:"render",value:function(){return React.createElement("span",{className:"dda-dropdown-item seperator"})}}]),t}();exports.SeperatorItem=SeperatorItem;var HeaderItem=function(e){function i(e){_classCallCheck(this,i);var t=_possibleConstructorReturn(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,""));return t.header="header",t.header=e,t}return _inherits(i,DropDownItemBase),_createClass(i,[{key:"render",value:function(){var t=this;return React.createElement("span",{className:"dda-dropdown-item",ref:function(e){t.setTitle(e,t.header)}},this.header)}}]),i}();exports.HeaderItem=HeaderItem;var DropDownItem=function(e){function r(e,t){_classCallCheck(this,r);var i=_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return i.text="",i.text=t,i}return _inherits(r,DropDownItemBase),r}();exports.DropDownItem=DropDownItem;var ActionItem=function(e){function s(e,t,i,r,n){_classCallCheck(this,s);var a=_possibleConstructorReturn(this,(s.__proto__||Object.getPrototypeOf(s)).call(this,e,t));return a.imageLeft="",a.imageRight=[],a.className="",a.clickedImage="",a.textMarginRight=0,a.imageLeft=i||"",a.isDisabled=r||!1,a.clicked=n,a}return _inherits(s,DropDownItem),_createClass(s,[{key:"isImgFontAwesome",value:function(e){return e.startsWith("fa-")}},{key:"isImgMaterial",value:function(e){return!this.isImgFontAwesome(e)}},{key:"isLeftImgFontAwesome",value:function(){return this.isImgFontAwesome(this.imageLeft)}},{key:"isLeftImgMaterial",value:function(){return this.isImgMaterial(this.imageLeft)}},{key:"addRightImage",value:function(e,t){this.imageRight.push(new RightImageInfo(e,t))}},{key:"ToString",value:function(){return"*ActionItem* "+this.text+" ["+this.key+"]"}},{key:"render",value:function(e){var t=this,i="";0==this.imageLeft.length&&(i=e);var r={};return 0<this.textMarginRight&&(r={marginRight:this.textMarginRight+"px"}),React.createElement("div",{className:"dda-dropdown-item"},this.renderLeftImage(),React.createElement("span",{className:"flex "+i,ref:function(e){t.setTitle(e,t.text)},style:r},this.text),this.renderRightImages())}},{key:"getMaterialClassName",value:function(){return this.className.includes("md-")?"material-icons "+this.className:"material-icons "+(s.useMaterialImage24?"md-24":"md-18")+this.className}},{key:"renderLeftImage",value:function(){return 0==this.imageLeft.length?null:this.isImgFontAwesome(this.imageLeft)?React.createElement("i",{className:"img-left fa fa-fw "+this.imageLeft+" "+this.className,"aria-hidden":"true"}):this.isImgMaterial(this.imageLeft)?React.createElement("i",{className:"img-left "+this.getMaterialClassName()},this.imageLeft):void 0}},{key:"renderRightImages",value:function(){var i=this;return 0==this.imageRight.length?null:this.imageRight.map(function(e,t){return i.renderRightImage(e,t)})}},{key:"renderRightImage",value:function(e,t){var i={title:e.toolTip};return this.isImgFontAwesome(e.imageRight)?React.createElement("i",{key:t,"data-img-right":e.imageRight,title:e.toolTip,className:"img-right fa fa-fw "+e.imageRight+" "+this.className,"aria-hidden":"true",style:i}):this.isImgMaterial(e.imageRight)?React.createElement("i",{key:t,"data-img-right":e.imageRight,title:e.toolTip,className:"img-right "+this.getMaterialClassName()},e.imageRight):void 0}},{key:"hasImg",get:function(){return 0<this.imageLeft.length}}]),s}();ActionItem.useMaterialImage24=!1,exports.ActionItem=ActionItem;var RightImageInfo=function e(t,i){_classCallCheck(this,e),this.imageRight="",this.toolTip="",this.imageRight=t,this.toolTip=i||""};exports.RightImageInfo=RightImageInfo;var OptionItem=function(e){function a(e,t){var i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:"",r=3<arguments.length&&void 0!==arguments[3]&&arguments[3];_classCallCheck(this,a);var n=_possibleConstructorReturn(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,e,t));return n.isChecked=!1,n.groupBy="",n.isChecked=r,n.groupBy=i,n}return _inherits(a,ActionItem),_createClass(a,[{key:"toggle",value:function(){this.isChecked=!this.isChecked}},{key:"toString",value:function(){return"*OptionItem* "+this.text+" ["+this.key+"] - "+this.isChecked+" [groupBy: "+this.groupBy+"]"}},{key:"render",value:function(){var t=this;return React.createElement("div",{className:"dda-dropdown-item",style:{position:"relative"}},React.createElement("span",{className:"img-check "+(0<this.groupBy.length?" option ":"")+(this.isChecked?" checked ":"")}),React.createElement("span",{className:"flex has-img",ref:function(e){t.setTitle(e,t.text)}},this.text))}}]),a}();exports.OptionItem=OptionItem;