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

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" />

src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap

@@ -6,6 +6,7 @@ exports[`CollapsedItemActions render 1`] = `
   button={
     <EuiButtonIcon
       aria-label="actions"
+      className={undefined}
       color="text"
       iconType="gear"
       isDisabled={false}
@@ -32,7 +33,9 @@ exports[`CollapsedItemActions render 1`] = `
         >
           default1
         </EuiContextMenuItem>,
-        <EuiContextMenuItem />,
+        <EuiContextMenuItem
+          onClick={[Function]}
+        />,
       ]
     }
   />

src/components/basic_table/collapsed_item_actions.js

@@ -45,7 +45,7 @@ export class CollapsedItemActions extends Component {
 
   render() {
 
-    const { actions, itemId, item, actionEnabled, onFocus } = this.props;
+    const { actions, itemId, item, actionEnabled, onFocus, className } = this.props;
 
     const isOpen = this.state.popoverOpen;
 
@@ -60,8 +60,9 @@ export class CollapsedItemActions extends Component {
       allDisabled = allDisabled && !enabled;
       if (action.render) {
         const actionControl = action.render(item, enabled);
+        const actionControlOnClick = actionControl && actionControl.props && actionControl.props.onClick;
         controls.push(
-          <EuiContextMenuItem key={key}>
+          <EuiContextMenuItem key={key} onClick={actionControlOnClick ? actionControlOnClick.bind(null, item) : () => {}}>
             {actionControl}
           </EuiContextMenuItem>
         );
@@ -82,6 +83,7 @@ export class CollapsedItemActions extends Component {
 
     const popoverButton = (
       <EuiButtonIcon
+        className={className}
         aria-label="actions"
         iconType="gear"
         color="text"
@@ -93,6 +95,7 @@ export class CollapsedItemActions extends Component {
 
     return (
       <EuiPopover
+        className={className}
         popoverRef={this.registerPopoverDiv}
         id={`${itemId}-actions`}
         isOpen={isOpen}

src/components/basic_table/custom_item_action.js

@@ -41,12 +41,12 @@ export class CustomItemAction extends Component {
   };
 
   render() {
-    const { action, enabled, item } = this.props;
+    const { action, enabled, item, className } = this.props;
     const tool = action.render(item, enabled);
     const clonedTool = cloneElement(tool, { onFocus: this.onFocus, onBlur: this.onBlur });
     const style = this.hasFocus() ? { opacity: 1 } : null;
     return (
-      <div style={style}>
+      <div style={style} className={className}>
         {clonedTool}
       </div>
     );

src/components/basic_table/default_item_action.js

@@ -13,7 +13,7 @@ export class DefaultItemAction extends Component {
   }
 
   render() {
-    const { action, enabled, item } = this.props;
+    const { action, enabled, item, className } = this.props;
     if (!action.onClick) {
       throw new Error(`Cannot render item action [${action.name}]. Missing required 'onClick' callback. If you want
       to provide a custom action control, make sure to define the 'render' callback`);
@@ -28,6 +28,7 @@ export class DefaultItemAction extends Component {
       }
       return (
         <EuiButtonIcon
+          className={className}
           aria-label={action.name}
           isDisabled={!enabled}
           color={color}
@@ -40,6 +41,7 @@ export class DefaultItemAction extends Component {
 
     return (
       <EuiButton
+        className={className}
         size="s"
         isDisabled={!enabled}
         color={color}

src/components/basic_table/expanded_item_actions.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { DefaultItemAction } from './default_item_action';
 import { CustomItemAction } from './custom_item_action';
 
-export const ExpandedItemActions = ({ actions, itemId, item, actionEnabled }) => {
+export const ExpandedItemActions = ({ actions, itemId, item, actionEnabled, className }) => {
 
   return actions.reduce((tools, action, index) => {
     const available = action.available ? action.available(item) : true;
@@ -16,6 +16,7 @@ export const ExpandedItemActions = ({ actions, itemId, item, actionEnabled }) =>
       tools.push(
         <CustomItemAction
           key={key}
+          className={className}
           index={index}
           action={action}
           enabled={enabled}
@@ -27,6 +28,7 @@ export const ExpandedItemActions = ({ actions, itemId, item, actionEnabled }) =>
       tools.push(
         <DefaultItemAction
           key={key}
+          className={className}
           index={index}
           action={action}
           enabled={enabled}

src/components/table/_table.scss

@@ -146,7 +146,7 @@
 }
 
 .euiTableCellContent--showOnHover {
-  > * {
+  .euiTableCellContent__hoverItem {
     opacity: 0;
 
     .euiTableRow:hover > .euiTableRowCell > &,

src/components/table/table_row_cell.js

@@ -31,17 +31,26 @@ export const EuiTableRowCell = ({
     'euiTableCellContent--truncateText': truncateText,
     // We're doing this rigamarole instead of creating `euiTableCellContent--textOnly` for BWC
     // purposes for the time-being.
-    'euiTableCellContent--overflowingContent': !textOnly,
+    'euiTableCellContent--overflowingContent': textOnly !== true,
   });
 
+  const childClasses = classNames({
+    'euiTableCellContent__text': textOnly === true,
+    'euiTableCellContent__hoverItem': showOnHover,
+  });
+
+  let modifiedChildren = children;
+
+  if(textOnly === true) {
+    modifiedChildren = <span className={childClasses}>{children}</span>;
+  } else if(React.isValidElement(modifiedChildren)) {
+    modifiedChildren = React.Children.map(children, child => React.cloneElement(child, { className: childClasses }));
+  }
+
   return (
     <td className="euiTableRowCell" colSpan={colSpan}>
       <div className={contentClasses} {...rest}>
-        {
-          textOnly === true
-            ? <span className="euiTableCellContent__text">{children}</span>
-            : children
-        }
+        {modifiedChildren}
       </div>
     </td>
   );