ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/components/VirtualTable/TableHead.tsx

@@ -1,240 +0,0 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-
-import type {
-    HandleTableColumnsResize,
-    TableColumnsWidthSetup,
-} from '../../utils/hooks/useTableResize';
-
-import type {Column, OnSort, SortOrderType, SortParams} from './types';
-import {ASCENDING, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING} from './constants';
-import {b} from './shared';
-
-const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
-
-// 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('sort-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;
-    sortable?: boolean;
-    defaultSortOrder: SortOrderType;
-}
-
-const ColumnSortIcon = ({sortOrder, sortable, defaultSortOrder}: ColumnSortIconProps) => {
-    if (sortable) {
-        return (
-            <span className={b('sort-icon-container', {shadow: !sortOrder})}>
-                <SortIcon order={sortOrder || defaultSortOrder} />
-            </span>
-        );
-    } else {
-        return null;
-    }
-};
-
-interface TableHeadCellProps<T> {
-    column: Column<T>;
-    sortOrder?: SortOrderType;
-    defaultSortOrder: SortOrderType;
-    onSort?: (columnName: string) => void;
-    rowHeight: number;
-    onCellMount?: (element: Element) => void;
-    onCellUnMount?: (element: Element) => void;
-}
-
-export const TableHeadCell = <T,>({
-    column,
-    sortOrder,
-    defaultSortOrder,
-    onSort,
-    rowHeight,
-    onCellMount,
-    onCellUnMount,
-}: TableHeadCellProps<T>) => {
-    const cellWrapperRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const cellWrapper = cellWrapperRef.current;
-        if (cellWrapper) {
-            onCellMount?.(cellWrapper);
-        }
-        return () => {
-            if (cellWrapper) {
-                onCellUnMount?.(cellWrapper);
-            }
-        };
-    }, [onCellMount, onCellUnMount]);
-
-    const content = column.header ?? column.name;
-
-    return (
-        <th>
-            <div
-                ref={cellWrapperRef}
-                className={b('head-cell-wrapper', {
-                    resizeable: column.resizeable,
-                })}
-                style={{
-                    height: `${rowHeight}px`,
-                    width: `${column.width}px`,
-                }}
-                {...{
-                    [COLUMN_NAME_HTML_ATTRIBUTE]: column.name,
-                }}
-            >
-                <div
-                    className={b(
-                        'head-cell',
-                        {align: column.align, sortable: column.sortable},
-                        column.className,
-                    )}
-                    onClick={() => {
-                        if (column.sortable) {
-                            onSort?.(column.name);
-                        }
-                    }}
-                >
-                    <div className={b('head-cell-content')}>{content}</div>
-                    <ColumnSortIcon
-                        sortOrder={sortOrder}
-                        sortable={column.sortable}
-                        defaultSortOrder={defaultSortOrder}
-                    />
-                </div>
-            </div>
-        </th>
-    );
-};
-
-interface TableHeadProps<T> {
-    columns: Column<T>[];
-    onSort?: OnSort;
-    onColumnsResize?: HandleTableColumnsResize;
-    defaultSortOrder?: SortOrderType;
-    rowHeight?: number;
-}
-
-export const TableHead = <T,>({
-    columns,
-    onSort,
-    onColumnsResize,
-    defaultSortOrder = DEFAULT_SORT_ORDER,
-    rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
-}: TableHeadProps<T>) => {
-    const [sortParams, setSortParams] = useState<SortParams>({});
-
-    const isTableResizeable = Boolean(onColumnsResize);
-
-    const resizeObserver: ResizeObserver | undefined = useMemo(() => {
-        if (!isTableResizeable) {
-            return undefined;
-        }
-
-        return new ResizeObserver((entries) => {
-            const columnsWidth: TableColumnsWidthSetup = {};
-            entries.forEach((entry) => {
-                // @ts-ignore ignore custrom property usage
-                const id = entry.target.attributes[COLUMN_NAME_HTML_ATTRIBUTE]?.value;
-                columnsWidth[id] = entry.contentRect.width;
-            });
-
-            onColumnsResize?.(columnsWidth);
-        });
-    }, [onColumnsResize, isTableResizeable]);
-
-    const handleCellMount = useCallback(
-        (element: Element) => {
-            resizeObserver?.observe(element);
-        },
-        [resizeObserver],
-    );
-    const handleCellUnMount = useCallback(
-        (element: Element) => {
-            resizeObserver?.unobserve(element);
-        },
-        [resizeObserver],
-    );
-
-    const handleSort = (columnId: string) => {
-        let newSortParams: SortParams = {};
-
-        // Order is changed in following order:
-        // 1. Inactive Sort Order - gray icon of default order
-        // 2. Active default order
-        // 3. Active not default order
-        if (columnId === sortParams.columnId) {
-            if (sortParams.sortOrder && sortParams.sortOrder !== defaultSortOrder) {
-                setSortParams(newSortParams);
-                onSort?.(newSortParams);
-                return;
-            }
-            const newSortOrder = sortParams.sortOrder === ASCENDING ? DESCENDING : ASCENDING;
-            newSortParams = {
-                sortOrder: newSortOrder,
-                columnId: columnId,
-            };
-        } else {
-            newSortParams = {
-                sortOrder: defaultSortOrder,
-                columnId: columnId,
-            };
-        }
-
-        onSort?.(newSortParams);
-        setSortParams(newSortParams);
-    };
-
-    const renderTableColGroups = () => {
-        return (
-            <colgroup>
-                {columns.map((column) => {
-                    return <col key={column.name} style={{width: `${column.width}px`}} />;
-                })}
-            </colgroup>
-        );
-    };
-
-    const renderTableHead = () => {
-        return (
-            <thead className={b('head')}>
-                <tr>
-                    {columns.map((column) => {
-                        const sortOrder =
-                            sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
-
-                        return (
-                            <TableHeadCell
-                                key={column.name}
-                                column={column}
-                                sortOrder={sortOrder}
-                                defaultSortOrder={defaultSortOrder}
-                                onSort={handleSort}
-                                rowHeight={rowHeight}
-                                onCellMount={handleCellMount}
-                                onCellUnMount={handleCellUnMount}
-                            />
-                        );
-                    })}
-                </tr>
-            </thead>
-        );
-    };
-
-    return (
-        <>
-            {renderTableColGroups()}
-            {renderTableHead()}
-        </>
-    );
-};

