44 |
45 | Default Option Renderer
46 |
47 |
48 |
49 | Displays a list of the 1,000 largest cities in the world using the default option-renderer.
50 |
51 |
52 |
53 | Cities with names beginning with "y" have been disabled.
54 |
55 |
56 |
this.setState({ selectedCity })}
63 | options={cityData}
64 | searchable={searchable}
65 | simpleValue
66 | value={selectedCity}
67 | valueKey='name'
68 | />
69 |
70 |
116 |
117 |
118 | Custom Option Renderer
119 |
120 |
121 |
122 | Displays a list of world countries using a custom option renderer.
123 |
124 |
125 | this.setState({ selectedCountry })}
128 | optionRenderer={CountryOptionRenderer}
129 | optionHeight={40}
130 | options={countryData}
131 | simpleValue
132 | value={selectedCountry}
133 | valueKey='code'
134 | />
135 |
136 |
137 | Dynamic Height Options
138 |
139 |
140 |
141 | Displays option-group headers that are sized different than regular options.
142 | Demonstrates how to use dynamic option heights feature.
143 |
144 |
145 | this.setState({ selectedName })}
148 | onInputChange={() => this._customOptionHeightsSelect && this._customOptionHeightsSelect.recomputeOptionHeights()}
149 | optionHeight={({ option }) => option.type === 'header' ? 25 : 35}
150 | optionRenderer={NameOptionRenderer}
151 | options={nameData}
152 | ref={(ref) => this._customOptionHeightsSelect = ref}
153 | searchable={searchable}
154 | simpleValue
155 | value={selectedName}
156 | valueKey='name'
157 | />
158 |
159 |
160 | Async Options
161 |
162 |
163 |
164 | Displays an async Select component wired up to search for GitHub users.
165 |
166 |
167 | this.setState({ selectedGithubUser })}
174 | onValueClick={this._goToGithubUser}
175 | options={githubUsers}
176 | value={selectedGithubUser}
177 | valueKey='id'
178 | />
179 |
180 |
181 | Creatable Options
182 |
183 |
184 |
185 | Displays a Select.Creatable component that enables users to create their own options.
186 |
187 |
188 | this.setState({ selectedCreatable })}
192 | optionHeight={40}
193 | options={creatableOptions}
194 | selectComponent={Creatable}
195 | simpleValue
196 | value={selectedCreatable}
197 | valueKey='value'
198 | />
199 | selectValue(option)}
278 | onMouseEnter={() => focusOption(option)}
279 | style={style}
280 | >
281 | {option.name}
282 |
283 | )
284 | }
285 | }
286 |
--------------------------------------------------------------------------------
/source/VirtualizedSelect/VirtualizedSelect.js:
--------------------------------------------------------------------------------
1 | /** @flow */
2 | import PropTypes from 'prop-types'
3 | import React, { Component } from 'react'
4 | import Select from 'react-select'
5 |
6 | // Import directly to avoid Webpack bundling the parts of react-virtualized that we are not using
7 | import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
8 | import List from 'react-virtualized/dist/commonjs/List'
9 |
10 | export default class VirtualizedSelect extends Component {
11 |
12 | static propTypes = {
13 | async: PropTypes.bool,
14 | listProps: PropTypes.object,
15 | maxHeight: PropTypes.number,
16 | optionHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
17 | optionRenderer: PropTypes.func,
18 | selectComponent: PropTypes.func
19 | };
20 |
21 | static defaultProps = {
22 | async: false,
23 | maxHeight: 200,
24 | optionHeight: 35
25 | };
26 |
27 | constructor (props, context) {
28 | super(props, context)
29 |
30 | this._renderMenu = this._renderMenu.bind(this)
31 | this._optionRenderer = this._optionRenderer.bind(this)
32 | this._setListRef = this._setListRef.bind(this)
33 | this._setSelectRef = this._setSelectRef.bind(this)
34 | }
35 |
36 | /** See List#recomputeRowHeights */
37 | recomputeOptionHeights (index = 0) {
38 | if (this._listRef) {
39 | this._listRef.recomputeRowHeights(index)
40 | }
41 | }
42 |
43 | /** See Select#focus (in react-select) */
44 | focus () {
45 | if (this._selectRef) {
46 | return this._selectRef.focus()
47 | }
48 | }
49 |
50 | render () {
51 | const SelectComponent = this._getSelectComponent()
52 |
53 | return (
54 |