next-helios-fe 1.10.15 → 1.10.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/dist/components/form/other/multipleSelect.d.ts +1 -0
- package/dist/components/form/other/select.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/form/input/search.tsx +12 -1
- package/src/components/form/other/modalSelect.tsx +6 -2
- package/src/components/form/other/multipleSelect.tsx +15 -1
- package/src/components/form/other/select.tsx +67 -33
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { useState } from "react";
|
|
2
|
+
import React, { useState, useEffect } from "react";
|
|
3
3
|
import { useDebouncedCallback } from "use-debounce";
|
|
4
4
|
import { Icon } from "@iconify/react";
|
|
5
5
|
|
|
@@ -31,6 +31,17 @@ export const Search: React.FC<SearchProps> = ({
|
|
|
31
31
|
? "py-2"
|
|
32
32
|
: "py-1.5";
|
|
33
33
|
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (!options?.delayed && (value || value === "")) {
|
|
36
|
+
setTempValue(value as string);
|
|
37
|
+
onChange &&
|
|
38
|
+
onChange({
|
|
39
|
+
target: { value: value } as HTMLInputElement,
|
|
40
|
+
} as React.ChangeEvent<HTMLInputElement>);
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
}, [options?.delayed, value]);
|
|
44
|
+
|
|
34
45
|
const handleDelayedValueUpdate = useDebouncedCallback((value) => {
|
|
35
46
|
onChange &&
|
|
36
47
|
onChange({
|
|
@@ -395,7 +395,9 @@ export const ModalSelect: React.FC<ModalSelectProps> = ({
|
|
|
395
395
|
{type === "select" ? (
|
|
396
396
|
<div className="flex flex-col">
|
|
397
397
|
<span className="text-sm">{optionItem.label}</span>
|
|
398
|
-
<span className="text-xs">
|
|
398
|
+
<span className="text-xs text-disabled">
|
|
399
|
+
{optionItem.subLabel}
|
|
400
|
+
</span>
|
|
399
401
|
</div>
|
|
400
402
|
) : (
|
|
401
403
|
<div className="flex gap-4 pointer-events-none">
|
|
@@ -408,7 +410,9 @@ export const ModalSelect: React.FC<ModalSelectProps> = ({
|
|
|
408
410
|
/>
|
|
409
411
|
<div className="flex flex-col">
|
|
410
412
|
<span className="text-sm">{optionItem.label}</span>
|
|
411
|
-
<span className="text-xs">
|
|
413
|
+
<span className="text-xs text-disabled">
|
|
414
|
+
{optionItem.subLabel}
|
|
415
|
+
</span>
|
|
412
416
|
</div>
|
|
413
417
|
</div>
|
|
414
418
|
)}
|
|
@@ -10,6 +10,7 @@ export interface MultipleSelectProps
|
|
|
10
10
|
> {
|
|
11
11
|
menus: {
|
|
12
12
|
label: string;
|
|
13
|
+
subLabel?: string;
|
|
13
14
|
value: string;
|
|
14
15
|
variant?: "button" | "title";
|
|
15
16
|
disabled?: boolean;
|
|
@@ -342,7 +343,20 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
|
342
343
|
className="flex items-center justify-between gap-4"
|
|
343
344
|
style={{ width: dropdownWidth - 43 }}
|
|
344
345
|
>
|
|
345
|
-
<
|
|
346
|
+
<div className="flex flex-col">
|
|
347
|
+
<span>{item.label}</span>
|
|
348
|
+
{item.subLabel && (
|
|
349
|
+
<span
|
|
350
|
+
className={`text-xs ${
|
|
351
|
+
tempValue?.find((i) => i === item.value)
|
|
352
|
+
? ""
|
|
353
|
+
: "text-disabled"
|
|
354
|
+
}`}
|
|
355
|
+
>
|
|
356
|
+
{item.subLabel}
|
|
357
|
+
</span>
|
|
358
|
+
)}
|
|
359
|
+
</div>
|
|
346
360
|
{labelComponent ? labelComponent(item) : ""}
|
|
347
361
|
</div>
|
|
348
362
|
</Dropdown.Item>
|
|
@@ -7,6 +7,7 @@ export interface SelectProps
|
|
|
7
7
|
extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
8
8
|
menus: {
|
|
9
9
|
label: string;
|
|
10
|
+
subLabel?: string;
|
|
10
11
|
value: string;
|
|
11
12
|
variant?: "button" | "title";
|
|
12
13
|
disabled?: boolean;
|
|
@@ -101,40 +102,62 @@ export const Select: React.FC<SelectProps> = ({
|
|
|
101
102
|
)}
|
|
102
103
|
</div>
|
|
103
104
|
)}
|
|
104
|
-
<div className="
|
|
105
|
-
<
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
onChange={(e) => {}}
|
|
118
|
-
onClick={(e) => {
|
|
119
|
-
if (!readOnly) {
|
|
120
|
-
e.preventDefault();
|
|
121
|
-
dropdownTriggerRef.current?.click();
|
|
122
|
-
setDropdownWidth(
|
|
123
|
-
inputRef?.current?.getBoundingClientRect()?.width || 0
|
|
124
|
-
);
|
|
125
|
-
setOpenDropdown(true);
|
|
105
|
+
<div className="group flex items-center gap-2">
|
|
106
|
+
<div className="relative flex-1 flex items-center cursor-pointer">
|
|
107
|
+
<input
|
|
108
|
+
ref={inputRef}
|
|
109
|
+
type="text"
|
|
110
|
+
className={`w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height}`}
|
|
111
|
+
placeholder={placeholder}
|
|
112
|
+
required={rest.required}
|
|
113
|
+
disabled={rest.disabled}
|
|
114
|
+
value={
|
|
115
|
+
tempValue
|
|
116
|
+
? menus.find((item) => item.value === tempValue)?.label
|
|
117
|
+
: ""
|
|
126
118
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
119
|
+
onChange={(e) => {}}
|
|
120
|
+
onClick={(e) => {
|
|
121
|
+
if (!readOnly) {
|
|
122
|
+
e.preventDefault();
|
|
123
|
+
dropdownTriggerRef.current?.click();
|
|
124
|
+
setDropdownWidth(
|
|
125
|
+
inputRef?.current?.getBoundingClientRect()?.width || 0
|
|
126
|
+
);
|
|
127
|
+
setOpenDropdown(true);
|
|
128
|
+
}
|
|
129
|
+
}}
|
|
130
|
+
onKeyDown={(e) => {
|
|
131
|
+
if (e.key === "Enter") {
|
|
132
|
+
e.preventDefault();
|
|
133
|
+
inputRef.current?.click();
|
|
134
|
+
}
|
|
135
|
+
}}
|
|
136
|
+
/>
|
|
137
|
+
<div className="absolute right-4 text-xl text-disabled pointer-events-none">
|
|
138
|
+
<Icon
|
|
139
|
+
icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
137
142
|
</div>
|
|
143
|
+
{!rest.required && tempValue && (
|
|
144
|
+
<button
|
|
145
|
+
type="button"
|
|
146
|
+
className={`p-1 rounded-full text-xl hover:bg-secondary-light ${
|
|
147
|
+
!openDropdown && "hidden group-hover:block"
|
|
148
|
+
}`}
|
|
149
|
+
onClick={() => {
|
|
150
|
+
setTempValue("");
|
|
151
|
+
if (rest.onChange) {
|
|
152
|
+
rest.onChange({
|
|
153
|
+
target: { value: "" } as HTMLSelectElement,
|
|
154
|
+
} as any);
|
|
155
|
+
}
|
|
156
|
+
}}
|
|
157
|
+
>
|
|
158
|
+
<Icon icon="pajamas:close" />
|
|
159
|
+
</button>
|
|
160
|
+
)}
|
|
138
161
|
</div>
|
|
139
162
|
<select className="hidden" {...rest}>
|
|
140
163
|
{menus.map((item, index) => (
|
|
@@ -210,7 +233,18 @@ export const Select: React.FC<SelectProps> = ({
|
|
|
210
233
|
className="flex justify-between items-center gap-4"
|
|
211
234
|
style={{ width: dropdownWidth - 43 }}
|
|
212
235
|
>
|
|
213
|
-
<
|
|
236
|
+
<div className="flex flex-col">
|
|
237
|
+
<span>{item.label}</span>
|
|
238
|
+
{item.subLabel && (
|
|
239
|
+
<span
|
|
240
|
+
className={`text-xs ${
|
|
241
|
+
tempValue === item.value ? "" : "text-disabled"
|
|
242
|
+
}`}
|
|
243
|
+
>
|
|
244
|
+
{item.subLabel}
|
|
245
|
+
</span>
|
|
246
|
+
)}
|
|
247
|
+
</div>
|
|
214
248
|
{labelComponent ? labelComponent(item) : ""}
|
|
215
249
|
</div>
|
|
216
250
|
</Dropdown.Item>
|