@astral/ui 4.45.0 → 4.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/DataGrid/Body/Body.d.ts +1 -98
- package/components/DataGrid/Body/Body.js +3 -15
- package/components/DataGrid/Body/index.d.ts +1 -0
- package/components/DataGrid/Body/index.js +1 -0
- package/components/DataGrid/Body/types.d.ts +110 -0
- package/components/DataGrid/Body/types.js +1 -0
- package/components/DataGrid/DataGrid.js +30 -5
- package/components/DataGrid/Head/Head.d.ts +4 -0
- package/components/DataGrid/Head/Head.js +3 -2
- package/components/DataGrid/Loader/Loader.js +2 -2
- package/components/DataGrid/Loader/styles.js +4 -2
- package/components/DataGrid/PinnedSections/PinnedSections.d.ts +35 -0
- package/components/DataGrid/PinnedSections/PinnedSections.js +11 -0
- package/components/DataGrid/PinnedSections/Section/Section.d.ts +3 -0
- package/components/DataGrid/PinnedSections/Section/Section.js +17 -0
- package/components/DataGrid/PinnedSections/Section/index.d.ts +1 -0
- package/components/DataGrid/PinnedSections/Section/index.js +1 -0
- package/components/DataGrid/PinnedSections/Section/styles.d.ts +5 -0
- package/components/DataGrid/PinnedSections/Section/styles.js +100 -0
- package/components/DataGrid/PinnedSections/Section/types.d.ts +26 -0
- package/components/DataGrid/PinnedSections/Section/types.js +1 -0
- package/components/DataGrid/PinnedSections/Section/useLogic/useLogic.d.ts +9 -0
- package/components/DataGrid/PinnedSections/Section/useLogic/useLogic.js +16 -0
- package/components/DataGrid/PinnedSections/index.d.ts +1 -0
- package/components/DataGrid/PinnedSections/index.js +1 -0
- package/components/DataGrid/PinnedSections/styles.d.ts +7 -0
- package/components/DataGrid/PinnedSections/styles.js +18 -0
- package/components/DataGrid/PinnedSections/types.d.ts +5 -0
- package/components/DataGrid/PinnedSections/types.js +1 -0
- package/components/DataGrid/PinnedSections/useLogic/index.js +1 -0
- package/components/DataGrid/PinnedSections/useLogic/useLogic.d.ts +9 -0
- package/components/DataGrid/PinnedSections/useLogic/useLogic.js +19 -0
- package/components/DataGrid/Row/NestedChildren/NestedChildren.js +2 -2
- package/components/DataGrid/Row/Row.d.ts +1 -94
- package/components/DataGrid/Row/Row.js +23 -8
- package/components/DataGrid/Row/constants.d.ts +3 -1
- package/components/DataGrid/Row/constants.js +3 -1
- package/components/DataGrid/Row/styles.js +9 -8
- package/components/DataGrid/Row/types.d.ts +118 -0
- package/components/DataGrid/Row/types.js +1 -0
- package/components/DataGrid/Row/useLogic/useLogic.d.ts +3 -2
- package/components/DataGrid/Row/useLogic/useLogic.js +14 -2
- package/components/DataGrid/constants.d.ts +7 -0
- package/components/DataGrid/constants.js +7 -0
- package/components/DataGrid/hooks/index.d.ts +1 -0
- package/components/DataGrid/hooks/index.js +1 -0
- package/components/DataGrid/hooks/useRowHover/index.d.ts +1 -0
- package/components/DataGrid/hooks/useRowHover/index.js +1 -0
- package/components/DataGrid/hooks/useRowHover/useRowHover.d.ts +15 -0
- package/components/DataGrid/hooks/useRowHover/useRowHover.js +93 -0
- package/components/DataGrid/styles.js +17 -0
- package/components/DataGrid/types.d.ts +4 -0
- package/components/DataGrid/useLogic/hooks/index.d.ts +2 -0
- package/components/DataGrid/useLogic/hooks/index.js +2 -0
- package/components/DataGrid/useLogic/hooks/useClassnames/index.d.ts +1 -0
- package/components/DataGrid/useLogic/hooks/useClassnames/index.js +1 -0
- package/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.d.ts +12 -0
- package/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.js +14 -0
- package/components/DataGrid/useLogic/hooks/usePinnedColumns/index.d.ts +1 -0
- package/components/DataGrid/useLogic/hooks/usePinnedColumns/index.js +1 -0
- package/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.d.ts +18 -0
- package/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.js +43 -0
- package/components/DataGrid/useLogic/useLogic.d.ts +30 -4
- package/components/DataGrid/useLogic/useLogic.js +55 -16
- package/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.d.ts +17 -0
- package/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.js +45 -0
- package/components/DataGrid/useLogic/utils/getColumnSections/index.d.ts +1 -0
- package/components/DataGrid/useLogic/utils/getColumnSections/index.js +1 -0
- package/components/DataGrid/useLogic/utils/index.d.ts +2 -1
- package/components/DataGrid/useLogic/utils/index.js +2 -1
- package/components/DataGrid/useLogic/utils/syncRowsHeight/index.d.ts +1 -0
- package/components/DataGrid/useLogic/utils/syncRowsHeight/index.js +1 -0
- package/components/DataGrid/useLogic/utils/syncRowsHeight/syncRowsHeight.d.ts +5 -0
- package/components/DataGrid/useLogic/utils/syncRowsHeight/syncRowsHeight.js +21 -0
- package/components/DataGrid/utils/index.d.ts +1 -0
- package/components/DataGrid/utils/index.js +1 -0
- package/components/DataGridInfinite/useLogic/useLogic.js +1 -1
- package/node/components/DataGrid/Body/Body.d.ts +1 -98
- package/node/components/DataGrid/Body/Body.js +3 -15
- package/node/components/DataGrid/Body/index.d.ts +1 -0
- package/node/components/DataGrid/Body/index.js +1 -0
- package/node/components/DataGrid/Body/types.d.ts +110 -0
- package/node/components/DataGrid/Body/types.js +2 -0
- package/node/components/DataGrid/DataGrid.js +29 -4
- package/node/components/DataGrid/Head/Head.d.ts +4 -0
- package/node/components/DataGrid/Head/Head.js +3 -2
- package/node/components/DataGrid/Loader/Loader.js +1 -1
- package/node/components/DataGrid/Loader/styles.js +4 -2
- package/node/components/DataGrid/PinnedSections/PinnedSections.d.ts +35 -0
- package/node/components/DataGrid/PinnedSections/PinnedSections.js +15 -0
- package/node/components/DataGrid/PinnedSections/Section/Section.d.ts +3 -0
- package/node/components/DataGrid/PinnedSections/Section/Section.js +21 -0
- package/node/components/DataGrid/PinnedSections/Section/index.d.ts +1 -0
- package/node/components/DataGrid/PinnedSections/Section/index.js +17 -0
- package/node/components/DataGrid/PinnedSections/Section/styles.d.ts +5 -0
- package/node/components/DataGrid/PinnedSections/Section/styles.js +103 -0
- package/node/components/DataGrid/PinnedSections/Section/types.d.ts +26 -0
- package/node/components/DataGrid/PinnedSections/Section/types.js +2 -0
- package/node/components/DataGrid/PinnedSections/Section/useLogic/index.d.ts +1 -0
- package/node/components/DataGrid/PinnedSections/Section/useLogic/useLogic.d.ts +9 -0
- package/node/components/DataGrid/PinnedSections/Section/useLogic/useLogic.js +20 -0
- package/node/components/DataGrid/PinnedSections/index.d.ts +1 -0
- package/node/components/DataGrid/PinnedSections/index.js +17 -0
- package/node/components/DataGrid/PinnedSections/styles.d.ts +7 -0
- package/node/components/DataGrid/PinnedSections/styles.js +21 -0
- package/node/components/DataGrid/PinnedSections/types.d.ts +5 -0
- package/node/components/DataGrid/PinnedSections/types.js +2 -0
- package/node/components/DataGrid/PinnedSections/useLogic/index.d.ts +1 -0
- package/node/components/DataGrid/PinnedSections/useLogic/index.js +17 -0
- package/node/components/DataGrid/PinnedSections/useLogic/useLogic.d.ts +9 -0
- package/node/components/DataGrid/PinnedSections/useLogic/useLogic.js +23 -0
- package/node/components/DataGrid/Row/NestedChildren/NestedChildren.js +1 -1
- package/node/components/DataGrid/Row/Row.d.ts +1 -94
- package/node/components/DataGrid/Row/Row.js +23 -8
- package/node/components/DataGrid/Row/constants.d.ts +3 -1
- package/node/components/DataGrid/Row/constants.js +4 -2
- package/node/components/DataGrid/Row/styles.js +8 -7
- package/node/components/DataGrid/Row/types.d.ts +118 -0
- package/node/components/DataGrid/Row/types.js +2 -0
- package/node/components/DataGrid/Row/useLogic/useLogic.d.ts +3 -2
- package/node/components/DataGrid/Row/useLogic/useLogic.js +13 -1
- package/node/components/DataGrid/constants.d.ts +7 -0
- package/node/components/DataGrid/constants.js +7 -0
- package/node/components/DataGrid/hooks/index.d.ts +1 -0
- package/node/components/DataGrid/hooks/index.js +17 -0
- package/node/components/DataGrid/hooks/useRowHover/index.d.ts +1 -0
- package/node/components/DataGrid/hooks/useRowHover/index.js +17 -0
- package/node/components/DataGrid/hooks/useRowHover/useRowHover.d.ts +15 -0
- package/node/components/DataGrid/hooks/useRowHover/useRowHover.js +97 -0
- package/node/components/DataGrid/styles.js +17 -0
- package/node/components/DataGrid/types.d.ts +4 -0
- package/node/components/DataGrid/useLogic/hooks/index.d.ts +2 -0
- package/node/components/DataGrid/useLogic/hooks/index.js +18 -0
- package/node/components/DataGrid/useLogic/hooks/useClassnames/index.d.ts +1 -0
- package/node/components/DataGrid/useLogic/hooks/useClassnames/index.js +17 -0
- package/node/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.d.ts +12 -0
- package/node/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.js +18 -0
- package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/index.d.ts +1 -0
- package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/index.js +17 -0
- package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.d.ts +18 -0
- package/node/components/DataGrid/useLogic/hooks/usePinnedColumns/usePinnedColumns.js +47 -0
- package/node/components/DataGrid/useLogic/useLogic.d.ts +30 -4
- package/node/components/DataGrid/useLogic/useLogic.js +53 -14
- package/node/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.d.ts +17 -0
- package/node/components/DataGrid/useLogic/utils/getColumnSections/getColumnSections.js +50 -0
- package/node/components/DataGrid/useLogic/utils/getColumnSections/index.d.ts +1 -0
- package/node/components/DataGrid/useLogic/utils/getColumnSections/index.js +17 -0
- package/node/components/DataGrid/useLogic/utils/index.d.ts +2 -1
- package/node/components/DataGrid/useLogic/utils/index.js +5 -3
- package/node/components/DataGrid/useLogic/utils/syncRowsHeight/index.d.ts +1 -0
- package/node/components/DataGrid/useLogic/utils/syncRowsHeight/index.js +17 -0
- package/node/components/DataGrid/useLogic/utils/syncRowsHeight/syncRowsHeight.d.ts +5 -0
- package/node/components/DataGrid/useLogic/utils/syncRowsHeight/syncRowsHeight.js +25 -0
- package/node/components/DataGrid/utils/index.d.ts +1 -0
- package/node/components/DataGrid/utils/index.js +3 -1
- package/node/components/DataGridInfinite/useLogic/useLogic.js +1 -1
- package/package.json +1 -1
- package/components/DataGrid/Body/useLogic/useLogic.d.ts +0 -12
- package/components/DataGrid/Body/useLogic/useLogic.js +0 -11
- package/node/components/DataGrid/Body/useLogic/useLogic.d.ts +0 -12
- package/node/components/DataGrid/Body/useLogic/useLogic.js +0 -15
- /package/components/DataGrid/{Body → PinnedSections/Section}/useLogic/index.d.ts +0 -0
- /package/components/DataGrid/{Body → PinnedSections/Section}/useLogic/index.js +0 -0
- /package/{node/components/DataGrid/Body → components/DataGrid/PinnedSections}/useLogic/index.d.ts +0 -0
- /package/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/getGridTemplateColumns.d.ts +0 -0
- /package/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/getGridTemplateColumns.js +0 -0
- /package/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/index.d.ts +0 -0
- /package/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/index.js +0 -0
- /package/node/components/DataGrid/{Body → PinnedSections/Section}/useLogic/index.js +0 -0
- /package/node/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/getGridTemplateColumns.d.ts +0 -0
- /package/node/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/getGridTemplateColumns.js +0 -0
- /package/node/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/index.d.ts +0 -0
- /package/node/components/DataGrid/{useLogic/utils → utils}/getGridTemplateColumns/index.js +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useClassnames';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useClassnames';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type UseClassnamesParams = {
|
|
2
|
+
isDataGridDisabled?: boolean;
|
|
3
|
+
dataGridClassName?: string;
|
|
4
|
+
hasPinnedColumns?: boolean;
|
|
5
|
+
isNoData?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare const useClassnames: ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }: UseClassnamesParams) => {
|
|
8
|
+
pinnedSectionsClassname: string;
|
|
9
|
+
dataGridClassname: string;
|
|
10
|
+
bodyClassName: string;
|
|
11
|
+
};
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { classNames } from '../../../../utils/classNames';
|
|
2
|
+
import { dataGridClassnames } from '../../../constants';
|
|
3
|
+
export const useClassnames = ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }) => {
|
|
4
|
+
const pinnedSectionsClassname = classNames(dataGridClassnames.pinnedSections, {
|
|
5
|
+
[dataGridClassnames.disabled]: isDataGridDisabled,
|
|
6
|
+
});
|
|
7
|
+
const dataGridClassname = classNames(dataGridClassnames.root, dataGridClassName, {
|
|
8
|
+
[dataGridClassnames.dataGridHasPinnedSections]: hasPinnedColumns,
|
|
9
|
+
});
|
|
10
|
+
const bodyClassName = classNames(dataGridClassnames.body, {
|
|
11
|
+
[dataGridClassnames.bodyEmpty]: isNoData,
|
|
12
|
+
});
|
|
13
|
+
return { pinnedSectionsClassname, dataGridClassname, bodyClassName };
|
|
14
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './usePinnedColumns';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './usePinnedColumns';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type CellValue, type DataGridColumns, type DataGridRow } from '../../../types';
|
|
3
|
+
type UsePinnedColumnsParams<TData extends Record<string, CellValue> = DataGridRow> = {
|
|
4
|
+
isLoading?: boolean;
|
|
5
|
+
columns: DataGridColumns<TData>[];
|
|
6
|
+
};
|
|
7
|
+
export declare const usePinnedColumns: <TData extends Record<string, unknown> = DataGridRow>({ isLoading, columns, }: UsePinnedColumnsParams<TData>) => {
|
|
8
|
+
containerRef: import("react").RefObject<HTMLDivElement | null>;
|
|
9
|
+
rowHoverProps: {
|
|
10
|
+
registerRowElement: (rowId: string, el: HTMLElement) => void;
|
|
11
|
+
unregisterRowElement: (rowId: string, el: HTMLElement) => void;
|
|
12
|
+
onRowEnter: (rowId: string) => void;
|
|
13
|
+
onRowLeave: (rowId: string, e: PointerEvent) => void;
|
|
14
|
+
};
|
|
15
|
+
sections: import("../../../PinnedSections/types").PinnedSection<TData>[];
|
|
16
|
+
hasPinnedColumns: boolean;
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
|
|
2
|
+
import { dataGridClassnames } from '../../../constants';
|
|
3
|
+
import { useRowHover } from '../../../hooks/useRowHover';
|
|
4
|
+
import { getColumnSections } from '../../utils/getColumnSections';
|
|
5
|
+
import { syncRowsHeight } from '../../utils/syncRowsHeight';
|
|
6
|
+
export const usePinnedColumns = ({ isLoading, columns, }) => {
|
|
7
|
+
const containerRef = useRef(null);
|
|
8
|
+
const hasPinnedColumns = useMemo(() => columns.some((column) => column.pinned), [columns]);
|
|
9
|
+
const { rowsMapRef, ...rowHoverProps } = useRowHover({ hasPinnedColumns });
|
|
10
|
+
const isScrollStateSupported = CSS.supports('container-type', 'scroll-state');
|
|
11
|
+
const checkOverflow = useCallback((element) => {
|
|
12
|
+
if (element) {
|
|
13
|
+
return element.scrollWidth > element.clientWidth;
|
|
14
|
+
}
|
|
15
|
+
return false;
|
|
16
|
+
}, []);
|
|
17
|
+
const { sections } = useMemo(() => getColumnSections(columns), [columns]);
|
|
18
|
+
useLayoutEffect(() => {
|
|
19
|
+
if (isLoading || !hasPinnedColumns || typeof window === 'undefined') {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
23
|
+
syncRowsHeight(rowsMapRef.current);
|
|
24
|
+
if (isScrollStateSupported) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
if (checkOverflow(containerRef.current)) {
|
|
28
|
+
containerRef.current?.classList.add(dataGridClassnames.overflowed);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
containerRef.current?.classList.remove(dataGridClassnames.overflowed);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
if (!containerRef.current) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
resizeObserver.observe(containerRef.current);
|
|
38
|
+
return () => {
|
|
39
|
+
resizeObserver.disconnect();
|
|
40
|
+
};
|
|
41
|
+
}, [hasPinnedColumns, isLoading]);
|
|
42
|
+
return { containerRef, rowHoverProps, sections, hasPinnedColumns };
|
|
43
|
+
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { type ChangeEvent } from 'react';
|
|
2
2
|
import type { CellValue, DataGridProps, DataGridRow } from '../types';
|
|
3
3
|
type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridProps<TData, TSortField>;
|
|
4
|
-
export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
|
|
4
|
+
export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData, sorting, className, onSort, }: UseLogicParams<TData, TSortField>) => {
|
|
5
|
+
pinnedSectionsClassname: string;
|
|
6
|
+
dataGridClassname: string;
|
|
5
7
|
isDataGridDisabled: boolean | undefined;
|
|
6
8
|
treeRenderConfig: {
|
|
7
9
|
isInitialExpanded?: boolean | undefined;
|
|
@@ -11,20 +13,44 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
|
|
|
11
13
|
renderRows: TData[];
|
|
12
14
|
isAllowHorizontalScroll: boolean;
|
|
13
15
|
isHideHead: boolean;
|
|
16
|
+
hasPinnedColumns: boolean;
|
|
17
|
+
contentStateProps: {
|
|
18
|
+
isLoading: boolean | undefined;
|
|
19
|
+
isError: boolean | undefined;
|
|
20
|
+
loadingTitle: string;
|
|
21
|
+
errorState: {
|
|
22
|
+
imgAlt: string;
|
|
23
|
+
errorList: string[];
|
|
24
|
+
imgSrc: string;
|
|
25
|
+
onRetry: () => void;
|
|
26
|
+
};
|
|
27
|
+
isSmoothLoading: boolean;
|
|
28
|
+
};
|
|
29
|
+
rowHoverProps: {
|
|
30
|
+
registerRowElement: (rowId: string, el: HTMLElement) => void;
|
|
31
|
+
unregisterRowElement: (rowId: string, el: HTMLElement) => void;
|
|
32
|
+
onRowEnter: (rowId: string) => void;
|
|
33
|
+
onRowLeave: (rowId: string, e: PointerEvent) => void;
|
|
34
|
+
};
|
|
35
|
+
containerRef: import("react").RefObject<HTMLDivElement | null>;
|
|
36
|
+
gridColumns: string;
|
|
37
|
+
isNoData: boolean;
|
|
38
|
+
headColumns: import("../types").DataGridColumns<TData>[];
|
|
14
39
|
headProps: {
|
|
15
40
|
rowsCount: number;
|
|
16
41
|
uncheckedRowsCount: number;
|
|
17
|
-
gridColumns: string;
|
|
18
42
|
isSelectable: boolean;
|
|
19
|
-
columns: import("../types").DataGridColumns<TData>[];
|
|
20
43
|
onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
21
44
|
isHideSelectAll: boolean | undefined;
|
|
45
|
+
sorting: import("../types").DataGridSort<TSortField> | undefined;
|
|
46
|
+
onSort: ((sorting: import("../types").DataGridSort<TSortField> | undefined) => void) | undefined;
|
|
22
47
|
};
|
|
23
48
|
bodyProps: {
|
|
24
|
-
gridColumns: string;
|
|
25
49
|
isSelectable: boolean;
|
|
26
50
|
onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
|
|
27
51
|
};
|
|
52
|
+
bodyClassName: string;
|
|
53
|
+
sections: import("../PinnedSections/types").PinnedSection<TData>[];
|
|
28
54
|
loaderProps: {
|
|
29
55
|
isLoading: boolean | undefined;
|
|
30
56
|
isVisibleDivider: boolean;
|
|
@@ -1,33 +1,28 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useRef, } from 'react';
|
|
1
|
+
import { useCallback, useContext, useEffect, useMemo, useRef, } from 'react';
|
|
2
|
+
import { ConfigContext } from '../../ConfigProvider';
|
|
2
3
|
import { useFirstMountState } from '../../useFirstMountState';
|
|
3
4
|
import { prop } from '../../utils/prop';
|
|
4
5
|
import { uniqueBy } from '../../utils/uniqueBy';
|
|
5
6
|
import { Variant } from '../enums';
|
|
6
|
-
import { getGridTemplateColumns
|
|
7
|
-
|
|
7
|
+
import { getGridTemplateColumns } from '../utils/getGridTemplateColumns';
|
|
8
|
+
import { useClassnames, usePinnedColumns } from './hooks';
|
|
9
|
+
import { getIsAllowHorizontalScroll } from './utils';
|
|
10
|
+
export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, selectedRows = [], isLoading, isDisabled, onSelectRow, isError, onRetry, errorMsg, isHideSelectAll, isHideHeaderIfNoData = false, sorting, className, onSort, }) => {
|
|
8
11
|
const isFirstRender = useFirstMountState();
|
|
9
12
|
const isSelectable = Boolean(onSelectRow);
|
|
10
13
|
const isDataGridDisabled = isLoading || isDisabled;
|
|
14
|
+
const { imagesMap } = useContext(ConfigContext);
|
|
11
15
|
// Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
|
|
12
16
|
const selectedRowsRef = useRef(selectedRows);
|
|
13
17
|
useEffect(() => {
|
|
14
18
|
selectedRowsRef.current = selectedRows;
|
|
15
19
|
}, [selectedRows]);
|
|
16
|
-
const treeRenderConfig = Object.is(variant, Variant.Subrows)
|
|
17
|
-
? { ...subrows, isInitialExpanded: true }
|
|
18
|
-
: tree;
|
|
19
|
-
const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
|
|
20
20
|
const prevRowsRef = useRef([]);
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
if (!isLoading) {
|
|
23
23
|
prevRowsRef.current = rows;
|
|
24
24
|
}
|
|
25
25
|
}, [rows, isLoading]);
|
|
26
|
-
const gridColumns = getGridTemplateColumns(columns);
|
|
27
|
-
const isAllowHorizontalScroll = getIsAllowHorizontalScroll(columns);
|
|
28
|
-
const uncheckedRowsCount = useMemo(() => {
|
|
29
|
-
return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
|
|
30
|
-
}, [availableRows, selectedRows, keyId]);
|
|
31
26
|
const processedColumns = useCallback(() => {
|
|
32
27
|
if (rows.length <= 1) {
|
|
33
28
|
return columns.map((column) => ({ ...column, sortable: false }));
|
|
@@ -35,6 +30,26 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
|
|
|
35
30
|
return columns;
|
|
36
31
|
}, [columns, rows]);
|
|
37
32
|
const renderRows = isLoading ? prevRowsRef.current : rows;
|
|
33
|
+
const isNoData = !renderRows.length;
|
|
34
|
+
const { containerRef, rowHoverProps, sections, hasPinnedColumns } = usePinnedColumns({
|
|
35
|
+
isLoading,
|
|
36
|
+
columns: processedColumns(),
|
|
37
|
+
});
|
|
38
|
+
const { pinnedSectionsClassname, dataGridClassname, bodyClassName } = useClassnames({
|
|
39
|
+
isDataGridDisabled,
|
|
40
|
+
dataGridClassName: className,
|
|
41
|
+
hasPinnedColumns,
|
|
42
|
+
isNoData,
|
|
43
|
+
});
|
|
44
|
+
const treeRenderConfig = Object.is(variant, Variant.Subrows)
|
|
45
|
+
? { ...subrows, isInitialExpanded: true }
|
|
46
|
+
: tree;
|
|
47
|
+
const availableRows = rows.filter((row) => !(row.options?.isDisabled || row.options?.isNotSelectable));
|
|
48
|
+
const gridColumns = getGridTemplateColumns(columns);
|
|
49
|
+
const isAllowHorizontalScroll = getIsAllowHorizontalScroll(columns);
|
|
50
|
+
const uncheckedRowsCount = useMemo(() => {
|
|
51
|
+
return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
|
|
52
|
+
}, [availableRows, selectedRows, keyId]);
|
|
38
53
|
const handleSelectAllRows = (event) => {
|
|
39
54
|
if (!onSelectRow) {
|
|
40
55
|
return;
|
|
@@ -55,27 +70,51 @@ export const useLogic = ({ keyId, columns, rows = [], variant, tree, subrows, se
|
|
|
55
70
|
}
|
|
56
71
|
onSelectRow(selectedRowsRef.current.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
|
|
57
72
|
};
|
|
58
|
-
const isHideHead = isHideHeaderIfNoData &&
|
|
73
|
+
const isHideHead = isHideHeaderIfNoData && isNoData;
|
|
74
|
+
const contentStateProps = useMemo(() => {
|
|
75
|
+
return {
|
|
76
|
+
isLoading: isLoading && isNoData,
|
|
77
|
+
isError: isError && isNoData,
|
|
78
|
+
loadingTitle: 'Загрузка данных',
|
|
79
|
+
errorState: {
|
|
80
|
+
imgAlt: 'Что-то пошло не так',
|
|
81
|
+
errorList: [errorMsg || ''],
|
|
82
|
+
imgSrc: imagesMap.defaultErrorImgSrc,
|
|
83
|
+
onRetry,
|
|
84
|
+
},
|
|
85
|
+
isSmoothLoading: false,
|
|
86
|
+
};
|
|
87
|
+
}, [isLoading, isError, isNoData, errorMsg, onRetry, imagesMap]);
|
|
59
88
|
return {
|
|
89
|
+
pinnedSectionsClassname,
|
|
90
|
+
dataGridClassname,
|
|
60
91
|
isDataGridDisabled,
|
|
61
92
|
treeRenderConfig,
|
|
62
93
|
renderRows,
|
|
63
94
|
isAllowHorizontalScroll,
|
|
64
95
|
isHideHead,
|
|
96
|
+
hasPinnedColumns,
|
|
97
|
+
contentStateProps,
|
|
98
|
+
rowHoverProps,
|
|
99
|
+
containerRef,
|
|
100
|
+
gridColumns,
|
|
101
|
+
isNoData,
|
|
102
|
+
headColumns: processedColumns(),
|
|
65
103
|
headProps: {
|
|
66
104
|
rowsCount: availableRows.length,
|
|
67
105
|
uncheckedRowsCount,
|
|
68
|
-
gridColumns,
|
|
69
106
|
isSelectable,
|
|
70
|
-
columns: processedColumns(),
|
|
71
107
|
onSelectAllRows: handleSelectAllRows,
|
|
72
108
|
isHideSelectAll,
|
|
109
|
+
sorting,
|
|
110
|
+
onSort,
|
|
73
111
|
},
|
|
74
112
|
bodyProps: {
|
|
75
|
-
gridColumns,
|
|
76
113
|
isSelectable,
|
|
77
114
|
onSelectRow: handleSelectRow,
|
|
78
115
|
},
|
|
116
|
+
bodyClassName,
|
|
117
|
+
sections,
|
|
79
118
|
loaderProps: {
|
|
80
119
|
isLoading: !isFirstRender && isLoading,
|
|
81
120
|
isVisibleDivider: Boolean(rows.length),
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { PinnedSection } from '../../../PinnedSections/types';
|
|
2
|
+
import type { DataGridColumns, DataGridRow } from '../../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Валидирует корректность комбинаций закрепления колонок.
|
|
5
|
+
* Выбрасывает ошибку, если колонки с pinned="right" не идут непрерывным блоком в конце
|
|
6
|
+
* или колонки с pinned="left" не идут непрерывным блоком в начале.
|
|
7
|
+
*/
|
|
8
|
+
export declare const validatePinnedColumns: (positions: ('left' | 'right' | 'center')[]) => void;
|
|
9
|
+
/**
|
|
10
|
+
* Группирует колонки DataGrid по закреплённым позициям (pinned):
|
|
11
|
+
* - left (закреплены слева)
|
|
12
|
+
* - center (обычные, не закреплённые)
|
|
13
|
+
* - right (закреплены справа)
|
|
14
|
+
*/
|
|
15
|
+
export declare const getColumnSections: <TData extends Record<string, unknown> = DataGridRow>(columns: DataGridColumns<TData>[]) => {
|
|
16
|
+
sections: PinnedSection<TData>[];
|
|
17
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Валидирует корректность комбинаций закрепления колонок.
|
|
3
|
+
* Выбрасывает ошибку, если колонки с pinned="right" не идут непрерывным блоком в конце
|
|
4
|
+
* или колонки с pinned="left" не идут непрерывным блоком в начале.
|
|
5
|
+
*/
|
|
6
|
+
export const validatePinnedColumns = (positions) => {
|
|
7
|
+
const firstRight = positions.indexOf('right');
|
|
8
|
+
if (firstRight !== -1 &&
|
|
9
|
+
positions.slice(firstRight).some((p) => p !== 'right')) {
|
|
10
|
+
// biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
|
|
11
|
+
console.error('DataGrid: Колонки с pinned="right" должны идти непрерывным блоком в конце');
|
|
12
|
+
}
|
|
13
|
+
// left: должны быть в начале
|
|
14
|
+
const lastLeft = positions.lastIndexOf('left');
|
|
15
|
+
if (lastLeft !== -1 &&
|
|
16
|
+
positions.slice(0, lastLeft + 1).some((p) => p !== 'left')) {
|
|
17
|
+
// biome-ignore lint/suspicious/noConsole: Сообщение для интеграторов
|
|
18
|
+
console.error('DataGrid: Колонки с pinned="left" должны идти непрерывным блоком в начале');
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Группирует колонки DataGrid по закреплённым позициям (pinned):
|
|
23
|
+
* - left (закреплены слева)
|
|
24
|
+
* - center (обычные, не закреплённые)
|
|
25
|
+
* - right (закреплены справа)
|
|
26
|
+
*/
|
|
27
|
+
export const getColumnSections = (columns) => {
|
|
28
|
+
const groups = columns.reduce((acc, col) => {
|
|
29
|
+
const position = col.pinned ?? 'center';
|
|
30
|
+
if (!acc[position]) {
|
|
31
|
+
acc[position] = [];
|
|
32
|
+
}
|
|
33
|
+
acc[position].push(col);
|
|
34
|
+
return acc;
|
|
35
|
+
}, {});
|
|
36
|
+
const positions = columns.map((c) => c.pinned ?? 'center');
|
|
37
|
+
validatePinnedColumns(positions);
|
|
38
|
+
return {
|
|
39
|
+
sections: [
|
|
40
|
+
{ position: 'left', columns: groups.left },
|
|
41
|
+
{ position: 'center', columns: groups.center },
|
|
42
|
+
{ position: 'right', columns: groups.right },
|
|
43
|
+
],
|
|
44
|
+
};
|
|
45
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './getColumnSections';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './getColumnSections';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './syncRowsHeight';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './syncRowsHeight';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Синхронизирует высоту строк DataGrid на основе высоты их содержимого.
|
|
3
|
+
* Каждая строка устанавливает высоту равной максимальной высоте всех своих ячеек.
|
|
4
|
+
*/
|
|
5
|
+
export const syncRowsHeight = (rowsMap) => {
|
|
6
|
+
rowsMap.forEach((elements) => {
|
|
7
|
+
let maxHeight = 0;
|
|
8
|
+
elements.forEach((el) => {
|
|
9
|
+
el.style.height = '';
|
|
10
|
+
});
|
|
11
|
+
elements.forEach((el) => {
|
|
12
|
+
const height = el.offsetHeight;
|
|
13
|
+
if (height > maxHeight) {
|
|
14
|
+
maxHeight = height;
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
elements.forEach((el) => {
|
|
18
|
+
el.style.height = `${maxHeight}px`;
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useMemo, useRef, useState, } from 'react';
|
|
2
2
|
import { Variant } from '../../DataGrid/enums';
|
|
3
|
-
import { getGridTemplateColumns } from '../../DataGrid/
|
|
3
|
+
import { getGridTemplateColumns } from '../../DataGrid/utils';
|
|
4
4
|
import { useToggle } from '../../useToggle';
|
|
5
5
|
import { prop } from '../../utils/prop';
|
|
6
6
|
import { uniqueBy } from '../../utils/uniqueBy';
|
|
@@ -1,99 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type { Variant } from '../enums';
|
|
3
|
-
import type { CellValue, DataGridColumns, DataGridRowOptions } from '../types';
|
|
4
|
-
export type BodyProps<TData extends Record<string, CellValue>> = {
|
|
5
|
-
/**
|
|
6
|
-
* Конфигурация колонок для таблицы
|
|
7
|
-
*/
|
|
8
|
-
columns: DataGridColumns<TData>[];
|
|
9
|
-
/**
|
|
10
|
-
* Поле, которое будет использоваться в качестве ключа
|
|
11
|
-
*/
|
|
12
|
-
keyId: keyof TData;
|
|
13
|
-
/**
|
|
14
|
-
* Конфигурация ширины колонок
|
|
15
|
-
*/
|
|
16
|
-
gridColumns: string;
|
|
17
|
-
/**
|
|
18
|
-
* Если true, показывается анимация загрузки
|
|
19
|
-
*/
|
|
20
|
-
isLoading?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Флаг состояния ошибки
|
|
23
|
-
*/
|
|
24
|
-
isError?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Текст ошибки
|
|
27
|
-
*/
|
|
28
|
-
errorMsg?: string;
|
|
29
|
-
/**
|
|
30
|
-
* Идентификатор активного элемента массива rows. Выделяет активную строку в таблице
|
|
31
|
-
*/
|
|
32
|
-
activeRowId?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Если true, то дерево будет раскрыто по умолчанию
|
|
35
|
-
* @default 'false'
|
|
36
|
-
*/
|
|
37
|
-
isInitialExpanded: boolean;
|
|
38
|
-
/**
|
|
39
|
-
* Уровень раскрытия дерева по умолчанию, при isInitialExpanded=true
|
|
40
|
-
*/
|
|
41
|
-
expandedLevel: number;
|
|
42
|
-
/**
|
|
43
|
-
* Количество отображаемых по умолчанию дочерних элементов
|
|
44
|
-
*/
|
|
45
|
-
initialVisibleChildrenCount: number;
|
|
46
|
-
/**
|
|
47
|
-
* Номер колонки, в которой будет расположена кнопка "Показать все"
|
|
48
|
-
* Работает только для `variant="subrows"`
|
|
49
|
-
*/
|
|
50
|
-
moreButtonColumnPosition: number;
|
|
51
|
-
/**
|
|
52
|
-
* Если false, кнопка разворачивания элементов не показывается
|
|
53
|
-
* Работает только для `variant="subrows"`
|
|
54
|
-
*/
|
|
55
|
-
isVisibleCollapseButton: boolean;
|
|
56
|
-
/**
|
|
57
|
-
* Если true, то будет отображаться чекбокс для выбора элемента
|
|
58
|
-
*/
|
|
59
|
-
isSelectable?: boolean;
|
|
60
|
-
/**
|
|
61
|
-
* Массив выбранных строк
|
|
62
|
-
*/
|
|
63
|
-
selectedRows?: TData[];
|
|
64
|
-
/**
|
|
65
|
-
* Массив данных для отображения
|
|
66
|
-
*/
|
|
67
|
-
rows: Array<TData & {
|
|
68
|
-
options?: DataGridRowOptions<TData>;
|
|
69
|
-
}>;
|
|
70
|
-
/**
|
|
71
|
-
* Вариант отображения вложенных элементов
|
|
72
|
-
*/
|
|
73
|
-
variant: `${Variant}`;
|
|
74
|
-
/**
|
|
75
|
-
* Используется для отображения переданного кол-ва строк при отсутствии данных
|
|
76
|
-
*/
|
|
77
|
-
minDisplayRows: number;
|
|
78
|
-
/**
|
|
79
|
-
* Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
|
|
80
|
-
*/
|
|
81
|
-
emptyCellValue?: ReactNode;
|
|
82
|
-
/**
|
|
83
|
-
* Используется для отображения placeholder при отсутствии данных в таблице
|
|
84
|
-
*/
|
|
85
|
-
noDataPlaceholder?: ReactNode;
|
|
86
|
-
/**
|
|
87
|
-
* Обработчик выбора строки
|
|
88
|
-
*/
|
|
89
|
-
onSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
|
|
90
|
-
/**
|
|
91
|
-
* Функция обработки нажатия на кнопку "Повторить запрос"
|
|
92
|
-
*/
|
|
93
|
-
onRetry: () => void;
|
|
94
|
-
/**
|
|
95
|
-
* Обработчик клика строки таблицы
|
|
96
|
-
*/
|
|
97
|
-
onRowClick?: (row: TData) => void;
|
|
98
|
-
};
|
|
1
|
+
import type { BodyProps } from './types';
|
|
99
2
|
export declare const Body: <TData extends Record<string, unknown>>(props: BodyProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,31 +4,19 @@ exports.Body = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const ConfigProvider_1 = require("../../ConfigProvider");
|
|
7
|
-
const ContentState_1 = require("../../ContentState");
|
|
8
|
-
const classNames_1 = require("../../utils/classNames");
|
|
9
|
-
const constants_1 = require("../constants");
|
|
10
7
|
const Row_1 = require("../Row");
|
|
11
8
|
const RowContext_1 = require("../Row/RowContext");
|
|
12
9
|
const styles_1 = require("./styles");
|
|
13
|
-
const useLogic_1 = require("./useLogic");
|
|
14
10
|
const INITIAL_LEVEL = 0;
|
|
15
11
|
const Body = (props) => {
|
|
16
|
-
const {
|
|
17
|
-
const { isNoData, contentStateProps } = (0, useLogic_1.useLogic)(props);
|
|
12
|
+
const { components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
|
|
18
13
|
const disableMinHeight = components?.dataGrid?.defaultProps?.disableMinHeight;
|
|
19
|
-
const { rows, selectedRows = [],
|
|
14
|
+
const { rows, selectedRows = [], minDisplayRows, keyId, noDataPlaceholder, className, ...rowProps } = props;
|
|
20
15
|
const renderedRows = rows.map(({ children, options, ...row }) => {
|
|
21
16
|
const rowId = row[keyId];
|
|
22
17
|
const isSelected = Boolean(selectedRows?.find((selectedRow) => selectedRow[keyId] === rowId));
|
|
23
18
|
return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { children: (0, jsx_runtime_1.jsx)(Row_1.Row, { row: row, selectedRows: selectedRows, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, ...rowProps }, rowId) }, rowId));
|
|
24
19
|
});
|
|
25
|
-
return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className:
|
|
26
|
-
[constants_1.dataGridClassnames.bodyEmpty]: isNoData,
|
|
27
|
-
}), "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, errorState: {
|
|
28
|
-
imgAlt: 'Что-то пошло не так',
|
|
29
|
-
errorList: [errorMsg || ''],
|
|
30
|
-
imgSrc: imagesMap.defaultErrorImgSrc,
|
|
31
|
-
onRetry,
|
|
32
|
-
}, isSmoothLoading: false, children: rows.length ? renderedRows : noDataPlaceholder }) }));
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$minDisplayRows": minDisplayRows, "$disableMinHeight": disableMinHeight, children: rows.length ? renderedRows : noDataPlaceholder }));
|
|
33
21
|
};
|
|
34
22
|
exports.Body = Body;
|