lecom-ui 5.4.19 → 5.4.21
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.
|
@@ -96,29 +96,18 @@ function DataTable({
|
|
|
96
96
|
const lastColumnFixed = rowsElem.length - 1 === rowElemIndex;
|
|
97
97
|
const lastRow = listRows.length - 1 === listRowIndex;
|
|
98
98
|
const currentElemIsTh = currentElem.tagName === "TH";
|
|
99
|
-
const hasTruncate = currentElem.querySelector(".truncate") !== null;
|
|
100
99
|
const boxShadowWidth = currentElemIsTh ? "-1.5px" : "-0.5px";
|
|
101
100
|
const boxShadow = `#c9c9c9 0px ${lastRow ? "0px" : boxShadowWidth} 0px inset`;
|
|
102
101
|
currentElem.style.position = "sticky";
|
|
103
102
|
currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
|
|
104
103
|
currentElem.style.boxShadow = boxShadow;
|
|
105
|
-
currentElem.style.zIndex = "
|
|
106
|
-
|
|
107
|
-
currentElem.classList.add("bg-white");
|
|
108
|
-
}
|
|
104
|
+
currentElem.style.zIndex = currentElemIsTh ? "20" : "5";
|
|
105
|
+
currentElem.style.backgroundColor = "white";
|
|
109
106
|
if (lastColumnFixed) {
|
|
110
107
|
currentElem.setAttribute("data-separator-fixed", "true");
|
|
111
108
|
}
|
|
112
109
|
});
|
|
113
110
|
});
|
|
114
|
-
const allCells = document.querySelectorAll("table#data-table td");
|
|
115
|
-
allCells.forEach((cell) => {
|
|
116
|
-
const cellElem = cell;
|
|
117
|
-
const hasTruncate = cellElem.querySelector(".truncate") !== null;
|
|
118
|
-
if (hasTruncate && !cellElem.hasAttribute("data-fixed")) {
|
|
119
|
-
cellElem.classList.add("bg-white");
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
111
|
}
|
|
123
112
|
}, [isLoading, sorting]);
|
|
124
113
|
const throttle = React.useCallback(
|
|
@@ -135,27 +135,33 @@ function buildColumns({
|
|
|
135
135
|
onCheckedCellChange: externalColumn.onCheckedCellChange
|
|
136
136
|
});
|
|
137
137
|
}
|
|
138
|
-
|
|
139
|
-
if (
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
138
|
+
const content = (() => {
|
|
139
|
+
if (externalColumn.render) {
|
|
140
|
+
if (typeof externalColumn.render === "function") {
|
|
141
|
+
const expandToggle = expandedContent ? createExpandToggle(row) : void 0;
|
|
142
|
+
return externalColumn.render({
|
|
143
|
+
value: row.getValue(externalColumn.key),
|
|
144
|
+
row,
|
|
145
|
+
toggleExpanded: expandToggle?.toggleExpanded,
|
|
146
|
+
isExpanded: expandToggle?.isExpanded
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
return externalColumn.render;
|
|
147
150
|
}
|
|
148
|
-
return
|
|
151
|
+
return /* @__PURE__ */ React.createElement(
|
|
152
|
+
Typography,
|
|
153
|
+
{
|
|
154
|
+
variant: size === "small" ? "body-medium-400" : "body-large-400",
|
|
155
|
+
textColor: "text-grey-800",
|
|
156
|
+
title: row.getValue(externalColumn.key)
|
|
157
|
+
},
|
|
158
|
+
row.getValue(externalColumn.key)
|
|
159
|
+
);
|
|
160
|
+
})();
|
|
161
|
+
if (externalColumn.truncate) {
|
|
162
|
+
return /* @__PURE__ */ React.createElement("div", { className: "block truncate" }, content);
|
|
149
163
|
}
|
|
150
|
-
return
|
|
151
|
-
Typography,
|
|
152
|
-
{
|
|
153
|
-
variant: size === "small" ? "body-medium-400" : "body-large-400",
|
|
154
|
-
textColor: "text-grey-800",
|
|
155
|
-
title: row.getValue(externalColumn.key)
|
|
156
|
-
},
|
|
157
|
-
row.getValue(externalColumn.key)
|
|
158
|
-
);
|
|
164
|
+
return content;
|
|
159
165
|
},
|
|
160
166
|
enableExpanding: externalColumn.enableExpand && !!expandedContent,
|
|
161
167
|
meta: {
|
|
@@ -15,13 +15,13 @@ function Table({
|
|
|
15
15
|
}) {
|
|
16
16
|
const styleColumn = React.useCallback((meta) => {
|
|
17
17
|
return {
|
|
18
|
-
width: meta
|
|
19
|
-
maxWidth: meta
|
|
20
|
-
minWidth: meta
|
|
21
|
-
textAlign: meta
|
|
18
|
+
width: meta?.width,
|
|
19
|
+
maxWidth: meta?.maxWidth ?? meta?.width ?? void 0,
|
|
20
|
+
minWidth: meta?.minWidth ?? void 0,
|
|
21
|
+
textAlign: meta?.align || "left"
|
|
22
22
|
};
|
|
23
23
|
}, []);
|
|
24
|
-
const getFixed = React.useCallback((meta) => meta
|
|
24
|
+
const getFixed = React.useCallback((meta) => meta?.fixed, []);
|
|
25
25
|
if (isLoading) {
|
|
26
26
|
if (skeleton) {
|
|
27
27
|
return skeleton;
|
|
@@ -35,47 +35,58 @@ function Table({
|
|
|
35
35
|
}
|
|
36
36
|
)));
|
|
37
37
|
}
|
|
38
|
-
return /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10 bg-white" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) =>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
38
|
+
return /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10 bg-white" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {
|
|
39
|
+
const meta = header.column.columnDef.meta;
|
|
40
|
+
return /* @__PURE__ */ React.createElement(
|
|
41
|
+
"th",
|
|
42
|
+
{
|
|
43
|
+
key: header.id,
|
|
44
|
+
className: cn(
|
|
45
|
+
"h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left bg-white",
|
|
46
|
+
size === "small" && "h-10",
|
|
47
|
+
header.column.getIsSorted() && "bg-grey-50 font-medium",
|
|
48
|
+
meta?.truncate && "overflow-hidden",
|
|
49
|
+
meta?.headerClassName
|
|
50
|
+
),
|
|
51
|
+
"data-header": header.id,
|
|
52
|
+
"data-fixed": getFixed(meta),
|
|
53
|
+
style: {
|
|
54
|
+
...styleColumn(meta),
|
|
55
|
+
...meta?.headerStyle
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
/* @__PURE__ */ React.createElement("div", { className: cn(meta?.truncate && "truncate") }, header.isPlaceholder ? null : flexRender(
|
|
59
|
+
header.column.columnDef.header,
|
|
60
|
+
header.getContext()
|
|
61
|
+
))
|
|
62
|
+
);
|
|
63
|
+
})))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(React.Fragment, { key: row.id }, /* @__PURE__ */ React.createElement(
|
|
60
64
|
"tr",
|
|
61
65
|
{
|
|
62
66
|
"data-state": onIsSelected?.(row) ? "selected" : "",
|
|
63
67
|
className: "[&_td]:hover:!bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
|
|
64
68
|
},
|
|
65
|
-
row.getVisibleCells().map((cell) =>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
69
|
+
row.getVisibleCells().map((cell) => {
|
|
70
|
+
const meta = cell.column.columnDef.meta;
|
|
71
|
+
return /* @__PURE__ */ React.createElement(
|
|
72
|
+
"td",
|
|
73
|
+
{
|
|
74
|
+
key: cell.id,
|
|
75
|
+
className: cn(
|
|
76
|
+
"p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left bg-white",
|
|
77
|
+
meta?.truncate && "overflow-hidden",
|
|
78
|
+
meta?.cellClassName
|
|
79
|
+
),
|
|
80
|
+
"data-column": cell.column.id,
|
|
81
|
+
"data-fixed": getFixed(meta),
|
|
82
|
+
style: styleColumn(meta)
|
|
83
|
+
},
|
|
84
|
+
/* @__PURE__ */ React.createElement("div", { className: cn(meta?.truncate && "truncate") }, flexRender(
|
|
85
|
+
cell.column.columnDef.cell,
|
|
86
|
+
cell.getContext()
|
|
87
|
+
))
|
|
88
|
+
);
|
|
89
|
+
})
|
|
79
90
|
), row.getIsExpanded() && expandedContent && /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: columns.length, className: "p-0" }, expandedContent(row))))) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
|
|
80
91
|
"td",
|
|
81
92
|
{
|
package/dist/index.d.ts
CHANGED
|
@@ -992,7 +992,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
|
|
|
992
992
|
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
993
993
|
|
|
994
994
|
declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
|
|
995
|
-
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement |
|
|
995
|
+
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLLabelElement | HTMLParagraphElement | HTMLHeadingElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
|
|
996
996
|
className?: string;
|
|
997
997
|
collapsedSize?: number | undefined;
|
|
998
998
|
collapsible?: boolean | undefined;
|