small fixes and new props

.gitignore

@@ -26,3 +26,6 @@ build/Release
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
 test/manual/bundle.js
+
+#Editors
+.idea

README.md

@@ -43,7 +43,8 @@ The props are very straightforward.
 |placeholder|string|A placeholder will be given in the input box.|Add a tag|
 |getTagStyle|function| A function from the tag text (string) to an object with any or all of the following keys: `base`, `content` and `delete`. The values are React style objects. This example renders 1-letter long tags in red: `text => text.length === 1 ? {base: {color: "red"}} : {}` | () => ({}) |
 |getCreateNewText|function| A function that returns the text to display when the user types an unrecognized tag, given a title and text.| (title, text) => `Create new ${title} "${text}"` |
-|getTagStyle|function| A function from the tag (object with at least the keys `title` and `category`) to an object with any or all of the following keys: `base`, `content` and `delete`. The values are React style objects. This example renders 1-letter long tags in red: `text => text.length === 1 ? {base: {color: "red"}} : {}` | () => ({}) |
+|inputClass|string| Optional, overwrite default class for the <input> element.|cti__input__input|
+|inputAutoSize|bool| Optional, update the <input> size attribute with the text length.|true|
 
 #### The tag object
 Tag objects look like this:
@@ -54,6 +55,7 @@ Tag objects look like this:
 
 }
 ```
+`onChange` will receive an array of tag objects.
 
 #### The category object
 The category object for the dataset looks like this:
@@ -64,6 +66,7 @@ The category object for the dataset looks like this:
   title: 'Title displayed on the category row',
   items: ['Array', 'With', 'Tags'],
   single: optional boolean. If is true the row will be treated as one-valued row. It does not have the option of adding new items to the category
+  addNew: optional boolean. Explicity allow or dissalow for a category to receive new tags, from the user.
 }
 ```
 

categorized-tag-input.css

@@ -66,6 +66,7 @@
 .cti__tag__delete, .cti__tag__content, .cti__tag__content > span {
   display: inline-block;
   vertical-align: middle;
+  white-space: pre;
 }
 
 .cti__tag__delete {

src/CategorizedTagInput.jsx

@@ -30,7 +30,9 @@ const CategorizedTagInput = React.createClass({
     onChange: PropTypes.func,
     placeholder: PropTypes.string,
     getTagStyle: PropTypes.func,
-    getCreateNewText: PropTypes.func
+    getCreateNewText: PropTypes.func,
+    inputClass: PropTypes.string,
+    inputAutoSize: PropTypes.bool
   },
 
   getInitialState() {
@@ -50,7 +52,8 @@ const CategorizedTagInput = React.createClass({
       return {
           onChange(newTags){
             // do nothing
-          }
+          },
+          inputAutoSize: true
       };
   },
 
@@ -234,7 +237,8 @@ const CategorizedTagInput = React.createClass({
           getTagStyle={this.props.getTagStyle}
           tags={this.props.value}
           transformTag={this.props.transformTag}
-          onBlur={this.props.onBlur} ref='input' />
+          onBlur={this.props.onBlur} ref='input' inputClass={this.props.inputClass}
+          inputAutoSize={this.props.inputAutoSize} />
         {this.state.panelOpened && this.state.value.length > 0 ? <Panel categories={this.state.categories}
           selection={this.state.selection} onAdd={this.onAdd}
           input={this.state.value}

src/Input.jsx

@@ -16,7 +16,9 @@ const Input = React.createClass({
     placeholder: PropTypes.string,
     onBlur: PropTypes.func,
     getTagStyle: PropTypes.func,
-    transformTag: PropTypes.func
+    transformTag: PropTypes.func,
+    inputClass: PropTypes.string,
+    inputAutoSize: PropTypes.bool
   },
 
   focusInput() {
@@ -56,18 +58,23 @@ const Input = React.createClass({
 
   render() {
     const placeholder = this.props.placeholder || '';
-    let size = this.props.value.length === 0 ?
-      placeholder.length :
-      this.props.value.length;
+    let extraProps = {};
+
+    if (this.props.inputAutoSize){
+        extraProps["size"] = (this.props.value.length === 0 ?
+          placeholder.length :
+          this.props.value.length) + 2
+    }
+
     return (
       <div className='cti__input' onClick={this.focusInput}>
         {this.getTags()}
         <input type='text' ref='input' value={this.props.value}
-          size={size + 2}
+          {...extraProps}
           onFocus={this.props.openPanel} onBlur={this.onBlur}
           onChange={this.props.onValueChange} onKeyDown={this.props.onKeyDown}
           placeholder={placeholder} aria-label={placeholder}
-          className='cti__input__input' />
+          className={this.props.inputClass === undefined ? 'cti__input__input' : this.props.inputClass} />
         <div className='cti__input__arrow' />
       </div>
     );

src/Panel.jsx

@@ -21,7 +21,7 @@ const Panel = React.createClass({
         <Category key={c.id} items={c.items} category={c.id} title={c.title}
           selected={this.props.selection.category === i}
           selectedItem={this.props.selection.item}
-          input={this.props.input} addNew={this.props.addNew}
+          input={this.props.input} addNew={c.addNew===undefined ? this.props.addNew : !!c.addNew}
           type={c.type} onAdd={this.props.onAdd} single={c.single}
           getTagStyle={this.props.getTagStyle}
           getCreateNewText={this.props.getCreateNewText} />