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

cloudscape-design · Jan 17, 2025 · d7ea97d · d7ea97d
1 parent 89ffd99
commit d7ea97d
Show file tree

Hide file tree

Showing 8 changed files with 259 additions and 190 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) => {
@@ -273,14 +294,24 @@ const Demo = forwardRef(
         stickyHeader={true}
         resizableColumns={resizableColumns}
         enableKeyboardNavigation={enableKeyboardNavigation}
+        expandableRows={
+          expandableRows
+            ? {
+                getItemChildren: () => [],
+                isItemExpandable: () => true,
+                expandedItems: [],
+                onExpandableItemToggle: () => {},
+              }
+            : 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 +352,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" />