@arkyn/components 1.3.21 → 1.3.23
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/bundle.js +380 -378
- package/dist/bundle.umd.cjs +8 -8
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +17 -8
- package/dist/hooks/useAutomation.d.ts.map +1 -1
- package/dist/hooks/useAutomation.js +2 -1
- package/dist/style.css +1 -1
- package/dist/utils/generateIcon.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/index.tsx +24 -11
- package/src/components/Select/styles.css +8 -8
- package/src/hooks/useAutomation.ts +2 -1
- package/src/utils/generateIcon.tsx +0 -1
@@ -65,6 +65,20 @@ function Select(props: SelectProps) {
|
|
65
65
|
}
|
66
66
|
}
|
67
67
|
|
68
|
+
function handleChangeValue(option: { label: string; value: string }) {
|
69
|
+
const { label, value } = option;
|
70
|
+
|
71
|
+
if (selectedValue !== value) setSelectedValue(value);
|
72
|
+
else setSelectedValue("");
|
73
|
+
|
74
|
+
if (onSelect) onSelect({ label, value });
|
75
|
+
if (closeOnSelect) {
|
76
|
+
ref.current.blur();
|
77
|
+
setIsFocused(false);
|
78
|
+
console.log("fecha");
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
68
82
|
const currentValue =
|
69
83
|
typeof baseValue === "string" ? baseValue : selectedValue;
|
70
84
|
|
@@ -125,27 +139,26 @@ function Select(props: SelectProps) {
|
|
125
139
|
/>
|
126
140
|
|
127
141
|
{isFocused && (
|
128
|
-
<
|
142
|
+
<div
|
129
143
|
className="arkyn_select_content"
|
130
144
|
style={{ overflow: "auto", maxHeight: optionMaxHeight }}
|
131
145
|
>
|
132
146
|
{filteredOptions.map(({ label, value }) => (
|
133
|
-
<
|
147
|
+
<div
|
134
148
|
key={value}
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
}}
|
149
|
+
onClick={() => handleChangeValue({ label, value })}
|
150
|
+
className={
|
151
|
+
currentValue === value
|
152
|
+
? "arkyn_select_option active"
|
153
|
+
: "arkyn_select_option"
|
154
|
+
}
|
142
155
|
>
|
143
156
|
{label} <Check />
|
144
|
-
</
|
157
|
+
</div>
|
145
158
|
))}
|
146
159
|
|
147
160
|
{filteredOptions.length <= 0 && <p>Sem opções disponíveis</p>}
|
148
|
-
</
|
161
|
+
</div>
|
149
162
|
)}
|
150
163
|
|
151
164
|
{!isLoading && (
|
@@ -222,7 +222,7 @@
|
|
222
222
|
background-color: var(--secondary-50);
|
223
223
|
}
|
224
224
|
|
225
|
-
.arkyn_select_content
|
225
|
+
.arkyn_select_content .arkyn_select_option {
|
226
226
|
display: flex;
|
227
227
|
align-items: center;
|
228
228
|
justify-content: space-between;
|
@@ -233,12 +233,12 @@
|
|
233
233
|
color: var(--secondary-500);
|
234
234
|
}
|
235
235
|
|
236
|
-
.arkyn_select.md .arkyn_select_content
|
236
|
+
.arkyn_select.md .arkyn_select_content .arkyn_select_option {
|
237
237
|
font-size: 14px;
|
238
238
|
padding: 8px 16px;
|
239
239
|
}
|
240
240
|
|
241
|
-
.arkyn_select.lg .arkyn_select_content
|
241
|
+
.arkyn_select.lg .arkyn_select_content .arkyn_select_option {
|
242
242
|
font-size: 16px;
|
243
243
|
padding: 8px 16px;
|
244
244
|
}
|
@@ -253,30 +253,30 @@
|
|
253
253
|
color: var(--secondary-500);
|
254
254
|
}
|
255
255
|
|
256
|
-
.arkyn_select_content
|
256
|
+
.arkyn_select_content .arkyn_select_option svg {
|
257
257
|
height: 20px;
|
258
258
|
width: 20px;
|
259
259
|
color: var(--primary-500);
|
260
260
|
display: none;
|
261
261
|
}
|
262
262
|
|
263
|
-
.arkyn_select_content
|
263
|
+
.arkyn_select_content .arkyn_select_option:hover {
|
264
264
|
cursor: pointer;
|
265
265
|
background-color: var(--secondary-100);
|
266
266
|
}
|
267
267
|
|
268
|
-
.arkyn_select_content
|
268
|
+
.arkyn_select_content .arkyn_select_option:not(:last-child) {
|
269
269
|
border-bottom: 1px solid var(--secondary-300);
|
270
270
|
}
|
271
271
|
|
272
|
-
.arkyn_select_content
|
272
|
+
.arkyn_select_content .arkyn_select_option.active {
|
273
273
|
font-weight: 600;
|
274
274
|
|
275
275
|
color: var(--secondary-900);
|
276
276
|
background-color: var(--secondary-100);
|
277
277
|
}
|
278
278
|
|
279
|
-
.arkyn_select_content
|
279
|
+
.arkyn_select_content .arkyn_select_option.active svg {
|
280
280
|
display: unset;
|
281
281
|
}
|
282
282
|
|
@@ -17,7 +17,8 @@ function useAutomation() {
|
|
17
17
|
useEffect(() => {
|
18
18
|
const showToast =
|
19
19
|
typeof actionData?.message === "string" &&
|
20
|
-
typeof actionData?.success === "boolean"
|
20
|
+
typeof actionData?.success === "boolean" &&
|
21
|
+
actionData.message !== "";
|
21
22
|
|
22
23
|
if (showToast) {
|
23
24
|
if (actionData?.success) successToast(actionData?.message);
|