next-helios-fe 1.8.121 → 1.8.123

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.
Files changed (4) hide show
  1. package/dist/components/table/index.d.ts +16 -11
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/table/index.tsx +188 -132
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.121",
3
+ "version": "1.8.123",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/table/index.tsx CHANGED
@@ -71,17 +71,20 @@ interface TableProps {
71
71
  };
72
72
  loading?: boolean;
73
73
  actionColumn?: (e?: any) => React.ReactNode;
74
- getDynamicTableValue?: (e: {
75
- search: string;
76
- page: number;
77
- dataOffset: number;
78
- maxRow: number;
79
- filter: any[];
80
- categoryFilter: any[];
81
- sortBy: any;
82
- }) => void;
83
- setDynamicTableValue?: {
84
- totalData: number;
74
+ dynamicTable?: {
75
+ getValue?: (value: {
76
+ search: string;
77
+ page: number;
78
+ dataOffset: number;
79
+ maxRow: number;
80
+ filter: any[];
81
+ categoryFilter: any[];
82
+ sortBy: any;
83
+ }) => void;
84
+ setValue?: {
85
+ totalData?: number;
86
+ categoryFilter?: { [key: string]: (string | number)[] };
87
+ };
85
88
  };
86
89
  }
87
90
 
@@ -97,8 +100,7 @@ export const Table: TableComponentProps = ({
97
100
  checkbox,
98
101
  loading,
99
102
  actionColumn,
100
- getDynamicTableValue,
101
- setDynamicTableValue,
103
+ dynamicTable,
102
104
  }) => {
103
105
  const paginationRef = useRef<HTMLDivElement>(null);
104
106
  const [excludedColumn, setExcludedColumn] = useState<string[]>([]);
@@ -117,6 +119,9 @@ export const Table: TableComponentProps = ({
117
119
  column: "",
118
120
  order: "",
119
121
  });
122
+ const [isReadyForDynamicValue, setIsReadyForDynamicValue] =
123
+ useState<boolean>(false);
124
+ const [dynamicTableValueCopy, setDynamicTableValueCopy] = useState<any>();
120
125
 
121
126
  const height =
122
127
  options?.height === "fit"
@@ -148,37 +153,49 @@ export const Table: TableComponentProps = ({
148
153
  })
149
154
  );
150
155
 
151
- const tempCategoryFilter: any = {};
156
+ if (data.length !== 0) {
157
+ const tempCategoryFilter: any = {};
152
158
 
153
- header
154
- ?.filter((item) => item.type === "category")
155
- ?.map((item) => {
156
- const tempDataByCategory: string[] = [];
159
+ header
160
+ ?.filter((item) => item.type === "category")
161
+ ?.map((item) => {
162
+ if (dynamicTable?.setValue?.categoryFilter?.[item.key]) {
163
+ tempCategoryFilter[item.key] =
164
+ dynamicTable?.setValue?.categoryFilter[item.key];
165
+ } else {
166
+ const tempDataByCategory: string[] = [];
157
167
 
158
- data
159
- .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
160
- .sort((a, b) =>
161
- (a === undefined
162
- ? "undefined"
163
- : a === null
164
- ? "null"
165
- : a.toString()
166
- ).localeCompare(
167
- b === undefined ? "undefined" : b === null ? "null" : b.toString()
168
- )
169
- )
170
- .filter((value, index, self) => self.indexOf(value) === index)
171
- .map((value) => {
172
- if (!tempDataByCategory.includes(value)) {
173
- tempDataByCategory.push(value);
174
- }
175
- });
168
+ data
169
+ .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
170
+ .sort((a, b) =>
171
+ (a === undefined
172
+ ? "undefined"
173
+ : a === null
174
+ ? "null"
175
+ : a.toString()
176
+ ).localeCompare(
177
+ b === undefined
178
+ ? "undefined"
179
+ : b === null
180
+ ? "null"
181
+ : b.toString()
182
+ )
183
+ )
184
+ .filter((value, index, self) => self.indexOf(value) === index)
185
+ .map((value) => {
186
+ if (!tempDataByCategory.includes(value)) {
187
+ tempDataByCategory.push(value);
188
+ }
189
+ });
176
190
 
177
- tempCategoryFilter[item.key] = tempDataByCategory;
178
- });
191
+ tempCategoryFilter[item.key] = tempDataByCategory;
192
+ }
193
+ });
179
194
 
180
- setCategoryFilter(tempCategoryFilter);
181
- }, [data]);
195
+ setCategoryFilter(tempCategoryFilter);
196
+ setIsReadyForDynamicValue(true);
197
+ }
198
+ }, [data, dynamicTable?.setValue?.categoryFilter]);
182
199
 
