react-categorized-tag-input-3/categorized-tag-input.js

React.js component for making tag autocompletion inputs with categorized results.

!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(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),a=r(o);t.default=a.default,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";var r=n(1),o=n(10);if("undefined"==typeof r)throw Error("create-react-class could not find the React object. If you are using script tags, make sure that React is being loaded before create-react-class.");var a=(new r.Component).updater;e.exports=o(r.Component,r.isValidElement,a)},function(e,t,n){e.exports=n(14)()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),a=r(o),i=n(3),s=r(i),l=n(2),u=r(l),c=(0,u.default)({propTypes:{selected:s.default.bool,input:s.default.string.isRequired,text:s.default.string.isRequired,addable:s.default.bool,deletable:s.default.bool,onAdd:s.default.func,onDelete:s.default.func,style:s.default.object},getDefaultProps:function(){return{text:""}},tagContent:function(){var e=[],t=this.props.text.trim().toLowerCase().indexOf(this.props.input.trim().toLowerCase()),n=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,n))),n<this.props.text.length&&e.push(a.default.createElement("span",{key:3,className:"cti__tag__content--regular"},this.props.text.substring(n))),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":""),n=this.props.style||{};return a.default.createElement("div",{className:t,onClick:this.onClick,style:n.base||{}},a.default.createElement("div",{className:"cti__tag__content",style:n.content||{}},this.tagContent()),e)}});t.default=c,e.exports=t.default},function(e,t,n){"use strict";function r(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function o(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 s=n(1),l=o(s),u=n(7),c=o(u),p=n(8),d=o(p),f=n(9),h=r(f),g=n(3),m=o(g),y=n(2),_=o(y),v=(0,_.default)({propTypes:{addNew:m.default.bool,categories:m.default.arrayOf(m.default.object).isRequired,transformTag:m.default.func,value:m.default.arrayOf(m.default.object),onBlur:m.default.func,onChange:m.default.func,placeholder:m.default.string,getTagStyle:m.default.func,getCreateNewText:m.default.func},getInitialState:function(){return{value:"",selection:{item:0,category:0},panelOpened:!1,categories:[],addNew:void 0===this.props.addNew||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,n=this.props.categories.map(function(n){return n=Object.assign({},n,{items:n.items.filter(t.filterItems(e))}),0!==n.items.length||t.state.addNew&&!n.single?n:null}).filter(function(e){return null!==e}),r=this.state.selection;this.state.selection.category>=n.length?r={category:0,item:0}:r.item>=n[r.category].items.length&&(r.item=0),this.setState({categories:n,selection:r})},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||this.props.addNew}):"")}});t.default=v},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),a=r(o),i=n(4),s=r(i),l=n(3),u=r(l),c=n(2),p=r(c),d=function(e,t){return"Create new "+e+' "'+t+'"'},f=(0,p.default)({propTypes:{items:u.default.array.isRequired,category:u.default.oneOfType([u.default.string,u.default.number]).isRequired,title:u.default.string.isRequired,selected:u.default.bool.isRequired,selectedItem:u.default.number.isRequired,input:u.default.string.isRequired,addNew:u.default.bool,type:u.default.string,onAdd:u.default.func.isRequired,single:u.default.bool,getTagStyle:u.default.func,getCreateNewText:u.default.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(s.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;e<t;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 n=this.props.type||this.props.title,r=this.props.input,o=this.props.getCreateNewText||d;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},o(n,r))]},render:function(){var e=this.getItems(),t=e.items,n=e.fullMatch,r=this.getAddBtn(n,(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,r))}});t.default=f,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),a=r(o),i=n(4),s=r(i),l=n(3),u=r(l),c=n(2),p=r(c),d=(0,p.default)({propTypes:{openPanel:u.default.func.isRequired,closePanel:u.default.func.isRequired,onValueChange:u.default.func.isRequired,onTagDeleted:u.default.func.isRequired,onKeyDown:u.default.func.isRequired,value:u.default.string.isRequired,tags:u.default.arrayOf(u.default.object).isRequired,placeholder:u.default.string,onBlur:u.default.func,getTagStyle:u.default.func,transformTag:u.default.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,n){return a.default.createElement(s.default,{selected:!1,input:"",text:e.props.transformTag(t),addable:!1,deletable:!0,key:t.title+"_"+n,onDelete:function(){return e.props.onTagDeleted(n)},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=d,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),a=r(o),i=n(6),s=r(i),l=n(3),u=r(l),c=n(2),p=r(c),d=(0,p.default)({propTypes:{categories:u.default.arrayOf(u.default.object).isRequired,selection:u.default.object.isRequired,onAdd:u.default.func.isRequired,input:u.default.string.isRequired,addNew:u.default.bool,getTagStyle:u.default.func,getCreateNewText:u.default.func},getCategories:function(){var e=this;return this.props.categories.map(function(t,n){return a.default.createElement(s.default,{key:t.id,items:t.items,category:t.id,title:t.title,selected:e.props.selection.category===n,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=d,e.exports=t.default},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=9;t.TAB=n;var r=13;t.ENTER=r;var o=8;t.BACKSPACE=o;var a=37;t.LEFT=a;var i=38;t.UP=i;var s=39;t.RIGHT=s;var l=40;t.DOWN=l;var u=188;t.COMMA=u},function(e,t,n){"use strict";function r(e){return e}function o(e,t,n){function o(e,t){var n=_.hasOwnProperty(t)?_[t]:null;T.hasOwnProperty(t)&&l("OVERRIDE_BASE"===n,"ReactClassInterface: You are attempting to override `%s` from your class specification. Ensure that your method names do not overlap with React methods.",t),e&&l("DEFINE_MANY"===n||"DEFINE_MANY_MERGED"===n,"ReactClassInterface: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",t)}function a(e,n){if(n){l("function"!=typeof n,"ReactClass: You're attempting to use a component class or function as a mixin. Instead, just use a regular object."),l(!t(n),"ReactClass: You're attempting to use a component as a mixin. Instead, just use a regular object.");var r=e.prototype,a=r.__reactAutoBindPairs;n.hasOwnProperty(u)&&E.mixins(e,n.mixins);for(var i in n)if(n.hasOwnProperty(i)&&i!==u){var s=n[i],c=r.hasOwnProperty(i);if(o(c,i),E.hasOwnProperty(i))E[i](e,s);else{var p=_.hasOwnProperty(i),h="function"==typeof s,g=h&&!p&&!c&&n.autobind!==!1;if(g)a.push(i,s),r[i]=s;else if(c){var m=_[i];l(p&&("DEFINE_MANY_MERGED"===m||"DEFINE_MANY"===m),"ReactClass: Unexpected spec policy %s for key %s when mixing in component specs.",m,i),"DEFINE_MANY_MERGED"===m?r[i]=d(r[i],s):"DEFINE_MANY"===m&&(r[i]=f(r[i],s))}else r[i]=s}}}else;}function c(e,t){if(t)for(var n in t){var r=t[n];if(t.hasOwnProperty(n)){var o=n in E;l(!o,'ReactClass: You are attempting to define a reserved property, `%s`, that shouldn\'t be on the "statics" key. Define it as an instance property instead; it will still be accessible on the constructor.',n);var a=n in e;if(a){var i=v.hasOwnProperty(n)?v[n]:null;return l("DEFINE_MANY_MERGED"===i,"ReactClass: You are attempting to define `%s` on your component more than once. This conflict may be due to a mixin.",n),void(e[n]=d(e[n],r))}e[n]=r}}}function p(e,t){l(e&&t&&"object"==typeof e&&"object"==typeof t,"mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.");for(var n in t)t.hasOwnProperty(n)&&(l(void 0===e[n],"mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `%s`. This conflict may be due to a mixin; in particular, this may be caused by two getInitialState() or getDefaultProps() methods returning objects with clashing keys.",n),e[n]=t[n]);return e}function d(e,t){return function(){var n=e.apply(this,arguments),r=t.apply(this,arguments);if(null==n)return r;if(null==r)return n;var o={};return p(o,n),p(o,r),o}}function f(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}function h(e,t){var n=t.bind(e);return n}function g(e){for(var t=e.__reactAutoBindPairs,n=0;n<t.length;n+=2){var r=t[n],o=t[n+1];e[r]=h(e,o)}}function m(e){var t=r(function(e,r,o){this.__reactAutoBindPairs.length&&g(this),this.props=e,this.context=r,this.refs=s,this.updater=o||n,this.state=null;var a=this.getInitialState?this.getInitialState():null;l("object"==typeof a&&!Array.isArray(a),"%s.getInitialState(): must return an object or null",t.displayName||"ReactCompositeComponent"),this.state=a});t.prototype=new D,t.prototype.constructor=t,t.prototype.__reactAutoBindPairs=[],y.forEach(a.bind(null,t)),a(t,N),a(t,e),a(t,b),t.getDefaultProps&&(t.defaultProps=t.getDefaultProps()),l(t.prototype.render,"createClass(...): Class specification must implement a `render` method.");for(var o in _)t.prototype[o]||(t.prototype[o]=null);return t}var y=[],_={mixins:"DEFINE_MANY",statics:"DEFINE_MANY",propTypes:"DEFINE_MANY",contextTypes:"DEFINE_MANY",childContextTypes:"DEFINE_MANY",getDefaultProps:"DEFINE_MANY_MERGED",getInitialState:"DEFINE_MANY_MERGED",getChildContext:"DEFINE_MANY_MERGED",render:"DEFINE_ONCE",componentWillMount:"DEFINE_MANY",componentDidMount:"DEFINE_MANY",componentWillReceiveProps:"DEFINE_MANY",shouldComponentUpdate:"DEFINE_ONCE",componentWillUpdate:"DEFINE_MANY",componentDidUpdate:"DEFINE_MANY",componentWillUnmount:"DEFINE_MANY",UNSAFE_componentWillMount:"DEFINE_MANY",UNSAFE_componentWillReceiveProps:"DEFINE_MANY",UNSAFE_componentWillUpdate:"DEFINE_MANY",updateComponent:"OVERRIDE_BASE"},v={getDerivedStateFromProps:"DEFINE_MANY_MERGED"},E={displayName:function(e,t){e.displayName=t},mixins:function(e,t){if(t)for(var n=0;n<t.length;n++)a(e,t[n])},childContextTypes:function(e,t){e.childContextTypes=i({},e.childContextTypes,t)},contextTypes:function(e,t){e.contextTypes=i({},e.contextTypes,t)},getDefaultProps:function(e,t){e.getDefaultProps?e.getDefaultProps=d(e.getDefaultProps,t):e.getDefaultProps=t},propTypes:function(e,t){e.propTypes=i({},e.propTypes,t)},statics:function(e,t){c(e,t)},autobind:function(){}},N={componentDidMount:function(){this.__isMounted=!0}},b={componentWillUnmount:function(){this.__isMounted=!1}},T={replaceState:function(e,t){this.updater.enqueueReplaceState(this,e,t)},isMounted:function(){return!!this.__isMounted}},D=function(){};return i(D.prototype,e.prototype,T),m}var a,i=n(13),s=n(11),l=n(12),u="mixins";a={},e.exports=o},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r,a,i,s,l){if(o(t),!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,i,s,l],p=0;u=new Error(t.replace(/%s/g,function(){return c[p++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var o=function(e){};e.exports=r},function(e,t){/*
	object-assign
	(c) Sindre Sorhus
	@license MIT
	*/
"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function r(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==r.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=r()?Object.assign:function(e,t){for(var r,s,l=n(e),u=1;u<arguments.length;u++){r=Object(arguments[u]);for(var c in r)a.call(r,c)&&(l[c]=r[c]);if(o){s=o(r);for(var p=0;p<s.length;p++)i.call(r,s[p])&&(l[s[p]]=r[s[p]])}}return l}},function(e,t,n){"use strict";function r(){}function o(){}var a=n(15);o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,i){if(i!==a){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n}])});
//# sourceMappingURL=categorized-tag-input.js.map