next-helios-fe 1.8.122 → 1.8.124

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 +165 -128
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.122",
3
+ "version": "1.8.124",
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[]>([]);
@@ -119,6 +121,7 @@ export const Table: TableComponentProps = ({
119
121
  });
120
122
  const [isReadyForDynamicValue, setIsReadyForDynamicValue] =
121
123
  useState<boolean>(false);
124
+ const [dynamicTableValueCopy, setDynamicTableValueCopy] = useState<any>();
122
125
 
123
126
  const height =
124
127
  options?.height === "fit"
@@ -156,38 +159,43 @@ export const Table: TableComponentProps = ({
156
159
  header
157
160
  ?.filter((item) => item.type === "category")
158
161
  ?.map((item) => {
159
- const tempDataByCategory: string[] = [];
162
+ if (dynamicTable?.setValue?.categoryFilter?.[item.key]) {
163
+ tempCategoryFilter[item.key] =
164
+ dynamicTable?.setValue?.categoryFilter[item.key];
165
+ } else {
166
+ const tempDataByCategory: string[] = [];
160
167
 
161
- data
162
- .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
163
- .sort((a, b) =>
164
- (a === undefined
165
- ? "undefined"
166
- : a === null
167
- ? "null"
168
- : a.toString()
169
- ).localeCompare(
170
- b === undefined
168
+ data
169
+ .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
170
+ .sort((a, b) =>
171
+ (a === undefined
171
172
  ? "undefined"
172
- : b === null
173
+ : a === null
173
174
  ? "null"
174
- : b.toString()
175
+ : a.toString()
176
+ ).localeCompare(
177
+ b === undefined
178
+ ? "undefined"
179
+ : b === null
180
+ ? "null"
181
+ : b.toString()
182
+ )
175
183
  )
176
- )
177
- .filter((value, index, self) => self.indexOf(value) === index)
178
- .map((value) => {
179
- if (!tempDataByCategory.includes(value)) {
180
- tempDataByCategory.push(value);
181
- }
182
- });
184
+ .filter((value, index, self) => self.indexOf(value) === index)
185
+ .map((value) => {
186
+ if (!tempDataByCategory.includes(value)) {
187
+ tempDataByCategory.push(value);
188
+ }
189
+ });
183
190
 
184
- tempCategoryFilter[item.key] = tempDataByCategory;
191
+ tempCategoryFilter[item.key] = tempDataByCategory;
192
+ }
185
193
  });
186
194
 
187
195
  setCategoryFilter(tempCategoryFilter);
188
196
  setIsReadyForDynamicValue(true);
189
197
  }
190
- }, [data]);
198
+ }, [data, dynamicTable?.setValue?.categoryFilter]);
191
199
 
