categorized-tag-input.js

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CategorizedTagInput=t(require("react")):e.CategorizedTagInput=t(e.React)}(this,function(e){return function(e){function t(n){if(s[n])return s[n].exports;var r=s[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t,s){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=s(3),a=n(r);t["default"]=a["default"],e.exports=t["default"]},function(t,s){t.exports=e},function(e,t,s){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=s(1),a=n(r),i=a["default"].PropTypes,o=a["default"].createClass({displayName:"Tag",propTypes:{selected:i.bool,input:i.string.isRequired,text:i.string.isRequired,addable:i.bool,deletable:i.bool,onAdd:i.func,onDelete:i.func,style:i.object},getDefaultProps:function(){return{text:""}},tagContent:function(){var e=[],t=this.props.text.trim().toLowerCase().indexOf(this.props.input.trim().toLowerCase()),s=t+this.props.input.length;return t>0&&e.push(a["default"].createElement("span",{key:1,className:"cti__tag__content--regular"},this.props.text.substring(0,t))),e.push(a["default"].createElement("span",{key:2,className:"cti__tag__content--match"},this.props.text.substring(t,s))),s<this.props.text.length&&e.push(a["default"].createElement("span",{key:3,className:"cti__tag__content--regular"},this.props.text.substring(s))),e},onClick:function(e){e.preventDefault(),this.props.addable&&this.props.onAdd(e)},onDelete:function(e){e.preventDefault(),e.stopPropagation(),this.props.onDelete(e)},getDeleteBtn:function(){var e=this.props.style||{},t=e["delete"]?e["delete"]:{};return a["default"].createElement("span",{className:"cti__tag__delete",onClick:this.onDelete,dangerouslySetInnerHTML:{__html:"&times;"},style:t})},render:function(){var e=null;this.props.deletable&&(e=this.getDeleteBtn());var t="cti__tag"+(this.props.selected?" cti-selected":""),s=this.props.style||{};return a["default"].createElement("div",{className:t,onClick:this.onClick,style:s.base||{}},a["default"].createElement("div",{className:"cti__tag__content",style:s.content||{}},this.tagContent()),e)}});t["default"]=o,e.exports=t["default"]},function(e,t,s){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t["default"]=e,t}function r(e){return e&&e.__esModule?e:{"default":e}}function a(e){return"string"==typeof e&&e.trim().length>0}function i(e){return"object"==typeof e&&e.id&&e.title&&e.items&&Array.isArray(e.items)&&e.items.every(a)&&(e.type||e.single)}Object.defineProperty(t,"__esModule",{value:!0}),t.isCategoryItemValid=a,t.isCategoryValid=i;var o=s(1),l=r(o),u=s(5),c=r(u),p=s(6),d=r(p),f=s(7),h=n(f),g=l["default"].PropTypes,m=l["default"].createClass({displayName:"CategorizedTagInput",propTypes:{addNew:g.bool,categories:g.arrayOf(g.object).isRequired,transformTag:g.func,value:g.arrayOf(g.object),onBlur:g.func,onChange:g.func,placeholder:g.string,getTagStyle:g.func,getCreateNewText:g.func},getInitialState:function(){return{value:"",selection:{item:0,category:0},panelOpened:!1,categories:[],addNew:void 0===this.props.addNew?!0:this.props.addNew}},getDefaultProps:function(){return{onChange:function(e){}}},componentWillMount:function(){if(!this.props.categories.every(i))throw new Error("invalid categories source provided for react-categorized-tag-input")},componentWillUnmount:function(){this.timeout&&clearTimeout(this.timeout)},filterCategories:function(e){var t=this,s=this.props.categories.map(function(s){return s=Object.assign({},s,{items:s.items.filter(t.filterItems(e))}),0!==s.items.length||t.state.addNew&&!s.single?s:null}).filter(function(e){return null!==e}),n=this.state.selection;this.state.selection.category>=s.length?n={category:0,item:0}:n.item>=s[n.category].items.length&&(n.item=0),this.setState({categories:s,selection:n})},filterItems:function(e){return function(t){return 1===e.length?t.toLowerCase().trim()===e:t.toLowerCase().indexOf(e.trim().toLowerCase())>=0}},openPanel:function(){this.setState({panelOpened:!0})},closePanel:function(){var e=this;this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.timeout=void 0,e.setState({panelOpened:!1})},150)},onValueChange:function(e){var t=e.target.value;this.setState({value:t,panelOpened:t.trim().length>0||!isNaN(Number(t.trim()))}),this.filterCategories(t)},onTagDeleted:function(e){var t=this.props.value.slice();t.splice(e,1),this.props.onChange(t)},onAdd:function(e){var t=this.props.value.concat([e]);this.setState({value:"",panelOpened:!0}),this.refs.input.focusInput(),this.props.onChange(t)},addSelectedTag:function(){if(this.state.panelOpened&&this.state.value.length>0){var e=this.state.categories[this.state.selection.category],t=e.items[this.state.selection.item];this.onAdd({category:e.id,title:t||this.state.value})}},handleBackspace:function(e){0===this.state.value.trim().length&&(e.preventDefault(),this.onTagDeleted(this.props.value.length-1))},handleArrowLeft:function(){var e=this.state.selection.item-1;this.setState({selection:{category:this.state.selection.category,item:e>=0?e:0}})},handleArrowUp:function(){var e=this.state.selection.category-1;this.setState({selection:{category:e>=0?e:0,item:0}})},handleArrowRight:function(){var e=this.state.selection.item+1,t=this.state.categories[this.state.selection.category];this.setState({selection:{category:this.state.selection.category,item:e<=t.items.length?e:t.items.length}})},handleArrowDown:function(){var e=this.state.selection.category+1,t=this.state.categories;this.setState({selection:{category:e<t.length?e:t.length-1,item:0}})},onKeyDown:function(e){switch(e.keyCode){case h.TAB:case h.ENTER:if(!this.state.value)break;case h.COMMA:e.preventDefault(),this.addSelectedTag();break;case h.BACKSPACE:this.handleBackspace(e);break;case h.LEFT:this.handleArrowLeft();break;case h.UP:this.handleArrowUp();break;case h.RIGHT:this.handleArrowRight();break;case h.DOWN:this.handleArrowDown()}},render:function(){return l["default"].createElement("div",{className:"cti__root"},l["default"].createElement(c["default"],{openPanel:this.openPanel,closePanel:this.closePanel,onValueChange:this.onValueChange,onTagDeleted:this.onTagDeleted,onKeyDown:this.onKeyDown,placeholder:this.props.placeholder,value:this.state.value,getTagStyle:this.props.getTagStyle,tags:this.props.value,transformTag:this.props.transformTag,onBlur:this.props.onBlur,ref:"input"}),this.state.panelOpened&&this.state.value.length>0?l["default"].createElement(d["default"],{categories:this.state.categories,selection:this.state.selection,onAdd:this.onAdd,input:this.state.value,getCreateNewText:this.props.getCreateNewText,addNew:void 0===this.props.addNew?!0:this.props.addNew}):"")}});t["default"]=m},function(e,t,s){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=s(1),a=n(r),i=s(2),o=n(i),l=a["default"].PropTypes,u=function(e,t){return"Create new "+e+' "'+t+'"'},c=a["default"].createClass({displayName:"Category",propTypes:{items:l.array.isRequired,category:l.oneOfType([l.string,l.number]).isRequired,title:l.string.isRequired,selected:l.bool.isRequired,selectedItem:l.number.isRequired,input:l.string.isRequired,addNew:l.bool,type:l.string,onAdd:l.func.isRequired,single:l.bool,getTagStyle:l.func,getCreateNewText:l.func},onAdd:function(e){var t=this;return function(){t.props.onAdd({category:t.props.category,title:e})}},onCreateNew:function(e){e.preventDefault(),this.onAdd(this.props.input)()},getTagStyle:function(e){return this.props.getTagStyle?this.props.getTagStyle(e):{}},itemToTag:function(e,t){return a["default"].createElement(o["default"],{selected:this.isSelected(t),input:this.props.input,text:e,addable:!0,deletable:!1,onAdd:this.onAdd(e),key:e+"_"+t,style:this.getTagStyle(e)})},fullMatchInItems:function(){for(var e=0,t=this.props.items.length;t>e;e++)if(this.props.items[e]===this.props.input)return!0;return!1},getItems:function(){return{items:this.props.items.map(this.itemToTag),fullMatch:this.fullMatchInItems()}},isSelected:function(e){return this.props.selected&&(e===this.props.selectedItem||this.props.single)},getAddBtn:function(e,t){var s=this.props.type||this.props.title,n=this.props.input,r=this.props.getCreateNewText||u;return!this.props.addNew||e||this.props.single?null:[this.props.items.length>0?a["default"].createElement("span",{key:"cat_or",className:"cti__category__or"},"or"):null,a["default"].createElement("button",{key:"add_btn",className:"cti__category__add-item"+(t?" cti-selected":""),onClick:this.onCreateNew},r(s,n))]},render:function(){var e=this.getItems(),t=e.items,s=e.fullMatch,n=this.getAddBtn(s,(0===t.length||this.props.selectedItem>=t.length)&&this.props.selected);return a["default"].createElement("div",{className:"cti__category"},a["default"].createElement("h5",{className:"cti__category__title"},this.props.title),a["default"].createElement("div",{className:"cti__category__tags"},t,n))}});t["default"]=c,e.exports=t["default"]},function(e,t,s){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=s(1),a=n(r),i=s(2),o=n(i),l=a["default"].PropTypes,u=a["default"].createClass({displayName:"Input",propTypes:{openPanel:l.func.isRequired,closePanel:l.func.isRequired,onValueChange:l.func.isRequired,onTagDeleted:l.func.isRequired,onKeyDown:l.func.isRequired,value:l.string.isRequired,tags:l.arrayOf(l.object).isRequired,placeholder:l.string,onBlur:l.func,getTagStyle:l.func,transformTag:l.func},focusInput:function(){this.refs.input.focus()},getDefaultProps:function(){return{getTagStyle:function(e){return{}},transformTag:function(e){return e.title}}},getTags:function(){var e=this;return this.props.tags.map(function(t,s){return a["default"].createElement(o["default"],{selected:!1,input:"",text:e.props.transformTag(t),addable:!1,deletable:!0,key:t.title+"_"+s,onDelete:function(){return e.props.onTagDeleted(s)},style:e.props.getTagStyle(t)})})},onBlur:function(e){this.props.closePanel(),"function"==typeof this.props.onBlur&&this.props.onBlur(e)},render:function(){var e=this.props.placeholder||"",t=0===this.props.value.length?e.length:this.props.value.length;return a["default"].createElement("div",{className:"cti__input",onClick:this.focusInput},this.getTags(),a["default"].createElement("input",{type:"text",ref:"input",value:this.props.value,size:t+2,onFocus:this.props.openPanel,onBlur:this.onBlur,onChange:this.props.onValueChange,onKeyDown:this.props.onKeyDown,placeholder:e,"aria-label":e,className:"cti__input__input"}),a["default"].createElement("div",{className:"cti__input__arrow"}))}});t["default"]=u,e.exports=t["default"]},function(e,t,s){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=s(1),a=n(r),i=s(4),o=n(i),l=a["default"].PropTypes,u=a["default"].createClass({displayName:"Panel",propTypes:{categories:l.arrayOf(l.object).isRequired,selection:l.object.isRequired,onAdd:l.func.isRequired,input:l.string.isRequired,addNew:l.bool,getTagStyle:l.func,getCreateNewText:l.func},getCategories:function(){var e=this;return this.props.categories.map(function(t,s){return a["default"].createElement(o["default"],{key:t.id,items:t.items,category:t.id,title:t.title,selected:e.props.selection.category===s,selectedItem:e.props.selection.item,input:e.props.input,addNew:e.props.addNew,type:t.type,onAdd:e.props.onAdd,single:t.single,getTagStyle:e.props.getTagStyle,getCreateNewText:e.props.getCreateNewText})})},render:function(){return a["default"].createElement("div",{className:"cti__panel"},this.getCategories())}});t["default"]=u,e.exports=t["default"]},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=9;t.TAB=s;var n=13;t.ENTER=n;var r=8;t.BACKSPACE=r;var a=37;t.LEFT=a;var i=38;t.UP=i;var o=39;t.RIGHT=o;var l=40;t.DOWN=l;var u=188;t.COMMA=u}])});
//# sourceMappingURL=categorized-tag-input.js.map