` allows,
64 | eg. `ButtonAfter`.
65 |
66 | IMPORTANT NOTE ABOUT CSS
67 | ------------------------
68 |
69 | You need to turn off Bootstrap's hover highlighting css for this element;
70 | we do it manually using the active class instead. You may also need to re-enable
71 | the hover highlighting on the active class. Eg. in sass, add this:
72 |
73 | .dropdown-input.dropdown-menu > li > a {
74 | &:hover,
75 | &:focus {
76 | color: $dropdown-link-color; // #333
77 | background-color: $dropdown-bg; // #fff
78 | }
79 | }
80 | .dropdown-input.dropdown-menu > .active > a {
81 | &:hover,
82 | &:focus {
83 | text-decoration: none;
84 | color: $dropdown-link-hover-color; // #fff
85 | background-color: $dropdown-link-hover-bg; // #337ab7
86 | }
87 | }
88 |
89 | If you're showing `maxText`, you may also want to make sure it can't be selected too:
90 |
91 | .dropdown-input.dropdown-menu>.active.disabled>a {
92 | text-decoration: none;
93 | color: $dropdown-link-disabled-color; // #777
94 | background-color: $dropdown-bg; // #fff
95 | }
96 |
97 | ## Release History
98 |
99 | * 0.1.0 Initial release
100 | * 0.1.1 Point to js (not jsx), update README
101 | * 0.1.2 Update example
102 | * 0.1.3 Align package.json version number with git tag
103 | * 0.1.4 Added maxText property
104 | * 0.1.5 Added eslint to dev
105 | * 0.1.6 Corrected number not shown
106 | * 0.1.7 Don't pass options and menuClassName props through to Input
107 | * 0.1.8 Added working tests using jest
108 | * 0.1.9 Use self-closing tag in ReadMe
109 | * 0.1.10 Remove extra comments, rename var as DropdownInput
110 | * 0.1.11 Prevent form submission if open
111 |
--------------------------------------------------------------------------------
/src/DropdownInput.js:
--------------------------------------------------------------------------------
1 | //
2 | // react-dropdown-input
3 | // Displays a ReactBootstrap.Input element
4 | // with a ReactBootstrap.DropdownMenu of possible options.
5 | //
6 |
7 | 'use strict';
8 |
9 | var React = require('react/addons');
10 | var ReactBootstrap = require('react-bootstrap');
11 | var joinClasses = require('react/lib/joinClasses');
12 | var cx = require('classnames');
13 |
14 | var BootstrapMixin = ReactBootstrap.BootstrapMixin;
15 | var DropdownStateMixin = ReactBootstrap.DropdownStateMixin;
16 | var DropdownMenu = ReactBootstrap.DropdownMenu;
17 | var Input = ReactBootstrap.Input;
18 | var MenuItem = ReactBootstrap.MenuItem;
19 |
20 | var defaultMaxText = '+# more not shown';
21 |
22 | var defaultFilter = function(filterText, optionName) { // also optionIndex as third arg
23 | return (optionName.toLowerCase().indexOf(filterText.toLowerCase()) >= 0);
24 | };
25 |
26 | var genLength = function(list) {
27 | // deal with both regular arrays and immutablejs objects, which have .count() instead of length
28 | return (typeof list.count !== 'undefined' ? list.count() : list.length);
29 | };
30 |
31 | var genGet = function(list, i) {
32 | // deal with both regular arrays and immutablejs objects, which have list.get(i) instead of list[i]
33 | return (typeof list.get !== 'undefined' ? list.get(i) : list[i]);
34 | };
35 |
36 | var caseInsensIndexOf = function(list, str) {
37 | var lowerList = list.map(function(item) { return item.toLowerCase(); });
38 | return lowerList.indexOf(str.toLowerCase());
39 | };
40 |
41 |
42 | var DropdownInput = React.createClass({
43 |
44 | mixins: [BootstrapMixin, DropdownStateMixin],
45 |
46 | propTypes: {
47 | pullRight: React.PropTypes.bool,
48 | dropup: React.PropTypes.bool,
49 | defaultValue: React.PropTypes.string,
50 | menuClassName: React.PropTypes.string,
51 | max: React.PropTypes.number,
52 | maxText: React.PropTypes.string,
53 | onChange: React.PropTypes.func,
54 | onSelect: React.PropTypes.func,
55 | navItem: React.PropTypes.bool,
56 | options: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]).isRequired,
57 | filter: React.PropTypes.func,
58 | // the rest are to make eslint happy
59 | id: React.PropTypes.string,
60 | className: React.PropTypes.string,
61 | bsSize: React.PropTypes.string
62 | },
63 |
64 | getInitialState: function () {
65 | return {
66 | value: this.props.defaultValue || '',
67 | activeIndex: -1
68 | };
69 | },
70 |
71 | filteredOptions: function() {
72 | var filter = this.props.filter || defaultFilter;
73 | return this.props.options.filter(filter.bind(undefined, this.state.value));
74 | },
75 |
76 | cappedLength: function(options) {
77 | var total = genLength(options);
78 | if (total>this.props.max) {
79 | // if it exceeded the max, we took an extra one off
80 | total = this.props.max - 1;
81 | }
82 | return total;
83 | },
84 |
85 | render: function () {
86 | var classes = {
87 | 'dropdown': true,
88 | 'open': this.state.open,
89 | 'dropup': this.props.dropup
90 | };
91 | // you can provide a filter prop, which is a function(filterText, optionName, optionIndex) which should
92 | // return true to show option with the given name and index, given the input filterText.
93 | var filteredOptions = this.filteredOptions();
94 | var numFiltered = genLength(filteredOptions);
95 | var maxMenuItem = null;
96 | var maxText = typeof this.props.maxText === 'undefined' ? defaultMaxText : this.props.maxText;
97 | if (this.props.max && numFiltered > this.props.max) {
98 | // take an extra one off, to leave space for the maxText
99 | filteredOptions = filteredOptions.slice(0, this.props.max - 1);
100 | maxText = maxText.replace('#', (numFiltered - this.props.max + 1));
101 | maxMenuItem = this.renderAsMenuItem(maxText, this.props.max, null, true);
102 | }
103 | var dropdown = null;
104 | if (numFiltered>0) {
105 | dropdown = (
112 | {filteredOptions.map(this.renderAsMenuItem)}
113 | {maxMenuItem}
114 | );
115 | }
116 | return (
117 |
118 |
135 | {dropdown}
136 |
137 | );
138 | },
139 |
140 | renderAsMenuItem: function(item, index, options, disabled) {
141 | var start = item.toLowerCase().indexOf(this.state.value.toLowerCase()),
142 | end = start + this.state.value.length,
143 | part1 = item.slice(0, start),
144 | part2 = item.slice(start, end),
145 | part3 = item.slice(end);
146 | var classes = cx({active: this.state.activeIndex===index, disabled: disabled===true});
147 | if (disabled) {
148 | // don't highlight parts of disabled items, eg. the maxText
149 | part1 = item;
150 | part2 = null;
151 | part3 = null;
152 | }
153 | return (
154 |
161 | );
162 | },
163 |
164 | handleInputChange: function(e) {
165 | // the user changed the input text
166 | this.setState({value: e.target.value, activeIndex: -1});
167 | this.setDropdownState(true);
168 | // fire the supplied onChange event.
169 | this.sendChange({value: e.target.value});
170 | },
171 |
172 | handleKeyDown: function(e) {
173 | // catch arrow keys and the Enter key
174 | var filteredOptions = this.filteredOptions();
175 | var numOptions = this.cappedLength(filteredOptions);
176 | var newName;
177 | switch(e.keyCode){
178 |
179 | case 38: // up arrow
180 | if (this.state.activeIndex>0) {
181 | this.setState({activeIndex: this.state.activeIndex-1});
182 | } else {
183 | this.setState({activeIndex: numOptions-1});
184 | }
185 | break;
186 |
187 | case 40: // down arrow
188 | this.setState({activeIndex: (this.state.activeIndex+1) % numOptions});
189 | break;
190 |
191 | case 13: // enter
192 | var newIndex = caseInsensIndexOf(this.props.options, this.state.value); // may need this
193 | if (this.state.open) {
194 | e.preventDefault();
195 | }
196 | if (this.state.activeIndex >= 0 && this.state.activeIndex < numOptions) {
197 | newIndex = this.state.activeIndex;
198 | newName = genGet(filteredOptions, this.state.activeIndex);
199 | this.setDropdownState(false);
200 | } else if (this.state.activeIndex === -1 && newIndex >= 0) {
201 | newName = genGet(this.props.options, newIndex);
202 | this.setDropdownState(false);
203 | } else {
204 | newIndex = this.state.activeIndex;
205 | newName = this.state.value;
206 | }
207 | this.sendSelect({value: newName, index: newIndex});
208 | this.sendChange({value: newName});
209 | this.setState({value: newName, activeIndex: -1});
210 | break;
211 |
212 | }
213 | },
214 |
215 | handleMouseEnter: function(index) {
216 | // when the mouse enters a dropdown menu item, set the active item to the item
217 | this.setState({activeIndex: index});
218 | },
219 |
220 | handleDropdownClick: function (e) {
221 | e.preventDefault();
222 |
223 | this.setDropdownState(!this.state.open);
224 | },
225 |
226 | handleOptionSelect: function(key, name) {
227 | // the user clicked on a dropdown menu item
228 | this.setDropdownState(false);
229 | this.sendSelect({value: name, index: this.state.activeIndex});
230 | this.sendChange({value: name});
231 | this.setState({value: name, activeIndex: -1});
232 | },
233 |
234 | sendChange: function(e) {
235 | if (this.props.onChange) {
236 | this.props.onChange(e);
237 | }
238 | },
239 |
240 | sendSelect: function(e) {
241 | if (this.props.onSelect) {
242 | this.props.onSelect(e);
243 | }
244 | }
245 |
246 |
247 | });
248 |
249 | module.exports = DropdownInput;
250 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | //
2 | // react-dropdown-input
3 | // Displays a ReactBootstrap.Input element
4 | // with a ReactBootstrap.DropdownMenu of possible options.
5 | //
6 |
7 | "use strict";
8 |
9 | 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; };
10 |
11 | var React = require("react/addons");
12 | var ReactBootstrap = require("react-bootstrap");
13 | var joinClasses = require("react/lib/joinClasses");
14 | var cx = require("classnames");
15 |
16 | var BootstrapMixin = ReactBootstrap.BootstrapMixin;
17 | var DropdownStateMixin = ReactBootstrap.DropdownStateMixin;
18 | var DropdownMenu = ReactBootstrap.DropdownMenu;
19 | var Input = ReactBootstrap.Input;
20 | var MenuItem = ReactBootstrap.MenuItem;
21 |
22 | var defaultMaxText = "+# more not shown";
23 |
24 | var defaultFilter = function defaultFilter(filterText, optionName) {
25 | // also optionIndex as third arg
26 | return optionName.toLowerCase().indexOf(filterText.toLowerCase()) >= 0;
27 | };
28 |
29 | var genLength = function genLength(list) {
30 | // deal with both regular arrays and immutablejs objects, which have .count() instead of length
31 | return typeof list.count !== "undefined" ? list.count() : list.length;
32 | };
33 |
34 | var genGet = function genGet(list, i) {
35 | // deal with both regular arrays and immutablejs objects, which have list.get(i) instead of list[i]
36 | return typeof list.get !== "undefined" ? list.get(i) : list[i];
37 | };
38 |
39 | var caseInsensIndexOf = function caseInsensIndexOf(list, str) {
40 | var lowerList = list.map(function (item) {
41 | return item.toLowerCase();
42 | });
43 | return lowerList.indexOf(str.toLowerCase());
44 | };
45 |
46 | var DropdownInput = React.createClass({
47 | displayName: "DropdownInput",
48 |
49 | mixins: [BootstrapMixin, DropdownStateMixin],
50 |
51 | propTypes: {
52 | pullRight: React.PropTypes.bool,
53 | dropup: React.PropTypes.bool,
54 | defaultValue: React.PropTypes.string,
55 | menuClassName: React.PropTypes.string,
56 | max: React.PropTypes.number,
57 | maxText: React.PropTypes.string,
58 | onChange: React.PropTypes.func,
59 | onSelect: React.PropTypes.func,
60 | navItem: React.PropTypes.bool,
61 | options: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]).isRequired,
62 | filter: React.PropTypes.func,
63 | // the rest are to make eslint happy
64 | id: React.PropTypes.string,
65 | className: React.PropTypes.string,
66 | bsSize: React.PropTypes.string
67 | },
68 |
69 | getInitialState: function getInitialState() {
70 | return {
71 | value: this.props.defaultValue || "",
72 | activeIndex: -1
73 | };
74 | },
75 |
76 | filteredOptions: function filteredOptions() {
77 | var filter = this.props.filter || defaultFilter;
78 | return this.props.options.filter(filter.bind(undefined, this.state.value));
79 | },
80 |
81 | cappedLength: function cappedLength(options) {
82 | var total = genLength(options);
83 | if (total > this.props.max) {
84 | // if it exceeded the max, we took an extra one off
85 | total = this.props.max - 1;
86 | }
87 | return total;
88 | },
89 |
90 | render: function render() {
91 | var classes = {
92 | dropdown: true,
93 | open: this.state.open,
94 | dropup: this.props.dropup
95 | };
96 | // you can provide a filter prop, which is a function(filterText, optionName, optionIndex) which should
97 | // return true to show option with the given name and index, given the input filterText.
98 | var filteredOptions = this.filteredOptions();
99 | var numFiltered = genLength(filteredOptions);
100 | var maxMenuItem = null;
101 | var maxText = typeof this.props.maxText === "undefined" ? defaultMaxText : this.props.maxText;
102 | if (this.props.max && numFiltered > this.props.max) {
103 | // take an extra one off, to leave space for the maxText
104 | filteredOptions = filteredOptions.slice(0, this.props.max - 1);
105 | maxText = maxText.replace("#", numFiltered - this.props.max + 1);
106 | maxMenuItem = this.renderAsMenuItem(maxText, this.props.max, null, true);
107 | }
108 | var dropdown = null;
109 | if (numFiltered > 0) {
110 | dropdown = React.createElement(
111 | DropdownMenu,
112 | {
113 | className: this.props.menuClassName,
114 | ref: "menu",
115 | "aria-labelledby": this.props.id,
116 | pullRight: this.props.pullRight,
117 | key: 1,
118 | onSelect: null },
119 | filteredOptions.map(this.renderAsMenuItem),
120 | maxMenuItem
121 | );
122 | }
123 | return React.createElement(
124 | "div",
125 | { className: joinClasses(this.props.className, cx(classes)) },
126 | React.createElement(Input, _extends({}, this.props, {
127 | menuClassName: null,
128 | options: null,
129 | type: "text",
130 | bsSize: this.props.bsSize,
131 | ref: "dropdownInput",
132 | onClick: this.handleDropdownClick,
133 | key: 0,
134 | navDropdown: this.props.navItem,
135 | navItem: null,
136 | pullRight: null,
137 | onSelect: null,
138 | onChange: this.handleInputChange,
139 | onKeyDown: this.handleKeyDown,
140 | dropup: null,
141 | value: this.state.value })),
142 | dropdown
143 | );
144 | },
145 |
146 | renderAsMenuItem: function renderAsMenuItem(item, index, options, disabled) {
147 | var start = item.toLowerCase().indexOf(this.state.value.toLowerCase()),
148 | end = start + this.state.value.length,
149 | part1 = item.slice(0, start),
150 | part2 = item.slice(start, end),
151 | part3 = item.slice(end);
152 | var classes = cx({ active: this.state.activeIndex === index, disabled: disabled === true });
153 | if (disabled) {
154 | // don't highlight parts of disabled items, eg. the maxText
155 | part1 = item;
156 | part2 = null;
157 | part3 = null;
158 | }
159 | return React.createElement(
160 | MenuItem,
161 | {
162 | key: index,
163 | onSelect: this.handleOptionSelect.bind(this, index, item),
164 | className: classes,
165 | onMouseEnter: this.handleMouseEnter.bind(this, index) },
166 | part1,
167 | React.createElement(
168 | "b",
169 | null,
170 | part2
171 | ),
172 | part3
173 | );
174 | },
175 |
176 | handleInputChange: function handleInputChange(e) {
177 | // the user changed the input text
178 | this.setState({ value: e.target.value, activeIndex: -1 });
179 | this.setDropdownState(true);
180 | // fire the supplied onChange event.
181 | this.sendChange({ value: e.target.value });
182 | },
183 |
184 | handleKeyDown: function handleKeyDown(e) {
185 | // catch arrow keys and the Enter key
186 | var filteredOptions = this.filteredOptions();
187 | var numOptions = this.cappedLength(filteredOptions);
188 | var newName;
189 | switch (e.keyCode) {
190 |
191 | case 38:
192 | // up arrow
193 | if (this.state.activeIndex > 0) {
194 | this.setState({ activeIndex: this.state.activeIndex - 1 });
195 | } else {
196 | this.setState({ activeIndex: numOptions - 1 });
197 | }
198 | break;
199 |
200 | case 40:
201 | // down arrow
202 | this.setState({ activeIndex: (this.state.activeIndex + 1) % numOptions });
203 | break;
204 |
205 | case 13:
206 | // enter
207 | var newIndex = caseInsensIndexOf(this.props.options, this.state.value); // may need this
208 | if (this.state.open) {
209 | e.preventDefault();
210 | }
211 | if (this.state.activeIndex >= 0 && this.state.activeIndex < numOptions) {
212 | newIndex = this.state.activeIndex;
213 | newName = genGet(filteredOptions, this.state.activeIndex);
214 | this.setDropdownState(false);
215 | } else if (this.state.activeIndex === -1 && newIndex >= 0) {
216 | newName = genGet(this.props.options, newIndex);
217 | this.setDropdownState(false);
218 | } else {
219 | newIndex = this.state.activeIndex;
220 | newName = this.state.value;
221 | }
222 | this.sendSelect({ value: newName, index: newIndex });
223 | this.sendChange({ value: newName });
224 | this.setState({ value: newName, activeIndex: -1 });
225 | break;
226 |
227 | }
228 | },
229 |
230 | handleMouseEnter: function handleMouseEnter(index) {
231 | // when the mouse enters a dropdown menu item, set the active item to the item
232 | this.setState({ activeIndex: index });
233 | },
234 |
235 | handleDropdownClick: function handleDropdownClick(e) {
236 | e.preventDefault();
237 |
238 | this.setDropdownState(!this.state.open);
239 | },
240 |
241 | handleOptionSelect: function handleOptionSelect(key, name) {
242 | // the user clicked on a dropdown menu item
243 | this.setDropdownState(false);
244 | this.sendSelect({ value: name, index: this.state.activeIndex });
245 | this.sendChange({ value: name });
246 | this.setState({ value: name, activeIndex: -1 });
247 | },
248 |
249 | sendChange: function sendChange(e) {
250 | if (this.props.onChange) {
251 | this.props.onChange(e);
252 | }
253 | },
254 |
255 | sendSelect: function sendSelect(e) {
256 | if (this.props.onSelect) {
257 | this.props.onSelect(e);
258 | }
259 | }
260 |
261 | });
262 |
263 | module.exports = DropdownInput;
264 |
265 |
--------------------------------------------------------------------------------