From 91868488ad42605acd6be892b301fa8f82a01241 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Tue, 26 Nov 2024 11:21:46 +0100 Subject: [PATCH] 1544: Draggable column wip --- .../components/WfoTable/WfoTable/WfoTable.tsx | 20 ++- .../WfoTable/WfoTable/WfoTableDataRows.tsx | 1 + .../WfoTableHeaderCell/WfoTableHeaderCell.tsx | 57 ++++--- .../WfoTable/WfoTableHeaderCell/styles.ts | 13 -- .../WfoTable/WfoTable/WfoTableHeaderRow.tsx | 141 +++++++++--------- .../components/WfoTable/WfoTable/styles.ts | 32 +++- 6 files changed, 145 insertions(+), 119 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx index 236d4c58f..bd78edc4b 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx @@ -1,4 +1,5 @@ -import React, { CSSProperties, ReactNode } from 'react'; +import React, { useState } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; import { useTranslations } from 'next-intl'; @@ -101,6 +102,8 @@ export type WfoTableProps = { className?: string; }; +export type OnUpdateColumnWidth = (columnName: string, width: number) => void; + export const WfoTable = ({ data, columnConfig, @@ -116,6 +119,14 @@ export const WfoTable = ({ onRowClick, className, }: WfoTableProps) => { + const [localColumnConfig, setLocalColumnConfig] = + useState>(columnConfig); + + const onUpdateColumnWidth: OnUpdateColumnWidth = (columnName, width) => { + console.log(columnName, width); + // setLocalColumnConfig((columns) => columns.map()); + }; + const { tableContainerStyle, tableStyle, @@ -127,6 +138,8 @@ export const WfoTable = ({ } = useWithOrchestratorTheme(getWfoTableStyles); const t = useTranslations('common'); + console.log('columnConfig', localColumnConfig); + const sortedVisibleColumns = getSortedVisibleColumns( columnConfig, columnOrder, @@ -142,12 +155,13 @@ export const WfoTable = ({ ) : ( )} @@ -168,7 +182,7 @@ export const WfoTable = ({ ({ ) ?? result?.toString()} +
 
); })} diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoTableHeaderCell.tsx b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoTableHeaderCell.tsx index e4adb634d..700e6d81d 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoTableHeaderCell.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoTableHeaderCell.tsx @@ -38,14 +38,12 @@ export const WfoTableHeaderCell: FC = ({ }) => { const { headerCellStyle, - headerCellContainer, getHeaderCellContentStyle, headerCellPopoverHeaderStyle, headerCellPopoverHeaderTitleStyle, headerCellPopoverContentStyle, getTitleButtonStyle, sortButtonStyle, - dragAndDropStyle, } = useWithOrchestratorTheme(getWfoBasicTableStyles); const t = useTranslations('common'); @@ -91,36 +89,33 @@ export const WfoTableHeaderCell: FC = ({ ); return ( -
-
- } - isOpen={isPopoverOpen} - closePopover={closePopover} - panelPaddingSize="none" - anchorPosition="downLeft" +
+ } + isOpen={isPopoverOpen} + closePopover={closePopover} + panelPaddingSize="none" + anchorPosition="downLeft" + > + + + + + {isSortable && ( + - )} -
-
 
+ + + )}
); }; diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts index fe07fe2eb..93ee88914 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts @@ -124,17 +124,6 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => { }, }); - const headerCellContainer = css({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - }); - const dragAndDropStyle = css({ - width: theme.size.m, - display: 'flex', - cursor: 'col-resize', - }); - return { basicTableStyle, headerCellStyle, @@ -147,7 +136,5 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => { getStatusColumnStyle, dropDownTableStyle, expandableTableStyle, - dragAndDropStyle, - headerCellContainer, }; }; diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx index 5797eeacb..071f2bb8b 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { useWithOrchestratorTheme } from '@/hooks'; import { toOptionalArrayEntry } from '@/utils'; import { ColumnType, WfoTableProps } from './WfoTable'; +import type { OnUpdateColumnWidth } from './WfoTable'; import { WfoTableHeaderCell } from './WfoTableHeaderCell'; import { getWfoTableStyles } from './styles'; import { getSortedVisibleColumns } from './utils'; @@ -17,7 +18,9 @@ export type WfoTableHeaderRowProps = Pick< | 'onUpdateDataSorting' | 'onUpdateDataSearch' | 'className' ->; +> & { + onUpdateColumnWidth?: OnUpdateColumnWidth; +}; export const WfoTableHeaderRow = ({ columnConfig, @@ -26,10 +29,16 @@ export const WfoTableHeaderRow = ({ dataSorting = [], onUpdateDataSorting, onUpdateDataSearch, + onUpdateColumnWidth, className, }: WfoTableHeaderRowProps) => { - const { cellStyle, headerCellStyle, rowStyle, setWidth } = - useWithOrchestratorTheme(getWfoTableStyles); + const { + headerCellStyle, + sortableHeaderCellStyle, + rowStyle, + setWidth, + dragAndDropStyle, + } = useWithOrchestratorTheme(getWfoTableStyles); const sortedVisibleColumns = getSortedVisibleColumns( columnConfig, @@ -38,81 +47,77 @@ export const WfoTableHeaderRow = ({ ); return ( - <> - - {sortedVisibleColumns.map(([key, columnConfig]) => { - const dataSortingConfiguration = dataSorting.find( - (dataSorting) => dataSorting.field === key, - ); - - if (columnConfig.columnType === ColumnType.DATA) { - return ( - - - onUpdateDataSorting?.({ - // Currently there is not a good way to tell Typescript that in some cases - // key is of type "keyof T" - field: key as keyof T, - sortOrder: - updatedSortOrder, - }) - : undefined - } - onSearch={ - columnConfig.isFilterable - ? (searchText) => - onUpdateDataSearch?.({ - field: key as keyof T, - searchText, - }) - : undefined - } - > - {columnConfig.label?.toString()} - - - ); - } - - // Control column + + {sortedVisibleColumns.map(([key, columnConfig]) => { + const dataSortingConfiguration = dataSorting.find( + (dataSorting) => dataSorting.field === key, + ); + const tableHeaderRef = useRef(null); + if (columnConfig.columnType === ColumnType.DATA) { return ( -
{columnConfig.label?.toString() || ''}
+ + onUpdateDataSorting?.({ + // Currently there is not a good way to tell Typescript that in some cases + // key is of type "keyof T" + field: key as keyof T, + sortOrder: updatedSortOrder, + }) + : undefined + } + onSearch={ + columnConfig.isFilterable + ? (searchText) => + onUpdateDataSearch?.({ + field: key as keyof T, + searchText, + }) + : undefined + } + > + {columnConfig.label?.toString()} + ); - })} - - + } + + // Control column + return ( + +
{columnConfig.label?.toString() || ''}
+ + ); + })} + ); }; diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts index 33686c1ca..2eb699d09 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts @@ -41,7 +41,6 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => { }); const headerStyle = css({ - backgroundColor: theme.colors.lightShade, fontSize: theme.size.m, textAlign: 'left', 'tr>:first-child': { @@ -66,6 +65,8 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => { }); const rowStyle = css({ + display: 'flex', + alignItems: 'center', height: TABLE_ROW_HEIGHT, borderStyle: 'solid', borderWidth: '0 0 1px 0', @@ -82,7 +83,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => { backgroundColor: theme.colors.lightestShade, }); - const headerCellStyle = css({ + const sortableHeaderCellStyle = css({ paddingRight: 0, [`&:hover`]: { [`.${SORTABLE_ICON_CLASS}`]: { @@ -94,10 +95,22 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => { }, }); - const cellStyle = css({ + const basicCellStyleProps = { paddingLeft: theme.size.m, whiteSpace: 'nowrap', + overflow: 'hidden', verticalAlign: 'middle', + display: 'flex', + justifyContent: 'space-between', + }; + + const cellStyle = css({ ...basicCellStyleProps }); + + const headerCellStyle = css({ + ...basicCellStyleProps, + height: '100%', + flexGrow: 1, + backgroundColor: theme.colors.lightShade, }); const cellContentStyle = css({ @@ -121,19 +134,30 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => { overflow: 'hidden', }); + const dragAndDropStyle = css({ + width: theme.size.m, + display: 'flex', + justifyContent: 'end', + alignItems: 'center', + cursor: 'col-resize', + border: 'thin solid red', + }); + return { tableContainerStyle, tableStyle, headerStyle, + headerCellStyle, bodyLoadingStyle, rowStyle, dataRowStyle, expandedRowStyle, - headerCellStyle, + sortableHeaderCellStyle, cellStyle, cellContentStyle, emptyTableMessageStyle, clickableStyle, setWidth, + dragAndDropStyle, }; };