Add support for providing tools as nodes instead of config object.

elastic · Mar 3, 2018 · 2561c67 · 2561c67
1 parent a182e75
commit 2561c67
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 59 deletions.
diff --git 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 [
+      <EuiButton
+        key="deleteButton"
+        iconType="trash"
+        color="danger"
+        onClick={()=> {
+          store.deleteUsers(this.state.selection.map(user => user.id));
+        }}
+      >
+        Delete items
+      </EuiButton>
+    ];
+  }
+
   renderSearch() {
     const {
       incremental,
@@ -141,6 +158,7 @@ export class SearchBar extends Component {
 
     return (
       <EuiSearchBar
+        toolsLeft={this.renderToolsLeft()}
         defaultQuery={initialQuery}
         box={{
           placeholder: 'e.g. type:visualization -is:active joe',

diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js
@@ -86,15 +86,18 @@ export class Table extends Component {
     }, random.number({ min: 0, max: 3000 }));
   }
 
-  renderDeleteButton() {
+  renderToolsLeft() {
     const selection = this.state.selection;
+
     if (selection.length === 0) {
       return;
     }
+
     const onClick = () => {
       store.deleteUsers(...selection.map(user => user.id));
       this.setState({ selection: [] });
     };
+
     return (
       <EuiButton
         color="danger"
@@ -106,11 +109,113 @@ export class Table extends Component {
     );
   }
 
+  renderToolsRight() {
+    return [(
+      <EuiButton
+        key="loadUsers"
+        onClick={this.loadUsers.bind(this)}
+        isDisabled={this.state.loading}
+      >
+        Load Users
+      </EuiButton>
+    ), (
+      <EuiButton
+        key="loadUsersError"
+        onClick={this.loadUsersWithError.bind(this)}
+        isDisabled={this.state.loading}
+      >
+        Load Users (Error)
+      </EuiButton>
+    )];
+  }
+
   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) => (
+          <EuiLink href={`https://github.com/${username}`} target="_blank">{username}</EuiLink>
+        )
+      },
+      {
+        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 <EuiHealth color={color}>{label}</EuiHealth>;
+        },
+        sortable: true
+      }
+    ];
+
     return (
       <div>
-        <EuiFlexGroup alignItems="center">
+        {/*<EuiFlexGroup alignItems="center">
           { deleteButton ? <EuiFlexItem grow={false}>{deleteButton}</EuiFlexItem> : undefined }
           <EuiFlexItem grow={false}>
             <EuiButton onClick={this.loadUsers.bind(this)} isDisabled={this.state.loading}>
@@ -122,67 +227,18 @@ export class Table extends Component {
               Load Users (Error)
             </EuiButton>
           </EuiFlexItem>
-        </EuiFlexGroup>
+        </EuiFlexGroup>*/}
         <EuiSpacer size="l"/>
         <EuiInMemoryTable
           items={this.state.users}
           error={this.state.error}
           loading={this.state.loading}
           message={this.state.message}
-          columns={[
-            {
-              field: 'firstName',
-              name: 'First Name',
-              sortable: true
-            },
-            {
-              field: 'lastName',
-              name: 'Last Name'
-            },
-            {
-              field: 'github',
-              name: 'Github',
-              render: (username) => (
-                <EuiLink href={`https://github.com/${username}`} target="_blank">{username}</EuiLink>
-              )
-            },
-            {
-              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 <EuiHealth color={color}>{label}</EuiHealth>;
-              },
-              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}
         />
       </div>
     );

diff --git 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 => (
+        <EuiFlexItem grow={false} key={tool.key}>
+          {tool}
+        </EuiFlexItem>
+      ));
+    }
+
+    return <EuiFlexItem grow={false}>{tools}</EuiFlexItem>;
+  }
+
   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 : (
       <EuiFlexItem grow={false}>
-        <EuiSearchFilters filters={filters} query={query} onChange={this.onFiltersChange}/>
+        <EuiSearchFilters filters={filters} query={query} onChange={this.onFiltersChange} />
       </EuiFlexItem>
     );
+
+    const toolsRightEl = this.renderTools(toolsRight);
+
     return (
       <EuiFlexGroup gutterSize="m" alignItems="center">
+        {toolsLeftEl}
         <EuiFlexItem grow={true}>
           <EuiSearchBox
             {...box}
@@ -127,6 +150,7 @@ export class EuiSearchBar extends Component {
           />
         </EuiFlexItem>
         {filtersBar}
+        {toolsRightEl}
       </EuiFlexGroup>
     );
   }