feat: add RowActions component for enhanced row-level actions in data grids

- Introduced RowActions component to manage row-level actions with tooltips and dropdown menus. - Created types for row actions and page actions to standardize action properties. - Implemented utility function to map action intents to Mantine theme colors. - Updated CoreAppShell component to support optional slots for better flexibility. - Added enterprise module structure with context hooks for managing module state and actions. - Implemented draft management for forms to enhance user experience during data entry. - Established context providers for detail, form, and index pages to streamline data handling. - Updated dependencies to ensure compatibility with the latest versions.
2026-07-01 17:04:20 +07:00
parent 1c2090f4fb
commit 8f14c4bc7b
60 changed files with 2188 additions and 442 deletions
@@ -0,0 +1,154 @@
+import { Fragment, memo } from 'react';
+import { Group, ActionIcon, Tooltip, Menu, Divider, Box, Button } from '@mantine/core';
+import { RowAction } from './types';
+import { getIntentColor } from './utils';
+import { MoreVertical } from 'lucide-react';
+
+export interface RowActionsProps {
+  /** Array of configured row-level actions. */
+  actions: RowAction[];
+  showLabels?: boolean;
+}
+
+/**
+ * A lightweight presentational component optimized for rendering inside data grid rows.
+ * Automatically handles tooltip generation and constructs dropdown menus for nested actions.
+ *
+ * @performance Wrapped in React.memo to guarantee zero overhead inside large lists/grids.
+ */
+export const RowActions = memo(function RowActions({ actions = [], showLabels = false }: RowActionsProps) {
+  /**
+   * Helper function to render a standalone icon button.
+   * Wraps the icon in a Tooltip if the configuration provides one.
+   */
+  const renderIcon = (action: RowAction, fallbackKey: string) => {
+    const actionKey = action.key || fallbackKey;
+
+    const iconBtn = (
+      <Button
+        key={action.key}
+        variant={'transparent'}
+        color={getIntentColor(action.intent)}
+        leftSection={action.icon}
+        disabled={action.disabled}
+        onClick={() => action.onClick?.(action.key || '')}
+        size="xs"
+        pr="xs"
+        pl="xs"
+        pt={0}
+        pb={0}
+      >
+        {showLabels && action.label}
+      </Button>
+    );
+
+    return action.tooltip ? (
+      <Tooltip key={`tooltip-${actionKey}`} label={action.tooltip} withArrow withinPortal>
+        {iconBtn}
+      </Tooltip>
+    ) : (
+      iconBtn
+    );
+  };
+
+  return (
+    <Box style={{ display: 'inline-flex' }}>
+      {/* --- DESKTOP VIEW (hidden on mobile devices) --- */}
+      <Group gap={0} wrap="nowrap" visibleFrom="sm">
+        {actions.map((action, index) => {
+          if (action.type === 'divider') {
+            return <Divider key={`divider-${index}`} orientation="vertical" mr="xs" ml="xs" />;
+          }
+
+          // Render Dropdown Menu for actions with children
+          if (action.children && action.children.length > 0) {
+            return (
+              <Menu key={action.key} position="bottom-start" withArrow withinPortal trigger="hover">
+                <Menu.Target>{renderIcon(action, `action-${index}`)}</Menu.Target>
+                <Menu.Dropdown>
+                  {action.children.map((child, childIndex) => {
+                    if (child.type === 'divider') {
+                      return <Menu.Divider key={`child-divider-${childIndex}`} />;
+                    }
+                    return (
+                      <Menu.Item
+                        key={child.key}
+                        leftSection={child.icon}
+                        color={getIntentColor(child.intent)}
+                        disabled={child.disabled}
+                        onClick={() => child.onClick?.(child.key || '')}
+                      >
+                        {child.label}
+                      </Menu.Item>
+                    );
+                  })}
+                </Menu.Dropdown>
+              </Menu>
+            );
+          }
+
+          return renderIcon(action, `action-${index}`);
+        })}
+      </Group>
+
+      {/* --- MOBILE VIEW (hidden on desktop devices) --- */}
+      <Group gap={0} wrap="nowrap" hiddenFrom="sm">
+        <Menu position="bottom-end" withArrow withinPortal>
+          <Menu.Target>
+            <ActionIcon variant="transparent" size="md">
+              <MoreVertical size={16} />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            {actions.map((action, index) => {
+              if (action.type === 'divider') {
+                return <Menu.Divider key={`mobile-divider-${index}`} mt="sm" mb="sm" />;
+              }
+
+              if (action.children && action.children.length > 0) {
+                return (
+                  <Fragment key={action.key}>
+                    <Menu.Label>{action.label}</Menu.Label>
+                    {action.children.map((child, childIndex) => {
+                      if (child.type === 'divider') {
+                        return <Menu.Divider key={`mobile-child-divider-${childIndex}`} mt="xs" mb="xs" />;
+                      }
+                      return (
+                        <Menu.Item
+                          key={child.key}
+                          leftSection={child.icon}
+                          color={getIntentColor(child.intent)}
+                          disabled={child.disabled}
+                          onClick={() => child.onClick?.(child.key || '')}
+                          style={{ paddingLeft: '1.5rem' }} // Indent nested items
+                          mt="sm"
+                          mb="sm"
+                        >
+                          {child.label}
+                        </Menu.Item>
+                      );
+                    })}
+                  </Fragment>
+                );
+              }
+
+              return (
+                <Menu.Item
+                  key={action.key}
+                  leftSection={action.icon}
+                  color={getIntentColor(action.intent)}
+                  disabled={action.disabled}
+                  onClick={() => action.onClick?.(action.key || '')}
+                  mt="sm"
+                  mb="sm"
+                >
+                  {action.label}
+                </Menu.Item>
+              );
+            })}
+          </Menu.Dropdown>
+        </Menu>
+      </Group>
+    </Box>
+  );
+});