@fluixi-ui/bottom-sheet 0.2.0-alpha.2 → 0.2.0-alpha.20
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/bottom-sheet.d.ts +47 -25
- package/dist/bottom-sheet.d.ts.map +1 -1
- package/dist/bottom-sheet.js +374 -312
- package/dist/index.js +2 -15
- package/dist/tsconfig.lib.tsbuildinfo +1 -1
- package/package.json +6 -6
package/dist/bottom-sheet.js
CHANGED
|
@@ -1,337 +1,399 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { createComponent, createNativeElement, delegateEvents, handleRef, insert, mergeProps, splitProps, spread } from "@fluixi/dom";
|
|
2
|
+
import { createEffect, createMemo, createRenderEffect, createSignal, onCleanup } from "@fluixi/reactive/signal";
|
|
3
|
+
import { fxProps } from "@fluixi-ui/fx";
|
|
4
|
+
import { Show, useRef } from "@fluixi/core";
|
|
5
|
+
import { composeEventHandlers, composeId, createControllableBooleanSignal, createId, createSafeContext, dataAttr, mergeRefs } from "@fluixi-ui/kit";
|
|
6
|
+
import { Portal, createDismissableLayer, createFocusScope, createLayerIndex, createScrollLock } from "@fluixi-ui/primitives";
|
|
7
|
+
//#region src/bottom-sheet.tsx
|
|
6
8
|
delegateEvents(["click"]);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
var [BottomSheetProvider, useBottomSheetContext] = createSafeContext("BottomSheet");
|
|
10
|
+
var viewportHeight = () => typeof window !== "undefined" ? window.innerHeight : 800;
|
|
11
|
+
/**
|
|
12
|
+
* Root of a bottom sheet — a panel anchored to the bottom edge that a user can
|
|
13
|
+
* drag to resize freely (it stays where released), or drag down to dismiss (via
|
|
14
|
+
* {@link BottomSheetHandle}). Built on the same overlay primitives as
|
|
15
|
+
* `Dialog`/`Drawer`; owns open state and, when `modal` (the default), locks
|
|
16
|
+
* scroll and traps focus.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* import {
|
|
21
|
+
* BottomSheet, BottomSheetTrigger, BottomSheetPortal, BottomSheetOverlay,
|
|
22
|
+
* BottomSheetContent, BottomSheetHandle, BottomSheetHeader, BottomSheetTitle,
|
|
23
|
+
* BottomSheetBody, BottomSheetClose,
|
|
24
|
+
* } from '@fluixi-ui/bottom-sheet';
|
|
25
|
+
*
|
|
26
|
+
* <BottomSheet defaultHeight={0.5}>
|
|
27
|
+
* <BottomSheetTrigger>Open</BottomSheetTrigger>
|
|
28
|
+
* <BottomSheetPortal>
|
|
29
|
+
* <BottomSheetOverlay />
|
|
30
|
+
* <BottomSheetContent>
|
|
31
|
+
* <BottomSheetHandle />
|
|
32
|
+
* <BottomSheetHeader><BottomSheetTitle>Share</BottomSheetTitle></BottomSheetHeader>
|
|
33
|
+
* <BottomSheetBody>…</BottomSheetBody>
|
|
34
|
+
* </BottomSheetContent>
|
|
35
|
+
* </BottomSheetPortal>
|
|
36
|
+
* </BottomSheet>
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
9
39
|
function BottomSheet(props) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
return context;
|
|
89
|
-
},
|
|
90
|
-
get children() {
|
|
91
|
-
return props.children;
|
|
92
|
-
}
|
|
93
|
-
}));
|
|
40
|
+
const [isOpen, setInternalOpen] = createControllableBooleanSignal({
|
|
41
|
+
value: () => props.open,
|
|
42
|
+
defaultValue: () => props.defaultOpen ?? false,
|
|
43
|
+
onChange: (open) => props.onOpenChange?.(open)
|
|
44
|
+
});
|
|
45
|
+
const baseId = createId("bottom-sheet");
|
|
46
|
+
const modal = props.modal ?? true;
|
|
47
|
+
const [triggerRef, setTriggerRef] = createSignal(void 0);
|
|
48
|
+
const [descriptionCount, setDescriptionCount] = createSignal(0);
|
|
49
|
+
const [height, setHeight] = createSignal(null);
|
|
50
|
+
const [isDragging, setIsDragging] = createSignal(false);
|
|
51
|
+
const defaultPx = () => Math.round((props.defaultHeight ?? .5) * viewportHeight());
|
|
52
|
+
const maxPx = () => Math.round((props.maxHeight ?? .95) * viewportHeight());
|
|
53
|
+
const closePx = () => (props.closeThreshold ?? .25) * viewportHeight();
|
|
54
|
+
if (modal) createScrollLock(() => isOpen());
|
|
55
|
+
const setOpen = (open) => setInternalOpen(open);
|
|
56
|
+
createEffect(() => {
|
|
57
|
+
if (isOpen()) {
|
|
58
|
+
if (height() == null) setHeight(defaultPx());
|
|
59
|
+
} else setHeight(null);
|
|
60
|
+
});
|
|
61
|
+
const beginDrag = (event) => {
|
|
62
|
+
if (event.button !== 0) return;
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
const handleEl = event.currentTarget;
|
|
65
|
+
try {
|
|
66
|
+
handleEl?.setPointerCapture(event.pointerId);
|
|
67
|
+
} catch {}
|
|
68
|
+
const max = maxPx();
|
|
69
|
+
const close = closePx();
|
|
70
|
+
const startY = event.clientY;
|
|
71
|
+
const startHeight = height() ?? defaultPx();
|
|
72
|
+
setIsDragging(true);
|
|
73
|
+
const onMove = (e) => {
|
|
74
|
+
const delta = startY - e.clientY;
|
|
75
|
+
setHeight(Math.max(0, Math.min(max, startHeight + delta)));
|
|
76
|
+
};
|
|
77
|
+
const onUp = (e) => {
|
|
78
|
+
document.removeEventListener("pointermove", onMove);
|
|
79
|
+
document.removeEventListener("pointerup", onUp);
|
|
80
|
+
try {
|
|
81
|
+
handleEl?.releasePointerCapture(e.pointerId);
|
|
82
|
+
} catch {}
|
|
83
|
+
setIsDragging(false);
|
|
84
|
+
if ((height() ?? defaultPx()) < close) setOpen(false);
|
|
85
|
+
};
|
|
86
|
+
document.addEventListener("pointermove", onMove);
|
|
87
|
+
document.addEventListener("pointerup", onUp);
|
|
88
|
+
};
|
|
89
|
+
const context = {
|
|
90
|
+
isOpen,
|
|
91
|
+
setOpen,
|
|
92
|
+
modal,
|
|
93
|
+
ids: {
|
|
94
|
+
trigger: composeId(baseId, "trigger"),
|
|
95
|
+
content: composeId(baseId, "content"),
|
|
96
|
+
title: composeId(baseId, "title"),
|
|
97
|
+
description: composeId(baseId, "description")
|
|
98
|
+
},
|
|
99
|
+
triggerRef,
|
|
100
|
+
setTriggerRef,
|
|
101
|
+
hasDescription: () => descriptionCount() > 0,
|
|
102
|
+
registerDescription: () => {
|
|
103
|
+
setDescriptionCount((count) => count + 1);
|
|
104
|
+
return () => setDescriptionCount((count) => count - 1);
|
|
105
|
+
},
|
|
106
|
+
height,
|
|
107
|
+
isDragging,
|
|
108
|
+
beginDrag
|
|
109
|
+
};
|
|
110
|
+
return createMemo(() => createComponent(BottomSheetProvider, {
|
|
111
|
+
get value() {
|
|
112
|
+
return context;
|
|
113
|
+
},
|
|
114
|
+
get children() {
|
|
115
|
+
return props.children;
|
|
116
|
+
}
|
|
117
|
+
}));
|
|
94
118
|
}
|
|
119
|
+
/** The button that opens its {@link BottomSheet}. */
|
|
95
120
|
function BottomSheetTrigger(props) {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
121
|
+
const sheet = useBottomSheetContext();
|
|
122
|
+
const [local, others] = splitProps(props, [
|
|
123
|
+
"onClick",
|
|
124
|
+
"ref",
|
|
125
|
+
"children",
|
|
126
|
+
"fx",
|
|
127
|
+
"style"
|
|
128
|
+
]);
|
|
129
|
+
return (() => {
|
|
130
|
+
const _el$ = createNativeElement("button");
|
|
131
|
+
spread({
|
|
132
|
+
element: _el$,
|
|
133
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
|
|
134
|
+
ref: mergeRefs(sheet.setTriggerRef, local.ref),
|
|
135
|
+
type: "button",
|
|
136
|
+
id: () => sheet.ids.trigger,
|
|
137
|
+
"aria-haspopup": "dialog",
|
|
138
|
+
"aria-expanded": () => sheet.isOpen() ? "true" : "false",
|
|
139
|
+
"aria-controls": () => sheet.ids.content,
|
|
140
|
+
"data-state": () => sheet.isOpen() ? "open" : "closed",
|
|
141
|
+
onClick: composeEventHandlers([local.onClick, () => sheet.setOpen(true)])
|
|
142
|
+
})
|
|
143
|
+
});
|
|
144
|
+
insert(_el$, local.children, null);
|
|
145
|
+
return _el$;
|
|
146
|
+
})();
|
|
116
147
|
}
|
|
148
|
+
/** Portals the sheet overlay and content to the document body while open. */
|
|
117
149
|
function BottomSheetPortal(props) {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
139
|
-
}));
|
|
150
|
+
const sheet = useBottomSheetContext();
|
|
151
|
+
const ref = useRef(null);
|
|
152
|
+
createEffect(() => {
|
|
153
|
+
if (!sheet.isOpen() && ref.current) ref.current.remove();
|
|
154
|
+
});
|
|
155
|
+
return createMemo(() => createComponent(Show, {
|
|
156
|
+
get when() {
|
|
157
|
+
return sheet.isOpen();
|
|
158
|
+
},
|
|
159
|
+
get children() {
|
|
160
|
+
return createMemo(() => createComponent(Portal, {
|
|
161
|
+
get ref() {
|
|
162
|
+
return ref;
|
|
163
|
+
},
|
|
164
|
+
get children() {
|
|
165
|
+
return props.children;
|
|
166
|
+
}
|
|
167
|
+
}));
|
|
168
|
+
}
|
|
169
|
+
}));
|
|
140
170
|
}
|
|
171
|
+
/** The backdrop rendered behind the sheet. */
|
|
141
172
|
function BottomSheetOverlay(props) {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
173
|
+
const sheet = useBottomSheetContext();
|
|
174
|
+
const [local, others] = splitProps(props, [
|
|
175
|
+
"children",
|
|
176
|
+
"fx",
|
|
177
|
+
"style"
|
|
178
|
+
]);
|
|
179
|
+
const [element, setElement] = createSignal(void 0);
|
|
180
|
+
createLayerIndex(element);
|
|
181
|
+
return (() => {
|
|
182
|
+
const _el$ = createNativeElement("div");
|
|
183
|
+
spread({
|
|
184
|
+
element: _el$,
|
|
185
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
|
|
186
|
+
ref: setElement,
|
|
187
|
+
"data-bottom-sheet-overlay": "",
|
|
188
|
+
"data-state": () => sheet.isOpen() ? "open" : "closed"
|
|
189
|
+
})
|
|
190
|
+
});
|
|
191
|
+
insert(_el$, local.children, null);
|
|
192
|
+
return _el$;
|
|
193
|
+
})();
|
|
159
194
|
}
|
|
195
|
+
/** The focus-trapped sheet panel; its height tracks the drag / snap point. */
|
|
160
196
|
function BottomSheetContent(props) {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
197
|
+
const sheet = useBottomSheetContext();
|
|
198
|
+
const [local, others] = splitProps(props, [
|
|
199
|
+
"ref",
|
|
200
|
+
"children",
|
|
201
|
+
"onEscapeKeyDown",
|
|
202
|
+
"onPointerDownOutside",
|
|
203
|
+
"fx",
|
|
204
|
+
"style"
|
|
205
|
+
]);
|
|
206
|
+
const [element, setElement] = createSignal(void 0);
|
|
207
|
+
createDismissableLayer(element, {
|
|
208
|
+
disableOutsidePointerEvents: sheet.modal,
|
|
209
|
+
shouldExcludeTarget: (target) => {
|
|
210
|
+
const trigger = sheet.triggerRef();
|
|
211
|
+
return !!trigger && (trigger === target || trigger.contains(target));
|
|
212
|
+
},
|
|
213
|
+
onEscapeKeyDown: local.onEscapeKeyDown,
|
|
214
|
+
onPointerDownOutside: local.onPointerDownOutside,
|
|
215
|
+
onDismiss: () => sheet.setOpen(false)
|
|
216
|
+
});
|
|
217
|
+
createFocusScope(element, {
|
|
218
|
+
trap: () => sheet.modal,
|
|
219
|
+
autoFocus: true,
|
|
220
|
+
restoreFocus: true
|
|
221
|
+
});
|
|
222
|
+
const setRef = (node) => {
|
|
223
|
+
setElement(node);
|
|
224
|
+
handleRef(local.ref, node);
|
|
225
|
+
};
|
|
226
|
+
createRenderEffect(() => {
|
|
227
|
+
const el = element();
|
|
228
|
+
if (!el) return;
|
|
229
|
+
const h = sheet.height();
|
|
230
|
+
if (h != null) el.style.setProperty("--flx-ui-bottom-sheet-h", `${h}px`);
|
|
231
|
+
else el.style.removeProperty("--flx-ui-bottom-sheet-h");
|
|
232
|
+
});
|
|
233
|
+
return (() => {
|
|
234
|
+
const _el$ = createNativeElement("div");
|
|
235
|
+
spread({
|
|
236
|
+
element: _el$,
|
|
237
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
|
|
238
|
+
ref: setRef,
|
|
239
|
+
role: "dialog",
|
|
240
|
+
id: () => sheet.ids.content,
|
|
241
|
+
"aria-modal": () => sheet.modal ? "true" : void 0,
|
|
242
|
+
"aria-labelledby": () => sheet.ids.title,
|
|
243
|
+
"aria-describedby": () => sheet.hasDescription() ? sheet.ids.description : void 0,
|
|
244
|
+
"data-bottom-sheet-content": "",
|
|
245
|
+
"data-dragging": () => dataAttr(sheet.isDragging()),
|
|
246
|
+
"data-state": () => sheet.isOpen() ? "open" : "closed",
|
|
247
|
+
tabindex: -1
|
|
248
|
+
})
|
|
249
|
+
});
|
|
250
|
+
insert(_el$, local.children, null);
|
|
251
|
+
return _el$;
|
|
252
|
+
})();
|
|
210
253
|
}
|
|
254
|
+
/** The drag affordance (grabber). Drag it up to grow the sheet, down to shrink or dismiss it. */
|
|
211
255
|
function BottomSheetHandle(props) {
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
256
|
+
const sheet = useBottomSheetContext();
|
|
257
|
+
const [local, others] = splitProps(props, [
|
|
258
|
+
"ref",
|
|
259
|
+
"children",
|
|
260
|
+
"fx",
|
|
261
|
+
"style"
|
|
262
|
+
]);
|
|
263
|
+
const setRef = (node) => {
|
|
264
|
+
node.addEventListener("pointerdown", sheet.beginDrag);
|
|
265
|
+
onCleanup(() => node.removeEventListener("pointerdown", sheet.beginDrag));
|
|
266
|
+
handleRef(local.ref, node);
|
|
267
|
+
};
|
|
268
|
+
return (() => {
|
|
269
|
+
const _el$ = createNativeElement("div");
|
|
270
|
+
spread({
|
|
271
|
+
element: _el$,
|
|
272
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
|
|
273
|
+
ref: setRef,
|
|
274
|
+
"data-bottom-sheet-handle": "",
|
|
275
|
+
"aria-hidden": "true"
|
|
276
|
+
})
|
|
277
|
+
});
|
|
278
|
+
insert(_el$, local.children, null);
|
|
279
|
+
return _el$;
|
|
280
|
+
})();
|
|
232
281
|
}
|
|
282
|
+
/** The sheet's header region. */
|
|
233
283
|
function BottomSheetHeader(props) {
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
284
|
+
const [local, others] = splitProps(props, [
|
|
285
|
+
"children",
|
|
286
|
+
"fx",
|
|
287
|
+
"style"
|
|
288
|
+
]);
|
|
289
|
+
return (() => {
|
|
290
|
+
const _el$ = createNativeElement("div");
|
|
291
|
+
spread({
|
|
292
|
+
element: _el$,
|
|
293
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, { "data-bottom-sheet-header": "" })
|
|
294
|
+
});
|
|
295
|
+
insert(_el$, local.children, null);
|
|
296
|
+
return _el$;
|
|
297
|
+
})();
|
|
246
298
|
}
|
|
299
|
+
/** The accessible title; labels the sheet via `aria-labelledby`. */
|
|
247
300
|
function BottomSheetTitle(props) {
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
301
|
+
const sheet = useBottomSheetContext();
|
|
302
|
+
const [local, others] = splitProps(props, [
|
|
303
|
+
"children",
|
|
304
|
+
"fx",
|
|
305
|
+
"style"
|
|
306
|
+
]);
|
|
307
|
+
return (() => {
|
|
308
|
+
const _el$ = createNativeElement("h2");
|
|
309
|
+
spread({
|
|
310
|
+
element: _el$,
|
|
311
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
|
|
312
|
+
id: () => sheet.ids.title,
|
|
313
|
+
"data-bottom-sheet-title": ""
|
|
314
|
+
})
|
|
315
|
+
});
|
|
316
|
+
insert(_el$, local.children, null);
|
|
317
|
+
return _el$;
|
|
318
|
+
})();
|
|
262
319
|
}
|
|
320
|
+
/** Optional supporting text; describes the sheet via `aria-describedby`. */
|
|
263
321
|
function BottomSheetDescription(props) {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
322
|
+
const sheet = useBottomSheetContext();
|
|
323
|
+
const [local, others] = splitProps(props, [
|
|
324
|
+
"children",
|
|
325
|
+
"fx",
|
|
326
|
+
"style"
|
|
327
|
+
]);
|
|
328
|
+
onCleanup(sheet.registerDescription());
|
|
329
|
+
return (() => {
|
|
330
|
+
const _el$ = createNativeElement("p");
|
|
331
|
+
spread({
|
|
332
|
+
element: _el$,
|
|
333
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
|
|
334
|
+
id: () => sheet.ids.description,
|
|
335
|
+
"data-bottom-sheet-description": ""
|
|
336
|
+
})
|
|
337
|
+
});
|
|
338
|
+
insert(_el$, local.children, null);
|
|
339
|
+
return _el$;
|
|
340
|
+
})();
|
|
279
341
|
}
|
|
342
|
+
/** The scrollable main content region of the sheet. */
|
|
280
343
|
function BottomSheetBody(props) {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
344
|
+
const [local, others] = splitProps(props, [
|
|
345
|
+
"children",
|
|
346
|
+
"fx",
|
|
347
|
+
"style"
|
|
348
|
+
]);
|
|
349
|
+
return (() => {
|
|
350
|
+
const _el$ = createNativeElement("div");
|
|
351
|
+
spread({
|
|
352
|
+
element: _el$,
|
|
353
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, { "data-bottom-sheet-body": "" })
|
|
354
|
+
});
|
|
355
|
+
insert(_el$, local.children, null);
|
|
356
|
+
return _el$;
|
|
357
|
+
})();
|
|
293
358
|
}
|
|
359
|
+
/** The sheet's footer — typically actions. */
|
|
294
360
|
function BottomSheetFooter(props) {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
361
|
+
const [local, others] = splitProps(props, [
|
|
362
|
+
"children",
|
|
363
|
+
"fx",
|
|
364
|
+
"style"
|
|
365
|
+
]);
|
|
366
|
+
return (() => {
|
|
367
|
+
const _el$ = createNativeElement("div");
|
|
368
|
+
spread({
|
|
369
|
+
element: _el$,
|
|
370
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, { "data-bottom-sheet-footer": "" })
|
|
371
|
+
});
|
|
372
|
+
insert(_el$, local.children, null);
|
|
373
|
+
return _el$;
|
|
374
|
+
})();
|
|
307
375
|
}
|
|
376
|
+
/** A button that closes its {@link BottomSheet}. */
|
|
308
377
|
function BottomSheetClose(props) {
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
378
|
+
const sheet = useBottomSheetContext();
|
|
379
|
+
const [local, others] = splitProps(props, [
|
|
380
|
+
"onClick",
|
|
381
|
+
"children",
|
|
382
|
+
"fx",
|
|
383
|
+
"style"
|
|
384
|
+
]);
|
|
385
|
+
return (() => {
|
|
386
|
+
const _el$ = createNativeElement("button");
|
|
387
|
+
spread({
|
|
388
|
+
element: _el$,
|
|
389
|
+
props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
|
|
390
|
+
type: "button",
|
|
391
|
+
onClick: composeEventHandlers([local.onClick, () => sheet.setOpen(false)])
|
|
392
|
+
})
|
|
393
|
+
});
|
|
394
|
+
insert(_el$, local.children, null);
|
|
395
|
+
return _el$;
|
|
396
|
+
})();
|
|
323
397
|
}
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
BottomSheetBody,
|
|
327
|
-
BottomSheetClose,
|
|
328
|
-
BottomSheetContent,
|
|
329
|
-
BottomSheetDescription,
|
|
330
|
-
BottomSheetFooter,
|
|
331
|
-
BottomSheetHandle,
|
|
332
|
-
BottomSheetHeader,
|
|
333
|
-
BottomSheetOverlay,
|
|
334
|
-
BottomSheetPortal,
|
|
335
|
-
BottomSheetTitle,
|
|
336
|
-
BottomSheetTrigger
|
|
337
|
-
};
|
|
398
|
+
//#endregion
|
|
399
|
+
export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger };
|