Skip to content

Commit

Permalink
1544: Draggable column wip
Browse files Browse the repository at this point in the history
  • Loading branch information
Ruben van Leeuwen committed Nov 26, 2024
1 parent 3213357 commit 9186848
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 119 deletions.
20 changes: 17 additions & 3 deletions packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -101,6 +102,8 @@ export type WfoTableProps<T extends object> = {
className?: string;
};

export type OnUpdateColumnWidth = (columnName: string, width: number) => void;

export const WfoTable = <T extends object>({
data,
columnConfig,
Expand All @@ -116,6 +119,14 @@ export const WfoTable = <T extends object>({
onRowClick,
className,
}: WfoTableProps<T>) => {
const [localColumnConfig, setLocalColumnConfig] =

Check failure on line 122 in packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx

View workflow job for this annotation

GitHub Actions / linting-and-prettier 

'setLocalColumnConfig' is assigned a value but never used
useState<WfoTableColumnConfig<T>>(columnConfig);

const onUpdateColumnWidth: OnUpdateColumnWidth = (columnName, width) => {
console.log(columnName, width);

Check failure on line 126 in packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx

View workflow job for this annotation

GitHub Actions / linting-and-prettier 

Unexpected console statement
// setLocalColumnConfig((columns) => columns.map());
};

const {
tableContainerStyle,
tableStyle,
Expand All @@ -127,6 +138,8 @@ export const WfoTable = <T extends object>({
} = useWithOrchestratorTheme(getWfoTableStyles);
const t = useTranslations('common');

console.log('columnConfig', localColumnConfig);

Check failure on line 141 in packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx

View workflow job for this annotation

GitHub Actions / linting-and-prettier 

Unexpected console statement

const sortedVisibleColumns = getSortedVisibleColumns(
columnConfig,
columnOrder,
Expand All @@ -142,12 +155,13 @@ export const WfoTable = <T extends object>({
) : (
<thead css={headerStyle}>
<WfoTableHeaderRow
columnConfig={columnConfig}
columnConfig={localColumnConfig}
hiddenColumns={hiddenColumns}
columnOrder={columnOrder}
dataSorting={dataSorting}
onUpdateDataSorting={onUpdateDataSorting}
onUpdateDataSearch={onUpdateDataSearch}
onUpdateColumnWidth={onUpdateColumnWidth}
/>
</thead>
)}
Expand All @@ -168,7 +182,7 @@ export const WfoTable = <T extends object>({
<tbody css={isLoading && bodyLoadingStyle}>
<WfoTableDataRows
data={data}
columnConfig={columnConfig}
columnConfig={localColumnConfig}
hiddenColumns={hiddenColumns}
columnOrder={columnOrder}
rowExpandingConfiguration={
Expand Down
1 change: 1 addition & 0 deletions packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export const WfoTableDataRows = <T extends object>({
) ?? result?.toString()}
</WfoDataCell>
</div>
<div>&nbsp;</div>
</td>
);
})}
Expand Down
57 changes: 26 additions & 31 deletions ...-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoTableHeaderCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,12 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
}) => {
const {
headerCellStyle,
headerCellContainer,
getHeaderCellContentStyle,
headerCellPopoverHeaderStyle,
headerCellPopoverHeaderTitleStyle,
headerCellPopoverContentStyle,
getTitleButtonStyle,
sortButtonStyle,
dragAndDropStyle,
} = useWithOrchestratorTheme(getWfoBasicTableStyles);
const t = useTranslations('common');

Expand Down Expand Up @@ -91,36 +89,33 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
);

return (
<div css={headerCellContainer}>
<div css={headerCellStyle}>
<EuiPopover
className={HEADER_CELL_TITLE_BUTTON_CLASS}
css={getTitleButtonStyle(sortOrder)}
initialFocus={`.euiPanel .euiFieldSearch.${fieldName}`}
id={smallContextMenuPopoverId}
button={<WfoHeaderCellContentButton />}
isOpen={isPopoverOpen}
closePopover={closePopover}
panelPaddingSize="none"
anchorPosition="downLeft"
<div css={headerCellStyle}>
<EuiPopover
className={HEADER_CELL_TITLE_BUTTON_CLASS}
css={getTitleButtonStyle(sortOrder)}
initialFocus={`.euiPanel .euiFieldSearch.${fieldName}`}
id={smallContextMenuPopoverId}
button={<WfoHeaderCellContentButton />}
isOpen={isPopoverOpen}
closePopover={closePopover}
panelPaddingSize="none"
anchorPosition="downLeft"
>
<WfoPopoverHeader />
<EuiHorizontalRule margin="none" />
<WfoPopoverContent />
</EuiPopover>
{isSortable && (
<button
className={HEADER_CELL_SORT_BUTTON_CLASS}
css={sortButtonStyle}
onClick={() =>
onSetSortOrder(getUpdatedSortOrder(sortOrder))
}
>
<WfoPopoverHeader />
<EuiHorizontalRule margin="none" />
<WfoPopoverContent />
</EuiPopover>
{isSortable && (
<button
className={HEADER_CELL_SORT_BUTTON_CLASS}
css={sortButtonStyle}
onClick={() =>
onSetSortOrder(getUpdatedSortOrder(sortOrder))
}
>
<WfoSortDirectionIcon sortDirection={sortOrder} />
</button>
)}
</div>
<div css={dragAndDropStyle}>&nbsp;</div>
<WfoSortDirectionIcon sortDirection={sortOrder} />
</button>
)}
</div>
);
};
13 changes: 0 additions & 13 deletions .../orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -147,7 +136,5 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
getStatusColumnStyle,
dropDownTableStyle,
expandableTableStyle,
dragAndDropStyle,
headerCellContainer,
};
};
141 changes: 73 additions & 68 deletions packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -17,7 +18,9 @@ export type WfoTableHeaderRowProps<T extends object> = Pick<
| 'onUpdateDataSorting'
| 'onUpdateDataSearch'
| 'className'
>;
> & {
onUpdateColumnWidth?: OnUpdateColumnWidth;
};

