react-bootstrap-typeahead - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

example/example.js

@@ -5,3 +5,2 @@ 'use strict';
 import ReactDOM from 'react-dom';
-import Token from '../src/Token.react';
 import Typeahead from '../src/Typeahead.react';
@@ -150,3 +149,3 @@
             <h4>Selected State(s)</h4>
-            {selected.map(this._renderSelections)}
+            {selected.map((state) => state.label).join(', ')}
           </div>
@@ -158,15 +157,2 @@ </div>
 
-  _renderSelections(state) {
-    return (
-      <div
-        key={state.id}
-        style={{
-          display: 'inline-block',
-          margin: '0 3px 0 0',
-        }}>
-        <Token>{state.label}</Token>
-      </div>
-    );
-  },
-
   _handleChange(e) {
@@ -173,0 +159,0 @@ const {checked, name} = e.target;

lib/TokenizerInput.react.js

@@ -52,5 +52,9 @@ 'use strict';
 
+  getInitialState: function getInitialState() {
+    return {
+      focused: false
+    };
+  },
   render: function render() {
     var _props = this.props;
-    var className = _props.className;
     var disabled = _props.disabled;
@@ -64,3 +68,3 @@ var placeholder = _props.placeholder;
       {
-        className: (0, _classnames2.default)('bootstrap-tokenizer', 'form-control', 'clearfix', className),
+        className: (0, _classnames2.default)('bootstrap-tokenizer', 'form-control', 'clearfix', { 'focus': this.state.focused }),
         disabled: disabled,
@@ -76,2 +80,3 @@ onClick: this._handleInputFocus,
           border: 0,
+          boxShadow: 'none',
           cursor: 'inherit',
@@ -81,2 +86,3 @@ outline: 'none',
         },
+        onBlur: this._handleBlur,
         onKeyDown: this._handleKeydown,
@@ -105,2 +111,5 @@ placeholder: selected.length ? null : placeholder,
   },
+  _handleBlur: function _handleBlur(e) {
+    this.setState({ focused: false });
+  },
   _handleKeydown: function _handleKeydown(e) {
@@ -135,2 +144,3 @@ switch (e.keyCode) {
     this.refs.input.focus();
+    this.setState({ focused: true });
   }
@@ -137,0 +147,0 @@ });

lib/Typeahead.react.js

@@ -195,3 +195,2 @@ 'use strict';
         placeholder: this.props.placeholder,
-        ref: 'input',
         selected: selectedItems,
@@ -198,0 +197,0 @@ text: inputText

package.json

 {
   "name": "react-bootstrap-typeahead",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "React-based typeahead using the Bootstrap theme",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -73,3 +73,3 @@ # React Bootstrap Typeahead
 ## Example
-An example file is included with the project. Simply open `index.html` in a browser. You can also try the [live example](http://ericgio.github.io/react-bootstrap-typeahead/).
+An example file is included with the NPM module. Simply open `example/index.html` in a browser. If you're using the repository code, you'll need to run `npm run example` to build the example index file. You can then open the HTML file as described above. You can also try the [live example](http://ericgio.github.io/react-bootstrap-typeahead/).
 
@@ -92,6 +92,1 @@ ## Documentation
 selected | array | `[]` | The selected option(s) displayed in the input. Use this prop if you want to control the component via its parent.
-
-## Future Enhancements
-- [ ] Custom `Token` and `MenuItem` rendering
-- [x] Create a new data item on the fly
-- [ ] Test coverage

No alert changes

Improved metrics

Total package byte prevSize

861380

0.1%

Lines of code

15512

0.03%

Worsened metrics

Number of lines in readme file

91

-5.21%

No dependency changes