@itilite/lumina-ui 1.0.6-alpha → 1.0.7-alpha
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/Table-DNvoh2P8.d.mts +127 -0
- package/dist/Table-DNvoh2P8.d.ts +127 -0
- package/dist/atom/Table/Table.d.mts +1 -1
- package/dist/atom/Table/Table.d.ts +1 -1
- package/dist/atom/Table/Table.js +15 -20
- package/dist/atom/Table/Table.mjs +1 -1
- package/dist/chunk-DXPVJNGY.mjs +284 -0
- package/dist/chunk-G4P6XGQX.mjs +278 -0
- package/dist/chunk-I6GLPWHS.mjs +278 -0
- package/dist/chunk-J5JDQ4R6.mjs +278 -0
- package/dist/chunk-X3NDICAU.mjs +284 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +15 -20
- package/dist/index.mjs +13 -13
- package/dist/styles.css +297 -304
- package/package.json +1 -1
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__objRest,
|
|
3
|
+
__spreadProps,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "./chunk-FWCSY2DS.mjs";
|
|
6
|
+
|
|
7
|
+
// src/atom/Table/Table.tsx
|
|
8
|
+
import * as React from "react";
|
|
9
|
+
import { Table as AntTable } from "antd";
|
|
10
|
+
import clsx from "clsx";
|
|
11
|
+
|
|
12
|
+
// src/atom/Table/Table.module.scss
|
|
13
|
+
var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "hasCustomHeaderCell": "Table-module__hasCustomHeaderCell___AtCk8", "table": "Table-module__table___5d7g0", "hasCustomBodyCell": "Table-module__hasCustomBodyCell___sf8j8", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
|
|
14
|
+
|
|
15
|
+
// src/atom/Table/Table.tsx
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
function buildPagination(pagination, overrides = {}) {
|
|
18
|
+
var _a, _b, _c, _d;
|
|
19
|
+
if (pagination === false) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
const defaults = {
|
|
23
|
+
showSizeChanger: true,
|
|
24
|
+
pageSizeOptions: ["10", "25", "50"],
|
|
25
|
+
locale: { items_per_page: "" },
|
|
26
|
+
// Removes "/ page" text
|
|
27
|
+
showTotal: (total, range) => `${range[0]}\u2013${range[1]} of ${total} items`
|
|
28
|
+
};
|
|
29
|
+
const baseConfig = pagination === true || pagination === void 0 ? defaults : __spreadValues(__spreadValues({}, defaults), pagination);
|
|
30
|
+
return __spreadProps(__spreadValues({}, baseConfig), {
|
|
31
|
+
total: (_a = overrides.total) != null ? _a : baseConfig.total,
|
|
32
|
+
current: (_b = overrides.current) != null ? _b : baseConfig.current,
|
|
33
|
+
pageSize: (_c = overrides.pageSize) != null ? _c : baseConfig.pageSize,
|
|
34
|
+
onChange: (_d = overrides.onChange) != null ? _d : baseConfig.onChange
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function nextSortOrder(current) {
|
|
38
|
+
if (current === void 0) return "ascend";
|
|
39
|
+
if (current === "ascend") return "descend";
|
|
40
|
+
return void 0;
|
|
41
|
+
}
|
|
42
|
+
function ColumnHeader({
|
|
43
|
+
label,
|
|
44
|
+
sortable = false,
|
|
45
|
+
sortOrder,
|
|
46
|
+
onSortChange,
|
|
47
|
+
sortIcon,
|
|
48
|
+
filterCount = 0,
|
|
49
|
+
filterIcon,
|
|
50
|
+
filterContent,
|
|
51
|
+
className = ""
|
|
52
|
+
}) {
|
|
53
|
+
const [filterOpen, setFilterOpen] = React.useState(false);
|
|
54
|
+
const wrapperRef = React.useRef(null);
|
|
55
|
+
const filterActive = filterCount > 0;
|
|
56
|
+
const hasFilter = filterContent !== void 0 && filterIcon !== void 0;
|
|
57
|
+
const hasSort = sortable && sortIcon !== void 0;
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (!filterOpen) return;
|
|
60
|
+
const onOutside = (e) => {
|
|
61
|
+
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
|
|
62
|
+
setFilterOpen(false);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
document.addEventListener("mousedown", onOutside);
|
|
66
|
+
return () => document.removeEventListener("mousedown", onOutside);
|
|
67
|
+
}, [filterOpen]);
|
|
68
|
+
return /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeader, ref: wrapperRef, children: [
|
|
69
|
+
/* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderLeft, children: hasSort ? /* @__PURE__ */ jsxs(
|
|
70
|
+
"button",
|
|
71
|
+
{
|
|
72
|
+
type: "button",
|
|
73
|
+
className: Table_module_default.columnHeaderSortArea,
|
|
74
|
+
onClick: () => onSortChange == null ? void 0 : onSortChange(nextSortOrder(sortOrder)),
|
|
75
|
+
"aria-label": typeof label === "string" ? `Sort by ${label}` : "Sort",
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }),
|
|
78
|
+
/* @__PURE__ */ jsx(
|
|
79
|
+
"span",
|
|
80
|
+
{
|
|
81
|
+
className: clsx(Table_module_default.columnHeaderSortIcon, {
|
|
82
|
+
[Table_module_default.columnHeaderSortIconActive]: sortOrder !== void 0
|
|
83
|
+
}),
|
|
84
|
+
children: sortIcon
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
) : /* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }) }),
|
|
90
|
+
hasFilter && /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeaderFilterWrapper, children: [
|
|
91
|
+
/* @__PURE__ */ jsxs(
|
|
92
|
+
"button",
|
|
93
|
+
{
|
|
94
|
+
type: "button",
|
|
95
|
+
className: clsx(Table_module_default.columnHeaderFilterBtn, {
|
|
96
|
+
[Table_module_default.columnHeaderFilterBtnActive]: filterActive
|
|
97
|
+
}),
|
|
98
|
+
onClick: () => setFilterOpen((v) => !v),
|
|
99
|
+
"aria-label": typeof label === "string" ? `Filter ${label}` : "Filter",
|
|
100
|
+
"aria-expanded": filterOpen,
|
|
101
|
+
"aria-haspopup": "dialog",
|
|
102
|
+
children: [
|
|
103
|
+
filterIcon,
|
|
104
|
+
filterActive && /* @__PURE__ */ jsx("span", { className: Table_module_default.columnHeaderFilterBadge, children: filterCount })
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
filterOpen && /* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderFilterDropdown, role: "dialog", children: filterContent })
|
|
109
|
+
] })
|
|
110
|
+
] });
|
|
111
|
+
}
|
|
112
|
+
function processColumns(columns, headerCellClassName, bodyCellClassName) {
|
|
113
|
+
if (!columns) return void 0;
|
|
114
|
+
return columns.map((col) => {
|
|
115
|
+
const _a = col, { headerProps, title, onHeaderCell, onCell } = _a, rest = __objRest(_a, ["headerProps", "title", "onHeaderCell", "onCell"]);
|
|
116
|
+
const resolvedOnHeaderCell = (column) => {
|
|
117
|
+
var _a2;
|
|
118
|
+
const base = (_a2 = onHeaderCell == null ? void 0 : onHeaderCell(column)) != null ? _a2 : {};
|
|
119
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
120
|
+
className: clsx(base.className, headerCellClassName)
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
const resolvedOnCell = (record, rowIndex) => {
|
|
124
|
+
var _a2;
|
|
125
|
+
const base = (_a2 = onCell == null ? void 0 : onCell(record, rowIndex)) != null ? _a2 : {};
|
|
126
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
127
|
+
className: clsx(base.className, bodyCellClassName)
|
|
128
|
+
});
|
|
129
|
+
};
|
|
130
|
+
const processedTitle = headerProps ? /* @__PURE__ */ jsx(ColumnHeader, __spreadValues({ label: title }, headerProps)) : title;
|
|
131
|
+
return __spreadProps(__spreadValues({}, rest), {
|
|
132
|
+
title: processedTitle,
|
|
133
|
+
onHeaderCell: resolvedOnHeaderCell,
|
|
134
|
+
onCell: resolvedOnCell
|
|
135
|
+
});
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
function Table(props) {
|
|
139
|
+
var _b;
|
|
140
|
+
const _a = props, {
|
|
141
|
+
size = "middle",
|
|
142
|
+
variant = "default",
|
|
143
|
+
isAccordion = false,
|
|
144
|
+
isToolbar = false,
|
|
145
|
+
className = "",
|
|
146
|
+
pagination,
|
|
147
|
+
loading,
|
|
148
|
+
total,
|
|
149
|
+
current,
|
|
150
|
+
pageSize,
|
|
151
|
+
onPaginationChange,
|
|
152
|
+
columns,
|
|
153
|
+
rowSelection,
|
|
154
|
+
rowKey = "key",
|
|
155
|
+
onRow,
|
|
156
|
+
dataSource,
|
|
157
|
+
emptyState,
|
|
158
|
+
hideHeader,
|
|
159
|
+
loadingIndicator,
|
|
160
|
+
style,
|
|
161
|
+
headerCellClassName,
|
|
162
|
+
bodyCellClassName,
|
|
163
|
+
rowClassName
|
|
164
|
+
} = _a, rest = __objRest(_a, [
|
|
165
|
+
"size",
|
|
166
|
+
"variant",
|
|
167
|
+
"isAccordion",
|
|
168
|
+
"isToolbar",
|
|
169
|
+
"className",
|
|
170
|
+
"pagination",
|
|
171
|
+
"loading",
|
|
172
|
+
"total",
|
|
173
|
+
"current",
|
|
174
|
+
"pageSize",
|
|
175
|
+
"onPaginationChange",
|
|
176
|
+
"columns",
|
|
177
|
+
"rowSelection",
|
|
178
|
+
"rowKey",
|
|
179
|
+
"onRow",
|
|
180
|
+
"dataSource",
|
|
181
|
+
"emptyState",
|
|
182
|
+
"hideHeader",
|
|
183
|
+
"loadingIndicator",
|
|
184
|
+
"style",
|
|
185
|
+
"headerCellClassName",
|
|
186
|
+
"bodyCellClassName",
|
|
187
|
+
"rowClassName"
|
|
188
|
+
]);
|
|
189
|
+
const isChildVariant = isAccordion || isToolbar;
|
|
190
|
+
const resolvedPagination = buildPagination(pagination, {
|
|
191
|
+
total,
|
|
192
|
+
current,
|
|
193
|
+
pageSize,
|
|
194
|
+
onChange: onPaginationChange
|
|
195
|
+
});
|
|
196
|
+
const processedColumns = React.useMemo(
|
|
197
|
+
() => processColumns(columns, headerCellClassName, bodyCellClassName),
|
|
198
|
+
[columns, headerCellClassName, bodyCellClassName]
|
|
199
|
+
);
|
|
200
|
+
const resolvedOnRow = React.useMemo(() => {
|
|
201
|
+
const onChange = rowSelection == null ? void 0 : rowSelection.onChange;
|
|
202
|
+
if (variant !== "selectable" || !onChange) return onRow;
|
|
203
|
+
return (record, index) => {
|
|
204
|
+
var _a2;
|
|
205
|
+
const base = (_a2 = onRow == null ? void 0 : onRow(record, index)) != null ? _a2 : {};
|
|
206
|
+
const getKey = (r, i) => typeof rowKey === "function" ? rowKey(r, i) : r[rowKey];
|
|
207
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
208
|
+
style: __spreadValues({ cursor: "pointer" }, base.style),
|
|
209
|
+
onClick: (e) => {
|
|
210
|
+
var _a3, _b2;
|
|
211
|
+
(_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
|
|
212
|
+
const key = getKey(record, index);
|
|
213
|
+
const current2 = (_b2 = rowSelection.selectedRowKeys) != null ? _b2 : [];
|
|
214
|
+
const isSelected = current2.some((k) => k === key);
|
|
215
|
+
const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
|
|
216
|
+
const newRows = (dataSource != null ? dataSource : []).filter(
|
|
217
|
+
(r) => newKeys.some((k) => k === getKey(r))
|
|
218
|
+
);
|
|
219
|
+
onChange(newKeys, newRows, { type: "single" });
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
};
|
|
223
|
+
}, [variant, rowSelection, rowKey, onRow, dataSource]);
|
|
224
|
+
return /* @__PURE__ */ jsx(
|
|
225
|
+
"div",
|
|
226
|
+
{
|
|
227
|
+
className: clsx(
|
|
228
|
+
Table_module_default.tableWrapper,
|
|
229
|
+
Table_module_default.showHoverEffect,
|
|
230
|
+
{
|
|
231
|
+
[Table_module_default.isAccordion]: isAccordion,
|
|
232
|
+
[Table_module_default.isToolbar]: isToolbar,
|
|
233
|
+
[Table_module_default.hasCustomHeaderCell]: !!headerCellClassName,
|
|
234
|
+
[Table_module_default.hasCustomBodyCell]: !!bodyCellClassName
|
|
235
|
+
},
|
|
236
|
+
className
|
|
237
|
+
),
|
|
238
|
+
style,
|
|
239
|
+
"data-testid": "lumina-table",
|
|
240
|
+
children: /* @__PURE__ */ jsx(
|
|
241
|
+
AntTable,
|
|
242
|
+
__spreadProps(__spreadValues({
|
|
243
|
+
className: Table_module_default.table,
|
|
244
|
+
size,
|
|
245
|
+
pagination: resolvedPagination,
|
|
246
|
+
columns: processedColumns,
|
|
247
|
+
rowSelection,
|
|
248
|
+
rowKey,
|
|
249
|
+
onRow: resolvedOnRow,
|
|
250
|
+
dataSource,
|
|
251
|
+
showHeader: !hideHeader,
|
|
252
|
+
locale: {
|
|
253
|
+
emptyText: loading && loadingIndicator ? loadingIndicator : loading ? " " : emptyState
|
|
254
|
+
}
|
|
255
|
+
}, rest), {
|
|
256
|
+
loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
|
|
257
|
+
rowClassName: (record, index) => {
|
|
258
|
+
var _a2;
|
|
259
|
+
return clsx(
|
|
260
|
+
{
|
|
261
|
+
[Table_module_default.firstRow]: index === 0,
|
|
262
|
+
[Table_module_default.lastRow]: index === ((_a2 = dataSource == null ? void 0 : dataSource.length) != null ? _a2 : 0) - 1
|
|
263
|
+
},
|
|
264
|
+
typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName
|
|
265
|
+
);
|
|
266
|
+
}
|
|
267
|
+
})
|
|
268
|
+
)
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
}
|
|
272
|
+
Table.displayName = "Table";
|
|
273
|
+
var Table_default = Table;
|
|
274
|
+
|
|
275
|
+
export {
|
|
276
|
+
Table,
|
|
277
|
+
Table_default
|
|
278
|
+
};
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__objRest,
|
|
3
|
+
__spreadProps,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "./chunk-FWCSY2DS.mjs";
|
|
6
|
+
|
|
7
|
+
// src/atom/Table/Table.tsx
|
|
8
|
+
import * as React from "react";
|
|
9
|
+
import { Table as AntTable } from "antd";
|
|
10
|
+
import clsx from "clsx";
|
|
11
|
+
|
|
12
|
+
// src/atom/Table/Table.module.scss
|
|
13
|
+
var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "hasCustomHeaderCell": "Table-module__hasCustomHeaderCell___AtCk8", "table": "Table-module__table___5d7g0", "ant-table-selection-column": "Table-module__ant-table-selection-column___H9vtu", "hasCustomBodyCell": "Table-module__hasCustomBodyCell___sf8j8", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
|
|
14
|
+
|
|
15
|
+
// src/atom/Table/Table.tsx
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
function buildPagination(pagination, overrides = {}) {
|
|
18
|
+
var _a, _b, _c, _d;
|
|
19
|
+
if (pagination === false) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
const defaults = {
|
|
23
|
+
showSizeChanger: true,
|
|
24
|
+
pageSizeOptions: ["10", "25", "50"],
|
|
25
|
+
locale: { items_per_page: "" },
|
|
26
|
+
// Removes "/ page" text
|
|
27
|
+
showTotal: (total, range) => `${range[0]}\u2013${range[1]} of ${total} items`
|
|
28
|
+
};
|
|
29
|
+
const baseConfig = pagination === true || pagination === void 0 ? defaults : __spreadValues(__spreadValues({}, defaults), pagination);
|
|
30
|
+
return __spreadProps(__spreadValues({}, baseConfig), {
|
|
31
|
+
total: (_a = overrides.total) != null ? _a : baseConfig.total,
|
|
32
|
+
current: (_b = overrides.current) != null ? _b : baseConfig.current,
|
|
33
|
+
pageSize: (_c = overrides.pageSize) != null ? _c : baseConfig.pageSize,
|
|
34
|
+
onChange: (_d = overrides.onChange) != null ? _d : baseConfig.onChange
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function nextSortOrder(current) {
|
|
38
|
+
if (current === void 0) return "ascend";
|
|
39
|
+
if (current === "ascend") return "descend";
|
|
40
|
+
return void 0;
|
|
41
|
+
}
|
|
42
|
+
function ColumnHeader({
|
|
43
|
+
label,
|
|
44
|
+
sortable = false,
|
|
45
|
+
sortOrder,
|
|
46
|
+
onSortChange,
|
|
47
|
+
sortIcon,
|
|
48
|
+
filterCount = 0,
|
|
49
|
+
filterIcon,
|
|
50
|
+
filterContent,
|
|
51
|
+
className = ""
|
|
52
|
+
}) {
|
|
53
|
+
const [filterOpen, setFilterOpen] = React.useState(false);
|
|
54
|
+
const wrapperRef = React.useRef(null);
|
|
55
|
+
const filterActive = filterCount > 0;
|
|
56
|
+
const hasFilter = filterContent !== void 0 && filterIcon !== void 0;
|
|
57
|
+
const hasSort = sortable && sortIcon !== void 0;
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (!filterOpen) return;
|
|
60
|
+
const onOutside = (e) => {
|
|
61
|
+
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
|
|
62
|
+
setFilterOpen(false);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
document.addEventListener("mousedown", onOutside);
|
|
66
|
+
return () => document.removeEventListener("mousedown", onOutside);
|
|
67
|
+
}, [filterOpen]);
|
|
68
|
+
return /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeader, ref: wrapperRef, children: [
|
|
69
|
+
/* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderLeft, children: hasSort ? /* @__PURE__ */ jsxs(
|
|
70
|
+
"button",
|
|
71
|
+
{
|
|
72
|
+
type: "button",
|
|
73
|
+
className: Table_module_default.columnHeaderSortArea,
|
|
74
|
+
onClick: () => onSortChange == null ? void 0 : onSortChange(nextSortOrder(sortOrder)),
|
|
75
|
+
"aria-label": typeof label === "string" ? `Sort by ${label}` : "Sort",
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }),
|
|
78
|
+
/* @__PURE__ */ jsx(
|
|
79
|
+
"span",
|
|
80
|
+
{
|
|
81
|
+
className: clsx(Table_module_default.columnHeaderSortIcon, {
|
|
82
|
+
[Table_module_default.columnHeaderSortIconActive]: sortOrder !== void 0
|
|
83
|
+
}),
|
|
84
|
+
children: sortIcon
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
) : /* @__PURE__ */ jsx("span", { className: clsx(Table_module_default.columnHeaderLabel, "tw-typography-caption2Bold tw-text-color-text-weak", className), children: label }) }),
|
|
90
|
+
hasFilter && /* @__PURE__ */ jsxs("div", { className: Table_module_default.columnHeaderFilterWrapper, children: [
|
|
91
|
+
/* @__PURE__ */ jsxs(
|
|
92
|
+
"button",
|
|
93
|
+
{
|
|
94
|
+
type: "button",
|
|
95
|
+
className: clsx(Table_module_default.columnHeaderFilterBtn, {
|
|
96
|
+
[Table_module_default.columnHeaderFilterBtnActive]: filterActive
|
|
97
|
+
}),
|
|
98
|
+
onClick: () => setFilterOpen((v) => !v),
|
|
99
|
+
"aria-label": typeof label === "string" ? `Filter ${label}` : "Filter",
|
|
100
|
+
"aria-expanded": filterOpen,
|
|
101
|
+
"aria-haspopup": "dialog",
|
|
102
|
+
children: [
|
|
103
|
+
filterIcon,
|
|
104
|
+
filterActive && /* @__PURE__ */ jsx("span", { className: Table_module_default.columnHeaderFilterBadge, children: filterCount })
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
filterOpen && /* @__PURE__ */ jsx("div", { className: Table_module_default.columnHeaderFilterDropdown, role: "dialog", children: filterContent })
|
|
109
|
+
] })
|
|
110
|
+
] });
|
|
111
|
+
}
|
|
112
|
+
function processColumns(columns, headerCellClassName, bodyCellClassName) {
|
|
113
|
+
if (!columns) return void 0;
|
|
114
|
+
return columns.map((col) => {
|
|
115
|
+
const _a = col, { headerProps, title, onHeaderCell, onCell } = _a, rest = __objRest(_a, ["headerProps", "title", "onHeaderCell", "onCell"]);
|
|
116
|
+
const resolvedOnHeaderCell = (column) => {
|
|
117
|
+
var _a2;
|
|
118
|
+
const base = (_a2 = onHeaderCell == null ? void 0 : onHeaderCell(column)) != null ? _a2 : {};
|
|
119
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
120
|
+
className: clsx(base.className, headerCellClassName)
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
const resolvedOnCell = (record, rowIndex) => {
|
|
124
|
+
var _a2;
|
|
125
|
+
const base = (_a2 = onCell == null ? void 0 : onCell(record, rowIndex)) != null ? _a2 : {};
|
|
126
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
127
|
+
className: clsx(base.className, bodyCellClassName)
|
|
128
|
+
});
|
|
129
|
+
};
|
|
130
|
+
const processedTitle = headerProps ? /* @__PURE__ */ jsx(ColumnHeader, __spreadValues({ label: title }, headerProps)) : title;
|
|
131
|
+
return __spreadProps(__spreadValues({}, rest), {
|
|
132
|
+
title: processedTitle,
|
|
133
|
+
onHeaderCell: resolvedOnHeaderCell,
|
|
134
|
+
onCell: resolvedOnCell
|
|
135
|
+
});
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
function Table(props) {
|
|
139
|
+
var _b;
|
|
140
|
+
const _a = props, {
|
|
141
|
+
size = "middle",
|
|
142
|
+
variant = "default",
|
|
143
|
+
isAccordion = false,
|
|
144
|
+
isToolbar = false,
|
|
145
|
+
className = "",
|
|
146
|
+
pagination,
|
|
147
|
+
loading,
|
|
148
|
+
total,
|
|
149
|
+
current,
|
|
150
|
+
pageSize,
|
|
151
|
+
onPaginationChange,
|
|
152
|
+
columns,
|
|
153
|
+
rowSelection,
|
|
154
|
+
rowKey = "key",
|
|
155
|
+
onRow,
|
|
156
|
+
dataSource,
|
|
157
|
+
emptyState,
|
|
158
|
+
hideHeader,
|
|
159
|
+
loadingIndicator,
|
|
160
|
+
style,
|
|
161
|
+
headerCellClassName,
|
|
162
|
+
bodyCellClassName,
|
|
163
|
+
rowClassName
|
|
164
|
+
} = _a, rest = __objRest(_a, [
|
|
165
|
+
"size",
|
|
166
|
+
"variant",
|
|
167
|
+
"isAccordion",
|
|
168
|
+
"isToolbar",
|
|
169
|
+
"className",
|
|
170
|
+
"pagination",
|
|
171
|
+
"loading",
|
|
172
|
+
"total",
|
|
173
|
+
"current",
|
|
174
|
+
"pageSize",
|
|
175
|
+
"onPaginationChange",
|
|
176
|
+
"columns",
|
|
177
|
+
"rowSelection",
|
|
178
|
+
"rowKey",
|
|
179
|
+
"onRow",
|
|
180
|
+
"dataSource",
|
|
181
|
+
"emptyState",
|
|
182
|
+
"hideHeader",
|
|
183
|
+
"loadingIndicator",
|
|
184
|
+
"style",
|
|
185
|
+
"headerCellClassName",
|
|
186
|
+
"bodyCellClassName",
|
|
187
|
+
"rowClassName"
|
|
188
|
+
]);
|
|
189
|
+
const isChildVariant = isAccordion || isToolbar;
|
|
190
|
+
const resolvedPagination = buildPagination(pagination, {
|
|
191
|
+
total,
|
|
192
|
+
current,
|
|
193
|
+
pageSize,
|
|
194
|
+
onChange: onPaginationChange
|
|
195
|
+
});
|
|
196
|
+
const processedColumns = React.useMemo(
|
|
197
|
+
() => processColumns(columns, headerCellClassName, bodyCellClassName),
|
|
198
|
+
[columns, headerCellClassName, bodyCellClassName]
|
|
199
|
+
);
|
|
200
|
+
const resolvedRowSelection = React.useMemo(() => {
|
|
201
|
+
if (!rowSelection) return void 0;
|
|
202
|
+
return __spreadValues({
|
|
203
|
+
columnWidth: 48
|
|
204
|
+
}, rowSelection);
|
|
205
|
+
}, [rowSelection]);
|
|
206
|
+
const resolvedOnRow = React.useMemo(() => {
|
|
207
|
+
const onChange = resolvedRowSelection == null ? void 0 : resolvedRowSelection.onChange;
|
|
208
|
+
if (variant !== "selectable" || !onChange) return onRow;
|
|
209
|
+
return (record, index) => {
|
|
210
|
+
var _a2;
|
|
211
|
+
const base = (_a2 = onRow == null ? void 0 : onRow(record, index)) != null ? _a2 : {};
|
|
212
|
+
const getKey = (r, i) => typeof rowKey === "function" ? rowKey(r, i) : r[rowKey];
|
|
213
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
214
|
+
style: __spreadValues({ cursor: "pointer" }, base.style),
|
|
215
|
+
onClick: (e) => {
|
|
216
|
+
var _a3, _b2;
|
|
217
|
+
(_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
|
|
218
|
+
const key = getKey(record, index);
|
|
219
|
+
const current2 = (_b2 = resolvedRowSelection.selectedRowKeys) != null ? _b2 : [];
|
|
220
|
+
const isSelected = current2.some((k) => k === key);
|
|
221
|
+
const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
|
|
222
|
+
const newRows = (dataSource != null ? dataSource : []).filter(
|
|
223
|
+
(r) => newKeys.some((k) => k === getKey(r))
|
|
224
|
+
);
|
|
225
|
+
onChange(newKeys, newRows, { type: "single" });
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
};
|
|
229
|
+
}, [variant, resolvedRowSelection, rowKey, onRow, dataSource]);
|
|
230
|
+
return /* @__PURE__ */ jsx(
|
|
231
|
+
"div",
|
|
232
|
+
{
|
|
233
|
+
className: clsx(
|
|
234
|
+
Table_module_default.tableWrapper,
|
|
235
|
+
Table_module_default.showHoverEffect,
|
|
236
|
+
{
|
|
237
|
+
[Table_module_default.isAccordion]: isAccordion,
|
|
238
|
+
[Table_module_default.isToolbar]: isToolbar,
|
|
239
|
+
[Table_module_default.hasCustomHeaderCell]: !!headerCellClassName,
|
|
240
|
+
[Table_module_default.hasCustomBodyCell]: !!bodyCellClassName
|
|
241
|
+
},
|
|
242
|
+
className
|
|
243
|
+
),
|
|
244
|
+
style,
|
|
245
|
+
"data-testid": "lumina-table",
|
|
246
|
+
children: /* @__PURE__ */ jsx(
|
|
247
|
+
AntTable,
|
|
248
|
+
__spreadProps(__spreadValues({
|
|
249
|
+
className: Table_module_default.table,
|
|
250
|
+
size,
|
|
251
|
+
pagination: resolvedPagination,
|
|
252
|
+
columns: processedColumns,
|
|
253
|
+
rowSelection: resolvedRowSelection,
|
|
254
|
+
rowKey,
|
|
255
|
+
onRow: resolvedOnRow,
|
|
256
|
+
dataSource,
|
|
257
|
+
showHeader: !hideHeader,
|
|
258
|
+
locale: {
|
|
259
|
+
emptyText: loading && loadingIndicator ? loadingIndicator : loading ? " " : emptyState
|
|
260
|
+
}
|
|
261
|
+
}, rest), {
|
|
262
|
+
loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
|
|
263
|
+
rowClassName: (record, index) => {
|
|
264
|
+
var _a2;
|
|
265
|
+
return clsx(
|
|
266
|
+
{
|
|
267
|
+
[Table_module_default.firstRow]: index === 0,
|
|
268
|
+
[Table_module_default.lastRow]: index === ((_a2 = dataSource == null ? void 0 : dataSource.length) != null ? _a2 : 0) - 1
|
|
269
|
+
},
|
|
270
|
+
typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName
|
|
271
|
+
);
|
|
272
|
+
}
|
|
273
|
+
})
|
|
274
|
+
)
|
|
275
|
+
}
|
|
276
|
+
);
|
|
277
|
+
}
|
|
278
|
+
Table.displayName = "Table";
|
|
279
|
+
var Table_default = Table;
|
|
280
|
+
|
|
281
|
+
export {
|
|
282
|
+
Table,
|
|
283
|
+
Table_default
|
|
284
|
+
};
|
package/dist/index.d.mts
CHANGED
|
@@ -11,7 +11,7 @@ export { A as AdvancedDateRangePicker, D as DateRangePickerProps, a as DateRange
|
|
|
11
11
|
export { Select } from './atom/Select/Select.mjs';
|
|
12
12
|
export { LoadingSpinner } from './atom/LoadingSpinner/LoadingSpinner.mjs';
|
|
13
13
|
export { Slider } from './atom/Slider/Slider.mjs';
|
|
14
|
-
export { L as LuminaColumnHeaderProps, a as LuminaColumnType, b as LuminaColumnsType, S as SortOrder, T as Table, c as TableProps } from './Table-
|
|
14
|
+
export { L as LuminaColumnHeaderProps, a as LuminaColumnType, b as LuminaColumnsType, S as SortOrder, T as Table, c as TableProps } from './Table-DNvoh2P8.mjs';
|
|
15
15
|
export { UserProfile } from './molecules/UserProfile/UserProfile.mjs';
|
|
16
16
|
export { TablePaginationConfig } from 'antd';
|
|
17
17
|
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export { A as AdvancedDateRangePicker, D as DateRangePickerProps, a as DateRange
|
|
|
11
11
|
export { Select } from './atom/Select/Select.js';
|
|
12
12
|
export { LoadingSpinner } from './atom/LoadingSpinner/LoadingSpinner.js';
|
|
13
13
|
export { Slider } from './atom/Slider/Slider.js';
|
|
14
|
-
export { L as LuminaColumnHeaderProps, a as LuminaColumnType, b as LuminaColumnsType, S as SortOrder, T as Table, c as TableProps } from './Table-
|
|
14
|
+
export { L as LuminaColumnHeaderProps, a as LuminaColumnType, b as LuminaColumnsType, S as SortOrder, T as Table, c as TableProps } from './Table-DNvoh2P8.js';
|
|
15
15
|
export { UserProfile } from './molecules/UserProfile/UserProfile.js';
|
|
16
16
|
export { TablePaginationConfig } from 'antd';
|
|
17
17
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -2710,7 +2710,7 @@ var import_antd10 = require("antd");
|
|
|
2710
2710
|
var import_clsx12 = __toESM(require("clsx"));
|
|
2711
2711
|
|
|
2712
2712
|
// src/atom/Table/Table.module.scss
|
|
2713
|
-
var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "hasCustomHeaderCell": "Table-module__hasCustomHeaderCell___AtCk8", "table": "Table-module__table___5d7g0", "
|
|
2713
|
+
var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "hasCustomHeaderCell": "Table-module__hasCustomHeaderCell___AtCk8", "table": "Table-module__table___5d7g0", "ant-table-selection-column": "Table-module__ant-table-selection-column___H9vtu", "hasCustomBodyCell": "Table-module__hasCustomBodyCell___sf8j8", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
|
|
2714
2714
|
|
|
2715
2715
|
// src/atom/Table/Table.tsx
|
|
2716
2716
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
@@ -2860,8 +2860,7 @@ function Table(props) {
|
|
|
2860
2860
|
style,
|
|
2861
2861
|
headerCellClassName,
|
|
2862
2862
|
bodyCellClassName,
|
|
2863
|
-
rowClassName
|
|
2864
|
-
rowSpacing
|
|
2863
|
+
rowClassName
|
|
2865
2864
|
} = _a, rest = __objRest(_a, [
|
|
2866
2865
|
"size",
|
|
2867
2866
|
"variant",
|
|
@@ -2885,8 +2884,7 @@ function Table(props) {
|
|
|
2885
2884
|
"style",
|
|
2886
2885
|
"headerCellClassName",
|
|
2887
2886
|
"bodyCellClassName",
|
|
2888
|
-
"rowClassName"
|
|
2889
|
-
"rowSpacing"
|
|
2887
|
+
"rowClassName"
|
|
2890
2888
|
]);
|
|
2891
2889
|
const isChildVariant = isAccordion || isToolbar;
|
|
2892
2890
|
const resolvedPagination = buildPagination(pagination, {
|
|
@@ -2899,8 +2897,14 @@ function Table(props) {
|
|
|
2899
2897
|
() => processColumns(columns, headerCellClassName, bodyCellClassName),
|
|
2900
2898
|
[columns, headerCellClassName, bodyCellClassName]
|
|
2901
2899
|
);
|
|
2900
|
+
const resolvedRowSelection = React5.useMemo(() => {
|
|
2901
|
+
if (!rowSelection) return void 0;
|
|
2902
|
+
return __spreadValues({
|
|
2903
|
+
columnWidth: 48
|
|
2904
|
+
}, rowSelection);
|
|
2905
|
+
}, [rowSelection]);
|
|
2902
2906
|
const resolvedOnRow = React5.useMemo(() => {
|
|
2903
|
-
const onChange =
|
|
2907
|
+
const onChange = resolvedRowSelection == null ? void 0 : resolvedRowSelection.onChange;
|
|
2904
2908
|
if (variant !== "selectable" || !onChange) return onRow;
|
|
2905
2909
|
return (record, index) => {
|
|
2906
2910
|
var _a2;
|
|
@@ -2912,7 +2916,7 @@ function Table(props) {
|
|
|
2912
2916
|
var _a3, _b2;
|
|
2913
2917
|
(_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
|
|
2914
2918
|
const key = getKey(record, index);
|
|
2915
|
-
const current2 = (_b2 =
|
|
2919
|
+
const current2 = (_b2 = resolvedRowSelection.selectedRowKeys) != null ? _b2 : [];
|
|
2916
2920
|
const isSelected = current2.some((k) => k === key);
|
|
2917
2921
|
const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
|
|
2918
2922
|
const newRows = (dataSource != null ? dataSource : []).filter(
|
|
@@ -2922,15 +2926,7 @@ function Table(props) {
|
|
|
2922
2926
|
}
|
|
2923
2927
|
});
|
|
2924
2928
|
};
|
|
2925
|
-
}, [variant,
|
|
2926
|
-
const hasRowSpacing = rowSpacing !== void 0;
|
|
2927
|
-
const rowSpacingValue = typeof rowSpacing === "number" ? `${rowSpacing}px` : rowSpacing;
|
|
2928
|
-
const wrapperStyle = React5.useMemo(() => {
|
|
2929
|
-
if (!hasRowSpacing) return style;
|
|
2930
|
-
return __spreadProps(__spreadValues({}, style), {
|
|
2931
|
-
"--lumina-table-row-spacing": rowSpacingValue
|
|
2932
|
-
});
|
|
2933
|
-
}, [style, hasRowSpacing, rowSpacingValue]);
|
|
2929
|
+
}, [variant, resolvedRowSelection, rowKey, onRow, dataSource]);
|
|
2934
2930
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2935
2931
|
"div",
|
|
2936
2932
|
{
|
|
@@ -2941,12 +2937,11 @@ function Table(props) {
|
|
|
2941
2937
|
[Table_module_default.isAccordion]: isAccordion,
|
|
2942
2938
|
[Table_module_default.isToolbar]: isToolbar,
|
|
2943
2939
|
[Table_module_default.hasCustomHeaderCell]: !!headerCellClassName,
|
|
2944
|
-
[Table_module_default.hasCustomBodyCell]: !!bodyCellClassName
|
|
2945
|
-
[Table_module_default.hasRowSpacing]: hasRowSpacing
|
|
2940
|
+
[Table_module_default.hasCustomBodyCell]: !!bodyCellClassName
|
|
2946
2941
|
},
|
|
2947
2942
|
className
|
|
2948
2943
|
),
|
|
2949
|
-
style
|
|
2944
|
+
style,
|
|
2950
2945
|
"data-testid": "lumina-table",
|
|
2951
2946
|
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2952
2947
|
import_antd10.Table,
|
|
@@ -2955,7 +2950,7 @@ function Table(props) {
|
|
|
2955
2950
|
size,
|
|
2956
2951
|
pagination: resolvedPagination,
|
|
2957
2952
|
columns: processedColumns,
|
|
2958
|
-
rowSelection,
|
|
2953
|
+
rowSelection: resolvedRowSelection,
|
|
2959
2954
|
rowKey,
|
|
2960
2955
|
onRow: resolvedOnRow,
|
|
2961
2956
|
dataSource,
|