183
200
  useEffect(() => {
184
201
  if (page === 1) {
@@ -210,7 +227,7 @@ export const Table: TableComponentProps = ({
210
227
  };
211
228
 
212
229
  const filteredData = useMemo(() => {
213
- if (getDynamicTableValue) {
230
+ if (dynamicTable?.getValue) {
214
231
  return data;
215
232
  } else {
216
233
  const tempData = data
@@ -286,7 +303,7 @@ export const Table: TableComponentProps = ({
286
303
  if (
287
304
  page >
288
305
  Math.ceil(
289
- (setDynamicTableValue?.totalData ?? filteredData?.length) / maxRow
306
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) / maxRow
290
307
  )
291
308
  ) {
292
309
  setPage(1);
@@ -298,18 +315,51 @@ export const Table: TableComponentProps = ({
298
315
  }, [filteredData]);
299
316
 
300
317
  useEffect(() => {
301
- if (getDynamicTableValue) {
302
- getDynamicTableValue({
303
- search,
304
- page,
305
- dataOffset: (page - 1) * maxRow,
306
- maxRow,
307
- filter,
308
- categoryFilter,
309
- sortBy,
310
- });
318
+ if (dynamicTable?.getValue) {
319
+ if (isReadyForDynamicValue) {
320
+ if (
321
+ JSON.stringify(dynamicTableValueCopy) !==
322
+ JSON.stringify({
323
+ search,
324
+ page,
325
+ dataOffset: (page - 1) * maxRow,
326
+ maxRow,
327
+ filter,
328
+ categoryFilter,
329
+ sortBy,
330
+ })
331
+ ) {
332
+ dynamicTable?.getValue({
333
+ search,
334
+ page,
335
+ dataOffset: (page - 1) * maxRow,
336
+ maxRow,
337
+ filter,
338
+ categoryFilter,
339
+ sortBy,
340
+ });
341
+ setDynamicTableValueCopy({
342
+ search,
343
+ page,
344
+ dataOffset: (page - 1) * maxRow,
345
+ maxRow,
346
+ filter,
347
+ categoryFilter,
348
+ sortBy,
349
+ });
350
+ }
351
+ }
311
352
  }
312
- }, [search, page, maxRow, filter, categoryFilter, sortBy]);
353
+ }, [
354
+ isReadyForDynamicValue,
355
+ dynamicTableValueCopy,
356
+ search,
357
+ page,
358
+ maxRow,
359
+ filter,
360
+ categoryFilter,
361
+ sortBy,
362
+ ]);
313
363
 
314
364
  const headerArr = header
315
365
  ?.filter((item) => !excludedColumn?.includes(item.key))
@@ -367,72 +417,75 @@ export const Table: TableComponentProps = ({
367
417
  </button>
368
418
  }
369
419
  >
370
- {data
371
- ?.map(
372
- (dataItem) =>
373
- dataItem[item.key as keyof typeof dataItem]
374
- )
375
- ?.sort((a, b) =>
376
- (a === undefined
377
- ? "undefined"
378
- : a === null
379
- ? "null"
380
- : a.toString()
381
- ).localeCompare(
382
- b === undefined
383
- ? "undefined"
384
- : b === null
385
- ? "null"
386
- : b.toString()
387
- )
388
- )
389
- ?.filter(
390
- (value, index, self) => self.indexOf(value) === index
391
- )
392
- ?.map((value) => {
393
- return (
394
- <Dropdown.Item
395
- key={value}
396
- onClick={() => {
397
- const tempCategoryFilter = { ...categoryFilter };
420
+ {(dynamicTable?.setValue?.categoryFilter &&
421
+ dynamicTable?.setValue?.categoryFilter[item.key]
422
+ ? dynamicTable?.setValue?.categoryFilter[item.key]
423
+ : data
424
+ ?.map(
425
+ (dataItem) =>
426
+ dataItem[item.key as keyof typeof dataItem]
427
+ )
428
+ ?.sort((a, b) =>
429
+ (a === undefined
430
+ ? "undefined"
431
+ : a === null
432
+ ? "null"
433
+ : a.toString()
434
+ ).localeCompare(
435
+ b === undefined
436
+ ? "undefined"
437
+ : b === null
438
+ ? "null"
439
+ : b.toString()
440
+ )
441
+ )
442
+ ?.filter(
443
+ (value, index, self) =>
444
+ self.indexOf(value) === index
445
+ )
446
+ )?.map((value) => {
447
+ return (
448
+ <Dropdown.Item
449
+ key={value}
450
+ onClick={() => {
451
+ const tempCategoryFilter = { ...categoryFilter };
398
452
 
399
- if (categoryFilter[item.key].includes(value)) {
400
- tempCategoryFilter[item.key] = categoryFilter[
401
- item.key
402
- ].filter(
403
- (categoryItem: string) =>
404
- categoryItem !== value
405
- );
406
- } else {
407
- tempCategoryFilter[item.key] = [
408
- ...categoryFilter[item.key],
409
- value,
410
- ];
411
- }
453
+ if (categoryFilter[item.key]?.includes(value)) {
454
+ tempCategoryFilter[item.key] = categoryFilter[
455
+ item.key
456
+ ].filter(
457
+ (categoryItem: string) => categoryItem !== value
458
+ );
459
+ } else {
460
+ tempCategoryFilter[item.key] = [
461
+ ...categoryFilter[item.key],
462
+ value,
463
+ ];
464
+ }
412
465
 
413
- setCategoryFilter(tempCategoryFilter);
414
- }}
415
- >
416
- <div className="pointer-events-none capitalize">
417
- <Form.Checkbox
418
- options={{ disableHover: true }}
419
- label={
420
- value === undefined
421
- ? "undefined"
422
- : value === null
423
- ? "null"
424
- : value?.toString()
425
- }
426
- checked={
427
- categoryFilter[item.key].includes(value) ??
428
- false
429
- }
430
- readOnly
431
- />
432
- </div>
433
- </Dropdown.Item>
434
- );
435
- })}
466
+ setCategoryFilter(tempCategoryFilter);
467
+ }}
468
+ >
469
+ <div className="pointer-events-none capitalize">
470
+ <Form.Checkbox
471
+ options={{ disableHover: true }}
472
+ label={
473
+ value === undefined
474
+ ? "undefined"
475
+ : value === null
476
+ ? "null"
477
+ : value?.toString()
478
+ }
479
+ checked={
480
+ categoryFilter[item.key]?.includes(value) ??
481
+ false
482
+ }
483
+ readOnly
484
+ />
485
+ </div>
486
+ </Dropdown.Item>
487
+ );
488
+ })}
436
489
  </Dropdown>
437
490
  </div>
438
491
  )}
@@ -568,7 +621,7 @@ export const Table: TableComponentProps = ({
568
621
  return (
569
622
  <td
570
623
  key={headerItem.key}
571
- className="max-w-60 bg-secondary-bg px-4 py-1.5"
624
+ className="min-w-32 max-w-60 bg-secondary-bg px-4 py-1.5"
572
625
  >
573
626
  <Tooltip
574
627
  content={item[headerItem.key as keyof typeof item] || "-"}
@@ -767,7 +820,7 @@ export const Table: TableComponentProps = ({
767
820
  <Form.Checkbox
768
821
  options={{ disableHover: true }}
769
822
  checked={
770
- (setDynamicTableValue?.totalData ??
823
+ (dynamicTable?.setValue?.totalData ??
771
824
  filteredData?.length) !== 0 &&
772
825
  filteredData?.filter((item) => {
773
826
  return selected?.find((selectedItem) => {
@@ -778,7 +831,7 @@ export const Table: TableComponentProps = ({
778
831
  );
779
832
  });
780
833
  })?.length ===
781
- (setDynamicTableValue?.totalData ??
834
+ (dynamicTable?.setValue?.totalData ??
782
835
  filteredData?.length)
783
836
  ? true
784
837
  : false
@@ -794,7 +847,7 @@ export const Table: TableComponentProps = ({
794
847
  );
795
848
  });
796
849
  })?.length ===
797
- (setDynamicTableValue?.totalData ??
850
+ (dynamicTable?.setValue?.totalData ??
798
851
  filteredData?.length)
799
852
  ) {
800
853
  if (checkbox?.onChange) {
@@ -905,13 +958,15 @@ export const Table: TableComponentProps = ({
905
958
  <tbody className="divide-y">
906
959
  {!loading &&
907
960
  filteredData &&
908
- (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 &&
961
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) !==
962
+ 0 &&
909
963
  dataArr}
910
964
  </tbody>
911
965
  </table>
912
966
  {(loading ||
913
967
  !filteredData ||
914
- (setDynamicTableValue?.totalData ?? filteredData?.length) === 0) && (
968
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) ===
969
+ 0) && (
915
970
  <div className="flex h-full items-center justify-center whitespace-nowrap bg-secondary-bg px-4 py-1.5 text-center">
916
971
  {loading ? (
917
972
  <Icon
@@ -966,16 +1021,17 @@ export const Table: TableComponentProps = ({
966
1021
  />
967
1022
  </div>
968
1023
  {filteredData &&
969
- (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 && (
1024
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) !==
1025
+ 0 && (
970
1026
  <span className="hidden text-sm text-disabled lg:block">{`Showing ${
971
1027
  (page - 1) * maxRow + 1
972
1028
  } to ${
973
1029
  page * maxRow >
974
- (setDynamicTableValue?.totalData ?? filteredData?.length)
975
- ? setDynamicTableValue?.totalData ?? filteredData?.length
1030
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length)
1031
+ ? dynamicTable?.setValue?.totalData ?? filteredData?.length
976
1032
  : page * maxRow
977
1033
  } of ${
978
- setDynamicTableValue?.totalData ?? filteredData?.length
1034
+ dynamicTable?.setValue?.totalData ?? filteredData?.length
979
1035
  } entries`}</span>
980
1036
  )}
981
1037
  <div className="flex items-center gap-2 text-xs">
@@ -1005,7 +1061,7 @@ export const Table: TableComponentProps = ({
1005
1061
  >
1006
1062
  {Array.from({
1007
1063
  length: Math.ceil(
1008
- (setDynamicTableValue?.totalData ?? filteredData?.length) /
1064
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) /
1009
1065
  maxRow
1010
1066
  ),
1011
1067
  }).map((_, index) => {
@@ -1029,7 +1085,7 @@ export const Table: TableComponentProps = ({
1029
1085
  type="button"
1030
1086
  className="hidden h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled md:flex"
1031
1087
  disabled={
1032
- (setDynamicTableValue?.totalData ?? filteredData?.length) <=
1088
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) <=
1033
1089
  page * maxRow
1034
1090
  }
1035
1091
  onClick={() => {
@@ -1042,14 +1098,14 @@ export const Table: TableComponentProps = ({
1042
1098
  type="button"
1043
1099
  className="flex h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled"
1044
1100
  disabled={
1045
- (setDynamicTableValue?.totalData ?? filteredData?.length) <=
1101
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) <=
1046
1102
  page * maxRow
1047
1103
  }
1048
1104
  onClick={() => {
1049
1105
  setPage(
1050
1106
  Math.ceil(
1051
- (setDynamicTableValue?.totalData ?? filteredData?.length) /
1052
- maxRow
1107
+ (dynamicTable?.setValue?.totalData ??
1108
+ filteredData?.length) / maxRow
1053
1109
  )
1054
1110
  );
1055
1111
  }}