Merge pull request #395 from epam/bugfix/datatable-cells-dnd

[VirtualList, DataTableHeaderCell]: Fix header cell DnD; Fixed cells wrapper flexBasis
epam · Jan 20, 2022 · 89421a4 · 89421a4
2 parents f0c53c6 + be518b8
commit 89421a4
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 10 deletions.
diff --git a/app/src/docs/examples/virtualList/Advanced.example.tsx b/app/src/docs/examples/virtualList/Advanced.example.tsx
@@ -22,14 +22,14 @@ export default function AdvancedVirtualList() {
 
     const citiesDataSource = useLazyDataSource<City, string, string>({ api: svc.api.demo.cities }, []);
     const { getVisibleRows, getListProps } = citiesDataSource.useView(value, onValueChange, {});
-    const { listContainerRef, offsetY, handleScroll, scrollContainerRef } = useVirtualList({
+    const { listContainerRef, offsetY, handleScroll, scrollContainerRef, estimatedHeight } = useVirtualList({
         value, onValueChange, rowsCount: getListProps().rowsCount,
     });
 
     return (
         <div ref={ scrollContainerRef } onScroll={ handleScroll } className={ css.mainContainer }>
             <Header />
-            <div className={ css.mainContainerWrapper }>
+            <div className={ css.mainContainerWrapper } style={ { minHeight: `${estimatedHeight}px` } }>
                 <ul ref={ listContainerRef } style={ { marginTop: `${offsetY}px` } } className={ css.mainContainerList }>
                     { getVisibleRows().map(row => (
                         <li className={ cx(css.mainContainerListItem, css.text) } key={ row.key + String(row.index) }>

diff --git a/epam-promo/components/tables/DataTableHeaderRow.tsx b/epam-promo/components/tables/DataTableHeaderRow.tsx
@@ -10,7 +10,6 @@ export const DataTableHeaderRow = withMods<DataTableHeaderRowProps, DataTableHea
     mods => [css.root],
     mods => ({
         renderCell: props => <DataTableHeaderCell
-            key={ props.column.key }
             { ...props }
             size={ mods.size }
             textCase={ mods.textCase || 'normal' }

diff --git a/loveship/components/tables/DataTableHeaderRow.tsx b/loveship/components/tables/DataTableHeaderRow.tsx
@@ -12,7 +12,6 @@ export const DataTableHeaderRow = withMods<DataTableHeaderRowProps, DataTableHea
     mods => [css.root],
     mods => ({
         renderCell: props => <DataTableHeaderCell
-            key={ props.column.key }
             { ...props }
             size={ mods.size }
             textCase={ mods.textCase || 'normal' }

diff --git a/loveship/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap b/loveship/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -43,6 +43,11 @@ exports[`DataTable should be rendered correctly 1`] = `
       >
         <div
           className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+          style={
+            Object {
+              "flex": "0 0 96px",
+            }
+          }
         >
           <div
             aria-sort="none"
@@ -262,6 +267,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -361,6 +371,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -460,6 +475,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -559,6 +579,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -658,6 +683,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -757,6 +787,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -856,6 +891,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -955,6 +995,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -1054,6 +1099,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"
@@ -1153,6 +1203,11 @@ exports[`DataTable should be rendered correctly 1`] = `
         >
           <div
             className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+            style={
+              Object {
+                "flex": "0 0 96px",
+              }
+            }
           >
             <div
               className="flexCell cell size-36 padding-12 padding-left-24 align-widgets-top"

diff --git a/loveship/components/tables/__tests__/__snapshots__/DataTableHeaderRow.test.tsx.snap b/loveship/components/tables/__tests__/__snapshots__/DataTableHeaderRow.test.tsx.snap
@@ -7,6 +7,11 @@ exports[`DataTableHeaderRow should be rendered correctly with extra props 1`] =
 >
   <div
     className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+    style={
+      Object {
+        "flex": "0 0 96px",
+      }
+    }
   >
     <div
       aria-sort="none"
@@ -261,6 +266,11 @@ exports[`DataTableHeaderRow should render with default props 1`] = `
 >
   <div
     className="fixedColumnsSectionLeft uui-table-fixed-section-left"
+    style={
+      Object {
+        "flex": "0 0 96px",
+      }
+    }
   >
     <div
       aria-sort="none"

diff --git a/uui-components/src/table/DataTableRowContainer.tsx b/uui-components/src/table/DataTableRowContainer.tsx
@@ -38,12 +38,13 @@ export class DataTableRowContainer<TItem, TId, TFilter> extends React.Component<
 
     wrapFixedSection = (cells: DataColumnProps<TItem, TId, TFilter>[], direction: 'left' | 'right') => (
         <div
+            style={ { flex: `0 0 ${this.getSectionWidth(cells)}px` } }
             className={ cx({
                 [css.fixedColumnsSectionLeft]: direction === 'left',
                 [uuiDataTableRowContainer.uuiTableFixedSectionLeft]: direction === 'left',
                 [css.fixedColumnsSectionRight]: direction === 'right',
                 [uuiDataTableRowContainer.uuiTableFixedSectionRight]: direction === 'right',
-            })}>
+            }) }>
             { this.renderCells(cells) }
             { direction === 'right' && <div className={ uuiDataTableRowContainer.uuiScrollShadowLeft } /> }
             { direction === 'left' && <div className={ uuiDataTableRowContainer.uuiScrollShadowRight } /> }

diff --git a/uui/hooks/useVirtualList.ts b/uui/hooks/useVirtualList.ts
@@ -66,13 +66,10 @@ export function useVirtualList<List extends HTMLElement = any, ScrollContainer e
         };
     }, [onValueChange, blockAlign, rowOffsets.current, rowsCount, value, onScroll, scrollContainer.current]);
 
-    const listOffset = React.useMemo(() => {
-        if (!listContainer.current) return undefined;
-        return listContainer.current.offsetTop;
-    }, [listContainer.current]);
+    const listOffset = React.useMemo(() => listContainer.current?.offsetTop || 0, [listContainer.current]);
 
     const updateRowHeights = React.useCallback(() => {
-        if (!listContainer.current || (listContainer.current.offsetTop > 0 && !listOffset)) return;
+        if (!listContainer.current) return;
 
         Array.from(listContainer.current.children).forEach((node, index) => {
             const topIndex = value?.topIndex || 0;