From a75ddfd8a62f6c6a0c8ded2f1efa72c15d4cba11 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Fri, 27 Oct 2023 14:04:51 +0300
Subject: [PATCH] fix: review changes

---
 .../ProgressViewer/ProgressViewer.scss        |  1 +
 src/components/VirtualTable/TableHead.tsx     | 38 +++++++------------
 src/components/VirtualTable/TableRow.tsx      | 16 +-------
 src/components/VirtualTable/VirtualTable.scss |  5 ++-
 src/components/VirtualTable/constants.ts      |  2 +
 .../VirtualTable/useIntersectionObserver.ts   |  3 +-
 src/components/VirtualTable/utils.ts          |  7 +---
 7 files changed, 26 insertions(+), 46 deletions(-)

diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss
index 7a94f84b1..6f7b77288 100644
--- a/src/components/ProgressViewer/ProgressViewer.scss
+++ b/src/components/ProgressViewer/ProgressViewer.scss
@@ -1,5 +1,6 @@
 .progress-viewer {
     position: relative;
+    z-index: 0;
 
     display: flex;
     overflow: hidden;
diff --git a/src/components/VirtualTable/TableHead.tsx b/src/components/VirtualTable/TableHead.tsx
index 3b69e8989..a75d5b197 100644
--- a/src/components/VirtualTable/TableHead.tsx
+++ b/src/components/VirtualTable/TableHead.tsx
@@ -4,28 +4,19 @@ import type {Column, OnSort, SortOrderType, SortParams} from './types';
 import {ASCENDING, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING} from './constants';
 import {b} from './shared';
 
-// Icons similar to original DataTable icons to keep the same tables across diferent pages and tabs
-const ICON_ASC = (
-    <svg className={b('icon')} viewBox="0 0 10 6" width="10" height="6">
-        <path fill="currentColor" d="M0 5h10l-5 -5z" />
-    </svg>
-);
-const ICON_DESC = (
-    <svg className={b('icon')} viewBox="0 0 10 6" width="10" height="6">
-        <path fill="currentColor" d="M0 1h10l-5 5z" />
-    </svg>
-);
-
-function getSortIcon(order?: SortOrderType) {
-    switch (order) {
-        case ASCENDING:
-            return ICON_ASC;
-        case DESCENDING:
-            return ICON_DESC;
-        default:
-            return false;
-    }
-}
+// Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
+const SortIcon = ({order}: {order?: SortOrderType}) => {
+    return (
+        <svg
+            className={b('icon', {desc: order === DESCENDING})}
+            viewBox="0 0 10 6"
+            width="10"
+            height="6"
+        >
+            <path fill="currentColor" d="M0 5h10l-5 -5z" />
+        </svg>
+    );
+};
 
 interface ColumnSortIconProps {
     sortOrder?: SortOrderType;
@@ -37,7 +28,7 @@ const ColumnSortIcon = ({sortOrder, sortable, defaultSortOrder}: ColumnSortIconP
     if (sortable) {
         return (
             <span className={b('sort-icon', {shadow: !sortOrder})}>
-                {getSortIcon(sortOrder || defaultSortOrder)}
+                <SortIcon order={sortOrder || defaultSortOrder} />
             </span>
         );
     } else {
@@ -117,7 +108,6 @@ export const TableHead = <T,>({
                                     column.className,
                                 )}
                                 style={{
-                                    width: `${column.width}px`,
                                     height: `${rowHeight}px`,
                                 }}
                                 onClick={() => {
diff --git a/src/components/VirtualTable/TableRow.tsx b/src/components/VirtualTable/TableRow.tsx
index 8ecc79e6b..35e8abaea 100644
--- a/src/components/VirtualTable/TableRow.tsx
+++ b/src/components/VirtualTable/TableRow.tsx
@@ -8,24 +8,14 @@ import {b} from './shared';
 
 interface TableCellProps {
     height: number;
-    width?: number;
     align?: AlignType;
     children: ReactNode;
     className?: string;
 }
 
-const TableRowCell = ({
-    children,
-    width,
-    className,
-    height,
-    align = DEFAULT_ALIGN,
-}: TableCellProps) => {
+const TableRowCell = ({children, className, height, align = DEFAULT_ALIGN}: TableCellProps) => {
     return (
-        <td
-            className={b('td', {align: align}, className)}
-            style={{width: width ? `${width}px` : undefined, height: `${height}px`}}
-        >
+        <td className={b('td', {align: align}, className)} style={{height: `${height}px`}}>
             {children}
         </td>
     );
@@ -44,7 +34,6 @@ export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowPro
                 return (
                     <TableRowCell
                         key={`${column.name}${index}`}
-                        width={column.width}
                         height={height}
                         align={column.align}
                         className={column.className}
@@ -74,7 +63,6 @@ export const TableRow = <T,>({row, index, columns, getRowClassName, height}: Tab
                 return (
                     <TableRowCell
                         key={`${column.name}${index}`}
-                        width={column.width}
                         height={height}
                         align={column.align}
                         className={column.className}
diff --git a/src/components/VirtualTable/VirtualTable.scss b/src/components/VirtualTable/VirtualTable.scss
index c58024520..614dde9b7 100644
--- a/src/components/VirtualTable/VirtualTable.scss
+++ b/src/components/VirtualTable/VirtualTable.scss
@@ -1,7 +1,6 @@
 @import '../../styles/mixins.scss';
 
 .ydb-virtual-table {
-
     $block: &;
     $cell-border: 1px solid var(--virtual-table-border-color);
     --virtual-table-cell-vertical-padding: 5px;
@@ -108,6 +107,10 @@
 
     &__icon {
         vertical-align: top;
+
+        &_desc {
+            transform: rotate(180deg);
+        }
     }
 
     &__td {
diff --git a/src/components/VirtualTable/constants.ts b/src/components/VirtualTable/constants.ts
index ba4da330c..feb26cc34 100644
--- a/src/components/VirtualTable/constants.ts
+++ b/src/components/VirtualTable/constants.ts
@@ -13,3 +13,5 @@ export const DEFAULT_SORT_ORDER = DESCENDING;
 export const DEFAULT_REQUEST_TIMEOUT = 200;
 
 export const DEFAULT_TABLE_ROW_HEIGHT = 40;
+
+export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';
diff --git a/src/components/VirtualTable/useIntersectionObserver.ts b/src/components/VirtualTable/useIntersectionObserver.ts
index 1555c2dab..24dbe116d 100644
--- a/src/components/VirtualTable/useIntersectionObserver.ts
+++ b/src/components/VirtualTable/useIntersectionObserver.ts
@@ -1,6 +1,7 @@
 import {useEffect, useRef} from 'react';
 
 import type {OnEntry, OnLeave} from './types';
+import {DEFAULT_INTERSECTION_OBSERVER_MARGIN} from './constants';
 
 interface UseIntersectionObserverProps {
     onEntry: OnEntry;
@@ -28,7 +29,7 @@ export const useIntersectionObserver = ({
 
         observer.current = new IntersectionObserver(callback, {
             root: parentContainer,
-            rootMargin: '50%',
+            rootMargin: DEFAULT_INTERSECTION_OBSERVER_MARGIN,
         });
 
         return () => {
diff --git a/src/components/VirtualTable/utils.ts b/src/components/VirtualTable/utils.ts
index 6a9adccda..ffa1fa018 100644
--- a/src/components/VirtualTable/utils.ts
+++ b/src/components/VirtualTable/utils.ts
@@ -1,8 +1,3 @@
 export const getArray = (arrayLength: number) => {
-    const rows = [];
-
-    for (let i = 0; i < arrayLength; i++) {
-        rows.push(i);
-    }
-    return rows;
+    return [...Array(arrayLength).keys()];
 };