192
200
  useEffect(() => {
193
201
  if (page === 1) {
@@ -219,7 +227,7 @@ export const Table: TableComponentProps = ({
219
227
  };
220
228
 
221
229
  const filteredData = useMemo(() => {
222
- if (getDynamicTableValue) {
230
+ if (dynamicTable?.getValue) {
223
231
  return data;
224
232
  } else {
225
233
  const tempData = data
@@ -295,7 +303,7 @@ export const Table: TableComponentProps = ({
295
303
  if (
296
304
  page >
297
305
  Math.ceil(
298
- (setDynamicTableValue?.totalData ?? filteredData?.length) / maxRow
306
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) / maxRow
299
307
  )
300
308
  ) {
301
309
  setPage(1);
@@ -307,21 +315,44 @@ export const Table: TableComponentProps = ({
307
315
  }, [filteredData]);
308
316
 
309
317
  useEffect(() => {
310
- if (getDynamicTableValue) {
318
+ if (dynamicTable?.getValue) {
311
319
  if (isReadyForDynamicValue) {
312
- getDynamicTableValue({
313
- search,
314
- page,
315
- dataOffset: (page - 1) * maxRow,
316
- maxRow,
317
- filter,
318
- categoryFilter,
319
- sortBy,
320
- });
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
+ }
321
351
  }
322
352
  }
323
353
  }, [
324
354
  isReadyForDynamicValue,
355
+ dynamicTableValueCopy,
325
356
  search,
326
357
  page,
327
358
  maxRow,
@@ -386,72 +417,75 @@ export const Table: TableComponentProps = ({
386
417
  </button>
387
418
  }
388
419
  >
389
- {data
390
- ?.map(
391
- (dataItem) =>
392
- dataItem[item.key as keyof typeof dataItem]
393
- )
394
- ?.sort((a, b) =>
395
- (a === undefined
396
- ? "undefined"
397
- : a === null
398
- ? "null"
399
- : a.toString()
400
- ).localeCompare(
401
- b === undefined
402
- ? "undefined"
403
- : b === null
404
- ? "null"
405
- : b.toString()
406
- )
407
- )
408
- ?.filter(
409
- (value, index, self) => self.indexOf(value) === index
410
- )
411
- ?.map((value) => {
412
- return (
413
- <Dropdown.Item
414
- key={value}
415
- onClick={() => {
416
- 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 };
417
452
 
418
- if (categoryFilter[item.key]?.includes(value)) {
419
- tempCategoryFilter[item.key] = categoryFilter[
420
- item.key
421
- ].filter(
422
- (categoryItem: string) =>
423
- categoryItem !== value
424
- );
425
- } else {
426
- tempCategoryFilter[item.key] = [
427
- ...categoryFilter[item.key],
428
- value,
429
- ];
430
- }
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
+ }
431
465
 
432
- setCategoryFilter(tempCategoryFilter);
433
- }}
434
- >
435
- <div className="pointer-events-none capitalize">
436
- <Form.Checkbox
437
- options={{ disableHover: true }}
438
- label={
439
- value === undefined
440
- ? "undefined"
441
- : value === null
442
- ? "null"
443
- : value?.toString()
444
- }
445
- checked={
446
- categoryFilter[item.key]?.includes(value) ??
447
- false
448
- }
449
- readOnly
450
- />
451
- </div>
452
- </Dropdown.Item>
453
- );
454
- })}
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
+ })}
455
489
  </Dropdown>
456
490
  </div>
457
491
  )}
@@ -660,7 +694,7 @@ export const Table: TableComponentProps = ({
660
694
  })}
661
695
  {options?.toolbar?.addData?.show !== false && (
662
696
  <Tooltip
663
- content={options?.toolbar?.addData?.tooltip || "add data"}
697
+ content={options?.toolbar?.addData?.tooltip || "Add Data"}
664
698
  >
665
699
  <button
666
700
  type="button"
@@ -681,7 +715,7 @@ export const Table: TableComponentProps = ({
681
715
  trigger={
682
716
  <Tooltip
683
717
  content={
684
- options?.toolbar?.filter?.tooltip || "column filter"
718
+ options?.toolbar?.filter?.tooltip || "Column Filter"
685
719
  }
686
720
  >
687
721
  <button
@@ -737,7 +771,7 @@ export const Table: TableComponentProps = ({
737
771
  {options?.toolbar?.export?.show !== false && (
738
772
  <Button
739
773
  type="button"
740
- tooltip={options?.toolbar?.export?.tooltip || "export data"}
774
+ tooltip={options?.toolbar?.export?.tooltip || "Export Data"}
741
775
  options={{ variant: "primary", width: "fit" }}
742
776
  onClick={() => {
743
777
  const exportData = filteredData?.map((item) => {
@@ -786,7 +820,7 @@ export const Table: TableComponentProps = ({
786
820
  <Form.Checkbox
787
821
  options={{ disableHover: true }}
788
822
  checked={
789
- (setDynamicTableValue?.totalData ??
823
+ (dynamicTable?.setValue?.totalData ??
790
824
  filteredData?.length) !== 0 &&
791
825
  filteredData?.filter((item) => {
792
826
  return selected?.find((selectedItem) => {
@@ -797,7 +831,7 @@ export const Table: TableComponentProps = ({
797
831
  );
798
832
  });
799
833
  })?.length ===
800
- (setDynamicTableValue?.totalData ??
834
+ (dynamicTable?.setValue?.totalData ??
801
835
  filteredData?.length)
802
836
  ? true
803
837
  : false
@@ -813,7 +847,7 @@ export const Table: TableComponentProps = ({
813
847
  );
814
848
  });
815
849
  })?.length ===
816
- (setDynamicTableValue?.totalData ??
850
+ (dynamicTable?.setValue?.totalData ??
817
851
  filteredData?.length)
818
852
  ) {
819
853
  if (checkbox?.onChange) {
@@ -924,13 +958,15 @@ export const Table: TableComponentProps = ({
924
958
  <tbody className="divide-y">
925
959
  {!loading &&
926
960
  filteredData &&
927
- (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 &&
961
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) !==
962
+ 0 &&
928
963
  dataArr}
929
964
  </tbody>
930
965
  </table>
931
966
  {(loading ||
932
967
  !filteredData ||
933
- (setDynamicTableValue?.totalData ?? filteredData?.length) === 0) && (
968
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) ===
969
+ 0) && (
934
970
  <div className="flex h-full items-center justify-center whitespace-nowrap bg-secondary-bg px-4 py-1.5 text-center">
935
971
  {loading ? (
936
972
  <Icon
@@ -985,16 +1021,17 @@ export const Table: TableComponentProps = ({
985
1021
  />
986
1022
  </div>
987
1023
  {filteredData &&
988
- (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 && (
1024
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) !==
1025
+ 0 && (
989
1026
  <span className="hidden text-sm text-disabled lg:block">{`Showing ${
990
1027
  (page - 1) * maxRow + 1
991
1028
  } to ${
992
1029
  page * maxRow >
993
- (setDynamicTableValue?.totalData ?? filteredData?.length)
994
- ? setDynamicTableValue?.totalData ?? filteredData?.length
1030
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length)
1031
+ ? dynamicTable?.setValue?.totalData ?? filteredData?.length
995
1032
  : page * maxRow
996
1033
  } of ${
997
- setDynamicTableValue?.totalData ?? filteredData?.length
1034
+ dynamicTable?.setValue?.totalData ?? filteredData?.length
998
1035
  } entries`}</span>
999
1036
  )}
1000
1037
  <div className="flex items-center gap-2 text-xs">
@@ -1024,7 +1061,7 @@ export const Table: TableComponentProps = ({
1024
1061
  >
1025
1062
  {Array.from({
1026
1063
  length: Math.ceil(
1027
- (setDynamicTableValue?.totalData ?? filteredData?.length) /
1064
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) /
1028
1065
  maxRow
1029
1066
  ),
1030
1067
  }).map((_, index) => {
@@ -1048,7 +1085,7 @@ export const Table: TableComponentProps = ({
1048
1085
  type="button"
1049
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"
1050
1087
  disabled={
1051
- (setDynamicTableValue?.totalData ?? filteredData?.length) <=
1088
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) <=
1052
1089
  page * maxRow
1053
1090
  }
1054
1091
  onClick={() => {
@@ -1061,14 +1098,14 @@ export const Table: TableComponentProps = ({
1061
1098
  type="button"
1062
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"
1063
1100
  disabled={
1064
- (setDynamicTableValue?.totalData ?? filteredData?.length) <=
1101
+ (dynamicTable?.setValue?.totalData ?? filteredData?.length) <=
1065
1102
  page * maxRow
1066
1103
  }
1067
1104
  onClick={() => {
1068
1105
  setPage(
1069
1106
  Math.ceil(
1070
- (setDynamicTableValue?.totalData ?? filteredData?.length) /
1071
- maxRow
1107
+ (dynamicTable?.setValue?.totalData ??
1108
+ filteredData?.length) / maxRow
1072
1109
  )
1073
1110
  );
1074
1111
  }}