next-helios-fe 1.8.81 → 1.8.83

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 (6) hide show
  1. package/dist/components/chip/index.d.ts +1 -0
  2. package/dist/components/table/index.d.ts +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/chip/index.tsx +34 -4
  6. package/src/components/table/index.tsx +50 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.8.81",
3
+ "version": "1.8.83",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/chip/index.tsx CHANGED
@@ -10,9 +10,15 @@ interface ChipProps {
10
10
  bordered?: boolean;
11
11
  borderRadius?: "basic" | "full";
12
12
  };
13
+ onRemove?: () => void;
13
14
  }
14
15
 
15
- export const Chip: React.FC<ChipProps> = ({ label, icon, options }) => {
16
+ export const Chip: React.FC<ChipProps> = ({
17
+ label,
18
+ icon,
19
+ options,
20
+ onRemove,
21
+ }) => {
16
22
  const variant =
17
23
  options?.bordered !== true
18
24
  ? options?.variant === "secondary"
@@ -35,13 +41,37 @@ export const Chip: React.FC<ChipProps> = ({ label, icon, options }) => {
35
41
  : "border border-primary text-primary";
36
42
  const borderRadius =
37
43
  options?.borderRadius === "full" ? "rounded-full" : "rounded-md";
44
+ const removeButton =
45
+ options?.variant === "secondary"
46
+ ? "text-secondary hover:text-secondary-dark"
47
+ : options?.variant === "success"
48
+ ? "text-success hover:text-success-dark"
49
+ : options?.variant === "warning"
50
+ ? "text-warning hover:text-warning-dark"
51
+ : options?.variant === "danger"
52
+ ? "text-danger hover:text-danger-dark"
53
+ : "text-primary hover:text-primary-dark";
38
54
 
39
55
  return (
40
56
  <div
41
- className={`flex items-center gap-1.5 w-fit px-3 py-1 font-medium select-none ${variant} ${borderRadius}`}
57
+ className={`flex items-center gap-3 w-fit px-3 py-1 font-medium select-none ${variant} ${borderRadius}`}
42
58
  >
43
- {icon && <Icon icon={icon} className="text-lg" />}
44
- <span className="text-sm">{label}</span>
59
+ <div className="flex items-center gap-1.5">
60
+ {icon && <Icon icon={icon} className="text-lg" />}
61
+ <span className="text-sm">{label}</span>
62
+ </div>
63
+ {onRemove && (
64
+ <div
65
+ className={`cursor-pointer active:opacity-70 active:duration-300 active:ease-out disabled:active:opacity-100 ${removeButton}`}
66
+ onClick={() => {
67
+ if (onRemove) {
68
+ onRemove();
69
+ }
70
+ }}
71
+ >
72
+ <Icon icon="pajamas:close" />
73
+ </div>
74
+ )}
45
75
  </div>
46
76
  );
47
77
  };
package/src/components/table/index.tsx CHANGED
@@ -46,7 +46,7 @@ interface TableProps {
46
46
  };
47
47
  customTool?: {
48
48
  icon: string;
49
- tooltip?: string;
49
+ tooltip: string;
50
50
  variant: "primary" | "secondary" | "success" | "warning" | "danger";
51
51
  show?: boolean;
52
52
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -548,7 +548,7 @@ export const Table: TableComponentProps = ({
548
548
  : "bg-primary hover:bg-primary-dark";
549
549
 
550
550
  if (item.show !== false) {
551
- return item?.tooltip ? (
551
+ return (
552
552
  <Tooltip
553
553
  key={index}
554
554
  content={item.tooltip || "custom tool"}
@@ -563,16 +563,6 @@ export const Table: TableComponentProps = ({
563
563
  <Icon icon={item.icon} className="text-2xl" />
564
564
  </button>
565
565
  </Tooltip>
566
- ) : (
567
- <button
568
- type="button"
569
- className={`rounded-full p-1.5 text-white ${variant}`}
570
- onClick={(e) => {
571
- item.onClick && item.onClick(e);
572
- }}
573
- >
574
- <Icon icon={item.icon} className="text-2xl" />
575
- </button>
576
566
  );
577
567
  }
578
568
  })}
@@ -704,7 +694,11 @@ export const Table: TableComponentProps = ({
704
694
  filteredData?.length !== 0 &&
705
695
  filteredData?.filter((item) => {
706
696
  return selected?.find((selectedItem) => {
707
- return selectedItem.id === item.id;
697
+ return (
698
+ selectedItem[
699
+ options?.customDataIdName ?? "id"
700
+ ] === item[options?.customDataIdName ?? "id"]
701
+ );
708
702
  });
709
703
  })?.length === filteredData?.length
710
704
  ? true
@@ -714,7 +708,11 @@ export const Table: TableComponentProps = ({
714
708
  if (
715
709
  filteredData?.filter((item) => {
716
710
  return selected?.find((selectedItem) => {
717
- return selectedItem.id === item.id;
711
+ return (
712
+ selectedItem[
713
+ options?.customDataIdName ?? "id"
714
+ ] === item[options?.customDataIdName ?? "id"]
715
+ );
718
716
  });
719
717
  })?.length === filteredData?.length
720
718
  ) {
@@ -722,7 +720,12 @@ export const Table: TableComponentProps = ({
722
720
  checkbox?.onChange(
723
721
  selected?.filter((prev) => {
724
722
  return !filteredData?.find((filteredItem) => {
725
- return filteredItem.id === prev.id;
723
+ return (
724
+ filteredItem[
725
+ options?.customDataIdName ?? "id"
726
+ ] ===
727
+ prev[options?.customDataIdName ?? "id"]
728
+ );
726
729
  });
727
730
  })
728
731
  );
@@ -730,16 +733,45 @@ export const Table: TableComponentProps = ({
730
733
  setSelected((prev) => {
731
734
  return prev.filter((prevItem) => {
732
735
  return !filteredData?.find((filteredItem) => {
733
- return filteredItem.id === prevItem.id;
736
+ return (
737
+ filteredItem[
738
+ options?.customDataIdName ?? "id"
739
+ ] ===
740
+ prevItem[options?.customDataIdName ?? "id"]
741
+ );
734
742
  });
735
743
  });
736
744
  });
737
745
  }
738
746
  } else {
739
747
  if (checkbox?.onChange) {
740
- checkbox?.onChange([...selected, ...filteredData]);
748
+ checkbox?.onChange([
749
+ ...selected,
750
+ ...filteredData.filter((item) => {
751
+ return !selected?.find((selectedItem) => {
752
+ return (
753
+ selectedItem[
754
+ options?.customDataIdName ?? "id"
755
+ ] ===
756
+ item[options?.customDataIdName ?? "id"]
757
+ );
758
+ });
759
+ }),
760
+ ]);
741
761
  } else {
742
- setSelected((prev) => [...prev, ...filteredData]);
762
+ setSelected((prev) => [
763
+ ...prev,
764
+ ...filteredData.filter((item) => {
765
+ return !prev.find((prevItem) => {
766
+ return (
767
+ prevItem[
768
+ options?.customDataIdName ?? "id"
769
+ ] ===
770
+ item[options?.customDataIdName ?? "id"]
771
+ );
772
+ });
773
+ }),
774
+ ]);
743
775
  }
744
776
  }
745
777
  }}