next-helios-fe 1.8.69 → 1.8.71

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 +4 -0
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/table/index.tsx +62 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.69",
3
+ "version": "1.8.71",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/table/index.tsx CHANGED
@@ -23,6 +23,7 @@ interface TableProps {
23
23
  customDataIdName?: string;
24
24
  toolbar?: {
25
25
  addData?: {
26
+ tooltip?: string;
26
27
  show?: boolean;
27
28
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
28
29
  };
@@ -30,9 +31,11 @@ interface TableProps {
30
31
  show: boolean;
31
32
  };
32
33
  filter?: {
34
+ tooltip?: string;
33
35
  show: boolean;
34
36
  };
35
37
  export?: {
38
+ tooltip?: string;
36
39
  show: boolean;
37
40
  };
38
41
  columnSearch?: {
@@ -43,6 +46,7 @@ interface TableProps {
43
46
  };
44
47
  customTool?: {
45
48
  icon: string;
49
+ tooltip?: string;
46
50
  variant: "primary" | "secondary" | "success" | "warning" | "danger";
47
51
  show?: boolean;
48
52
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -135,7 +139,9 @@ export const Table: TableComponentProps = ({
135
139
  ?.map((item) => {
136
140
  data
137
141
  .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
138
- .sort((a, b) => (a || "").localeCompare(b || ""))
142
+ .sort((a, b) =>
143
+ (a.toString() || "").localeCompare(b.toString() || "")
144
+ )
139
145
  .filter((value, index, self) => self.indexOf(value) === index)
140
146
  .map((value) => {
141
147
  if (!categoryFilter.includes(value)) {
@@ -314,7 +320,9 @@ export const Table: TableComponentProps = ({
314
320
  (dataItem) =>
315
321
  dataItem[item.key as keyof typeof dataItem]
316
322
  )
317
- ?.sort((a, b) => (a || "").localeCompare(b || ""))
323
+ ?.sort((a, b) =>
324
+ (a.toString() || "").localeCompare(b.toString() || "")
325
+ )
318
326
  ?.filter(
319
327
  (value, index, self) => self.indexOf(value) === index
320
328
  )
@@ -337,7 +345,7 @@ export const Table: TableComponentProps = ({
337
345
  <div className="pointer-events-none">
338
346
  <Form.Checkbox
339
347
  options={{ disableHover: true }}
340
- label={value}
348
+ label={value.toString()}
341
349
  checked={categoryFilter.includes(value)}
342
350
  readOnly
343
351
  />
@@ -529,9 +537,23 @@ export const Table: TableComponentProps = ({
529
537
  : "bg-primary hover:bg-primary-dark";
530
538
 
531
539
  if (item.show !== false) {
532
- return (
533
- <button
540
+ return item?.tooltip ? (
541
+ <Tooltip
534
542
  key={index}
543
+ content={item.tooltip || "custom tool"}
544
+ >
545
+ <button
546
+ type="button"
547
+ className={`p-1.5 rounded-full text-white ${variant}`}
548
+ onClick={(e) => {
549
+ item.onClick && item.onClick(e);
550
+ }}
551
+ >
552
+ <Icon icon={item.icon} className="text-2xl" />
553
+ </button>
554
+ </Tooltip>
555
+ ) : (
556
+ <button
535
557
  type="button"
536
558
  className={`p-1.5 rounded-full text-white ${variant}`}
537
559
  onClick={(e) => {
@@ -544,27 +566,46 @@ export const Table: TableComponentProps = ({
544
566
  }
545
567
  })}
546
568
  {options?.toolbar?.addData?.show !== false && (
547
- <button
548
- type="button"
549
- className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
550
- onClick={(e) => {
551
- options?.toolbar?.addData?.onClick &&
552
- options?.toolbar?.addData?.onClick(e);
553
- }}
569
+ <Tooltip
570
+ content={options?.toolbar?.addData?.tooltip || "add data"}
554
571
  >
555
- <Icon icon="ic:round-plus" className="text-2xl" />
556
- </button>
572
+ <button
573
+ type="button"
574
+ className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
575
+ onClick={(e) => {
576
+ options?.toolbar?.addData?.onClick &&
577
+ options?.toolbar?.addData?.onClick(e);
578
+ }}
579
+ >
580
+ <Icon icon="ic:round-plus" className="text-2xl" />
581
+ </button>
582
+ </Tooltip>
557
583
  )}
558
584
  {options?.toolbar?.filter?.show !== false && (
559
585
  <Dropdown
560
586
  dismissOnClick={false}
561
587
  trigger={
562
- <button
563
- type="button"
564
- className="px-2 py-2 rounded-full hover:bg-secondary-light"
565
- >
566
- <Icon icon="mage:filter" className="text-xl" />
567
- </button>
588
+ options?.toolbar?.filter?.tooltip ? (
589
+ <Tooltip
590
+ content={
591
+ options?.toolbar?.filter?.tooltip || "column filter"
592
+ }
593
+ >
594
+ <button
595
+ type="button"
596
+ className="px-2 py-2 rounded-full hover:bg-secondary-light"
597
+ >
598
+ <Icon icon="mage:filter" className="text-xl" />
599
+ </button>
600
+ </Tooltip>
601
+ ) : (
602
+ <button
603
+ type="button"
604
+ className="px-2 py-2 rounded-full hover:bg-secondary-light"
605
+ >
606
+ <Icon icon="mage:filter" className="text-xl" />
607
+ </button>
608
+ )
568
609
  }
569
610
  >
570
611
  {header?.map((item) => {
@@ -607,6 +648,7 @@ export const Table: TableComponentProps = ({
607
648
  {options?.toolbar?.export?.show !== false && (
608
649
  <Button
609
650
  type="button"
651
+ tooltip={options?.toolbar?.export?.tooltip || "export data"}
610
652
  options={{ variant: "primary", width: "fit" }}
611
653
  onClick={() => {
612
654
  const exportData = filteredData?.map((item) => {