-
Notifications
You must be signed in to change notification settings - Fork 829
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add EuiComboBox and EuiHighlight. * calculatePopoverPosition service now accepts a positions argument so you can specify which positions are acceptable * Added closeButtonProps prop to EuiBadge, hollow badge type, and support for arbitrary hex color * Added support for arbitrary hex color to EuiIcon
- Loading branch information
Showing
78 changed files
with
2,841 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ import { | |
|
|
||
| const badges = [ | ||
| 'default', | ||
| 'hollow', | ||
| 'primary', | ||
| 'secondary', | ||
| 'accent', | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import { | ||
| EuiComboBox, | ||
| } from '../../../../src/components'; | ||
|
|
||
| const allOptions = [{ | ||
| label: 'Titan', | ||
| 'data-test-subj': 'titanOption', | ||
| }, { | ||
| label: 'Enceladus', | ||
| }, { | ||
| label: 'Mimas', | ||
| }, { | ||
| label: 'Dione', | ||
| }, { | ||
| label: 'Iapetus', | ||
| }, { | ||
| label: 'Phoebe', | ||
| }, { | ||
| label: 'Rhea', | ||
| }, { | ||
| label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', | ||
| }, { | ||
| label: 'Tethys', | ||
| }, { | ||
| label: 'Hyperion', | ||
| }]; | ||
|
|
||
| export default class extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| isLoading: false, | ||
| isPopoverOpen: false, | ||
| selectedOptions: [], | ||
| options: [], | ||
| }; | ||
| } | ||
|
|
||
| onChange = (selectedOptions) => { | ||
| this.setState({ | ||
| selectedOptions, | ||
| }); | ||
| }; | ||
|
|
||
| onSearchChange = (searchValue) => { | ||
| this.setState({ | ||
| isLoading: true, | ||
| options: [], | ||
| }); | ||
|
|
||
| clearTimeout(this.searchTimeout); | ||
|
|
||
| this.searchTimeout = setTimeout(() => { | ||
| // Simulate a remotely-executed search. | ||
| this.setState({ | ||
| isLoading: false, | ||
| options: allOptions.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase())), | ||
| }); | ||
| }, 1200); | ||
| } | ||
|
|
||
| onCreateOption = (searchValue, flattenedOptions) => { | ||
| const normalizedSearchValue = searchValue.trim().toLowerCase(); | ||
|
|
||
| if (!normalizedSearchValue) { | ||
| return; | ||
| } | ||
|
|
||
| const newOption = { | ||
| label: searchValue, | ||
| }; | ||
|
|
||
| // Create the option if it doesn't exist. | ||
| if (flattenedOptions.findIndex(option => | ||
| option.value.trim().toLowerCase() === normalizedSearchValue | ||
| ) === -1) { | ||
| // Simulate creating this option on the server. | ||
| allOptions.push(newOption); | ||
| this.setState(prevState => ({ | ||
| options: prevState.options.concat(newOption), | ||
| })); | ||
| } | ||
|
|
||
| // Select the option. | ||
| this.setState(prevState => ({ | ||
| selectedOptions: prevState.selectedOptions.concat(newOption), | ||
| })); | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| // Simulate initial load. | ||
| this.onSearchChange(''); | ||
| } | ||
|
|
||
| render() { | ||
| const { selectedOptions, isLoading, options } = this.state; | ||
|
|
||
| return ( | ||
| <EuiComboBox | ||
| placeholder="Search asynchronously" | ||
| async | ||
| options={options} | ||
| selectedOptions={selectedOptions} | ||
| isLoading={isLoading} | ||
| onChange={this.onChange} | ||
| onSearchChange={this.onSearchChange} | ||
| onCreateOption={this.onCreateOption} | ||
| /> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import { | ||
| EuiComboBox, | ||
| } from '../../../../src/components'; | ||
|
|
||
| export default class extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.options = [{ | ||
| label: 'Titan', | ||
| 'data-test-subj': 'titanOption', | ||
| color: 'primary', | ||
| }, { | ||
| label: 'Enceladus', | ||
| color: 'secondary', | ||
| }, { | ||
| label: 'Mimas', | ||
| color: '#DB1374', | ||
| }, { | ||
| label: 'Dione', | ||
| color: 'accent', | ||
| }, { | ||
| label: 'Iapetus', | ||
| color: 'primary', | ||
| color: 'warning', | ||
| }, { | ||
| label: 'Phoebe', | ||
| color: 'danger', | ||
| }, { | ||
| label: 'Rhea', | ||
| color: 'default', | ||
| }, { | ||
| label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', | ||
| color: '#F98510', | ||
| }, { | ||
| label: 'Tethys', | ||
| color: '#FEB6DB', | ||
| }, { | ||
| label: 'Hyperion', | ||
| color: '#BFA180', | ||
| }]; | ||
|
|
||
| this.state = { | ||
| selectedOptions: [this.options[2], this.options[4]], | ||
| }; | ||
| } | ||
|
|
||
| onChange = (selectedOptions) => { | ||
| this.setState({ | ||
| selectedOptions, | ||
| }); | ||
| }; | ||
|
|
||
| onCreateOption =(searchValue, flattenedOptions) => { | ||
| const normalizedSearchValue = searchValue.trim().toLowerCase(); | ||
|
|
||
| if (!normalizedSearchValue) { | ||
| return; | ||
| } | ||
|
|
||
| const newOption = { | ||
| label: searchValue, | ||
| }; | ||
|
|
||
| // Create the option if it doesn't exist. | ||
| if (flattenedOptions.findIndex(option => | ||
| option.value.trim().toLowerCase() === normalizedSearchValue | ||
| ) === -1) { | ||
| this.options.push(newOption); | ||
| } | ||
|
|
||
| // Select the option. | ||
| this.setState(prevState => ({ | ||
| selectedOptions: prevState.selectedOptions.concat(newOption), | ||
| })); | ||
| }; | ||
|
|
||
| render() { | ||
| const { selectedOptions } = this.state; | ||
| return ( | ||
| <EuiComboBox | ||
| placeholder="Select or create options" | ||
| options={this.options} | ||
| selectedOptions={selectedOptions} | ||
| onChange={this.onChange} | ||
| onCreateOption={this.onCreateOption} | ||
| /> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import { | ||
| EuiComboBox, | ||
| } from '../../../../src/components'; | ||
|
|
||
| export default class extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.options = [{ | ||
| label: 'Titan', | ||
| 'data-test-subj': 'titanOption', | ||
| }, { | ||
| label: 'Enceladus', | ||
| }, { | ||
| label: 'Mimas', | ||
| }, { | ||
| label: 'Dione', | ||
| }, { | ||
| label: 'Iapetus', | ||
| }, { | ||
| label: 'Phoebe', | ||
| }, { | ||
| label: 'Rhea', | ||
| }, { | ||
| label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', | ||
| }, { | ||
| label: 'Tethys', | ||
| }, { | ||
| label: 'Hyperion', | ||
| }]; | ||
|
|
||
| this.state = { | ||
| selectedOptions: [this.options[2], this.options[4]], | ||
| }; | ||
| } | ||
|
|
||
| onChange = (selectedOptions) => { | ||
| this.setState({ | ||
| selectedOptions, | ||
| }); | ||
| }; | ||
|
|
||
| onCreateOption = (searchValue, flattenedOptions) => { | ||
| const normalizedSearchValue = searchValue.trim().toLowerCase(); | ||
|
|
||
| if (!normalizedSearchValue) { | ||
| return; | ||
| } | ||
|
|
||
| const newOption = { | ||
| label: searchValue, | ||
| }; | ||
|
|
||
| // Create the option if it doesn't exist. | ||
| if (flattenedOptions.findIndex(option => | ||
| option.label.trim().toLowerCase() === normalizedSearchValue | ||
| ) === -1) { | ||
| this.options.push(newOption); | ||
| } | ||
|
|
||
| // Select the option. | ||
| this.setState(prevState => ({ | ||
| selectedOptions: prevState.selectedOptions.concat(newOption), | ||
| })); | ||
| }; | ||
|
|
||
| render() { | ||
| const { selectedOptions } = this.state; | ||
| return ( | ||
| <EuiComboBox | ||
| placeholder="Select or create options" | ||
| options={this.options} | ||
| selectedOptions={selectedOptions} | ||
| onChange={this.onChange} | ||
| onCreateOption={this.onCreateOption} | ||
| /> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.