react-tag-input - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist-modules/Suggestions.js

@@ -1,4 +0,4 @@
-'use strict';
+"use strict";
 
-var React = require('react');
+var React = require("react");
 
@@ -9,18 +9,4 @@ // determines the min query length for which
 
-var styles = {
-    list: {
-        listStyleType: 'none',
-        boxShadow: '.05em .01em .5em rgba(0,0,0,.2)',
-        background: 'white',
-        width: 200
-    },
-    listItem: {
-        borderBottom: '1px solid #ddd',
-        padding: '5px 10px',
-        margin: 0
-    }
-};
-
 var Suggestions = React.createClass({
-    displayName: 'Suggestions',
+    displayName: "Suggestions",
 
@@ -35,6 +21,6 @@ propTypes: {
     markIt: function markIt(input, query) {
-        var escapedRegex = query.trim().replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-        var r = RegExp(escapedRegex, 'gi');
+        var escapedRegex = query.trim().replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
+        var r = RegExp(escapedRegex, "gi");
         return {
-            __html: input.replace(r, '<mark>$&</mark>')
+            __html: input.replace(r, "<mark>$&</mark>")
         };
@@ -46,9 +32,8 @@ },
             return React.createElement(
-                'li',
+                "li",
                 { key: i,
-                    style: styles.listItem,
                     onClick: props.handleClick.bind(null, i),
                     onMouseOver: props.handleHover.bind(null, i),
-                    className: i == props.selectedIndex ? 'active' : '' },
-                React.createElement('span', { dangerouslySetInnerHTML: this.markIt(item, props.query) })
+                    className: i == props.selectedIndex ? "active" : "" },
+                React.createElement("span", { dangerouslySetInnerHTML: this.markIt(item, props.query) })
             );
@@ -59,5 +44,5 @@ }).bind(this));
             return React.createElement(
-                'div',
-                { className: 'ReactTags__suggestions' },
-                ' '
+                "div",
+                { className: "ReactTags__suggestions" },
+                " "
             );
@@ -67,10 +52,10 @@ }
         return React.createElement(
-            'div',
-            { className: 'ReactTags__suggestions' },
+            "div",
+            { className: "ReactTags__suggestions" },
             React.createElement(
-                'ul',
-                { style: styles.list },
-                ' ',
+                "ul",
+                null,
+                " ",
                 suggestions,
-                ' '
+                " "
             )
@@ -77,0 +62,0 @@ );

dist-modules/Tag.js

@@ -10,20 +10,2 @@ 'use strict';
 
-var styles = {
-    tag: {
-        border: '1px solid #ddd',
-        background: '#eee',
-        fontSize: 12,
-        display: 'inline-block',
-        padding: 5,
-        margin: '0 5px',
-        cursor: 'move',
-        borderRadius: 2
-    },
-    remove: {
-        color: '#aaa',
-        marginLeft: 5,
-        cursor: 'pointer'
-    }
-};
-
 var Tag = React.createClass({
@@ -69,4 +51,3 @@ displayName: 'Tag',
             _extends({ className: 'ReactTags__tag'
-            }, this.dragSourceFor(ItemTypes.TAG), this.dropTargetFor(ItemTypes.TAG), {
-                style: styles.tag }),
+            }, this.dragSourceFor(ItemTypes.TAG), this.dropTargetFor(ItemTypes.TAG)),
             label,
