next-helios-fe 1.1.22 → 1.1.24
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 +0 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/table/index.tsx +111 -200
package/package.json
CHANGED
|
@@ -11,7 +11,6 @@ interface TableProps {
|
|
|
11
11
|
header: {
|
|
12
12
|
title: string;
|
|
13
13
|
key: string;
|
|
14
|
-
type?: "basic" | "category";
|
|
15
14
|
render?: (item: any) => React.ReactNode;
|
|
16
15
|
}[];
|
|
17
16
|
data: {
|
|
@@ -151,112 +150,43 @@ export const Table: TableComponentProps = ({
|
|
|
151
150
|
className="px-4 py-2 bg-secondary-bg font-medium text-left whitespace-nowrap"
|
|
152
151
|
>
|
|
153
152
|
<div className="flex flex-col">
|
|
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
|
-
|
|
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>
|
|
153
|
+
<button
|
|
154
|
+
type="button"
|
|
155
|
+
className="group/header flex justify-between items-center gap-4 w-full"
|
|
156
|
+
onClick={() => {
|
|
157
|
+
setSortBy([
|
|
158
|
+
sortBy[0] !== item.key
|
|
159
|
+
? item.key
|
|
160
|
+
: sortBy[0] === item.key && sortBy[1] === "asc"
|
|
161
|
+
? item.key
|
|
162
|
+
: "",
|
|
163
|
+
sortBy[0] !== item.key
|
|
164
|
+
? "asc"
|
|
165
|
+
: sortBy[0] === item.key && sortBy[1] === "asc"
|
|
166
|
+
? "desc"
|
|
167
|
+
: "",
|
|
168
|
+
]);
|
|
169
|
+
}}
|
|
170
|
+
>
|
|
171
|
+
{item.title}
|
|
172
|
+
<Icon
|
|
173
|
+
icon={`mi:${
|
|
174
|
+
item.key === sortBy[0] && sortBy[1] === "asc"
|
|
175
|
+
? "arrow-up"
|
|
176
|
+
: item.key === sortBy[0] && sortBy[1] === "desc"
|
|
177
|
+
? "arrow-down"
|
|
178
|
+
: "sort"
|
|
179
|
+
}`}
|
|
180
|
+
className={`group-hover/header:visible ${
|
|
181
|
+
item.key === sortBy[0] ? "visible" : "invisible"
|
|
182
|
+
}`}
|
|
183
|
+
/>
|
|
184
|
+
</button>
|
|
251
185
|
{options?.toolbar?.columnSearch?.show !== false && (
|
|
252
186
|
<div className="relative flex items-center">
|
|
253
|
-
<Icon
|
|
254
|
-
icon="ic:round-search"
|
|
255
|
-
className="absolute text-sm text-slate-400"
|
|
256
|
-
/>
|
|
257
187
|
<input
|
|
258
188
|
type="search"
|
|
259
|
-
className="w-full
|
|
189
|
+
className="w-full ps-6 pe-0 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"
|
|
260
190
|
placeholder="search.."
|
|
261
191
|
value={
|
|
262
192
|
filter.find((filterItem) => filterItem.key === item.key)
|
|
@@ -272,23 +202,10 @@ export const Table: TableComponentProps = ({
|
|
|
272
202
|
);
|
|
273
203
|
}}
|
|
274
204
|
/>
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
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
|
-
)}
|
|
205
|
+
<Icon
|
|
206
|
+
icon="ic:round-search"
|
|
207
|
+
className="absolute text-sm text-slate-400"
|
|
208
|
+
/>
|
|
292
209
|
</div>
|
|
293
210
|
)}
|
|
294
211
|
</div>
|
|
@@ -374,88 +291,82 @@ export const Table: TableComponentProps = ({
|
|
|
374
291
|
|
|
375
292
|
return (
|
|
376
293
|
<div className="flex flex-col gap-6 h-full">
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
294
|
+
<div className="flex justify-between items-center gap-4 w-full h-fit">
|
|
295
|
+
<span className="text-lg">{title}</span>
|
|
296
|
+
<div className="flex items-center gap-4">
|
|
297
|
+
{options?.toolbar?.addData?.show !== false && (
|
|
298
|
+
<button
|
|
299
|
+
type="button"
|
|
300
|
+
className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
|
|
301
|
+
onClick={(e) => {
|
|
302
|
+
options?.toolbar?.addData?.onClick &&
|
|
303
|
+
options?.toolbar?.addData?.onClick(e);
|
|
304
|
+
}}
|
|
305
|
+
>
|
|
306
|
+
<Icon icon="ic:round-plus" className="text-2xl" />
|
|
307
|
+
</button>
|
|
308
|
+
)}
|
|
309
|
+
{options?.toolbar?.filter?.show !== false && (
|
|
310
|
+
<Dropdown
|
|
311
|
+
trigger={
|
|
312
|
+
<button
|
|
313
|
+
type="button"
|
|
314
|
+
className="px-2 py-2 rounded-full hover:bg-secondary-light"
|
|
315
|
+
>
|
|
316
|
+
<Icon icon="mage:filter" className="text-xl" />
|
|
317
|
+
</button>
|
|
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
|
+
}}
|
|
403
333
|
>
|
|
404
|
-
<
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
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>
|
|
334
|
+
<Form.Checkbox
|
|
335
|
+
options={{ disableHover: true }}
|
|
336
|
+
label={item.title}
|
|
337
|
+
checked={!excluded.includes(item.key)}
|
|
338
|
+
/>
|
|
339
|
+
</Dropdown.Item>
|
|
340
|
+
);
|
|
341
|
+
})}
|
|
342
|
+
</Dropdown>
|
|
343
|
+
)}
|
|
344
|
+
{options?.toolbar?.search?.show !== false && (
|
|
345
|
+
<Form.Search
|
|
346
|
+
options={{ width: "fit" }}
|
|
347
|
+
placeholder="search.."
|
|
348
|
+
value={search}
|
|
349
|
+
onChange={(e) => {
|
|
350
|
+
setSearch(e.target.value);
|
|
351
|
+
}}
|
|
352
|
+
/>
|
|
353
|
+
)}
|
|
354
|
+
{options?.toolbar?.export?.show !== false && (
|
|
355
|
+
<Button
|
|
356
|
+
type="button"
|
|
357
|
+
options={{ variant: "primary", width: "fit" }}
|
|
358
|
+
onClick={() => {
|
|
359
|
+
exportToExcel(
|
|
360
|
+
filteredData,
|
|
361
|
+
`${title}-data_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}`
|
|
362
|
+
);
|
|
363
|
+
}}
|
|
364
|
+
>
|
|
365
|
+
Export
|
|
366
|
+
</Button>
|
|
367
|
+
)}
|
|
457
368
|
</div>
|
|
458
|
-
|
|
369
|
+
</div>
|
|
459
370
|
<div
|
|
460
371
|
className={`overflow-auto ${height} ${
|
|
461
372
|
options?.enableBorder && "border rounded-md"
|