package/dist/components/VirtualTable/TableRow.tsx

@@ -1,104 +0,0 @@
-import {type ReactNode} from 'react';
-
-import {Skeleton} from '@gravity-ui/uikit';
-
-import type {AlignType, Column, GetRowClassName} from './types';
-import {DEFAULT_ALIGN} from './constants';
-import {b} from './shared';
-
-interface TableCellProps {
-    height: number;
-    width: number;
-    align?: AlignType;
-    children: ReactNode;
-    className?: string;
-}
-
-const TableRowCell = ({
-    children,
-    className,
-    height,
-    width,
-    align = DEFAULT_ALIGN,
-}: TableCellProps) => {
-    // Additional maxWidth to ensure overflow hidden for <td>
-    return (
-        <td
-            className={b('row-cell', {align: align}, className)}
-            style={{height: `${height}px`, width: `${width}px`, maxWidth: `${width}px`}}
-        >
-            {children}
-        </td>
-    );
-};
-
-interface LoadingTableRowProps<T> {
-    columns: Column<T>[];
-    index: number;
-    height: number;
-}
-
-export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowProps<T>) => {
-    return (
-        <tr className={b('row')}>
-            {columns.map((column) => {
-                return (
-                    <TableRowCell
-                        key={`${column.name}${index}`}
-                        height={height}
-                        width={column.width}
-                        align={column.align}
-                        className={column.className}
-                    >
-                        <Skeleton style={{width: '80%', height: '50%'}} />
-                    </TableRowCell>
-                );
-            })}
-        </tr>
-    );
-};
-
-interface TableRowProps<T> {
-    columns: Column<T>[];
-    index: number;
-    row: T;
-    height: number;
-    getRowClassName?: GetRowClassName<T>;
-}
-
-export const TableRow = <T,>({row, index, columns, getRowClassName, height}: TableRowProps<T>) => {
-    const additionalClassName = getRowClassName?.(row);
-
-    return (
-        <tr className={b('row', additionalClassName)}>
-            {columns.map((column) => {
-                return (
-                    <TableRowCell
-                        key={`${column.name}${index}`}
-                        height={height}
-                        width={column.width}
-                        align={column.align}
-                        className={column.className}
-                    >
-                        {column.render({row, index})}
-                    </TableRowCell>
-                );
-            })}
-        </tr>
-    );
-};
-
-interface EmptyTableRowProps<T> {
-    columns: Column<T>[];
-    children?: ReactNode;
-}
-
-export const EmptyTableRow = <T,>({columns, children}: EmptyTableRowProps<T>) => {
-    return (
-        <tr className={b('row', {empty: true})}>
-            <td colSpan={columns.length} className={b('td')}>
-                {children}
-            </td>
-        </tr>
-    );
-};

package/dist/components/VirtualTable/VirtualTable.tsx

