next-helios-fe 1.7.0 → 1.7.2

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 (11) hide show
  1. package/dist/components/permission-table/index.d.ts +8 -1
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/form/input/email.tsx +2 -2
  5. package/src/components/form/input/file.tsx +2 -2
  6. package/src/components/form/input/number.tsx +2 -2
  7. package/src/components/form/input/password.tsx +2 -2
  8. package/src/components/form/input/range.tsx +2 -2
  9. package/src/components/form/input/text.tsx +2 -2
  10. package/src/components/form/other/textarea.tsx +2 -2
  11. package/src/components/permission-table/index.tsx +121 -86
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.7.0",
3
+ "version": "1.7.2",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/form/input/email.tsx CHANGED
@@ -32,7 +32,7 @@ export const Email: React.FC<EmailProps> = ({
32
32
  {(label ||
33
33
  (!options?.hideInputDetail &&
34
34
  (rest.minLength || rest.maxLength || description))) && (
35
- <div className="flex">
35
+ <div className="flex items-center">
36
36
  {label && (
37
37
  <span
38
38
  className={`text-sm select-none ${
@@ -44,7 +44,7 @@ export const Email: React.FC<EmailProps> = ({
44
44
  </span>
45
45
  )}
46
46
  {!options?.hideInputDetail && (
47
- <div className="flex justify-end items-center gap-2">
47
+ <div className="flex-1 flex justify-end items-center gap-2">
48
48
  {(rest.minLength || rest.maxLength) && (
49
49
  <span className="text-sm select-none">
50
50
  {rest.minLength || 0}/{rest.maxLength || "∞"}
package/src/components/form/input/file.tsx CHANGED
@@ -61,7 +61,7 @@ export const File: React.FC<FileProps> = ({
61
61
  (label ||
62
62
  (!options?.hideInputDetail &&
63
63
  (options?.maxSizeInMb || description))) && (
64
- <div className="flex">
64
+ <div className="flex items-center">
65
65
  {label && (
66
66
  <span
67
67
  className={`text-sm select-none ${
@@ -73,7 +73,7 @@ export const File: React.FC<FileProps> = ({
73
73
  </span>
74
74
  )}
75
75
  {!options?.hideInputDetail && (
76
- <div className="flex justify-end items-center gap-2">
76
+ <div className="flex-1 flex justify-end items-center gap-2">
77
77
  {options?.variant !== "drag&drop" && options?.maxSizeInMb && (
78
78
  <span className="text-sm select-none">
79
79
  {options?.maxSizeInMb} MB
package/src/components/form/input/number.tsx CHANGED
@@ -33,7 +33,7 @@ export const Number: React.FC<NumberProps> = ({
33
33
  {(label ||
34
34
  (!options?.hideInputDetail &&
35
35
  (rest.min || rest.max || description))) && (
36
- <div className="flex">
36
+ <div className="flex items-center">
37
37
  {label && (
38
38
  <span
39
39
  className={`text-sm select-none ${
@@ -45,7 +45,7 @@ export const Number: React.FC<NumberProps> = ({
45
45
  </span>
46
46
  )}
47
47
  {!options?.hideInputDetail && (
48
- <div className="flex justify-end items-center gap-2">
48
+ <div className="flex-1 flex justify-end items-center gap-2">
49
49
  {(rest.min || rest.max) && (
50
50
  <span className="text-sm select-none">
51
51
  {rest.min || rest.min === 0 ? rest.min : "∞"}/
package/src/components/form/input/password.tsx CHANGED
@@ -33,7 +33,7 @@ export const Password: React.FC<PasswordProps> = ({
33
33
  {(label ||
34
34
  (!options?.hideInputDetail &&
35
35
  (rest.minLength || rest.maxLength || description))) && (
36
- <div className="flex">
36
+ <div className="flex items-center">
37
37
  {label && (
38
38
  <span
39
39
  className={`text-sm select-none ${
@@ -45,7 +45,7 @@ export const Password: React.FC<PasswordProps> = ({
45
45
  </span>
46
46
  )}
47
47
  {!options?.hideInputDetail && (
48
- <div className="flex justify-end items-center gap-2">
48
+ <div className="flex-1 flex justify-end items-center gap-2">
49
49
  {(rest.minLength || rest.maxLength) && (
50
50
  <span className="text-sm select-none">
51
51
  {rest.minLength || 0}/{rest.maxLength || "∞"}
package/src/components/form/input/range.tsx CHANGED
@@ -28,7 +28,7 @@ export const Range: React.FC<RangeProps> = ({
28
28
  {(label ||
29
29
  (!options?.hideInputDetail &&
30
30
  (rest.min || rest.max || description))) && (
31
- <div className="flex">
31
+ <div className="flex items-center">
32
32
  {label && (
33
33
  <span
34
34
  className={`text-sm select-none ${
@@ -40,7 +40,7 @@ export const Range: React.FC<RangeProps> = ({
40
40
  </span>
41
41
  )}
42
42
  {!options?.hideInputDetail && (
43
- <div className="flex justify-end items-center gap-2">
43
+ <div className="flex-1 flex justify-end items-center gap-2">
44
44
  {(rest.min || rest.max) && (
45
45
  <span className="text-sm select-none">
46
46
  {rest.min || 0}/{rest.max || 100}
package/src/components/form/input/text.tsx CHANGED
@@ -31,7 +31,7 @@ export const Text: React.FC<TextProps> = ({
31
31
  {(label ||
32
32
  (!options?.hideInputDetail &&
33
33
  (rest.minLength || rest.maxLength || description))) && (
34
- <div className="flex">
34
+ <div className="flex items-center">
35
35
  {label && (
36
36
  <span
37
37
  className={`text-sm select-none ${
@@ -43,7 +43,7 @@ export const Text: React.FC<TextProps> = ({
43
43
  </span>
44
44
  )}
45
45
  {!options?.hideInputDetail && (
46
- <div className="flex justify-end items-center gap-2">
46
+ <div className="flex-1 flex justify-end items-center gap-2">
47
47
  {(rest.minLength || rest.maxLength) && (
48
48
  <span className="text-sm select-none">
49
49
  {rest.minLength || 0}/{rest.maxLength || "∞"}
package/src/components/form/other/textarea.tsx CHANGED
@@ -32,7 +32,7 @@ export const Textarea: React.FC<TextareaProps> = ({
32
32
  {(label ||
33
33
  (!options?.hideInputDetail &&
34
34
  (rest.minLength || rest.maxLength || description))) && (
35
- <div className="flex">
35
+ <div className="flex items-center">
36
36
  {label && (
37
37
  <span
38
38
  className={`text-sm select-none ${
@@ -44,7 +44,7 @@ export const Textarea: React.FC<TextareaProps> = ({
44
44
  </span>
45
45
  )}
46
46
  {!options?.hideInputDetail && (
47
- <div className="flex justify-end items-center gap-2">
47
+ <div className="flex-1 flex justify-end items-center gap-2">
48
48
  {(rest.minLength || rest.maxLength) && (
49
49
  <span className="text-sm select-none">
50
50
  {rest.minLength || 0}/{rest.maxLength || "∞"}
package/src/components/permission-table/index.tsx CHANGED
@@ -6,8 +6,15 @@ import { Icon } from "@iconify/react";
6
6
  interface PermissionTableProps {
7
7
  header: any[];
8
8
  module: any[];
9
- data: any[];
9
+ data: {
10
+ id: number | string;
11
+ module: string;
12
+ permission: string;
13
+ checked: boolean;
14
+ [key: string]: any;
15
+ }[];
10
16
  options?: {
17
+ height?: "full" | "fit" | "20" | "40" | "80";
11
18
  border?: boolean;
12
19
  };
13
20
  disabled?: boolean;
@@ -22,97 +29,125 @@ export const PermissionTable: React.FC<PermissionTableProps> = ({
22
29
  disabled,
23
30
  onChange,
24
31
  }) => {
32
+ const height =
33
+ options?.height === "fit"
34
+ ? "h-fit"
35
+ : options?.height === "20"
36
+ ? "h-20"
37
+ : options?.height === "40"
38
+ ? "h-40"
39
+ : options?.height === "80"
40
+ ? "h-80"
41
+ : "flex-1 h-full";
42
+
43
+ const headerArr = header.map((item: any, index: number) => {
44
+ return (
45
+ <th
46
+ key={index}
47
+ className="min-w-24 w-24 max-w-24 py-2 bg-secondary-bg font-medium"
48
+ >
49
+ {item}
50
+ </th>
51
+ );
52
+ });
53
+
54
+ const dataArr = module.map((item: any, index: number) => {
55
+ return (
56
+ <tr
57
+ key={index}
58
+ className={`${index % 2 === 0 ? "bg-neutral-50" : "bg-secondary-bg"}`}
59
+ >
60
+ <td
61
+ className={`sticky left-0 min-w-40 px-4 py-1.5 ${
62
+ index % 2 === 0 ? "bg-neutral-50" : "bg-secondary-bg"
63
+ }`}
64
+ >
65
+ {module[index]}
66
+ </td>
67
+ {header.map((permissionItem: any, permissionIndex: number) => {
68
+ if (
69
+ data.find(
70
+ (dataItem: any) =>
71
+ dataItem.module === item &&
72
+ dataItem.permission === permissionItem
73
+ )?.checked === false ||
74
+ data.find(
75
+ (dataItem: any) =>
76
+ dataItem.module === item &&
77
+ dataItem.permission === permissionItem
78
+ )?.checked === true
79
+ ) {
80
+ return (
81
+ <td
82
+ key={permissionIndex}
83
+ className="min-w-24 w-24 max-w-24 py-1.5"
84
+ >
85
+ <div className="flex justify-center w-full">
86
+ <div>
87
+ <Form.Checkbox
88
+ options={{ variant: "switch" }}
89
+ disabled={disabled}
90
+ checked={
91
+ data.find(
92
+ (dataItem: any) =>
93
+ dataItem.module === item &&
94
+ dataItem.permission === permissionItem
95
+ )?.checked
96
+ }
97
+ onChange={(e) => {
98
+ let tempPermission = data.map((dataItem: any) => {
99
+ if (
100
+ dataItem.module === item &&
101
+ dataItem.permission === permissionItem
102
+ ) {
103
+ return {
104
+ ...dataItem,
105
+ checked: e.target.checked,
106
+ };
107
+ } else {
108
+ return dataItem;
109
+ }
110
+ });
111
+
112
+ if (onChange) {
113
+ onChange(tempPermission);
114
+ }
115
+ }}
116
+ />
117
+ </div>
118
+ </div>
119
+ </td>
120
+ );
121
+ } else {
122
+ return (
123
+ <td key={permissionIndex}>
124
+ <div className="flex justify-center text-secondary">
125
+ <Icon icon="ic:round-minus" />
126
+ </div>
127
+ </td>
128
+ );
129
+ }
130
+ })}
131
+ </tr>
132
+ );
133
+ });
134
+
25
135
  return (
26
136
  <div
27
- className={`w-full overflow-x-auto ${
137
+ className={`w-full overflow-auto ${
28
138
  options?.border && "border rounded-md"
29
- }`}
139
+ } ${height}`}
30
140
  >
31
- <table className="w-full divide-y text-sm">
32
- <thead>
33
- <tr>
34
- <th className="py-2 font-medium">Module</th>
35
- {header.map((item: any, index: number) => {
36
- return (
37
- <th key={index} className="py-2 font-medium">
38
- {item}
39
- </th>
40
- );
41
- })}
141
+ <table className="w-full divide-y text-sm overflow-x-auto">
142
+ <thead className="sticky top-0 z-10">
143
+ <tr className="bg-secondary-bg">
144
+ <th className="sticky left-0 min-w-40 py-2 z-10 bg-secondary-bg font-medium">
145
+ Module
146
+ </th>
147
+ {headerArr}
42
148
  </tr>
43
149
  </thead>
44
- <tbody className="divide-y">
45
- {module.map((item: any, index: number) => {
46
- return (
47
- <tr key={index} className="odd:bg-secondary-transparent">
48
- <td className="px-4 py-1.5">{module[index]}</td>
49
- {header.map((permissionItem: any, permissionIndex: number) => {
50
- if (
51
- data.find(
52
- (dataItem: any) =>
53
- dataItem.module === item &&
54
- dataItem.permission === permissionItem
55
- )?.checked === false ||
56
- data.find(
57
- (dataItem: any) =>
58
- dataItem.module === item &&
59
- dataItem.permission === permissionItem
60
- )?.checked === true
61
- ) {
62
- return (
63
- <td key={permissionIndex} className="py-1.5">
64
- <div className="flex justify-center w-[76px]">
65
- <div className="w-min">
66
- <Form.Checkbox
67
- options={{ variant: "switch" }}
68
- disabled={disabled}
69
- checked={
70
- data.find(
71
- (dataItem: any) =>
72
- dataItem.module === item &&
73
- dataItem.permission === permissionItem
74
- )?.checked
75
- }
76
- onChange={(e) => {
77
- let tempPermission = data.map(
78
- (dataItem: any) => {
79
- if (
80
- dataItem.module === item &&
81
- dataItem.permission === permissionItem
82
- ) {
83
- return {
84
- ...dataItem,
85
- checked: e.target.checked,
86
- };
87
- } else {
88
- return dataItem;
89
- }
90
- }
91
- );
92
-
93
- if (onChange) {
94
- onChange(tempPermission);
95
- }
96
- }}
97
- />
98
- </div>
99
- </div>
100
- </td>
101
- );
102
- } else {
103
- return (
104
- <td key={permissionIndex}>
105
- <div className="flex justify-center text-secondary">
106
- <Icon icon="ic:round-minus" />
107
- </div>
108
- </td>
109
- );
110
- }
111
- })}
112
- </tr>
113
- );
114
- })}
115
- </tbody>
150
+ <tbody className="divide-y">{dataArr}</tbody>
116
151
  </table>
117
152
  </div>
118
153
  );