Fix table re-rendering by showing/hiding actions column via CSS inste…

…ad (#665) * Show and hide table action column via CSS
elastic · Apr 13, 2018 · 89b664c · 89b664c
1 parent 143f89c
commit 89b664c
Show file tree

Hide file tree

Showing 18 changed files with 138 additions and 205 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,10 @@
 - Wrap `EuiStepHorizontal` text instead of truncating it ([#653](https://github.com/elastic/eui/pull/653))
 - Fixed a bug where `EuiSideNavItem` wouldn't pass an `onClick` handler down to `<a>` tags if they also had an `href`. ([#664](https://github.com/elastic/eui/pull/664))
 
+**Bug fixes**
+
+- Fixed `EuiBasicTable` re-rendering on hover of table rows ([#665](https://github.com/elastic/eui/pull/665))
+
 **Breaking changes**
 
 - `EuiStepsHorizontal` now requires an `onClick` prop be provided for each step configuration object ([#653](https://github.com/elastic/eui/pull/653))

diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -11,6 +11,7 @@ import {
   EuiFlexItem,
   EuiSwitch,
   EuiSpacer,
+  EuiText,
 } from '../../../../../src/components';
 
 /*
@@ -47,7 +48,8 @@ export class Table extends Component {
       sortField: 'firstName',
       sortDirection: 'asc',
       selectedItems: [],
-      multiAction: false
+      multiAction: false,
+      customAction: false,
     };
   }
 
@@ -79,6 +81,10 @@ export class Table extends Component {
     });
   };
 
+  onSelectionChange = (selectedItems) => {
+    this.setState({ selectedItems });
+  };
+
   renderDeleteButton() {
     const { selectedItems } = this.state;
 
@@ -101,6 +107,10 @@ export class Table extends Component {
     this.setState(prevState => ({ multiAction: !prevState.multiAction }));
   };
 
+  toggleCustomAction = () => {
+    this.setState(prevState => ({ customAction: !prevState.customAction }));
+  };
+
   deleteUser = user => {
     store.deleteUsers(user.id);
     this.setState({ selectedItems: [] });
@@ -117,6 +127,8 @@ export class Table extends Component {
       pageSize,
       sortField,
       sortDirection,
+      multiAction,
+      customAction,
     } = this.state;
 
     const {
@@ -126,6 +138,63 @@ export class Table extends Component {
 
     const deleteButton = this.renderDeleteButton();
 
+    let actions = null;
+
+    if(multiAction) {
+      actions = customAction
+        ? [{
+          render: (item) => {
+            return (
+              <EuiText color="secondary" onClick={() => this.cloneUser(item)}>
+                Clone
+              </EuiText>
+            );
+          }
+        }, {
+          render: (item) => {
+            return (
+              <EuiText color="danger" onClick={() => this.deleteUser(item)}>
+                Delete
+              </EuiText>
+            );
+          }
+        }]
+        : [{
+          name: 'Clone',
+          description: 'Clone this person',
+          icon: 'copy',
+          onClick: this.cloneUser
+        }, {
+          name: 'Delete',
+          description: 'Delete this person',
+          icon: 'trash',
+          color: 'danger',
+          onClick: this.deleteUser
+        }];
+    } else {
+      actions = customAction
+        ? [{
+          render: (item) => {
+            return (
+              <EuiLink
+                onClick={() => this.deleteUser(item)}
+                color="danger"
+              >
+                Delete
+              </EuiLink>
+            );
+          }
+        }]
+        : [{
+          name: 'Delete',
+          description: 'Delete this person',
+          icon: 'trash',
+          color: 'danger',
+          type: 'icon',
+          onClick: this.deleteUser
+        }];
+    }
+
     const columns = [{
       field: 'firstName',
       name: 'First Name',
@@ -166,25 +235,7 @@ export class Table extends Component {
       sortable: true
     }, {
       name: 'Actions',
-      actions: this.state.multiAction ? [{
-        name: 'Clone',
-        description: 'Clone this person',
-        icon: 'copy',
-        onClick: this.cloneUser
-      }, {
-        name: 'Delete',
-        description: 'Delete this person',
-        icon: 'trash',
-        color: 'danger',
-        onClick: this.deleteUser
-      }] : [{
-        name: 'Delete',
-        type: 'icon',
-        description: 'Delete this person',
-        icon: 'trash',
-        color: 'danger',
-        onClick: this.deleteUser
-      }]
+      actions
     }];
 
     const pagination = {
@@ -219,6 +270,13 @@ export class Table extends Component {
               onChange={this.toggleMultiAction}
             />
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiSwitch
+              label="Custom Actions"
+              checked={this.state.customAction}
+              onChange={this.toggleCustomAction}
+            />
+          </EuiFlexItem>
         </EuiFlexGroup>
 
         <EuiSpacer size="l" />