diff --git a/src-docs/src/views/search_bar/search_bar.js b/src-docs/src/views/search_bar/search_bar.js index 4f7a7f83ebf4..c96cbdc3a3db 100644 --- a/src-docs/src/views/search_bar/search_bar.js +++ b/src-docs/src/views/search_bar/search_bar.js @@ -1,6 +1,7 @@ import React, { Component, Fragment } from 'react'; import { + EuiButton, EuiHealth, EuiCallOut, EuiSpacer, @@ -105,6 +106,22 @@ export class SearchBar extends Component { this.setState(prevState => ({ incremental: !prevState.incremental })); }; + renderToolsLeft() { + return null; + return [ + { + store.deleteUsers(this.state.selection.map(user => user.id)); + }} + > + Delete items + + ]; + } + renderSearch() { const { incremental, @@ -141,6 +158,7 @@ export class SearchBar extends Component { return ( { store.deleteUsers(...selection.map(user => user.id)); this.setState({ selection: [] }); }; + return ( + Load Users + + ), ( + + Load Users (Error) + + )]; + } + render() { - const deleteButton = this.renderDeleteButton(); + const search = { + toolsLeft: this.renderToolsLeft(), + toolsRight: this.renderToolsRight(), + box: { + incremental: true, + }, + filters: [ + { + type: 'is', + field: 'online', + name: 'Online', + negatedName: 'Offline' + }, + { + type: 'field_value_selection', + field: 'nationality', + name: 'Nationality', + multiSelect: false, + options: store.countries.map(country => ({ + value: country.code, + name: country.name, + view: `${country.flag} ${country.name}` + })) + } + ] + }; + + const pagination = { + pageSizeOptions: [3, 5, 8] + }; + + const selection = { + itemId: 'id', + selectable: (user) => user.online, + selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined, + onSelectionChange: (selection) => this.setState({ selection }) + }; + + const columns = [ + { + field: 'firstName', + name: 'First Name', + sortable: true + }, + { + field: 'lastName', + name: 'Last Name' + }, + { + field: 'github', + name: 'Github', + render: (username) => ( + {username} + ) + }, + { + field: 'dateOfBirth', + name: 'Date of Birth', + dataType: 'date', + render: (date) => formatDate(date, 'dobLong'), + sortable: true + }, + { + field: 'nationality', + name: 'Nationality', + render: (countryCode) => { + const country = store.getCountry(countryCode); + return `${country.flag} ${country.name}`; + } + }, + { + field: 'online', + name: 'Online', + dataType: 'boolean', + render: (online) => { + const color = online ? 'success' : 'danger'; + const label = online ? 'Online' : 'Offline'; + return {label}; + }, + sortable: true + } + ]; + return (
- + {/* { deleteButton ? {deleteButton} : undefined } @@ -122,67 +227,18 @@ export class Table extends Component { Load Users (Error) - + */} ( - {username} - ) - }, - { - field: 'dateOfBirth', - name: 'Date of Birth', - dataType: 'date', - render: (date) => formatDate(date, 'dobLong'), - sortable: true - }, - { - field: 'nationality', - name: 'Nationality', - render: (countryCode) => { - const country = store.getCountry(countryCode); - return `${country.flag} ${country.name}`; - } - }, - { - field: 'online', - name: 'Online', - dataType: 'boolean', - render: (online) => { - const color = online ? 'success' : 'danger'; - const label = online ? 'Online' : 'Offline'; - return {label}; - }, - sortable: true - } - ]} - pagination={{ - pageSizeOptions: [3, 5, 8] - }} + columns={columns} + search={search} + pagination={pagination} sorting={true} - selection={{ - itemId: 'id', - selectable: (user) => user.online, - selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined, - onSelectionChange: (selection) => this.setState({ selection }) - }} + selection={selection} />
); diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js index 24f29684d612..d64f2a822c8b 100644 --- a/src/components/search_bar/search_bar.js +++ b/src/components/search_bar/search_bar.js @@ -107,16 +107,39 @@ export class EuiSearchBar extends Component { this.props.onChange(query); }; + renderTools(tools) { + if (!tools) { + return undefined; + } + + if (Array.isArray(tools)) { + return tools.map(tool => ( + + {tool} + + )); + } + + return {tools}; + } + render() { const { query, queryText, error } = this.state; - const { box, filters } = this.props; + const { box, filters, toolsLeft, toolsRight } = this.props; + + const toolsLeftEl = this.renderTools(toolsLeft); + const filtersBar = !filters ? undefined : ( - + ); + + const toolsRightEl = this.renderTools(toolsRight); + return ( + {toolsLeftEl} {filtersBar} + {toolsRightEl} ); }