fix: Allows table cells be expandable and editable at the same time

cloudscape-design · Jan 28, 2025 · 88a8e82 · 88a8e82
1 parent 89ffd99
commit 88a8e82
Show file tree

Hide file tree

Showing 10 changed files with 342 additions and 240 deletions.
diff --git a/pages/table/editable.page.tsx b/pages/table/editable.page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { ForwardedRef, forwardRef, useContext, useEffect, useRef, useState } from 'react';
 
-import { Box, Button, Checkbox, Link, Modal, SpaceBetween } from '~components';
+import { Box, Button, Checkbox, Modal, SpaceBetween } from '~components';
 import Alert from '~components/alert';
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 import Header from '~components/header';
@@ -20,6 +20,7 @@ type PageContext = React.Context<
   AppContextType<{
     resizableColumns: boolean;
     enableKeyboardNavigation: boolean;
+    expandableRows: boolean;
   }>
 >;
 
@@ -62,7 +63,27 @@ const columns: TableProps.ColumnDefinition<DistributionInfo>[] = [
     header: 'Distribution ID',
     sortingField: 'Id',
     width: 180,
-    cell: (item: DistributionInfo) => <Link href={`/#/distributions/${item.Id}`}>{item.Id}</Link>,
+    cell: (item: DistributionInfo) => item.Id,
+    editConfig: {
+      ariaLabel: 'Distribution ID',
+      editIconAriaLabel: 'editable',
+      errorIconAriaLabel: 'Distribution ID Error',
+      editingCell(item, { currentValue, setValue }: TableProps.CellContext<string>) {
+        return (
+          <Input
+            autoFocus={true}
+            value={currentValue ?? item.Id}
+            onChange={withDirtyState(event => setValue(event.detail.value))}
+          />
+        );
+      },
+      disabledReason(item) {
+        if (item.Id.includes('E2')) {
+          return "You don't have the necessary permissions to edit this item.";
+        }
+        return undefined;
+      },
+    },
   },
   {
     id: 'DomainName',
@@ -222,7 +243,7 @@ const Demo = forwardRef(
   ) => {
     const [items, setItems] = useState(initialItems);
     const {
-      urlParams: { resizableColumns = true, enableKeyboardNavigation = false },
+      urlParams: { resizableColumns = true, enableKeyboardNavigation = false, expandableRows = false },
     } = useContext(AppContext as PageContext);
 
     const handleSubmit: TableProps.SubmitEditFunction<DistributionInfo> = async (currentItem, column, newValue) => {
@@ -251,6 +272,8 @@ const Demo = forwardRef(
       setClean();
     };
 
+    const [expandedItems, setExpandedItems] = useState<DistributionInfo[]>([]);
+
     return (
       <Table
         ref={tableRef}
@@ -273,14 +296,33 @@ const Demo = forwardRef(
         stickyHeader={true}
         resizableColumns={resizableColumns}
         enableKeyboardNavigation={enableKeyboardNavigation}
+        expandableRows={
+          expandableRows
+            ? {
+                getItemChildren: item => [
+                  { ...item, Id: item.Id + '-1' },
+                  { ...item, Id: item.Id + '-2' },
+                ],
+                isItemExpandable: item => !item.Id.endsWith('-1') && !item.Id.endsWith('-2'),
+                expandedItems,
+                onExpandableItemToggle: ({ detail }) => {
+                  if (detail.expanded) {
+                    return setExpandedItems(prev => [...prev, detail.item]);
+                  } else {
+                    return setExpandedItems(prev => prev.filter(item => item !== detail.item));
+                  }
+                },
+              }
+            : undefined
+        }
       />
     );
   }
 );
 
 export default function () {
   const {
-    urlParams: { resizableColumns = true, enableKeyboardNavigation = false },
+    urlParams: { resizableColumns = true, enableKeyboardNavigation = false, expandableRows = false },
     setUrlParams,
   } = useContext(AppContext as PageContext);
   const [modalVisible, setModalVisible] = useState(false);
@@ -321,6 +363,10 @@ export default function () {
           >
             Keyboard navigation
           </Checkbox>
+
+          <Checkbox checked={expandableRows} onChange={event => setUrlParams({ expandableRows: event.detail.checked })}>
+            Expandable rows
+          </Checkbox>
         </SpaceBetween>
 
         <input data-testid="focus" aria-label="focus input" />