CDC #302 - Adding popup to Items card view actions; Moving popup cont…

…ent/title into List component
performant-software · Sep 25, 2024 · 3bb47db · 3bb47db
1 parent d12ac0e
commit 3bb47db
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 50 deletions.
diff --git a/packages/semantic-ui/src/components/DataTable.js b/packages/semantic-ui/src/components/DataTable.js
@@ -14,11 +14,9 @@ import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import ColumnResize from './ColumnResize';
 import useColumnSelector, { type Props as ColumnSelectorProps } from './DataTableColumnSelector';
-import useList, { type Props as ListProps } from './List';
+import useList, { type Action, type Props as ListProps } from './List';
 import './DataTable.css';
 
-import type { Action } from './List';
-
 type Props = ListProps & ColumnSelectorProps & {
   /**
    * If <code>true</code>, the rows of the table can be expanded and collapsed.
@@ -352,36 +350,7 @@ class DataTable extends Component<Props, State> {
       return null;
     }
 
-    const actions = this.props.actions
-      .filter((action) => !action.accept || action.accept(item))
-      .map((action) => {
-        let defaults = {};
-
-        if (action.name === 'edit') {
-          defaults = {
-            popup: {
-              title: i18n.t('DataTable.actions.edit.title'),
-              content: i18n.t('DataTable.actions.edit.content')
-            }
-          };
-        } else if (action.name === 'copy') {
-          defaults = {
-            popup: {
-              title: i18n.t('DataTable.actions.copy.title'),
-              content: i18n.t('DataTable.actions.copy.content')
-            }
-          };
-        } else if (action.name === 'delete') {
-          defaults = {
-            popup: {
-              title: i18n.t('DataTable.actions.delete.title'),
-              content: i18n.t('DataTable.actions.delete.content')
-            }
-          };
-        }
-
-        return _.defaults(action, defaults);
-      });
+    const actions = this.props.actions.filter((action) => !action.accept || action.accept(item));
 
     return (
       <Table.Cell

diff --git a/packages/semantic-ui/src/components/Items.js b/packages/semantic-ui/src/components/Items.js
@@ -8,6 +8,7 @@ import {
   Header,
   Icon,
   Item,
+  Popup,
   Segment
 } from 'semantic-ui-react';
 import _ from 'underscore';
@@ -267,19 +268,7 @@ class ItemsClass extends Component<Props, {}> {
             extra
             textAlign='center'
           >
-            { _.map(actions, (action, actionIndex) => (
-              <Button
-                as={action.as}
-                {...((action.asProps && action.asProps(item)) || {})}
-                aria-label={action.name}
-                basic
-                color={action.resolveColor ? action.resolveColor(item) : action.color}
-                icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
-                key={actionIndex}
-                onClick={action.onClick && action.onClick.bind(this, item)}
-                size={action.size}
-              />
-            ))}
+            { _.map(actions, this.renderCardAction.bind(this, item)) }
             { this.isSelectable() && (
               <Button
                 aria-label='Select'
@@ -311,6 +300,49 @@ class ItemsClass extends Component<Props, {}> {
     return card;
   }
 
+  /**
+   * Renders the action button for the passed item.
+   *
+   * @param action
+   * @param index
+   * @param item
+   *
+   * @returns {JSX.Element}
+   */
+  renderCardAction(item, action, index) {
+    const actionButton = (
+      <Button
+        as={action.as}
+        {...((action.asProps && action.asProps(item)) || {})}
+        aria-label={action.name}
+        basic
+        color={action.resolveColor ? action.resolveColor(item) : action.color}
+        icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
+        key={index}
+        onClick={action.onClick && action.onClick.bind(this, item)}
+        size={action.size}
+      />
+    );
+
+    // Wrap the button in a popup if the action specifies a popup attribute
+    if (action.popup) {
+      const { content, title } = action.popup;
+
+      return (
+        <Popup
+          content={content}
+          header={title}
+          hideOnScroll
+          mouseEnterDelay={500}
+          position='top right'
+          trigger={actionButton}
+        />
+      );
+    }
+
+    return actionButton;
+  }
+
   /**
    * Renders the empty list.
    *

diff --git a/packages/semantic-ui/src/components/List.js b/packages/semantic-ui/src/components/List.js
@@ -525,17 +525,29 @@ const useList = (WrappedComponent: ComponentType<any>) => (
         if (action.name === 'edit') {
           defaults = {
             icon: 'edit outline',
-            onClick: this.onEditButton.bind(this)
+            onClick: this.onEditButton.bind(this),
+            popup: {
+              title: i18n.t('Common.actions.edit.title'),
+              content: i18n.t('Common.actions.edit.content')
+            }
           };
         } else if (action.name === 'copy') {
           defaults = {
             icon: 'copy outline',
-            onClick: this.onCopyButton.bind(this)
+            onClick: this.onCopyButton.bind(this),
+            popup: {
+              title: i18n.t('Common.actions.copy.title'),
+              content: i18n.t('Common.actions.copy.content')
+            }
           };
         } else if (action.name === 'delete') {
           defaults = {
             icon: 'times circle outline',
-            onClick: this.onDeleteButton.bind(this)
+            onClick: this.onDeleteButton.bind(this),
+            popup: {
+              title: i18n.t('Common.actions.delete.title'),
+              content: i18n.t('Common.actions.delete.content')
+            }
           };
         }
 

diff --git a/packages/semantic-ui/src/i18n/en.json b/packages/semantic-ui/src/i18n/en.json
@@ -42,6 +42,20 @@
     }
   },
   "Common": {
+    "actions": {
+      "copy": {
+        "content": "Creates an editable copy to be saved as a new record",
+        "title": "Copy"
+      },
+      "delete": {
+        "content": "Removes the record, permanently",
+        "title": "Remove"
+      },
+      "edit": {
+        "content": "Opens the modal to edit the record",
+        "title": "Edit"
+      }
+    },
     "buttons": {
       "add": "Add",
       "cancel": "Cancel",

diff --git a/packages/storybook/src/semantic-ui/Items.stories.js b/packages/storybook/src/semantic-ui/Items.stories.js
@@ -98,7 +98,11 @@ export const CustomActions = useDragDrop(() => (
       }),
       basic: true,
       icon: 'linkify',
-      label: 'Link'
+      label: 'Link',
+      popup: {
+        content: 'Testing popup',
+        title: 'POPUP!'
+      }
     }]}
     items={items}
     onCopy={action('copy')}