@join-x5/react-data-grid 1.4.0 → 1.4.1
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 +36 -36
- package/dist/DataGrid.es.js.map +1 -1
- package/dist/TableBody/DataGridTableBody.es.js +9 -9
- package/dist/TableBody/hook.es.js +12 -12
- package/dist/TableCell/hook.es.js +8 -9
- package/dist/TableCell/hook.es.js.map +1 -1
- package/dist/TableCell/index.es.js +120 -133
- package/dist/TableCell/index.es.js.map +1 -1
- package/dist/TableHeadCell/index.es.js +82 -83
- package/dist/TableHeadCell/index.es.js.map +1 -1
- package/dist/TableInputCell/date.es.js +29 -32
- package/dist/TableInputCell/date.es.js.map +1 -1
- package/dist/TableInputCell/dropdown.es.js +29 -32
- package/dist/TableInputCell/dropdown.es.js.map +1 -1
- package/dist/TableInputCell/hook.es.js +30 -33
- package/dist/TableInputCell/hook.es.js.map +1 -1
- package/dist/TableInputCell/text.es.js +39 -41
- package/dist/TableInputCell/text.es.js.map +1 -1
- package/dist/TableInputCell/textarea.es.js +38 -40
- package/dist/TableInputCell/textarea.es.js.map +1 -1
- package/dist/hook.es.js +14 -17
- package/dist/hook.es.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/package.json +11 -11
package/dist/DataGrid.es.js
CHANGED
|
@@ -9,36 +9,36 @@ import { getDataGridTableHead as N } from "./TableHead/index.es.js";
|
|
|
9
9
|
import { getDataGridTableBody as O } from "./TableBody/DataGridTableBody.es.js";
|
|
10
10
|
import { getDataGridTableBodyVirtual as Q } from "./TableBody/DataGridTableBodyVirtual.es.js";
|
|
11
11
|
import { useDataGridColumnSettings as U } from "./hook.es.js";
|
|
12
|
-
const ae = J((
|
|
12
|
+
const ae = J((o, c) => {
|
|
13
13
|
const {
|
|
14
|
-
qa:
|
|
14
|
+
qa: r = "datagrid",
|
|
15
15
|
isBordered: u,
|
|
16
16
|
isMultiline: g,
|
|
17
17
|
isShadowed: f,
|
|
18
18
|
size: w,
|
|
19
|
-
width:
|
|
20
|
-
textAlign:
|
|
21
|
-
writingMode:
|
|
19
|
+
width: a,
|
|
20
|
+
textAlign: b,
|
|
21
|
+
writingMode: h,
|
|
22
22
|
userSelect: P,
|
|
23
23
|
wordBreak: x,
|
|
24
24
|
whiteSpace: M,
|
|
25
25
|
cellProps: R,
|
|
26
26
|
headCellProps: y,
|
|
27
|
-
rowProps:
|
|
28
|
-
bodyProps:
|
|
27
|
+
rowProps: i,
|
|
28
|
+
bodyProps: l,
|
|
29
29
|
headProps: C,
|
|
30
|
-
virtualize:
|
|
31
|
-
wrapperRef:
|
|
30
|
+
virtualize: n,
|
|
31
|
+
wrapperRef: d,
|
|
32
32
|
columns: D,
|
|
33
33
|
data: G,
|
|
34
|
-
tableProps:
|
|
35
|
-
setTable:
|
|
34
|
+
tableProps: s,
|
|
35
|
+
setTable: m,
|
|
36
36
|
columnSettings: S,
|
|
37
37
|
components: p,
|
|
38
|
-
children:
|
|
39
|
-
verticalAlign:
|
|
40
|
-
...
|
|
41
|
-
} =
|
|
38
|
+
children: T,
|
|
39
|
+
verticalAlign: B = o.isMultiline ? "top" : "center",
|
|
40
|
+
...t
|
|
41
|
+
} = o, v = U(S, s), e = H({
|
|
42
42
|
columns: D,
|
|
43
43
|
data: G,
|
|
44
44
|
manualSorting: !0,
|
|
@@ -47,48 +47,48 @@ const ae = J((r, c) => {
|
|
|
47
47
|
columnResizeMode: "onChange",
|
|
48
48
|
getCoreRowModel: I(),
|
|
49
49
|
getExpandedRowModel: V(),
|
|
50
|
-
...
|
|
50
|
+
...s,
|
|
51
51
|
state: v
|
|
52
52
|
}), z = {
|
|
53
53
|
size: w,
|
|
54
|
-
verticalAlign:
|
|
54
|
+
verticalAlign: B,
|
|
55
55
|
isBordered: u,
|
|
56
56
|
isMultiline: g,
|
|
57
57
|
isShadowed: f,
|
|
58
|
-
textAlign:
|
|
59
|
-
writingMode:
|
|
58
|
+
textAlign: b,
|
|
59
|
+
writingMode: h,
|
|
60
60
|
userSelect: P,
|
|
61
61
|
wordBreak: x,
|
|
62
62
|
whiteSpace: M,
|
|
63
63
|
cellProps: R,
|
|
64
64
|
headCellProps: y,
|
|
65
|
-
qa:
|
|
65
|
+
qa: r
|
|
66
66
|
}, E = {
|
|
67
|
-
...
|
|
67
|
+
...t,
|
|
68
68
|
table: e,
|
|
69
|
-
style:
|
|
70
|
-
width:
|
|
71
|
-
...
|
|
72
|
-
} :
|
|
73
|
-
"data-qa":
|
|
74
|
-
}, j = N(e, C), q =
|
|
69
|
+
style: a ? {
|
|
70
|
+
width: a,
|
|
71
|
+
...t.style
|
|
72
|
+
} : t.style,
|
|
73
|
+
"data-qa": r
|
|
74
|
+
}, j = N(e, C), q = n && d ? Q({
|
|
75
75
|
table: e,
|
|
76
76
|
components: p,
|
|
77
|
-
rowProps:
|
|
78
|
-
virtualize:
|
|
79
|
-
wrapperRef:
|
|
80
|
-
...
|
|
77
|
+
rowProps: i,
|
|
78
|
+
virtualize: n,
|
|
79
|
+
wrapperRef: d,
|
|
80
|
+
...l
|
|
81
81
|
}) : O({
|
|
82
82
|
table: e,
|
|
83
83
|
components: p,
|
|
84
|
-
rowProps:
|
|
85
|
-
...
|
|
84
|
+
rowProps: i,
|
|
85
|
+
...l
|
|
86
86
|
});
|
|
87
87
|
return F(() => {
|
|
88
|
-
|
|
89
|
-
}, [e,
|
|
88
|
+
m?.(e);
|
|
89
|
+
}, [e, m]), /* @__PURE__ */ A(L, { ...z, children: /* @__PURE__ */ k(K, { ref: c, ...E, children: [
|
|
90
90
|
j,
|
|
91
|
-
|
|
91
|
+
T,
|
|
92
92
|
q
|
|
93
93
|
] }) });
|
|
94
94
|
});
|
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 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 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","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;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;AACA5B;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;
|
|
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 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 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","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;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;AACA5B;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,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as e } from "@emotion/react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import a from "@emotion/styled/base";
|
|
4
4
|
import { memo as m, useContext as I } from "react";
|
|
5
5
|
import { DataGridContext as R } from "../DataGridContext.es.js";
|
|
6
6
|
import { getDataGridTableRow as H } from "../TableRow/index.es.js";
|
|
7
7
|
function J() {
|
|
8
8
|
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
|
|
9
9
|
}
|
|
10
|
-
const Z = /* @__PURE__ */
|
|
10
|
+
const Z = /* @__PURE__ */ a("tbody", process.env.NODE_ENV === "production" ? {
|
|
11
11
|
target: "e1trj7ug0"
|
|
12
12
|
} : {
|
|
13
13
|
target: "e1trj7ug0",
|
|
@@ -24,18 +24,18 @@ const Z = /* @__PURE__ */ s("tbody", process.env.NODE_ENV === "production" ? {
|
|
|
24
24
|
table: t,
|
|
25
25
|
components: b,
|
|
26
26
|
rowProps: d,
|
|
27
|
-
...
|
|
28
|
-
} = c,
|
|
29
|
-
const
|
|
30
|
-
return u(G,
|
|
27
|
+
...n
|
|
28
|
+
} = c, i = I(R), l = t.getRowModel().rows, u = b?.row ?? H, g = l.map((G) => {
|
|
29
|
+
const s = typeof d == "function" ? d(l[G.index]) : d;
|
|
30
|
+
return u(G, s);
|
|
31
31
|
});
|
|
32
|
-
return /* @__PURE__ */ e(Z, { "data-qa": `${
|
|
33
|
-
}, r = m(o, (c, t) => c.table.options.data === t.table.options.data),
|
|
32
|
+
return /* @__PURE__ */ e(Z, { "data-qa": `${i.qa}-body`, ...n, children: g });
|
|
33
|
+
}, r = m(o, (c, t) => c.table.options.data === t.table.options.data), B = (c) => {
|
|
34
34
|
const b = c.table.getState().columnSizingInfo.isResizingColumn ? r : o;
|
|
35
35
|
return /* @__PURE__ */ e(b, { ...c });
|
|
36
36
|
};
|
|
37
37
|
export {
|
|
38
38
|
Z as TableBody,
|
|
39
|
-
|
|
39
|
+
B as getDataGridTableBody
|
|
40
40
|
};
|
|
41
41
|
//# sourceMappingURL=DataGridTableBody.es.js.map
|
|
@@ -5,21 +5,21 @@ import { DataGridContext as h } from "../DataGridContext.es.js";
|
|
|
5
5
|
import { getDataGridTableRow as y } from "../TableRow/index.es.js";
|
|
6
6
|
const v = (c) => {
|
|
7
7
|
const {
|
|
8
|
-
table:
|
|
9
|
-
components:
|
|
8
|
+
table: l,
|
|
9
|
+
components: u,
|
|
10
10
|
rowProps: e,
|
|
11
|
-
wrapperRef:
|
|
12
|
-
virtualize:
|
|
11
|
+
wrapperRef: r,
|
|
12
|
+
virtualize: n,
|
|
13
13
|
...m
|
|
14
|
-
} = c, p = x(h),
|
|
15
|
-
count:
|
|
14
|
+
} = c, p = x(h), s = l.getRowModel().rows, o = b({
|
|
15
|
+
count: s.length,
|
|
16
16
|
estimateSize: () => 40,
|
|
17
|
-
getScrollElement: () =>
|
|
17
|
+
getScrollElement: () => r.current,
|
|
18
18
|
measureElement: (t) => t.getBoundingClientRect().height,
|
|
19
19
|
overscan: 5,
|
|
20
|
-
...typeof
|
|
21
|
-
}), d =
|
|
22
|
-
const
|
|
20
|
+
...typeof n == "object" ? n : void 0
|
|
21
|
+
}), d = u?.row ?? y, f = (t) => o.measureElement(t), g = o.getVirtualItems().map((t) => {
|
|
22
|
+
const i = s[t.index], a = {
|
|
23
23
|
ref: f,
|
|
24
24
|
"data-index": t.index,
|
|
25
25
|
style: {
|
|
@@ -30,7 +30,7 @@ const v = (c) => {
|
|
|
30
30
|
transform: `translateY(${t.start}px)`
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
|
-
return e && Object.assign(
|
|
33
|
+
return e && Object.assign(a, typeof e == "function" ? e(i) : e), d(i, a);
|
|
34
34
|
}), w = {
|
|
35
35
|
"data-qa": `${p.qa}-body`,
|
|
36
36
|
style: {
|
|
@@ -38,7 +38,7 @@ const v = (c) => {
|
|
|
38
38
|
...m.style
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
|
-
return
|
|
41
|
+
return r.current || setTimeout(o.measure), {
|
|
42
42
|
containerProps: w,
|
|
43
43
|
child: g
|
|
44
44
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useContext as o } from "react";
|
|
3
3
|
import { ColumnArea as r } from "@join-x5/react-data-grid-settings";
|
|
4
|
-
import { DataGridContext as
|
|
5
|
-
const
|
|
4
|
+
import { DataGridContext as l } from "../DataGridContext.es.js";
|
|
5
|
+
const a = (t, e) => {
|
|
6
6
|
const i = t.getIsPinned();
|
|
7
7
|
e.columnArea = (() => {
|
|
8
8
|
switch (t.getIsPinned()) {
|
|
@@ -12,10 +12,9 @@ const g = (t, e) => {
|
|
|
12
12
|
return r.FixedRight;
|
|
13
13
|
}
|
|
14
14
|
return r.Default;
|
|
15
|
-
})(), i && (e.style
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
const e = o(d), i = typeof e.isMultiline == "boolean" ? e.isMultiline : (l = e.isMultiline) == null ? void 0 : l.call(e, t), n = `calc(var(--header-${(a = t.column) == null ? void 0 : a.id}-size) * 1px)`, s = {
|
|
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
|
+
}, u = (t) => {
|
|
17
|
+
const e = o(l), i = typeof e.isMultiline == "boolean" ? e.isMultiline : e.isMultiline?.(t), n = `calc(var(--header-${t.column?.id}-size) * 1px)`, s = {
|
|
19
18
|
isMultiline: i,
|
|
20
19
|
qa: e.qa,
|
|
21
20
|
isBordered: e.isBordered,
|
|
@@ -33,10 +32,10 @@ const g = (t, e) => {
|
|
|
33
32
|
maxWidth: n
|
|
34
33
|
}
|
|
35
34
|
};
|
|
36
|
-
return
|
|
35
|
+
return a(t.column, s), e.cellProps && Object.assign(s, typeof e.cellProps == "function" ? e.cellProps(t) : e.cellProps), s;
|
|
37
36
|
};
|
|
38
37
|
export {
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
a as areaProps,
|
|
39
|
+
u as useDataGridTableCell
|
|
41
40
|
};
|
|
42
41
|
//# sourceMappingURL=hook.es.js.map
|
|
@@ -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 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
|
|
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 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;AACNC;AACSC;AACFC;AACDC;AACDC;AACCC;AAEIC;AACAC;AAEjB;AACLC;AACUA;AAAAA;AAIdC;AAOF;;;;;"}
|