-
Notifications
You must be signed in to change notification settings - Fork 842
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added EuiSearchBar A powerful search bar for common use cases that require more than just prefix and terms lookups. This one also supports field clauses (e.g. `tag:bug`) and is clauses (e.g. `is:open`). The bar has a search box where the user can enter the query text and can also hold filters. Filter are essentially UI controls that help to manipulate/build the query - they mainly help those the don't remember the query syntax.
- Loading branch information
Showing
71 changed files
with
5,472 additions
and
69 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
Large diffs are not rendered by default.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
|
|
||
| import React, { | ||
| Component, | ||
| } from 'react'; | ||
|
|
||
| import { | ||
| EuiPopover, | ||
| EuiPopoverTitle, | ||
| EuiFieldSearch, | ||
| EuiFilterSelectItem, | ||
| EuiLoadingChart, | ||
| EuiSpacer, | ||
| EuiIcon, | ||
| EuiFilterGroup, | ||
| EuiFilterButton, | ||
| } from '../../../../src/components'; | ||
|
|
||
| export default class extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| isPopoverOpen: false, | ||
| }; | ||
| } | ||
|
|
||
| onButtonClick() { | ||
| this.setState({ | ||
| isPopoverOpen: !this.state.isPopoverOpen, | ||
| }); | ||
| } | ||
|
|
||
| closePopover() { | ||
| this.setState({ | ||
| isPopoverOpen: false, | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
|
|
||
| const items = [ | ||
| { name: 'Johann Sebastian Bach', checked: 'on' }, | ||
| { name: 'Wolfgang Amadeus Mozart', checked: 'on' }, | ||
| { name: 'Antonín Dvořák', checked: 'off' }, | ||
| { name: 'Dmitri Shostakovich' }, | ||
| { name: 'Felix Mendelssohn-Bartholdy' }, | ||
| { name: 'Franz Liszt' }, | ||
| { name: 'Franz Schubert' }, | ||
| { name: 'Frédéric Chopin' }, | ||
| { name: 'Georg Friedrich Händel' }, | ||
| { name: 'Giuseppe Verdi' }, | ||
| { name: 'Gustav Mahler' }, | ||
| { name: 'Igor Stravinsky' }, | ||
| { name: 'Johannes Brahms' }, | ||
| { name: 'Joseph Haydn' }, | ||
| { name: 'Ludwig van Beethoven' }, | ||
| { name: 'Piotr Illitch Tchaïkovsky' }, | ||
| { name: 'Robert Schumann' }, | ||
| { name: 'Sergej S. Prokofiew' }, | ||
| { name: 'Wolfgang Amadeus Mozart' }, | ||
| ]; | ||
|
|
||
| const button = ( | ||
| <EuiFilterButton | ||
| iconType="arrowDown" | ||
| onClick={this.onButtonClick.bind(this)} | ||
| isSelected={this.state.isPopoverOpen} | ||
| hasActiveFilters={true} | ||
| > | ||
| Composers | ||
| </EuiFilterButton> | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiFilterGroup> | ||
| <EuiFilterButton> | ||
| Filter on | ||
| </EuiFilterButton> | ||
| <EuiFilterButton> | ||
| Filter off | ||
| </EuiFilterButton> | ||
| <EuiPopover | ||
| id="popover" | ||
| ownFocus | ||
| button={button} | ||
| isOpen={this.state.isPopoverOpen} | ||
| closePopover={this.closePopover.bind(this)} | ||
| panelPaddingSize="none" | ||
| withTitle | ||
| panelClassName="euiFilterGroup__popoverPanel" | ||
| > | ||
| <EuiPopoverTitle> | ||
| <EuiFieldSearch /> | ||
| </EuiPopoverTitle> | ||
| <div className="euiFilterSelect__items"> | ||
| {items.map((item, index) => ( | ||
| <EuiFilterSelectItem | ||
| checked={item.checked} | ||
| key={index} | ||
| > | ||
| {item.name} | ||
| </EuiFilterSelectItem> | ||
| ))} | ||
| {/* | ||
| Use when loading items initially | ||
| */} | ||
| <div className="euiFilterSelect__note"> | ||
| <div className="euiFilterSelect__noteContent"> | ||
| <EuiLoadingChart size="m" /> | ||
| <EuiSpacer size="xs" /> | ||
| <p>Loading filters</p> | ||
| </div> | ||
| </div> | ||
| {/* | ||
| Use when no results are returned | ||
| */} | ||
| <div className="euiFilterSelect__note"> | ||
| <div className="euiFilterSelect__noteContent"> | ||
| <EuiIcon type="minusInCircle" /> | ||
| <EuiSpacer size="xs" /> | ||
| <p>No filters found</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </EuiPopover> | ||
| </EuiFilterGroup> | ||
| ); | ||
| } | ||
| } |
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,65 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { renderToHtml } from '../../services'; | ||
|
|
||
| import { | ||
| GuideSectionTypes, | ||
| } from '../../components'; | ||
|
|
||
| import { | ||
| EuiCallOut, | ||
| EuiCode, | ||
| EuiFilterGroup, | ||
| EuiFilterButton, | ||
| EuiFilterSelectItem, | ||
| EuiSpacer, | ||
| } from '../../../../src/components'; | ||
|
|
||
| import FilterGroup from './filter_group'; | ||
| const filterGroupSource = require('!!raw-loader!./filter_group'); | ||
| const filterGroupHtml = renderToHtml(FilterGroup); | ||
|
|
||
| export const FilterGroupExample = { | ||
| title: 'FilterGroup', | ||
| intro: ( | ||
| <div> | ||
| <EuiCallOut | ||
| title="Demo of visual pattern only" | ||
| color="warning" | ||
| > | ||
| <p> | ||
| This documents a visual pattern used for filtering (usually page heads next to search). | ||
| The individual components themselves are very simple | ||
| and do not have much functionality on their own. If you are looking for expanded usage | ||
| examples please check out the Table of Records component which uses this more fully and | ||
| can give you a better example of its usage when applied to filtering. | ||
| </p> | ||
| </EuiCallOut> | ||
|
|
||
| <EuiSpacer size="l" /> | ||
| </div> | ||
| ), | ||
| sections: [{ | ||
| title: 'FilterGroup', | ||
| source: [{ | ||
| type: GuideSectionTypes.JS, | ||
| code: filterGroupSource, | ||
| }, { | ||
| type: GuideSectionTypes.HTML, | ||
| code: filterGroupHtml, | ||
| }], | ||
| text: ( | ||
| <p> | ||
| Use <EuiCode>EuiFilterGroup</EuiCode> to wrap <EuiCode>EuiFilterButton</EuiCode>s | ||
| into a container that looks nice against form fields (like search). These buttons | ||
| are used in two different patterns. The first, as a simple on/off pattern to show | ||
| whether a setting is on. The second is as delivery for a popover for filtering an | ||
| array of passed items. This mostly uses standard popover mechanics, but the | ||
| component <EuiCode>EuiFilterSelectItem</EuiCode> is used for the items themselves. | ||
| </p> | ||
| ), | ||
| components: { EuiFilterGroup }, | ||
| props: { EuiFilterGroup, EuiFilterButton, EuiFilterSelectItem }, | ||
| demo: <FilterGroup />, | ||
| }], | ||
| }; |
Oops, something went wrong.