stone-kit 0.0.1103 → 0.0.1106
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.
|
@@ -1,98 +1,81 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
1
|
+
import { jsxs as u, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { memo as D, useState as h, useRef as E, useCallback as v, useEffect as f } from "react";
|
|
3
3
|
import { c as w } from "../../../index-DIxK0V-G.js";
|
|
4
|
-
import { NewIcon as
|
|
5
|
-
const y = "_multiSelectWrapper_1hlrv_1", I = "_selectedOptions_1hlrv_7",
|
|
4
|
+
import { NewIcon as S } from "../../NewIcon/ui/NewIcon.js";
|
|
5
|
+
const y = "_multiSelectWrapper_1hlrv_1", I = "_selectedOptions_1hlrv_7", g = "_selectedOptionsOpened_1hlrv_28", j = "_selectOptionsDisabled_1hlrv_32", z = "_optionsList_1hlrv_39", R = "_inputWrapper_1hlrv_54", U = "_option_1hlrv_39", q = "_icon_1hlrv_76", s = {
|
|
6
6
|
multiSelectWrapper: y,
|
|
7
7
|
selectedOptions: I,
|
|
8
|
-
selectedOptionsOpened:
|
|
9
|
-
selectOptionsDisabled:
|
|
10
|
-
optionsList:
|
|
11
|
-
inputWrapper:
|
|
8
|
+
selectedOptionsOpened: g,
|
|
9
|
+
selectOptionsDisabled: j,
|
|
10
|
+
optionsList: z,
|
|
11
|
+
inputWrapper: R,
|
|
12
12
|
option: U,
|
|
13
13
|
icon: q
|
|
14
|
-
},
|
|
15
|
-
options:
|
|
16
|
-
placeholder:
|
|
17
|
-
error:
|
|
18
|
-
disabled:
|
|
14
|
+
}, c = w.bind(s), A = ({
|
|
15
|
+
options: k,
|
|
16
|
+
placeholder: W = "Выберите опции",
|
|
17
|
+
error: b,
|
|
18
|
+
disabled: N,
|
|
19
19
|
additionalClass: x = "",
|
|
20
20
|
onChange: i,
|
|
21
|
-
onBlur:
|
|
22
|
-
selectedValues:
|
|
21
|
+
onBlur: o,
|
|
22
|
+
selectedValues: r = []
|
|
23
23
|
}) => {
|
|
24
|
-
const [t,
|
|
25
|
-
(e) => (
|
|
26
|
-
n.
|
|
27
|
-
|
|
28
|
-
if (O(u), i) {
|
|
29
|
-
console.log("Selected options:", u);
|
|
30
|
-
const l = {
|
|
31
|
-
...n,
|
|
32
|
-
target: { value: u }
|
|
33
|
-
};
|
|
34
|
-
i(l);
|
|
35
|
-
}
|
|
24
|
+
const [t, _] = h(r), [a, O] = h(!1), p = E(null), C = v(
|
|
25
|
+
(e) => () => {
|
|
26
|
+
const n = t.some((m) => m.value === e.value) ? t.filter((m) => m.value !== e.value) : [...t, e];
|
|
27
|
+
_(n), i && i(n);
|
|
36
28
|
},
|
|
37
29
|
[t, i]
|
|
38
|
-
),
|
|
39
|
-
|
|
40
|
-
}, []),
|
|
41
|
-
(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
[t, r]
|
|
51
|
-
);
|
|
52
|
-
return S(() => (document.addEventListener("click", m), () => {
|
|
53
|
-
document.removeEventListener("click", m);
|
|
54
|
-
}), [m]), S(() => {
|
|
55
|
-
O(a);
|
|
56
|
-
}, [a]), /* @__PURE__ */ v(
|
|
30
|
+
), d = v((e) => {
|
|
31
|
+
p.current && !p.current.contains(e.target) && O(!1);
|
|
32
|
+
}, []), L = v(() => {
|
|
33
|
+
o && o(t);
|
|
34
|
+
}, [t, o]);
|
|
35
|
+
return f(() => (document.addEventListener("click", d), () => {
|
|
36
|
+
document.removeEventListener("click", d);
|
|
37
|
+
}), [d]), f(() => {
|
|
38
|
+
_(r);
|
|
39
|
+
}, [r]), /* @__PURE__ */ u(
|
|
57
40
|
"div",
|
|
58
41
|
{
|
|
59
|
-
ref:
|
|
60
|
-
className:
|
|
42
|
+
ref: p,
|
|
43
|
+
className: c(s.multiSelectWrapper, { [s.multiSelectWrapperError]: b }, x),
|
|
61
44
|
tabIndex: 0,
|
|
62
|
-
onBlur:
|
|
45
|
+
onBlur: L,
|
|
63
46
|
children: [
|
|
64
|
-
/* @__PURE__ */
|
|
65
|
-
/* @__PURE__ */
|
|
47
|
+
/* @__PURE__ */ u("div", { className: c(s.inputWrapper), children: [
|
|
48
|
+
/* @__PURE__ */ l(
|
|
66
49
|
"input",
|
|
67
50
|
{
|
|
68
51
|
type: "text",
|
|
69
52
|
readOnly: !0,
|
|
70
|
-
value: t.length === 0 ?
|
|
71
|
-
className:
|
|
72
|
-
onClick: () =>
|
|
53
|
+
value: t.length === 0 ? W : "Выбрано " + t.length + " опции",
|
|
54
|
+
className: c(s.selectedOptions, { [s.selectOptionsDisabled]: N }),
|
|
55
|
+
onClick: () => O(!a)
|
|
73
56
|
}
|
|
74
57
|
),
|
|
75
|
-
/* @__PURE__ */
|
|
76
|
-
|
|
58
|
+
/* @__PURE__ */ l(
|
|
59
|
+
S,
|
|
77
60
|
{
|
|
78
61
|
name: "arrowShort",
|
|
79
|
-
deg:
|
|
62
|
+
deg: a ? "180" : "0",
|
|
80
63
|
size: "24",
|
|
81
64
|
additionalClass: s.icon
|
|
82
65
|
}
|
|
83
66
|
)
|
|
84
67
|
] }),
|
|
85
|
-
|
|
68
|
+
a && /* @__PURE__ */ l("div", { className: s.optionsList, children: k.map((e) => /* @__PURE__ */ u(
|
|
86
69
|
"div",
|
|
87
70
|
{
|
|
88
|
-
className:
|
|
71
|
+
className: c(s.option, {
|
|
89
72
|
[s.selected]: t.some((n) => n.value === e.value)
|
|
90
73
|
}),
|
|
91
74
|
onClick: C(e),
|
|
92
75
|
children: [
|
|
93
|
-
/* @__PURE__ */
|
|
94
|
-
/* @__PURE__ */
|
|
95
|
-
|
|
76
|
+
/* @__PURE__ */ l("div", { children: e.label }),
|
|
77
|
+
/* @__PURE__ */ l(
|
|
78
|
+
S,
|
|
96
79
|
{
|
|
97
80
|
size: "20",
|
|
98
81
|
name: t.some((n) => n.value === e.value) ? "selectChecked" : "selectUnchecked"
|
|
@@ -105,7 +88,7 @@ const y = "_multiSelectWrapper_1hlrv_1", I = "_selectedOptions_1hlrv_7", j = "_s
|
|
|
105
88
|
]
|
|
106
89
|
}
|
|
107
90
|
);
|
|
108
|
-
}, B =
|
|
91
|
+
}, B = D(A);
|
|
109
92
|
B.displayName = "Select";
|
|
110
93
|
export {
|
|
111
94
|
B as Select
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import { ChangeEvent } from 'react';
|
|
2
|
+
|
|
2
3
|
export interface Option {
|
|
3
4
|
value: string | number;
|
|
4
5
|
label: string;
|
|
@@ -8,8 +9,8 @@ export interface MultiSelectProps {
|
|
|
8
9
|
placeholder?: string;
|
|
9
10
|
error?: boolean;
|
|
10
11
|
disabled?: boolean;
|
|
11
|
-
onChange?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
12
|
-
onBlur?: (event: React.FocusEvent<HTMLDivElement, Element>) => void;
|
|
13
12
|
additionalClass?: string;
|
|
13
|
+
onChange?: (e: ChangeEvent<HTMLInputElement>) => unknown;
|
|
14
|
+
onBlur?: (e: ChangeEvent<HTMLInputElement>) => unknown;
|
|
14
15
|
selectedValues?: Option[];
|
|
15
16
|
}
|