{
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}
);
}