🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-bootstrap-typeahead

Package Overview
Dependencies
Maintainers
1
Versions
182
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-bootstrap-typeahead - npm Package Compare versions

Comparing version

0.7.2
to
0.8.0

karma.conf.js
lib/getFilteredOptions.js
lib/Menu.react.js
lib/MenuItem.react.js
test/getFilteredOptionsSpec.js
test/MenuItemSpec.js
test/TokenizerInputSpec.js
test/TokenSpec.js
test/TypeaheadInputSpec.js
test/TypeaheadMenuSpec.js
test/TypeaheadSpec.js
tests.webpack.js
webpack.base.config.js

28

example/example.js

@@ -13,2 +13,9 @@ 'use strict';

const Button = props => (
<button
{...props}
className="btn btn-default"
/>
);
const Checkbox = props => (

@@ -148,9 +155,16 @@ <div className="checkbox">

</Checkbox>
<button
className="btn btn-default"
onClick={this._handleClear}>
Clear Input
</button>
</div>
</ExampleSection>
<ExampleSection title="Typeahead Methods">
<div className="btn-toolbar">
<Button
onClick={() => this.refs.typeahead.getInstance().clear()}>
Clear
</Button>
<Button
onClick={() => this.refs.typeahead.getInstance().focus()}>
Focus
</Button>
</div>
</ExampleSection>
<ExampleSection title="Selected Items">

@@ -228,8 +242,4 @@ {this._renderSelectedItems(selected)}

},
_handleClear(e) {
this.refs.typeahead.getInstance().clear();
},
});
ReactDOM.render(<Example />, document.getElementById('root'));

6

lib/TokenizerInput.react.js

