@plainsheet/react 0.2.1 → 0.3.0
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/README.md +1 -1
- package/dist/BottomSheet.d.ts +19 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useBottomSheet.d.ts +22 -0
- package/dist/index.d.ts +2 -1
- package/dist/plainsheet-react.cjs.js +1 -0
- package/dist/{plainsheet-core.es.js → plainsheet-react.es.js} +505 -478
- package/dist/plainsheet-react.umd.js +1 -0
- package/package.json +7 -7
- package/dist/ReactPlainBottomSheet.d.ts +0 -19
- package/dist/plainsheet-core.cjs.js +0 -1
- package/dist/plainsheet-core.umd.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { forwardRef as
|
|
2
|
-
import { createPortal as
|
|
3
|
-
function
|
|
1
|
+
import { forwardRef as Ot, useRef as nt, useState as ot, useImperativeHandle as Dt, useCallback as Pt, useEffect as _, useMemo as Yt } from "react";
|
|
2
|
+
import { createPortal as Mt } from "react-dom";
|
|
3
|
+
function Bt(t) {
|
|
4
4
|
return t != null;
|
|
5
5
|
}
|
|
6
6
|
(function() {
|
|
@@ -13,58 +13,58 @@ function Pt(t) {
|
|
|
13
13
|
console.error("vite-plugin-css-injected-by-js", e);
|
|
14
14
|
}
|
|
15
15
|
})();
|
|
16
|
-
var
|
|
17
|
-
function
|
|
16
|
+
var It = Object.defineProperty, Nt = (t, e, n) => e in t ? It(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, $ = (t, e, n) => Nt(t, typeof e != "symbol" ? e + "" : e, n);
|
|
17
|
+
function T(t) {
|
|
18
18
|
return typeof t == "string";
|
|
19
19
|
}
|
|
20
|
-
function
|
|
21
|
-
return t.classList.contains(
|
|
20
|
+
function Rt(t, e) {
|
|
21
|
+
return t.classList.contains(Q(e));
|
|
22
22
|
}
|
|
23
|
-
function
|
|
24
|
-
t.classList.add(
|
|
23
|
+
function q(t, e) {
|
|
24
|
+
t.classList.add(Q(e));
|
|
25
25
|
}
|
|
26
|
-
function
|
|
27
|
-
t.classList.remove(
|
|
26
|
+
function rt(t, e) {
|
|
27
|
+
t.classList.remove(Q(e));
|
|
28
28
|
}
|
|
29
29
|
function U(t, e, n) {
|
|
30
|
-
|
|
30
|
+
T(n) && (T(e) && rt(t, e), q(t, n));
|
|
31
31
|
}
|
|
32
|
-
function
|
|
33
|
-
return
|
|
32
|
+
function Q(t) {
|
|
33
|
+
return T(t) ? t.trim().replace(/\./g, "") : "";
|
|
34
34
|
}
|
|
35
35
|
function I(t) {
|
|
36
|
-
return t.map((e) =>
|
|
36
|
+
return t.map((e) => Q(e)).filter(Boolean).join(" ");
|
|
37
37
|
}
|
|
38
|
-
function
|
|
38
|
+
function Ft(t) {
|
|
39
39
|
return t.map((e) => e == null ? void 0 : e.trim()).filter(Boolean).map((e) => `.${e}`).join(" ");
|
|
40
40
|
}
|
|
41
|
-
const
|
|
41
|
+
const dt = "open", pt = "hidden";
|
|
42
42
|
function et(t, e) {
|
|
43
43
|
const n = e;
|
|
44
44
|
if (Array.isArray(t)) {
|
|
45
45
|
t.forEach((o) => {
|
|
46
|
-
|
|
46
|
+
z(o, n), o.setAttribute("aria-modal", n ? "true" : "false");
|
|
47
47
|
});
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
z(t, n), t.setAttribute("aria-modal", n ? "true" : "false");
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
e ? (
|
|
52
|
+
function z(t, e) {
|
|
53
|
+
e ? (q(t, dt), rt(t, pt)) : (q(t, pt), rt(t, dt));
|
|
54
54
|
}
|
|
55
|
-
function
|
|
55
|
+
function Ct(t) {
|
|
56
56
|
return t instanceof HTMLElement;
|
|
57
57
|
}
|
|
58
|
-
function
|
|
58
|
+
function x(t) {
|
|
59
59
|
return typeof t == "number" && !Number.isNaN(t);
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
|
|
61
|
+
function Wt(t) {
|
|
62
|
+
Ct(t) && t.focus();
|
|
63
63
|
}
|
|
64
|
-
function
|
|
65
|
-
if (!
|
|
64
|
+
function Ut(t) {
|
|
65
|
+
if (!Ct(t) || t.offsetParent === null || "disabled" in t && t.disabled)
|
|
66
66
|
return !1;
|
|
67
|
-
const e = t.getAttribute("tabindex"), n =
|
|
67
|
+
const e = t.getAttribute("tabindex"), n = x(e) ? parseInt(e, 10) : -1, o = [
|
|
68
68
|
"INPUT",
|
|
69
69
|
"BUTTON",
|
|
70
70
|
"SELECT",
|
|
@@ -75,21 +75,21 @@ function Nt(t) {
|
|
|
75
75
|
].includes(t.tagName), i = t instanceof HTMLAnchorElement && t.href !== "" || t instanceof HTMLAreaElement && t.href !== "";
|
|
76
76
|
return o || i || n > -1;
|
|
77
77
|
}
|
|
78
|
-
var
|
|
79
|
-
function
|
|
78
|
+
var w = /* @__PURE__ */ ((t) => (t.Backdrop = "pbs-backdrop", t.Root = "pbs-root", t.Container = "pbs-container", t.GapFiller = "pbs-gap-filler", t.Handle = "pbs-handle", t.HandleBar = "pbs-handle-bar", t.ContentWrapper = "pbs-content-wrapper", t))(w || {}), it = /* @__PURE__ */ ((t) => (t.Button = "pbs-button-reset", t.Dialog = "pbs-dialog-reset", t))(it || {}), X = /* @__PURE__ */ ((t) => (t.Hidden = "hidden", t))(X || {});
|
|
79
|
+
function Y(t, e, n) {
|
|
80
80
|
const o = document.createElement(t);
|
|
81
81
|
return e.split(" ").forEach((i) => {
|
|
82
|
-
|
|
83
|
-
}),
|
|
82
|
+
q(o, i);
|
|
83
|
+
}), T(n) && o.setAttribute("data-testid", n), o;
|
|
84
84
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
Ft([
|
|
86
|
+
w.Root,
|
|
87
|
+
w.ContentWrapper
|
|
88
88
|
]);
|
|
89
|
-
function
|
|
89
|
+
function ht(t, e, n, o) {
|
|
90
90
|
switch (o) {
|
|
91
91
|
case "content-height":
|
|
92
|
-
return e >= t ?
|
|
92
|
+
return e >= t ? Et(t, e, n) : 0;
|
|
93
93
|
case "middle":
|
|
94
94
|
return -(t / 2 - e);
|
|
95
95
|
case "top":
|
|
@@ -98,7 +98,7 @@ function dt(t, e, n, o) {
|
|
|
98
98
|
return 0;
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
function
|
|
101
|
+
function wt(t, e) {
|
|
102
102
|
const n = e < t, o = e > t;
|
|
103
103
|
return {
|
|
104
104
|
isUp: n,
|
|
@@ -106,13 +106,13 @@ function St(t, e) {
|
|
|
106
106
|
stayedSame: e === t
|
|
107
107
|
};
|
|
108
108
|
}
|
|
109
|
-
function
|
|
109
|
+
function yt(t, e) {
|
|
110
110
|
return e < t ? -(t - e) : e - t;
|
|
111
111
|
}
|
|
112
|
-
function
|
|
112
|
+
function V(t, e) {
|
|
113
113
|
return t > e ? t - e : e - t;
|
|
114
114
|
}
|
|
115
|
-
function
|
|
115
|
+
function jt(t, e) {
|
|
116
116
|
const n = t < e, o = t > e;
|
|
117
117
|
return {
|
|
118
118
|
isUp: n,
|
|
@@ -120,23 +120,23 @@ function Ft(t, e) {
|
|
|
120
120
|
stayedSame: t === e
|
|
121
121
|
};
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function mt(t, e, n) {
|
|
124
124
|
const o = t === "above";
|
|
125
125
|
return n.filter((i) => {
|
|
126
126
|
const r = i * e.viewportHeight;
|
|
127
127
|
return o ? e.visibleHeight < r : e.visibleHeight > r;
|
|
128
128
|
});
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function Et(t, e, n) {
|
|
131
131
|
return -(t - e) + n;
|
|
132
132
|
}
|
|
133
|
-
function
|
|
133
|
+
function ft(t) {
|
|
134
134
|
return Number(t.replace("px", ""));
|
|
135
135
|
}
|
|
136
|
-
function
|
|
136
|
+
function K(t, ...e) {
|
|
137
137
|
return Number(t.toFixed(...e));
|
|
138
138
|
}
|
|
139
|
-
function
|
|
139
|
+
function Ht(t) {
|
|
140
140
|
const e = /(?<type>\w+)\((?<values>[^)]+)\)/g, n = [];
|
|
141
141
|
let o;
|
|
142
142
|
for (; (o = e.exec(t)) !== null; ) {
|
|
@@ -145,36 +145,36 @@ function yt(t) {
|
|
|
145
145
|
}
|
|
146
146
|
return n;
|
|
147
147
|
}
|
|
148
|
-
function
|
|
149
|
-
const e = t.style.transform, n =
|
|
148
|
+
function Gt(t) {
|
|
149
|
+
const e = t.style.transform, n = Ht(e);
|
|
150
150
|
return { transform: e, transformValues: n };
|
|
151
151
|
}
|
|
152
|
-
function
|
|
152
|
+
function Tt(t, e) {
|
|
153
153
|
return t.find(
|
|
154
154
|
(o) => o.type.startsWith(e)
|
|
155
155
|
) || null;
|
|
156
156
|
}
|
|
157
|
-
const
|
|
157
|
+
const at = "translate";
|
|
158
158
|
function D(t) {
|
|
159
|
-
const e = t.style.transform, n =
|
|
159
|
+
const e = t.style.transform, n = Ht(e), o = Tt(
|
|
160
160
|
n,
|
|
161
|
-
|
|
161
|
+
at
|
|
162
162
|
);
|
|
163
|
-
return
|
|
164
|
-
type:
|
|
163
|
+
return kt(o ?? {
|
|
164
|
+
type: at,
|
|
165
165
|
values: []
|
|
166
166
|
});
|
|
167
167
|
}
|
|
168
|
-
function
|
|
168
|
+
function J(t, { x: e, y: n }) {
|
|
169
169
|
const {
|
|
170
170
|
transform: o,
|
|
171
171
|
transformValues: i
|
|
172
|
-
} =
|
|
172
|
+
} = Gt(t), r = Tt(
|
|
173
173
|
i,
|
|
174
|
-
|
|
174
|
+
at
|
|
175
175
|
);
|
|
176
176
|
if (r) {
|
|
177
|
-
const c =
|
|
177
|
+
const c = kt(r);
|
|
178
178
|
t.style.transform = `translate(${e ?? c.x ?? 0}px,${n ?? c.y ?? 0}px)`;
|
|
179
179
|
return;
|
|
180
180
|
}
|
|
@@ -184,32 +184,32 @@ function V(t, { x: e, y: n }) {
|
|
|
184
184
|
}
|
|
185
185
|
t.style.transform = `translate(${e ?? 0}px,${n ?? 0}px)`;
|
|
186
186
|
}
|
|
187
|
-
function
|
|
187
|
+
function kt(t) {
|
|
188
188
|
if (t.type !== "translate")
|
|
189
189
|
throw new Error(
|
|
190
190
|
`Could not get coordinates from ${t.type}, since is not translate.`
|
|
191
191
|
);
|
|
192
192
|
const e = t.values[0], n = t.values[1];
|
|
193
193
|
return {
|
|
194
|
-
x:
|
|
195
|
-
y:
|
|
194
|
+
x: ft(e) ?? 0,
|
|
195
|
+
y: ft(n) ?? 0
|
|
196
196
|
};
|
|
197
197
|
}
|
|
198
|
-
function
|
|
198
|
+
function st(t) {
|
|
199
199
|
return t != null;
|
|
200
200
|
}
|
|
201
|
-
function
|
|
201
|
+
function gt(t, {
|
|
202
202
|
min: e,
|
|
203
203
|
max: n
|
|
204
204
|
}) {
|
|
205
|
-
return
|
|
205
|
+
return st(n) && t >= n ? n : st(e) && t <= e ? e : t;
|
|
206
206
|
}
|
|
207
|
-
const
|
|
208
|
-
e instanceof HTMLElement && !
|
|
209
|
-
},
|
|
210
|
-
o.startY = t.getCoordinates(i).y, o.containerStartTranslate = D(e),
|
|
211
|
-
},
|
|
212
|
-
|
|
207
|
+
const _t = (t, e, n) => {
|
|
208
|
+
e instanceof HTMLElement && !Rt(e, w.Handle) && n.scrollTop >= 1 || (t.isDragging = !0);
|
|
209
|
+
}, $t = (t, e, n, o) => (i) => {
|
|
210
|
+
o.startY = t.getCoordinates(i).y, o.containerStartTranslate = D(e), n.onDragStart();
|
|
211
|
+
}, Xt = (t, e, n, o, i) => (r) => {
|
|
212
|
+
qt(
|
|
213
213
|
r,
|
|
214
214
|
t,
|
|
215
215
|
n,
|
|
@@ -219,33 +219,33 @@ const Ut = (t, e, n) => {
|
|
|
219
219
|
n.marginTop
|
|
220
220
|
);
|
|
221
221
|
};
|
|
222
|
-
function
|
|
223
|
-
if (!o.isDragging || !
|
|
222
|
+
function qt(t, e, n, o, i, r, c) {
|
|
223
|
+
if (!o.isDragging || !x(o.startY))
|
|
224
224
|
return;
|
|
225
|
-
const
|
|
226
|
-
if (b >=
|
|
225
|
+
const s = e.getCoordinates(t).y, p = yt(o.startY, s), f = window.innerHeight, l = r.clientHeight, b = l - (o.containerStartTranslate.y + p);
|
|
226
|
+
if (b >= f)
|
|
227
227
|
return;
|
|
228
|
-
const
|
|
229
|
-
if (
|
|
228
|
+
const E = wt(o.startY, s);
|
|
229
|
+
if (E.isUp && !n.expandable && b >= l)
|
|
230
230
|
return;
|
|
231
231
|
i.start(() => {
|
|
232
|
-
|
|
233
|
-
y: o.containerStartTranslate.y +
|
|
232
|
+
J(r, {
|
|
233
|
+
y: o.containerStartTranslate.y + p
|
|
234
234
|
});
|
|
235
235
|
}, 0);
|
|
236
|
-
const
|
|
237
|
-
if (
|
|
238
|
-
const
|
|
239
|
-
1 -
|
|
236
|
+
const a = f - c, k = l - o.containerStartTranslate.y;
|
|
237
|
+
if (E.isUp) {
|
|
238
|
+
const v = a - k, S = a - b, H = gt(
|
|
239
|
+
1 - K(S / v, 2),
|
|
240
240
|
{
|
|
241
241
|
min: 0,
|
|
242
242
|
max: 1
|
|
243
243
|
}
|
|
244
244
|
);
|
|
245
|
-
n.onDragMove(
|
|
246
|
-
} else if (
|
|
247
|
-
const
|
|
248
|
-
|
|
245
|
+
n.onDragMove(E, H);
|
|
246
|
+
} else if (E.isDown) {
|
|
247
|
+
const v = gt(
|
|
248
|
+
K(
|
|
249
249
|
1 - b / k,
|
|
250
250
|
2
|
|
251
251
|
),
|
|
@@ -254,61 +254,61 @@ function _t(t, e, n, o, i, r, c) {
|
|
|
254
254
|
max: 1
|
|
255
255
|
}
|
|
256
256
|
);
|
|
257
|
-
n.onDragMove(
|
|
257
|
+
n.onDragMove(E, v);
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
|
-
const
|
|
261
|
-
if (!o.isDragging || (o.isDragging = !1,
|
|
260
|
+
const zt = (t, e, n, o, i, r, c) => (s) => {
|
|
261
|
+
if (!o.isDragging || (o.isDragging = !1, !x(o.startY)))
|
|
262
262
|
return;
|
|
263
263
|
n.onDragEnd();
|
|
264
|
-
const
|
|
264
|
+
const p = o.startY, f = t.getCoordinates(s).y, l = D(e).y, b = wt(p, f), E = window.innerHeight, a = e.clientHeight;
|
|
265
265
|
if (b.isUp) {
|
|
266
266
|
const k = [...n.snapPoints].sort(
|
|
267
|
-
(
|
|
268
|
-
),
|
|
269
|
-
if (!n.expandable &&
|
|
267
|
+
(H, C) => H - C
|
|
268
|
+
), v = a + -l;
|
|
269
|
+
if (!n.expandable && v >= a)
|
|
270
270
|
return;
|
|
271
|
-
for (const
|
|
272
|
-
const
|
|
273
|
-
if (
|
|
274
|
-
const
|
|
275
|
-
|
|
276
|
-
|
|
271
|
+
for (const H of k) {
|
|
272
|
+
const C = H * window.innerHeight;
|
|
273
|
+
if (v <= C) {
|
|
274
|
+
const P = V(
|
|
275
|
+
v,
|
|
276
|
+
C
|
|
277
277
|
);
|
|
278
278
|
c.translateContainer({
|
|
279
279
|
startY: l,
|
|
280
|
-
endY: l -
|
|
280
|
+
endY: l - P,
|
|
281
281
|
animationFrame: i,
|
|
282
282
|
bottomSheetContainer: e
|
|
283
283
|
});
|
|
284
284
|
return;
|
|
285
285
|
}
|
|
286
286
|
}
|
|
287
|
-
const
|
|
288
|
-
|
|
289
|
-
|
|
287
|
+
const S = Et(
|
|
288
|
+
E,
|
|
289
|
+
a,
|
|
290
290
|
n.marginTop
|
|
291
291
|
);
|
|
292
292
|
c.translateContainer({
|
|
293
293
|
startY: l,
|
|
294
|
-
endY:
|
|
294
|
+
endY: S,
|
|
295
295
|
animationFrame: i,
|
|
296
296
|
bottomSheetContainer: e
|
|
297
297
|
});
|
|
298
298
|
} else if (b.isDown) {
|
|
299
299
|
const k = [...n.snapPoints].sort(
|
|
300
|
-
(
|
|
300
|
+
(v, S) => S - v
|
|
301
301
|
);
|
|
302
|
-
for (const
|
|
303
|
-
const
|
|
304
|
-
if (
|
|
305
|
-
const
|
|
306
|
-
|
|
307
|
-
|
|
302
|
+
for (const v of k) {
|
|
303
|
+
const S = v * window.innerHeight, H = a + -l;
|
|
304
|
+
if (H >= S) {
|
|
305
|
+
const C = V(
|
|
306
|
+
H,
|
|
307
|
+
S
|
|
308
308
|
);
|
|
309
309
|
c.translateContainer({
|
|
310
310
|
startY: l,
|
|
311
|
-
endY: l +
|
|
311
|
+
endY: l + C,
|
|
312
312
|
animationFrame: i,
|
|
313
313
|
bottomSheetContainer: e
|
|
314
314
|
});
|
|
@@ -319,7 +319,7 @@ const $t = (t, e, n, o, i, r, c) => (a) => {
|
|
|
319
319
|
}
|
|
320
320
|
};
|
|
321
321
|
var F = /* @__PURE__ */ ((t) => (t[t.All = -1] = "All", t[t.None = 0] = "None", t[t.Capture = 1] = "Capture", t[t.Target = 2] = "Target", t[t.Bubble = 3] = "Bubble", t))(F || {});
|
|
322
|
-
function
|
|
322
|
+
function bt(t) {
|
|
323
323
|
switch (t) {
|
|
324
324
|
case 0:
|
|
325
325
|
return 0;
|
|
@@ -333,16 +333,16 @@ function ft(t) {
|
|
|
333
333
|
return -1;
|
|
334
334
|
}
|
|
335
335
|
}
|
|
336
|
-
const
|
|
336
|
+
const Vt = {
|
|
337
337
|
eventPhase: F.All
|
|
338
338
|
};
|
|
339
339
|
class j {
|
|
340
340
|
constructor(e) {
|
|
341
|
-
|
|
341
|
+
$(this, "currentTarget"), this.currentTarget = e;
|
|
342
342
|
}
|
|
343
343
|
addEventListeners({
|
|
344
344
|
onStart: e,
|
|
345
|
-
onStartOptions: n =
|
|
345
|
+
onStartOptions: n = Vt,
|
|
346
346
|
onMove: o,
|
|
347
347
|
onEnd: i
|
|
348
348
|
}) {
|
|
@@ -361,7 +361,7 @@ class j {
|
|
|
361
361
|
e(r);
|
|
362
362
|
return;
|
|
363
363
|
}
|
|
364
|
-
|
|
364
|
+
bt(r.eventPhase) === n.eventPhase && e(r);
|
|
365
365
|
},
|
|
366
366
|
{
|
|
367
367
|
passive: !0
|
|
@@ -381,7 +381,7 @@ class j {
|
|
|
381
381
|
e(r);
|
|
382
382
|
return;
|
|
383
383
|
}
|
|
384
|
-
|
|
384
|
+
bt(r.eventPhase) === n.eventPhase && e(r);
|
|
385
385
|
},
|
|
386
386
|
{
|
|
387
387
|
passive: !0
|
|
@@ -428,78 +428,78 @@ class j {
|
|
|
428
428
|
};
|
|
429
429
|
}
|
|
430
430
|
}
|
|
431
|
-
function
|
|
432
|
-
const n =
|
|
433
|
-
|
|
431
|
+
function Kt(t, e) {
|
|
432
|
+
const n = Jt(t);
|
|
433
|
+
Qt(n), n.bottomSheetContainer.style.width = t.width;
|
|
434
434
|
const o = document.createElement("div");
|
|
435
435
|
o.innerHTML = t.content ?? "";
|
|
436
436
|
const i = window.innerHeight;
|
|
437
437
|
n.bottomSheetContainer.style.maxHeight = `${i}px`, n.bottomSheetContentWrapper.appendChild(o);
|
|
438
|
-
const r =
|
|
438
|
+
const r = Zt({
|
|
439
439
|
bottomSheetElements: n,
|
|
440
440
|
bottomSheetProps: t,
|
|
441
441
|
options: e
|
|
442
442
|
});
|
|
443
443
|
return { elements: n, eventHandlers: r };
|
|
444
444
|
}
|
|
445
|
-
function
|
|
446
|
-
const e =
|
|
445
|
+
function Jt(t) {
|
|
446
|
+
const e = Y(
|
|
447
447
|
"dialog",
|
|
448
448
|
I([
|
|
449
|
-
|
|
450
|
-
|
|
449
|
+
w.Root,
|
|
450
|
+
it.Dialog,
|
|
451
451
|
t.rootClass
|
|
452
452
|
]),
|
|
453
|
-
|
|
453
|
+
w.Root
|
|
454
454
|
);
|
|
455
455
|
e.ariaLabel = t.ariaLabel;
|
|
456
|
-
const n =
|
|
456
|
+
const n = Y(
|
|
457
457
|
"section",
|
|
458
|
-
I([
|
|
459
|
-
|
|
458
|
+
I([w.Container, t.containerClass]),
|
|
459
|
+
w.Container
|
|
460
460
|
);
|
|
461
461
|
t.containerBorderRadius && (n.style.borderRadius = t.containerBorderRadius);
|
|
462
|
-
const o =
|
|
462
|
+
const o = Y(
|
|
463
463
|
"div",
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
), i =
|
|
464
|
+
w.GapFiller,
|
|
465
|
+
w.GapFiller
|
|
466
|
+
), i = Y(
|
|
467
467
|
"button",
|
|
468
468
|
I([
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
t.shouldShowHandle ? null :
|
|
469
|
+
w.Handle,
|
|
470
|
+
it.Button,
|
|
471
|
+
t.shouldShowHandle ? null : X.Hidden,
|
|
472
472
|
t.handleClass
|
|
473
473
|
]),
|
|
474
|
-
|
|
474
|
+
w.Handle
|
|
475
475
|
);
|
|
476
476
|
i.setAttribute("type", "button"), i.ariaLabel = "bottom sheet close button";
|
|
477
|
-
const r =
|
|
477
|
+
const r = Y(
|
|
478
478
|
"span",
|
|
479
479
|
I([
|
|
480
|
-
|
|
481
|
-
t.shouldShowHandle ? null :
|
|
480
|
+
w.HandleBar,
|
|
481
|
+
t.shouldShowHandle ? null : X.Hidden
|
|
482
482
|
]),
|
|
483
|
-
|
|
484
|
-
), c =
|
|
483
|
+
w.HandleBar
|
|
484
|
+
), c = Y(
|
|
485
485
|
"article",
|
|
486
486
|
I([
|
|
487
|
-
|
|
487
|
+
w.ContentWrapper,
|
|
488
488
|
t.contentWrapperClass
|
|
489
489
|
]),
|
|
490
|
-
|
|
491
|
-
),
|
|
490
|
+
w.ContentWrapper
|
|
491
|
+
), s = Y(
|
|
492
492
|
"div",
|
|
493
493
|
I([
|
|
494
|
-
|
|
494
|
+
w.Backdrop,
|
|
495
495
|
t.backdropClass,
|
|
496
|
-
|
|
496
|
+
X.Hidden
|
|
497
497
|
]),
|
|
498
|
-
|
|
498
|
+
w.Backdrop
|
|
499
499
|
);
|
|
500
|
-
return t.backdropColor && (
|
|
500
|
+
return t.backdropColor && (s.style.backgroundColor = t.backdropColor), t.backDropTransition && (s.style.transition = t.backDropTransition), {
|
|
501
501
|
bottomSheetRoot: e,
|
|
502
|
-
bottomSheetBackdrop:
|
|
502
|
+
bottomSheetBackdrop: s,
|
|
503
503
|
bottomSheetContainer: n,
|
|
504
504
|
bottomSheetHandle: i,
|
|
505
505
|
bottomSheetHandleBar: r,
|
|
@@ -507,7 +507,7 @@ function zt(t) {
|
|
|
507
507
|
bottomSheetContainerGapFiller: o
|
|
508
508
|
};
|
|
509
509
|
}
|
|
510
|
-
function
|
|
510
|
+
function Qt({
|
|
511
511
|
bottomSheetRoot: t,
|
|
512
512
|
bottomSheetContainer: e,
|
|
513
513
|
bottomSheetHandle: n,
|
|
@@ -517,7 +517,7 @@ function Vt({
|
|
|
517
517
|
}) {
|
|
518
518
|
t.appendChild(e), n.appendChild(o), e.appendChild(n), e.appendChild(i), e.appendChild(r);
|
|
519
519
|
}
|
|
520
|
-
function
|
|
520
|
+
function Zt({
|
|
521
521
|
bottomSheetElements: t,
|
|
522
522
|
bottomSheetProps: e,
|
|
523
523
|
options: n
|
|
@@ -527,130 +527,130 @@ function Kt({
|
|
|
527
527
|
bottomSheetContainer: i,
|
|
528
528
|
bottomSheetHandle: r,
|
|
529
529
|
bottomSheetContainerGapFiller: c,
|
|
530
|
-
bottomSheetContentWrapper:
|
|
531
|
-
} = t, { animationFrame:
|
|
532
|
-
|
|
530
|
+
bottomSheetContentWrapper: s
|
|
531
|
+
} = t, { animationFrame: p } = n, f = new j(r), l = new j(
|
|
532
|
+
s
|
|
533
533
|
), b = new j(
|
|
534
534
|
c
|
|
535
|
-
),
|
|
536
|
-
(
|
|
537
|
-
const
|
|
538
|
-
if (!
|
|
539
|
-
return
|
|
540
|
-
const
|
|
541
|
-
return [...
|
|
535
|
+
), E = e.dragTriggers.reduce(
|
|
536
|
+
(g, A) => {
|
|
537
|
+
const L = o.querySelectorAll(A);
|
|
538
|
+
if (!L.length)
|
|
539
|
+
return g;
|
|
540
|
+
const tt = Array.from(L).map((M) => M instanceof HTMLElement ? new j(M) : null).filter((M) => !!M);
|
|
541
|
+
return [...g, ...tt];
|
|
542
542
|
},
|
|
543
543
|
[]
|
|
544
|
-
),
|
|
544
|
+
), a = new j(
|
|
545
545
|
window
|
|
546
|
-
), k =
|
|
547
|
-
|
|
546
|
+
), k = $t(
|
|
547
|
+
a,
|
|
548
548
|
i,
|
|
549
549
|
e,
|
|
550
550
|
n.draggingState
|
|
551
|
-
),
|
|
552
|
-
|
|
551
|
+
), v = Xt(
|
|
552
|
+
a,
|
|
553
553
|
i,
|
|
554
554
|
e,
|
|
555
555
|
n.draggingState,
|
|
556
|
-
|
|
557
|
-
),
|
|
558
|
-
|
|
556
|
+
p
|
|
557
|
+
), S = zt(
|
|
558
|
+
a,
|
|
559
559
|
i,
|
|
560
560
|
e,
|
|
561
561
|
n.draggingState,
|
|
562
|
-
|
|
562
|
+
p,
|
|
563
563
|
n.onClose,
|
|
564
564
|
n.bottomSheetState
|
|
565
565
|
);
|
|
566
|
-
function
|
|
567
|
-
|
|
566
|
+
function H(g) {
|
|
567
|
+
g.target instanceof Element && !o.contains(g.target) && n.onClose();
|
|
568
568
|
}
|
|
569
|
-
function
|
|
570
|
-
|
|
569
|
+
function C(g) {
|
|
570
|
+
_t(
|
|
571
571
|
n.draggingState,
|
|
572
|
-
|
|
572
|
+
g.target,
|
|
573
573
|
t.bottomSheetContentWrapper
|
|
574
574
|
);
|
|
575
575
|
}
|
|
576
|
-
function
|
|
577
|
-
e.draggable && (
|
|
578
|
-
onStart:
|
|
579
|
-
}),
|
|
580
|
-
|
|
581
|
-
onStart:
|
|
576
|
+
function P() {
|
|
577
|
+
e.draggable && (f.addEventListeners({
|
|
578
|
+
onStart: C
|
|
579
|
+
}), E.forEach((g) => {
|
|
580
|
+
g.addEventListeners({
|
|
581
|
+
onStart: C,
|
|
582
582
|
onStartOptions: {
|
|
583
583
|
eventPhase: F.Target
|
|
584
584
|
}
|
|
585
585
|
});
|
|
586
586
|
})), e.draggable && e.backgroundDraggable && (l.addEventListeners({
|
|
587
|
-
onStart:
|
|
587
|
+
onStart: C,
|
|
588
588
|
onStartOptions: {
|
|
589
589
|
eventPhase: F.Target
|
|
590
590
|
}
|
|
591
591
|
}), b.addEventListeners({
|
|
592
|
-
onStart:
|
|
593
|
-
})), e.draggable &&
|
|
592
|
+
onStart: C
|
|
593
|
+
})), e.draggable && a.addEventListeners({
|
|
594
594
|
onStart: k,
|
|
595
|
-
onMove:
|
|
596
|
-
onEnd:
|
|
597
|
-
}), e.draggable && window.document.addEventListener("keyup", (
|
|
598
|
-
|
|
599
|
-
}), e.shouldCloseOnOutsideClick && window.document.addEventListener("click",
|
|
600
|
-
if (
|
|
595
|
+
onMove: v,
|
|
596
|
+
onEnd: S
|
|
597
|
+
}), e.draggable && window.document.addEventListener("keyup", (g) => {
|
|
598
|
+
g.key === "Escape" && n.onClose();
|
|
599
|
+
}), e.shouldCloseOnOutsideClick && window.document.addEventListener("click", H), r.addEventListener("keyup", (g) => {
|
|
600
|
+
if (g.key === "ArrowUp") {
|
|
601
601
|
n.moveUp();
|
|
602
602
|
return;
|
|
603
603
|
}
|
|
604
|
-
if (
|
|
604
|
+
if (g.key === "ArrowDown") {
|
|
605
605
|
n.moveDown();
|
|
606
606
|
return;
|
|
607
607
|
}
|
|
608
|
-
if (
|
|
609
|
-
const
|
|
608
|
+
if (g.shiftKey && g.key === "Tab") {
|
|
609
|
+
const A = G(
|
|
610
610
|
t.bottomSheetContentWrapper
|
|
611
611
|
);
|
|
612
|
-
|
|
612
|
+
Wt(A);
|
|
613
613
|
}
|
|
614
614
|
});
|
|
615
615
|
}
|
|
616
|
-
function
|
|
617
|
-
let
|
|
618
|
-
for (;
|
|
619
|
-
const
|
|
620
|
-
if (
|
|
621
|
-
return
|
|
622
|
-
|
|
623
|
-
...
|
|
624
|
-
...Array.from(
|
|
616
|
+
function G(g) {
|
|
617
|
+
let A = [...Array.from(g.childNodes).reverse()];
|
|
618
|
+
for (; A.length; ) {
|
|
619
|
+
const L = A.shift();
|
|
620
|
+
if (Ut(L))
|
|
621
|
+
return L;
|
|
622
|
+
L && (A = [
|
|
623
|
+
...A,
|
|
624
|
+
...Array.from(L.childNodes).reverse()
|
|
625
625
|
]);
|
|
626
626
|
}
|
|
627
627
|
return null;
|
|
628
628
|
}
|
|
629
629
|
function Z() {
|
|
630
|
-
|
|
631
|
-
onStart:
|
|
630
|
+
f.removeEventListeners({
|
|
631
|
+
onStart: C
|
|
632
632
|
}), l.removeEventListeners({
|
|
633
|
-
onStart:
|
|
633
|
+
onStart: C
|
|
634
634
|
}), b.removeEventListeners({
|
|
635
|
-
onStart:
|
|
636
|
-
}),
|
|
637
|
-
|
|
638
|
-
onStart:
|
|
635
|
+
onStart: C
|
|
636
|
+
}), E.forEach((g) => {
|
|
637
|
+
g.removeEventListeners({
|
|
638
|
+
onStart: C
|
|
639
639
|
});
|
|
640
|
-
}),
|
|
640
|
+
}), a.removeEventListeners({
|
|
641
641
|
onStart: k,
|
|
642
|
-
onMove:
|
|
643
|
-
onEnd:
|
|
644
|
-
}), window.removeEventListener("click",
|
|
642
|
+
onMove: v,
|
|
643
|
+
onEnd: S
|
|
644
|
+
}), window.removeEventListener("click", H);
|
|
645
645
|
}
|
|
646
646
|
return {
|
|
647
|
-
attachEventListeners:
|
|
647
|
+
attachEventListeners: P,
|
|
648
648
|
clearEventListeners: Z
|
|
649
649
|
};
|
|
650
650
|
}
|
|
651
|
-
class
|
|
651
|
+
class te {
|
|
652
652
|
constructor() {
|
|
653
|
-
|
|
653
|
+
$(this, "animationId"), $(this, "isInProgress"), $(this, "startedAt"), this.animationId = null, this.isInProgress = !1, this.startedAt = null;
|
|
654
654
|
}
|
|
655
655
|
/**
|
|
656
656
|
*
|
|
@@ -661,16 +661,16 @@ class Qt {
|
|
|
661
661
|
this.isInProgress = !0;
|
|
662
662
|
const i = (r) => {
|
|
663
663
|
this.startedAt || (this.startedAt = r);
|
|
664
|
-
const c = r - this.startedAt,
|
|
665
|
-
e(
|
|
664
|
+
const c = r - this.startedAt, s = n === 0 ? 1 : K(c / n, 2), p = s >= 1 && !o;
|
|
665
|
+
e(s), p ? this.stop() : this.animationId = requestAnimationFrame(i);
|
|
666
666
|
};
|
|
667
667
|
this.animationId = requestAnimationFrame(i);
|
|
668
668
|
}
|
|
669
669
|
stop() {
|
|
670
|
-
this.isInProgress = !1, this.startedAt = null,
|
|
670
|
+
this.isInProgress = !1, this.startedAt = null, x(this.animationId) && cancelAnimationFrame(this.animationId);
|
|
671
671
|
}
|
|
672
672
|
}
|
|
673
|
-
function
|
|
673
|
+
function ee(t) {
|
|
674
674
|
const {
|
|
675
675
|
startY: e,
|
|
676
676
|
endY: n,
|
|
@@ -678,32 +678,32 @@ function Zt(t) {
|
|
|
678
678
|
animationFrame: i,
|
|
679
679
|
onEnd: r,
|
|
680
680
|
animationTimingFunction: c,
|
|
681
|
-
animationDuration:
|
|
682
|
-
} = t,
|
|
681
|
+
animationDuration: s
|
|
682
|
+
} = t, p = yt(e, n);
|
|
683
683
|
i.stop();
|
|
684
|
-
let
|
|
684
|
+
let f = !1;
|
|
685
685
|
i.start((l) => {
|
|
686
|
-
|
|
687
|
-
y: e +
|
|
688
|
-
}), !
|
|
689
|
-
},
|
|
686
|
+
J(o, {
|
|
687
|
+
y: e + p * c(l)
|
|
688
|
+
}), !f && l >= 1 && (r == null || r(), f = !0);
|
|
689
|
+
}, s);
|
|
690
690
|
}
|
|
691
|
-
const
|
|
692
|
-
|
|
691
|
+
const ct = (t, e) => (n) => {
|
|
692
|
+
ee({
|
|
693
693
|
...n,
|
|
694
694
|
animationTimingFunction: t,
|
|
695
695
|
animationDuration: e
|
|
696
696
|
});
|
|
697
|
-
},
|
|
697
|
+
}, R = {
|
|
698
698
|
TOP: "top",
|
|
699
699
|
MIDDLE: "middle",
|
|
700
700
|
CONTENT_HEIGHT: "content-height",
|
|
701
701
|
CLOSED: "closed"
|
|
702
702
|
};
|
|
703
|
-
function
|
|
704
|
-
return !(!
|
|
703
|
+
function ne(t) {
|
|
704
|
+
return !(!x(t) || t > 1 || t < 0);
|
|
705
705
|
}
|
|
706
|
-
function
|
|
706
|
+
function oe(t, e) {
|
|
707
707
|
const n = {
|
|
708
708
|
set(o, i, r, c) {
|
|
709
709
|
return e(i, r), Reflect.set(o, i, r, c);
|
|
@@ -711,71 +711,71 @@ function te(t, e) {
|
|
|
711
711
|
};
|
|
712
712
|
return new Proxy(t, n);
|
|
713
713
|
}
|
|
714
|
-
function
|
|
714
|
+
function re(...t) {
|
|
715
715
|
console.error(t);
|
|
716
716
|
}
|
|
717
|
-
const
|
|
717
|
+
const N = {
|
|
718
718
|
EASE: "ease",
|
|
719
719
|
EASE_IN: "ease-in",
|
|
720
720
|
EASE_OUT: "ease-out",
|
|
721
721
|
EASE_IN_OUT: "ease-in-out",
|
|
722
722
|
SPRING: "spring"
|
|
723
723
|
};
|
|
724
|
-
function
|
|
725
|
-
for (const e of Object.values(
|
|
724
|
+
function ie(t) {
|
|
725
|
+
for (const e of Object.values(N))
|
|
726
726
|
if (e === t)
|
|
727
727
|
return !0;
|
|
728
728
|
return !1;
|
|
729
729
|
}
|
|
730
|
-
function
|
|
731
|
-
return !!(t instanceof Object && "p1x" in t && "p1y" in t && "p2x" in t && "p2y" in t &&
|
|
730
|
+
function xt(t) {
|
|
731
|
+
return !!(t instanceof Object && "p1x" in t && "p1y" in t && "p2x" in t && "p2y" in t && x(t.p1x) && x(t.p1y) && x(t.p2x) && x(t.p2y));
|
|
732
732
|
}
|
|
733
733
|
function W(t, e, n, o) {
|
|
734
|
-
return function(
|
|
735
|
-
return c(i(
|
|
734
|
+
return function(s) {
|
|
735
|
+
return c(i(s));
|
|
736
736
|
};
|
|
737
|
-
function i(
|
|
738
|
-
let
|
|
739
|
-
if (
|
|
740
|
-
return
|
|
741
|
-
for (;
|
|
742
|
-
if (b = r(l), Math.abs(b -
|
|
737
|
+
function i(s) {
|
|
738
|
+
let p = 0, f = 1, l = s, b;
|
|
739
|
+
if (s === 0 || s === 1)
|
|
740
|
+
return s;
|
|
741
|
+
for (; p < f; ) {
|
|
742
|
+
if (b = r(l), Math.abs(b - s) < 1e-3)
|
|
743
743
|
return l;
|
|
744
|
-
|
|
744
|
+
s > b ? p = l : f = l, l = (f + p) / 2;
|
|
745
745
|
}
|
|
746
746
|
return l;
|
|
747
747
|
}
|
|
748
|
-
function r(
|
|
749
|
-
return 3 * t *
|
|
748
|
+
function r(s) {
|
|
749
|
+
return 3 * t * s * Math.pow(1 - s, 2) + 3 * n * Math.pow(s, 2) * (1 - s) + Math.pow(s, 3);
|
|
750
750
|
}
|
|
751
|
-
function c(
|
|
752
|
-
return 3 * e *
|
|
751
|
+
function c(s) {
|
|
752
|
+
return 3 * e * s * Math.pow(1 - s, 2) + 3 * o * Math.pow(s, 2) * (1 - s) + Math.pow(s, 3);
|
|
753
753
|
}
|
|
754
754
|
}
|
|
755
|
-
const
|
|
756
|
-
function
|
|
755
|
+
const ae = W(0.25, 0.1, 0.25, 1), se = W(0.42, 0, 1, 1), At = W(0.42, 0, 0.58, 1), vt = W(0.4, 0.1, 0.6, 1), ce = W(0.45, 1.5, 0.55, 1);
|
|
756
|
+
function le(t) {
|
|
757
757
|
switch (t) {
|
|
758
|
-
case
|
|
759
|
-
return
|
|
760
|
-
case
|
|
761
|
-
return
|
|
762
|
-
case
|
|
763
|
-
return
|
|
764
|
-
case
|
|
765
|
-
return
|
|
766
|
-
case
|
|
767
|
-
return
|
|
758
|
+
case N.EASE:
|
|
759
|
+
return ae;
|
|
760
|
+
case N.EASE_IN:
|
|
761
|
+
return se;
|
|
762
|
+
case N.EASE_OUT:
|
|
763
|
+
return At;
|
|
764
|
+
case N.EASE_IN_OUT:
|
|
765
|
+
return vt;
|
|
766
|
+
case N.SPRING:
|
|
767
|
+
return ce;
|
|
768
768
|
default:
|
|
769
|
-
return
|
|
769
|
+
return vt;
|
|
770
770
|
}
|
|
771
771
|
}
|
|
772
|
-
function
|
|
772
|
+
function St(t) {
|
|
773
773
|
return typeof t == "boolean";
|
|
774
774
|
}
|
|
775
|
-
const
|
|
775
|
+
const ue = {
|
|
776
776
|
ariaLabel: "Bottom sheet",
|
|
777
777
|
content: "",
|
|
778
|
-
defaultPosition:
|
|
778
|
+
defaultPosition: R.CONTENT_HEIGHT,
|
|
779
779
|
marginTop: 20,
|
|
780
780
|
snapPoints: [],
|
|
781
781
|
width: "92%",
|
|
@@ -811,13 +811,13 @@ const se = {
|
|
|
811
811
|
draggingAnimationTimings: "ease-in-out",
|
|
812
812
|
draggingAnimationDuration: 180
|
|
813
813
|
};
|
|
814
|
-
function
|
|
814
|
+
function de(t) {
|
|
815
815
|
const e = {
|
|
816
|
-
...
|
|
816
|
+
...ue
|
|
817
817
|
}, n = Object.entries(t).reduce(
|
|
818
818
|
(o, i) => {
|
|
819
819
|
const [r, c] = i;
|
|
820
|
-
return
|
|
820
|
+
return st(c) && (o[r] = c), o;
|
|
821
821
|
},
|
|
822
822
|
{}
|
|
823
823
|
);
|
|
@@ -826,39 +826,39 @@ function ce(t) {
|
|
|
826
826
|
...n
|
|
827
827
|
};
|
|
828
828
|
}
|
|
829
|
-
function
|
|
830
|
-
if (
|
|
829
|
+
function lt(t) {
|
|
830
|
+
if (xt(t)) {
|
|
831
831
|
const { p1x: e, p1y: n, p2x: o, p2y: i } = t;
|
|
832
832
|
return W(e, n, o, i);
|
|
833
833
|
}
|
|
834
|
-
return
|
|
834
|
+
return ie(t) ? le(t) : At;
|
|
835
835
|
}
|
|
836
|
-
function
|
|
836
|
+
function pe(t, e, n) {
|
|
837
837
|
function o(i, r) {
|
|
838
838
|
switch (i) {
|
|
839
839
|
case "content":
|
|
840
|
-
|
|
840
|
+
T(r) && (t.bottomSheetContentWrapper.innerHTML = r);
|
|
841
841
|
break;
|
|
842
842
|
case "width":
|
|
843
|
-
|
|
843
|
+
T(r) && (t.bottomSheetContainer.style.width = r);
|
|
844
844
|
break;
|
|
845
845
|
case "shouldShowHandle":
|
|
846
|
-
|
|
846
|
+
St(r) || z(t.bottomSheetHandle, !1);
|
|
847
847
|
break;
|
|
848
848
|
case "shouldShowBackdrop":
|
|
849
|
-
|
|
849
|
+
St(r) || z(t.bottomSheetBackdrop, !1);
|
|
850
850
|
break;
|
|
851
851
|
case "containerBorderRadius":
|
|
852
|
-
|
|
852
|
+
T(r) && (t.bottomSheetContainer.style.borderRadius = r);
|
|
853
853
|
break;
|
|
854
854
|
case "backdropColor":
|
|
855
|
-
|
|
855
|
+
T(r) && (t.bottomSheetBackdrop.style.backgroundColor = r);
|
|
856
856
|
break;
|
|
857
857
|
case "backDropTransition":
|
|
858
|
-
|
|
858
|
+
T(r) && (t.bottomSheetBackdrop.style.transition = r);
|
|
859
859
|
break;
|
|
860
860
|
case "rootClass":
|
|
861
|
-
if (!
|
|
861
|
+
if (!T(r))
|
|
862
862
|
return;
|
|
863
863
|
U(
|
|
864
864
|
t.bottomSheetRoot,
|
|
@@ -867,7 +867,7 @@ function le(t, e, n) {
|
|
|
867
867
|
);
|
|
868
868
|
break;
|
|
869
869
|
case "containerClass":
|
|
870
|
-
if (!
|
|
870
|
+
if (!T(r))
|
|
871
871
|
return;
|
|
872
872
|
U(
|
|
873
873
|
t.bottomSheetContainer,
|
|
@@ -876,7 +876,7 @@ function le(t, e, n) {
|
|
|
876
876
|
);
|
|
877
877
|
break;
|
|
878
878
|
case "handleClass":
|
|
879
|
-
if (!
|
|
879
|
+
if (!T(r))
|
|
880
880
|
return;
|
|
881
881
|
U(
|
|
882
882
|
t.bottomSheetHandle,
|
|
@@ -885,7 +885,7 @@ function le(t, e, n) {
|
|
|
885
885
|
);
|
|
886
886
|
break;
|
|
887
887
|
case "contentWrapperClass":
|
|
888
|
-
if (!
|
|
888
|
+
if (!T(r))
|
|
889
889
|
return;
|
|
890
890
|
U(
|
|
891
891
|
t.bottomSheetContentWrapper,
|
|
@@ -894,7 +894,7 @@ function le(t, e, n) {
|
|
|
894
894
|
);
|
|
895
895
|
break;
|
|
896
896
|
case "backdropClass":
|
|
897
|
-
if (!
|
|
897
|
+
if (!T(r))
|
|
898
898
|
return;
|
|
899
899
|
U(
|
|
900
900
|
t.bottomSheetBackdrop,
|
|
@@ -903,35 +903,35 @@ function le(t, e, n) {
|
|
|
903
903
|
);
|
|
904
904
|
break;
|
|
905
905
|
case "draggingAnimationTimings":
|
|
906
|
-
if (
|
|
907
|
-
const c =
|
|
906
|
+
if (xt(r)) {
|
|
907
|
+
const c = lt(r), s = ct(
|
|
908
908
|
c,
|
|
909
909
|
n.draggingAnimationDuration
|
|
910
910
|
);
|
|
911
|
-
e.translateContainer =
|
|
911
|
+
e.translateContainer = s;
|
|
912
912
|
}
|
|
913
913
|
break;
|
|
914
914
|
case "draggingAnimationDuration":
|
|
915
|
-
if (
|
|
916
|
-
const c =
|
|
915
|
+
if (x(r)) {
|
|
916
|
+
const c = lt(
|
|
917
917
|
n.draggingAnimationTimings
|
|
918
|
-
),
|
|
918
|
+
), s = ct(
|
|
919
919
|
c,
|
|
920
920
|
r
|
|
921
921
|
);
|
|
922
|
-
e.translateContainer =
|
|
922
|
+
e.translateContainer = s;
|
|
923
923
|
}
|
|
924
924
|
break;
|
|
925
925
|
}
|
|
926
926
|
}
|
|
927
927
|
return o;
|
|
928
928
|
}
|
|
929
|
-
function
|
|
930
|
-
const e =
|
|
929
|
+
function he(t) {
|
|
930
|
+
const e = de(t), n = lt(
|
|
931
931
|
t.draggingAnimationTimings
|
|
932
932
|
), o = {
|
|
933
933
|
isMounted: !1,
|
|
934
|
-
translateContainer:
|
|
934
|
+
translateContainer: ct(
|
|
935
935
|
n,
|
|
936
936
|
e.draggingAnimationDuration
|
|
937
937
|
)
|
|
@@ -942,196 +942,204 @@ function ue(t) {
|
|
|
942
942
|
y: 0
|
|
943
943
|
},
|
|
944
944
|
isDragging: !1,
|
|
945
|
-
originalDocumentOverflowY:
|
|
946
|
-
}
|
|
947
|
-
|
|
948
|
-
|
|
945
|
+
originalDocumentOverflowY: null
|
|
946
|
+
};
|
|
947
|
+
function r() {
|
|
948
|
+
i.originalDocumentOverflowY && i.originalDocumentOverflowY !== "hidden" && (document.body.style.overflowY = i.originalDocumentOverflowY);
|
|
949
|
+
}
|
|
950
|
+
const c = new te(), s = {
|
|
951
|
+
animationFrame: c,
|
|
952
|
+
onClose: H,
|
|
949
953
|
bottomSheetState: o,
|
|
950
954
|
draggingState: i,
|
|
951
|
-
snapTo:
|
|
952
|
-
moveUp:
|
|
953
|
-
moveDown:
|
|
954
|
-
}, { elements:
|
|
955
|
+
snapTo: ut,
|
|
956
|
+
moveUp: tt,
|
|
957
|
+
moveDown: M
|
|
958
|
+
}, { elements: p, eventHandlers: f } = Kt(
|
|
955
959
|
e,
|
|
956
|
-
|
|
957
|
-
),
|
|
960
|
+
s
|
|
961
|
+
), l = oe(
|
|
958
962
|
e,
|
|
959
|
-
|
|
960
|
-
), { bottomSheetBackdrop:
|
|
961
|
-
const
|
|
962
|
-
|
|
963
|
+
pe(p, o, e)
|
|
964
|
+
), { bottomSheetBackdrop: b, bottomSheetRoot: E, bottomSheetContainer: a } = p, k = (u) => {
|
|
965
|
+
const d = u ?? window.document.body;
|
|
966
|
+
d.appendChild(E), d.appendChild(b);
|
|
963
967
|
const h = window.innerHeight;
|
|
964
|
-
|
|
968
|
+
J(a, {
|
|
965
969
|
y: h
|
|
966
|
-
}),
|
|
967
|
-
},
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
}), o.isMounted = !1;
|
|
970
|
+
}), f.attachEventListeners(), o.isMounted = !0;
|
|
971
|
+
}, v = () => {
|
|
972
|
+
f.clearEventListeners(), Object.values(p).forEach((u) => {
|
|
973
|
+
u.remove();
|
|
974
|
+
}), r(), o.isMounted = !1;
|
|
971
975
|
}, S = () => {
|
|
972
|
-
var
|
|
973
|
-
if (
|
|
976
|
+
var u;
|
|
977
|
+
if (C() || re(
|
|
974
978
|
'Bottom Sheet is not mounted yet. call the "mount" method first.'
|
|
975
|
-
), (
|
|
979
|
+
), (u = t.beforeOpen) == null || u.call(t), P())
|
|
976
980
|
return;
|
|
977
|
-
|
|
978
|
-
y:
|
|
981
|
+
l.shouldShowBackdrop && et(b, !0), et([a], !0), J(a, {
|
|
982
|
+
y: a.clientHeight
|
|
979
983
|
});
|
|
980
|
-
const
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
),
|
|
984
|
+
const d = window.innerHeight, h = ht(
|
|
985
|
+
d,
|
|
986
|
+
a.clientHeight,
|
|
987
|
+
l.marginTop,
|
|
988
|
+
l.defaultPosition
|
|
989
|
+
), m = D(a).y;
|
|
986
990
|
o.translateContainer({
|
|
987
|
-
startY:
|
|
991
|
+
startY: m,
|
|
988
992
|
endY: h,
|
|
989
|
-
animationFrame:
|
|
990
|
-
bottomSheetContainer:
|
|
993
|
+
animationFrame: c,
|
|
994
|
+
bottomSheetContainer: a,
|
|
991
995
|
onEnd: t.afterOpen
|
|
992
|
-
}),
|
|
996
|
+
}), p.bottomSheetHandle.focus();
|
|
997
|
+
const y = document.body.style.overflowY;
|
|
998
|
+
i.originalDocumentOverflowY = y || "initial", document.body.style.overflowY = "hidden";
|
|
993
999
|
};
|
|
994
|
-
function
|
|
995
|
-
var
|
|
996
|
-
if (
|
|
1000
|
+
function H() {
|
|
1001
|
+
var u;
|
|
1002
|
+
if (G())
|
|
997
1003
|
return;
|
|
998
|
-
(
|
|
999
|
-
const
|
|
1004
|
+
(u = t.beforeClose) == null || u.call(t);
|
|
1005
|
+
const d = D(a).y, h = a.clientHeight;
|
|
1000
1006
|
o.translateContainer({
|
|
1001
|
-
startY:
|
|
1007
|
+
startY: d,
|
|
1002
1008
|
endY: h,
|
|
1003
|
-
animationFrame:
|
|
1004
|
-
bottomSheetContainer:
|
|
1009
|
+
animationFrame: c,
|
|
1010
|
+
bottomSheetContainer: a,
|
|
1005
1011
|
onEnd: () => {
|
|
1006
|
-
var
|
|
1007
|
-
(
|
|
1012
|
+
var m;
|
|
1013
|
+
(m = t.afterClose) == null || m.call(t), et([b, a], !1);
|
|
1008
1014
|
}
|
|
1009
|
-
});
|
|
1015
|
+
}), r();
|
|
1010
1016
|
}
|
|
1011
|
-
function
|
|
1017
|
+
function C() {
|
|
1012
1018
|
return o.isMounted;
|
|
1013
1019
|
}
|
|
1014
|
-
function
|
|
1015
|
-
const
|
|
1016
|
-
return
|
|
1020
|
+
function P() {
|
|
1021
|
+
const u = D(a).y, d = window.innerHeight, h = a.clientHeight >= d ? d : a.clientHeight;
|
|
1022
|
+
return u < h;
|
|
1017
1023
|
}
|
|
1018
|
-
function
|
|
1019
|
-
return !
|
|
1020
|
-
}
|
|
1021
|
-
function Q() {
|
|
1022
|
-
const d = D(s).y, p = s.clientHeight, h = window.innerHeight;
|
|
1023
|
-
if (d <= 5 && d >= -5)
|
|
1024
|
-
return N.CONTENT_HEIGHT;
|
|
1025
|
-
const g = p - d;
|
|
1026
|
-
if (g === h / 2)
|
|
1027
|
-
return N.MIDDLE;
|
|
1028
|
-
const T = h - u.marginTop, O = 10;
|
|
1029
|
-
return g <= T + O && g >= T - O ? N.TOP : N.CLOSED;
|
|
1024
|
+
function G() {
|
|
1025
|
+
return !P();
|
|
1030
1026
|
}
|
|
1031
1027
|
function Z() {
|
|
1032
|
-
|
|
1028
|
+
const u = D(a).y, d = a.clientHeight, h = window.innerHeight;
|
|
1029
|
+
if (u <= 5 && u >= -5)
|
|
1030
|
+
return R.CONTENT_HEIGHT;
|
|
1031
|
+
const m = d - u;
|
|
1032
|
+
if (m === h / 2)
|
|
1033
|
+
return R.MIDDLE;
|
|
1034
|
+
const y = h - l.marginTop, O = 10;
|
|
1035
|
+
return m <= y + O && m >= y - O ? R.TOP : R.CLOSED;
|
|
1036
|
+
}
|
|
1037
|
+
function g() {
|
|
1038
|
+
return a.clientHeight;
|
|
1033
1039
|
}
|
|
1034
|
-
function
|
|
1035
|
-
|
|
1040
|
+
function A(u) {
|
|
1041
|
+
if (!P())
|
|
1042
|
+
return;
|
|
1043
|
+
const d = D(a).y, h = a.clientHeight - d, m = window.innerHeight - u, y = jt(h, m), O = V(h, m);
|
|
1036
1044
|
o.translateContainer({
|
|
1037
|
-
startY:
|
|
1038
|
-
endY:
|
|
1039
|
-
animationFrame:
|
|
1040
|
-
bottomSheetContainer:
|
|
1045
|
+
startY: d,
|
|
1046
|
+
endY: d + (y.isUp ? -O : O),
|
|
1047
|
+
animationFrame: c,
|
|
1048
|
+
bottomSheetContainer: a
|
|
1041
1049
|
});
|
|
1042
1050
|
}
|
|
1043
|
-
function
|
|
1044
|
-
viewportHeight:
|
|
1051
|
+
function L(u, {
|
|
1052
|
+
viewportHeight: d,
|
|
1045
1053
|
visibleHeight: h
|
|
1046
1054
|
}) {
|
|
1047
|
-
let
|
|
1048
|
-
for (const
|
|
1049
|
-
const O =
|
|
1055
|
+
let m = null;
|
|
1056
|
+
for (const y of u) {
|
|
1057
|
+
const O = y * d, B = V(
|
|
1050
1058
|
h,
|
|
1051
1059
|
O
|
|
1052
1060
|
);
|
|
1053
|
-
(
|
|
1061
|
+
(m === null || B < m) && (m = B);
|
|
1054
1062
|
}
|
|
1055
1063
|
return {
|
|
1056
|
-
minOffset:
|
|
1064
|
+
minOffset: m
|
|
1057
1065
|
};
|
|
1058
1066
|
}
|
|
1059
|
-
function
|
|
1060
|
-
const
|
|
1061
|
-
if (!
|
|
1067
|
+
function tt() {
|
|
1068
|
+
const u = [...l.snapPoints].reverse(), d = D(a).y, h = a.clientHeight, m = h - d;
|
|
1069
|
+
if (!l.expandable && m >= h)
|
|
1062
1070
|
return;
|
|
1063
|
-
const
|
|
1071
|
+
const y = window.innerHeight, O = mt(
|
|
1064
1072
|
"above",
|
|
1065
|
-
{ visibleHeight:
|
|
1066
|
-
|
|
1067
|
-
), { minOffset:
|
|
1068
|
-
visibleHeight:
|
|
1069
|
-
viewportHeight:
|
|
1073
|
+
{ visibleHeight: m, viewportHeight: y },
|
|
1074
|
+
u
|
|
1075
|
+
), { minOffset: B } = L(O, {
|
|
1076
|
+
visibleHeight: m,
|
|
1077
|
+
viewportHeight: y
|
|
1070
1078
|
});
|
|
1071
|
-
if (
|
|
1079
|
+
if (B === null && m < y - l.marginTop) {
|
|
1072
1080
|
o.translateContainer({
|
|
1073
|
-
startY:
|
|
1074
|
-
endY:
|
|
1075
|
-
|
|
1081
|
+
startY: d,
|
|
1082
|
+
endY: ht(
|
|
1083
|
+
y,
|
|
1076
1084
|
h,
|
|
1077
|
-
|
|
1085
|
+
l.marginTop,
|
|
1078
1086
|
"top"
|
|
1079
1087
|
),
|
|
1080
|
-
animationFrame:
|
|
1081
|
-
bottomSheetContainer:
|
|
1088
|
+
animationFrame: c,
|
|
1089
|
+
bottomSheetContainer: a
|
|
1082
1090
|
});
|
|
1083
1091
|
return;
|
|
1084
1092
|
}
|
|
1085
|
-
|
|
1086
|
-
startY:
|
|
1087
|
-
endY:
|
|
1088
|
-
animationFrame:
|
|
1089
|
-
bottomSheetContainer:
|
|
1093
|
+
x(B) && o.translateContainer({
|
|
1094
|
+
startY: d,
|
|
1095
|
+
endY: d - B,
|
|
1096
|
+
animationFrame: c,
|
|
1097
|
+
bottomSheetContainer: a
|
|
1090
1098
|
});
|
|
1091
1099
|
}
|
|
1092
|
-
function
|
|
1093
|
-
const
|
|
1094
|
-
if (
|
|
1100
|
+
function M() {
|
|
1101
|
+
const u = D(a).y, d = a.clientHeight - u;
|
|
1102
|
+
if (d < 1)
|
|
1095
1103
|
return;
|
|
1096
|
-
const h = window.innerHeight,
|
|
1104
|
+
const h = window.innerHeight, m = mt(
|
|
1097
1105
|
"below",
|
|
1098
|
-
{ visibleHeight:
|
|
1099
|
-
|
|
1100
|
-
), { minOffset:
|
|
1101
|
-
visibleHeight:
|
|
1106
|
+
{ visibleHeight: d, viewportHeight: h },
|
|
1107
|
+
l.snapPoints
|
|
1108
|
+
), { minOffset: y } = L(m, {
|
|
1109
|
+
visibleHeight: d,
|
|
1102
1110
|
viewportHeight: h
|
|
1103
1111
|
});
|
|
1104
|
-
|
|
1105
|
-
startY:
|
|
1106
|
-
endY:
|
|
1107
|
-
animationFrame:
|
|
1108
|
-
bottomSheetContainer:
|
|
1112
|
+
x(y) && o.translateContainer({
|
|
1113
|
+
startY: u,
|
|
1114
|
+
endY: u + y,
|
|
1115
|
+
animationFrame: c,
|
|
1116
|
+
bottomSheetContainer: a
|
|
1109
1117
|
});
|
|
1110
1118
|
}
|
|
1111
|
-
function
|
|
1112
|
-
const
|
|
1113
|
-
if (!
|
|
1119
|
+
function ut(u) {
|
|
1120
|
+
const d = window.innerHeight;
|
|
1121
|
+
if (!ne(u))
|
|
1114
1122
|
return;
|
|
1115
|
-
const h =
|
|
1116
|
-
|
|
1123
|
+
const h = K(d * u, 2);
|
|
1124
|
+
A(h);
|
|
1117
1125
|
}
|
|
1118
1126
|
return {
|
|
1119
|
-
props:
|
|
1120
|
-
elements:
|
|
1121
|
-
mount:
|
|
1122
|
-
unmount:
|
|
1127
|
+
props: l,
|
|
1128
|
+
elements: p,
|
|
1129
|
+
mount: k,
|
|
1130
|
+
unmount: v,
|
|
1123
1131
|
open: S,
|
|
1124
|
-
close:
|
|
1125
|
-
getIsMounted:
|
|
1126
|
-
getIsOpen:
|
|
1127
|
-
getIsClosed:
|
|
1128
|
-
getPosition:
|
|
1129
|
-
getHeight:
|
|
1130
|
-
moveTo:
|
|
1131
|
-
snapTo:
|
|
1132
|
+
close: H,
|
|
1133
|
+
getIsMounted: C,
|
|
1134
|
+
getIsOpen: P,
|
|
1135
|
+
getIsClosed: G,
|
|
1136
|
+
getPosition: Z,
|
|
1137
|
+
getHeight: g,
|
|
1138
|
+
moveTo: A,
|
|
1139
|
+
snapTo: ut
|
|
1132
1140
|
};
|
|
1133
1141
|
}
|
|
1134
|
-
function
|
|
1142
|
+
function Lt() {
|
|
1135
1143
|
return {
|
|
1136
1144
|
elements: {
|
|
1137
1145
|
bottomSheetRoot: void 0,
|
|
@@ -1154,7 +1162,7 @@ function de() {
|
|
|
1154
1162
|
getHeight: () => 0,
|
|
1155
1163
|
getIsOpen: () => !1,
|
|
1156
1164
|
getIsClosed: () => !0,
|
|
1157
|
-
getPosition: () =>
|
|
1165
|
+
getPosition: () => R.CLOSED,
|
|
1158
1166
|
moveTo: () => {
|
|
1159
1167
|
},
|
|
1160
1168
|
snapTo: () => {
|
|
@@ -1164,54 +1172,73 @@ function de() {
|
|
|
1164
1172
|
}
|
|
1165
1173
|
};
|
|
1166
1174
|
}
|
|
1167
|
-
const
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1175
|
+
const me = Lt(), ve = Ot(
|
|
1176
|
+
function(e, n) {
|
|
1177
|
+
const {
|
|
1178
|
+
children: o,
|
|
1179
|
+
isOpen: i,
|
|
1180
|
+
setIsOpen: r,
|
|
1181
|
+
afterClose: c,
|
|
1182
|
+
mountingPoint: s,
|
|
1183
|
+
...p
|
|
1184
|
+
} = e, f = nt(me), [l, b] = ot(
|
|
1185
|
+
f.current
|
|
1186
|
+
);
|
|
1187
|
+
Dt(
|
|
1188
|
+
n,
|
|
1189
|
+
() => l,
|
|
1190
|
+
[l]
|
|
1191
|
+
);
|
|
1192
|
+
const E = Pt(() => {
|
|
1193
|
+
r(!1), c == null || c();
|
|
1194
|
+
}, [c]);
|
|
1195
|
+
_(() => {
|
|
1196
|
+
i ? l.open() : l.close();
|
|
1197
|
+
}, [i]);
|
|
1198
|
+
const a = nt(null);
|
|
1199
|
+
return _(
|
|
1200
|
+
function() {
|
|
1201
|
+
const v = Bt(e.mountingPoint) ? e.mountingPoint : window.document.body;
|
|
1202
|
+
if (!v || l.getIsMounted())
|
|
1203
|
+
return;
|
|
1204
|
+
const S = he({
|
|
1205
|
+
content: "",
|
|
1206
|
+
...p,
|
|
1207
|
+
afterClose: E
|
|
1208
|
+
});
|
|
1209
|
+
return S.mount(v), a.current = S.elements.bottomSheetContentWrapper ?? null, f.current = S, b(S), () => {
|
|
1210
|
+
l.unmount();
|
|
1211
|
+
};
|
|
1212
|
+
},
|
|
1213
|
+
[e.mountingPoint, p, E]
|
|
1214
|
+
), _(
|
|
1215
|
+
function() {
|
|
1216
|
+
Object.assign(f.current.props, {
|
|
1217
|
+
...p
|
|
1218
|
+
}), b(f.current);
|
|
1219
|
+
},
|
|
1220
|
+
[p]
|
|
1221
|
+
), a.current ? Mt(
|
|
1222
|
+
e.children,
|
|
1223
|
+
a.current
|
|
1224
|
+
) : null;
|
|
1225
|
+
}
|
|
1226
|
+
), fe = Lt();
|
|
1227
|
+
function Se() {
|
|
1228
|
+
const t = nt(fe), [e, n] = ot(!1), [o, i] = ot(t.current);
|
|
1229
|
+
return _(() => {
|
|
1230
|
+
i(t.current);
|
|
1231
|
+
}, [t.current]), {
|
|
1232
|
+
props: Yt(() => ({
|
|
1233
|
+
ref: t,
|
|
1234
|
+
isOpen: e,
|
|
1235
|
+
setIsOpen: n
|
|
1236
|
+
}), [e]),
|
|
1237
|
+
instance: o
|
|
1238
|
+
};
|
|
1239
|
+
}
|
|
1214
1240
|
export {
|
|
1215
|
-
|
|
1216
|
-
|
|
1241
|
+
ve as BottomSheet,
|
|
1242
|
+
Lt as createPlaceholderBottomSheet,
|
|
1243
|
+
Se as useBottomSheet
|
|
1217
1244
|
};
|