@@ -76,3 +57,2 @@ React.createElement(
                 { className: 'ReactTags__remove',
-                    style: styles.remove,
                     onClick: this.props.onDelete },
@@ -79,0 +59,0 @@ 'x'

dist/reactTags.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDND")):"function"==typeof define&&define.amd?define(["React","ReactDND"],t):"object"==typeof exports?exports.ReactTags=t(require("React"),require("ReactDND")):e.ReactTags=t(e.React,e.ReactDND)}(this,function(e,t){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";var n=s(1),r=s(3),i=s(2),a={ENTER:13,TAB:9,BACKSPACE:8,UP_ARROW:38,DOWN_ARROW:40,ESCAPE:27},o=n.createClass({displayName:"ReactTags",propTypes:{tags:n.PropTypes.array,placeholder:n.PropTypes.string,labelField:n.PropTypes.string,suggestions:n.PropTypes.array,handleDelete:n.PropTypes.func.isRequired,handleAddition:n.PropTypes.func.isRequired,handleDrag:n.PropTypes.func.isRequired},getDefaultProps:function(){return{placeholder:"Add new tag",tags:[],suggestions:[]}},componentDidMount:function(){this.refs.input.getDOMNode().focus()},getInitialState:function(){return{suggestions:this.props.suggestions,query:"",selectedIndex:-1,selectionMode:!1}},handleDelete:function(e,t){this.props.handleDelete(e),this.setState({query:""})},handleChange:function(e){var t=e.target.value.trim(),s=this.props.suggestions.filter(function(e){return 0===e.toLowerCase().search(t.toLowerCase())});this.setState({query:t,suggestions:s})},handleKeyDown:function(e){var t=this.state,s=t.query,n=t.selectedIndex,r=t.suggestions;if(e.keyCode===a.ESCAPE&&(e.preventDefault(),this.setState({selectedIndex:-1,selectionMode:!1,suggestions:[]})),e.keyCode!==a.ENTER&&e.keyCode!==a.TAB||""==s||(e.preventDefault(),this.state.selectionMode&&(s=this.state.suggestions[this.state.selectedIndex]),this.addTag(s)),e.keyCode===a.BACKSPACE&&""==s&&this.handleDelete(this.props.tags.length-1),e.keyCode===a.UP_ARROW){e.preventDefault();var n=this.state.selectedIndex;this.setState(0>=n?{selectedIndex:this.state.suggestions.length-1,selectionMode:!0}:{selectedIndex:n-1,selectionMode:!0})}e.keyCode===a.DOWN_ARROW&&(e.preventDefault(),this.setState({selectedIndex:(this.state.selectedIndex+1)%r.length,selectionMode:!0}))},addTag:function(e){var t=this.refs.input.getDOMNode();this.props.handleAddition(e),this.setState({query:"",selectionMode:!1,selectedIndex:-1}),t.value="",t.focus()},handleSuggestionClick:function(e,t){this.addTag(this.state.suggestions[e])},handleSuggestionHover:function(e,t){this.setState({selectedIndex:e,selectionMode:!0})},moveTag:function(e,t){var s=this.props.tags,n=s.filter(function(t){return t.id===e})[0],r=s.filter(function(e){return e.id===t})[0],i=s.indexOf(n),a=s.indexOf(r);this.props.handleDrag(n,i,a)},render:function(){var e=this.props.tags.map(function(e,t){return n.createElement(r,{key:t,tag:e,labelField:this.props.labelField,onDelete:this.handleDelete.bind(this,t),moveTag:this.moveTag})}.bind(this)),t=this.state.query.trim(),s=this.state.selectedIndex,a=this.state.suggestions,o=this.props.placeholder;return n.createElement("div",{className:"ReactTags__tags"},n.createElement("div",{className:"ReactTags__selected"},e),n.createElement("div",{className:"ReactTags__tagInput"},n.createElement("input",{ref:"input",type:"text",placeholder:o,onChange:this.handleChange,onKeyDown:this.handleKeyDown}),n.createElement(i,{query:t,suggestions:a,selectedIndex:s,handleClick:this.handleSuggestionClick,handleHover:this.handleSuggestionHover})))}});e.exports=o},function(t,s,n){t.exports=e},function(e,t,s){"use strict";var n=s(1),r=2,i={list:{listStyleType:"none",boxShadow:".05em .01em .5em rgba(0,0,0,.2)",background:"white",width:200},listItem:{borderBottom:"1px solid #ddd",padding:"5px 10px",margin:0}},a=n.createClass({displayName:"Suggestions",propTypes:{query:n.PropTypes.string.isRequired,selectedIndex:n.PropTypes.number.isRequired,suggestions:n.PropTypes.array.isRequired,handleClick:n.PropTypes.func.isRequired,handleHover:n.PropTypes.func.isRequired},markIt:function(e,t){var s=t.trim().replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&"),n=RegExp(s,"gi");return{__html:e.replace(n,"<mark>$&</mark>")}},render:function(){var e=this.props,t=this.props.suggestions.map(function(t,s){return n.createElement("li",{key:s,style:i.listItem,onClick:e.handleClick.bind(null,s),onMouseOver:e.handleHover.bind(null,s),className:s==e.selectedIndex?"active":""},n.createElement("span",{dangerouslySetInnerHTML:this.markIt(t,e.query)}))}.bind(this));return 0===t.length||e.query.length<r?n.createElement("div",{className:"ReactTags__suggestions"}," "):n.createElement("div",{className:"ReactTags__suggestions"},n.createElement("ul",{style:i.list}," ",t," "))}});e.exports=a},function(e,t,s){"use strict";var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n])}return e},r=s(4),i=s(1),a={TAG:"tag"},o={tag:{border:"1px solid #ddd",background:"#eee",fontSize:12,display:"inline-block",padding:5,margin:"0 5px",cursor:"move",borderRadius:2},remove:{color:"#aaa",marginLeft:5,cursor:"pointer"}},l=i.createClass({displayName:"Tag",mixins:[r.DragDropMixin],propTypes:{labelField:i.PropTypes.string,onDelete:i.PropTypes.func.isRequired,tag:i.PropTypes.object.isRequired,moveTag:i.PropTypes.func.isRequired},getDefaultProps:function(){return{labelField:"text"}},statics:{configureDragDrop:function(e){e(a.TAG,{dragSource:{beginDrag:function(e){return{item:{id:e.props.tag.id}}}},dropTarget:{over:function(e,t){e.props.moveTag(t.id,e.props.tag.id)}}})}},render:function(){var e=this.props.tag[this.props.labelField];return i.createElement("span",n({className:"ReactTags__tag"},this.dragSourceFor(a.TAG),this.dropTargetFor(a.TAG),{style:o.tag}),e,i.createElement("a",{className:"ReactTags__remove",style:o.remove,onClick:this.props.onDelete},"x"))}});e.exports=l},function(e,s,n){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDND")):"function"==typeof define&&define.amd?define(["React","ReactDND"],t):"object"==typeof exports?exports.ReactTags=t(require("React"),require("ReactDND")):e.ReactTags=t(e.React,e.ReactDND)}(this,function(e,t){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";var n=s(1),r=s(3),a=s(2),i={ENTER:13,TAB:9,BACKSPACE:8,UP_ARROW:38,DOWN_ARROW:40,ESCAPE:27},o=n.createClass({displayName:"ReactTags",propTypes:{tags:n.PropTypes.array,placeholder:n.PropTypes.string,labelField:n.PropTypes.string,suggestions:n.PropTypes.array,handleDelete:n.PropTypes.func.isRequired,handleAddition:n.PropTypes.func.isRequired,handleDrag:n.PropTypes.func.isRequired},getDefaultProps:function(){return{placeholder:"Add new tag",tags:[],suggestions:[]}},componentDidMount:function(){this.refs.input.getDOMNode().focus()},getInitialState:function(){return{suggestions:this.props.suggestions,query:"",selectedIndex:-1,selectionMode:!1}},handleDelete:function(e,t){this.props.handleDelete(e),this.setState({query:""})},handleChange:function(e){var t=e.target.value.trim(),s=this.props.suggestions.filter(function(e){return 0===e.toLowerCase().search(t.toLowerCase())});this.setState({query:t,suggestions:s})},handleKeyDown:function(e){var t=this.state,s=t.query,n=t.selectedIndex,r=t.suggestions;if(e.keyCode===i.ESCAPE&&(e.preventDefault(),this.setState({selectedIndex:-1,selectionMode:!1,suggestions:[]})),e.keyCode!==i.ENTER&&e.keyCode!==i.TAB||""==s||(e.preventDefault(),this.state.selectionMode&&(s=this.state.suggestions[this.state.selectedIndex]),this.addTag(s)),e.keyCode===i.BACKSPACE&&""==s&&this.handleDelete(this.props.tags.length-1),e.keyCode===i.UP_ARROW){e.preventDefault();var n=this.state.selectedIndex;this.setState(0>=n?{selectedIndex:this.state.suggestions.length-1,selectionMode:!0}:{selectedIndex:n-1,selectionMode:!0})}e.keyCode===i.DOWN_ARROW&&(e.preventDefault(),this.setState({selectedIndex:(this.state.selectedIndex+1)%r.length,selectionMode:!0}))},addTag:function(e){var t=this.refs.input.getDOMNode();this.props.handleAddition(e),this.setState({query:"",selectionMode:!1,selectedIndex:-1}),t.value="",t.focus()},handleSuggestionClick:function(e,t){this.addTag(this.state.suggestions[e])},handleSuggestionHover:function(e,t){this.setState({selectedIndex:e,selectionMode:!0})},moveTag:function(e,t){var s=this.props.tags,n=s.filter(function(t){return t.id===e})[0],r=s.filter(function(e){return e.id===t})[0],a=s.indexOf(n),i=s.indexOf(r);this.props.handleDrag(n,a,i)},render:function(){var e=this.props.tags.map(function(e,t){return n.createElement(r,{key:t,tag:e,labelField:this.props.labelField,onDelete:this.handleDelete.bind(this,t),moveTag:this.moveTag})}.bind(this)),t=this.state.query.trim(),s=this.state.selectedIndex,i=this.state.suggestions,o=this.props.placeholder;return n.createElement("div",{className:"ReactTags__tags"},n.createElement("div",{className:"ReactTags__selected"},e),n.createElement("div",{className:"ReactTags__tagInput"},n.createElement("input",{ref:"input",type:"text",placeholder:o,onChange:this.handleChange,onKeyDown:this.handleKeyDown}),n.createElement(a,{query:t,suggestions:i,selectedIndex:s,handleClick:this.handleSuggestionClick,handleHover:this.handleSuggestionHover})))}});e.exports=o},function(t,s,n){t.exports=e},function(e,t,s){"use strict";var n=s(1),r=2,a=n.createClass({displayName:"Suggestions",propTypes:{query:n.PropTypes.string.isRequired,selectedIndex:n.PropTypes.number.isRequired,suggestions:n.PropTypes.array.isRequired,handleClick:n.PropTypes.func.isRequired,handleHover:n.PropTypes.func.isRequired},markIt:function(e,t){var s=t.trim().replace(/[-\\^$*+?.()|[\]{}]/g,"\\$&"),n=RegExp(s,"gi");return{__html:e.replace(n,"<mark>$&</mark>")}},render:function(){var e=this.props,t=this.props.suggestions.map(function(t,s){return n.createElement("li",{key:s,onClick:e.handleClick.bind(null,s),onMouseOver:e.handleHover.bind(null,s),className:s==e.selectedIndex?"active":""},n.createElement("span",{dangerouslySetInnerHTML:this.markIt(t,e.query)}))}.bind(this));return 0===t.length||e.query.length<r?n.createElement("div",{className:"ReactTags__suggestions"}," "):n.createElement("div",{className:"ReactTags__suggestions"},n.createElement("ul",null," ",t," "))}});e.exports=a},function(e,t,s){"use strict";var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n])}return e},r=s(4),a=s(1),i={TAG:"tag"},o=a.createClass({displayName:"Tag",mixins:[r.DragDropMixin],propTypes:{labelField:a.PropTypes.string,onDelete:a.PropTypes.func.isRequired,tag:a.PropTypes.object.isRequired,moveTag:a.PropTypes.func.isRequired},getDefaultProps:function(){return{labelField:"text"}},statics:{configureDragDrop:function(e){e(i.TAG,{dragSource:{beginDrag:function(e){return{item:{id:e.props.tag.id}}}},dropTarget:{over:function(e,t){e.props.moveTag(t.id,e.props.tag.id)}}})}},render:function(){var e=this.props.tag[this.props.labelField];return a.createElement("span",n({className:"ReactTags__tag"},this.dragSourceFor(i.TAG),this.dropTargetFor(i.TAG)),e,a.createElement("a",{className:"ReactTags__remove",onClick:this.props.onDelete},"x"))}});e.exports=o},function(e,s,n){e.exports=t}])});

lib/Suggestions.js

@@ -7,16 +7,2 @@ var React = require('react');
 
-var styles = {
-    list: {
-        listStyleType: 'none',
-        boxShadow: ".05em .01em .5em rgba(0,0,0,.2)",
-        background: "white",
-        width: 200
-    },
-    listItem: {
-        borderBottom: "1px solid #ddd",
-        padding: "5px 10px",
-        margin: 0
-    }
-};
-
 var Suggestions = React.createClass({
@@ -42,3 +28,2 @@ propTypes: {
                 <li key={i} 
-                    style={styles.listItem}
                     onClick={props.handleClick.bind(null, i)}
@@ -58,3 +43,3 @@ onMouseOver={props.handleHover.bind(null, i)}
             <div className="ReactTags__suggestions">
-                <ul style={styles.list}> { suggestions } </ul>
+                <ul> { suggestions } </ul>
             </div>
@@ -61,0 +46,0 @@ )

lib/Tag.js

@@ -6,20 +6,2 @@ var ReactDND = require('react-dnd');
 
-var styles = {
-    tag: {
-        border: "1px solid #ddd",
-        background: "#eee",
-        fontSize: 12,
-        display: "inline-block",
-        padding: 5,
-        margin: "0 5px",
-        cursor: "move",
-        borderRadius: 2
-    },
-    remove: {
-        color: "#aaa",
-        marginLeft: 5,
-        cursor: "pointer"
-    }
-}
-
 var Tag = React.createClass({
@@ -63,6 +45,4 @@ mixins: [ReactDND.DragDropMixin],
                       {...this.dragSourceFor(ItemTypes.TAG)}
-                      {...this.dropTargetFor(ItemTypes.TAG)}
-                      style={styles.tag}>{label}
+                      {...this.dropTargetFor(ItemTypes.TAG)}>{label}
                 <a className="ReactTags__remove" 
-                       style={styles.remove}
                        onClick={this.props.onDelete}>x</a>
@@ -69,0 +49,0 @@ </span>

package.json

 {
   "name": "react-tag-input",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React tags is a fantastically simple tagging component for your React projects",
@@ -5,0 +5,0 @@ "main": "dist-modules/reactTags.js",

README.md

@@ -162,2 +162,14 @@ ### React-Tags
 
+### Styling
+`<ReactTags>` does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. The component provides the following classes with which you can style - 
+
+- `ReactTags__tags`
+- `ReactTags__tagInput`
+- `ReactTags__selected`
+- `ReactTags__selected ReactTags__tag`
+- `ReactTags__selected ReactTags__remove`
+- `ReactTags__suggestions`
+
+An example can be found in `/example/reactTags.css`.
+
 ### Dev
@@ -164,0 +176,0 @@ The component is written in ES6 and uses [Webpack](http://webpack.github.io/) as its build tool.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

18

increased by5.88%

Number of lines in readme file

187

increased by6.86%

Worsened metrics

Total package byte prevSize

953934

decreased by-0.1%

Lines of code

14489

decreased by-0.03%

No dependency changes