next-helios-fe 1.9.16 → 1.9.17
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,25 +165,26 @@ 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}
|
174
178
|
disabled={disabled}
|
175
179
|
value={tempValue.join(", ")}
|
176
180
|
onChange={(e) => {}}
|
181
|
+
readOnly={readOnly ?? false}
|
177
182
|
onClick={(e) => {
|
178
183
|
e.preventDefault();
|
179
184
|
setOpenDropdown(true);
|
180
185
|
dropdownTriggerRef.current?.click();
|
181
186
|
setDropdownWidth(
|
182
|
-
inputRef?.current?.getBoundingClientRect()?.width || 0
|
187
|
+
inputRef?.current?.getBoundingClientRect()?.width || 0
|
183
188
|
);
|
184
189
|
}}
|
185
190
|
onKeyDown={(e) => {
|
@@ -212,33 +217,35 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
212
217
|
}`}
|
213
218
|
>
|
214
219
|
<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
|
-
});
|
220
|
+
{!readOnly && (
|
221
|
+
<button
|
222
|
+
type="button"
|
223
|
+
disabled={
|
224
|
+
disabled ||
|
225
|
+
menus.find((i) => i.value === item)?.disableUnselect
|
237
226
|
}
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
227
|
+
tabIndex={-1}
|
228
|
+
onClick={() => {
|
229
|
+
setTempValue(tempValue.filter((i) => i !== item));
|
230
|
+
if (onChange) {
|
231
|
+
onChange({
|
232
|
+
target: {
|
233
|
+
value: tempValue.filter((i) => i !== item),
|
234
|
+
},
|
235
|
+
} as any);
|
236
|
+
}
|
237
|
+
if (onRemove) {
|
238
|
+
onRemove({
|
239
|
+
target: {
|
240
|
+
value: item,
|
241
|
+
},
|
242
|
+
});
|
243
|
+
}
|
244
|
+
}}
|
245
|
+
>
|
246
|
+
<Icon icon="pajamas:close" />
|
247
|
+
</button>
|
248
|
+
)}
|
242
249
|
</div>
|
243
250
|
);
|
244
251
|
})}
|
@@ -261,16 +268,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
261
268
|
(options?.height === "short"
|
262
269
|
? 7
|
263
270
|
: options?.height === "high"
|
264
|
-
|
265
|
-
|
271
|
+
? 15
|
272
|
+
: 10)
|
266
273
|
: options?.height === "short"
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
274
|
+
? 35
|
275
|
+
: options?.height === "high"
|
276
|
+
? 43
|
277
|
+
: 39,
|
271
278
|
}}
|
272
279
|
tabIndex={-1}
|
273
|
-
disabled={disabled ?? false}
|
280
|
+
disabled={disabled ?? readOnly ?? false}
|
274
281
|
>
|
275
282
|
1
|
276
283
|
</button>
|
@@ -306,16 +313,18 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
306
313
|
as={item.variant || "button"}
|
307
314
|
disabled={item.disabled ?? false}
|
308
315
|
onClick={() => {
|
309
|
-
|
310
|
-
|
311
|
-
onChange
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
onSelect
|
317
|
-
|
318
|
-
|
316
|
+
if (!max || tempValue.length < max) {
|
317
|
+
setTempValue([...tempValue, item.value]);
|
318
|
+
if (onChange) {
|
319
|
+
onChange({
|
320
|
+
target: { value: [...tempValue, item.value] },
|
321
|
+
} as any);
|
322
|
+
}
|
323
|
+
if (onSelect) {
|
324
|
+
onSelect({
|
325
|
+
target: { value: item.value },
|
326
|
+
});
|
327
|
+
}
|
319
328
|
}
|
320
329
|
}}
|
321
330
|
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("");
|
@@ -112,6 +114,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
112
114
|
? menus.find((item) => item.value === tempValue)?.label
|
113
115
|
: ""
|
114
116
|
}
|
117
|
+
readOnly={readOnly ?? false}
|
115
118
|
onChange={(e) => {}}
|
116
119
|
onClick={(e) => {
|
117
120
|
e.preventDefault();
|
@@ -149,7 +152,7 @@ export const Select: React.FC<SelectProps> = ({
|
|
149
152
|
ref={dropdownTriggerRef}
|
150
153
|
className={`w-0 my-0.5 ${height}`}
|
151
154
|
tabIndex={-1}
|
152
|
-
disabled={rest.disabled ?? false}
|
155
|
+
disabled={rest.disabled ?? readOnly ?? false}
|
153
156
|
>
|
154
157
|
1
|
155
158
|
</button>
|