@join-x5/react-data-grid 1.5.2 → 1.6.0-rc
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/dist/DataGrid.es.js +50 -48
- package/dist/DataGrid.es.js.map +1 -1
- package/dist/DataGridContext.d.ts +1 -1
- package/dist/DataGridContext.es.js.map +1 -1
- package/dist/TableCell/hook.es.js +5 -4
- package/dist/TableCell/hook.es.js.map +1 -1
- package/dist/TableCell/index.es.js +98 -96
- package/dist/TableCell/index.es.js.map +1 -1
- package/dist/TableCell/types.d.ts +5 -0
- package/dist/TableHeadCell/index.es.js +86 -86
- package/dist/TableHeadCell/index.es.js.map +1 -1
- package/dist/TableInputCell/hook.d.ts +2 -0
- package/dist/TableRow/index.es.js +5 -5
- package/dist/TableRow/index.es.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +8 -8
package/dist/DataGrid.es.js
CHANGED
|
@@ -1,47 +1,48 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as k, jsxs as
|
|
3
|
-
import { useEffect as
|
|
2
|
+
import { jsx as k, jsxs as H } from "@emotion/react/jsx-runtime";
|
|
3
|
+
import { useEffect as N } from "react";
|
|
4
4
|
import { useReactTable as V, getExpandedRowModel as I, getCoreRowModel as J } from "@tanstack/react-table";
|
|
5
5
|
import { forwardRef as K } from "@join-x5/react-theme";
|
|
6
6
|
import { DataGridTable as L } from "./Table/index.es.js";
|
|
7
|
-
import { DataGridContextProvider as
|
|
8
|
-
import { getDataGridTableHead as
|
|
9
|
-
import { getDataGridTableBody as
|
|
10
|
-
import { getDataGridTableBodyVirtual as
|
|
11
|
-
import { useDataGridColumnSettings as
|
|
12
|
-
const
|
|
7
|
+
import { DataGridContextProvider as O } from "./DataGridContext.es.js";
|
|
8
|
+
import { getDataGridTableHead as Q } from "./TableHead/index.es.js";
|
|
9
|
+
import { getDataGridTableBody as U } from "./TableBody/DataGridTableBody.es.js";
|
|
10
|
+
import { getDataGridTableBodyVirtual as W } from "./TableBody/DataGridTableBodyVirtual.es.js";
|
|
11
|
+
import { useDataGridColumnSettings as X } from "./hook.es.js";
|
|
12
|
+
const ne = K((o, p) => {
|
|
13
13
|
const {
|
|
14
14
|
qa: r = "datagrid",
|
|
15
15
|
isBordered: u,
|
|
16
16
|
isMultiline: g,
|
|
17
17
|
isCombined: f,
|
|
18
18
|
isShadowed: b,
|
|
19
|
-
|
|
19
|
+
isNoFocus: w,
|
|
20
|
+
size: h,
|
|
20
21
|
width: a,
|
|
21
|
-
textAlign:
|
|
22
|
-
writingMode:
|
|
23
|
-
userSelect:
|
|
24
|
-
wordBreak:
|
|
25
|
-
whiteSpace:
|
|
26
|
-
cellProps:
|
|
27
|
-
headCellProps:
|
|
22
|
+
textAlign: P,
|
|
23
|
+
writingMode: x,
|
|
24
|
+
userSelect: C,
|
|
25
|
+
wordBreak: M,
|
|
26
|
+
whiteSpace: R,
|
|
27
|
+
cellProps: y,
|
|
28
|
+
headCellProps: D,
|
|
28
29
|
rowProps: i,
|
|
29
30
|
bodyProps: n,
|
|
30
|
-
headProps:
|
|
31
|
+
headProps: G,
|
|
31
32
|
virtualize: d,
|
|
32
33
|
wrapperRef: l,
|
|
33
|
-
columns:
|
|
34
|
-
data:
|
|
34
|
+
columns: S,
|
|
35
|
+
data: T,
|
|
35
36
|
tableProps: s,
|
|
36
37
|
setTable: m,
|
|
37
|
-
columnSettings:
|
|
38
|
-
components:
|
|
39
|
-
children:
|
|
40
|
-
verticalAlign:
|
|
38
|
+
columnSettings: B,
|
|
39
|
+
components: c,
|
|
40
|
+
children: v,
|
|
41
|
+
verticalAlign: z = o.isMultiline ? "top" : "center",
|
|
41
42
|
...t
|
|
42
|
-
} = o,
|
|
43
|
-
columns:
|
|
44
|
-
data:
|
|
43
|
+
} = o, E = X(B, s), e = V({
|
|
44
|
+
columns: S,
|
|
45
|
+
data: T,
|
|
45
46
|
manualSorting: !0,
|
|
46
47
|
manualFiltering: !0,
|
|
47
48
|
manualPagination: !0,
|
|
@@ -49,23 +50,24 @@ const ie = K((o, c) => {
|
|
|
49
50
|
getCoreRowModel: J(),
|
|
50
51
|
getExpandedRowModel: I(),
|
|
51
52
|
...s,
|
|
52
|
-
state:
|
|
53
|
-
}),
|
|
54
|
-
size:
|
|
55
|
-
verticalAlign:
|
|
53
|
+
state: E
|
|
54
|
+
}), j = {
|
|
55
|
+
size: h,
|
|
56
|
+
verticalAlign: z,
|
|
56
57
|
isBordered: u,
|
|
57
58
|
isMultiline: g,
|
|
58
59
|
isCombined: f,
|
|
59
60
|
isShadowed: b,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
isNoFocus: w,
|
|
62
|
+
textAlign: P,
|
|
63
|
+
writingMode: x,
|
|
64
|
+
userSelect: C,
|
|
65
|
+
wordBreak: M,
|
|
66
|
+
whiteSpace: R,
|
|
67
|
+
cellProps: y,
|
|
68
|
+
headCellProps: D,
|
|
67
69
|
qa: r
|
|
68
|
-
},
|
|
70
|
+
}, q = {
|
|
69
71
|
...t,
|
|
70
72
|
table: e,
|
|
71
73
|
style: a ? {
|
|
@@ -73,28 +75,28 @@ const ie = K((o, c) => {
|
|
|
73
75
|
...t.style
|
|
74
76
|
} : t.style,
|
|
75
77
|
"data-qa": r
|
|
76
|
-
},
|
|
78
|
+
}, A = Q(e, G), F = d && l ? W({
|
|
77
79
|
table: e,
|
|
78
|
-
components:
|
|
80
|
+
components: c,
|
|
79
81
|
rowProps: i,
|
|
80
82
|
virtualize: d,
|
|
81
83
|
wrapperRef: l,
|
|
82
84
|
...n
|
|
83
|
-
}) :
|
|
85
|
+
}) : U({
|
|
84
86
|
table: e,
|
|
85
|
-
components:
|
|
87
|
+
components: c,
|
|
86
88
|
rowProps: i,
|
|
87
89
|
...n
|
|
88
90
|
});
|
|
89
|
-
return
|
|
91
|
+
return N(() => {
|
|
90
92
|
m?.(e);
|
|
91
|
-
}, [e, m]), /* @__PURE__ */ k(
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
}, [e, m]), /* @__PURE__ */ k(O, { ...j, children: /* @__PURE__ */ H(L, { ref: p, ...q, children: [
|
|
94
|
+
A,
|
|
95
|
+
v,
|
|
96
|
+
F
|
|
95
97
|
] }) });
|
|
96
98
|
});
|
|
97
99
|
export {
|
|
98
|
-
|
|
100
|
+
ne as DataGrid
|
|
99
101
|
};
|
|
100
102
|
//# sourceMappingURL=DataGrid.es.js.map
|
package/dist/DataGrid.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.es.js","sources":["../src/DataGrid.tsx"],"sourcesContent":["'use client';\n\nimport {useEffect} from 'react';\nimport {getCoreRowModel, getExpandedRowModel, useReactTable} from '@tanstack/react-table';\n\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {DataGridTable} from 'Table';\n\nimport {DataGridContextProvider} from 'DataGridContext';\nimport {getDataGridTableHead} from 'TableHead';\nimport {getDataGridTableBody, getDataGridTableBodyVirtual} from 'TableBody';\n\nimport {useDataGridColumnSettings} from './hook';\n\nimport type {FRC} from '@join-x5/react-theme';\nimport type {DataGridProps} from './types';\n\nexport const DataGrid: FRC<HTMLTableElement, DataGridProps> = forwardRef((props, ref) => {\n const {\n qa = 'datagrid',\n\n isBordered,\n isMultiline,\n isCombined,\n isShadowed,\n\n size,\n width,\n textAlign,\n writingMode,\n userSelect,\n wordBreak,\n whiteSpace,\n\n cellProps,\n headCellProps,\n rowProps,\n bodyProps,\n headProps,\n virtualize,\n wrapperRef,\n\n columns,\n data,\n tableProps,\n setTable,\n columnSettings,\n components,\n children,\n\n verticalAlign = props.isMultiline ? 'top' : 'center',\n\n ...rest\n } = props;\n\n const state = useDataGridColumnSettings(columnSettings, tableProps);\n\n const table = useReactTable({\n columns,\n data,\n\n manualSorting: true,\n manualFiltering: true,\n manualPagination: true,\n columnResizeMode: 'onChange',\n getCoreRowModel: getCoreRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n\n ...tableProps,\n\n state,\n });\n\n const context = {\n size,\n verticalAlign,\n isBordered,\n isMultiline,\n isCombined,\n isShadowed,\n textAlign,\n writingMode,\n userSelect,\n wordBreak,\n whiteSpace,\n\n cellProps,\n headCellProps,\n qa,\n };\n\n const tableComponentProps = {\n ...rest,\n\n table,\n style: width ? {width, ...rest.style} : rest.style,\n 'data-qa': qa,\n };\n\n const head = getDataGridTableHead(table, headProps);\n const body =\n virtualize && wrapperRef\n ? getDataGridTableBodyVirtual({table, components, rowProps, virtualize, wrapperRef, ...bodyProps})\n : getDataGridTableBody({table, components, rowProps, ...bodyProps});\n\n useEffect(() => {\n setTable?.(table);\n }, [table, setTable]);\n\n return (\n <DataGridContextProvider {...context}>\n <DataGridTable ref={ref} {...tableComponentProps}>\n {head}\n {children}\n {body}\n </DataGridTable>\n </DataGridContextProvider>\n );\n});\n"],"names":["isBordered","isMultiline","isCombined","isShadowed","size","width","textAlign","writingMode","userSelect","wordBreak","whiteSpace","cellProps","headCellProps","rowProps","bodyProps","headProps","virtualize","wrapperRef","columns","data","tableProps","setTable","columnSettings","components","children","rest","getCoreRowModel","getExpandedRowModel","state","verticalAlign","qa","table","style","useEffect","head","body"],"mappings":";;;;;;;;;;;AAkBO;AACL;AAAM;AACC;AAELA;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAE4C;AAEzCC;AAKuB;AAC1BP;AACAC;AAEe;AACE;AACC;AACA;AACDO;AACIC;AAElBP;AAEHQ;AAGc;AACdxB;AACAyB;
|
|
1
|
+
{"version":3,"file":"DataGrid.es.js","sources":["../src/DataGrid.tsx"],"sourcesContent":["'use client';\n\nimport {useEffect} from 'react';\nimport {getCoreRowModel, getExpandedRowModel, useReactTable} from '@tanstack/react-table';\n\nimport {forwardRef} from '@join-x5/react-theme';\n\nimport {DataGridTable} from 'Table';\n\nimport {DataGridContextProvider} from 'DataGridContext';\nimport {getDataGridTableHead} from 'TableHead';\nimport {getDataGridTableBody, getDataGridTableBodyVirtual} from 'TableBody';\n\nimport {useDataGridColumnSettings} from './hook';\n\nimport type {FRC} from '@join-x5/react-theme';\nimport type {DataGridProps} from './types';\n\nexport const DataGrid: FRC<HTMLTableElement, DataGridProps> = forwardRef((props, ref) => {\n const {\n qa = 'datagrid',\n\n isBordered,\n isMultiline,\n isCombined,\n isShadowed,\n isNoFocus,\n\n size,\n width,\n textAlign,\n writingMode,\n userSelect,\n wordBreak,\n whiteSpace,\n\n cellProps,\n headCellProps,\n rowProps,\n bodyProps,\n headProps,\n virtualize,\n wrapperRef,\n\n columns,\n data,\n tableProps,\n setTable,\n columnSettings,\n components,\n children,\n\n verticalAlign = props.isMultiline ? 'top' : 'center',\n\n ...rest\n } = props;\n\n const state = useDataGridColumnSettings(columnSettings, tableProps);\n\n const table = useReactTable({\n columns,\n data,\n\n manualSorting: true,\n manualFiltering: true,\n manualPagination: true,\n columnResizeMode: 'onChange',\n getCoreRowModel: getCoreRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n\n ...tableProps,\n\n state,\n });\n\n const context = {\n size,\n verticalAlign,\n isBordered,\n isMultiline,\n isCombined,\n isShadowed,\n isNoFocus,\n textAlign,\n writingMode,\n userSelect,\n wordBreak,\n whiteSpace,\n\n cellProps,\n headCellProps,\n qa,\n };\n\n const tableComponentProps = {\n ...rest,\n\n table,\n style: width ? {width, ...rest.style} : rest.style,\n 'data-qa': qa,\n };\n\n const head = getDataGridTableHead(table, headProps);\n const body =\n virtualize && wrapperRef\n ? getDataGridTableBodyVirtual({table, components, rowProps, virtualize, wrapperRef, ...bodyProps})\n : getDataGridTableBody({table, components, rowProps, ...bodyProps});\n\n useEffect(() => {\n setTable?.(table);\n }, [table, setTable]);\n\n return (\n <DataGridContextProvider {...context}>\n <DataGridTable ref={ref} {...tableComponentProps}>\n {head}\n {children}\n {body}\n </DataGridTable>\n </DataGridContextProvider>\n );\n});\n"],"names":["isBordered","isMultiline","isCombined","isShadowed","isNoFocus","size","width","textAlign","writingMode","userSelect","wordBreak","whiteSpace","cellProps","headCellProps","rowProps","bodyProps","headProps","virtualize","wrapperRef","columns","data","tableProps","setTable","columnSettings","components","children","rest","getCoreRowModel","getExpandedRowModel","state","verticalAlign","qa","table","style","useEffect","head","body"],"mappings":";;;;;;;;;;;AAkBO;AACL;AAAM;AACC;AAELA;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AAE4C;AAEzCC;AAKuB;AAC1BP;AACAC;AAEe;AACE;AACC;AACA;AACDO;AACIC;AAElBP;AAEHQ;AAGc;AACdxB;AACAyB;AACA9B;AACAC;AACAC;AACAC;AACAC;AACAG;AACAC;AACAC;AACAC;AACAC;AAEAC;AACAC;AACAkB;AAG0B;AACvBL;AAEHM;AACe;AAAC1B;AAAe2B;AAAcA;AAClCF;AAMqB;AAACC;AAAOR;AAAYV;AAAUG;AAAYC;AAAeH;AAChE;AAACiB;AAAOR;AAAYV;AAAaC;AAE5DmB;AACEZ;AAAgB;AAMXa;AAAAA;AACAV;AACAW;AAIT;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PropsWithChildren } from '@join-x5/react-theme';
|
|
2
2
|
import { DataGridProps } from 'types';
|
|
3
|
-
type CommonProps = Pick<DataGridProps, 'isMultiline' | 'isShadowed' | 'isCombined' | 'qa' | 'isBordered' | 'size' | 'verticalAlign' | 'textAlign' | 'writingMode' | 'userSelect' | 'wordBreak' | 'whiteSpace' | 'cellProps' | 'headCellProps'>;
|
|
3
|
+
type CommonProps = Pick<DataGridProps, 'isMultiline' | 'isShadowed' | 'isNoFocus' | 'isCombined' | 'qa' | 'isBordered' | 'size' | 'verticalAlign' | 'textAlign' | 'writingMode' | 'userSelect' | 'wordBreak' | 'whiteSpace' | 'cellProps' | 'headCellProps'>;
|
|
4
4
|
type DataGridContextProps = {
|
|
5
5
|
activeCell: string | null;
|
|
6
6
|
setActiveCell: (newActiveCell: string | null) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridContext.es.js","sources":["../src/DataGridContext.tsx"],"sourcesContent":["'use client';\n\nimport {createContext, useState} from 'react';\n\nimport type {PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridProps} from 'types';\n\ntype CommonProps = Pick<\n DataGridProps,\n | 'isMultiline'\n | 'isShadowed'\n | 'isCombined'\n | 'qa'\n | 'isBordered'\n | 'size'\n | 'verticalAlign'\n | 'textAlign'\n | 'writingMode'\n | 'userSelect'\n | 'wordBreak'\n | 'whiteSpace'\n | 'cellProps'\n | 'headCellProps'\n>;\n\ntype DataGridContextProps = {\n activeCell: string | null;\n setActiveCell: (newActiveCell: string | null) => void;\n} & CommonProps;\n\nexport const DataGridContext = createContext<DataGridContextProps>({\n activeCell: null,\n setActiveCell: () => {},\n});\n\nexport const DataGridContextProvider: React.FC<PropsWithChildren & CommonProps> = ({children, ...rest}) => {\n const [activeCell, setActiveCell] = useState<string | null>(null);\n\n return <DataGridContext.Provider value={{activeCell, setActiveCell, ...rest}}>{children}</DataGridContext.Provider>;\n};\n"],"names":["children","activeCell","setActiveCell","rest"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"DataGridContext.es.js","sources":["../src/DataGridContext.tsx"],"sourcesContent":["'use client';\n\nimport {createContext, useState} from 'react';\n\nimport type {PropsWithChildren} from '@join-x5/react-theme';\nimport type {DataGridProps} from 'types';\n\ntype CommonProps = Pick<\n DataGridProps,\n | 'isMultiline'\n | 'isShadowed'\n | 'isNoFocus'\n | 'isCombined'\n | 'qa'\n | 'isBordered'\n | 'size'\n | 'verticalAlign'\n | 'textAlign'\n | 'writingMode'\n | 'userSelect'\n | 'wordBreak'\n | 'whiteSpace'\n | 'cellProps'\n | 'headCellProps'\n>;\n\ntype DataGridContextProps = {\n activeCell: string | null;\n setActiveCell: (newActiveCell: string | null) => void;\n} & CommonProps;\n\nexport const DataGridContext = createContext<DataGridContextProps>({\n activeCell: null,\n setActiveCell: () => {},\n});\n\nexport const DataGridContextProvider: React.FC<PropsWithChildren & CommonProps> = ({children, ...rest}) => {\n const [activeCell, setActiveCell] = useState<string | null>(null);\n\n return <DataGridContext.Provider value={{activeCell, setActiveCell, ...rest}}>{children}</DataGridContext.Provider>;\n};\n"],"names":["children","activeCell","setActiveCell","rest"],"mappings":";;;AA+BO;AAA4D;AACrD;AACS;AACvB;AAEmF;AAACA;AAAiB;AACnG;AAEA;AAAwC;AAACC;AAAYC;AAAkBC;AACzE;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useContext as
|
|
2
|
+
import { useContext as n } from "react";
|
|
3
3
|
import { ColumnArea as r } from "@join-x5/react-data-grid-settings";
|
|
4
4
|
import { DataGridContext as l } from "../DataGridContext.es.js";
|
|
5
5
|
const a = (t, e) => {
|
|
@@ -14,11 +14,12 @@ const a = (t, e) => {
|
|
|
14
14
|
return r.Default;
|
|
15
15
|
})(), i && (e.style ??= {}, i === "left" ? (e.style.left = `${t.getStart("left")}px`, e.isLastFixed = t.getIsLastColumn("left")) : (e.style.right = `${t.getAfter("right")}px`, e.isLastFixed = t.getIsFirstColumn("right")));
|
|
16
16
|
}, g = (t) => {
|
|
17
|
-
const e =
|
|
17
|
+
const e = n(l), i = typeof e.isMultiline == "boolean" ? e.isMultiline : e.isMultiline?.(t), o = `calc(var(--header-${t.column?.id}-size) * 1px)`, s = {
|
|
18
18
|
isMultiline: i,
|
|
19
19
|
qa: e.qa,
|
|
20
20
|
isBordered: e.isBordered,
|
|
21
21
|
isShadowed: e.isShadowed,
|
|
22
|
+
isNoFocus: e.isNoFocus,
|
|
22
23
|
size: e.size,
|
|
23
24
|
verticalAlign: e.verticalAlign,
|
|
24
25
|
writingMode: e.writingMode,
|
|
@@ -28,8 +29,8 @@ const a = (t, e) => {
|
|
|
28
29
|
isRowSelected: t.row.getIsSelected(),
|
|
29
30
|
isResizing: t.column.getIsResizing(),
|
|
30
31
|
style: {
|
|
31
|
-
width:
|
|
32
|
-
maxWidth:
|
|
32
|
+
width: o,
|
|
33
|
+
maxWidth: o
|
|
33
34
|
}
|
|
34
35
|
};
|
|
35
36
|
return a(t.column, s), e.cellProps && Object.assign(s, typeof e.cellProps == "function" ? e.cellProps(t) : e.cellProps), t.column.columnDef.meta?.cellProps && Object.assign(s, t.column.columnDef.meta?.cellProps), s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hook.es.js","sources":["../../src/TableCell/hook.ts"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\n\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {DataGridContext} from 'DataGridContext';\n\nimport type {Column, Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {TableCellProps} from './types';\n\nexport const areaProps = (column: Column<unknown>, props: TableCellProps): void => {\n const isPinned = column.getIsPinned();\n\n props.columnArea = (() => {\n switch (column.getIsPinned()) {\n case 'left':\n return ColumnArea.FixedLeft;\n case 'right':\n return ColumnArea.FixedRight;\n }\n\n return ColumnArea.Default;\n })();\n\n if (!isPinned) {\n return;\n }\n\n props.style ??= {};\n\n if (isPinned === 'left') {\n props.style.left = `${column.getStart('left')}px`;\n props.isLastFixed = column.getIsLastColumn('left');\n } else {\n props.style.right = `${column.getAfter('right')}px`;\n props.isLastFixed = column.getIsFirstColumn('right');\n }\n};\n\nexport const useDataGridTableCell = (cell: ReactTableCell<unknown, unknown>) => {\n const context = useContext(DataGridContext);\n\n const isMultiline = typeof context.isMultiline === 'boolean' ? context.isMultiline : context.isMultiline?.(cell);\n const width = `calc(var(--header-${cell.column?.id}-size) * 1px)`;\n\n const resultProps: TableCellProps = {\n isMultiline,\n\n qa: context.qa,\n isBordered: context.isBordered,\n isShadowed: context.isShadowed,\n size: context.size,\n verticalAlign: context.verticalAlign,\n writingMode: context.writingMode,\n userSelect: context.userSelect,\n wordBreak: context.wordBreak,\n whiteSpace: context.whiteSpace,\n\n isRowSelected: cell.row.getIsSelected(),\n isResizing: cell.column.getIsResizing(),\n\n style: {\n width,\n maxWidth: width,\n },\n };\n\n areaProps(cell.column, resultProps);\n\n if (context.cellProps) {\n Object.assign(resultProps, typeof context.cellProps === 'function' ? context.cellProps(cell) : context.cellProps);\n }\n\n if (cell.column.columnDef.meta?.cellProps) {\n Object.assign(resultProps, cell.column.columnDef.meta?.cellProps);\n }\n\n return resultProps;\n};\n"],"names":["FixedLeft","FixedRight","Default","isMultiline","qa","isBordered","isShadowed","size","verticalAlign","writingMode","userSelect","wordBreak","whiteSpace","getIsSelected","getIsResizing","width","areaProps"],"mappings":";;;;AAWO;AACL;AAaA;AAVE;AAA2B;AAEvB;AAAkBA;AAElB;AAAkBC;AAGtB;AAAkBC;AAgBtB;AAGE;AAKoC;AAClCC;AAEYC;AACQC;AACAC;
|
|
1
|
+
{"version":3,"file":"hook.es.js","sources":["../../src/TableCell/hook.ts"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\n\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {DataGridContext} from 'DataGridContext';\n\nimport type {Column, Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {TableCellProps} from './types';\n\nexport const areaProps = (column: Column<unknown>, props: TableCellProps): void => {\n const isPinned = column.getIsPinned();\n\n props.columnArea = (() => {\n switch (column.getIsPinned()) {\n case 'left':\n return ColumnArea.FixedLeft;\n case 'right':\n return ColumnArea.FixedRight;\n }\n\n return ColumnArea.Default;\n })();\n\n if (!isPinned) {\n return;\n }\n\n props.style ??= {};\n\n if (isPinned === 'left') {\n props.style.left = `${column.getStart('left')}px`;\n props.isLastFixed = column.getIsLastColumn('left');\n } else {\n props.style.right = `${column.getAfter('right')}px`;\n props.isLastFixed = column.getIsFirstColumn('right');\n }\n};\n\nexport const useDataGridTableCell = (cell: ReactTableCell<unknown, unknown>) => {\n const context = useContext(DataGridContext);\n\n const isMultiline = typeof context.isMultiline === 'boolean' ? context.isMultiline : context.isMultiline?.(cell);\n const width = `calc(var(--header-${cell.column?.id}-size) * 1px)`;\n\n const resultProps: TableCellProps = {\n isMultiline,\n\n qa: context.qa,\n isBordered: context.isBordered,\n isShadowed: context.isShadowed,\n isNoFocus: context.isNoFocus,\n size: context.size,\n verticalAlign: context.verticalAlign,\n writingMode: context.writingMode,\n userSelect: context.userSelect,\n wordBreak: context.wordBreak,\n whiteSpace: context.whiteSpace,\n\n isRowSelected: cell.row.getIsSelected(),\n isResizing: cell.column.getIsResizing(),\n\n style: {\n width,\n maxWidth: width,\n },\n };\n\n areaProps(cell.column, resultProps);\n\n if (context.cellProps) {\n Object.assign(resultProps, typeof context.cellProps === 'function' ? context.cellProps(cell) : context.cellProps);\n }\n\n if (cell.column.columnDef.meta?.cellProps) {\n Object.assign(resultProps, cell.column.columnDef.meta?.cellProps);\n }\n\n return resultProps;\n};\n"],"names":["FixedLeft","FixedRight","Default","isMultiline","qa","isBordered","isShadowed","isNoFocus","size","verticalAlign","writingMode","userSelect","wordBreak","whiteSpace","getIsSelected","getIsResizing","width","areaProps"],"mappings":";;;;AAWO;AACL;AAaA;AAVE;AAA2B;AAEvB;AAAkBA;AAElB;AAAkBC;AAGtB;AAAkBC;AAgBtB;AAGE;AAKoC;AAClCC;AAEYC;AACQC;AACAC;AACDC;AACLC;AACSC;AACFC;AACDC;AACDC;AACCC;AAEIC;AACAC;AAEjB;AACLC;AACUA;AAAAA;AAIdC;AAWF;;;;;"}
|