@@ -93,2 +93,8 @@ 'use strict';

},
blur: function blur() {
this.refs.input.blur();
},
focus: function focus() {
this._handleInputFocus();
},
_renderToken: function _renderToken(option, idx) {

@@ -95,0 +101,0 @@ var _props2 = this.props;

108

lib/Typeahead.react.js

@@ -7,2 +7,18 @@ 'use strict';

var _pick2 = require('lodash/pick');
var _pick3 = _interopRequireDefault(_pick2);
var _noop2 = require('lodash/noop');
var _noop3 = _interopRequireDefault(_noop2);
var _isEqual2 = require('lodash/isEqual');
var _isEqual3 = _interopRequireDefault(_isEqual2);
var _isEmpty2 = require('lodash/isEmpty');
var _isEmpty3 = _interopRequireDefault(_isEmpty2);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

@@ -26,5 +42,5 @@

var _lodash = require('lodash');
var _getFilteredOptions = require('./getFilteredOptions');
var _keyCode = require('./keyCode');
var _getFilteredOptions2 = _interopRequireDefault(_getFilteredOptions);

@@ -35,4 +51,8 @@ var _reactOnclickoutside = require('react-onclickoutside');

var _keyCode = require('./keyCode');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
/**

@@ -94,5 +114,9 @@ * Typeahead

newSelectionPrefix: _react.PropTypes.string,
/**
* Callback fired when the input is blurred. Receives an event.
*/
onBlur: _react.PropTypes.func,
/**
* Callback for handling selected values.
* Callback fired whenever items are added or removed. Receives an array of
* the selected options.
*/

@@ -116,2 +140,6 @@ onChange: _react.PropTypes.func,

/**
* Prompt displayed when large data sets are paginated.
*/
paginationText: _react.PropTypes.string,
/**
* Placeholder text for the input.

@@ -136,5 +164,5 @@ */

labelKey: 'label',
onBlur: _lodash.noop,
onChange: _lodash.noop,
onInputChange: _lodash.noop,
onBlur: _noop3.default,
onChange: _noop3.default,
onInputChange: _noop3.default,
minLength: 0,

@@ -150,3 +178,3 @@ multiple: false,

var selected = this.props.selected.slice();
if (!(0, _lodash.isEmpty)(defaultSelected)) {
if (!(0, _isEmpty3.default)(defaultSelected)) {
selected = defaultSelected;

@@ -167,3 +195,3 @@ }

if (!(0, _lodash.isEqual)(selected, this.props.selected)) {
if (!(0, _isEqual3.default)(selected, this.props.selected)) {
// If new selections are passed in via props, treat the component as a

@@ -179,4 +207,13 @@ // controlled input.

render: function render() {
var filteredOptions = this._getFilteredOptions();
var _props = this.props;
var options = _props.options;
var props = _objectWithoutProperties(_props, ['options']);
var _state = this.state;
var selected = _state.selected;
var text = _state.text;
var filteredOptions = (0, _getFilteredOptions2.default)(options, text, selected, props);
return _react2.default.createElement(

@@ -191,2 +228,5 @@ 'div',

},
blur: function blur() {
this.refs.input.blur();
},

@@ -217,43 +257,4 @@

},
/**
* Filter out options that don't match the input string or, if multiple
* selections are allowed, that have already been selected.
*/
_getFilteredOptions: function _getFilteredOptions() {
var _props = this.props;
var allowNew = _props.allowNew;
var labelKey = _props.labelKey;
var minLength = _props.minLength;
var multiple = _props.multiple;
var options = _props.options;
var _state = this.state;
var selected = _state.selected;
var text = _state.text;
if (text.length < minLength) {
return [];
}
var filteredOptions = options.filter(function (option) {
var labelString = option[labelKey];
if (!labelString || typeof labelString !== 'string') {
throw new Error('One or more options does not have a valid label string. Please ' + 'check the `labelKey` prop to ensure that it matches the correct ' + 'option key and provides a string for filtering and display.');
}
return !(labelString.toLowerCase().indexOf(text.toLowerCase()) === -1 || multiple && (0, _lodash.find)(selected, option));
});
if (!filteredOptions.length && allowNew && !!text.trim()) {
var newOption = {
id: (0, _lodash.uniqueId)('new-id-'),
customOption: true
};
newOption[labelKey] = text;
filteredOptions = [newOption];
}
return filteredOptions;
focus: function focus() {
this.refs.input.focus();
},

@@ -272,3 +273,3 @@ _renderInput: function _renderInput(filteredOptions) {

var Input = multiple ? _TokenizerInput2.default : _TypeaheadInput2.default;
var inputProps = (0, _lodash.pick)(this.props, ['disabled', 'placeholder']);
var inputProps = (0, _pick3.default)(this.props, ['disabled', 'placeholder']);

@@ -287,2 +288,3 @@ return _react2.default.createElement(Input, _extends({}, inputProps, {

options: filteredOptions,
ref: 'input',
selected: selected.slice(),

@@ -306,3 +308,3 @@ text: text

var menuProps = (0, _lodash.pick)(this.props, ['align', 'emptyLabel', 'maxHeight', 'newSelectionPrefix', 'renderMenuItemChildren']);
var menuProps = (0, _pick3.default)(this.props, ['align', 'emptyLabel', 'maxHeight', 'newSelectionPrefix', 'renderMenuItemChildren']);

@@ -411,3 +413,3 @@ return _react2.default.createElement(_TypeaheadMenu2.default, _extends({}, menuProps, {

selected = selected.filter(function (option) {
return !(0, _lodash.isEqual)(option, removedOption);
return !(0, _isEqual3.default)(option, removedOption);
});

@@ -414,0 +416,0 @@

26

lib/TypeaheadInput.react.js

@@ -7,2 +7,10 @@ 'use strict';

var _pick2 = require('lodash/pick');
var _pick3 = _interopRequireDefault(_pick2);
var _head2 = require('lodash/head');
var _head3 = _interopRequireDefault(_head2);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

@@ -18,4 +26,2 @@

var _lodash = require('lodash');
var _keyCode = require('./keyCode');

@@ -60,3 +66,3 @@

var inputProps = (0, _lodash.pick)(this.props, ['disabled', 'onFocus', 'placeholder']);
var inputProps = (0, _pick3.default)(this.props, ['disabled', 'onFocus', 'placeholder']);

@@ -107,2 +113,8 @@ return _react2.default.createElement(

},
blur: function blur() {
this.refs.input.blur();
},
focus: function focus() {
this._handleInputFocus();
},
_getHintText: function _getHintText() {

@@ -116,3 +128,3 @@ var _props2 = this.props;

var firstOption = (0, _lodash.head)(options);
var firstOption = (0, _head3.default)(options);
var firstOptionString = firstOption && firstOption[labelKey];

@@ -148,3 +160,3 @@

var selectedItem = !!selected.length && (0, _lodash.head)(selected);
var selectedItem = !!selected.length && (0, _head3.default)(selected);
if (selectedItem) {

@@ -170,3 +182,3 @@ return selectedItem[labelKey];

!!selected.length && onRemove((0, _lodash.head)(selected));
!!selected.length && onRemove((0, _head3.default)(selected));

@@ -210,3 +222,3 @@ this.props.onChange(e.target.value);

var selectedOption = hasHintText ? (0, _lodash.head)(options) : options[activeIndex];
var selectedOption = hasHintText ? (0, _head3.default)(options) : options[activeIndex];

@@ -213,0 +225,0 @@ onAdd && onAdd(selectedOption);

148

lib/TypeaheadMenu.react.js

@@ -7,4 +7,6 @@ 'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactHighlighter = require('react-highlighter');

@@ -18,60 +20,12 @@

var _reactDom = require('react-dom');
var _Menu = require('./Menu.react');
var _classnames = require('classnames');
var _Menu2 = _interopRequireDefault(_Menu);
var _classnames2 = _interopRequireDefault(_classnames);
var _MenuItem = require('./MenuItem.react');
var _MenuItem2 = _interopRequireDefault(_MenuItem);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Menu = function Menu(props) {
return _react2.default.createElement(
'ul',
_extends({}, props, {
className: (0, _classnames2.default)('dropdown-menu', props.className) }),
props.children
);
};
var MenuItem = _react2.default.createClass({
displayName: 'MenuItem',
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.active) {
(0, _reactDom.findDOMNode)(this).firstChild.focus();
}
},
render: function render() {
var _props = this.props;
var active = _props.active;
var children = _props.children;
var className = _props.className;
var disabled = _props.disabled;
return _react2.default.createElement(
'li',
{
className: (0, _classnames2.default)({
'active': active,
'disabled': disabled
}, className) },
_react2.default.createElement(
'a',
{ href: '#', onClick: this._handleClick },
children
)
);
},
_handleClick: function _handleClick(e) {
var _props2 = this.props;
var disabled = _props2.disabled;
var onClick = _props2.onClick;
e.preventDefault();
!disabled && onClick && onClick();
}
});
var TypeaheadMenu = _react2.default.createClass({

@@ -89,2 +43,3 @@ displayName: 'TypeaheadMenu',

options: _react.PropTypes.array,
paginationText: _react.PropTypes.string,
renderMenuItemChildren: _react.PropTypes.func,

@@ -100,3 +55,4 @@ text: _react.PropTypes.string.isRequired

maxHeight: 300,
newSelectionPrefix: 'New selection:'
newSelectionPrefix: 'New selection:',
paginationText: 'Display additional results...'
};

@@ -115,6 +71,7 @@ },

render: function render() {
var _props3 = this.props;
var align = _props3.align;
var maxHeight = _props3.maxHeight;
var options = _props3.options;
var _props = this.props;
var align = _props.align;
var emptyLabel = _props.emptyLabel;
var maxHeight = _props.maxHeight;
var options = _props.options;

@@ -124,26 +81,10 @@ // Render the max number of results or all results.

var results = options.slice(0, this.state.resultCount || options.length);
results = results.length ? results.map(this._renderMenuItem) : _react2.default.createElement(
MenuItem,
var menuItems = results.length ? results.map(this._renderMenuItem) : _react2.default.createElement(
_MenuItem2.default,
{ disabled: true },
this.props.emptyLabel
emptyLabel
);
// Allow user to see more results, if available.
var paginationItem = void 0;
var separator = void 0;
if (results.length < options.length) {
paginationItem = _react2.default.createElement(
MenuItem,
{
className: 'bootstrap-typeahead-menu-paginator',
onClick: this._handlePagination },
'Display next ',
this.props.initialResultCount,
' results...'
);
separator = _react2.default.createElement('li', { className: 'divider', role: 'separator' });
}
return _react2.default.createElement(
Menu,
_Menu2.default,
{

@@ -158,15 +99,14 @@ className: (0, _classnames2.default)('bootstrap-typeahead-menu', {

} },
results,
separator,
paginationItem
menuItems,
this._renderPaginationMenuItem(results)
);
},
_renderMenuItem: function _renderMenuItem(option, idx) {
var _props4 = this.props;
var activeIndex = _props4.activeIndex;
var labelKey = _props4.labelKey;
var newSelectionPrefix = _props4.newSelectionPrefix;
var _onClick = _props4.onClick;
var renderMenuItemChildren = _props4.renderMenuItemChildren;
var text = _props4.text;
var _props2 = this.props;
var activeIndex = _props2.activeIndex;
var labelKey = _props2.labelKey;
var newSelectionPrefix = _props2.newSelectionPrefix;
var _onClick = _props2.onClick;
var renderMenuItemChildren = _props2.renderMenuItemChildren;
var text = _props2.text;

@@ -183,7 +123,7 @@

return renderMenuItemChildren ? _react2.default.createElement(
MenuItem,
_MenuItem2.default,
menuItemProps,
renderMenuItemChildren(this.props, option, idx)
) : _react2.default.createElement(
MenuItem,
_MenuItem2.default,
menuItemProps,

@@ -198,2 +138,28 @@ option.customOption && newSelectionPrefix + ' ',

},
/**
* Allow user to see more results, if available.
*/
_renderPaginationMenuItem: function _renderPaginationMenuItem(results) {
var _props3 = this.props;
var options = _props3.options;
var paginationText = _props3.paginationText;
if (results.length < options.length) {
return [_react2.default.createElement('li', {
className: 'divider',
key: 'pagination-item-divider',
role: 'separator'
}), _react2.default.createElement(
_MenuItem2.default,
{
className: 'bootstrap-typeahead-menu-paginator',
key: 'pagination-item',
onClick: this._handlePagination },
paginationText
)];
}
},
_handlePagination: function _handlePagination(e) {

@@ -200,0 +166,0 @@ var resultCount = this.state.resultCount + this.props.initialResultCount;

47

package.json
{
"name": "react-bootstrap-typeahead",
"version": "0.7.2",
"version": "0.8.0",
"description": "React-based typeahead using the Bootstrap theme",

@@ -13,4 +13,4 @@ "main": "lib/index.js",

"lint": "eslint .",
"prepublish": "npm run lint && npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
"prepublish": "npm run lint && npm test && npm run build",
"test": "./node_modules/karma/bin/karma start karma.conf.js"
},

@@ -32,3 +32,3 @@ "keywords": [

"classnames": "^2.2.0",
"lodash": "^4.12.0",
"lodash": "^4.14.0",
"react-highlighter": "^0.3.3",

@@ -43,16 +43,27 @@ "react-input-autosize": "^1.1.0",

"devDependencies": {
"babel": "^6.3.26",
"babel-cli": "^6.4.5",
"babel-core": "^5.8.35",
"babel-eslint": "^6.0.2",
"babel-loader": "^5.3.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "^0.21.0",
"eslint": "^2.8.0",
"eslint-plugin-react": "^4.2.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
"babel": "^6.5.2",
"babel-cli": "^6.11.4",
"babel-core": "^6.11.4",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-plugin-lodash": "^3.2.6",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"chai": "^3.5.0",
"css-loader": "^0.23.1",
"eslint": "^3.1.1",
"eslint-plugin-react": "^5.2.2",
"karma": "^1.1.2",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^1.0.1",
"karma-mocha": "^1.1.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"lodash-webpack-plugin": "^0.9.3",
"mocha": "^2.5.3",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.1"
},

@@ -59,0 +70,0 @@ "repository": {

20

README.md

@@ -87,9 +87,7 @@ # React Bootstrap Typeahead

## Public Methods
### `clear()`
The `clear` method provides an easy way to externally reset the input. Calling the method will clear both text and selection(s). To use the method, add a ref to your typeahead instance:
To access the component's public methods, add a ref to your typeahead instance:
```
<Typeahead ref="typeahead" ... />
```
You can then access the ref from a handler function:
then access the ref from your handler:
```

@@ -100,4 +98,14 @@ <button onClick={() => this.refs.typeahead.getInstance().clear()}>

```
Note that you *must* use `getInstance` to get the typeahead instance. This is because `react-bootstrap-typeahead` is wrapped by the [`react-onclickoutside`](https://github.com/Pomax/react-onclickoutside) higher-order component, so the `clear` method is not directly available. See [`react-onclickoutside`'s documentation](https://github.com/Pomax/react-onclickoutside#but-how-can-i-access-my-component-it-has-an-api-that-i-rely-on) for more.
Note that you *must* use `getInstance` to get the typeahead instance. This is because `react-bootstrap-typeahead` is wrapped by the [`react-onclickoutside`](https://github.com/Pomax/react-onclickoutside) higher-order component, so the `clear` method is not directly available. See [`react-onclickoutside`'s documentation](https://github.com/Pomax/react-onclickoutside#but-how-can-i-access-my-component-it-has-an-api-that-i-rely-on) for more information.
### `blur()`
Provides a programmatic way to blur the input.
### `clear()`
Provides a programmatic way to reset the input. Calling the method will clear both text and selection(s).
### `focus()`
Provides a programmatic way to focus the input.
## Props

@@ -120,2 +128,4 @@ Name | Type | Default | Description

options `required` | array | | Full set of options, including any pre-selected options.
paginateResults | number | 100 | For large option sets, initially display a subset of results for improved performance. If users scroll to the end, the last item will be a link to display the next set of results. Value represents the number of results to display. `0` will display all results.
paginationText | string | 'Display additional results...' | Prompt displayed when large data sets are paginated.
placeholder | string | | Placeholder text for the input.

@@ -122,0 +132,0 @@ renderMenuItemChildren | function | | Provides a hook for customized rendering of menu item contents.

.eslintignore

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

dist/react-bootstrap-typeahead.js

Sorry, the diff of this file is too big to display

dist/react-bootstrap-typeahead.min.js

Sorry, the diff of this file is too big to display

example/index.js

Sorry, the diff of this file is too big to display