From 7732c96671f8f0d6f297542be3e7b836236736a3 Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Fri, 15 May 2020 15:45:41 +0200 Subject: [PATCH 1/4] fix(AnalyticalTable): enable column option minWidth and maxWidth again, fix draggable column bug --- .../main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts | 2 +- .../main/src/components/AnalyticalTable/hooks/useStyling.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts index e21f7cf2493..a18ac9d36bf 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts @@ -12,7 +12,7 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo, c const handleDragStart = useCallback( (e) => { - if (resizeInfo.isResizingColumn === e.currentTarget.dataset.columnId) { + if (resizeInfo.isResizingColumn) { e.preventDefault(); return; } diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts index c45f9646636..d34624b1e33 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts @@ -32,6 +32,8 @@ const getHeaderProps = (columnProps, { instance, column }) => { const lastColumnId = instance.visibleColumns[instance.visibleColumns.length - 1].id; const isLastColumn = column.id === lastColumnId; const style: CSSProperties = { + minWidth: column.minWidth, + maxWidth: column.maxWidth, width: column.width }; From 0c8779d9a2423c4dee1de21b39386392fb4b5384 Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Fri, 15 May 2020 16:08:01 +0200 Subject: [PATCH 2/4] fix table placeholder --- .../LoadingComponent/TablePlaceholder.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx index 73fe5d720c6..be05b89e132 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.tsx @@ -4,12 +4,24 @@ import ContentLoader from 'react-content-loader'; const getArrayOfLength = (len) => Array.from(Array(len).keys()); +const getColumnWidth = (column) => { + let updatedColumnWidth = column.width; + if (updatedColumnWidth < column.minWidth) { + updatedColumnWidth = column.minWidth; + } + if (updatedColumnWidth > column.maxWidth) { + updatedColumnWidth = column.maxWidth; + } + return updatedColumnWidth; +}; + type RowProps = { columns: any[]; y: number; row: number }; const TableRow: FC = ({ columns, y, row }: RowProps) => { let columnOffset = 0; return ( <> {columns.map((column, i) => { + const columnWidth = getColumnWidth(column); const el = ( = ({ columns, y, row }: RowProps) => { y={y} rx="2" ry="8" - width={column.width - 4} + width={columnWidth - 4} height="16" /> ); - columnOffset += column.width; + columnOffset += columnWidth; return el; })} From 47981a6bf62de9b3d1b5841cf627bf1800504a1d Mon Sep 17 00:00:00 2001 From: "Harbarth, Lukas" Date: Fri, 15 May 2020 16:10:28 +0200 Subject: [PATCH 3/4] update snapshots --- .../AnalyticalTable.test.tsx.snap | 102 +++++++++--------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index 887e191c699..2bc4a72e18f 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -30,7 +30,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` draggable="true" id="name" role="columnheader" - style="position: relative; width: 150px;" + style="position: relative; min-width: 60px; max-width: 9007199254740991px; width: 150px;" >
Date: Mon, 18 May 2020 09:42:58 +0200 Subject: [PATCH 4/4] fix: use totalWidth instead of width --- .../AnalyticalTable.test.tsx.snap | 102 +++++++++--------- .../LoadingComponent/TablePlaceholder.tsx | 16 +-- .../defaults/LoadingComponent/index.tsx | 4 +- .../AnalyticalTable/hooks/useStyling.ts | 4 +- .../src/components/AnalyticalTable/index.tsx | 4 +- 5 files changed, 59 insertions(+), 71 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index 2bc4a72e18f..887e191c699 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -30,7 +30,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` draggable="true" id="name" role="columnheader" - style="position: relative; min-width: 60px; max-width: 9007199254740991px; width: 150px;" + style="position: relative; width: 150px;" >
Array.from(Array(len).keys()); -const getColumnWidth = (column) => { - let updatedColumnWidth = column.width; - if (updatedColumnWidth < column.minWidth) { - updatedColumnWidth = column.minWidth; - } - if (updatedColumnWidth > column.maxWidth) { - updatedColumnWidth = column.maxWidth; - } - return updatedColumnWidth; -}; - type RowProps = { columns: any[]; y: number; row: number }; const TableRow: FC = ({ columns, y, row }: RowProps) => { let columnOffset = 0; return ( <> {columns.map((column, i) => { - const columnWidth = getColumnWidth(column); const el = ( = ({ columns, y, row }: RowProps) => { y={y} rx="2" ry="8" - width={columnWidth - 4} + width={column.totalWidth - 4} height="16" /> ); - columnOffset += columnWidth; + columnOffset += column.totalWidth; return el; })} diff --git a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx index d69b5fefbbd..9e0ee0358fb 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/LoadingComponent/index.tsx @@ -10,8 +10,8 @@ const styles: CSSProperties = { zIndex: 1 }; -const DefaultLoadingComponent = () => { - return ; +const DefaultLoadingComponent = ({ style }) => { + return ; }; DefaultLoadingComponent.displayName = 'DefaultLoadingComponent'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts index d34624b1e33..9c4b1cbc3cb 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts @@ -32,9 +32,7 @@ const getHeaderProps = (columnProps, { instance, column }) => { const lastColumnId = instance.visibleColumns[instance.visibleColumns.length - 1].id; const isLastColumn = column.id === lastColumnId; const style: CSSProperties = { - minWidth: column.minWidth, - maxWidth: column.maxWidth, - width: column.width + width: column.totalWidth }; if (instance.state.isScrollable && isLastColumn) { diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index e87d001762f..54b1ed69fe7 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -386,7 +386,9 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< ); })} - {loading && busyIndicatorEnabled && props.data?.length > 0 && } + {loading && busyIndicatorEnabled && props.data?.length > 0 && ( + + )} {loading && props.data?.length === 0 && (