@itilite/lumina-ui 1.0.4-alpha → 1.0.6-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-DSFYzrpU.d.mts +129 -0
- package/dist/Table-DSFYzrpU.d.ts +129 -0
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.js +5 -4
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.mjs +2 -2
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.js +1 -1
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.mjs +1 -1
- package/dist/atom/Table/Table.d.mts +1 -1
- package/dist/atom/Table/Table.d.ts +1 -1
- package/dist/atom/Table/Table.js +57 -18
- package/dist/atom/Table/Table.mjs +1 -1
- package/dist/chunk-5JXIJTAS.mjs +448 -0
- package/dist/chunk-FPH63V2R.mjs +269 -0
- package/dist/chunk-LRNKIRH3.mjs +289 -0
- package/dist/chunk-SRKN7WS7.mjs +448 -0
- package/dist/chunk-UC4NTBDH.mjs +439 -0
- package/dist/chunk-XIVTXS3Y.mjs +439 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +62 -22
- package/dist/index.mjs +11 -11
- package/dist/styles.css +650 -584
- package/package.json +1 -1
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Chevron
|
|
3
|
+
} from "./chunk-ZTRM4HZJ.mjs";
|
|
4
|
+
|
|
5
|
+
// src/atom/AdvancedDateRangePicker/InternalCalendar.tsx
|
|
6
|
+
import { memo, useEffect, useRef, useState } from "react";
|
|
7
|
+
import dayjs from "dayjs";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
var InternalCalendar = ({
|
|
10
|
+
id = "",
|
|
11
|
+
onChange = () => {
|
|
12
|
+
},
|
|
13
|
+
dateRange = ["", ""],
|
|
14
|
+
showSingleCalendar: showSingleCalendarProp = false,
|
|
15
|
+
disablePastDates = false,
|
|
16
|
+
minDate = null,
|
|
17
|
+
maxDate = null,
|
|
18
|
+
minYear = 1900,
|
|
19
|
+
maxYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
|
|
20
|
+
allowSameDates = false
|
|
21
|
+
}) => {
|
|
22
|
+
const onChangeRef = useRef(onChange);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
onChangeRef.current = onChange;
|
|
25
|
+
}, [onChange]);
|
|
26
|
+
const getInitialDate = () => {
|
|
27
|
+
const today2 = /* @__PURE__ */ new Date();
|
|
28
|
+
today2.setHours(0, 0, 0, 0);
|
|
29
|
+
if (dateRange[0]) return new Date(dateRange[0]);
|
|
30
|
+
if (today2.getFullYear() >= minYear && today2.getFullYear() <= maxYear) {
|
|
31
|
+
return today2;
|
|
32
|
+
}
|
|
33
|
+
if (minDate) {
|
|
34
|
+
const minDateTime = new Date(minDate);
|
|
35
|
+
minDateTime.setHours(0, 0, 0, 0);
|
|
36
|
+
return minDateTime;
|
|
37
|
+
}
|
|
38
|
+
return today2;
|
|
39
|
+
};
|
|
40
|
+
const [currentDate, setCurrentDate] = useState(() => getInitialDate());
|
|
41
|
+
const [startDate, setStartDate] = useState(
|
|
42
|
+
dateRange[0] ? new Date(dateRange[0]) : null
|
|
43
|
+
);
|
|
44
|
+
const [endDate, setEndDate] = useState(
|
|
45
|
+
dateRange[0] && dateRange[1] ? new Date(dateRange[1]) : null
|
|
46
|
+
);
|
|
47
|
+
const [hoverDate, setHoverDate] = useState(null);
|
|
48
|
+
const [isSelectingEnd, setIsSelectingEnd] = useState(
|
|
49
|
+
dateRange[0] && !dateRange[1] ? true : false
|
|
50
|
+
);
|
|
51
|
+
const [isMobile, setIsMobile] = useState(false);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
const checkMobile = () => {
|
|
54
|
+
setIsMobile(window.innerWidth <= 768);
|
|
55
|
+
};
|
|
56
|
+
checkMobile();
|
|
57
|
+
window.addEventListener("resize", checkMobile);
|
|
58
|
+
return () => window.removeEventListener("resize", checkMobile);
|
|
59
|
+
}, []);
|
|
60
|
+
const showSingle = showSingleCalendarProp || isMobile;
|
|
61
|
+
const prevRangeRef = useRef(dateRange);
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
const isSameRange = dateRange[0] === prevRangeRef.current[0] && dateRange[1] === prevRangeRef.current[1];
|
|
64
|
+
if (isSameRange) return;
|
|
65
|
+
prevRangeRef.current = dateRange;
|
|
66
|
+
const nextStart = dateRange[0] ? new Date(dateRange[0]) : null;
|
|
67
|
+
const nextEnd = dateRange[1] ? new Date(dateRange[1]) : null;
|
|
68
|
+
setStartDate(nextStart);
|
|
69
|
+
setEndDate(nextEnd);
|
|
70
|
+
if (nextStart) {
|
|
71
|
+
const startMonth = nextStart.getFullYear() * 12 + nextStart.getMonth();
|
|
72
|
+
const currentMonthVal = currentDate.getFullYear() * 12 + currentDate.getMonth();
|
|
73
|
+
const isVisibleInFirst = startMonth === currentMonthVal;
|
|
74
|
+
const isVisibleInSecond = !showSingle && startMonth === currentMonthVal + 1;
|
|
75
|
+
if (!isVisibleInFirst && !isVisibleInSecond) {
|
|
76
|
+
setCurrentDate(new Date(nextStart.getFullYear(), nextStart.getMonth(), 1));
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}, [dateRange, showSingle]);
|
|
80
|
+
const today = /* @__PURE__ */ new Date();
|
|
81
|
+
today.setHours(0, 0, 0, 0);
|
|
82
|
+
const firstMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
|
|
83
|
+
const secondMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
|
|
84
|
+
const monthNames = [
|
|
85
|
+
"January",
|
|
86
|
+
"February",
|
|
87
|
+
"March",
|
|
88
|
+
"April",
|
|
89
|
+
"May",
|
|
90
|
+
"June",
|
|
91
|
+
"July",
|
|
92
|
+
"August",
|
|
93
|
+
"September",
|
|
94
|
+
"October",
|
|
95
|
+
"November",
|
|
96
|
+
"December"
|
|
97
|
+
];
|
|
98
|
+
const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
99
|
+
const generateCalendarDays = (monthDate) => {
|
|
100
|
+
const year = monthDate.getFullYear();
|
|
101
|
+
const month = monthDate.getMonth();
|
|
102
|
+
const firstDay = new Date(year, month, 1);
|
|
103
|
+
const lastDay = new Date(year, month + 1, 0);
|
|
104
|
+
const daysInMonth = lastDay.getDate();
|
|
105
|
+
const startingDayOfWeek = firstDay.getDay();
|
|
106
|
+
const days = [];
|
|
107
|
+
for (let i = 0; i < startingDayOfWeek; i++) days.push(null);
|
|
108
|
+
for (let day = 1; day <= daysInMonth; day++) days.push(new Date(year, month, day));
|
|
109
|
+
return days;
|
|
110
|
+
};
|
|
111
|
+
const isSameDate = (d1, d2) => {
|
|
112
|
+
if (!d1 || !d2) return false;
|
|
113
|
+
return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
|
|
114
|
+
};
|
|
115
|
+
const isDateDisabled = (date) => {
|
|
116
|
+
if (!date) return false;
|
|
117
|
+
const checkDate = new Date(date);
|
|
118
|
+
checkDate.setHours(0, 0, 0, 0);
|
|
119
|
+
if (disablePastDates && checkDate < today) return true;
|
|
120
|
+
if (minDate) {
|
|
121
|
+
const m = new Date(minDate);
|
|
122
|
+
m.setHours(0, 0, 0, 0);
|
|
123
|
+
if (checkDate < m) return true;
|
|
124
|
+
}
|
|
125
|
+
if (maxDate) {
|
|
126
|
+
const m = new Date(maxDate);
|
|
127
|
+
m.setHours(0, 0, 0, 0);
|
|
128
|
+
if (checkDate > m) return true;
|
|
129
|
+
}
|
|
130
|
+
return false;
|
|
131
|
+
};
|
|
132
|
+
const isDateBetweenRange = (date) => {
|
|
133
|
+
if (!startDate || !date) return false;
|
|
134
|
+
const comp = endDate || hoverDate;
|
|
135
|
+
if (!comp) return false;
|
|
136
|
+
const s = startDate < comp ? startDate : comp;
|
|
137
|
+
const e = startDate < comp ? comp : startDate;
|
|
138
|
+
return date > s && date < e;
|
|
139
|
+
};
|
|
140
|
+
const isDateInRange = (date) => {
|
|
141
|
+
if (!startDate || !date) return false;
|
|
142
|
+
const comp = endDate || hoverDate;
|
|
143
|
+
if (!comp) return false;
|
|
144
|
+
const s = startDate < comp ? startDate : comp;
|
|
145
|
+
const e = startDate < comp ? comp : startDate;
|
|
146
|
+
return date >= s && date <= e;
|
|
147
|
+
};
|
|
148
|
+
const handleDateClick = (date) => {
|
|
149
|
+
if (isDateDisabled(date)) return;
|
|
150
|
+
let nextStart = startDate;
|
|
151
|
+
let nextEnd = endDate;
|
|
152
|
+
const isSame = startDate && dayjs(date).isSame(startDate, "day");
|
|
153
|
+
if (!allowSameDates && isSame) {
|
|
154
|
+
setStartDate(null);
|
|
155
|
+
setEndDate(null);
|
|
156
|
+
setIsSelectingEnd(false);
|
|
157
|
+
onChangeRef.current(["", ""]);
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
if (!startDate || startDate && endDate) {
|
|
161
|
+
nextStart = date;
|
|
162
|
+
nextEnd = null;
|
|
163
|
+
setStartDate(nextStart);
|
|
164
|
+
setEndDate(nextEnd);
|
|
165
|
+
setIsSelectingEnd(true);
|
|
166
|
+
} else {
|
|
167
|
+
if (date < startDate) {
|
|
168
|
+
nextEnd = startDate;
|
|
169
|
+
nextStart = date;
|
|
170
|
+
} else {
|
|
171
|
+
nextEnd = date;
|
|
172
|
+
}
|
|
173
|
+
setStartDate(nextStart);
|
|
174
|
+
setEndDate(nextEnd);
|
|
175
|
+
setIsSelectingEnd(false);
|
|
176
|
+
}
|
|
177
|
+
onChangeRef.current([
|
|
178
|
+
nextStart ? dayjs(nextStart).format("D MMM, YYYY") : "",
|
|
179
|
+
nextEnd ? dayjs(nextEnd).format("D MMM, YYYY") : ""
|
|
180
|
+
]);
|
|
181
|
+
};
|
|
182
|
+
const handleDateHover = (date) => {
|
|
183
|
+
if (isDateDisabled(date)) return;
|
|
184
|
+
if (isSelectingEnd && startDate && !endDate) setHoverDate(date);
|
|
185
|
+
};
|
|
186
|
+
const navigateMonth = (direction) => {
|
|
187
|
+
const newDate = new Date(currentDate);
|
|
188
|
+
newDate.setMonth(currentDate.getMonth() + direction);
|
|
189
|
+
setCurrentDate(newDate);
|
|
190
|
+
};
|
|
191
|
+
const renderCalendar = (monthDate) => {
|
|
192
|
+
const days = generateCalendarDays(monthDate);
|
|
193
|
+
const monthName = monthNames[monthDate.getMonth()];
|
|
194
|
+
const year = monthDate.getFullYear();
|
|
195
|
+
return /* @__PURE__ */ jsxs("div", { className: "tw-flex-1 tw-mb-2", children: [
|
|
196
|
+
/* @__PURE__ */ jsx("div", { className: "tw-text-center tw-mb-4", children: /* @__PURE__ */ jsxs("h3", { className: "tw-typography-footNoteBold tw-text-gray-900 tw-m-0", children: [
|
|
197
|
+
monthName,
|
|
198
|
+
" ",
|
|
199
|
+
year
|
|
200
|
+
] }) }),
|
|
201
|
+
/* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "tw-py-2 tw-text-center tw-typography-caption2 tw-text-gray-500", children: day }, day)) }),
|
|
202
|
+
/* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
|
|
203
|
+
if (!date) return /* @__PURE__ */ jsx("div", { className: "tw-h-7" }, index);
|
|
204
|
+
const isStart = isSameDate(date, startDate);
|
|
205
|
+
const isEnd = isSameDate(date, endDate);
|
|
206
|
+
const isInRange = isDateBetweenRange(date);
|
|
207
|
+
const isSelected = isDateInRange(date);
|
|
208
|
+
const isDisabled = isDateDisabled(date);
|
|
209
|
+
const isHovering = isSelectingEnd && hoverDate && isSameDate(date, hoverDate);
|
|
210
|
+
let cellClasses = "tw-relative tw-z-20 tw-h-7 tw-w-7 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold tw-cursor-pointer tw-transition-all ";
|
|
211
|
+
if (isDisabled) {
|
|
212
|
+
cellClasses += "tw-text-gray-300 tw-cursor-not-allowed ";
|
|
213
|
+
} else if (isStart || isEnd) {
|
|
214
|
+
cellClasses += "tw-bg-black tw-text-white tw-rounded-full ";
|
|
215
|
+
} else if (isInRange) {
|
|
216
|
+
cellClasses += "tw-text-gray-900 ";
|
|
217
|
+
} else {
|
|
218
|
+
cellClasses += "tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-full ";
|
|
219
|
+
}
|
|
220
|
+
if (isHovering && !isEnd) {
|
|
221
|
+
cellClasses += "tw-border-2 tw-border-gray-400 tw-border-dashed ";
|
|
222
|
+
}
|
|
223
|
+
return /* @__PURE__ */ jsxs("div", { className: "tw-relative tw-flex tw-justify-center", children: [
|
|
224
|
+
isInRange && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-1 tw-inset-x-0 tw-bg-[#E5E9ED] tw-z-10" }),
|
|
225
|
+
isStart && endDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-1 tw-right-0 tw-left-1/2 tw-bg-[#E5E9ED] tw-z-10" }),
|
|
226
|
+
isEnd && startDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-inset-y-1 tw-left-0 tw-right-1/2 tw-bg-[#E5E9ED] tw-z-10" }),
|
|
227
|
+
/* @__PURE__ */ jsx(
|
|
228
|
+
"div",
|
|
229
|
+
{
|
|
230
|
+
className: cellClasses,
|
|
231
|
+
onClick: () => handleDateClick(date),
|
|
232
|
+
onMouseEnter: () => handleDateHover(date),
|
|
233
|
+
children: date.getDate()
|
|
234
|
+
}
|
|
235
|
+
)
|
|
236
|
+
] }, date.toISOString());
|
|
237
|
+
}) })
|
|
238
|
+
] });
|
|
239
|
+
};
|
|
240
|
+
return /* @__PURE__ */ jsxs("div", { className: "tw-relative tw-bg-white tw-w-full", children: [
|
|
241
|
+
/* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-justify-between tw-absolute tw-inset-x-0 tw-top-0 tw-z-30 tw-px-4", children: [
|
|
242
|
+
/* @__PURE__ */ jsx(
|
|
243
|
+
"div",
|
|
244
|
+
{
|
|
245
|
+
className: "tw-cursor-pointer tw-p-2 tw-rounded-full hover:tw-bg-gray-100",
|
|
246
|
+
onClick: () => navigateMonth(-1),
|
|
247
|
+
children: /* @__PURE__ */ jsx(Chevron, { size: "medium" })
|
|
248
|
+
}
|
|
249
|
+
),
|
|
250
|
+
/* @__PURE__ */ jsx(
|
|
251
|
+
"div",
|
|
252
|
+
{
|
|
253
|
+
className: "tw-cursor-pointer tw-p-2 tw-rounded-full hover:tw-bg-gray-100",
|
|
254
|
+
onClick: () => navigateMonth(1),
|
|
255
|
+
children: /* @__PURE__ */ jsx(Chevron, { size: "medium", className: "tw-rotate-180" })
|
|
256
|
+
}
|
|
257
|
+
)
|
|
258
|
+
] }),
|
|
259
|
+
/* @__PURE__ */ jsxs("div", { className: "tw-flex tw-gap-8 tw-pt-2", children: [
|
|
260
|
+
renderCalendar(firstMonth),
|
|
261
|
+
!showSingle && renderCalendar(secondMonth)
|
|
262
|
+
] })
|
|
263
|
+
] });
|
|
264
|
+
};
|
|
265
|
+
var InternalCalendar_default = memo(InternalCalendar);
|
|
266
|
+
|
|
267
|
+
export {
|
|
268
|
+
InternalCalendar_default
|
|
269
|
+
};
|
|
@@ -0,0 +1,289 @@
|
|
|
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", "hasRowSpacing": "Table-module__hasRowSpacing___bGT0u", "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
|
+
rowSpacing
|
|
165
|
+
} = _a, rest = __objRest(_a, [
|
|
166
|
+
"size",
|
|
167
|
+
"variant",
|
|
168
|
+
"isAccordion",
|
|
169
|
+
"isToolbar",
|
|
170
|
+
"className",
|
|
171
|
+
"pagination",
|
|
172
|
+
"loading",
|
|
173
|
+
"total",
|
|
174
|
+
"current",
|
|
175
|
+
"pageSize",
|
|
176
|
+
"onPaginationChange",
|
|
177
|
+
"columns",
|
|
178
|
+
"rowSelection",
|
|
179
|
+
"rowKey",
|
|
180
|
+
"onRow",
|
|
181
|
+
"dataSource",
|
|
182
|
+
"emptyState",
|
|
183
|
+
"hideHeader",
|
|
184
|
+
"loadingIndicator",
|
|
185
|
+
"style",
|
|
186
|
+
"headerCellClassName",
|
|
187
|
+
"bodyCellClassName",
|
|
188
|
+
"rowClassName",
|
|
189
|
+
"rowSpacing"
|
|
190
|
+
]);
|
|
191
|
+
const isChildVariant = isAccordion || isToolbar;
|
|
192
|
+
const resolvedPagination = buildPagination(pagination, {
|
|
193
|
+
total,
|
|
194
|
+
current,
|
|
195
|
+
pageSize,
|
|
196
|
+
onChange: onPaginationChange
|
|
197
|
+
});
|
|
198
|
+
const processedColumns = React.useMemo(
|
|
199
|
+
() => processColumns(columns, headerCellClassName, bodyCellClassName),
|
|
200
|
+
[columns, headerCellClassName, bodyCellClassName]
|
|
201
|
+
);
|
|
202
|
+
const resolvedOnRow = React.useMemo(() => {
|
|
203
|
+
const onChange = rowSelection == null ? void 0 : rowSelection.onChange;
|
|
204
|
+
if (variant !== "selectable" || !onChange) return onRow;
|
|
205
|
+
return (record, index) => {
|
|
206
|
+
var _a2;
|
|
207
|
+
const base = (_a2 = onRow == null ? void 0 : onRow(record, index)) != null ? _a2 : {};
|
|
208
|
+
const getKey = (r, i) => typeof rowKey === "function" ? rowKey(r, i) : r[rowKey];
|
|
209
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
210
|
+
style: __spreadValues({ cursor: "pointer" }, base.style),
|
|
211
|
+
onClick: (e) => {
|
|
212
|
+
var _a3, _b2;
|
|
213
|
+
(_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
|
|
214
|
+
const key = getKey(record, index);
|
|
215
|
+
const current2 = (_b2 = rowSelection.selectedRowKeys) != null ? _b2 : [];
|
|
216
|
+
const isSelected = current2.some((k) => k === key);
|
|
217
|
+
const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
|
|
218
|
+
const newRows = (dataSource != null ? dataSource : []).filter(
|
|
219
|
+
(r) => newKeys.some((k) => k === getKey(r))
|
|
220
|
+
);
|
|
221
|
+
onChange(newKeys, newRows, { type: "single" });
|
|
222
|
+
}
|
|
223
|
+
});
|
|
224
|
+
};
|
|
225
|
+
}, [variant, rowSelection, rowKey, onRow, dataSource]);
|
|
226
|
+
const hasRowSpacing = rowSpacing !== void 0;
|
|
227
|
+
const rowSpacingValue = typeof rowSpacing === "number" ? `${rowSpacing}px` : rowSpacing;
|
|
228
|
+
const wrapperStyle = React.useMemo(() => {
|
|
229
|
+
if (!hasRowSpacing) return style;
|
|
230
|
+
return __spreadProps(__spreadValues({}, style), {
|
|
231
|
+
"--lumina-table-row-spacing": rowSpacingValue
|
|
232
|
+
});
|
|
233
|
+
}, [style, hasRowSpacing, rowSpacingValue]);
|
|
234
|
+
return /* @__PURE__ */ jsx(
|
|
235
|
+
"div",
|
|
236
|
+
{
|
|
237
|
+
className: clsx(
|
|
238
|
+
Table_module_default.tableWrapper,
|
|
239
|
+
Table_module_default.showHoverEffect,
|
|
240
|
+
{
|
|
241
|
+
[Table_module_default.isAccordion]: isAccordion,
|
|
242
|
+
[Table_module_default.isToolbar]: isToolbar,
|
|
243
|
+
[Table_module_default.hasCustomHeaderCell]: !!headerCellClassName,
|
|
244
|
+
[Table_module_default.hasCustomBodyCell]: !!bodyCellClassName,
|
|
245
|
+
[Table_module_default.hasRowSpacing]: hasRowSpacing
|
|
246
|
+
},
|
|
247
|
+
className
|
|
248
|
+
),
|
|
249
|
+
style: wrapperStyle,
|
|
250
|
+
"data-testid": "lumina-table",
|
|
251
|
+
children: /* @__PURE__ */ jsx(
|
|
252
|
+
AntTable,
|
|
253
|
+
__spreadProps(__spreadValues({
|
|
254
|
+
className: Table_module_default.table,
|
|
255
|
+
size,
|
|
256
|
+
pagination: resolvedPagination,
|
|
257
|
+
columns: processedColumns,
|
|
258
|
+
rowSelection,
|
|
259
|
+
rowKey,
|
|
260
|
+
onRow: resolvedOnRow,
|
|
261
|
+
dataSource,
|
|
262
|
+
showHeader: !hideHeader,
|
|
263
|
+
locale: {
|
|
264
|
+
emptyText: loading && loadingIndicator ? loadingIndicator : loading ? " " : emptyState
|
|
265
|
+
}
|
|
266
|
+
}, rest), {
|
|
267
|
+
loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
|
|
268
|
+
rowClassName: (record, index) => {
|
|
269
|
+
var _a2;
|
|
270
|
+
return clsx(
|
|
271
|
+
{
|
|
272
|
+
[Table_module_default.firstRow]: index === 0,
|
|
273
|
+
[Table_module_default.lastRow]: index === ((_a2 = dataSource == null ? void 0 : dataSource.length) != null ? _a2 : 0) - 1
|
|
274
|
+
},
|
|
275
|
+
typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName
|
|
276
|
+
);
|
|
277
|
+
}
|
|
278
|
+
})
|
|
279
|
+
)
|
|
280
|
+
}
|
|
281
|
+
);
|
|
282
|
+
}
|
|
283
|
+
Table.displayName = "Table";
|
|
284
|
+
var Table_default = Table;
|
|
285
|
+
|
|
286
|
+
export {
|
|
287
|
+
Table,
|
|
288
|
+
Table_default
|
|
289
|
+
};
|