next-helios-fe 1.1.24 → 1.1.26
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/components/table/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/table/index.tsx +200 -111
package/package.json
CHANGED
|
@@ -11,6 +11,7 @@ interface TableProps {
|
|
|
11
11
|
header: {
|
|
12
12
|
title: string;
|
|
13
13
|
key: string;
|
|
14
|
+
type?: "basic" | "category";
|
|
14
15
|
render?: (item: any) => React.ReactNode;
|
|
15
16
|
}[];
|
|
16
17
|
data: {
|
|
@@ -150,43 +151,112 @@ export const Table: TableComponentProps = ({
|
|
|
150
151
|
className="px-4 py-2 bg-secondary-bg font-medium text-left whitespace-nowrap"
|
|
151
152
|
>
|
|
152
153
|
<div className="flex flex-col">
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
154
|
+
<div className="flex items-center gap-2">
|
|
155
|
+
<button
|
|
156
|
+
type="button"
|
|
157
|
+
className="group/header flex justify-between items-center gap-4 w-full"
|
|
158
|
+
onClick={() => {
|
|
159
|
+
setSortBy([
|
|
160
|
+
sortBy[0] !== item.key
|
|
161
|
+
? item.key
|
|
162
|
+
: sortBy[0] === item.key && sortBy[1] === "asc"
|
|
163
|
+
? item.key
|
|
164
|
+
: "",
|
|
165
|
+
sortBy[0] !== item.key
|
|
166
|
+
? "asc"
|
|
167
|
+
: sortBy[0] === item.key && sortBy[1] === "asc"
|
|
168
|
+
? "desc"
|
|
169
|
+
: "",
|
|
170
|
+
]);
|
|
171
|
+
}}
|
|
172
|
+
>
|
|
173
|
+
{item.title}
|
|
174
|
+
<Icon
|
|
175
|
+
icon={`mi:${
|
|
176
|
+
item.key === sortBy[0] && sortBy[1] === "asc"
|
|
177
|
+
? "arrow-up"
|
|
178
|
+
: item.key === sortBy[0] && sortBy[1] === "desc"
|
|
179
|
+
? "arrow-down"
|
|
180
|
+
: "sort"
|
|
181
|
+
}`}
|
|
182
|
+
className={`group-hover/header:visible ${
|
|
183
|
+
item.key === sortBy[0] ? "visible" : "invisible"
|
|
184
|
+
}`}
|
|
185
|
+
/>
|
|
186
|
+
</button>
|
|
187
|
+
{item?.type === "category" && (
|
|
188
|
+
<div className="font-normal">
|
|
189
|
+
<Dropdown
|
|
190
|
+
trigger={
|
|
191
|
+
<button
|
|
192
|
+
type="button"
|
|
193
|
+
className="flex items-center rounded-full hover:bg-secondary-light"
|
|
194
|
+
>
|
|
195
|
+
<Icon icon="ion:filter" />
|
|
196
|
+
</button>
|
|
197
|
+
}
|
|
198
|
+
>
|
|
199
|
+
<Dropdown.Item
|
|
200
|
+
active={
|
|
201
|
+
filter.find((filterItem) => filterItem.key === item.key)
|
|
202
|
+
?.value === ""
|
|
203
|
+
}
|
|
204
|
+
onClick={() => {
|
|
205
|
+
setFilter(
|
|
206
|
+
filter.map((filterItem) => {
|
|
207
|
+
return filterItem.key === item.key
|
|
208
|
+
? { ...filterItem, value: "" }
|
|
209
|
+
: filterItem;
|
|
210
|
+
})
|
|
211
|
+
);
|
|
212
|
+
}}
|
|
213
|
+
>
|
|
214
|
+
All
|
|
215
|
+
</Dropdown.Item>
|
|
216
|
+
{data
|
|
217
|
+
.map(
|
|
218
|
+
(dataItem) =>
|
|
219
|
+
dataItem[item.key as keyof typeof dataItem]
|
|
220
|
+
)
|
|
221
|
+
.filter(
|
|
222
|
+
(value, index, self) => self.indexOf(value) === index
|
|
223
|
+
)
|
|
224
|
+
.map((value) => {
|
|
225
|
+
return (
|
|
226
|
+
<Dropdown.Item
|
|
227
|
+
key={value}
|
|
228
|
+
active={
|
|
229
|
+
filter.find(
|
|
230
|
+
(filterItem) => filterItem.key === item.key
|
|
231
|
+
)?.value === value
|
|
232
|
+
}
|
|
233
|
+
onClick={() => {
|
|
234
|
+
setFilter(
|
|
235
|
+
filter.map((filterItem) => {
|
|
236
|
+
return filterItem.key === item.key
|
|
237
|
+
? { ...filterItem, value: value }
|
|
238
|
+
: filterItem;
|
|
239
|
+
})
|
|
240
|
+
);
|
|
241
|
+
}}
|
|
242
|
+
>
|
|
243
|
+
{value}
|
|
244
|
+
</Dropdown.Item>
|
|
245
|
+
);
|
|
246
|
+
})}
|
|
247
|
+
</Dropdown>
|
|
248
|
+
</div>
|
|
249
|
+
)}
|
|
250
|
+
</div>
|
|
185
251
|
{options?.toolbar?.columnSearch?.show !== false && (
|
|
186
252
|
<div className="relative flex items-center">
|
|
253
|
+
<Icon
|
|
254
|
+
icon="ic:round-search"
|
|
255
|
+
className="absolute text-sm text-slate-400"
|
|
256
|
+
/>
|
|
187
257
|
<input
|
|
188
258
|
type="search"
|
|
189
|
-
className="w-full
|
|
259
|
+
className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
|
|
190
260
|
placeholder="search.."
|
|
191
261
|
value={
|
|
192
262
|
filter.find((filterItem) => filterItem.key === item.key)
|
|
@@ -202,10 +272,23 @@ export const Table: TableComponentProps = ({
|
|
|
202
272
|
);
|
|
203
273
|
}}
|
|
204
274
|
/>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
275
|
+
{filter.find((filterItem) => filterItem.key === item.key)
|
|
276
|
+
?.value && (
|
|
277
|
+
<button
|
|
278
|
+
className="absolute right-0 rounded-full text-slate-400 hover:bg-secondary-light"
|
|
279
|
+
onClick={() => {
|
|
280
|
+
setFilter(
|
|
281
|
+
filter.map((filterItem) => {
|
|
282
|
+
return filterItem.key === item.key
|
|
283
|
+
? { ...filterItem, value: "" }
|
|
284
|
+
: filterItem;
|
|
285
|
+
})
|
|
286
|
+
);
|
|
287
|
+
}}
|
|
288
|
+
>
|
|
289
|
+
<Icon icon="pajamas:close" className="text-sm" />
|
|
290
|
+
</button>
|
|
291
|
+
)}
|
|
209
292
|
</div>
|
|
210
293
|
)}
|
|
211
294
|
</div>
|
|
@@ -291,82 +374,88 @@ export const Table: TableComponentProps = ({
|
|
|
291
374
|
|
|
292
375
|
return (
|
|
293
376
|
<div className="flex flex-col gap-6 h-full">
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
{header.map((item) => {
|
|
321
|
-
return (
|
|
322
|
-
<Dropdown.Item
|
|
323
|
-
key={item.key}
|
|
324
|
-
onClick={() => {
|
|
325
|
-
if (excluded.includes(item.key)) {
|
|
326
|
-
setExcluded(
|
|
327
|
-
excluded.filter((prev) => prev !== item.key)
|
|
328
|
-
);
|
|
329
|
-
} else {
|
|
330
|
-
setExcluded([...excluded, item.key]);
|
|
331
|
-
}
|
|
332
|
-
}}
|
|
377
|
+
{(title ||
|
|
378
|
+
options?.toolbar?.addData?.show !== false ||
|
|
379
|
+
options?.toolbar?.filter?.show !== false ||
|
|
380
|
+
options?.toolbar?.search?.show !== false ||
|
|
381
|
+
options?.toolbar?.export?.show !== false) && (
|
|
382
|
+
<div className="flex justify-between items-center gap-4 w-full h-fit">
|
|
383
|
+
{title && <span className="text-lg">{title}</span>}
|
|
384
|
+
<div className="flex items-center gap-4">
|
|
385
|
+
{options?.toolbar?.addData?.show !== false && (
|
|
386
|
+
<button
|
|
387
|
+
type="button"
|
|
388
|
+
className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
|
|
389
|
+
onClick={(e) => {
|
|
390
|
+
options?.toolbar?.addData?.onClick &&
|
|
391
|
+
options?.toolbar?.addData?.onClick(e);
|
|
392
|
+
}}
|
|
393
|
+
>
|
|
394
|
+
<Icon icon="ic:round-plus" className="text-2xl" />
|
|
395
|
+
</button>
|
|
396
|
+
)}
|
|
397
|
+
{options?.toolbar?.filter?.show !== false && (
|
|
398
|
+
<Dropdown
|
|
399
|
+
trigger={
|
|
400
|
+
<button
|
|
401
|
+
type="button"
|
|
402
|
+
className="px-2 py-2 rounded-full hover:bg-secondary-light"
|
|
333
403
|
>
|
|
334
|
-
<
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
404
|
+
<Icon icon="mage:filter" className="text-xl" />
|
|
405
|
+
</button>
|
|
406
|
+
}
|
|
407
|
+
>
|
|
408
|
+
{header.map((item) => {
|
|
409
|
+
return (
|
|
410
|
+
<Dropdown.Item
|
|
411
|
+
key={item.key}
|
|
412
|
+
onClick={() => {
|
|
413
|
+
if (excluded.includes(item.key)) {
|
|
414
|
+
setExcluded(
|
|
415
|
+
excluded.filter((prev) => prev !== item.key)
|
|
416
|
+
);
|
|
417
|
+
} else {
|
|
418
|
+
setExcluded([...excluded, item.key]);
|
|
419
|
+
}
|
|
420
|
+
}}
|
|
421
|
+
>
|
|
422
|
+
<Form.Checkbox
|
|
423
|
+
options={{ disableHover: true }}
|
|
424
|
+
label={item.title}
|
|
425
|
+
checked={!excluded.includes(item.key)}
|
|
426
|
+
/>
|
|
427
|
+
</Dropdown.Item>
|
|
428
|
+
);
|
|
429
|
+
})}
|
|
430
|
+
</Dropdown>
|
|
431
|
+
)}
|
|
432
|
+
{options?.toolbar?.search?.show !== false && (
|
|
433
|
+
<Form.Search
|
|
434
|
+
options={{ width: "fit" }}
|
|
435
|
+
placeholder="search.."
|
|
436
|
+
value={search}
|
|
437
|
+
onChange={(e) => {
|
|
438
|
+
setSearch(e.target.value);
|
|
439
|
+
}}
|
|
440
|
+
/>
|
|
441
|
+
)}
|
|
442
|
+
{options?.toolbar?.export?.show !== false && (
|
|
443
|
+
<Button
|
|
444
|
+
type="button"
|
|
445
|
+
options={{ variant: "primary", width: "fit" }}
|
|
446
|
+
onClick={() => {
|
|
447
|
+
exportToExcel(
|
|
448
|
+
filteredData,
|
|
449
|
+
`${title}-data_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}`
|
|
450
|
+
);
|
|
451
|
+
}}
|
|
452
|
+
>
|
|
453
|
+
Export
|
|
454
|
+
</Button>
|
|
455
|
+
)}
|
|
456
|
+
</div>
|
|
368
457
|
</div>
|
|
369
|
-
|
|
458
|
+
)}
|
|
370
459
|
<div
|
|
371
460
|
className={`overflow-auto ${height} ${
|
|
372
461
|
options?.enableBorder && "border rounded-md"
|