@swmansion/react-native-bottom-sheet 0.9.0-next.1 → 0.9.0-next.3
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/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt +40 -16
- package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetViewManager.kt +5 -0
- package/ios/BottomSheetComponentView.mm +4 -0
- package/ios/BottomSheetContentView.h +1 -0
- package/ios/BottomSheetContentView.mm +10 -0
- package/ios/RNSBottomSheetHostingView.swift +36 -43
- package/lib/module/BottomSheet.js +8 -0
- package/lib/module/BottomSheet.js.map +1 -1
- package/lib/module/BottomSheetNativeComponent.ts +1 -0
- package/lib/module/BottomSheetProvider.js +2 -0
- package/lib/module/BottomSheetProvider.js.map +1 -1
- package/lib/module/ModalBottomSheet.js +3 -0
- package/lib/module/ModalBottomSheet.js.map +1 -1
- package/lib/module/bottomSheetUtils.js +5 -0
- package/lib/module/bottomSheetUtils.js.map +1 -1
- package/lib/typescript/src/BottomSheet.d.ts +21 -1
- package/lib/typescript/src/BottomSheet.d.ts.map +1 -1
- package/lib/typescript/src/BottomSheetNativeComponent.d.ts +1 -0
- package/lib/typescript/src/BottomSheetNativeComponent.d.ts.map +1 -1
- package/lib/typescript/src/BottomSheetProvider.d.ts +1 -0
- package/lib/typescript/src/BottomSheetProvider.d.ts.map +1 -1
- package/lib/typescript/src/ModalBottomSheet.d.ts +2 -0
- package/lib/typescript/src/ModalBottomSheet.d.ts.map +1 -1
- package/lib/typescript/src/bottomSheetUtils.d.ts +3 -0
- package/lib/typescript/src/bottomSheetUtils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/BottomSheet.tsx +22 -0
- package/src/BottomSheetNativeComponent.ts +1 -0
- package/src/BottomSheetProvider.tsx +1 -0
- package/src/ModalBottomSheet.tsx +2 -0
- package/src/bottomSheetUtils.ts +3 -0
|
@@ -54,6 +54,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
|
|
|
54
54
|
updateInteractionState()
|
|
55
55
|
updateScrim()
|
|
56
56
|
}
|
|
57
|
+
var disableScrollableNegotiation: Boolean = false
|
|
57
58
|
private var pendingIndex: Int? = null
|
|
58
59
|
private var hasLaidOut = false
|
|
59
60
|
private var isPanning = false
|
|
@@ -279,8 +280,14 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
|
|
|
279
280
|
emitPosition()
|
|
280
281
|
snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = shouldEmitSettle)
|
|
281
282
|
} else {
|
|
282
|
-
|
|
283
|
-
|
|
283
|
+
val targetTy = translationY(targetIndex)
|
|
284
|
+
val currentTy = sheetContainer.translationY
|
|
285
|
+
if (abs(targetTy - currentTy) <= 0.5f) {
|
|
286
|
+
sheetContainer.translationY = targetTy
|
|
287
|
+
emitPosition()
|
|
288
|
+
} else {
|
|
289
|
+
snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = false)
|
|
290
|
+
}
|
|
284
291
|
}
|
|
285
292
|
}
|
|
286
293
|
}
|
|
@@ -475,6 +482,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
|
|
|
475
482
|
val dy = y - initialTouchY
|
|
476
483
|
|
|
477
484
|
if (abs(dy) > touchSlop && abs(dy) > abs(dx) && draggableMinTy < draggableMaxTy) {
|
|
485
|
+
if (disableScrollableNegotiation && findScrollableAtTouch() != null) {
|
|
486
|
+
return false
|
|
487
|
+
}
|
|
478
488
|
if (!isAtMaxDraggable) {
|
|
479
489
|
lastTouchY = y
|
|
480
490
|
requestDisallowInterceptTouchEvent(false)
|
|
@@ -596,29 +606,43 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
|
|
|
596
606
|
// could never collapse by dragging down when a ScrollView is at the top.
|
|
597
607
|
|
|
598
608
|
private fun isScrollViewAtTop(): Boolean {
|
|
599
|
-
val scrollView =
|
|
600
|
-
if (!isTouchInsideView(scrollView)) return true
|
|
609
|
+
val scrollView = findScrollableAtTouch() ?: return true
|
|
601
610
|
val inverted = isViewInverted(scrollView)
|
|
602
611
|
return if (inverted) !scrollView.canScrollVertically(1) else !scrollView.canScrollVertically(-1)
|
|
603
612
|
}
|
|
604
613
|
|
|
605
|
-
private fun
|
|
606
|
-
val
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
614
|
+
private fun findScrollableAtTouch(): View? {
|
|
615
|
+
val containerX = initialTouchX - sheetContainer.left - sheetContainer.translationX
|
|
616
|
+
val containerY = initialTouchY - sheetContainer.top - sheetContainer.translationY
|
|
617
|
+
if (
|
|
618
|
+
containerX < 0f ||
|
|
619
|
+
containerX >= sheetContainer.width ||
|
|
620
|
+
containerY < 0f ||
|
|
621
|
+
containerY >= sheetContainer.height
|
|
622
|
+
) {
|
|
623
|
+
return null
|
|
624
|
+
}
|
|
625
|
+
return findScrollableAtPoint(sheetContainer, containerX, containerY)
|
|
613
626
|
}
|
|
614
627
|
|
|
615
|
-
private fun
|
|
616
|
-
if (view.
|
|
628
|
+
private fun findScrollableAtPoint(view: View, x: Float, y: Float): View? {
|
|
629
|
+
if (!view.isShown) return null
|
|
630
|
+
|
|
617
631
|
if (view is ViewGroup) {
|
|
618
|
-
for (i in
|
|
619
|
-
|
|
632
|
+
for (i in view.childCount - 1 downTo 0) {
|
|
633
|
+
val child = view.getChildAt(i)
|
|
634
|
+
val childX = x - child.left - child.translationX
|
|
635
|
+
val childY = y - child.top - child.translationY
|
|
636
|
+
if (childX < 0f || childX >= child.width || childY < 0f || childY >= child.height) {
|
|
637
|
+
continue
|
|
638
|
+
}
|
|
639
|
+
findScrollableAtPoint(child, childX, childY)?.let { return it }
|
|
620
640
|
}
|
|
621
641
|
}
|
|
642
|
+
|
|
643
|
+
if (view.canScrollVertically(1) || view.canScrollVertically(-1)) {
|
|
644
|
+
return view
|
|
645
|
+
}
|
|
622
646
|
return null
|
|
623
647
|
}
|
|
624
648
|
|
package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetViewManager.kt
CHANGED
|
@@ -131,6 +131,11 @@ class BottomSheetViewManager :
|
|
|
131
131
|
view.modal = modal
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
+
@ReactProp(name = "disableScrollableNegotiation")
|
|
135
|
+
override fun setDisableScrollableNegotiation(view: BottomSheetView, value: Boolean) {
|
|
136
|
+
view.disableScrollableNegotiation = value
|
|
137
|
+
}
|
|
138
|
+
|
|
134
139
|
@ReactProp(name = "scrimColor", customType = "Color")
|
|
135
140
|
override fun setScrimColor(view: BottomSheetView, scrimColor: Int?) {
|
|
136
141
|
view.setScrimColor(scrimColor)
|
|
@@ -76,6 +76,10 @@ using namespace facebook::react;
|
|
|
76
76
|
_sheetView.modal = newViewProps.modal;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
if (newViewProps.disableScrollableNegotiation != oldViewProps.disableScrollableNegotiation) {
|
|
80
|
+
_sheetView.disableScrollableNegotiation = newViewProps.disableScrollableNegotiation;
|
|
81
|
+
}
|
|
82
|
+
|
|
79
83
|
if (newViewProps.scrimColor != oldViewProps.scrimColor) {
|
|
80
84
|
[_sheetView setScrimColor:RCTUIColorFromSharedColor(newViewProps.scrimColor)];
|
|
81
85
|
}
|
|
@@ -15,6 +15,7 @@ NS_ASSUME_NONNULL_BEGIN
|
|
|
15
15
|
@property (nonatomic, weak, nullable) id<BottomSheetContentViewDelegate> delegate;
|
|
16
16
|
@property (nonatomic) BOOL animateIn;
|
|
17
17
|
@property (nonatomic) BOOL modal;
|
|
18
|
+
@property (nonatomic) BOOL disableScrollableNegotiation;
|
|
18
19
|
@property (nonatomic, readonly) UIView *sheetContainer;
|
|
19
20
|
|
|
20
21
|
- (void)setDetents:(NSArray<NSDictionary *> *)raw;
|
|
@@ -40,6 +40,16 @@
|
|
|
40
40
|
return _impl.sheetContainer;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
- (BOOL)disableScrollableNegotiation
|
|
44
|
+
{
|
|
45
|
+
return _impl.disableScrollableNegotiation;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
- (void)setDisableScrollableNegotiation:(BOOL)disableScrollableNegotiation
|
|
49
|
+
{
|
|
50
|
+
_impl.disableScrollableNegotiation = disableScrollableNegotiation;
|
|
51
|
+
}
|
|
52
|
+
|
|
43
53
|
- (BOOL)modal
|
|
44
54
|
{
|
|
45
55
|
return _impl.modal;
|
|
@@ -34,6 +34,7 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
34
34
|
public var maxDetentHeight: CGFloat = .nan {
|
|
35
35
|
didSet { refreshDetentsFromLayout() }
|
|
36
36
|
}
|
|
37
|
+
public var disableScrollableNegotiation: Bool = false
|
|
37
38
|
|
|
38
39
|
private var rawDetentSpecs: [RawDetentSpec] = []
|
|
39
40
|
private var detentSpecs: [DetentSpec] = [] {
|
|
@@ -183,32 +184,6 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
183
184
|
return RawDetentSpec(value: CGFloat(value), kind: kind, programmatic: programmatic)
|
|
184
185
|
}
|
|
185
186
|
refreshDetentsFromLayout()
|
|
186
|
-
guard bounds.width > 0, bounds.height > 0, !detentSpecs.isEmpty else {
|
|
187
|
-
return
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
if hasLaidOut && !isPanning {
|
|
191
|
-
targetIndex = max(0, min(detentSpecs.count - 1, targetIndex))
|
|
192
|
-
layoutIfNeeded()
|
|
193
|
-
|
|
194
|
-
if let animator = activeAnimator {
|
|
195
|
-
stopDisplayLink()
|
|
196
|
-
let visualTy = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
|
|
197
|
-
let shouldEmitSettle = activeAnimatorEmitsSettle
|
|
198
|
-
animator.stopAnimation(true)
|
|
199
|
-
activeAnimator = nil
|
|
200
|
-
activeAnimatorEmitsSettle = false
|
|
201
|
-
sheetContainer.transform = CGAffineTransform(
|
|
202
|
-
translationX: 0,
|
|
203
|
-
y: min(max(visualTy, 0), maximumResolvedDetentHeight ?? visualTy)
|
|
204
|
-
)
|
|
205
|
-
emitPosition()
|
|
206
|
-
snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: shouldEmitSettle)
|
|
207
|
-
} else {
|
|
208
|
-
sheetContainer.transform = CGAffineTransform(translationX: 0, y: translationY(for: targetIndex))
|
|
209
|
-
emitPosition()
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
187
|
}
|
|
213
188
|
|
|
214
189
|
public func setDetentIndex(_ newIndex: Int) {
|
|
@@ -475,18 +450,6 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
475
450
|
return scrollView.alwaysBounceVertical || scrollView.contentSize.height > visibleHeight
|
|
476
451
|
}
|
|
477
452
|
|
|
478
|
-
private func firstScrollView(in view: UIView) -> UIScrollView? {
|
|
479
|
-
for subview in view.subviews {
|
|
480
|
-
if let scrollView = subview as? UIScrollView, isVerticallyScrollable(scrollView) {
|
|
481
|
-
return scrollView
|
|
482
|
-
}
|
|
483
|
-
if let found = firstScrollView(in: subview) {
|
|
484
|
-
return found
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
return nil
|
|
488
|
-
}
|
|
489
|
-
|
|
490
453
|
private func isViewInverted(_ view: UIView) -> Bool {
|
|
491
454
|
var current: UIView? = view
|
|
492
455
|
while let v = current, v !== sheetContainer {
|
|
@@ -496,6 +459,22 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
496
459
|
return false
|
|
497
460
|
}
|
|
498
461
|
|
|
462
|
+
private func scrollView(containing location: CGPoint, in view: UIView) -> UIScrollView? {
|
|
463
|
+
for subview in view.subviews.reversed() {
|
|
464
|
+
let locationInSubview = view.convert(location, to: subview)
|
|
465
|
+
guard subview.bounds.contains(locationInSubview) else { continue }
|
|
466
|
+
|
|
467
|
+
if let found = scrollView(containing: locationInSubview, in: subview) {
|
|
468
|
+
return found
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
if let scrollView = subview as? UIScrollView, isVerticallyScrollable(scrollView) {
|
|
472
|
+
return scrollView
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
return nil
|
|
476
|
+
}
|
|
477
|
+
|
|
499
478
|
public override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
|
|
500
479
|
guard gestureRecognizer === panGesture else { return true }
|
|
501
480
|
|
|
@@ -505,6 +484,13 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
505
484
|
let draggable = detentSpecs.enumerated().filter { !$0.element.programmatic }
|
|
506
485
|
guard draggable.count > 1 else { return false }
|
|
507
486
|
|
|
487
|
+
if disableScrollableNegotiation {
|
|
488
|
+
let locationInContainer = panGesture.location(in: sheetContainer)
|
|
489
|
+
if scrollView(containing: locationInContainer, in: sheetContainer) != nil {
|
|
490
|
+
return false
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
|
|
508
494
|
let maxDraggableIndex = draggable.last?.offset ?? 0
|
|
509
495
|
// Below max: allow drag in either direction to reach other detents.
|
|
510
496
|
guard targetIndex >= maxDraggableIndex else { return true }
|
|
@@ -514,9 +500,10 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
514
500
|
return false
|
|
515
501
|
}
|
|
516
502
|
|
|
517
|
-
|
|
518
|
-
let
|
|
519
|
-
|
|
503
|
+
let locationInContainer = panGesture.location(in: sheetContainer)
|
|
504
|
+
guard let scrollView = scrollView(containing: locationInContainer, in: sheetContainer) else {
|
|
505
|
+
return true
|
|
506
|
+
}
|
|
520
507
|
let inverted = isViewInverted(scrollView)
|
|
521
508
|
if inverted {
|
|
522
509
|
let maxOffsetY = scrollView.contentSize.height - scrollView.bounds.height + scrollView.adjustedContentInset.bottom
|
|
@@ -582,8 +569,14 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
582
569
|
emitPosition()
|
|
583
570
|
snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: shouldEmitSettle)
|
|
584
571
|
} else {
|
|
585
|
-
|
|
586
|
-
|
|
572
|
+
let targetTy = translationY(for: targetIndex)
|
|
573
|
+
let currentTy = currentTranslationY
|
|
574
|
+
if abs(targetTy - currentTy) <= 0.5 {
|
|
575
|
+
sheetContainer.transform = CGAffineTransform(translationX: 0, y: targetTy)
|
|
576
|
+
emitPosition()
|
|
577
|
+
} else {
|
|
578
|
+
snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: false)
|
|
579
|
+
}
|
|
587
580
|
}
|
|
588
581
|
}
|
|
589
582
|
}
|
|
@@ -6,6 +6,12 @@ import BottomSheetNativeComponent from './BottomSheetNativeComponent';
|
|
|
6
6
|
import { Portal } from "./BottomSheetProvider.js";
|
|
7
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
export { programmatic } from "./bottomSheetUtils.js";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Props for the inline bottom-sheet component.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/** Native bottom sheet that renders inline within the current screen layout. */
|
|
9
15
|
export const BottomSheet = ({
|
|
10
16
|
children,
|
|
11
17
|
style,
|
|
@@ -16,6 +22,7 @@ export const BottomSheet = ({
|
|
|
16
22
|
onSettle,
|
|
17
23
|
onPositionChange,
|
|
18
24
|
modal = false,
|
|
25
|
+
disableScrollableNegotiation = false,
|
|
19
26
|
scrimColor
|
|
20
27
|
}) => {
|
|
21
28
|
const {
|
|
@@ -75,6 +82,7 @@ export const BottomSheet = ({
|
|
|
75
82
|
index: index,
|
|
76
83
|
animateIn: animateIn,
|
|
77
84
|
modal: modal,
|
|
85
|
+
disableScrollableNegotiation: disableScrollableNegotiation,
|
|
78
86
|
scrimColor: scrimColor,
|
|
79
87
|
onIndexChange: handleIndexChange,
|
|
80
88
|
onSettle: handleSettle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","scrimColor","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","handleIndexChange","event","nativeEvent","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":";;AAEA,SAASA,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,cAAc;AACpE,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,OAAOC,0BAA0B,MAAM,8BAA8B;AACrE,SAASC,MAAM,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,SAASC,YAAY,QAAQ,uBAAoB;
|
|
1
|
+
{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","disableScrollableNegotiation","scrimColor","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","handleIndexChange","event","nativeEvent","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,6 +17,7 @@ export interface NativeProps extends ViewProps {
|
|
|
17
17
|
index: CodegenTypes.Int32;
|
|
18
18
|
animateIn: boolean;
|
|
19
19
|
modal: boolean;
|
|
20
|
+
disableScrollableNegotiation?: boolean;
|
|
20
21
|
scrimColor?: ColorValue;
|
|
21
22
|
onIndexChange?: CodegenTypes.DirectEventHandler<
|
|
22
23
|
Readonly<{ index: CodegenTypes.Int32 }>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","useEffect","useId","useReducer","useState","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","PortalContext","PortalHost","context","forceRender","x","subscribe","Array","from","getPortals","entries","map","key","element","style","absoluteFill","pointerEvents","children","BottomSheetProvider","portals","Map","subscribers","Set","notify","forEach","subscriber","addPortal","set","removePortal","delete","callback","add","Provider","value","Portal","Error","id"],"sourceRoot":"../../src","sources":["BottomSheetProvider.tsx"],"mappings":";;AAAA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,QAAQ,QACH,OAAO;AAEd,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAShD,MAAMC,aAAa,gBAAGZ,aAAa,CAA2B,IAAI,CAAC;AAEnE,MAAMa,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAMC,OAAO,GAAGb,UAAU,CAACW,aAAa,CAAE;EAC1C,MAAM,GAAGG,WAAW,CAAC,GAAGX,UAAU,CAAEY,CAAS,IAAKA,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;EAC3Dd,SAAS,CAAC,MAAM;IACd,OAAOY,OAAO,CAACG,SAAS,CAACF,WAAW,CAAC;EACvC,CAAC,EAAE,CAACD,OAAO,CAAC,CAAC;EAEb,OAAOI,KAAK,CAACC,IAAI,CAACL,OAAO,CAACM,UAAU,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC,CAACC,GAAG,EAAEC,OAAO,CAAC,kBACnEf,IAAA,CAACF,IAAI;IAAWkB,KAAK,EAAEnB,UAAU,CAACoB,YAAa;IAACC,aAAa,EAAC,UAAU;IAAAC,QAAA,EACrEJ;EAAO,GADCD,GAEL,CACP,CAAC;AACJ,CAAC;
|
|
1
|
+
{"version":3,"names":["createContext","useContext","useEffect","useId","useReducer","useState","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","PortalContext","PortalHost","context","forceRender","x","subscribe","Array","from","getPortals","entries","map","key","element","style","absoluteFill","pointerEvents","children","BottomSheetProvider","portals","Map","subscribers","Set","notify","forEach","subscriber","addPortal","set","removePortal","delete","callback","add","Provider","value","Portal","Error","id"],"sourceRoot":"../../src","sources":["BottomSheetProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { BottomSheet } from "./BottomSheet.js";
|
|
4
|
+
|
|
5
|
+
/** Props for the modal bottom-sheet variant rendered through the provider portal. */
|
|
4
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
/** Bottom sheet presented above the current UI with a scrim. */
|
|
5
8
|
export const ModalBottomSheet = props => /*#__PURE__*/_jsx(BottomSheet, {
|
|
6
9
|
...props,
|
|
7
10
|
modal: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BottomSheet","jsx","_jsx","ModalBottomSheet","props","modal"],"sourceRoot":"../../src","sources":["ModalBottomSheet.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAA+B,kBAAe;
|
|
1
|
+
{"version":3,"names":["BottomSheet","jsx","_jsx","ModalBottomSheet","props","modal"],"sourceRoot":"../../src","sources":["ModalBottomSheet.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAA+B,kBAAe;;AAElE;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIA;AACA,OAAO,MAAMC,gBAAgB,GAAIC,KAA4B,iBAC3DF,IAAA,CAACF,WAAW;EAAA,GAAKI,KAAK;EAAEC,KAAK;AAAA,CAAE,CAChC","ignoreList":[]}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
/** A detent value in points, or `'content'` to size to the measured content height. */
|
|
4
|
+
|
|
5
|
+
/** A draggable detent or an object form that can mark a detent as programmatic-only. */
|
|
6
|
+
|
|
7
|
+
/** Marks a detent as reachable only via controlled `index` updates, not dragging. */
|
|
3
8
|
export const programmatic = value => ({
|
|
4
9
|
value,
|
|
5
10
|
programmatic: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["programmatic","value","detentValue","detent","isDetentProgrammatic","VELOCITY_THRESHOLD","findSnapTarget","currentTranslate","velocityY","currentIndex","allPositions","draggablePositions","filter","position","isDraggable","effectivePositions","length","targetIndex","minDistance","Infinity","distance","Math","abs","translateY","index","lowerPosition","sort","a","b","undefined","upperPosition","resolveDetent","contentHeight","maxHeight","detentValueInput","min","Error","clampIndex","detentCount","max"],"sourceRoot":"../../src","sources":["bottomSheetUtils.ts"],"mappings":";;
|
|
1
|
+
{"version":3,"names":["programmatic","value","detentValue","detent","isDetentProgrammatic","VELOCITY_THRESHOLD","findSnapTarget","currentTranslate","velocityY","currentIndex","allPositions","draggablePositions","filter","position","isDraggable","effectivePositions","length","targetIndex","minDistance","Infinity","distance","Math","abs","translateY","index","lowerPosition","sort","a","b","undefined","upperPosition","resolveDetent","contentHeight","maxHeight","detentValueInput","min","Error","clampIndex","detentCount","max"],"sourceRoot":"../../src","sources":["bottomSheetUtils.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,17 +3,37 @@ import type { StyleProp, ViewStyle } from 'react-native';
|
|
|
3
3
|
import { type Detent } from './bottomSheetUtils';
|
|
4
4
|
export type { Detent, DetentValue } from './bottomSheetUtils';
|
|
5
5
|
export { programmatic } from './bottomSheetUtils';
|
|
6
|
+
/**
|
|
7
|
+
* Props for the inline bottom-sheet component.
|
|
8
|
+
*/
|
|
6
9
|
export interface BottomSheetProps {
|
|
10
|
+
/** Sheet contents, including any background or scrollable content. */
|
|
7
11
|
children: ReactNode;
|
|
12
|
+
/** Additional style applied to the native sheet host view. */
|
|
8
13
|
style?: StyleProp<ViewStyle>;
|
|
14
|
+
/** Snap points for the sheet. Defaults to `[0, 'content']`. */
|
|
9
15
|
detents?: Detent[];
|
|
16
|
+
/** Zero-based index into `detents`. */
|
|
10
17
|
index: number;
|
|
18
|
+
/** Whether the sheet should animate in on first layout. */
|
|
11
19
|
animateIn?: boolean;
|
|
20
|
+
/** Called after a user-driven snap changes the active index. */
|
|
12
21
|
onIndexChange?: (index: number) => void;
|
|
22
|
+
/** Called when a snap animation settles, including programmatic changes. */
|
|
13
23
|
onSettle?: (index: number) => void;
|
|
24
|
+
/** Called as the sheet position changes, in points from the bottom. */
|
|
14
25
|
onPositionChange?: (position: number) => void;
|
|
26
|
+
/** Internal flag used by `ModalBottomSheet`. */
|
|
15
27
|
modal?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Escape hatch that disables sheet/list gesture negotiation.
|
|
30
|
+
* If a gesture starts inside a nested scrollable, that scrollable keeps it
|
|
31
|
+
* even when it cannot scroll any further.
|
|
32
|
+
*/
|
|
33
|
+
disableScrollableNegotiation?: boolean;
|
|
34
|
+
/** Scrim color used by `ModalBottomSheet`. */
|
|
16
35
|
scrimColor?: string;
|
|
17
36
|
}
|
|
18
|
-
|
|
37
|
+
/** Native bottom sheet that renders inline within the current screen layout. */
|
|
38
|
+
export declare const BottomSheet: ({ children, style, detents, index, animateIn, onIndexChange, onSettle, onPositionChange, modal, disableScrollableNegotiation, scrimColor, }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
39
|
//# sourceMappingURL=BottomSheet.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,GAAI,6IAYzB,gBAAgB,4CAwFlB,CAAC"}
|
|
@@ -10,6 +10,7 @@ export interface NativeProps extends ViewProps {
|
|
|
10
10
|
index: CodegenTypes.Int32;
|
|
11
11
|
animateIn: boolean;
|
|
12
12
|
modal: boolean;
|
|
13
|
+
disableScrollableNegotiation?: boolean;
|
|
13
14
|
scrimColor?: ColorValue;
|
|
14
15
|
onIndexChange?: CodegenTypes.DirectEventHandler<Readonly<{
|
|
15
16
|
index: CodegenTypes.Int32;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,eAAe,EAAE,YAAY,CAAC,MAAM,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC7C,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC,kBAAkB,CACxC,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAChD,QAAQ,CAAC;QAAE,QAAQ,EAAE,YAAY,CAAC,MAAM,CAAA;KAAE,CAAC,CAC5C,CAAC;CACH;;AAED,wBAAsE"}
|
|
1
|
+
{"version":3,"file":"BottomSheetNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,eAAe,EAAE,YAAY,CAAC,MAAM,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC7C,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC,kBAAkB,CACxC,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAChD,QAAQ,CAAC;QAAE,QAAQ,EAAE,YAAY,CAAC,MAAM,CAAA;KAAE,CAAC,CAC5C,CAAC;CACH;;AAED,wBAAsE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvC,eAAO,MAAM,mBAAmB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAgCxE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,SAkB3D,CAAC"}
|
|
1
|
+
{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvC,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAgCxE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,SAkB3D,CAAC"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { type BottomSheetProps } from './BottomSheet';
|
|
2
|
+
/** Props for the modal bottom-sheet variant rendered through the provider portal. */
|
|
2
3
|
export interface ModalBottomSheetProps extends Omit<BottomSheetProps, 'modal'> {
|
|
3
4
|
}
|
|
5
|
+
/** Bottom sheet presented above the current UI with a scrim. */
|
|
4
6
|
export declare const ModalBottomSheet: (props: ModalBottomSheetProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
7
|
//# sourceMappingURL=ModalBottomSheet.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ModalBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;CAAG;AAE5C,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAE5D,CAAC"}
|
|
1
|
+
{"version":3,"file":"ModalBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ModalBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,qFAAqF;AACrF,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;CAAG;AAE5C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAE5D,CAAC"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
/** A detent value in points, or `'content'` to size to the measured content height. */
|
|
1
2
|
export type DetentValue = number | 'content';
|
|
3
|
+
/** A draggable detent or an object form that can mark a detent as programmatic-only. */
|
|
2
4
|
export type Detent = DetentValue | {
|
|
3
5
|
value: DetentValue;
|
|
4
6
|
programmatic?: boolean;
|
|
5
7
|
};
|
|
8
|
+
/** Marks a detent as reachable only via controlled `index` updates, not dragging. */
|
|
6
9
|
export declare const programmatic: (value: DetentValue) => Detent;
|
|
7
10
|
export declare const detentValue: (detent: Detent) => DetentValue;
|
|
8
11
|
export declare const isDetentProgrammatic: (detent: Detent) => boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottomSheetUtils.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetUtils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7C,MAAM,MAAM,MAAM,GACd,WAAW,GACX;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEnD,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,MAGhD,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,KAAG,WAG5C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,KAAG,OAKrD,CAAC;AAIF,eAAO,MAAM,cAAc,GACzB,kBAAkB,MAAM,EACxB,WAAW,MAAM,EACjB,cAAc,MAAM,EACpB,cAAc;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,EAAE,WAiC5E,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,eAAe,MAAM,EACrB,WAAW,MAAM,WAQlB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,aAAa,MAAM,WAG5D,CAAC"}
|
|
1
|
+
{"version":3,"file":"bottomSheetUtils.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetUtils.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7C,wFAAwF;AACxF,MAAM,MAAM,MAAM,GACd,WAAW,GACX;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEnD,qFAAqF;AACrF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,MAGhD,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,KAAG,WAG5C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,KAAG,OAKrD,CAAC;AAIF,eAAO,MAAM,cAAc,GACzB,kBAAkB,MAAM,EACxB,WAAW,MAAM,EACjB,cAAc,MAAM,EACpB,cAAc;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,EAAE,WAiC5E,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,eAAe,MAAM,EACrB,WAAW,MAAM,WAQlB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,aAAa,MAAM,WAG5D,CAAC"}
|
package/package.json
CHANGED
package/src/BottomSheet.tsx
CHANGED
|
@@ -9,19 +9,39 @@ import { type Detent } from './bottomSheetUtils';
|
|
|
9
9
|
export type { Detent, DetentValue } from './bottomSheetUtils';
|
|
10
10
|
export { programmatic } from './bottomSheetUtils';
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Props for the inline bottom-sheet component.
|
|
14
|
+
*/
|
|
12
15
|
export interface BottomSheetProps {
|
|
16
|
+
/** Sheet contents, including any background or scrollable content. */
|
|
13
17
|
children: ReactNode;
|
|
18
|
+
/** Additional style applied to the native sheet host view. */
|
|
14
19
|
style?: StyleProp<ViewStyle>;
|
|
20
|
+
/** Snap points for the sheet. Defaults to `[0, 'content']`. */
|
|
15
21
|
detents?: Detent[];
|
|
22
|
+
/** Zero-based index into `detents`. */
|
|
16
23
|
index: number;
|
|
24
|
+
/** Whether the sheet should animate in on first layout. */
|
|
17
25
|
animateIn?: boolean;
|
|
26
|
+
/** Called after a user-driven snap changes the active index. */
|
|
18
27
|
onIndexChange?: (index: number) => void;
|
|
28
|
+
/** Called when a snap animation settles, including programmatic changes. */
|
|
19
29
|
onSettle?: (index: number) => void;
|
|
30
|
+
/** Called as the sheet position changes, in points from the bottom. */
|
|
20
31
|
onPositionChange?: (position: number) => void;
|
|
32
|
+
/** Internal flag used by `ModalBottomSheet`. */
|
|
21
33
|
modal?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Escape hatch that disables sheet/list gesture negotiation.
|
|
36
|
+
* If a gesture starts inside a nested scrollable, that scrollable keeps it
|
|
37
|
+
* even when it cannot scroll any further.
|
|
38
|
+
*/
|
|
39
|
+
disableScrollableNegotiation?: boolean;
|
|
40
|
+
/** Scrim color used by `ModalBottomSheet`. */
|
|
22
41
|
scrimColor?: string;
|
|
23
42
|
}
|
|
24
43
|
|
|
44
|
+
/** Native bottom sheet that renders inline within the current screen layout. */
|
|
25
45
|
export const BottomSheet = ({
|
|
26
46
|
children,
|
|
27
47
|
style,
|
|
@@ -32,6 +52,7 @@ export const BottomSheet = ({
|
|
|
32
52
|
onSettle,
|
|
33
53
|
onPositionChange,
|
|
34
54
|
modal = false,
|
|
55
|
+
disableScrollableNegotiation = false,
|
|
35
56
|
scrimColor,
|
|
36
57
|
}: BottomSheetProps) => {
|
|
37
58
|
const { height: windowHeight } = useWindowDimensions();
|
|
@@ -101,6 +122,7 @@ export const BottomSheet = ({
|
|
|
101
122
|
index={index}
|
|
102
123
|
animateIn={animateIn}
|
|
103
124
|
modal={modal}
|
|
125
|
+
disableScrollableNegotiation={disableScrollableNegotiation}
|
|
104
126
|
scrimColor={scrimColor}
|
|
105
127
|
onIndexChange={handleIndexChange}
|
|
106
128
|
onSettle={handleSettle}
|
|
@@ -17,6 +17,7 @@ export interface NativeProps extends ViewProps {
|
|
|
17
17
|
index: CodegenTypes.Int32;
|
|
18
18
|
animateIn: boolean;
|
|
19
19
|
modal: boolean;
|
|
20
|
+
disableScrollableNegotiation?: boolean;
|
|
20
21
|
scrimColor?: ColorValue;
|
|
21
22
|
onIndexChange?: CodegenTypes.DirectEventHandler<
|
|
22
23
|
Readonly<{ index: CodegenTypes.Int32 }>
|
|
@@ -32,6 +32,7 @@ const PortalHost = () => {
|
|
|
32
32
|
));
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
+
/** Provides the portal host required for modal bottom sheets. */
|
|
35
36
|
export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
|
|
36
37
|
const [context] = useState<PortalContextType>(() => {
|
|
37
38
|
const portals = new Map<string, ReactNode>();
|
package/src/ModalBottomSheet.tsx
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { BottomSheet, type BottomSheetProps } from './BottomSheet';
|
|
2
2
|
|
|
3
|
+
/** Props for the modal bottom-sheet variant rendered through the provider portal. */
|
|
3
4
|
export interface ModalBottomSheetProps
|
|
4
5
|
extends Omit<BottomSheetProps, 'modal'> {}
|
|
5
6
|
|
|
7
|
+
/** Bottom sheet presented above the current UI with a scrim. */
|
|
6
8
|
export const ModalBottomSheet = (props: ModalBottomSheetProps) => (
|
|
7
9
|
<BottomSheet {...props} modal />
|
|
8
10
|
);
|
package/src/bottomSheetUtils.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
/** A detent value in points, or `'content'` to size to the measured content height. */
|
|
1
2
|
export type DetentValue = number | 'content';
|
|
2
3
|
|
|
4
|
+
/** A draggable detent or an object form that can mark a detent as programmatic-only. */
|
|
3
5
|
export type Detent =
|
|
4
6
|
| DetentValue
|
|
5
7
|
| { value: DetentValue; programmatic?: boolean };
|
|
6
8
|
|
|
9
|
+
/** Marks a detent as reachable only via controlled `index` updates, not dragging. */
|
|
7
10
|
export const programmatic = (value: DetentValue): Detent => ({
|
|
8
11
|
value,
|
|
9
12
|
programmatic: true,
|