react-taggle-input
Version:
Simple react tagging Input component. Inspired from taggle.js - Jquery library
1 lines • 11.1 kB
JavaScript
!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["react-taggle-input"]=e():n["react-taggle-input"]=e()}(window,function(){return function(n){function e(e){for(var o,i,l=e[0],s=e[1],u=e[2],f=0,c=[];f<l.length;f++)i=l[f],a[i]&&c.push(a[i][0]),a[i]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(n[o]=s[o]);for(p&&p(e);c.length;)c.shift()();return r.push.apply(r,u||[]),t()}function t(){for(var n,e=0;e<r.length;e++){for(var t=r[e],o=!0,l=1;l<t.length;l++){var s=t[l];0!==a[s]&&(o=!1)}o&&(r.splice(e--,1),n=i(i.s=t[0]))}return n}var o={},a={0:0},r=[];function i(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.m=n,i.c=o,i.d=function(n,e,t){i.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:t})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,e){if(1&e&&(n=i(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var o in n)i.d(t,o,function(e){return n[e]}.bind(null,o));return t},i.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(e,"a",e),e},i.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},i.p="";var l=window.webpackJsonpreact_taggle_input=window.webpackJsonpreact_taggle_input||[],s=l.push.bind(l);l.push=e,l=l.slice();for(var u=0;u<l.length;u++)e(l[u]);var p=s;return r.push([11,1]),t()}({11:function(n,e,t){"use strict";t.r(e);var o=t(1),a=t.n(o),r=t(0),i=t.n(r),l=(t(6),function(){return a.a.createElement("svg",{width:"12px",height:"12px",viewBox:"6 6 12 12",version:"1.1"},a.a.createElement("path",{d:"M13.4297,12.0156 L17.7067,7.7386 C18.0977,7.3476 18.0977,6.7146 17.7067,6.3246 C17.3167,5.9336 16.6837,5.9336 16.2927,6.3246 L12.0157,10.6016 L7.7387,6.3246 C7.3477,5.9336 6.7147,5.9336 6.3247,6.3246 C5.9337,6.7146 5.9337,7.3476 6.3247,7.7386 L10.6017,12.0156 L6.3247,16.2926 C5.9337,16.6836 5.9337,17.3166 6.3247,17.7066 C6.5197,17.9026 6.7757,17.9996 7.0317,17.9996 C7.2867,17.9996 7.5427,17.9026 7.7387,17.7066 L12.0157,13.4296 L16.2927,17.7066 C16.4887,17.9026 16.7437,17.9996 16.9997,17.9996 C17.2557,17.9996 17.5117,17.9026 17.7067,17.7066 C18.0977,17.3166 18.0977,16.6836 17.7067,16.2926 L13.4297,12.0156 Z",stroke:"none",fill:"#000000"}))});function s(n){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n})(n)}function u(n){return function(n){if(Array.isArray(n)){for(var e=0,t=new Array(n.length);e<n.length;e++)t[e]=n[e];return t}}(n)||function(n){if(Symbol.iterator in Object(n)||"[object Arguments]"===Object.prototype.toString.call(n))return Array.from(n)}(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(n,e){for(var t=0;t<e.length;t++){var o=e[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,o.key,o)}}function f(n){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(n){return n.__proto__||Object.getPrototypeOf(n)})(n)}function c(n,e){return(c=Object.setPrototypeOf||function(n,e){return n.__proto__=e,n})(n,e)}function g(n){if(void 0===n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n}function d(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}t.d(e,"default",function(){return m});var m=function(n){function e(n){var t,o,a;!function(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),o=this,t=!(a=f(e).call(this,n))||"object"!==s(a)&&"function"!=typeof a?g(o):a;var r=n.tags;return t.state={tags:r,duplicateIndex:""},t.onKeyDown=t.onKeyDown.bind(g(g(t))),t.onBlur=t.onBlur.bind(g(g(t))),t.onChange=t.onChange.bind(g(g(t))),t.addTag=t.addTag.bind(g(g(t))),t.removeTag=t.removeTag.bind(g(g(t))),t}var t,r,i;return function(n,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");n.prototype=Object.create(e&&e.prototype,{constructor:{value:n,writable:!0,configurable:!0}}),e&&c(n,e)}(e,o["Component"]),t=e,(r=[{key:"componentDidMount",value:function(){this.input&&this.input.focus()}},{key:"onKeyDown",value:function(n){if(this.props.keyCodesToAddTag.includes(n.keyCode)&&n.target&&n.target.value&&this.addTag(n.target.value),!(8!==n.keyCode||n.target&&n.target.value)){var e=this.state.tags;this.removeTag(e.length-1)}}},{key:"onBlur",value:function(n){var e=this.props,t=e.onInputBlur,o=e.saveOnBlur;"function"==typeof t&&t(n),o&&n.target&&n.target.value&&this.addTag(n.target.value)}},{key:"onChange",value:function(n){var e=this.props.onInputChange;"function"==typeof e&&e(n)}},{key:"addTag",value:function(n){var e=n.trim(),t=this.props,o=t.allowDuplicates,a=t.onBeforeTagAdd,r=t.onAfterTagAdd,i=this.state.tags;o||-1===i.indexOf(e)?e&&("function"==typeof a&&a(e),this.setState({tags:u(i).concat([e]),duplicateIndex:""}),this.input&&(this.input.value="",this.input.focus()),"function"==typeof r&&r(e)):this.setState({duplicateIndex:i.indexOf(e)})}},{key:"removeTag",value:function(n){var e=this.props,t=e.onAfterTagRemove,o=e.onBeforeTagRemove,a=this.state.tags;"function"==typeof o&&o(a[n]);var r=u(a);r.splice(n,1),this.setState({tags:r}),"function"==typeof t&&t(a[n])}},{key:"render",value:function(){var n=this,e=this.props,t=e.maxTags,o=e.placeholder,r=e.duplicateTagClass,i=e.readOnly,s=this.state,u=s.tags,p=s.duplicateIndex;return a.a.createElement("div",{className:"taggle_wrapper"},a.a.createElement("ul",{className:"taggle_list"},u.length>0&&u.map(function(e,t){return a.a.createElement("li",{key:Math.random(),className:"taggle ".concat(p===t?r:"")},a.a.createElement("span",{className:"taggle_text"},e,!i&&a.a.createElement("button",{className:"close",type:"button",onClick:function(){return n.removeTag(t)}},a.a.createElement(l,null))))}),!i&&(!t||u.length<t)&&a.a.createElement("li",null,a.a.createElement("input",{ref:function(e){n.input=e},type:"text",placeholder:o,onKeyDown:this.onKeyDown,onBlur:this.onBlur,onChange:this.onChange}))))}}])&&p(t.prototype,r),i&&p(t,i),e}();d(m,"propTypes",{tags:i.a.array,maxTags:i.a.number,allowDuplicates:i.a.bool,duplicateTagClass:i.a.string,placeholder:i.a.string,onBeforeTagAdd:i.a.func,onAfterTagAdd:i.a.func,onBeforeTagRemove:i.a.func,onAfterTagRemove:i.a.func,onInputBlur:i.a.func,onInputChange:i.a.func,keyCodesToAddTag:i.a.array,saveOnBlur:i.a.bool,readOnly:i.a.bool}),d(m,"defaultProps",{tags:[],maxTags:0,allowDuplicates:!1,duplicateTagClass:"bounce",placeholder:"Enter the tags",onBeforeTagAdd:void 0,onAfterTagAdd:void 0,onBeforeTagRemove:void 0,onAfterTagRemove:void 0,onInputBlur:void 0,onInputChange:void 0,keyCodesToAddTag:[13],saveOnBlur:!1,readOnly:!1})},6:function(n,e,t){var o=t(7);"string"==typeof o&&(o=[[n.i,o,""]]);var a={hmr:!0,transform:void 0,insertInto:void 0};t(9)(o,a);o.locals&&(n.exports=o.locals)},7:function(n,e,t){(n.exports=t(8)(!1)).push([n.i,".taggle_wrapper input {\n border: none;\n padding: 0;\n background: transparent;\n font-family: Lato;\n font-weight: 400;\n font-size: 30px;\n color: #000000;\n line-height: 32px;\n float: left;\n background: none;\n width: 100%;\n max-width: 100%;\n line-height: inherit; }\n .taggle_wrapper input:focus {\n outline: none; }\n\n.taggle_wrapper .taggle_placeholder {\n font-family: Lato;\n font-weight: 700;\n font-size: 30px;\n color: rgba(0, 0, 0, 0.2);\n position: absolute;\n left: 50%;\n top: 8px;\n transform: translate(-50%);\n white-space: nowrap; }\n\n.taggle_wrapper .taggle_list {\n margin: 0;\n padding: 0;\n min-height: 48px;\n padding-bottom: 10px;\n max-height: 58px;\n max-width: 750px;\n display: inline-block;\n white-space: nowrap;\n overflow-x: auto; }\n .taggle_wrapper .taggle_list li {\n display: inline-block;\n vertical-align: middle;\n height: 100%;\n line-height: 48px;\n transition: all .3s; }\n .taggle_wrapper .taggle_list li.taggle {\n border: 1px solid #267FE7;\n padding: 5px 10px;\n margin: 0 20px 0px 0;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n line-height: initial; }\n .taggle_wrapper .taggle_list li .taggle_text {\n font-family: Lato;\n font-weight: 400;\n font-size: 30px;\n color: #000000;\n line-height: 32px; }\n .taggle_wrapper .taggle_list li .close {\n opacity: 0.1;\n font-family: Lato;\n font-weight: 400;\n font-size: 30px;\n color: #000000;\n border: 0;\n outline: none;\n padding: 0;\n margin-left: 10px;\n cursor: pointer; }\n .taggle_wrapper .taggle_list:after {\n clear: both;\n content: \"\";\n display: block; }\n\n.taggle_wrapper .taggle_sizer {\n font-size: 0;\n opacity: 0;\n line-height: 0;\n height: 0;\n padding: 0;\n margin: 0;\n position: absolute;\n top: -500px;\n z-index: -1;\n visibility: hidden; }\n\n.taggle_wrapper .taggle_placeholder:before {\n content: '';\n position: absolute;\n width: 1px;\n height: 108%;\n background: #000;\n font-weight: 300;\n left: 0;\n -webkit-animation: 1s blink infinite;\n -moz-animation: 1s blink infinite;\n -ms-animation: 1s blink infinite;\n -o-animation: 1s blink infinite;\n animation: 1s blink infinite; }\n\n@-moz-keyframes blink {\n from, to {\n color: transparent; }\n 50% {\n color: black; } }\n\n@-webkit-keyframes blink {\n from, to {\n color: transparent; }\n 50% {\n color: black; } }\n\n@keyframes blink {\n 0%, 100% {\n color: transparent; }\n 50% {\n color: black; } }\n\n@-ms-keyframes blink {\n from, to {\n color: transparent; }\n 50% {\n color: black; } }\n\n@-o-keyframes blink {\n from, to {\n color: transparent; }\n 50% {\n color: black; } }\n\n@-webkit-keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n -webkit-transform: translateY(0); }\n 40% {\n -webkit-transform: translateY(-16px); }\n 60% {\n -webkit-transform: translateY(-7px); } }\n\n@-moz-keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n -moz-transform: translateY(0); }\n 40% {\n -moz-transform: translateY(-16px); }\n 60% {\n -moz-transform: translateY(-7px); } }\n\n@-o-keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n -o-transform: translateY(0); }\n 40% {\n -o-transform: translateY(-16px); }\n 60% {\n -o-transform: translateY(-7px); } }\n\n@keyframes bounce {\n 0%, 20%, 50%, 80%, 100% {\n transform: translateY(0); }\n 40% {\n transform: translateY(-16px); }\n 60% {\n transform: translateY(-7px); } }\n\n.bounce {\n animation-name: bounce; }\n",""])}})});