next-helios-fe 1.8.6 → 1.8.7
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
@@ -4,7 +4,10 @@ import { Dropdown } from "../../../components";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
5
5
|
|
6
6
|
export interface MultipleSelectProps
|
7
|
-
extends Omit<
|
7
|
+
extends Omit<
|
8
|
+
React.HTMLAttributes<HTMLDivElement>,
|
9
|
+
"defaultvalue" | "value" | "onChange"
|
10
|
+
> {
|
8
11
|
menus: {
|
9
12
|
label: string;
|
10
13
|
value: string;
|
@@ -45,7 +48,9 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
45
48
|
const [openDropdown, setOpenDropdown] = useState(false);
|
46
49
|
const [dropdownWidth, setDropdownWidth] = useState<number>(0);
|
47
50
|
const [dropdownHeight, setDropdownHeight] = useState<number>(0);
|
48
|
-
const
|
51
|
+
const fakeInputRef = useRef<HTMLDivElement>(null);
|
52
|
+
const itemContainerRef = useRef<HTMLDivElement>(null);
|
53
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
49
54
|
const dropdownRef = useRef<HTMLButtonElement>(null);
|
50
55
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
51
56
|
const height =
|
@@ -77,6 +82,22 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
77
82
|
});
|
78
83
|
}, [tempValue]);
|
79
84
|
|
85
|
+
useEffect(() => {
|
86
|
+
if (tempValue.length === 0) {
|
87
|
+
fakeInputRef.current;
|
88
|
+
}
|
89
|
+
}, [tempValue]);
|
90
|
+
|
91
|
+
useEffect(() => {
|
92
|
+
if (tempValue.length === 0) {
|
93
|
+
inputRef.current?.setCustomValidity(
|
94
|
+
"Please select some items in the list."
|
95
|
+
);
|
96
|
+
} else {
|
97
|
+
inputRef.current?.setCustomValidity("");
|
98
|
+
}
|
99
|
+
}, [tempValue]);
|
100
|
+
|
80
101
|
return (
|
81
102
|
<div className="flex flex-row-reverse items-end">
|
82
103
|
<label className={`grid gap-2 ${width}`}>
|
@@ -103,7 +124,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
103
124
|
)}
|
104
125
|
<div className="relative flex items-center">
|
105
126
|
<div
|
106
|
-
ref={
|
127
|
+
ref={fakeInputRef}
|
107
128
|
className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
|
108
129
|
disabled
|
109
130
|
? "bg-secondary-light cursor-default pointer-events-none"
|
@@ -119,10 +140,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
119
140
|
setOpenDropdown(true);
|
120
141
|
dropdownRef.current?.click();
|
121
142
|
setDropdownWidth(
|
122
|
-
|
143
|
+
fakeInputRef?.current?.getBoundingClientRect()?.width || 0
|
123
144
|
);
|
124
145
|
setDropdownHeight(
|
125
|
-
|
146
|
+
fakeInputRef?.current?.getBoundingClientRect()?.height || 0
|
126
147
|
);
|
127
148
|
}}
|
128
149
|
{...rest}
|
@@ -136,7 +157,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
136
157
|
{placeholder}
|
137
158
|
</span>
|
138
159
|
) : (
|
139
|
-
<div
|
160
|
+
<div
|
161
|
+
ref={itemContainerRef}
|
162
|
+
className="flex flex-wrap gap-2 w-full h-min pointer-events-none invisible"
|
163
|
+
>
|
140
164
|
{tempValue?.map((item) => {
|
141
165
|
return (
|
142
166
|
<div
|
@@ -163,9 +187,14 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
163
187
|
/>
|
164
188
|
</div>
|
165
189
|
</div>
|
190
|
+
<input
|
191
|
+
ref={inputRef}
|
192
|
+
type="text"
|
193
|
+
className="absolute bottom-0 -z-10 w-full border-0 focus:ring-0"
|
194
|
+
/>
|
166
195
|
<div
|
167
|
-
className="absolute flex flex-wrap gap-2 h-min
|
168
|
-
style={{ width:
|
196
|
+
className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
|
197
|
+
style={{ width: itemContainerRef.current?.clientWidth }}
|
169
198
|
>
|
170
199
|
{tempValue?.map((item) => {
|
171
200
|
return (
|
@@ -61,6 +61,14 @@ export const Select: React.FC<SelectProps> = ({
|
|
61
61
|
}
|
62
62
|
}, [rest.value, rest.defaultValue]);
|
63
63
|
|
64
|
+
useEffect(() => {
|
65
|
+
if (!tempValue) {
|
66
|
+
inputRef.current?.setCustomValidity("Please select an item in the list.");
|
67
|
+
} else {
|
68
|
+
inputRef.current?.setCustomValidity("");
|
69
|
+
}
|
70
|
+
}, [tempValue]);
|
71
|
+
|
64
72
|
return (
|
65
73
|
<div className="flex flex-row-reverse items-end">
|
66
74
|
<label className={`grid gap-2 ${width}`}>
|
@@ -98,12 +106,12 @@ export const Select: React.FC<SelectProps> = ({
|
|
98
106
|
placeholder={placeholder}
|
99
107
|
required={rest.required}
|
100
108
|
disabled={rest.disabled}
|
101
|
-
readOnly
|
102
109
|
value={
|
103
110
|
tempValue
|
104
111
|
? menus.find((item) => item.value === tempValue)?.label
|
105
112
|
: ""
|
106
113
|
}
|
114
|
+
onChange={(e) => {}}
|
107
115
|
onClick={(e) => {
|
108
116
|
e.preventDefault();
|
109
117
|
setOpenDropdown(true);
|