@gustavo-valsechi/client 1.4.143 → 1.4.145
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/types/form/types/select/index.js +9 -9
- package/dist/components/types/form/types/select/index.mjs +9 -9
- package/dist/components/types/form/types/select/options/index.js +3 -0
- package/dist/components/types/form/types/select/options/index.mjs +3 -0
- package/dist/components/types/form/types/select/styles.js +29 -1
- package/dist/components/types/form/types/select/styles.mjs +29 -1
- package/package.json +1 -1
|
@@ -50,12 +50,6 @@ function InputSelect(props) {
|
|
|
50
50
|
const register = (props.register || ((name) => ({})))(props.name || "");
|
|
51
51
|
const inputValue = (_a = props.watch) == null ? void 0 : _a.call(props, props.name);
|
|
52
52
|
const value = ((_b = import_lodash.default.find(props.options, (option) => Object.keys(option)[0] === inputValue)) == null ? void 0 : _b[inputValue || ""]) || "";
|
|
53
|
-
(0, import_react.useEffect)(() => {
|
|
54
|
-
if (focus) return;
|
|
55
|
-
const optionsElement = document.getElementById("input-options");
|
|
56
|
-
if (!optionsElement) return;
|
|
57
|
-
optionsElement.setAttribute("value", "");
|
|
58
|
-
}, [focus]);
|
|
59
53
|
(0, import_react.useEffect)(() => {
|
|
60
54
|
var _a2;
|
|
61
55
|
if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
|
|
@@ -81,6 +75,9 @@ function InputSelect(props) {
|
|
|
81
75
|
const onFocus = (event) => {
|
|
82
76
|
setFocus(true);
|
|
83
77
|
if (register.onFocus) register.onFocus(event);
|
|
78
|
+
const optionsElement = document.getElementById("input-options");
|
|
79
|
+
if (!optionsElement) return;
|
|
80
|
+
setFilter(optionsElement.getAttribute("value") || "");
|
|
84
81
|
};
|
|
85
82
|
const onChange = (event) => {
|
|
86
83
|
const value2 = event.target.value || "";
|
|
@@ -126,12 +123,15 @@ function InputSelect(props) {
|
|
|
126
123
|
children: value
|
|
127
124
|
}
|
|
128
125
|
),
|
|
129
|
-
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
130
127
|
"div",
|
|
131
128
|
{
|
|
132
129
|
className: "input-icon",
|
|
133
|
-
|
|
134
|
-
children:
|
|
130
|
+
"data-focus": focus,
|
|
131
|
+
children: [
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }),
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" })
|
|
134
|
+
]
|
|
135
135
|
}
|
|
136
136
|
)
|
|
137
137
|
]
|
|
@@ -17,12 +17,6 @@ function InputSelect(props) {
|
|
|
17
17
|
const register = (props.register || ((name) => ({})))(props.name || "");
|
|
18
18
|
const inputValue = (_a = props.watch) == null ? void 0 : _a.call(props, props.name);
|
|
19
19
|
const value = ((_b = _.find(props.options, (option) => Object.keys(option)[0] === inputValue)) == null ? void 0 : _b[inputValue || ""]) || "";
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
if (focus) return;
|
|
22
|
-
const optionsElement = document.getElementById("input-options");
|
|
23
|
-
if (!optionsElement) return;
|
|
24
|
-
optionsElement.setAttribute("value", "");
|
|
25
|
-
}, [focus]);
|
|
26
20
|
useEffect(() => {
|
|
27
21
|
var _a2;
|
|
28
22
|
if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
|
|
@@ -48,6 +42,9 @@ function InputSelect(props) {
|
|
|
48
42
|
const onFocus = (event) => {
|
|
49
43
|
setFocus(true);
|
|
50
44
|
if (register.onFocus) register.onFocus(event);
|
|
45
|
+
const optionsElement = document.getElementById("input-options");
|
|
46
|
+
if (!optionsElement) return;
|
|
47
|
+
setFilter(optionsElement.getAttribute("value") || "");
|
|
51
48
|
};
|
|
52
49
|
const onChange = (event) => {
|
|
53
50
|
const value2 = event.target.value || "";
|
|
@@ -93,12 +90,15 @@ function InputSelect(props) {
|
|
|
93
90
|
children: value
|
|
94
91
|
}
|
|
95
92
|
),
|
|
96
|
-
|
|
93
|
+
/* @__PURE__ */ jsxs(
|
|
97
94
|
"div",
|
|
98
95
|
{
|
|
99
96
|
className: "input-icon",
|
|
100
|
-
|
|
101
|
-
children:
|
|
97
|
+
"data-focus": focus,
|
|
98
|
+
children: [
|
|
99
|
+
/* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-up" }),
|
|
100
|
+
/* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-chevron-down" })
|
|
101
|
+
]
|
|
102
102
|
}
|
|
103
103
|
)
|
|
104
104
|
]
|
|
@@ -68,6 +68,9 @@ function InputSelectOption(props) {
|
|
|
68
68
|
var _a;
|
|
69
69
|
(_a = props.setValue) == null ? void 0 : _a.call(props, props.name, value);
|
|
70
70
|
target.close(props.inputRef);
|
|
71
|
+
const optionsElement = document.getElementById("input-options");
|
|
72
|
+
if (!optionsElement) return;
|
|
73
|
+
optionsElement.setAttribute("value", "");
|
|
71
74
|
};
|
|
72
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { id: "input-options", width: props.width, children: import_lodash.default.map(
|
|
73
76
|
options,
|
|
@@ -35,6 +35,9 @@ function InputSelectOption(props) {
|
|
|
35
35
|
var _a;
|
|
36
36
|
(_a = props.setValue) == null ? void 0 : _a.call(props, props.name, value);
|
|
37
37
|
target.close(props.inputRef);
|
|
38
|
+
const optionsElement = document.getElementById("input-options");
|
|
39
|
+
if (!optionsElement) return;
|
|
40
|
+
optionsElement.setAttribute("value", "");
|
|
38
41
|
};
|
|
39
42
|
return /* @__PURE__ */ jsx(Container, { id: "input-options", width: props.width, children: _.map(
|
|
40
43
|
options,
|
|
@@ -78,7 +78,7 @@ const Container = import_styled_components.default.div`
|
|
|
78
78
|
top: 0;
|
|
79
79
|
left: 0;
|
|
80
80
|
height: 100%;
|
|
81
|
-
width:
|
|
81
|
+
width: 100%;
|
|
82
82
|
cursor: pointer;
|
|
83
83
|
z-index: 1;
|
|
84
84
|
padding: 0 1rem;
|
|
@@ -99,6 +99,34 @@ const Container = import_styled_components.default.div`
|
|
|
99
99
|
|
|
100
100
|
i {
|
|
101
101
|
font-size: .9rem;
|
|
102
|
+
|
|
103
|
+
&.fa-chevron-up {
|
|
104
|
+
z-index: -1;
|
|
105
|
+
opacity: 0;
|
|
106
|
+
position: fixed;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&.fa-chevron-down {
|
|
110
|
+
z-index: 0;
|
|
111
|
+
opacity: 1;
|
|
112
|
+
position: relative;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&[data-focus="true"] {
|
|
117
|
+
i {
|
|
118
|
+
&.fa-chevron-up {
|
|
119
|
+
z-index: 0;
|
|
120
|
+
opacity: 1;
|
|
121
|
+
position: relative;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&.fa-chevron-down {
|
|
125
|
+
z-index: -1;
|
|
126
|
+
opacity: 0;
|
|
127
|
+
position: fixed;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
102
130
|
}
|
|
103
131
|
}
|
|
104
132
|
}
|
|
@@ -45,7 +45,7 @@ const Container = styled.div`
|
|
|
45
45
|
top: 0;
|
|
46
46
|
left: 0;
|
|
47
47
|
height: 100%;
|
|
48
|
-
width:
|
|
48
|
+
width: 100%;
|
|
49
49
|
cursor: pointer;
|
|
50
50
|
z-index: 1;
|
|
51
51
|
padding: 0 1rem;
|
|
@@ -66,6 +66,34 @@ const Container = styled.div`
|
|
|
66
66
|
|
|
67
67
|
i {
|
|
68
68
|
font-size: .9rem;
|
|
69
|
+
|
|
70
|
+
&.fa-chevron-up {
|
|
71
|
+
z-index: -1;
|
|
72
|
+
opacity: 0;
|
|
73
|
+
position: fixed;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&.fa-chevron-down {
|
|
77
|
+
z-index: 0;
|
|
78
|
+
opacity: 1;
|
|
79
|
+
position: relative;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&[data-focus="true"] {
|
|
84
|
+
i {
|
|
85
|
+
&.fa-chevron-up {
|
|
86
|
+
z-index: 0;
|
|
87
|
+
opacity: 1;
|
|
88
|
+
position: relative;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&.fa-chevron-down {
|
|
92
|
+
z-index: -1;
|
|
93
|
+
opacity: 0;
|
|
94
|
+
position: fixed;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
69
97
|
}
|
|
70
98
|
}
|
|
71
99
|
}
|