export const WfoTableHeaderRow = <T extends object>({
columnConfig,
Expand All @@ -26,10 +29,16 @@ export const WfoTableHeaderRow = <T extends object>({
dataSorting = [],
onUpdateDataSorting,
onUpdateDataSearch,
onUpdateColumnWidth,

Check failure on line 32 in packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx

View workflow job for this annotation

GitHub Actions / linting-and-prettier 

'onUpdateColumnWidth' is defined but never used
className,
}: WfoTableHeaderRowProps<T>) => {
const { cellStyle, headerCellStyle, rowStyle, setWidth } =
useWithOrchestratorTheme(getWfoTableStyles);
const {
headerCellStyle,
sortableHeaderCellStyle,
rowStyle,
setWidth,
dragAndDropStyle,

Check failure on line 40 in packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx

View workflow job for this annotation

GitHub Actions / linting-and-prettier 

'dragAndDropStyle' is assigned a value but never used
} = useWithOrchestratorTheme(getWfoTableStyles);

const sortedVisibleColumns = getSortedVisibleColumns(
columnConfig,
Expand All @@ -38,81 +47,77 @@ export const WfoTableHeaderRow = <T extends object>({
);

return (
<>
<tr className={className} css={rowStyle}>
{sortedVisibleColumns.map(([key, columnConfig]) => {
const dataSortingConfiguration = dataSorting.find(
(dataSorting) => dataSorting.field === key,
);

if (columnConfig.columnType === ColumnType.DATA) {
return (
<th
colSpan={columnConfig.numberOfColumnsToSpan}
key={key}
css={[
...toOptionalArrayEntry(
cellStyle,
!columnConfig.disableDefaultCellStyle,
),
...toOptionalArrayEntry(
headerCellStyle,
!!columnConfig.isSortable,
),
setWidth(columnConfig.width),
]}
>
<WfoTableHeaderCell
fieldName={key}
sortOrder={
dataSortingConfiguration?.sortOrder
}
onSetSortOrder={
columnConfig.isSortable
? (updatedSortOrder) =>
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()}
</WfoTableHeaderCell>
</th>
);
}

// Control column
<tr className={className} css={rowStyle}>
{sortedVisibleColumns.map(([key, columnConfig]) => {
const dataSortingConfiguration = dataSorting.find(
(dataSorting) => dataSorting.field === key,
);
const tableHeaderRef = useRef(null);

Check failure on line 55 in packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderRow.tsx

View workflow job for this annotation

GitHub Actions / linting-and-prettier 

React Hook "useRef" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function
if (columnConfig.columnType === ColumnType.DATA) {
return (
<th
key={key}
colSpan={columnConfig.numberOfColumnsToSpan}
key={key}
ref={tableHeaderRef}
css={[
...toOptionalArrayEntry(
cellStyle,
headerCellStyle,
!columnConfig.disableDefaultCellStyle,
),
...toOptionalArrayEntry(
sortableHeaderCellStyle,
!!columnConfig.isSortable,
),
setWidth(columnConfig.width),
]}
>
<div>{columnConfig.label?.toString() || ''}</div>
<WfoTableHeaderCell
fieldName={key}
sortOrder={dataSortingConfiguration?.sortOrder}
onSetSortOrder={
columnConfig.isSortable
? (updatedSortOrder) =>
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()}
</WfoTableHeaderCell>
</th>
);
})}
</tr>
</>
}

// Control column
return (
<th
key={key}
colSpan={columnConfig.numberOfColumnsToSpan}
css={[
...toOptionalArrayEntry(
headerCellStyle,
!columnConfig.disableDefaultCellStyle,
),
setWidth(columnConfig.width),
]}
>
<div>{columnConfig.label?.toString() || ''}</div>
</th>
);
})}
</tr>
);
};
Loading

0 comments on commit 9186848

Please sign in to comment.