diff --git a/.changeset/green-planets-change.md b/.changeset/green-planets-change.md new file mode 100644 index 000000000..d9e034281 --- /dev/null +++ b/.changeset/green-planets-change.md @@ -0,0 +1,5 @@ +--- +'@orchestrator-ui/orchestrator-ui-components': minor +--- + +1825 Update WfoDragHandler, make WfoTable 100% width diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDragHandler.tsx b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDragHandler.tsx index 7e1dd45a4..d8985f09b 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDragHandler.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDragHandler.tsx @@ -22,49 +22,62 @@ export const WfoDragHandler: FC = ({ onUpdateColumWidth, }) => { const [position, setPosition] = useState({ x: 0, y: 0 }); + const [isDragging, setIsDragging] = useState(false); + const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles); + + const resetPosition = () => { + setPosition({ x: 0, y: 0 }); + }; + + const onStart: DraggableEventHandler = () => { + setIsDragging(false); + }; const onDrag: DraggableEventHandler = (_, data) => { + setIsDragging(true); setPosition({ x: data.x, y: data.y }); }; - const resetPosition = () => { - setPosition({ x: 0, y: 0 }); - }; + const onStop: DraggableEventHandler = (_, data) => { + if (headerRowRef.current && isDragging) { + const newWidth = startWidth + data.x; - const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles); + onUpdateColumWidth( + fieldName, + newWidth > MINIMUM_COLUMN_WIDTH + ? newWidth + : MINIMUM_COLUMN_WIDTH, + ); + resetPosition(); + setIsDragging(false); + } + }; const thElement = headerRowRef.current && (headerRowRef.current.querySelector( `th[data-field-name="${fieldName}"]`, ) as HTMLTableCellElement); + const startWidth = thElement?.getBoundingClientRect().width ?? MINIMUM_COLUMN_WIDTH; + const bounds = { + left: MINIMUM_COLUMN_WIDTH - startWidth, + top: 0, + bottom: 0, + }; + return (
{ - if (headerRowRef.current) { - const newWidth = startWidth + data.x; - - onUpdateColumWidth( - fieldName, - newWidth > MINIMUM_COLUMN_WIDTH - ? newWidth - : MINIMUM_COLUMN_WIDTH, - ); - resetPosition(); - } - }} + bounds={bounds} + onStop={onStop} >
diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTable.tsx b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTable.tsx index 3cdd5d980..f37368687 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTable.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTable.tsx @@ -102,6 +102,7 @@ export const WfoGroupedTable = ({ uniqueRowIdToExpandedRowMap, }} onRowClick={({ groupName }) => toggleExpandedRow(groupName)} + appendFillerColumn={false} /> ); 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 4920429ec..a37c9e8ee 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx @@ -16,7 +16,7 @@ import { DEFAULT_PAGE_SIZES } from '../utils/constants'; import { WfoTableDataRows } from './WfoTableDataRows'; import { WfoTableHeaderRow } from './WfoTableHeaderRow'; import { getWfoTableStyles } from './styles'; -import { getSortedVisibleColumns } from './utils'; +import { getColumnWidthsFromConfig, getSortedVisibleColumns } from './utils'; export type Pagination = { pageSize: number; @@ -99,10 +99,11 @@ export type WfoTableProps = { onRowClick?: (row: T) => void; onUpdateDataSorting?: (updatedDataSorting: WfoDataSorting) => void; onUpdateDataSearch?: (updatedDataSearch: WfoDataSearch) => void; + appendFillerColumn?: boolean; className?: string; }; -type LocalColumnWidths = { +export type LocalColumnWidths = { [key: string]: string; }; @@ -119,25 +120,24 @@ export const WfoTable = ({ onUpdateDataSorting, onUpdateDataSearch, onRowClick, + appendFillerColumn = true, className, }: WfoTableProps) => { - const getColumnWidthsFromConfig = ( - columnConfig: WfoTableColumnConfig, - ): LocalColumnWidths => { - return Object.entries(columnConfig).reduce( - (columnWidths, [key, config]) => { - if (config.columnType === ColumnType.DATA) { - columnWidths[key] = config.width ?? 'auto'; - } - return columnWidths; - }, - {} as LocalColumnWidths, - ); - }; - const [localColumnWidths, setLocalColumnWidths] = useState(getColumnWidthsFromConfig(columnConfig)); + const columnConfigWithFiller: WfoTableColumnConfig = appendFillerColumn + ? { + ...columnConfig, + filler: { + columnType: ColumnType.CONTROL, + label: '', + width: '100%', + renderControl: () => null, + }, + } + : columnConfig; + const { tableContainerStyle, tableStyle, @@ -151,7 +151,7 @@ export const WfoTable = ({ const t = useTranslations('common'); const sortedVisibleColumns = getSortedVisibleColumns( - columnConfig, + columnConfigWithFiller, columnOrder, hiddenColumns, ); @@ -166,7 +166,7 @@ export const WfoTable = ({ }; const configWithLocalWidths: WfoTableColumnConfig = Object.entries( - columnConfig, + columnConfigWithFiller, ).reduce((mergedConfig, [fieldName, fieldConfig]) => { const key = fieldName as keyof WfoTableColumnConfig; if (fieldConfig.columnType === ColumnType.DATA) { 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 84ed2d898..40d3297c0 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts @@ -37,7 +37,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => { }); const tableStyle = css({ - width: 'auto', + width: '100%', }); const headerStyle = css({ @@ -136,7 +136,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => { position: 'absolute', height: '100%', zIndex: theme.levels.menu, - '&:hover, &:active': { + '&:active, &:focus': { transition: 'background-color 0.15s', backgroundColor: isDarkThemeActive ? theme.colors.mediumShade @@ -152,7 +152,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => { opacity: 0.6, zIndex: theme.levels.navigation, }, - '&:hover::after, &:active::after': { + '&:active::after': { transition: 'opacity 0.15s', opacity: 0, }, diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/utils.ts b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/utils.ts index 9d147d5d3..03e0c8973 100644 --- a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/utils.ts +++ b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/utils.ts @@ -1,4 +1,4 @@ -import { TableColumnKeys } from '@/components'; +import { LocalColumnWidths, TableColumnKeys } from '@/components'; import { SortOrder } from '@/types'; import { toObjectWithSortedKeys } from '@/utils'; @@ -80,3 +80,16 @@ export function mapSortableAndFilterableValuesToTableColumnConfig< return Object.fromEntries(tableColumnConfigUpdatedEntries); } + +export const getColumnWidthsFromConfig = ( + columnConfig: WfoTableColumnConfig, +): LocalColumnWidths => { + const columnEntries = Object.entries(columnConfig); + + return columnEntries.reduce((columnWidths, [key, config]) => { + if (config.columnType === ColumnType.DATA) { + columnWidths[key] = config.width ?? 'auto'; + } + return columnWidths; + }, {} as LocalColumnWidths); +}; diff --git a/packages/orchestrator-ui-components/src/icons/WfoQuestionCircle.tsx b/packages/orchestrator-ui-components/src/icons/WfoQuestionCircle.tsx index 9a491b682..1cbd8c09c 100644 --- a/packages/orchestrator-ui-components/src/icons/WfoQuestionCircle.tsx +++ b/packages/orchestrator-ui-components/src/icons/WfoQuestionCircle.tsx @@ -24,8 +24,8 @@ export const WfoQuestionCircle: FC = ({ >