replaces cell style with resizable-style

cloudscape-design · Nov 26, 2024 · e04b439 · e04b439
1 parent 4c9b8a8
commit e04b439
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 27 deletions.
diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
 import { TableProps } from '../interfaces.js';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
@@ -18,7 +19,6 @@ import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableTdElementProps {
-  style?: React.CSSProperties;
   wrapLines: boolean | undefined;
   isRowHeader?: boolean;
   isFirstRow: boolean;
@@ -51,6 +51,7 @@ export interface TableTdElementProps {
   collapseButtonLabel?: string;
   verticalAlign?: TableProps.VerticalAlign;
   resizableColumns?: boolean;
+  resizableStyle?: ColumnWidthStyle;
   isEditable: boolean;
   isEditing: boolean;
   isEditingDisabled?: boolean;
@@ -60,7 +61,6 @@ export interface TableTdElementProps {
 export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(
   (
     {
-      style,
       children,
       wrapLines,
       isRowHeader,
@@ -90,6 +90,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
       collapseButtonLabel,
       verticalAlign,
       resizableColumns,
+      resizableStyle,
       isEditable,
       isEditing,
       isEditingDisabled,
@@ -101,6 +102,8 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
     const Element = isRowHeader ? 'th' : 'td';
     const isVisualRefresh = useVisualRefresh();
 
+    resizableStyle = resizableColumns ? resizableStyle : {};
+
     nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
 
     const stickyStyles = useStickyCellStyles({
@@ -115,7 +118,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
 
     return (
       <Element
-        style={{ ...style, ...stickyStyles.style }}
+        style={{ ...resizableStyle, ...stickyStyles.style }}
         className={clsx(
           styles['body-cell'],
           isFirstRow && styles['body-cell-first-row'],

diff --git a/src/table/column-widths-utils.ts b/src/table/column-widths-utils.ts
@@ -5,14 +5,20 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { TableProps } from './interfaces';
 
+export interface ColumnWidthStyle {
+  width?: string | number;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+}
+
 export function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {
   for (const column of columnDefinitions) {
     checkProperty(column, 'minWidth');
     checkProperty(column, 'width');
   }
 }
 
-export function setElementWidths(element: HTMLElement, styles: React.CSSProperties) {
+export function setElementWidths(element: HTMLElement, styles: ColumnWidthStyle) {
   function setProperty(property: 'width' | 'minWidth' | 'maxWidth') {
     const value = styles[property];
     let widthCssValue = '';

diff --git a/src/table/header-cell/index.tsx b/src/table/header-cell/index.tsx
@@ -13,6 +13,7 @@ import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { KeyCode } from '../../internal/keycode';
 import { GeneratedAnalyticsMetadataTableSort } from '../analytics-metadata/interfaces';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
 import { Divider, Resizer } from '../resizer';
 import { StickyColumnsModel } from '../sticky-columns';
@@ -24,7 +25,6 @@ import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableHeaderCellProps<ItemType> {
-  style?: React.CSSProperties;
   tabIndex: number;
   column: TableProps.ColumnDefinition<ItemType>;
   activeSortingColumn?: TableProps.SortingColumn<ItemType>;
@@ -40,6 +40,7 @@ export interface TableHeaderCellProps<ItemType> {
   colIndex: number;
   updateColumn: (columnId: PropertyKey, newWidth: number) => void;
   resizableColumns?: boolean;
+  resizableStyle?: ColumnWidthStyle;
   isEditable?: boolean;
   columnId: PropertyKey;
   stickyState: StickyColumnsModel;
@@ -53,7 +54,6 @@ export interface TableHeaderCellProps<ItemType> {
 }
 
 export function TableHeaderCell<ItemType>({
-  style,
   tabIndex,
   column,
   activeSortingColumn,
@@ -69,6 +69,7 @@ export function TableHeaderCell<ItemType>({
   colIndex,
   updateColumn,
   resizableColumns,
+  resizableStyle,
   onResizeFinish,
   isEditable,
   columnId,
@@ -120,7 +121,7 @@ export function TableHeaderCell<ItemType>({
 
   return (
     <TableThElement
-      style={style}
+      resizableStyle={resizableStyle}
       cellRef={cellRefCombined}
       sortingStatus={sortingStatus}
       sortingDisabled={sortingDisabled}

diff --git a/src/table/header-cell/th-element.tsx b/src/table/header-cell/th-element.tsx
@@ -8,6 +8,7 @@ import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-too
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
 import { getTableColHeaderRoleProps, TableRole } from '../table-role';
@@ -18,7 +19,7 @@ import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
 export interface TableThElementProps {
-  style?: React.CSSProperties;
+  resizableStyle?: ColumnWidthStyle;
   sortingStatus?: SortingStatus;
   sortingDisabled?: boolean;
   focusedComponent?: null | string;
@@ -37,7 +38,7 @@ export interface TableThElementProps {
 }
 
 export function TableThElement({
-  style,
+  resizableStyle,
   sortingStatus,
   sortingDisabled,
   focusedComponent,
@@ -89,7 +90,7 @@ export function TableThElement({
         },
         stickyStyles.className
       )}
-      style={{ ...style, ...stickyStyles.style }}
+      style={{ ...resizableStyle, ...stickyStyles.style }}
       ref={mergedRef}
       {...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex })}
       tabIndex={cellTabIndex === -1 ? undefined : cellTabIndex}

diff --git a/src/table/internal.tsx b/src/table/internal.tsx
@@ -621,15 +621,11 @@ const InternalTable = React.forwardRef(
                                     <TableBodyCell
                                       key={getColumnKey(column, colIndex)}
                                       {...sharedCellProps}
-                                      style={
-                                        resizableColumns
-                                          ? {}
-                                          : {
-                                              width: column.width,
-                                              minWidth: column.minWidth,
-                                              maxWidth: column.maxWidth,
-                                            }
-                                      }
+                                      resizableStyle={{
+                                        width: column.width,
+                                        minWidth: column.minWidth,
+                                        maxWidth: column.maxWidth,
+                                      }}
                                       ariaLabels={ariaLabels}
                                       column={column}
                                       item={row.item}

diff --git a/src/table/thead.tsx b/src/table/thead.tsx
@@ -124,7 +124,6 @@ const Thead = React.forwardRef(
               <TableHeaderCell
                 {...commonCellProps}
                 key={columnId}
-                style={getColumnStyles(sticky, columnId)}
                 tabIndex={sticky ? -1 : 0}
                 focusedComponent={focusedComponent}
                 column={column}
@@ -137,6 +136,7 @@ const Thead = React.forwardRef(
                 updateColumn={updateColumn}
                 onResizeFinish={() => onResizeFinish(columnWidths)}
                 resizableColumns={resizableColumns}
+                resizableStyle={getColumnStyles(sticky, columnId)}
                 onClick={detail => {
                   setLastUserAction('sorting');
                   fireNonCancelableEvent(onSortingChange, detail);

diff --git a/src/table/use-column-widths.tsx b/src/table/use-column-widths.tsx
@@ -5,15 +5,12 @@ import React, { createContext, useContext, useEffect, useRef, useState } from 'r
 import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
-import { setElementWidths } from './column-widths-utils';
+import { ColumnWidthStyle, setElementWidths } from './column-widths-utils';
 
 export const DEFAULT_COLUMN_WIDTH = 120;
 
-export interface ColumnWidthDefinition {
+export interface ColumnWidthDefinition extends ColumnWidthStyle {
   id: PropertyKey;
-  minWidth?: string | number;
-  maxWidth?: string | number;
-  width?: string | number;
 }
 
 function readWidths(
@@ -61,7 +58,7 @@ function updateWidths(
 }
 
 interface WidthsContext {
-  getColumnStyles(sticky: boolean, columnId: PropertyKey): React.CSSProperties;
+  getColumnStyles(sticky: boolean, columnId: PropertyKey): ColumnWidthStyle;
   columnWidths: Map<PropertyKey, number>;
   updateColumn: (columnId: PropertyKey, newWidth: number) => void;
   setCell: (sticky: boolean, columnId: PropertyKey, node: null | HTMLElement) => void;
@@ -98,7 +95,7 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain
     }
   };
 
-  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): React.CSSProperties => {
+  const getColumnStyles = (sticky: boolean, columnId: PropertyKey): ColumnWidthStyle => {
     const column = visibleColumns.find(column => column.id === columnId);
     if (!column) {
       return {};