13 |
14 |
15 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/ObjectListAdapter.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import KeyedListAdapter from './KeyedListAdapter'
4 |
5 | export default class ObjectListAdapterNon-string options
14 |
15 |
16 | The items in the datalist property need not be strings.
17 | Numeric items are supported natively, as well as objects with particular
18 | property names. (Arbitrary objects are also supported by specifying
19 | the relevant property names or providing an item adapter,
20 | both of which are discussed in the next section.) This example also demonstrates
21 | the Bootstrap feature of input group add-ons.
22 |
16 | {item.value} {item.img && 
}
17 |
18 | }
19 | renderSuggested(item) {
20 | return
21 | {item.img && } {item.value}
22 |
23 | }
24 | }
25 | TagAdapter.instance = new TagAdapter()
26 |
27 | return function render({
28 | tags, allowDuplicates, datalistOnly, multiLine, bsSize, onChange, onClear }) {
29 | return
13 |
14 | Edit Me!} />
31 |
32 | For instructions on installing and importing Autosuggest within your project,
33 | see the README.
34 |
35 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/demo/sections/CodeMirror-prefold.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import CodeMirror from 'codemirror'
4 |
5 | CodeMirror.registerGlobalHelper('fold', 'comment', function(mode) {
6 | return (mode.blockCommentStart && mode.blockCommentEnd) || mode.lineComment
7 | }, foldRangeFinder)
8 |
9 | export function prefold(codeMirror: CodeMirror) {
10 | const lastLine = codeMirror.lastLine()
11 | for (let line = 0; line <= lastLine; ++line) {
12 | const lineText = codeMirror.getLine(line)
13 | let pos = lineText.indexOf('$fold-line$')
14 | if (pos >= 0) {
15 | const mode = codeMirror.getModeAt(CodeMirror.Pos(line, pos))
16 | pos = findCommentStart(mode, lineText, pos)
17 | if (pos >= 0) {
18 | codeMirror.foldCode(CodeMirror.Pos(line, pos))
19 | continue
20 | }
21 | }
22 | pos = lineText.indexOf('$fold-start$')
23 | if (pos >= 0) {
24 | const mode = codeMirror.getModeAt(CodeMirror.Pos(line, pos))
25 | pos = findCommentStart(mode, lineText, pos)
26 | if (pos >= 0) {
27 | codeMirror.foldCode(CodeMirror.Pos(line, pos), foldRangeFinder)
28 | }
29 | }
30 | }
31 | }
32 |
33 | export function foldRangeFinder(codeMirror: CodeMirror, start: { line: number, ch: number }) {
34 | const mode = codeMirror.getModeAt(start)
35 | const lastLine = codeMirror.lastLine()
36 | let { line, ch } = start
37 | for (; line <= lastLine; ++line, ch = 0) {
38 | const lineText = codeMirror.getLine(line)
39 | let pos = lineText.indexOf('$fold-end$', ch)
40 | if (pos >= 0) {
41 | pos = findCommentEnd(mode, lineText, pos)
42 | return { from: start, to: { line, pos } }
43 | }
44 | }
45 | }
46 |
47 | function findCommentStart(mode: Object, str: string, fromIndex: number): number {
48 | let pos = -1
49 | if (fromIndex >= 0) {
50 | if (mode.lineComment) {
51 | pos = str.lastIndexOf(mode.lineComment, fromIndex)
52 | }
53 | if (pos < 0 && mode.blockCommentStart) {
54 | pos = str.lastIndexOf(mode.blockCommentStart, fromIndex)
55 | }
56 | }
57 | return pos
58 | }
59 |
60 | function findCommentEnd(mode: Object, str: string, fromIndex: number): number {
61 | let pos = -1
62 | if (mode.lineComment) {
63 | pos = str.lastIndexOf(mode.lineComment, fromIndex)
64 | }
65 | if (pos < 0 && mode.blockCommentEnd) {
66 | pos = str.indexOf(mode.blockCommentEnd, fromIndex)
67 | if (pos < 0) {
68 | pos = str.length
69 | } else {
70 | pos += 2
71 | }
72 | } else {
73 | pos = str.length
74 | }
75 | return pos
76 | }
77 |
--------------------------------------------------------------------------------
/demo/sections/PlaygroundSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Anchor from './Anchor'
3 |
4 | export default function PlaygroundSection() {
5 | return (
6 | Basic usage
14 |
15 | In its most basic usage, <Autosuggest> acts like an
16 | <input> combined with a
17 | <datalist>
18 | (introduced in HTML5 but not yet supported by all browsers).
19 | The user is free to type any value, but a drop-down menu is available
20 | that will suggest predefined options containing the input text.
21 |
23 | In this name prefix example,
24 | typing m will suggest completions of "Mr.", "Mrs.", or "Ms.",
25 | though you are still free to type less common prefixes like "Maj." or "Msgr.".
26 | Standard <input> attributes like placeholder are
27 | propagated to the underlying input element.
28 |
36 | Note that just like a React input element, an Autosuggest without a value property is
37 | an uncontrolled component.
38 | It starts off with an empty value and immediately reflects any user input.
39 | To listen to updates on the value, use the onChange event, as
40 | is done with controlled components.
41 |
7 |
8 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/demo/sections/ListAdapterSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | ControlLabel,
4 | FormControl,
5 | FormGroup
6 | } from 'react-bootstrap'
7 | import Autosuggest, { ListAdapter } from 'react-bootstrap-autosuggest'
8 | import Anchor from './Anchor'
9 | import Playground from './Playground'
10 | const Note = require('raw-loader!../examples/Note').trim()
11 |
12 | const scope = {
13 | Autosuggest,
14 | ListAdapter,
15 | ControlLabel,
16 | FormControl,
17 | FormGroup
18 | }
19 |
20 | export default function ListAdapterSection() {
21 | return (
22 | Appendix: Live code editor
8 |
9 | All of the examples on this page are dynamically transpiled and rendered from
10 | code you can edit within the page itself. The code viewers are instances of
11 | the CodeMirror text editor. Whenever the
12 | code changes, it is transformed from programmer-friendly ES2015/JSX to
13 | browser-friendly ES5 using the Babel transpiler
14 | configured with the es2015 and react presets and
15 | the transform-object-rest-spread plugin. The transpiled code is
16 | then rendered into the DOM by React in one of three ways:
17 |
-
19 |
-
20 | If the code appears to be a JSX snippet, which starts with
<and ends 21 | with>, then it is evaluated as an expression and automatically rendered. 22 |
23 | -
24 | Otherwise, the code is evaluated as arbitrary JavaScript statements. The final statement
25 | can optionally return a render function.
26 |
-
27 |
- 28 | If a function is returned, it is called whenever the React state of its 29 | container changes. It is expected to return a React element, which will be 30 | automatically rendered. The remainder of the code is not re-evaluated when the 31 | state changes, so it can be used to provide constants to the render function. 32 | 33 |
-
34 | If the evaluated code does not return a function, it is expected to render itself
35 | using
ReactDOM.renderand the providedmountNode. 36 | The code is executed each time the React state of its container changes. 37 |
38 |
40 |
42 | In all cases, at least the following symbols are injected into the scope of the
43 | evaluated code: React, ReactDOM, mountNode,
44 | and Autosuggest. Depending on the section, additional symbols may
45 | be injected, such as React-Bootstrap components, React state, or callback functions.
46 |
23 |
24 |
42 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/demo/demo.js:
--------------------------------------------------------------------------------
1 | import 'es5-shim/es5-shim'
2 | import 'es5-shim/es5-sham'
3 | import 'babel-polyfill'
4 |
5 | import React from 'react'
6 | import { Nav, Navbar, NavItem } from 'react-bootstrap'
7 | import ReactDOM from 'react-dom'
8 |
9 | import BasicSection from './sections/BasicSection'
10 | import ReactBootstrapSection from './sections/ReactBootstrapSection'
11 | import NonStringSection from './sections/NonStringSection'
12 | import ItemAdapterSection from './sections/ItemAdapterSection'
13 | import ItemsAsValuesSection from './sections/ItemsAsValuesSection'
14 | import ListAdapterSection from './sections/ListAdapterSection'
15 | import MultipleSection from './sections/MultipleSection'
16 | import DynamicSection from './sections/DynamicSection'
17 | import PlaygroundSection from './sections/PlaygroundSection'
18 |
19 | import 'Autosuggest.scss'
20 | import 'demo.scss'
21 |
22 | ReactDOM.render(
23 | List adapters
24 |
25 | As shown in the previous example, the datalist property need not be
26 | an array. In addition to arrays, Autosuggest has built-in support for map-like objects
27 | and ECMAScript 2015 Map objects.
28 | Internally, an array of items is constructed from the datalist using a subclass
29 | of ListAdapter.
30 | Normally, the list adapter is selected automatically if the datalist is an array,
31 | object, or map, but it can be specified explicitly using the datalistAdapter property.
32 | The built-in list adapter types are:
33 |
-
35 |
EmptyListAdapter(used whendatalist == null)
36 | ArrayListAdapter(used whenArray.isArray(datalist))
37 | MapListAdapter(used whendatalist instanceof Map)
38 | ObjectListAdapter(used whentypeof datalist === 'object'and 39 | the other conditions are false)
40 |
Keyed list adapters
42 |
43 | As mentioned above, the datalist items for objects and
44 | maps are objects with key and value properties corresponding to the datalist object
45 | property names/values or the datalist map entry keys/values, respectively.
46 | (The name of the key property is specified by the datalist adapter and defaults
47 | to key; the name of the value property is specified by
48 | the itemValuePropName property and defaults to value.)
49 | If the value of the property/entry is already an object with a value property,
50 | that object is used as the basis of the item object.
51 | If it also has a key property equal to the property name/entry key, it is used as the
52 | item object directly (and thus retains object identity). Otherwise, the object is cloned
53 | and the key property is set.
54 |
24 |
25 |
26 | 
28 |
41 |
42 |
43 |
49 |
50 |
51 |
,
69 | document.getElementById('app')
70 | )
71 |
--------------------------------------------------------------------------------
/src/Suggestions.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import shallowEqual from 'fbjs/lib/shallowEqual'
4 | import PropTypes from 'prop-types'
5 | import React from 'react'
6 | import { Dropdown, MenuItem } from 'react-bootstrap'
7 | import ReactDOM from 'react-dom'
8 | import type { Node } from './types'
9 |
10 | type Props = {
11 | datalistMessage?: Node;
12 | filtered?: boolean;
13 | focusedIndex?: number,
14 | getItemKey: (item: any) => string | number | boolean;
15 | isSelectedItem: (item: any) => boolean;
16 | items: any[];
17 | labelledBy?: string | number;
18 | onClose?: () => void;
19 | onDatalistMessageSelect?: () => void;
20 | onDisableFilter?: () => void;
21 | onSelect: (item: any) => void;
22 | open: boolean;
23 | renderItem: (item: any) => Node;
24 | }
25 |
26 | type State = {}
27 |
28 | export default class Suggestions extends React.Component {
29 | static propTypes = {
30 | datalistMessage: PropTypes.node,
31 | filtered: PropTypes.bool,
32 | focusedIndex: PropTypes.number,
33 | getItemKey: PropTypes.func.isRequired,
34 | isSelectedItem: PropTypes.func.isRequired,
35 | items: PropTypes.arrayOf(PropTypes.any).isRequired,
36 | labelledBy: PropTypes.oneOfType([
37 | PropTypes.string,
38 | PropTypes.number
39 | ]),
40 | onClose: PropTypes.func,
41 | onDatalistMessageSelect: PropTypes.func,
42 | onDisableFilter: PropTypes.func,
43 | onSelect: PropTypes.func.isRequired,
44 | open: PropTypes.bool,
45 | renderItem: PropTypes.func.isRequired
46 | };
47 |
48 | props: Props;
49 | state: State;
50 |
51 | shouldComponentUpdate(nextProps: Props): boolean {
52 | return !shallowEqual(this.props, nextProps)
53 | }
54 |
55 | isFocused(): boolean {
56 | const menuNode = ReactDOM.findDOMNode(this.refs.menu)
57 | return menuNode != null && document && menuNode.contains(document.activeElement)
58 | }
59 |
60 | focusFirst() {
61 | const { menu } = this.refs
62 | menu.focusNext()
63 | }
64 |
65 | render(): React.Element<*> {
66 | const { items, datalistMessage, onDatalistMessageSelect } = this.props
67 | return
28 |
41 |
52 |
62 |
68 |
37 |
38 |
66 |
72 |
73 | )
74 | }
75 |
76 | // autobind
77 | _onBrowserChange(value) {
78 | this.setState({ browser: value })
79 | }
80 |
81 | // autobind
82 | _onBsSizeChange(event) {
83 | this.setState({ bsSize: event.target.value || undefined })
84 | }
85 |
86 | // autobind
87 | _onValidationChange(event) {
88 | this.setState({ validationState: event.target.value || undefined })
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/demo/examples/StateProvince.js:
--------------------------------------------------------------------------------
1 | // import Autosuggest, { ItemAdapter } from 'react-bootstrap-autosuggest'
2 |
3 | const states = [
4 | { abbr: 'AL', name: 'Alabama' },
5 | // $fold-start$
6 | { abbr: 'AK', name: 'Alaska' },
7 | { abbr: 'AZ', name: 'Arizona' },
8 | { abbr: 'AR', name: 'Arkansas' },
9 | { abbr: 'CA', name: 'California' },
10 | { abbr: 'CO', name: 'Colorado' },
11 | { abbr: 'CT', name: 'Connecticut' },
12 | { abbr: 'DE', name: 'Delaware' },
13 | { abbr: 'FL', name: 'Florida' },
14 | { abbr: 'GA', name: 'Georgia' },
15 | { abbr: 'HI', name: 'Hawaii' },
16 | { abbr: 'ID', name: 'Idaho' },
17 | { abbr: 'IL', name: 'Illinois' },
18 | { abbr: 'IN', name: 'Indiana' },
19 | { abbr: 'IA', name: 'Iowa' },
20 | { abbr: 'KS', name: 'Kansas' },
21 | { abbr: 'KY', name: 'Kentucky' },
22 | { abbr: 'LA', name: 'Louisiana' },
23 | { abbr: 'ME', name: 'Maine' },
24 | { abbr: 'MD', name: 'Maryland' },
25 | { abbr: 'MA', name: 'Massachusetts' },
26 | { abbr: 'MI', name: 'Michigan' },
27 | { abbr: 'MN', name: 'Minnesota' },
28 | { abbr: 'MS', name: 'Mississippi' },
29 | { abbr: 'MO', name: 'Missouri' },
30 | { abbr: 'MT', name: 'Montana' },
31 | { abbr: 'NE', name: 'Nebraska' },
32 | { abbr: 'NV', name: 'Nevada' },
33 | { abbr: 'NH', name: 'New Hampshire' },
34 | { abbr: 'NJ', name: 'New Jersey' },
35 | { abbr: 'NM', name: 'New Mexico' },
36 | { abbr: 'NY', name: 'New York' },
37 | { abbr: 'NC', name: 'North Carolina' },
38 | { abbr: 'ND', name: 'North Dakota' },
39 | { abbr: 'OH', name: 'Ohio' },
40 | { abbr: 'OK', name: 'Oklahoma' },
41 | { abbr: 'OR', name: 'Oregon' },
42 | { abbr: 'PA', name: 'Pennsylvania' },
43 | { abbr: 'RI', name: 'Rhode Island' },
44 | { abbr: 'SC', name: 'South Carolina' },
45 | { abbr: 'SD', name: 'South Dakota' },
46 | { abbr: 'TN', name: 'Tennessee' },
47 | { abbr: 'TX', name: 'Texas' },
48 | { abbr: 'UT', name: 'Utah' },
49 | { abbr: 'VT', name: 'Vermont' },
50 | { abbr: 'VA', name: 'Virginia' },
51 | { abbr: 'WA', name: 'Washington' },
52 | { abbr: 'WV', name: 'West Virginia' },
53 | { abbr: 'WI', name: 'Wisconsin' },
54 | // $fold-end$
55 | { abbr: 'WY', name: 'Wyoming' }
56 | ].map((item, index) => ({
57 | ...item,
58 | // keep in source order to optimize sort by avoiding string comparison
59 | sortKey: index,
60 | // pre-calculate case-folded text representations
61 | textReps: [item.name.toLowerCase(), item.abbr.toLowerCase()]
62 | }))
63 |
64 | class StateAdapter extends ItemAdapter {
65 | getTextRepresentations(item) {
66 | return item.textReps
67 | }
68 | renderItem(item) {
69 | return React-Bootstrap integration
38 |
39 | In addition to being built on React and Bootstrap directly, Autosuggest is designed
40 | to leverage React-Bootstrap components
41 | when building complete forms.
42 | This example demonstrates its support for input group sizing and for validation state styling and feedback icons
43 | inherited from the containing
44 | <FormGroup> component.
45 |
67 | The feedback icon size and position are based on the bsSize property
68 | of the containing FormGroup, not of the Autosuggest, so don't forget
69 | to set both properties to the same value.
70 |
70 | {item.name}{item.abbr}
71 | }.png`}/)
72 |
73 | }
74 | }
75 | StateAdapter.instance = new StateAdapter()
76 |
77 | return function render({ stateItem, stateValue, onChange, onSelect }) {
78 | return
80 |
81 | {stateItem && stateItem.abbr && `US state code: ${stateItem.abbr}`}
82 |
83 |
84 |
12 |
25 | }
26 | }
27 | RepoAdapter.instance = new RepoAdapter()
28 |
29 | let lastSearch
30 |
31 | function onRepoSearch(search, page, prev) { // $fold-line$
32 | if (search) {
33 | // GitHub search doesn't allow slashes, so strip off user prefix
34 | const sp = search.lastIndexOf('/')
35 | if (sp >= 0) {
36 | search = search.substring(sp + 1)
37 | }
38 |
39 | // ignore redundant searches where only the user prefix changed
40 | if (search === lastSearch && !page) {
41 | return
42 | }
43 | lastSearch = search
44 |
45 | setState({
46 | reposMessage: 'Searching for matching repositories...',
47 | reposMore: null
48 | })
49 | let url = 'https://api.github.com/search/repositories?q=' +
50 | encodeURIComponent(search)
51 | if (page) {
52 | url += '&page=' + page
53 | }
54 | fetch(url).then(response => {
55 | if (response.ok) {
56 | response.json().then(json => {
57 | let repos, reposMessage, reposMore
58 | if (json.total_count === 0) {
59 | reposMessage = 'No matching repositories'
60 | } else {
61 | repos = prev ? prev.concat(json.items) : json.items
62 | if (repos.length < json.total_count) {
63 | reposMessage = 'Load more...'
64 | reposMore = () => onRepoSearch(search, page ? page + 1 : 2, repos)
65 | }
66 | }
67 | setState({
68 | repos,
69 | reposMessage,
70 | reposMore
71 | })
72 | })
73 | } else {
74 | setState({
75 | repos: null,
76 | reposMessage: 'Repository search returned error: ' + response.statusText,
77 | reposMore: null
78 | })
79 | }
80 | }, err => {
81 | setState({
82 | repos: null,
83 | reposMessage: 'Repository search failed: ' + err.message,
84 | reposMore: null
85 | })
86 | })
87 | } else {
88 | setState({
89 | repos: null,
90 | reposMessage: 'Type at least one character to get suggestions',
91 | reposMore: null
92 | })
93 | }
94 | }
95 |
96 | function onRepoChange(value) {
97 | setState({ repo: value })
98 | }
99 |
100 | return function render({ state }) {
101 | return
13 | 
14 |
15 |
16 |
24 | {item.full_name}
17 | {item.description}
18 |
19 |
23 |
33 |
34 |
41 |
49 |
60 |
87 | )
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bootstrap-autosuggest",
3 | "version": "0.5.0",
4 | "description": "Autosuggest component for react-bootstrap",
5 | "main": "lib/Autosuggest.js",
6 | "files": [
7 | "dist",
8 | "lib",
9 | "src"
10 | ],
11 | "scripts": {
12 | "build": "gulp",
13 | "clean": "gulp clean",
14 | "demo": "webpack-dev-server --config webpack/demo.config.babel.js -d --progress --inline",
15 | "flow": "gulp flow",
16 | "gh-pages": "gulp site && gh-pages -d site",
17 | "lint": "gulp lint",
18 | "prepublish": "gulp",
19 | "release": "gulp && release",
20 | "site": "gulp site",
21 | "test": "cross-env COVERAGE=true gulp test",
22 | "test-watch": "cross-env COVERAGE=true karma start"
23 | },
24 | "author": "Trevor Robinson Dynamic datalists
34 | 35 | All of the preceding examples use static datalists, which do not change 36 | while the component is mounted. However, changing the datalist at any time 37 | is fully supported. Furthermore, there are several features specifically 38 | intended to support dynamic datalists. 39 |
40 |onSearch event
41 | onSearch event
42 | Autosuggest provides the onSearch event to allow the application
43 | to update the datalist based on user input. It is called periodically as the
44 | input value changes. The searchDebounce property, expressed in
45 | milliseconds, controls how frequently the onSearch event may be
46 | fired.
47 |
Datalist message
49 |
50 | The datalistMessage property, when defined, is a message displayed at the
51 | end of the drop-down menu of suggestions. It can be used for several purposes, such as
52 | indicating that the datalist is being fetched asynchronously, that an error occurred
53 | fetching the datalist, or that more suggestions are available to be fetched.
54 | If the onDatalistMessageSelect property is also defined, it causes the
55 | datalist message to become selectable and specifies a callback function to be
56 | invoked when it is selected. This feature is particularly useful for fetching
57 | additional suggestions.
58 |
Partial datalists
60 |
61 | By default, Autosuggest assumes that the datalist represents the entire set of valid
62 | options when datalistOnly is true. However, a common use for dynamic
63 | datalists is fetching a subset of a very large collection of options from a server.
64 | In these cases, the datalistPartial boolean property should be set.
65 | It causes Autosuggest to consider a value not in the datalist valid if either of
66 | the following are true:
67 |
-
69 |
- The value came from the
valueordefaultValueproperty.
70 | - The value was selected from a previous datalist. 71 |
31 |
32 |
82 | )
83 | }
84 |
85 | // autobind
86 | _onStateChange(value) {
87 | this.setState({ stateValue: value })
88 | }
89 |
90 | // autobind
91 | _onStateSelect(item) {
92 | this.setState({ stateItem: item })
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/demo/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
64 |
--------------------------------------------------------------------------------
/src/ItemAdapter.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import type { Node } from './types'
4 |
5 | export type Props = {
6 | itemReactKeyPropName?: string;
7 | itemSortKeyPropName?: string;
8 | itemValuePropName?: string;
9 | }
10 |
11 | function toStringOrNumber(v: any): string | number {
12 | return typeof v === 'number' ? v : v.toString()
13 | }
14 |
15 | export default class ItemAdapter {
16 | props: Props;
17 |
18 | receiveProps(props: Props) {
19 | this.props = props
20 | }
21 |
22 | getReactKey(item: I): string | number {
23 | const { itemReactKeyPropName: propName } = this.props
24 | if (propName) {
25 | const value = (item: any)[propName]
26 | if (value != null) {
27 | return value
28 | }
29 | }
30 | return toStringOrNumber(this.getRawValue(item))
31 | }
32 |
33 | getSortKey(item: I): string | number {
34 | const { itemSortKeyPropName: propName } = this.props
35 | if (propName) {
36 | const value = (item: any)[propName]
37 | if (value != null) {
38 | return value
39 | }
40 | }
41 | return toStringOrNumber(this.getRawValue(item))
42 | }
43 |
44 | getInputValue(item: I): string {
45 | return this.getRawValue(item).toString()
46 | }
47 |
48 | // protected
49 | getRawValue(item: I): any {
50 | const { itemValuePropName: propName } = this.props
51 | if (propName) {
52 | const value = (item: any)[propName]
53 | if (value != null) {
54 | return value
55 | }
56 | }
57 | return item
58 | }
59 |
60 | getTextRepresentations(item: I): string[] {
61 | return [this.foldValue(this.getInputValue(item))]
62 | }
63 |
64 | foldValue(value: string): string {
65 | // perform case folding by default; override for diacritic folding, etc.
66 | return value.toLowerCase()
67 | }
68 |
69 | newFromValue(value: string): string | Object {
70 | return value
71 | }
72 |
73 | itemIncludedByInput(item: I, foldedValue: string): boolean {
74 | for (let text of this.getTextRepresentations(item)) {
75 | if (text.indexOf(foldedValue) >= 0) {
76 | return true
77 | }
78 | }
79 | return false
80 | }
81 |
82 | itemMatchesInput(item: I, foldedValue: string): boolean {
83 | for (let text of this.getTextRepresentations(item)) {
84 | if (text === foldedValue) {
85 | return true
86 | }
87 | }
88 | return false
89 | }
90 |
91 | sortItems(items: I[], foldedValue: string): I[] {
92 | items.sort((a, b) => this.compareItemsWithValue(a, b, foldedValue))
93 | return items
94 | }
95 |
96 | // protected
97 | compareItemsWithValue(a: I, b: I, foldedValue: string): number {
98 | // sort matching item(s) before non-matching
99 | const aMatches = this.itemMatchesInput(a, foldedValue)
100 | const bMatches = this.itemMatchesInput(b, foldedValue)
101 | if (aMatches != bMatches) {
102 | return aMatches ? -1 : 1
103 | }
104 | // then sort based on inclusion rank
105 | const aRank = this.itemInclusionRankForInput(a, foldedValue)
106 | const bRank = this.itemInclusionRankForInput(b, foldedValue)
107 | if (aRank != bRank) {
108 | return aRank - bRank
109 | }
110 | // within same inclusion rank, compare items ignoring value
111 | return this.compareItems(a, b)
112 | }
113 |
114 | // protected
115 | itemInclusionRankForInput(item: I, foldedValue: string): number {
116 | let contains = false
117 | for (let text of this.getTextRepresentations(item)) {
118 | const index = text.indexOf(foldedValue)
119 | if (index === 0) {
120 | return 0
121 | }
122 | if (index > 0) {
123 | contains = true
124 | }
125 | }
126 | return contains ? 1 : 2
127 | }
128 |
129 | // protected
130 | compareItems(a: I, b: I): number {
131 | const aSortKey: any = this.getSortKey(a)
132 | const bSortKey: any = this.getSortKey(b)
133 | return aSortKey < bSortKey ? -1 : aSortKey == bSortKey ? 0 : 1
134 | }
135 |
136 | // protected
137 | renderItem(item: I): Node { // default rendering for both dropdown and multiple
138 | return this.getInputValue(item)
139 | }
140 |
141 | renderSuggested(item: I): Node { // dropdown rendering
142 | return this.renderItem(item)
143 | }
144 |
145 | renderSelected(item: I): Node { // multiple selected rendering
146 | return this.renderItem(item)
147 | }
148 | }
149 |
--------------------------------------------------------------------------------
/demo/sections/ItemsAsValuesSection.js:
--------------------------------------------------------------------------------
1 | import { remove as removeDiacritics } from 'diacritics'
2 | import shallowEqual from 'fbjs/lib/shallowEqual'
3 | import React from 'react'
4 | import {
5 | ControlLabel,
6 | FormControl,
7 | FormGroup
8 | } from 'react-bootstrap'
9 | import Autosuggest, { ItemAdapter } from 'react-bootstrap-autosuggest'
10 | import Anchor from './Anchor'
11 | import Playground from './Playground'
12 | const Country = require('raw-loader!../examples/Country').trim()
13 |
14 | export default class ItemsAsValuesSection extends React.Component {
15 | constructor(...args) {
16 | super(...args)
17 | this.state = {
18 | country: null
19 | }
20 | this._onCountryChange = this._onCountryChange.bind(this)
21 | }
22 |
23 | shouldComponentUpdate(nextProps: Object, nextState: Object) {
24 | return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)
25 | }
26 |
27 | render() {
28 | return (
29 | Item adapters
32 |
33 | As mentioned in the previous example, the datalist property
34 | can contain arbitrary objects. By default, Autosuggest looks for a property
35 | called value on each item and displays value.toString() in
36 | the drop-down menu and (when an item is selected) in the input element.
37 | If no value property is defined, toString() is called on the
38 | item itself. The name of the value property can be overridden using
39 | the itemValuePropName property of the Autosuggest.
40 |
42 | Similarly, the key property of the object is used as the React
43 | element key in the drop-down menu, and the sortKey property is
44 | used for sorting the menu items. These property names can be overridden using
45 | the itemReactKeyPropName and itemSortKeyPropName properties,
46 | respectively. If these properties are not defined on a given object, the
47 | value property is used instead (after being converted to a string, unless
48 | it is a number).
49 |
51 | If a finer degree of control is desired, the itemAdapter property
52 | can be set to an application-provided subclass of
53 | the ItemAdapter class.
54 | In the example below, in addition to overriding the value and React key property
55 | names, an item adapter is provided to allow multiple text representations (state
56 | abbreviation as well as name) and to customize the drop-down menu item rendering
57 | (including US state images).
58 |
60 | Finally, this example also shows that while onChange is (generally)
61 | called with the input value, onSelect is called with datalist items.
62 | This feature allows the application to receive additional item information, such
63 | as an ID or database key, that is not present in the input value. In this example,
64 | if a US state is selected, its postal code is shown.
65 |
30 |
31 |
39 |
51 |
63 |
89 | )
90 | }
91 |
92 | // autobind
93 | _onCountryChange(item) {
94 | this.setState({ country: item })
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | import child_process from 'child_process'
2 | import del from 'del'
3 | import flow from 'flow-bin'
4 | import gulp from 'gulp'
5 | import babel from 'gulp-babel'
6 | import eslint from 'gulp-eslint'
7 | import gulpReactDocs from 'gulp-react-docs'
8 | import gulpReplace from 'gulp-replace'
9 | import { Server as KarmaServer } from 'karma'
10 | import webpack from 'webpack'
11 | import webpackStream from 'webpack-stream'
12 |
13 | import { withOptions as demoWithOptions } from './webpack/demo.config.babel'
14 | import webpackConfig, { withOptions as webpackWithOptions } from './webpack/webpack.config.babel'
15 |
16 | const apidocs = './site/apidocs'
17 | const demo = './demo'
18 | const dist = './dist'
19 | const lib = './lib'
20 | const site = './site'
21 | const src = './src'
22 | const test = './test'
23 |
24 | if (!Object.values) {
25 | Object.values = obj => Object.keys(obj).map(key => obj[key])
26 | }
27 |
28 | function getWebpackEntries(config) {
29 | const { entry } = config
30 | return (Array.isArray(entry) || typeof entry !== 'object') ? entry : Object.values(entry)
31 | }
32 |
33 | function execute(command, args, options, callback) {
34 | const child = child_process.spawn(command, args, options)
35 | child.stdout.on('data', data => process.stdout.write(data.toString()))
36 | child.stderr.on('data', data => process.stderr.write(data.toString()))
37 | child.on('close', code => {
38 | callback(code != 0 ? new Error(`${command} exited with code ${code}`) : null)
39 | })
40 | }
41 |
42 | gulp.task('clean', function() {
43 | return del([dist, lib, site])
44 | })
45 |
46 | gulp.task('clean-dist', function() {
47 | return del([dist])
48 | })
49 |
50 | gulp.task('clean-lib', function() {
51 | return del([lib])
52 | })
53 |
54 | gulp.task('clean-site', function() {
55 | return del([site])
56 | })
57 |
58 | gulp.task('clean-apidocs', function() {
59 | return del([apidocs])
60 | })
61 |
62 | gulp.task('clean-demo', function() {
63 | return del([site, '!' + apidocs])
64 | })
65 |
66 | gulp.task('babel', ['clean-lib'], function() {
67 | return gulp.src(src + '/*.js')
68 | .pipe(babel())
69 | .pipe(gulp.dest(lib))
70 | })
71 |
72 | gulp.task('webpack', ['clean-dist'], function() {
73 | return gulp.src(getWebpackEntries(webpackConfig))
74 | .pipe(webpackStream(webpackConfig, webpack))
75 | .pipe(gulp.dest(dist))
76 | })
77 |
78 | gulp.task('webpack-min', ['clean-dist'], function() {
79 | const baseConfig = webpackWithOptions({
80 | optimizeMinimize: true
81 | })
82 | const config = {
83 | ...baseConfig,
84 | bail: true,
85 | plugins: [
86 | ...baseConfig.plugins,
87 | new webpack.optimize.UglifyJsPlugin()
88 | ]
89 | }
90 | return gulp.src(getWebpackEntries(config))
91 | .pipe(webpackStream(config, webpack))
92 | .pipe(gulp.dest(dist))
93 | })
94 |
95 | gulp.task('default', ['babel', 'webpack', 'webpack-min'])
96 |
97 | gulp.task('apidocs', ['clean-apidocs'], function() {
98 | return gulp.src('./src/Autosuggest.js')
99 | // react-docgen uses an old version of babylon
100 | // that doesn't support inferred type parameter syntax
101 | .pipe(gulpReplace(/<\*[^>]*>/g, ''))
102 | .pipe(gulpReactDocs({
103 | path: apidocs
104 | }))
105 | .pipe(gulpReplace(''', '\''))
106 | .pipe(gulpReplace(
107 | 'From [`../../src/Autosuggest.js`](../../src/Autosuggest.js)',
108 | 'From [`src/Autosuggest.js`](../../master/src/Autosuggest.js)'))
109 | .pipe(gulp.dest(apidocs))
110 | })
111 |
112 | gulp.task('demo-copy', ['clean-demo'], function() {
113 | return gulp.src([
114 | demo + '/*.ico',
115 | demo + '/*.json',
116 | demo + '/*.png',
117 | demo + '/*.svg',
118 | demo + '/*.xml',
119 | demo + '/images/*'
120 | ], { base: demo })
121 | .pipe(gulp.dest(site))
122 | })
123 |
124 | gulp.task('demo-webpack', ['clean-demo'], function() {
125 | const baseConfig = demoWithOptions({
126 | optimizeMinimize: true
127 | })
128 | const config = {
129 | ...baseConfig,
130 | bail: true,
131 | plugins: [
132 | ...baseConfig.plugins,
133 | new webpack.optimize.UglifyJsPlugin()
134 | ]
135 | }
136 | const entries = getWebpackEntries(config)
137 | return gulp.src(entries[entries.length - 1])
138 | .pipe(webpackStream(config, webpack))
139 | .pipe(gulp.dest(site))
140 | })
141 |
142 | gulp.task('site', ['apidocs', 'demo-copy', 'demo-webpack'])
143 |
144 | gulp.task('lint', function() {
145 | return gulp.src([src, test, demo].map(s => s + '/**/*.js'))
146 | .pipe(eslint())
147 | .pipe(eslint.format())
148 | .pipe(eslint.failAfterError())
149 | })
150 |
151 | gulp.task('flow', function(callback) {
152 | execute(flow, ['--color', 'always'], undefined, callback)
153 | })
154 |
155 | gulp.task('karma', function (callback) {
156 | new KarmaServer({
157 | configFile: __dirname + '/karma.conf.js',
158 | singleRun: true
159 | }, callback).start()
160 | })
161 |
162 | gulp.task('test', ['lint', 'flow', 'karma'])
163 |
164 | gulp.task('all', ['default', 'site', 'test'])
165 |
--------------------------------------------------------------------------------
/demo/sections/MultipleSection.js:
--------------------------------------------------------------------------------
1 | import shallowEqual from 'fbjs/lib/shallowEqual'
2 | import React from 'react'
3 | import {
4 | Alert,
5 | Button,
6 | Checkbox,
7 | ControlLabel,
8 | FormControl,
9 | FormGroup
10 | } from 'react-bootstrap'
11 | import Autosuggest, { ItemAdapter } from 'react-bootstrap-autosuggest'
12 | import Anchor from './Anchor'
13 | import Playground from './Playground'
14 | import SizeSelect from './SizeSelect'
15 | const Tags = require('raw-loader!../examples/Tags').trim()
16 |
17 | export default class MultipleSection extends React.Component {
18 | constructor(...args) {
19 | super(...args)
20 | this.state = {
21 | tags: [{ value: 'Good' }, { value: 'Bad' }, { value: 'Ugly' }],
22 | allowDuplicates: false,
23 | datalistOnly: false,
24 | multiLine: false,
25 | bsSize: undefined
26 | }
27 | this._toggleDatalistOnly = this._toggleDatalistOnly.bind(this)
28 | this._toggleAllowDuplicates = this._toggleAllowDuplicates.bind(this)
29 | this._toggleMultiLine = this._toggleMultiLine.bind(this)
30 | this._onBsSizeChange = this._onBsSizeChange.bind(this)
31 | this._onTagsChange = this._onTagsChange.bind(this)
32 | this._onTagsClear = this._onTagsClear.bind(this)
33 | }
34 |
35 | shouldComponentUpdate(nextProps: Object, nextState: Object) {
36 | return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)
37 | }
38 |
39 | render() {
40 | return (
41 | Items as values
31 |
32 | In the previous examples, the value supplied to the value property
33 | and received from the onChange event was the string value used in
34 | the input element. In cases where the datalist items are objects, it may be more
35 | natural to exchange item objects directly. Specifying the boolean property
36 | valueIsItem enables this mode of operation.
37 |
Datalist-only constraint
39 |
40 | A typical usage of this feature is object selection, where the object must be
41 | an item from the datalist. To enforce this constraint, the boolean
42 | property datalistOnly can also be specified. Not only does this
43 | option force the final value of the Autosuggest to come from the datalist, it
44 | also auto-completes the input value as soon as it matches only a single item.
45 | (Alternatively, if dynamic creation of objects based on the input value is
46 | desired, ItemAdapter.newFromValue() can be overridden to customize
47 | the object provided to the onChange and onSelect handlers.
48 | By default, the input value string itself is provided.)
49 |
Datalist as object
51 |
52 | This example also demonstrates the use of a datalist that is an object (as opposed
53 | to an array). In this case, the enumerable, owned properties of the object are
54 | used to derive the items of the datalist. By default, each item
55 | has key and value properties assigned to the name and
56 | value, respectively, of the corresponding property. As discussed above, the
57 | name of the value property can be changed using the itemValuePropName property
58 | of the Autosuggest (which this example does). The name of the key property is determined by
59 | the datalist adapter, where the default name key is
60 | designed to match the default value of the itemReactKeyPropName property.
61 |
Value folding
63 |
64 | Finally, this example demonstrates custom value folding by overriding ItemAdapter.foldValue().
65 | By default, only case-folding is performed, which means that the input value and each
66 | item value are converted to lower-case before comparison. This example also
67 | performs diacritic-folding by
68 | converting each accented character to one or more base/ASCII characters.
69 | However, since diacritic-folding can be performed in many different ways,
70 | it is not built into the Autosuggest component. Note that the folded names
71 | are also used as sort keys, which avoids the need to use the relatively
72 | slow localeCompare function when sorting.
73 |
42 |
43 |
66 | Allow duplicates
67 |
68 |
71 | Datalist-only
72 |
73 |
76 | Multi-line (hides drop-down toggle and clear button)
77 |
78 |
101 | Due to Bootstrap's use of absolute
102 | positioning for feedback icons, manual adjustment is necessary when using
103 | them in combination with add-ons or buttons at the end of the input group,
104 | such as the clear (×) button above.
105 |
106 |
107 | )
108 | }
109 |
110 | // autobind
111 | _toggleDatalistOnly() {
112 | this.setState({ datalistOnly: !this.state.datalistOnly })
113 | }
114 |
115 | // autobind
116 | _toggleAllowDuplicates() {
117 | this.setState({ allowDuplicates: !this.state.allowDuplicates })
118 | }
119 |
120 | // autobind
121 | _toggleMultiLine() {
122 | this.setState({ multiLine: !this.state.multiLine })
123 | }
124 |
125 | // autobind
126 | _onBsSizeChange(event) {
127 | this.setState({ bsSize: event.target.value || undefined })
128 | }
129 |
130 | // autobind
131 | _onTagsChange(items) {
132 | this.setState({ tags: items })
133 | }
134 |
135 | // autobind
136 | _onTagsClear() {
137 | this.setState({ tags: [] })
138 | }
139 | }
140 |
--------------------------------------------------------------------------------
/demo/demo.scss:
--------------------------------------------------------------------------------
1 | @import "bootstrap/variables";
2 | $icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
3 | $grid-float-breakpoint: $screen-md-min;
4 | @import "bootstrap";
5 |
6 | body {
7 | background-color: #f0f0f0;
8 | font-size: 14px;
9 | }
10 |
11 | .navbar-autosuggest .navbar-header {
12 | white-space: nowrap;
13 | .logo {
14 | height: 72px;
15 | margin: 2rem;
16 | vertical-align: top;
17 | }
18 | .titles {
19 | display: inline-block;
20 | margin: 2.5rem 0;
21 | white-space: normal;
22 | .title {
23 | font-size: 1.7em;
24 | font-weight: bold;
25 | .primary {
26 | color: #2daae1;
27 | }
28 | .secondary {
29 | color: #000;
30 | }
31 | }
32 | .subtitle {
33 | color: #444;
34 | margin: 0.5rem 0;
35 | a {
36 | color: inherit;
37 | text-decoration: underline;
38 | }
39 | }
40 | }
41 | }
42 |
43 | .navbar-autosuggest .navbar-nav {
44 | li {
45 | font-size: 1.2em;
46 | font-weight: bold;
47 | a {
48 | padding-bottom: 0.5em;
49 | }
50 | &.active > a,
51 | &.active > a:hover,
52 | &.active > a:focus {
53 | background-color: inherit;
54 | color: #2daae1;
55 | cursor: default;
56 | }
57 | }
58 | }
59 |
60 | @media (min-width: $screen-md-min) {
61 | .navbar-autosuggest .navbar-nav {
62 | float: right;
63 | margin-top: 3rem;
64 | li a:hover {
65 | border-bottom: 3px solid #2daae1;
66 | }
67 | }
68 | }
69 |
70 | .visible-xxs-inline {
71 | display: none;
72 | }
73 |
74 | @media (max-width: 500px) {
75 | .navbar-autosuggest .navbar-header {
76 | .logo {
77 | height: 48px;
78 | margin-top: 3rem;
79 | }
80 | .titles {
81 | margin: 1rem 0;
82 | .title {
83 | font-size: 1.5em;
84 | line-height: 1.1;
85 | }
86 | }
87 | }
88 | .visible-xxs-inline {
89 | display: inline;
90 | }
91 | }
92 |
93 | .container {
94 | margin: 2rem auto;
95 | max-width: 800px;
96 | }
97 |
98 | .footer {
99 | line-height: 30px;
100 | margin: 4rem 0;
101 | text-align: center;
102 |
103 | iframe {
104 | border: none;
105 | vertical-align: top;
106 | }
107 | }
108 |
109 | .playground {
110 | margin-bottom: 36px;
111 |
112 | .example {
113 | background-color: #e0e0e0;
114 | border: 1px solid #ccc;
115 | border-radius: 4px 4px 0 4px;
116 | padding-top: 30px;
117 | position: relative;
118 |
119 | &:after {
120 | color: #aaa;
121 | content: "Example";
122 | font-size: 12px;
123 | font-weight: bold;
124 | left: 15px;
125 | letter-spacing: 1px;
126 | position: absolute;
127 | text-shadow: 1px 1px 1px #fff;
128 | text-transform: uppercase;
129 | top: 15px;
130 | }
131 |
132 | .mount-node {
133 | margin: 15px;
134 | }
135 |
136 | .editor {
137 | margin: 15px;
138 | overflow: hidden;
139 | position: relative;
140 |
141 | .CodeMirror {
142 | border: 1px solid #888;
143 | border-radius: 4px;
144 | height: auto;
145 | }
146 |
147 | .ribbon {
148 | background: #ec0;
149 | color: #a60;
150 | border: solid #fea;
151 | border-width: 1px 0;
152 | font-size: 12px;
153 | font-weight: bold;
154 | line-height: 1.5;
155 | position: absolute;
156 | right: -35px;
157 | text-align: center;
158 | text-shadow: 1px 1px 1px #fea;
159 | top: 15px;
160 | transform: rotate(45deg);
161 | width: 120px;
162 | z-index: 3;
163 |
164 | a {
165 | color: inherit;
166 | }
167 | }
168 | }
169 |
170 | .error-node {
171 | margin: 15px;
172 |
173 | .alert {
174 | clear: both;
175 | max-height: 200px;
176 | overflow: auto;
177 |
178 | pre {
179 | background-color: inherit;
180 | border: none;
181 | color: inherit;
182 | float: left;
183 | margin: 0;
184 | padding: 0;
185 | }
186 | }
187 | }
188 | }
189 |
190 | .code-tab {
191 | background: #e0e0e0;
192 | border: 1px solid #ccc;
193 | border-bottom-left-radius: 4px;
194 | border-bottom-right-radius: 4px;
195 | border-top: none;
196 | display: inline-block;
197 | float: right;
198 | margin-left: 8px;
199 | padding: 4px 8px;
200 | position: relative;
201 | top: -1px;
202 |
203 | &:hover,
204 | &:focus {
205 | text-decoration: none;
206 | }
207 | }
208 | }
209 |
210 | .anchor,
211 | .anchor:hover,
212 | .anchor:active,
213 | .anchor:focus {
214 | color: black;
215 | text-decoration: none;
216 | position: relative;
217 | }
218 | .anchor-icon {
219 | font-size: 90%;
220 | padding-top: 0.1em;
221 | position: absolute;
222 | left: -0.8em;
223 | opacity: 0;
224 | }
225 |
226 | h1:hover .anchor-icon,
227 | h1 a:focus .anchor-icon,
228 | h2:hover .anchor-icon,
229 | h2 a:focus .anchor-icon,
230 | h3:hover .anchor-icon,
231 | h3 a:focus .anchor-icon,
232 | h4:hover .anchor-icon,
233 | h4 a:focus .anchor-icon {
234 | opacity: 0.5;
235 | }
236 |
237 | .dropdown-menu {
238 | max-height: 20em;
239 | max-width: 100%;
240 | overflow-x: hidden;
241 | overflow-y: auto;
242 | }
243 |
244 | .state-item {
245 | clear: both;
246 | height: 41px;
247 | line-height: 41px;
248 | .state-image {
249 | float: right;
250 | }
251 | }
252 |
253 | .abbrev {
254 | font-size: 12px;
255 | opacity: 0.7;
256 | &:before {
257 | content: "\2003"
258 | }
259 | }
260 |
261 | // adjust position of feedback icon due to clear button
262 | #tagInput {
263 | .form-control-feedback {
264 | right: 34px;
265 | }
266 | .dropdown, .dropup {
267 | & + .form-control-feedback {
268 | right: 68px;
269 | }
270 | }
271 | }
272 |
273 | .tag img {
274 | height: 1em;
275 | }
276 |
277 | .repo {
278 | overflow-y: auto;
279 | }
280 |
281 | .repo-avatar {
282 | float: left;
283 | margin-right: 10px;
284 | padding: 3px 0;
285 | width: 60px;
286 | img {
287 | border-radius: 3px;
288 | height: auto;
289 | width: 100%;
290 | }
291 | }
292 |
293 | .repo-meta {
294 | margin-left: 70px;
295 | overflow-x: hidden;
296 | }
297 |
298 | .repo-title {
299 | color: black;
300 | font-weight: bold;
301 | overflow-x: hidden;
302 | text-overflow: ellipsis;
303 | }
304 |
305 | .repo-desc {
306 | color: #777;
307 | overflow-x: hidden;
308 | padding: 3px 0;
309 | text-overflow: ellipsis;
310 | }
311 |
312 | .repo-stats {
313 | color: #aaa;
314 | font-size: 11px;
315 | > div {
316 | display: inline-block;
317 | &:not(:first-child) {
318 | margin-left: 1em;
319 | }
320 | }
321 | }
322 |
323 | li.active {
324 | .repo-title {
325 | color: white;
326 | }
327 | .repo-desc, .repo-stats {
328 | color: #ccc;
329 | }
330 | }
331 |
--------------------------------------------------------------------------------
/src/Choices.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import classNames from 'classnames'
4 | import shallowEqual from 'fbjs/lib/shallowEqual'
5 | import keycode from 'keycode'
6 | import PropTypes from 'prop-types'
7 | import React from 'react'
8 | import ReactDOM from 'react-dom'
9 | import type { Node } from './types'
10 |
11 | export default class Choices extends React.Component {
12 | static propTypes = {
13 | autoHeight: PropTypes.bool,
14 | disabled: PropTypes.bool,
15 | focused: PropTypes.bool,
16 | inputValue: PropTypes.string,
17 | items: PropTypes.arrayOf(PropTypes.any).isRequired,
18 | onKeyPress: PropTypes.func,
19 | onRemove: PropTypes.func,
20 | renderItem: PropTypes.func.isRequired
21 | };
22 |
23 | props: {
24 | autoHeight?: boolean;
25 | children?: Node | Node[];
26 | disabled?: boolean;
27 | focused?: boolean;
28 | inputValue: string;
29 | items: any[];
30 | onKeyPress?: (event: SyntheticKeyboardEvent) => void;
31 | onRemove?: (index: number) => void;
32 | renderItem: (item: any) => Node;
33 | };
34 |
35 | state: {
36 | };
37 |
38 | constructor(...args: any) {
39 | super(...args)
40 | /* istanbul ignore next: https://github.com/gotwarlost/istanbul/issues/690#issuecomment-265718617 */
41 | const self: any = this // https://github.com/facebook/flow/issues/1517
42 | self._handleKeyDown = this._handleKeyDown.bind(this)
43 | self._handleKeyPress = this._handleKeyPress.bind(this)
44 | self._handleClose = this._handleClose.bind(this)
45 | self._handleClick = this._handleClick.bind(this)
46 | self._focusInput = this._focusInput.bind(this)
47 | }
48 |
49 | shouldComponentUpdate(nextProps: Object) {
50 | return !shallowEqual(this.props, nextProps)
51 | }
52 |
53 | render() {
54 | const { autoHeight, disabled, focused, inputValue, items, renderItem, children } = this.props
55 | const hasItems = items.length > 0
56 | let inputStyle
57 | if (hasItems) {
58 | // guesstimate input width since inline-block container
59 | // won't allow it to expand automatically
60 | inputStyle = { width: ((inputValue.length + 1) * 0.75) + 'em' }
61 | }
62 | return (
63 | Multiple selections
43 |
44 | Autosuggest supports selection of multiple options using a tag/pill style of
45 | user interface. The allowDuplicates boolean property (which defaults
46 | to false) controls whether an option can be selected more than once.
47 | Unless datalistOnly is enabled, arbitrary values can be selected by
48 | pressing Enter after typing them.
49 |
51 | The application can control the rendering of both the drop-down menu options and the selected
52 | items by overriding the renderSuggested and renderSelected methods,
53 | respectively, of the ItemAdapter. By default, both of these methods call
54 | the renderItem method, which can be overridden instead to use the same
55 | rendering in both contexts.
56 |
58 | Normally, the Autosuggest component maintains a fixed height (like other Bootstrap 59 | input elements). However, if the drop-down menu toggle is disabled and no input 60 | group add-ons are specified, the height of the component is allowed to grow as 61 | necessary to contain the selections. 62 |
63 |-
71 | {items.map((item, index) =>
72 |
- 77 | 79 | 81 | {renderItem(item)} 82 | 83 | )} 84 |
- 85 | {children} 86 | 87 |
91 | {this._renderExample()}
92 | {this._renderToggle()}
93 | {this._renderReset()}
94 |
95 | )
96 | }
97 |
98 | _renderExample() {
99 | return (
100 |
101 |
102 | {this._renderEditor()}
103 |
104 |
105 | )
106 | }
107 |
108 | _renderEditor() {
109 | if (!this.state.showCode) {
110 | return null
111 | }
112 | const options: Object = {
113 | extraKeys: {
114 | 'Tab': false, // let focus go to next control
115 | 'Shift-Tab': false, // let focus go to previous control
116 | 'Alt-Tab': 'indentMore',
117 | 'Shift-Alt-Tab': 'indentLess'
118 | },
119 | foldGutter: this.props.codeFolding,
120 | gutters: [],
121 | lineNumbers: this.props.lineNumbers,
122 | lineWrapping: false,
123 | matchBrackets: true,
124 | mode: 'jsx',
125 | readOnly: false,
126 | smartIndent: true,
127 | theme: 'material'
128 | }
129 | if (this.props.lineNumbers) {
130 | options.gutters.push('CodeMirror-linenumbers')
131 | }
132 | if (this.props.codeFolding) {
133 | options.gutters.push('CodeMirror-foldgutter')
134 | }
135 | const { ribbonText } = this.props
136 | return
137 | {ribbonText &&
146 | }
147 |
148 | _renderReset() {
149 | return this.state.code !== this.props.code ? (
150 | {ribbonText}
}
138 | {err.toString()}
222 | {transformedCode && {transformedCode}}
223 | {item.name}{item.key}
286 | }
287 | }
288 | CountryAdapter.instance = new CountryAdapter()
289 |
290 | return function render({ country, onChange }) {
291 | return
293 |
294 | {country && country.key && `Country code: ${country.key}`}
295 |
296 |
297 |
918 | {this._renderInputGroup(toggleVisible, toggleCanOpen)}
919 | {this._renderMenu()}
920 |
921 | }
922 |
923 | _renderInputGroup(toggleVisible: boolean, toggleCanOpen: boolean): Node {
924 | const addonBefore = this.props.addonBefore ? (
925 |
926 | {this.props.addonBefore}
927 |
928 | ) : null
929 |
930 | const addonAfter = this.props.addonAfter ? (
931 |
932 | {this.props.addonAfter}
933 |
934 | ) : null
935 |
936 | const buttonBefore = this.props.buttonBefore ? (
937 |
938 | {this.props.buttonBefore}
939 |
940 | ) : null
941 |
942 | // Bootstrap expects the dropdown toggle to be last,
943 | // as it does not reset the right border radius for toggles:
944 | // .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle)
945 | // { @include border-right-radius(0); }
946 | const toggle = toggleVisible && this._renderToggle(toggleCanOpen)
947 | const buttonAfter = (toggle || this.props.buttonAfter) ? (
948 |
949 | {this.props.buttonAfter}
950 | {toggle}
951 |
952 | ) : null
953 |
954 | const classes = classNames({
955 | 'input-group': addonBefore || addonAfter || buttonBefore || buttonAfter,
956 | 'input-group-sm': this.props.bsSize === 'small',
957 | 'input-group-lg': this.props.bsSize === 'large',
958 | 'input-group-toggle': !!toggle
959 | })
960 | return classes ? (
961 |
962 | {addonBefore}
963 | {buttonBefore}
964 | {this._renderChoices()}
965 | {addonAfter}
966 | {buttonAfter}
967 |
968 | ) : this._renderChoices()
969 | }
970 |
971 | _renderToggle(canOpen: boolean): Node {
972 | return (
973 |