@@ -1,297 +0,0 @@
-import {useState, useReducer, useRef, useCallback, useEffect} from 'react';
-
-import type {HandleTableColumnsResize} from '../../utils/hooks/useTableResize';
-
-import type {IResponseError} from '../../types/api/error';
-import {getArray} from '../../utils';
-
-import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
-import {ResponseError} from '../Errors/ResponseError';
-
-import type {
-    Column,
-    OnSort,
-    FetchData,
-    SortParams,
-    RenderControls,
-    OnEntry,
-    OnLeave,
-    GetRowClassName,
-    RenderEmptyDataMessage,
-    RenderErrorMessage,
-} from './types';
-import {
-    createVirtualTableReducer,
-    initChunk,
-    removeChunk,
-    resetChunks,
-    setChunkData,
-    setChunkError,
-    setChunkLoading,
-} from './reducer';
-import {DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT} from './constants';
-import {TableHead} from './TableHead';
-import {TableChunk} from './TableChunk';
-import {EmptyTableRow} from './TableRow';
-import {useIntersectionObserver} from './useIntersectionObserver';
-import i18n from './i18n';
-import {b} from './shared';
-
-import './VirtualTable.scss';
-
-interface VirtualTableProps<T> {
-    limit: number;
-    fetchData: FetchData<T>;
-    columns: Column<T>[];
-    getRowClassName?: GetRowClassName<T>;
-    rowHeight?: number;
-    parentContainer?: Element | null;
-    initialSortParams?: SortParams;
-    onColumnsResize?: HandleTableColumnsResize;
-
-    renderControls?: RenderControls;
-    renderEmptyDataMessage?: RenderEmptyDataMessage;
-    renderErrorMessage?: RenderErrorMessage;
-
-    dependencyArray?: unknown[]; // Fully reload table on params change
-}
-
-export const VirtualTable = <T,>({
-    limit,
-    fetchData,
-    columns,
-    getRowClassName,
-    rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
-    parentContainer,
-    initialSortParams,
-    onColumnsResize,
-    renderControls,
-    renderEmptyDataMessage,
-    renderErrorMessage,
-    dependencyArray,
-}: VirtualTableProps<T>) => {
-    const inited = useRef(false);
-    const tableContainer = useRef<HTMLDivElement>(null);
-
-    const [state, dispatch] = useReducer(createVirtualTableReducer<T>(), {});
-
-    const [sortParams, setSortParams] = useState<SortParams | undefined>(initialSortParams);
-
-    const [totalEntities, setTotalEntities] = useState(limit);
-    const [foundEntities, setFoundEntities] = useState(0);
-
-    const [error, setError] = useState<IResponseError>();
-
-    const pendingRequests = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
-
-    const fetchChunkData = useCallback(
-        async (id: string) => {
-            dispatch(setChunkLoading(id));
-
-            const timer = setTimeout(async () => {
-                const offset = Number(id) * limit;
-
-                try {
-                    const response = await fetchData(limit, offset, sortParams);
-                    const {data, total, found} = response;
-
-                    setTotalEntities(total);
-                    setFoundEntities(found);
-                    inited.current = true;
-
-                    dispatch(setChunkData(id, data));
-                } catch (err) {
-                    // Do not set error on cancelled requests
-                    if ((err as IResponseError)?.isCancelled) {
-                        return;
-                    }
-
-                    dispatch(setChunkError(id, err as IResponseError));
-                    setError(err as IResponseError);
-                }
-            }, DEFAULT_REQUEST_TIMEOUT);
-
-            // Chunk data load could be triggered by different events
-            // Cancel previous chunk request, while it is pending (instead of concurrentId)
-            if (pendingRequests.current[id]) {
-                const oldTimer = pendingRequests.current[id];
-                window.clearTimeout(oldTimer);
-            }
-            pendingRequests.current[id] = timer;
-        },
-        [fetchData, limit, sortParams],
-    );
-
-    const onEntry = useCallback<OnEntry>((id) => {
-        dispatch(initChunk(id));
-    }, []);
-
-    const onLeave = useCallback<OnLeave>((id) => {
-        dispatch(removeChunk(id));
-
-        // If there is a pending request for the removed chunk, cancel it
-        // It made to prevent excessive requests on fast scroll
-        if (pendingRequests.current[id]) {
-            const timer = pendingRequests.current[id];
-            window.clearTimeout(timer);
-            delete pendingRequests.current[id];
-        }
-    }, []);
-
-    // Cancel all pending requests on component unmount
-    useEffect(() => {
-        return () => {
-            Object.values(pendingRequests.current).forEach((timer) => {
-                window.clearTimeout(timer);
-            });
-            pendingRequests.current = {};
-        };
-    }, []);
-
-    // Load chunks if they become active
-    // This mecanism helps to set chunk active state from different sources, but load data only once
-    // Only currently active chunks should be in state so iteration by the whole state shouldn't be a problem
-    useEffect(() => {
-        for (const id of Object.keys(state)) {
-            const chunk = state[Number(id)];
-
-            if (chunk?.active && !chunk?.loading && !chunk?.wasLoaded) {
-                fetchChunkData(id);
-            }
-        }
-    }, [fetchChunkData, state]);
-
-    // Reset table on filters change
-    useEffect(() => {
-        // Reset counts, so table unmount unneeded chunks
-        setTotalEntities(limit);
-        setFoundEntities(0);
-        setError(undefined);
-
-        // Remove all chunks from state
-        dispatch(resetChunks());
-
-        // Reset table state for the controls
-        inited.current = false;
-
-        // If there is a parent, scroll to parent container ref
-        // Else scroll to table top
-        // It helps to prevent layout shifts, when chunks quantity is changed
-        if (parentContainer) {
-            parentContainer.scrollTo(0, 0);
-        } else {
-            tableContainer.current?.scrollTo(0, 0);
-        }
-
-        // Make table start to load data
-        dispatch(initChunk('0'));
-    }, [dependencyArray, limit, parentContainer]);
-
-    // Reload currently active chunks
-    // Use case - sort params change, so data should be updated, but without chunks unmount
-    const reloadCurrentViewport = () => {
-        for (const id of Object.keys(state)) {
-            if (state[Number(id)]?.active) {
-                dispatch(initChunk(id));
-            }
-        }
-    };
-
-    const handleSort: OnSort = (params) => {
-        setSortParams(params);
-        reloadCurrentViewport();
-    };
-
-    const observer = useIntersectionObserver({onEntry, onLeave, parentContainer});
-
-    // Render at least 1 chunk
-    const totalLength = foundEntities || limit;
-    const chunksCount = Math.ceil(totalLength / limit);
-
-    const renderChunks = () => {
-        if (!observer) {
-            return null;
-        }
-
-        return getArray(chunksCount).map((value) => {
-            const chunkData = state[value];
-
-            return (
-                <TableChunk
-                    observer={observer}
-                    key={value}
-                    id={value}
-                    chunkSize={limit}
-                    rowHeight={rowHeight}
-                    columns={columns}
-                    chunkData={chunkData}
-                    getRowClassName={getRowClassName}
-                />
-            );
-        });
-    };
-
-    const renderData = () => {
-        if (inited.current && foundEntities === 0) {
-            return (
-                <tbody>
-                    <EmptyTableRow columns={columns}>
-                        {renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty')}
-                    </EmptyTableRow>
-                </tbody>
-            );
-        }
-
-        // If first chunk is loaded with the error, display error
-        // In case of other chunks table will be inited
-        if (!inited.current && error) {
-            return (
-                <tbody>
-                    <EmptyTableRow columns={columns}>
-                        {renderErrorMessage ? (
-                            renderErrorMessage(error)
-                        ) : (
-                            <ResponseError error={error} />
-                        )}
-                    </EmptyTableRow>
-                </tbody>
-            );
-        }
-
-        return renderChunks();
-    };
-
-    const renderTable = () => {
-        return (
-            <table className={b('table')}>
-                <TableHead
-                    columns={columns}
-                    onSort={handleSort}
-                    onColumnsResize={onColumnsResize}
-                />
-                {renderData()}
-            </table>
-        );
-    };
-
-    const renderContent = () => {
-        if (renderControls) {
-            return (
-                <TableWithControlsLayout>
-                    <TableWithControlsLayout.Controls>
-                        {renderControls({inited: inited.current, totalEntities, foundEntities})}
-                    </TableWithControlsLayout.Controls>
-                    <TableWithControlsLayout.Table>{renderTable()}</TableWithControlsLayout.Table>
-                </TableWithControlsLayout>
-            );
-        }
-
-        return renderTable();
-    };
-
-    return (
-        <div ref={tableContainer} className={b(null)}>
-            {renderContent()}
-        </div>
-    );
-};

package/dist/components/VirtualTable/constants.ts

@@ -1,17 +0,0 @@
-export const LEFT = 'left';
-export const CENTER = 'center';
-export const RIGHT = 'right';
-
-export const DEFAULT_ALIGN = LEFT;
-
-export const ASCENDING = 1;
-export const DESCENDING = -1;
-
-export const DEFAULT_SORT_ORDER = DESCENDING;
-
-// Time in ms after which request will be sent
-export const DEFAULT_REQUEST_TIMEOUT = 200;
-
-export const DEFAULT_TABLE_ROW_HEIGHT = 40;
-
-export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';

package/dist/components/VirtualTable/i18n/index.ts

@@ -1,11 +0,0 @@
-import {i18n, Lang} from '../../../utils/i18n';
-
-import en from './en.json';
-import ru from './ru.json';
-
-const COMPONENT = 'ydb-virtual-table';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);