next-helios-fe 1.9.16 → 1.9.18
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
@@ -25,6 +25,7 @@ export interface MultipleSelectProps
|
|
25
25
|
height?: "short" | "medium" | "high";
|
26
26
|
disableDropdown?: boolean;
|
27
27
|
};
|
28
|
+
max?: number;
|
28
29
|
required?: boolean;
|
29
30
|
disabled?: boolean;
|
30
31
|
value?: string[];
|
@@ -34,6 +35,7 @@ export interface MultipleSelectProps
|
|
34
35
|
value: string[];
|
35
36
|
};
|
36
37
|
}) => void;
|
38
|
+
readOnly?: boolean;
|
37
39
|
onSelect?: (e: {
|
38
40
|
target: {
|
39
41
|
value: string;
|
@@ -53,11 +55,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
53
55
|
placeholder,
|
54
56
|
description,
|
55
57
|
labelComponent,
|
58
|
+
max,
|
56
59
|
required,
|
57
60
|
disabled,
|
58
61
|
value,
|
59
62
|
onClick,
|
60
63
|
onChange,
|
64
|
+
readOnly,
|
61
65
|
onSelect,
|
62
66
|
onRemove,
|
63
67
|
...rest
|
@@ -75,8 +79,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
75
79
|
options?.height === "short"
|
76
80
|
? "py-[3.5px]"
|
77
81
|
: options?.height === "high"
|
78
|
-
|
79
|
-
|
82
|
+
? "py-[7.5px]"
|
83
|
+
: "py-[5px]";
|
80
84
|
|
81
85
|
useEffect(() => {
|
82
86
|
function handleClickOutside(event: MouseEvent) {
|
@@ -116,7 +120,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
116
120
|
if (required) {
|
117
121
|
if (tempValue.length === 0) {
|
118
122
|
inputRef.current?.setCustomValidity(
|
119
|
-
"Please select some items in the list."
|
123
|
+
"Please select some items in the list."
|
120
124
|
);
|
121
125
|
} else {
|
122
126
|
inputRef.current?.setCustomValidity("");
|
@@ -161,13 +165,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
161
165
|
(options?.height === "short"
|
162
166
|
? 7
|
163
167
|
: options?.height === "high"
|
164
|
-
|
165
|
-
|
168
|
+
? 15
|
169
|
+
: 10)
|
166
170
|
: options?.height === "short"
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
+
? 35
|
172
|
+
: options?.height === "high"
|
173
|
+
? 43
|
174
|
+
: 39,
|
171
175
|
}}
|
172
176
|
placeholder={placeholder}
|
173
177
|
required={required}
|
@@ -176,11 +180,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
176
180
|
onChange={(e) => {}}
|
177
181
|
onClick={(e) => {
|
178
182
|
e.preventDefault();
|
179
|
-
setOpenDropdown(true);
|
180
183
|
dropdownTriggerRef.current?.click();
|
181
184
|
setDropdownWidth(
|
182
|
-
inputRef?.current?.getBoundingClientRect()?.width || 0
|
185
|
+
inputRef?.current?.getBoundingClientRect()?.width || 0
|
183
186
|
);
|
187
|
+
if (!readOnly) {
|
188
|
+
setOpenDropdown(true);
|
189
|
+
}
|
184
190
|
}}
|
185
191
|
onKeyDown={(e) => {
|
186
192
|
if (e.key === "Enter") {
|
@@ -212,33 +218,35 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
212
218
|
}`}
|
213
219
|
>
|
214
220
|
<span>{menus.find((i) => i.value === item)?.label}</span>
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
disabled
|
219
|
-
|
220
|
-
|
221
|
-
tabIndex={-1}
|
222
|
-
onClick={() => {
|
223
|
-
setTempValue(tempValue.filter((i) => i !== item));
|
224
|
-
if (onChange) {
|
225
|
-
onChange({
|
226
|
-
target: {
|
227
|
-
value: tempValue.filter((i) => i !== item),
|
228
|
-
},
|
229
|
-
} as any);
|
230
|
-
}
|
231
|
-
if (onRemove) {
|
232
|
-
onRemove({
|
233
|
-
target: {
|
234
|
-
value: item,
|
235
|
-
},
|
236
|
-
});
|
221
|
+
{!readOnly && (
|
222
|
+
<button
|
223
|
+
type="button"
|
224
|
+
disabled={
|
225
|
+
disabled ||
|
226
|
+
menus.find((i) => i.value === item)?.disableUnselect
|
237
227
|
}
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
228
|
+
tabIndex={-1}
|
229
|
+
onClick={() => {
|
230
|
+
setTempValue(tempValue.filter((i) => i !== item));
|
231
|
+
if (onChange) {
|
232
|
+
onChange({
|
233
|
+
target: {
|
234
|
+
value: tempValue.filter((i) => i !== item),
|
235
|
+
},
|
236
|
+
} as any);
|
237
|
+
}
|
238
|
+
if (onRemove) {
|
239
|
+
onRemove({
|
240
|
+
target: {
|
241
|
+
value: item,
|
242
|
+
},
|
243
|
+
});
|
244
|
+
}
|
245
|
+
}}
|
246
|
+
>
|
247
|
+
<Icon icon="pajamas:close" />
|
248
|
+
</button>
|
249
|
+
)}
|
242
250
|
</div>
|
243
251
|
);
|
244
252
|
})}
|
@@ -261,16 +269,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
261
269
|
(options?.height === "short"
|
262
270
|
? 7
|
263
271
|
: options?.height === "high"
|
264
|
-
|
265
|
-
|
272
|
+
? 15
|
273
|
+
: 10)
|
266
274
|
: options?.height === "short"
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
275
|
+
? 35
|
276
|
+
: options?.height === "high"
|
277
|
+
? 43
|
278
|
+
: 39,
|
271
279
|
}}
|
272
280
|
tabIndex={-1}
|
273
|
-
disabled={disabled ?? false}
|
281
|
+
disabled={disabled ?? readOnly ?? false}
|
274
282
|
>
|
275
283
|
1
|
276
284
|
</button>
|
@@ -306,16 +314,18 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
306
314
|
as={item.variant || "button"}
|
307
315
|
disabled={item.disabled ?? false}
|
308
316
|
onClick={() => {
|
309
|
-
|
310
|
-
|
311
|
-
onChange
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
onSelect
|
317
|
-
|
318
|
-
|
317
|
+
if (!max || tempValue.length < max) {
|
318
|
+
setTempValue([...tempValue, item.value]);
|
319
|
+
if (onChange) {
|
320
|
+
onChange({
|
321
|
+
target: { value: [...tempValue, item.value] },
|
322
|
+
} as any);
|
323
|
+
}
|
324
|
+
if (onSelect) {
|
325
|
+
onSelect({
|
326
|
+
target: { value: item.value },
|
327
|
+
});
|
328
|
+
}
|
319
329
|
}
|
320
330
|
}}
|
321
331
|
onKeyDown={(e) => {
|
@@ -20,6 +20,7 @@ export interface SelectProps
|
|
20
20
|
width?: "full" | "fit";
|
21
21
|
height?: "short" | "medium" | "high";
|
22
22
|
};
|
23
|
+
readOnly?: boolean;
|
23
24
|
}
|
24
25
|
|
25
26
|
export const Select: React.FC<SelectProps> = ({
|
@@ -29,6 +30,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
29
30
|
description,
|
30
31
|
labelComponent,
|
31
32
|
options,
|
33
|
+
readOnly,
|
32
34
|
...rest
|
33
35
|
}) => {
|
34
36
|
const [tempValue, setTempValue] = useState("");
|
@@ -115,11 +117,13 @@ export const Select: React.FC<SelectProps> = ({
|
|
115
117
|
onChange={(e) => {}}
|
116
118
|
onClick={(e) => {
|
117
119
|
e.preventDefault();
|
118
|
-
setOpenDropdown(true);
|
119
120
|
dropdownTriggerRef.current?.click();
|
120
121
|
setDropdownWidth(
|
121
122
|
inputRef?.current?.getBoundingClientRect()?.width || 0
|
122
123
|
);
|
124
|
+
if (!readOnly) {
|
125
|
+
setOpenDropdown(true);
|
126
|
+
}
|
123
127
|
}}
|
124
128
|
onKeyDown={(e) => {
|
125
129
|
if (e.key === "Enter") {
|
@@ -149,7 +153,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
149
153
|
ref={dropdownTriggerRef}
|
150
154
|
className={`w-0 my-0.5 ${height}`}
|
151
155
|
tabIndex={-1}
|
152
|
-
disabled={rest.disabled ?? false}
|
156
|
+
disabled={rest.disabled ?? readOnly ?? false}
|
153
157
|
>
|
154
158
|
1
|
155
159
|
</button>
|