bmi-next 1.0.13 → 1.0.15
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/assets/index.css +1 -1
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index2.css +1 -1
- package/dist/assets/index7.css +1 -1
- package/dist/components/DatePicker/index.d.ts +3 -1
- package/dist/components/DatePicker/index.js +85 -84
- package/dist/components/Navbar/index.js +13 -14
- package/dist/components/Select/index.d.ts +3 -1
- package/dist/components/Select/index.js +58 -53
- package/dist/components/TextArea/index.d.ts +1 -0
- package/dist/components/TextArea/index.js +41 -39
- package/dist/main.d.ts +1 -0
- package/dist/main.js +12 -10
- package/package.json +1 -1
package/dist/assets/index2.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._selectDrawer_1o9yc_1{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}._label_1o9yc_9{margin-left:9px;font-family:Poppins Medium;font-size:14px;line-height:16.8px}._selected_1o9yc_16{border-radius:16px;display:flex;gap:5px;border:1px solid var(--negro-20);padding-inline:16px;height:52px;box-sizing:border-box;background-color:#fff;cursor:pointer;align-items:center;font-family:Poppins Regular;font-size:16px;line-height:19.2px}._selected_1o9yc_16>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%;line-height:52px}
|
package/dist/assets/index7.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._overlay_5wdi7_1{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;animation:_fadeIn_5wdi7_1 .25s ease-in-out;z-index:100}._overlay_5wdi7_1._closing_5wdi7_12{animation:_fadeOut_5wdi7_1 .25s ease-in-out forwards}._bottomDrawer_5wdi7_16{position:fixed;bottom:0;left:0;right:0;background-color:#fff;border-radius:16px 16px 0 0;z-index:101;animation:_slideUp_5wdi7_1 .35s cubic-bezier(.4,0,.2,1);padding:7px 15px 30px;transition:transform .2s cubic-bezier(.4,0,.2,1);touch-action:none}._closing_5wdi7_12{animation:_slideDown_5wdi7_1 .35s cubic-bezier(.4,0,.2,1) forwards}._drawerHeader_5wdi7_34{display:flex;justify-content:center;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}._drawerHeader_5wdi7_34:active{cursor:grabbing}._drawerIndicator_5wdi7_46{width:40px;height:7px;background-color:#e5e7eb;border-radius:14px}._dateButton_5wdi7_53{background:none;border:1px solid #E5E7EB;border-radius:8px;padding:12px 16px;font-size:16px;color:#030c24;cursor:pointer;width:100%;text-align:left}._dateButton_5wdi7_53:hover{background-color:#f9fafb}._drawerContent_5wdi7_69{max-height:70vh;overflow-y:hidden;padding:16px;display:flex;flex-direction:column;gap:20px}._closeButton_5wdi7_78{position:absolute;height:30px;width:30px;top:10px;right:10px;cursor:pointer;background-color:#030c2419;border-radius:50%;display:flex;align-items:center;justify-content:center}._drawerContent_5wdi7_69 p{font-size:22px;margin:0}._pickerContainer_5wdi7_97{position:relative;display:flex;justify-content:space-between;align-items:center;height:250px;overflow:hidden;background-color:#dceaff66;border-radius:16px;padding:0 16px}._pickerContainer_5wdi7_97:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;transform:translateY(-22px);z-index:2}._pickerContainer_5wdi7_97:after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;transform:translateY(22px);z-index:2}._pickerContainer_5wdi7_97 ._topFade_5wdi7_133{content:"";position:absolute;top:0;left:0;right:0;height:100px;background:linear-gradient(to bottom,#f2f6fd,#f2f6fdcc 20%,#f2f6fd00);z-index:1;pointer-events:none}._pickerContainer_5wdi7_97 ._bottomFade_5wdi7_149{content:"";position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to top,#f2f6fd,#f2f6fdcc 20%,#f2f6fd00);z-index:1;pointer-events:none}._pickerColumn_5wdi7_164{flex:1;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;padding:125px 0;position:relative;perspective:500px}._pickerColumn_5wdi7_164:last-child{min-width:80px;scroll-padding:125px}._pickerColumn_5wdi7_164::-webkit-scrollbar{display:none}._pickerColumn_5wdi7_164>div:first-child{padding-top:103px;scroll-snap-align:start}._pickerColumn_5wdi7_164>div:last-child{padding-bottom:103px;scroll-snap-align:end}._pickerItem_5wdi7_198{height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#030c2466;scroll-snap-align:center;scroll-snap-stop:always;cursor:pointer;transition:all .2s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transform-style:preserve-3d;transform-origin:center center;position:relative;will-change:transform;width:100%;text-align:center}._pickerColumn_5wdi7_164:last-child ._pickerItem_5wdi7_198{font-variant-numeric:tabular-nums;letter-spacing:-.5px;scroll-snap-align:center}._pickerItem_5wdi7_198:not(._selected_5wdi7_225){transform:translateZ(-25px) rotateX(25deg) scale(.95)}._pickerItem_5wdi7_198._selected_5wdi7_225{transform:translateZ(0) rotateX(0) scale(1);color:#030c24;font-size:22px;font-weight:500}._pickerHighlight_5wdi7_237{position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);background-color:#030c2408;pointer-events:none;z-index:0}@keyframes _fadeIn_5wdi7_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_5wdi7_1{0%{opacity:1}to{opacity:0}}@keyframes _slideUp_5wdi7_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideDown_5wdi7_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._labelContainer_5wdi7_289{display:flex;justify-content:space-between;align-items:center}._labelContainer_5wdi7_289>label{margin-left:9px;font-family:Poppins Medium;font-size:14px;line-height:16.8px}._invalidLabel_5wdi7_302{color:var(--rojo)}
|
|
@@ -11,6 +11,8 @@ interface DatePickerProps {
|
|
|
11
11
|
selected: Date;
|
|
12
12
|
/** Función callback para actualizar la fecha seleccionada */
|
|
13
13
|
setSelected: (selected: Date) => void;
|
|
14
|
+
/** Texto del label */
|
|
15
|
+
label?: string;
|
|
14
16
|
}
|
|
15
|
-
export declare function DatePicker({ title, buttonText, selected, setSelected }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function DatePicker({ title, buttonText, selected, setSelected, label }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
16
18
|
export {};
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import { jsxs as l, Fragment as
|
|
2
|
-
import { Icon as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Input as
|
|
6
|
-
import '../../assets/index7.css';const
|
|
7
|
-
overlay:
|
|
8
|
-
closing:
|
|
9
|
-
bottomDrawer:
|
|
10
|
-
drawerHeader:
|
|
11
|
-
drawerIndicator:
|
|
12
|
-
dateButton:
|
|
13
|
-
drawerContent:
|
|
14
|
-
closeButton:
|
|
15
|
-
pickerContainer:
|
|
16
|
-
topFade:
|
|
17
|
-
bottomFade:
|
|
18
|
-
pickerColumn:
|
|
19
|
-
pickerItem:
|
|
20
|
-
selected:
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
function
|
|
24
|
-
const [
|
|
1
|
+
import { jsxs as l, Fragment as S, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { Icon as E } from "../../icons/icons.js";
|
|
3
|
+
import { useState as c, useRef as k, useEffect as m } from "react";
|
|
4
|
+
import { Button as J } from "../Button/index.js";
|
|
5
|
+
import { Input as q } from "../Input/index.js";
|
|
6
|
+
import '../../assets/index7.css';const z = "_overlay_5wdi7_1", G = "_closing_5wdi7_12", K = "_bottomDrawer_5wdi7_16", L = "_drawerHeader_5wdi7_34", Q = "_drawerIndicator_5wdi7_46", U = "_dateButton_5wdi7_53", V = "_drawerContent_5wdi7_69", W = "_closeButton_5wdi7_78", X = "_pickerContainer_5wdi7_97", Z = "_topFade_5wdi7_133", ee = "_bottomFade_5wdi7_149", te = "_pickerColumn_5wdi7_164", oe = "_pickerItem_5wdi7_198", ne = "_selected_5wdi7_225", re = "_labelContainer_5wdi7_289", t = {
|
|
7
|
+
overlay: z,
|
|
8
|
+
closing: G,
|
|
9
|
+
bottomDrawer: K,
|
|
10
|
+
drawerHeader: L,
|
|
11
|
+
drawerIndicator: Q,
|
|
12
|
+
dateButton: U,
|
|
13
|
+
drawerContent: V,
|
|
14
|
+
closeButton: W,
|
|
15
|
+
pickerContainer: X,
|
|
16
|
+
topFade: Z,
|
|
17
|
+
bottomFade: ee,
|
|
18
|
+
pickerColumn: te,
|
|
19
|
+
pickerItem: oe,
|
|
20
|
+
selected: ne,
|
|
21
|
+
labelContainer: re
|
|
22
|
+
}, ae = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
|
|
23
|
+
function me({ title: $, buttonText: M, selected: r, setSelected: Y, label: b }) {
|
|
24
|
+
const [u, N] = c(!1), [y, I] = c(!1), [a, F] = c(r.getMonth()), [s, B] = c(r.getFullYear()), [i, w] = c(r.getDate()), [f, x] = c([]), [h, A] = c([]), C = k(null), D = k(null), g = k(null), d = () => {
|
|
25
25
|
requestAnimationFrame(() => {
|
|
26
|
-
if (
|
|
27
|
-
const e =
|
|
26
|
+
if (C.current) {
|
|
27
|
+
const e = f.findIndex((n) => n.getDate() === i);
|
|
28
28
|
if (e !== -1) {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
top:
|
|
29
|
+
const n = e * 44;
|
|
30
|
+
C.current.scrollTo({
|
|
31
|
+
top: n,
|
|
32
32
|
behavior: "smooth"
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
if (
|
|
36
|
+
if (D.current) {
|
|
37
37
|
const e = a * 44;
|
|
38
|
-
|
|
38
|
+
D.current.scrollTo({
|
|
39
39
|
top: e,
|
|
40
40
|
behavior: "smooth"
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
if (g.current) {
|
|
44
|
-
const e =
|
|
44
|
+
const e = h.indexOf(s);
|
|
45
45
|
if (e !== -1) {
|
|
46
|
-
const
|
|
46
|
+
const n = e * 44;
|
|
47
47
|
g.current.scrollTo({
|
|
48
|
-
top:
|
|
48
|
+
top: n,
|
|
49
49
|
behavior: "smooth"
|
|
50
50
|
});
|
|
51
51
|
}
|
|
@@ -53,102 +53,103 @@ function de({ title: S, buttonText: $, selected: r, setSelected: M }) {
|
|
|
53
53
|
});
|
|
54
54
|
};
|
|
55
55
|
m(() => {
|
|
56
|
-
|
|
57
|
-
}, [
|
|
58
|
-
const e = (/* @__PURE__ */ new Date()).getFullYear(),
|
|
59
|
-
|
|
56
|
+
u && (F(r.getMonth()), B(r.getFullYear()), w(r.getDate()), d());
|
|
57
|
+
}, [u, r]), m(() => {
|
|
58
|
+
const e = (/* @__PURE__ */ new Date()).getFullYear(), n = Array.from({ length: 100 }, (_, p) => e - 99 + p);
|
|
59
|
+
A(n);
|
|
60
60
|
}, []), m(() => {
|
|
61
|
-
const e = [],
|
|
62
|
-
for (let
|
|
63
|
-
e.push(new Date(
|
|
64
|
-
|
|
65
|
-
}, [a,
|
|
66
|
-
|
|
67
|
-
}, [i, a,
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
}, O = (e) => {
|
|
71
|
-
b(e), d();
|
|
61
|
+
const e = [], n = new Date(s, a, 1), _ = new Date(s, a + 1, 0).getDate();
|
|
62
|
+
for (let p = 1; p <= _; p++)
|
|
63
|
+
e.push(new Date(n)), n.setDate(n.getDate() + 1);
|
|
64
|
+
x(e), i > _ && w(_);
|
|
65
|
+
}, [a, s, i]), m(() => {
|
|
66
|
+
u && d();
|
|
67
|
+
}, [i, a, s, f, h]);
|
|
68
|
+
const O = (e) => {
|
|
69
|
+
w(e.getDate()), d();
|
|
72
70
|
}, T = (e) => {
|
|
71
|
+
F(e), d();
|
|
72
|
+
}, H = (e) => {
|
|
73
73
|
B(e), d();
|
|
74
74
|
}, v = () => {
|
|
75
75
|
I(!0), setTimeout(() => {
|
|
76
|
-
|
|
76
|
+
N(!1), I(!1);
|
|
77
77
|
}, 300);
|
|
78
|
-
},
|
|
79
|
-
const e = new Date(
|
|
80
|
-
|
|
81
|
-
},
|
|
78
|
+
}, P = () => {
|
|
79
|
+
const e = new Date(s, a, i);
|
|
80
|
+
Y(e), v();
|
|
81
|
+
}, R = (e) => `${e.getDate()}`, j = (e) => e.toISOString().split("T")[0];
|
|
82
82
|
return m(() => {
|
|
83
83
|
console.log(r);
|
|
84
|
-
}, [r]), /* @__PURE__ */ l(
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
|
|
84
|
+
}, [r]), /* @__PURE__ */ l(S, { children: [
|
|
85
|
+
/* @__PURE__ */ o("div", { className: t.labelContainer, children: b && /* @__PURE__ */ o("label", { children: b }) }),
|
|
86
|
+
/* @__PURE__ */ o(
|
|
87
|
+
q,
|
|
87
88
|
{
|
|
88
89
|
type: "date",
|
|
89
90
|
className: t.dateButton,
|
|
90
|
-
onClick: () =>
|
|
91
|
-
value:
|
|
91
|
+
onClick: () => N(!0),
|
|
92
|
+
value: j(r)
|
|
92
93
|
}
|
|
93
94
|
),
|
|
94
|
-
|
|
95
|
-
/* @__PURE__ */
|
|
95
|
+
u && /* @__PURE__ */ l(S, { children: [
|
|
96
|
+
/* @__PURE__ */ o("div", { className: `${t.overlay} ${y ? t.closing : ""}`, onClick: v }),
|
|
96
97
|
/* @__PURE__ */ l(
|
|
97
98
|
"div",
|
|
98
99
|
{
|
|
99
|
-
className: `${t.bottomDrawer} ${
|
|
100
|
+
className: `${t.bottomDrawer} ${y ? t.closing : ""}`,
|
|
100
101
|
children: [
|
|
101
102
|
/* @__PURE__ */ l("div", { className: t.drawerHeader, children: [
|
|
102
|
-
/* @__PURE__ */
|
|
103
|
-
/* @__PURE__ */
|
|
103
|
+
/* @__PURE__ */ o("div", { className: t.drawerIndicator }),
|
|
104
|
+
/* @__PURE__ */ o("div", { className: t.closeButton, onClick: v, children: /* @__PURE__ */ o(E, { name: "Close", fill: "#030c2466" }) })
|
|
104
105
|
] }),
|
|
105
106
|
/* @__PURE__ */ l("div", { className: t.drawerContent, children: [
|
|
106
|
-
/* @__PURE__ */
|
|
107
|
+
/* @__PURE__ */ o("p", { children: $ }),
|
|
107
108
|
/* @__PURE__ */ l("div", { className: t.pickerContainer, children: [
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
110
|
-
/* @__PURE__ */
|
|
109
|
+
/* @__PURE__ */ o("div", { className: t.topFade }),
|
|
110
|
+
/* @__PURE__ */ o("div", { className: t.bottomFade }),
|
|
111
|
+
/* @__PURE__ */ o(
|
|
111
112
|
"div",
|
|
112
113
|
{
|
|
113
|
-
ref:
|
|
114
|
+
ref: C,
|
|
114
115
|
className: t.pickerColumn,
|
|
115
|
-
children:
|
|
116
|
+
children: f.map((e, n) => /* @__PURE__ */ o(
|
|
116
117
|
"div",
|
|
117
118
|
{
|
|
118
119
|
className: `${t.pickerItem} ${e.getDate() === i ? t.selected : ""}`,
|
|
119
|
-
onClick: () =>
|
|
120
|
-
children:
|
|
120
|
+
onClick: () => O(e),
|
|
121
|
+
children: R(e)
|
|
121
122
|
},
|
|
122
|
-
|
|
123
|
+
n
|
|
123
124
|
))
|
|
124
125
|
}
|
|
125
126
|
),
|
|
126
|
-
/* @__PURE__ */
|
|
127
|
+
/* @__PURE__ */ o(
|
|
127
128
|
"div",
|
|
128
129
|
{
|
|
129
|
-
ref:
|
|
130
|
+
ref: D,
|
|
130
131
|
className: t.pickerColumn,
|
|
131
|
-
children:
|
|
132
|
+
children: ae.map((e, n) => /* @__PURE__ */ o(
|
|
132
133
|
"div",
|
|
133
134
|
{
|
|
134
|
-
className: `${t.pickerItem} ${
|
|
135
|
-
onClick: () =>
|
|
135
|
+
className: `${t.pickerItem} ${n === a ? t.selected : ""}`,
|
|
136
|
+
onClick: () => T(n),
|
|
136
137
|
children: e
|
|
137
138
|
},
|
|
138
139
|
e
|
|
139
140
|
))
|
|
140
141
|
}
|
|
141
142
|
),
|
|
142
|
-
/* @__PURE__ */
|
|
143
|
+
/* @__PURE__ */ o(
|
|
143
144
|
"div",
|
|
144
145
|
{
|
|
145
146
|
ref: g,
|
|
146
147
|
className: t.pickerColumn,
|
|
147
|
-
children:
|
|
148
|
+
children: h.map((e) => /* @__PURE__ */ o(
|
|
148
149
|
"div",
|
|
149
150
|
{
|
|
150
|
-
className: `${t.pickerItem} ${e ===
|
|
151
|
-
onClick: () =>
|
|
151
|
+
className: `${t.pickerItem} ${e === s ? t.selected : ""}`,
|
|
152
|
+
onClick: () => H(e),
|
|
152
153
|
children: e
|
|
153
154
|
},
|
|
154
155
|
e
|
|
@@ -156,7 +157,7 @@ function de({ title: S, buttonText: $, selected: r, setSelected: M }) {
|
|
|
156
157
|
}
|
|
157
158
|
)
|
|
158
159
|
] }),
|
|
159
|
-
/* @__PURE__ */
|
|
160
|
+
/* @__PURE__ */ o(J, { className: t.confirmButton, variant: "secondary", onClick: P, children: M })
|
|
160
161
|
] })
|
|
161
162
|
]
|
|
162
163
|
}
|
|
@@ -165,5 +166,5 @@ function de({ title: S, buttonText: $, selected: r, setSelected: M }) {
|
|
|
165
166
|
] });
|
|
166
167
|
}
|
|
167
168
|
export {
|
|
168
|
-
|
|
169
|
+
me as DatePicker
|
|
169
170
|
};
|
|
@@ -2,14 +2,14 @@ import { jsxs as o, jsx as n } from "react/jsx-runtime";
|
|
|
2
2
|
import "../../index-BTmWXehE.js";
|
|
3
3
|
import { Icon as i } from "../../icons/icons.js";
|
|
4
4
|
import "react";
|
|
5
|
-
import '../../assets/index4.css';const
|
|
6
|
-
containerNavbar:
|
|
5
|
+
import '../../assets/index4.css';const m = "_containerNavbar_1m98h_1", b = "_navbar_1m98h_12", v = "_backButton_1m98h_22", u = "_progressContainer_1m98h_30", t = {
|
|
6
|
+
containerNavbar: m,
|
|
7
7
|
navbar: b,
|
|
8
|
-
backButton:
|
|
9
|
-
progressContainer:
|
|
8
|
+
backButton: v,
|
|
9
|
+
progressContainer: u
|
|
10
10
|
}, N = ({
|
|
11
|
-
progress:
|
|
12
|
-
handleBack:
|
|
11
|
+
progress: r,
|
|
12
|
+
handleBack: a,
|
|
13
13
|
first: c,
|
|
14
14
|
title: e,
|
|
15
15
|
style: d,
|
|
@@ -17,9 +17,9 @@ import '../../assets/index4.css';const p = "_containerNavbar_1m98h_1", b = "_nav
|
|
|
17
17
|
logo: h = !0,
|
|
18
18
|
...l
|
|
19
19
|
}) => {
|
|
20
|
-
const
|
|
21
|
-
if (
|
|
22
|
-
|
|
20
|
+
const p = () => {
|
|
21
|
+
if (a) {
|
|
22
|
+
a();
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
25
|
};
|
|
@@ -31,21 +31,20 @@ import '../../assets/index4.css';const p = "_containerNavbar_1m98h_1", b = "_nav
|
|
|
31
31
|
...l,
|
|
32
32
|
children: [
|
|
33
33
|
/* @__PURE__ */ o("div", { className: t.navbar, children: [
|
|
34
|
-
c ? /* @__PURE__ */ n("span", { onClick:
|
|
34
|
+
c ? /* @__PURE__ */ n("span", { onClick: p, className: t.backButton, children: /* @__PURE__ */ n(i, { name: "Close", width: 33, height: 33 }) }) : /* @__PURE__ */ n("span", { onClick: a, className: t.backButton, children: /* @__PURE__ */ n(i, { name: "ArrowLeft", width: 27, height: 27 }) }),
|
|
35
35
|
/* @__PURE__ */ n("div", { children: e ? /* @__PURE__ */ n(
|
|
36
36
|
"p",
|
|
37
37
|
{
|
|
38
38
|
style: {
|
|
39
39
|
marginTop: "15px",
|
|
40
40
|
fontSize: "22px",
|
|
41
|
-
fontFamily: "Palanquin BMI Bold",
|
|
42
41
|
color: "#2054A5"
|
|
43
42
|
},
|
|
44
43
|
children: e
|
|
45
44
|
}
|
|
46
45
|
) : h && /* @__PURE__ */ n("div", { style: { marginTop: "15px" }, children: /* @__PURE__ */ n(i, { name: "LogoBMI+" }) }) })
|
|
47
46
|
] }),
|
|
48
|
-
|
|
47
|
+
r && /* @__PURE__ */ o(
|
|
49
48
|
"div",
|
|
50
49
|
{
|
|
51
50
|
className: t.progressContainer,
|
|
@@ -57,7 +56,7 @@ import '../../assets/index4.css';const p = "_containerNavbar_1m98h_1", b = "_nav
|
|
|
57
56
|
style: {
|
|
58
57
|
height: "5px",
|
|
59
58
|
backgroundColor: "#45c2d6",
|
|
60
|
-
width: `${
|
|
59
|
+
width: `${r}%`,
|
|
61
60
|
transition: "width 0.3s ease-in-out",
|
|
62
61
|
borderRadius: "9px 0 0 9px"
|
|
63
62
|
}
|
|
@@ -69,7 +68,7 @@ import '../../assets/index4.css';const p = "_containerNavbar_1m98h_1", b = "_nav
|
|
|
69
68
|
style: {
|
|
70
69
|
height: "5px",
|
|
71
70
|
backgroundColor: "#c9f3f7",
|
|
72
|
-
width: `${100 -
|
|
71
|
+
width: `${100 - r}%`,
|
|
73
72
|
transition: "width 0.3s ease-in-out",
|
|
74
73
|
borderRadius: "0 9px 9px 0"
|
|
75
74
|
}
|
|
@@ -35,6 +35,7 @@ export interface Option {
|
|
|
35
35
|
* @property {boolean} [countries] - Flag opcional para mostrar las opciones de países (ejemplo de uso específico).
|
|
36
36
|
* @property {Function} [onChange] - Función callback que se ejecuta cuando cambia la opción seleccionada.
|
|
37
37
|
* @property {number} [zIndex] - Valor opcional para establecer el `z-index` del cajón.
|
|
38
|
+
* @property {string} [label] - Título del select opcional para mostrar encima del cajón.
|
|
38
39
|
*/
|
|
39
40
|
export interface SelectProps {
|
|
40
41
|
/** La opción actualmente seleccionada */
|
|
@@ -50,6 +51,7 @@ export interface SelectProps {
|
|
|
50
51
|
countries?: boolean;
|
|
51
52
|
onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
52
53
|
zIndex?: number;
|
|
54
|
+
label?: string;
|
|
53
55
|
}
|
|
54
56
|
/**
|
|
55
57
|
* Componente Select que permite al usuario seleccionar una opción de un conjunto de opciones.
|
|
@@ -75,4 +77,4 @@ export interface SelectProps {
|
|
|
75
77
|
* @param {SelectProps} props - Props del componente Select
|
|
76
78
|
* @returns {JSX.Element} El componente Select.
|
|
77
79
|
*/
|
|
78
|
-
export declare function Select({ options, selected, setSelected, title, countries, onChange, zIndex, ...selectProps }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
80
|
+
export declare function Select({ options, selected, setSelected, title, countries, onChange, zIndex, label, ...selectProps }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,75 +1,80 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Icon as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { Image as
|
|
5
|
-
import { DrawerPortal as
|
|
6
|
-
import '../../assets/index2.css';const
|
|
7
|
-
selectDrawer:
|
|
8
|
-
|
|
1
|
+
import { jsxs as o, Fragment as N, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { Icon as O } from "../../icons/icons.js";
|
|
3
|
+
import { useState as c, useRef as y, useEffect as P } from "react";
|
|
4
|
+
import { Image as R } from "../images/index.js";
|
|
5
|
+
import { DrawerPortal as j } from "./DrawerPortal/index.js";
|
|
6
|
+
import '../../assets/index2.css';const k = "_selectDrawer_1o9yc_1", A = "_label_1o9yc_9", F = "_selected_1o9yc_16", i = {
|
|
7
|
+
selectDrawer: k,
|
|
8
|
+
label: A,
|
|
9
|
+
selected: F
|
|
9
10
|
};
|
|
10
|
-
function
|
|
11
|
-
options:
|
|
12
|
-
selected:
|
|
13
|
-
setSelected:
|
|
14
|
-
title:
|
|
15
|
-
countries:
|
|
16
|
-
onChange:
|
|
17
|
-
zIndex:
|
|
18
|
-
|
|
11
|
+
function B({
|
|
12
|
+
options: a,
|
|
13
|
+
selected: t,
|
|
14
|
+
setSelected: u,
|
|
15
|
+
title: b,
|
|
16
|
+
countries: g,
|
|
17
|
+
onChange: d,
|
|
18
|
+
zIndex: p,
|
|
19
|
+
label: f,
|
|
20
|
+
..._
|
|
19
21
|
}) {
|
|
20
|
-
const [
|
|
21
|
-
|
|
22
|
+
const [s, m] = c(!1), [D, v] = c(!1), C = y(null), [I, h] = c(0), r = y(null);
|
|
23
|
+
P(() => (s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
|
|
22
24
|
document.body.style.overflow = "";
|
|
23
|
-
}), [
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
}), [s]);
|
|
26
|
+
const w = () => {
|
|
27
|
+
v(!0), setTimeout(() => {
|
|
28
|
+
m(!1), v(!1), h(0);
|
|
27
29
|
}, 350);
|
|
28
|
-
},
|
|
29
|
-
if (
|
|
30
|
-
|
|
30
|
+
}, x = (e) => {
|
|
31
|
+
if (u(e), r.current) {
|
|
32
|
+
r.current.value = e.value;
|
|
31
33
|
const n = new Event("change", { bubbles: !0 });
|
|
32
|
-
|
|
34
|
+
r.current.dispatchEvent(n);
|
|
33
35
|
}
|
|
34
|
-
|
|
36
|
+
w();
|
|
35
37
|
};
|
|
36
|
-
return /* @__PURE__ */
|
|
37
|
-
/* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ o(N, { children: [
|
|
39
|
+
/* @__PURE__ */ l(
|
|
38
40
|
"select",
|
|
39
41
|
{
|
|
40
|
-
ref:
|
|
41
|
-
value:
|
|
42
|
+
ref: r,
|
|
43
|
+
value: t.value,
|
|
42
44
|
onChange: (e) => {
|
|
43
|
-
const n =
|
|
44
|
-
n &&
|
|
45
|
+
const n = a.find((E) => E.value === e.target.value);
|
|
46
|
+
n && u(n), d && d(e);
|
|
45
47
|
},
|
|
46
48
|
style: { display: "none" },
|
|
47
|
-
...
|
|
48
|
-
children:
|
|
49
|
+
..._,
|
|
50
|
+
children: a.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
|
|
49
51
|
}
|
|
50
52
|
),
|
|
51
|
-
/* @__PURE__ */
|
|
52
|
-
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
/* @__PURE__ */ o("div", { ref: C, className: i.selectDrawer, children: [
|
|
54
|
+
f && /* @__PURE__ */ l("label", { className: i.label, children: f }),
|
|
55
|
+
/* @__PURE__ */ o("div", { className: i.selected, onClick: () => m(!s), children: [
|
|
56
|
+
t.image && /* @__PURE__ */ l(R, { src: t.image.src, width: 30, height: 30 }),
|
|
57
|
+
/* @__PURE__ */ l("span", { children: t.label }),
|
|
58
|
+
/* @__PURE__ */ l("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ l(O, { name: "ArrowDown" }) })
|
|
59
|
+
] })
|
|
60
|
+
] }),
|
|
61
|
+
/* @__PURE__ */ l(
|
|
62
|
+
j,
|
|
58
63
|
{
|
|
59
|
-
isOpen:
|
|
60
|
-
handleClose:
|
|
61
|
-
dragPosition:
|
|
62
|
-
setDragPosition:
|
|
64
|
+
isOpen: s,
|
|
65
|
+
handleClose: w,
|
|
66
|
+
dragPosition: I,
|
|
67
|
+
setDragPosition: h,
|
|
63
68
|
isClosing: D,
|
|
64
|
-
title:
|
|
65
|
-
options:
|
|
66
|
-
handleOptionClick:
|
|
67
|
-
countries:
|
|
68
|
-
zIndex:
|
|
69
|
+
title: b,
|
|
70
|
+
options: a,
|
|
71
|
+
handleOptionClick: x,
|
|
72
|
+
countries: g,
|
|
73
|
+
zIndex: p
|
|
69
74
|
}
|
|
70
75
|
)
|
|
71
76
|
] });
|
|
72
77
|
}
|
|
73
78
|
export {
|
|
74
|
-
|
|
79
|
+
B as Select
|
|
75
80
|
};
|