next-helios-fe 1.7.0 → 1.7.1
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.
package/package.json
CHANGED
|
@@ -6,8 +6,15 @@ import { Icon } from "@iconify/react";
|
|
|
6
6
|
interface PermissionTableProps {
|
|
7
7
|
header: any[];
|
|
8
8
|
module: any[];
|
|
9
|
-
data:
|
|
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-
|
|
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">
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
);
|