Update to v0.1.6

Author: ericgio

build/react-bootstrap-typeahead.js

@@ -51,7 +51,7 @@ var Token = _react2.default.createClass({
     };
   },
   render: function render() {
-    return this.props.onRemove ? this._renderRemoveableToken() : this._renderToken();
+    return this.props.onRemove && !this.props.disabled ? this._renderRemoveableToken() : this._renderToken();
   },
   _renderRemoveableToken: function _renderRemoveableToken() {
     return _react2.default.createElement(
@@ -68,25 +68,30 @@ var Token = _react2.default.createClass({
       this.props.children,
       _react2.default.createElement(
         'span',
-        { className: 'token-close-button', onClick: this._handleRemove },
+        { className: 'close-button', onClick: this._handleRemove },
         '×'
       )
     );
   },
   _renderToken: function _renderToken() {
-    var classnames = (0, _classnames2.default)('token', this.props.className);
+    var _props = this.props;
+    var className = _props.className;
+    var disabled = _props.disabled;
+    var href = _props.href;
 
-    if (this.props.href) {
+    var classnames = (0, _classnames2.default)('token', className);
+
+    if (href) {
       return _react2.default.createElement(
         'a',
-        { className: classnames, href: this.props.href },
+        { className: classnames, disabled: disabled, href: href },
         this.props.children
       );
     }
 
     return _react2.default.createElement(
       'div',
-      { className: classnames },
+      { className: classnames, disabled: disabled },
       this.props.children
     );
   },

build/react-bootstrap-typeahead.js.map

@@ -32,18 +32,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var PropTypes = _react2.default.PropTypes;
 
-require('../css/Tokenizer.css');
-
 /**
  * TokenizerInput
  *
  * Accepts multiple selections from a Typeahead component and renders them as
  * tokens within an input.
  */
+
 var TokenizerInput = _react2.default.createClass({
   displayName: 'TokenizerInput',
 
   propTypes: {
+    disabled: PropTypes.bool,
     labelKey: PropTypes.string,
     /**
      * Input element placeholder text.
@@ -55,6 +55,7 @@ var TokenizerInput = _react2.default.createClass({
   render: function render() {
     var _props = this.props;
     var className = _props.className;
+    var disabled = _props.disabled;
     var placeholder = _props.placeholder;
     var selected = _props.selected;
     var text = _props.text;
@@ -63,15 +64,17 @@ var TokenizerInput = _react2.default.createClass({
       'div',
       {
         className: (0, _classnames2.default)('bootstrap-tokenizer', 'form-control', 'clearfix', className),
+        disabled: disabled,
         onClick: this._handleInputFocus,
         onFocus: this._handleInputFocus,
-        tabIndex: 0 },
+        tabIndex: disabled ? -1 : 0 },
       selected.map(this._renderToken),
       _react2.default.createElement(_reactInputAutosize2.default, _extends({}, this.props, {
         className: 'bootstrap-tokenizer-input',
         inputStyle: {
           backgroundColor: 'inherit',
           border: 0,
+          cursor: 'inherit',
           outline: 'none',
           padding: 0
         },
@@ -85,12 +88,14 @@ var TokenizerInput = _react2.default.createClass({
   },
   _renderToken: function _renderToken(option, idx) {
     var _props2 = this.props;
-    var onRemove = _props2.onRemove;
+    var disabled = _props2.disabled;
     var labelKey = _props2.labelKey;
+    var onRemove = _props2.onRemove;
 
     return _react2.default.createElement(
       _Token2.default,
       {
+        disabled: disabled,
         key: idx,
         onRemove: onRemove.bind(null, option) },
       option[labelKey]
@@ -118,7 +123,12 @@ var TokenizerInput = _react2.default.createClass({
     this.props.onKeyDown && this.props.onKeyDown(e);
   },
 
-  _handleInputFocus: function _handleInputFocus(e) {
+  _handleInputFocus: function _handleInputFocus(e, e2, e3) {
+    if (this.props.disabled) {
+      e.target.blur();
+      return;
+    }
+
     // If the user clicks anywhere inside the tokenizer besides a token,
     // focus the input.
     this.refs.input.focus();

build/react-bootstrap-typeahead.min.js

@@ -43,7 +43,22 @@ var Typeahead = _react2.default.createClass({
   mixins: [_reactOnclickoutside2.default],
 
   propTypes: {
+    /**
+     * Allows the creation of new selections on the fly. Note that any new items
+     * will be added to the list of selections, but not the list of original
+     * options unless handled as such by `Typeahead`'s parent.
+     */
+    allowNew: PropTypes.bool,
+    /**
+     * Specify any pre-selected options. Use only if you want the component to
+     * be uncontrolled.
+     */
     defaultSelected: PropTypes.array,
+    /**
+     * Whether to disable the input. Will also disable selections when
+     * `multiple={true}`.
+     */
+    disabled: PropTypes.bool,
     /**
      * Message to display in the menu if there are no valid results.
      */
@@ -53,21 +68,37 @@ var Typeahead = _react2.default.createClass({
      * will use the `label` key.
      */
     labelKey: PropTypes.string,
+    /**
+     * Maximum height of the dropdown menu, in px.
+     */
     maxHeight: PropTypes.number,
     /**
      * Whether or not multiple selections are allowed.
      */
     multiple: PropTypes.bool,
+    /**
+     * Provides the ability to specify a prefix before the user-entered text to
+     * indicate that the selection will be new. No-op unless `allowNew={true}`.
+     */
+    newSelectionPrefix: PropTypes.string,
     /**
      * Full set of options, including pre-selected options.
      */
     options: PropTypes.array.isRequired,
+    /**
+     * Placeholder text for the input.
+     */
     placeholder: PropTypes.string,
+    /**
+     * The selected option(s) displayed in the input. Use this prop if you want
+     * to control the component via its parent.
+     */
     selected: PropTypes.array
   },
 
   getDefaultProps: function getDefaultProps() {
     return {
+      allowNew: false,
       defaultSelected: [],
       labelKey: 'label',
       multiple: false,
@@ -114,6 +145,15 @@ var Typeahead = _react2.default.createClass({
       return !(option[labelKey].toLowerCase().indexOf(text.toLowerCase()) === -1 || multiple && (0, _lodash.find)(selected, option));
     });
 
+    if (!filteredOptions.length && this.props.allowNew) {
+      var newOption = {
+        id: (0, _lodash.uniqueId)('new-id-'),
+        customOption: true
+      };
+      newOption[labelKey] = text;
+      filteredOptions = [newOption];
+    }
+
     var menu = undefined;
     if (this.state.showMenu) {
       menu = _react2.default.createElement(_TypeaheadMenu2.default, {
@@ -140,6 +180,7 @@ var Typeahead = _react2.default.createClass({
         className: 'bootstrap-typeahead open',
         style: { position: 'relative' } },
       _react2.default.createElement(InputComponent, {
+        disabled: this.props.disabled,
         filteredOptions: filteredOptions,
         labelKey: labelKey,
         onAdd: this._handleAddOption,

build/react-bootstrap-typeahead.min.js.map

@@ -28,19 +28,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var PropTypes = _react2.default.PropTypes;
 
-require('../css/Typeahead.css');
-
 /**
  * TypeaheadInput
  *
  * Handles a single selection from the Typeahead component.
  */
+
 var TypeaheadInput = _react2.default.createClass({
   displayName: 'TypeaheadInput',
 
   mixins: [_reactOnclickoutside2.default],
 
   propTypes: {
+    disabled: PropTypes.bool,
     filteredOptions: PropTypes.array,
     labelKey: PropTypes.string,
     onChange: PropTypes.func,
@@ -55,6 +55,7 @@ var TypeaheadInput = _react2.default.createClass({
         className: (0, _classnames2.default)('bootstrap-typeahead-input', this.props.className),
         onClick: this._handleInputFocus,
         onFocus: this._handleInputFocus,
+        style: { outline: 'none' },
         tabIndex: 0 },
       _react2.default.createElement('input', _extends({}, this.props, {
         className: (0, _classnames2.default)('bootstrap-typeahead-input-main', 'form-control', {
@@ -63,7 +64,7 @@ var TypeaheadInput = _react2.default.createClass({
         onKeyDown: this._handleKeydown,
         ref: 'input',
         style: {
-          backgroundColor: 'transparent',
+          backgroundColor: !this.props.disabled && 'transparent',
           display: 'block',
           position: 'relative',
           zIndex: 1
@@ -76,6 +77,7 @@ var TypeaheadInput = _react2.default.createClass({
         style: {
           borderColor: 'transparent',
           bottom: 0,
+          boxShadow: 'none',
           display: 'block',
           position: 'absolute',
           top: 0,

lib/Token.react.js

@@ -70,13 +70,15 @@ var TypeaheadMenu = _react2.default.createClass({
     emptyLabel: PropTypes.string,
     labelKey: PropTypes.string.isRequired,
     maxHeight: PropTypes.number,
+    newSelectionPrefix: PropTypes.string,
     options: PropTypes.array
   },
 
   getDefaultProps: function getDefaultProps() {
     return {
       emptyLabel: 'No matches found.',
-      maxHeight: 300
+      maxHeight: 300,
+      newSelectionPrefix: 'New selection:'
     };
   },
   render: function render() {
@@ -103,15 +105,21 @@ var TypeaheadMenu = _react2.default.createClass({
   _renderDropdownItem: function _renderDropdownItem(option, idx) {
     var _props2 = this.props;
     var activeIndex = _props2.activeIndex;
+    var newSelectionPrefix = _props2.newSelectionPrefix;
     var onClick = _props2.onClick;
 
+    var label = option[this.props.labelKey];
+    if (option.customOption) {
+      label = newSelectionPrefix + ' ' + label;
+    }
+
     return _react2.default.createElement(
       MenuItem,
       {
         active: idx === activeIndex,
         key: idx,
         onClick: onClick.bind(null, option) },
-      option[this.props.labelKey]
+      label
     );
   }
 });

lib/TokenizerInput.react.js

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-typeahead",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React-based typeahead using the Bootstrap theme",
   "main": "index.js",
   "directories": {