react-native-nitro-modal 0.1.4 → 0.2.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 +19 -7
- package/android/src/main/java/com/margelo/nitro/nitromodal/BottomSheetPresenter.kt +72 -21
- package/android/src/main/java/com/margelo/nitro/nitromodal/HybridNitroModal.kt +17 -3
- package/android/src/main/java/com/margelo/nitro/nitromodal/ModalPresenter.kt +121 -12
- package/android/src/main/java/com/margelo/nitro/nitromodal/PopupPresenter.kt +92 -31
- package/lib/module/NitroModal.js +1 -2
- package/lib/module/NitroModal.js.map +1 -1
- package/lib/module/NitroModalView.js +4 -3
- package/lib/module/NitroModalView.js.map +1 -1
- package/lib/module/NitroModalView.native.js +3 -0
- package/lib/module/NitroModalView.native.js.map +1 -1
- package/lib/module/NitroModalView.web.js +129 -0
- package/lib/module/NitroModalView.web.js.map +1 -0
- package/lib/module/web/AnimatedValue.js +123 -0
- package/lib/module/web/AnimatedValue.js.map +1 -0
- package/lib/module/web/ModalConfig.js +26 -0
- package/lib/module/web/ModalConfig.js.map +1 -0
- package/lib/module/web/ModalController.js +279 -0
- package/lib/module/web/ModalController.js.map +1 -0
- package/lib/module/web/ModalPresenter.js +245 -0
- package/lib/module/web/ModalPresenter.js.map +1 -0
- package/lib/module/web/PopupPresenter.js +117 -0
- package/lib/module/web/PopupPresenter.js.map +1 -0
- package/lib/module/web/SheetPresenter.js +469 -0
- package/lib/module/web/SheetPresenter.js.map +1 -0
- package/lib/module/web/dom.js +125 -0
- package/lib/module/web/dom.js.map +1 -0
- package/lib/typescript/src/NitroModal.d.ts +2 -2
- package/lib/typescript/src/NitroModal.d.ts.map +1 -1
- package/lib/typescript/src/NitroModalView.d.ts +2 -1
- package/lib/typescript/src/NitroModalView.d.ts.map +1 -1
- package/lib/typescript/src/NitroModalView.native.d.ts +1 -0
- package/lib/typescript/src/NitroModalView.native.d.ts.map +1 -1
- package/lib/typescript/src/NitroModalView.web.d.ts +6 -0
- package/lib/typescript/src/NitroModalView.web.d.ts.map +1 -0
- package/lib/typescript/src/web/AnimatedValue.d.ts +48 -0
- package/lib/typescript/src/web/AnimatedValue.d.ts.map +1 -0
- package/lib/typescript/src/web/ModalConfig.d.ts +24 -0
- package/lib/typescript/src/web/ModalConfig.d.ts.map +1 -0
- package/lib/typescript/src/web/ModalController.d.ts +65 -0
- package/lib/typescript/src/web/ModalController.d.ts.map +1 -0
- package/lib/typescript/src/web/ModalPresenter.d.ts +98 -0
- package/lib/typescript/src/web/ModalPresenter.d.ts.map +1 -0
- package/lib/typescript/src/web/PopupPresenter.d.ts +20 -0
- package/lib/typescript/src/web/PopupPresenter.d.ts.map +1 -0
- package/lib/typescript/src/web/SheetPresenter.d.ts +65 -0
- package/lib/typescript/src/web/SheetPresenter.d.ts.map +1 -0
- package/lib/typescript/src/web/dom.d.ts +40 -0
- package/lib/typescript/src/web/dom.d.ts.map +1 -0
- package/package.json +3 -2
- package/src/NitroModal.tsx +3 -4
- package/src/NitroModalView.native.tsx +4 -0
- package/src/NitroModalView.tsx +9 -4
- package/src/NitroModalView.web.tsx +138 -0
- package/src/web/AnimatedValue.ts +189 -0
- package/src/web/ModalConfig.ts +57 -0
- package/src/web/ModalController.ts +305 -0
- package/src/web/ModalPresenter.ts +298 -0
- package/src/web/PopupPresenter.ts +129 -0
- package/src/web/SheetPresenter.ts +582 -0
- package/src/web/dom.ts +154 -0
|
@@ -3,18 +3,21 @@ package com.margelo.nitro.nitromodal
|
|
|
3
3
|
import android.app.Activity
|
|
4
4
|
import android.graphics.drawable.GradientDrawable
|
|
5
5
|
import android.view.Gravity
|
|
6
|
+
import android.view.View
|
|
6
7
|
import android.view.ViewGroup
|
|
7
8
|
import android.view.ViewOutlineProvider
|
|
8
9
|
import android.view.animation.AccelerateInterpolator
|
|
9
10
|
import android.view.animation.PathInterpolator
|
|
10
11
|
import android.widget.FrameLayout
|
|
12
|
+
import androidx.activity.BackEventCompat
|
|
11
13
|
import androidx.core.graphics.Insets
|
|
12
14
|
import com.facebook.react.uimanager.ThemedReactContext
|
|
13
15
|
|
|
14
16
|
/**
|
|
15
17
|
* `popup` mode: a centered card over the backdrop. Enter/exit are
|
|
16
18
|
* [android.view.ViewPropertyAnimator]s on hardware layers, so they run on the
|
|
17
|
-
* UI/render threads without touching JS.
|
|
19
|
+
* UI/render threads without touching JS. Each one starts from the current
|
|
20
|
+
* values, so a transition can be turned around mid-flight.
|
|
18
21
|
*/
|
|
19
22
|
internal class PopupPresenter(
|
|
20
23
|
activity: Activity,
|
|
@@ -25,8 +28,13 @@ internal class PopupPresenter(
|
|
|
25
28
|
) : ModalPresenter(activity, reactContext, contentRoot, config, listener) {
|
|
26
29
|
|
|
27
30
|
private val root = FrameLayout(activity)
|
|
31
|
+
|
|
32
|
+
/** Insets + margin; the backdrop sits outside it so it covers the whole window. */
|
|
33
|
+
private val cardFrame = FrameLayout(activity)
|
|
28
34
|
private val card = FrameLayout(activity)
|
|
29
35
|
private val cardBackground = GradientDrawable()
|
|
36
|
+
private var started = false
|
|
37
|
+
private var backPreview = false
|
|
30
38
|
|
|
31
39
|
override fun createLayout(): ViewGroup {
|
|
32
40
|
root.addView(backdrop, FrameLayout.LayoutParams(MATCH, MATCH))
|
|
@@ -34,55 +42,78 @@ internal class PopupPresenter(
|
|
|
34
42
|
card.outlineProvider = ViewOutlineProvider.BACKGROUND
|
|
35
43
|
card.clipToOutline = true
|
|
36
44
|
card.addView(contentRoot, FrameLayout.LayoutParams(MATCH, MATCH))
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
cardFrame.addView(card, FrameLayout.LayoutParams(0, 0, Gravity.CENTER))
|
|
46
|
+
cardFrame.addOnLayoutChangeListener { _, l, t, r, b, oldL, oldT, oldR, oldB ->
|
|
39
47
|
if (r - l != oldR - oldL || b - t != oldB - oldT) reportArea()
|
|
40
48
|
}
|
|
49
|
+
root.addView(cardFrame, FrameLayout.LayoutParams(MATCH, MATCH))
|
|
41
50
|
applyAppearance()
|
|
42
51
|
updateCardSize()
|
|
43
52
|
return root
|
|
44
53
|
}
|
|
45
54
|
|
|
55
|
+
/** One frame after show, so the card has its size before it scales in. */
|
|
56
|
+
private val firstEnter = Runnable {
|
|
57
|
+
if (config.popupAnimation == PopupAnimation.SCALE) {
|
|
58
|
+
card.scaleX = ENTER_SCALE
|
|
59
|
+
card.scaleY = ENTER_SCALE
|
|
60
|
+
}
|
|
61
|
+
runEnter()
|
|
62
|
+
}
|
|
63
|
+
|
|
46
64
|
override fun animateIn() {
|
|
65
|
+
if (started) return runEnter()
|
|
66
|
+
started = true
|
|
47
67
|
card.alpha = 0f
|
|
48
|
-
root.post
|
|
49
|
-
if (isDismissing) return@post
|
|
50
|
-
if (config.popupAnimation == PopupAnimation.NONE) {
|
|
51
|
-
backdrop.alpha = 1f
|
|
52
|
-
card.alpha = 1f
|
|
53
|
-
notifyPresented()
|
|
54
|
-
return@post
|
|
55
|
-
}
|
|
56
|
-
val scale = if (config.popupAnimation == PopupAnimation.SCALE) 0.9f else 1f
|
|
57
|
-
card.scaleX = scale
|
|
58
|
-
card.scaleY = scale
|
|
59
|
-
backdrop.animate().alpha(1f).setDuration(ENTER_DURATION).setInterpolator(EMPHASIZED_DECELERATE).start()
|
|
60
|
-
card.animate()
|
|
61
|
-
.alpha(1f).scaleX(1f).scaleY(1f)
|
|
62
|
-
.setDuration(ENTER_DURATION)
|
|
63
|
-
.setInterpolator(EMPHASIZED_DECELERATE)
|
|
64
|
-
.withLayer()
|
|
65
|
-
.withEndAction { notifyPresented() }
|
|
66
|
-
.start()
|
|
67
|
-
}
|
|
68
|
+
root.post(firstEnter)
|
|
68
69
|
}
|
|
69
70
|
|
|
70
|
-
override fun animateOut(onEnd: () -> Unit) {
|
|
71
|
+
override fun animateOut(fromBackGesture: Boolean, onEnd: () -> Unit) {
|
|
72
|
+
root.removeCallbacks(firstEnter)
|
|
73
|
+
backPreview = false
|
|
71
74
|
if (config.popupAnimation == PopupAnimation.NONE) {
|
|
72
75
|
onEnd()
|
|
73
76
|
return
|
|
74
77
|
}
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
// From wherever the enter or a back preview left the card.
|
|
79
|
+
val scale = card.scaleX * if (config.popupAnimation == PopupAnimation.SCALE) EXIT_SCALE else 1f
|
|
80
|
+
val duration = if (fromBackGesture) BACK_COMMIT_DURATION else EXIT_DURATION
|
|
81
|
+
backdrop.animate().alpha(0f).setDuration(duration).setInterpolator(ACCELERATE).start()
|
|
77
82
|
card.animate()
|
|
78
83
|
.alpha(0f).scaleX(scale).scaleY(scale)
|
|
79
|
-
.setDuration(
|
|
84
|
+
.setDuration(duration)
|
|
80
85
|
.setInterpolator(ACCELERATE)
|
|
81
86
|
.withLayer()
|
|
82
87
|
.withEndAction { onEnd() }
|
|
83
88
|
.start()
|
|
84
89
|
}
|
|
85
90
|
|
|
91
|
+
override fun onBackGestureStarted(event: BackEventCompat) {
|
|
92
|
+
if (config.popupAnimation == PopupAnimation.NONE) return
|
|
93
|
+
backPreview = true
|
|
94
|
+
card.animate().cancel()
|
|
95
|
+
card.setLayerType(View.LAYER_TYPE_HARDWARE, null)
|
|
96
|
+
onBackGestureProgressed(event)
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
override fun onBackGestureProgressed(event: BackEventCompat) {
|
|
100
|
+
if (!backPreview) return
|
|
101
|
+
val scale = 1f - (1f - BACK_MIN_SCALE) * BACK_PROGRESS.getInterpolation(event.progress)
|
|
102
|
+
card.scaleX = scale
|
|
103
|
+
card.scaleY = scale
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
override fun onBackGestureCancelled() {
|
|
107
|
+
if (!backPreview) return
|
|
108
|
+
backPreview = false
|
|
109
|
+
card.animate()
|
|
110
|
+
.scaleX(1f).scaleY(1f)
|
|
111
|
+
.setDuration(BACK_CANCEL_DURATION)
|
|
112
|
+
.setInterpolator(EMPHASIZED_DECELERATE)
|
|
113
|
+
.withEndAction { card.setLayerType(View.LAYER_TYPE_NONE, null) }
|
|
114
|
+
.start()
|
|
115
|
+
}
|
|
116
|
+
|
|
86
117
|
override fun onConfigChanged(previous: ModalConfig) {
|
|
87
118
|
applyAppearance()
|
|
88
119
|
onInsetsChanged()
|
|
@@ -90,7 +121,7 @@ internal class PopupPresenter(
|
|
|
90
121
|
|
|
91
122
|
override fun onInsetsChanged() {
|
|
92
123
|
val margin = dp(MARGIN_DP)
|
|
93
|
-
|
|
124
|
+
cardFrame.setPadding(
|
|
94
125
|
systemInsets.left + margin,
|
|
95
126
|
systemInsets.top + margin,
|
|
96
127
|
systemInsets.right + margin,
|
|
@@ -105,9 +136,29 @@ internal class PopupPresenter(
|
|
|
105
136
|
|
|
106
137
|
override fun onContentSizeChanged() = updateCardSize()
|
|
107
138
|
|
|
139
|
+
private fun runEnter() {
|
|
140
|
+
if (config.popupAnimation == PopupAnimation.NONE) {
|
|
141
|
+
backdrop.alpha = 1f
|
|
142
|
+
card.alpha = 1f
|
|
143
|
+
notifyPresented()
|
|
144
|
+
return
|
|
145
|
+
}
|
|
146
|
+
// Cancelling first restores the layer type a previous animation saved.
|
|
147
|
+
card.animate().cancel()
|
|
148
|
+
card.setLayerType(View.LAYER_TYPE_NONE, null)
|
|
149
|
+
backdrop.animate().alpha(1f).setDuration(ENTER_DURATION).setInterpolator(EMPHASIZED_DECELERATE).start()
|
|
150
|
+
card.animate()
|
|
151
|
+
.alpha(1f).scaleX(1f).scaleY(1f)
|
|
152
|
+
.setDuration(ENTER_DURATION)
|
|
153
|
+
.setInterpolator(EMPHASIZED_DECELERATE)
|
|
154
|
+
.withLayer()
|
|
155
|
+
.withEndAction { notifyPresented() }
|
|
156
|
+
.start()
|
|
157
|
+
}
|
|
158
|
+
|
|
108
159
|
private fun reportArea() {
|
|
109
|
-
val width =
|
|
110
|
-
val height =
|
|
160
|
+
val width = cardFrame.width - cardFrame.paddingLeft - cardFrame.paddingRight
|
|
161
|
+
val height = cardFrame.height - cardFrame.paddingTop - cardFrame.paddingBottom -
|
|
111
162
|
if (config.keyboardBehavior == KeyboardBehavior.RESIZE) keyboardOverlap else 0
|
|
112
163
|
reportContentArea(width, height)
|
|
113
164
|
}
|
|
@@ -134,7 +185,7 @@ internal class PopupPresenter(
|
|
|
134
185
|
card.translationY = 0f
|
|
135
186
|
return
|
|
136
187
|
}
|
|
137
|
-
val headroom = (card.top -
|
|
188
|
+
val headroom = (card.top - cardFrame.paddingTop).coerceAtLeast(0)
|
|
138
189
|
card.translationY = -(keyboardOverlap / 2).coerceAtMost(headroom).toFloat()
|
|
139
190
|
}
|
|
140
191
|
|
|
@@ -142,11 +193,21 @@ internal class PopupPresenter(
|
|
|
142
193
|
private const val MATCH = ViewGroup.LayoutParams.MATCH_PARENT
|
|
143
194
|
private const val MARGIN_DP = 16f
|
|
144
195
|
private const val DEFAULT_CORNER_RADIUS_DP = 16f
|
|
196
|
+
private const val ENTER_SCALE = 0.9f
|
|
197
|
+
private const val EXIT_SCALE = 0.95f
|
|
145
198
|
private const val ENTER_DURATION = 280L
|
|
146
199
|
private const val EXIT_DURATION = 180L
|
|
200
|
+
|
|
201
|
+
/** Predictive back: how far the card shrinks while the gesture runs. */
|
|
202
|
+
private const val BACK_MIN_SCALE = 0.9f
|
|
203
|
+
private const val BACK_COMMIT_DURATION = 150L
|
|
204
|
+
private const val BACK_CANCEL_DURATION = 200L
|
|
147
205
|
private val EMPHASIZED_DECELERATE = PathInterpolator(0.05f, 0.7f, 0.1f, 1f)
|
|
148
206
|
private val ACCELERATE = AccelerateInterpolator()
|
|
149
207
|
|
|
208
|
+
/** Material's predictive back progress curve. */
|
|
209
|
+
private val BACK_PROGRESS = PathInterpolator(0.1f, 0.1f, 0f, 1f)
|
|
210
|
+
|
|
150
211
|
/** Content area before the popup is on screen, in px. */
|
|
151
212
|
fun estimateContentArea(activity: Activity, width: Int, height: Int, insets: Insets): Pair<Int, Int> {
|
|
152
213
|
val margin = activity.dpToPx(MARGIN_DP).toInt() * 2
|
package/lib/module/NitroModal.js
CHANGED
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { processColor, StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
5
|
-
import { callback } from '
|
|
6
|
-
import { NitroModalView } from './NitroModalView';
|
|
5
|
+
import { callback, NitroModalView } from './NitroModalView';
|
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
7
|
const DEFAULT_DETENTS = ['fitContent'];
|
|
9
8
|
const BLACK = 0xff000000;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","processColor","StyleSheet","useWindowDimensions","View","callback","NitroModalView","jsx","_jsx","DEFAULT_DETENTS","BLACK","toNativeColor","color","undefined","processed","NitroModal","isOpen","mode","detents","initialDetentIndex","backdropColor","backdropOpacity","backdropBlur","dismissOnBackdropPress","dismissOnSwipe","dismissOnBackButton","showGrabber","cornerRadius","backgroundColor","keyboardBehavior","popupAnimation","contentContainerStyle","onPresent","onDismiss","onDetentChange","onBackdropPress","onBackButtonPress","children","testID","ref","isControlled","internalOpen","setInternalOpen","open","sessionActive","setSessionActive","prevOpen","setPrevOpen","renderContent","area","setArea","hybridRef","latest","current","nativeCallbacks","instance","reason","index","onContentAreaChange","next","width","height","present","console","warn","dismiss","snapToDetent","detentsKey","join","nativeDetents","Set","split","windowSize","contentArea","containerStyle","maxWidth","maxHeight","includes","style","styles","host","backdropBlurRadius","grabberVisible","contentBackgroundColor","collapsable","container","create","position","left","top"],"sourceRoot":"../../src","sources":["NitroModal.tsx"],"mappings":";;AAAA,SACEA,mBAAmB,EACnBC,eAAe,EACfC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGH,OAAO;AACd,SACEC,YAAY,EACZC,UAAU,EACVC,mBAAmB,EACnBC,IAAI,QAIC,cAAc;
|
|
1
|
+
{"version":3,"names":["useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","processColor","StyleSheet","useWindowDimensions","View","callback","NitroModalView","jsx","_jsx","DEFAULT_DETENTS","BLACK","toNativeColor","color","undefined","processed","NitroModal","isOpen","mode","detents","initialDetentIndex","backdropColor","backdropOpacity","backdropBlur","dismissOnBackdropPress","dismissOnSwipe","dismissOnBackButton","showGrabber","cornerRadius","backgroundColor","keyboardBehavior","popupAnimation","contentContainerStyle","onPresent","onDismiss","onDetentChange","onBackdropPress","onBackButtonPress","children","testID","ref","isControlled","internalOpen","setInternalOpen","open","sessionActive","setSessionActive","prevOpen","setPrevOpen","renderContent","area","setArea","hybridRef","latest","current","nativeCallbacks","instance","reason","index","onContentAreaChange","next","width","height","present","console","warn","dismiss","snapToDetent","detentsKey","join","nativeDetents","Set","split","windowSize","contentArea","containerStyle","maxWidth","maxHeight","includes","style","styles","host","backdropBlurRadius","grabberVisible","contentBackgroundColor","collapsable","container","create","position","left","top"],"sourceRoot":"../../src","sources":["NitroModal.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,15 +3,16 @@
|
|
|
3
3
|
let warned = false;
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* Platforms without
|
|
7
|
-
*
|
|
6
|
+
* Platforms without an implementation render nothing. iOS and Android use
|
|
7
|
+
* `NitroModalView.native.tsx`, web uses `NitroModalView.web.tsx`.
|
|
8
8
|
*/
|
|
9
9
|
function UnsupportedNitroModalView() {
|
|
10
10
|
if (!warned) {
|
|
11
11
|
warned = true;
|
|
12
|
-
console.warn('react-native-nitro-modal is only implemented on iOS and
|
|
12
|
+
console.warn('react-native-nitro-modal is only implemented on iOS, Android and web.');
|
|
13
13
|
}
|
|
14
14
|
return null;
|
|
15
15
|
}
|
|
16
|
+
export const callback = func => func;
|
|
16
17
|
export const NitroModalView = UnsupportedNitroModalView;
|
|
17
18
|
//# sourceMappingURL=NitroModalView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["warned","UnsupportedNitroModalView","console","warn","NitroModalView"],"sourceRoot":"../../src","sources":["NitroModalView.tsx"],"mappings":";;
|
|
1
|
+
{"version":3,"names":["warned","UnsupportedNitroModalView","console","warn","callback","func","NitroModalView"],"sourceRoot":"../../src","sources":["NitroModalView.tsx"],"mappings":";;AAMA,IAAIA,MAAM,GAAG,KAAK;;AAElB;AACA;AACA;AACA;AACA,SAASC,yBAAyBA,CAAA,EAAG;EACnC,IAAI,CAACD,MAAM,EAAE;IACXA,MAAM,GAAG,IAAI;IACbE,OAAO,CAACC,IAAI,CACV,uEACF,CAAC;EACH;EACA,OAAO,IAAI;AACb;AAEA,OAAO,MAAMC,QAAQ,GAAKC,IAAa,IAAKA,IAA6B;AAEzE,OAAO,MAAMC,cAAc,GACzBL,yBAGC","ignoreList":[]}
|
|
@@ -4,5 +4,8 @@ import { getHostComponent } from 'react-native-nitro-modules';
|
|
|
4
4
|
// Resolved through the package's own `exports` so the path works from both
|
|
5
5
|
// `src/` and the compiled `lib/module/` output (a relative `../nitrogen` breaks there).
|
|
6
6
|
const NitroModalConfig = require('react-native-nitro-modal/nitrogen/generated/shared/json/NitroModalConfig.json');
|
|
7
|
+
// Host components need their function props wrapped. Exported from here so
|
|
8
|
+
// web bundles never import `react-native-nitro-modules`.
|
|
9
|
+
export { callback } from 'react-native-nitro-modules';
|
|
7
10
|
export const NitroModalView = getHostComponent('NitroModal', () => NitroModalConfig);
|
|
8
11
|
//# sourceMappingURL=NitroModalView.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getHostComponent","NitroModalConfig","require","NitroModalView"],"sourceRoot":"../../src","sources":["NitroModalView.native.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D;AACA;AACA,MAAMC,gBAAgB,GAAGC,OAAO,CAAC,+EAA+E,CAAC;AAGjH,OAAO,MAAMC,cAAc,
|
|
1
|
+
{"version":3,"names":["getHostComponent","NitroModalConfig","require","callback","NitroModalView"],"sourceRoot":"../../src","sources":["NitroModalView.native.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D;AACA;AACA,MAAMC,gBAAgB,GAAGC,OAAO,CAAC,+EAA+E,CAAC;AAGjH;AACA;AACA,SAASC,QAAQ,QAAQ,4BAA4B;AAErD,OAAO,MAAMC,cAAc,GAAGJ,gBAAgB,CAG5C,YAAY,EAAE,MAAMC,gBAAgB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/// <reference lib="dom" />
|
|
4
|
+
|
|
5
|
+
import { useLayoutEffect, useRef, useState } from 'react';
|
|
6
|
+
import { Modal } from 'react-native';
|
|
7
|
+
import { ModalController } from "./web/ModalController.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
/** The web view takes plain functions; only native host components need them wrapped. */
|
|
10
|
+
export function callback(func) {
|
|
11
|
+
return func;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Web implementation of the hybrid view. The modal renders through React
|
|
16
|
+
* Native Web's `Modal` (a portal with focus trapping, Escape handling and
|
|
17
|
+
* stacking with other modals) and is laid out and animated by the presenters
|
|
18
|
+
* in `./web`. In place, it renders nothing.
|
|
19
|
+
*/
|
|
20
|
+
function WebNitroModalView(props) {
|
|
21
|
+
const {
|
|
22
|
+
hybridRef,
|
|
23
|
+
children
|
|
24
|
+
} = props;
|
|
25
|
+
const [mounted, setMounted] = useState(false);
|
|
26
|
+
const [controller] = useState(() => new ModalController(setMounted));
|
|
27
|
+
const overlay = useRef(null);
|
|
28
|
+
const backdrop = useRef(null);
|
|
29
|
+
const surface = useRef(null);
|
|
30
|
+
const content = useRef(null);
|
|
31
|
+
const grabber = useRef(null);
|
|
32
|
+
useLayoutEffect(() => {
|
|
33
|
+
controller.attach();
|
|
34
|
+
return () => controller.detach();
|
|
35
|
+
}, [controller]);
|
|
36
|
+
useLayoutEffect(() => {
|
|
37
|
+
hybridRef?.(controller.methods);
|
|
38
|
+
}, [controller, hybridRef]);
|
|
39
|
+
useLayoutEffect(() => {
|
|
40
|
+
controller.update(props);
|
|
41
|
+
});
|
|
42
|
+
useLayoutEffect(() => {
|
|
43
|
+
if (!mounted) return undefined;
|
|
44
|
+
controller.elementsDidMount({
|
|
45
|
+
overlay: overlay.current,
|
|
46
|
+
backdrop: backdrop.current,
|
|
47
|
+
surface: surface.current,
|
|
48
|
+
content: content.current,
|
|
49
|
+
grabber: grabber.current
|
|
50
|
+
});
|
|
51
|
+
return () => controller.elementsWillUnmount();
|
|
52
|
+
}, [controller, mounted]);
|
|
53
|
+
useLayoutEffect(() => {
|
|
54
|
+
if (mounted) {
|
|
55
|
+
controller.contentDidRender();
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
if (!mounted) return null;
|
|
59
|
+
|
|
60
|
+
// Styles set here never change; the presenters write sizes, positions,
|
|
61
|
+
// colors and animated values straight to the elements.
|
|
62
|
+
return /*#__PURE__*/_jsx(Modal, {
|
|
63
|
+
visible: true,
|
|
64
|
+
transparent: true,
|
|
65
|
+
animationType: "none",
|
|
66
|
+
onRequestClose: controller.handleBackPress,
|
|
67
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
68
|
+
ref: overlay,
|
|
69
|
+
tabIndex: -1,
|
|
70
|
+
style: styles.overlay,
|
|
71
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
72
|
+
ref: backdrop,
|
|
73
|
+
"aria-hidden": true,
|
|
74
|
+
style: styles.backdrop
|
|
75
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
76
|
+
ref: surface,
|
|
77
|
+
style: styles.surface,
|
|
78
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
79
|
+
ref: content,
|
|
80
|
+
style: styles.content,
|
|
81
|
+
children: children
|
|
82
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
83
|
+
ref: grabber,
|
|
84
|
+
"aria-hidden": true,
|
|
85
|
+
style: styles.grabber
|
|
86
|
+
})]
|
|
87
|
+
})]
|
|
88
|
+
})
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
const styles = {
|
|
92
|
+
overlay: {
|
|
93
|
+
position: 'fixed',
|
|
94
|
+
inset: 0,
|
|
95
|
+
outline: 'none'
|
|
96
|
+
},
|
|
97
|
+
backdrop: {
|
|
98
|
+
position: 'absolute',
|
|
99
|
+
inset: 0,
|
|
100
|
+
touchAction: 'none'
|
|
101
|
+
},
|
|
102
|
+
surface: {
|
|
103
|
+
position: 'absolute',
|
|
104
|
+
left: 0,
|
|
105
|
+
top: 0,
|
|
106
|
+
boxSizing: 'border-box',
|
|
107
|
+
willChange: 'transform'
|
|
108
|
+
},
|
|
109
|
+
// Pinned at the origin like the native content view; the React content is
|
|
110
|
+
// positioned and sized inside it by `NitroModal`.
|
|
111
|
+
content: {
|
|
112
|
+
position: 'absolute',
|
|
113
|
+
left: 0,
|
|
114
|
+
top: 0
|
|
115
|
+
},
|
|
116
|
+
grabber: {
|
|
117
|
+
position: 'absolute',
|
|
118
|
+
top: 5,
|
|
119
|
+
left: '50%',
|
|
120
|
+
width: 36,
|
|
121
|
+
height: 5,
|
|
122
|
+
marginLeft: -18,
|
|
123
|
+
borderRadius: 2.5,
|
|
124
|
+
backgroundColor: 'rgba(127, 127, 127, 0.4)',
|
|
125
|
+
pointerEvents: 'none'
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
export const NitroModalView = WebNitroModalView;
|
|
129
|
+
//# sourceMappingURL=NitroModalView.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useLayoutEffect","useRef","useState","Modal","ModalController","jsx","_jsx","jsxs","_jsxs","callback","func","WebNitroModalView","props","hybridRef","children","mounted","setMounted","controller","overlay","backdrop","surface","content","grabber","attach","detach","methods","update","undefined","elementsDidMount","current","elementsWillUnmount","contentDidRender","visible","transparent","animationType","onRequestClose","handleBackPress","ref","tabIndex","style","styles","position","inset","outline","touchAction","left","top","boxSizing","willChange","width","height","marginLeft","borderRadius","backgroundColor","pointerEvents","NitroModalView"],"sourceRoot":"../../src","sources":["NitroModalView.web.tsx"],"mappings":";;AAAA;;AAEA,SACEA,eAAe,EACfC,MAAM,EACNC,QAAQ,QAGH,OAAO;AACd,SAASC,KAAK,QAAQ,cAAc;AAGpC,SAASC,eAAe,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOxD;AACA,OAAO,SAASC,QAAQA,CAAIC,IAAO,EAAK;EACtC,OAAOA,IAAI;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiBA,CAACC,KAA6B,EAAE;EACxD,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACe,UAAU,CAAC,GAAGf,QAAQ,CAAC,MAAM,IAAIE,eAAe,CAACY,UAAU,CAAC,CAAC;EACpE,MAAME,OAAO,GAAGjB,MAAM,CAAiB,IAAI,CAAC;EAC5C,MAAMkB,QAAQ,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAMmB,OAAO,GAAGnB,MAAM,CAAiB,IAAI,CAAC;EAC5C,MAAMoB,OAAO,GAAGpB,MAAM,CAAiB,IAAI,CAAC;EAC5C,MAAMqB,OAAO,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EAE5CD,eAAe,CAAC,MAAM;IACpBiB,UAAU,CAACM,MAAM,CAAC,CAAC;IACnB,OAAO,MAAMN,UAAU,CAACO,MAAM,CAAC,CAAC;EAClC,CAAC,EAAE,CAACP,UAAU,CAAC,CAAC;EAEhBjB,eAAe,CAAC,MAAM;IACpBa,SAAS,GAAGI,UAAU,CAACQ,OAA4B,CAAC;EACtD,CAAC,EAAE,CAACR,UAAU,EAAEJ,SAAS,CAAC,CAAC;EAE3Bb,eAAe,CAAC,MAAM;IACpBiB,UAAU,CAACS,MAAM,CAACd,KAAK,CAAC;EAC1B,CAAC,CAAC;EAEFZ,eAAe,CAAC,MAAM;IACpB,IAAI,CAACe,OAAO,EAAE,OAAOY,SAAS;IAC9BV,UAAU,CAACW,gBAAgB,CAAC;MAC1BV,OAAO,EAAEA,OAAO,CAACW,OAAQ;MACzBV,QAAQ,EAAEA,QAAQ,CAACU,OAAQ;MAC3BT,OAAO,EAAEA,OAAO,CAACS,OAAQ;MACzBR,OAAO,EAAEA,OAAO,CAACQ,OAAQ;MACzBP,OAAO,EAAEA,OAAO,CAACO;IACnB,CAAC,CAAC;IACF,OAAO,MAAMZ,UAAU,CAACa,mBAAmB,CAAC,CAAC;EAC/C,CAAC,EAAE,CAACb,UAAU,EAAEF,OAAO,CAAC,CAAC;EAEzBf,eAAe,CAAC,MAAM;IACpB,IAAIe,OAAO,EAAE;MACXE,UAAU,CAACc,gBAAgB,CAAC,CAAC;IAC/B;EACF,CAAC,CAAC;EAEF,IAAI,CAAChB,OAAO,EAAE,OAAO,IAAI;;EAEzB;EACA;EACA,oBACET,IAAA,CAACH,KAAK;IACJ6B,OAAO;IACPC,WAAW;IACXC,aAAa,EAAC,MAAM;IACpBC,cAAc,EAAElB,UAAU,CAACmB,eAAgB;IAAAtB,QAAA,eAG3CN,KAAA;MAAK6B,GAAG,EAAEnB,OAAQ;MAACoB,QAAQ,EAAE,CAAC,CAAE;MAACC,KAAK,EAAEC,MAAM,CAACtB,OAAQ;MAAAJ,QAAA,gBACrDR,IAAA;QAAK+B,GAAG,EAAElB,QAAS;QAAC,mBAAW;QAACoB,KAAK,EAAEC,MAAM,CAACrB;MAAS,CAAE,CAAC,eAC1DX,KAAA;QAAK6B,GAAG,EAAEjB,OAAQ;QAACmB,KAAK,EAAEC,MAAM,CAACpB,OAAQ;QAAAN,QAAA,gBACvCR,IAAA;UAAK+B,GAAG,EAAEhB,OAAQ;UAACkB,KAAK,EAAEC,MAAM,CAACnB,OAAQ;UAAAP,QAAA,EACtCA;QAAQ,CACN,CAAC,eACNR,IAAA;UAAK+B,GAAG,EAAEf,OAAQ;UAAC,mBAAW;UAACiB,KAAK,EAAEC,MAAM,CAAClB;QAAQ,CAAE,CAAC;MAAA,CACrD,CAAC;IAAA,CACH;EAAC,CACD,CAAC;AAEZ;AAEA,MAAMkB,MAAM,GAAG;EACbtB,OAAO,EAAE;IACPuB,QAAQ,EAAE,OAAO;IACjBC,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACX,CAAC;EACDxB,QAAQ,EAAE;IACRsB,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,CAAC;IACRE,WAAW,EAAE;EACf,CAAC;EACDxB,OAAO,EAAE;IACPqB,QAAQ,EAAE,UAAU;IACpBI,IAAI,EAAE,CAAC;IACPC,GAAG,EAAE,CAAC;IACNC,SAAS,EAAE,YAAY;IACvBC,UAAU,EAAE;EACd,CAAC;EACD;EACA;EACA3B,OAAO,EAAE;IACPoB,QAAQ,EAAE,UAAU;IACpBI,IAAI,EAAE,CAAC;IACPC,GAAG,EAAE;EACP,CAAC;EACDxB,OAAO,EAAE;IACPmB,QAAQ,EAAE,UAAU;IACpBK,GAAG,EAAE,CAAC;IACND,IAAI,EAAE,KAAK;IACXI,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC;IACTC,UAAU,EAAE,CAAC,EAAE;IACfC,YAAY,EAAE,GAAG;IACjBC,eAAe,EAAE,0BAA0B;IAC3CC,aAAa,EAAE;EACjB;AACF,CAAyC;AAEzC,OAAO,MAAMC,cAAc,GAAG5C,iBAG7B","ignoreList":[]}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/// <reference lib="dom" />
|
|
4
|
+
|
|
5
|
+
/** How an `AnimatedValue` moves to its target. */
|
|
6
|
+
|
|
7
|
+
/** Jumps to the target at once. The completion still arrives on the next frame. */
|
|
8
|
+
export const INSTANT = {
|
|
9
|
+
type: 'timing',
|
|
10
|
+
duration: 0,
|
|
11
|
+
easing: t => t
|
|
12
|
+
};
|
|
13
|
+
/** Longest frame integrated at once, so a dropped frame can't throw the spring off. */
|
|
14
|
+
const MAX_FRAME_SECONDS = 0.064;
|
|
15
|
+
const SPRING_STEP_SECONDS = 0.004;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* A number animated on `requestAnimationFrame` that reports every frame
|
|
19
|
+
* through `onChange`. A new animation starts from the current value and
|
|
20
|
+
* velocity, so transitions can be turned around mid-flight.
|
|
21
|
+
*/
|
|
22
|
+
export class AnimatedValue {
|
|
23
|
+
speed = 0;
|
|
24
|
+
run = null;
|
|
25
|
+
frame = null;
|
|
26
|
+
lastTime = 0;
|
|
27
|
+
|
|
28
|
+
/** `precision`: distance from the target at which a spring counts as settled. */
|
|
29
|
+
constructor(value, precision, onChange) {
|
|
30
|
+
this.precision = precision;
|
|
31
|
+
this.onChange = onChange;
|
|
32
|
+
this.current = value;
|
|
33
|
+
}
|
|
34
|
+
get value() {
|
|
35
|
+
return this.current;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/** Jumps to `value`, cancelling any animation. */
|
|
39
|
+
set(value) {
|
|
40
|
+
this.stop();
|
|
41
|
+
this.current = value;
|
|
42
|
+
this.speed = 0;
|
|
43
|
+
this.onChange(value);
|
|
44
|
+
}
|
|
45
|
+
stop() {
|
|
46
|
+
this.run = null;
|
|
47
|
+
if (this.frame != null) {
|
|
48
|
+
cancelAnimationFrame(this.frame);
|
|
49
|
+
this.frame = null;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
animateTo(target, motion, options = {}) {
|
|
53
|
+
if (options.velocity !== undefined) {
|
|
54
|
+
this.speed = options.velocity;
|
|
55
|
+
}
|
|
56
|
+
const now = performance.now();
|
|
57
|
+
this.run = {
|
|
58
|
+
target,
|
|
59
|
+
motion,
|
|
60
|
+
options,
|
|
61
|
+
from: this.current,
|
|
62
|
+
startTime: now,
|
|
63
|
+
side: Math.sign(this.current - target)
|
|
64
|
+
};
|
|
65
|
+
if (motion.type === 'timing' && motion.duration <= 0) {
|
|
66
|
+
this.current = target;
|
|
67
|
+
this.speed = 0;
|
|
68
|
+
this.onChange(target);
|
|
69
|
+
}
|
|
70
|
+
if (this.frame == null) {
|
|
71
|
+
this.lastTime = now;
|
|
72
|
+
this.frame = requestAnimationFrame(this.step);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
step = time => {
|
|
76
|
+
this.frame = null;
|
|
77
|
+
const run = this.run;
|
|
78
|
+
if (!run) return;
|
|
79
|
+
const dt = Math.min(Math.max((time - this.lastTime) / 1000, 0), MAX_FRAME_SECONDS);
|
|
80
|
+
this.lastTime = time;
|
|
81
|
+
const done = run.motion.type === 'timing' ? this.stepTiming(run, run.motion, time, dt) : this.stepSpring(run, run.motion, dt);
|
|
82
|
+
if (done) {
|
|
83
|
+
this.current = run.target;
|
|
84
|
+
this.speed = 0;
|
|
85
|
+
this.run = null;
|
|
86
|
+
}
|
|
87
|
+
this.onChange(this.current);
|
|
88
|
+
if (done) {
|
|
89
|
+
run.options.onEnd?.();
|
|
90
|
+
} else {
|
|
91
|
+
this.frame = requestAnimationFrame(this.step);
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
stepTiming(run, motion, time, dt) {
|
|
95
|
+
const progress = motion.duration > 0 ? Math.min(Math.max((time - run.startTime) / motion.duration, 0), 1) : 1;
|
|
96
|
+
const next = run.from + (run.target - run.from) * motion.easing(progress);
|
|
97
|
+
if (dt > 0) {
|
|
98
|
+
this.speed = (next - this.current) / dt;
|
|
99
|
+
}
|
|
100
|
+
this.current = next;
|
|
101
|
+
return progress >= 1;
|
|
102
|
+
}
|
|
103
|
+
stepSpring(run, motion, dt) {
|
|
104
|
+
const omega = 2 * Math.PI / motion.response;
|
|
105
|
+
const stiffness = omega * omega;
|
|
106
|
+
const damping = 2 * motion.dampingRatio * omega;
|
|
107
|
+
let offset = this.current - run.target;
|
|
108
|
+
let velocity = this.speed;
|
|
109
|
+
const steps = Math.ceil(dt / SPRING_STEP_SECONDS);
|
|
110
|
+
for (let i = 0; i < steps; i++) {
|
|
111
|
+
const h = dt / steps;
|
|
112
|
+
velocity += (-stiffness * offset - damping * velocity) * h;
|
|
113
|
+
offset += velocity * h;
|
|
114
|
+
}
|
|
115
|
+
this.current = run.target + offset;
|
|
116
|
+
this.speed = velocity;
|
|
117
|
+
if (run.options.stopAtTarget && (run.side === 0 || Math.sign(offset) !== run.side)) {
|
|
118
|
+
return true;
|
|
119
|
+
}
|
|
120
|
+
return Math.abs(offset) < this.precision && Math.abs(velocity) < this.precision * 20;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
//# sourceMappingURL=AnimatedValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["INSTANT","type","duration","easing","t","MAX_FRAME_SECONDS","SPRING_STEP_SECONDS","AnimatedValue","speed","run","frame","lastTime","constructor","value","precision","onChange","current","set","stop","cancelAnimationFrame","animateTo","target","motion","options","velocity","undefined","now","performance","from","startTime","side","Math","sign","requestAnimationFrame","step","time","dt","min","max","done","stepTiming","stepSpring","onEnd","progress","next","omega","PI","response","stiffness","damping","dampingRatio","offset","steps","ceil","i","h","stopAtTarget","abs"],"sourceRoot":"../../../src","sources":["web/AnimatedValue.ts"],"mappings":";;AAAA;;AAEA;;AAgBA;AACA,OAAO,MAAMA,OAAe,GAAG;EAC7BC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE,CAAC;EACXC,MAAM,EAAGC,CAAC,IAAKA;AACjB,CAAC;AAqBD;AACA,MAAMC,iBAAiB,GAAG,KAAK;AAC/B,MAAMC,mBAAmB,GAAG,KAAK;;AAEjC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,CAAC;EAEjBC,KAAK,GAAG,CAAC;EACTC,GAAG,GAAe,IAAI;EACtBC,KAAK,GAAkB,IAAI;EAC3BC,QAAQ,GAAG,CAAC;;EAEpB;EACAC,WAAWA,CACTC,KAAa,EACIC,SAAiB,EACjBC,QAAiC,EAClD;IAAA,KAFiBD,SAAiB,GAAjBA,SAAiB;IAAA,KACjBC,QAAiC,GAAjCA,QAAiC;IAElD,IAAI,CAACC,OAAO,GAAGH,KAAK;EACtB;EAEA,IAAIA,KAAKA,CAAA,EAAW;IAClB,OAAO,IAAI,CAACG,OAAO;EACrB;;EAEA;EACAC,GAAGA,CAACJ,KAAa,EAAE;IACjB,IAAI,CAACK,IAAI,CAAC,CAAC;IACX,IAAI,CAACF,OAAO,GAAGH,KAAK;IACpB,IAAI,CAACL,KAAK,GAAG,CAAC;IACd,IAAI,CAACO,QAAQ,CAACF,KAAK,CAAC;EACtB;EAEAK,IAAIA,CAAA,EAAG;IACL,IAAI,CAACT,GAAG,GAAG,IAAI;IACf,IAAI,IAAI,CAACC,KAAK,IAAI,IAAI,EAAE;MACtBS,oBAAoB,CAAC,IAAI,CAACT,KAAK,CAAC;MAChC,IAAI,CAACA,KAAK,GAAG,IAAI;IACnB;EACF;EAEAU,SAASA,CAACC,MAAc,EAAEC,MAAc,EAAEC,OAAuB,GAAG,CAAC,CAAC,EAAE;IACtE,IAAIA,OAAO,CAACC,QAAQ,KAAKC,SAAS,EAAE;MAClC,IAAI,CAACjB,KAAK,GAAGe,OAAO,CAACC,QAAQ;IAC/B;IACA,MAAME,GAAG,GAAGC,WAAW,CAACD,GAAG,CAAC,CAAC;IAC7B,IAAI,CAACjB,GAAG,GAAG;MACTY,MAAM;MACNC,MAAM;MACNC,OAAO;MACPK,IAAI,EAAE,IAAI,CAACZ,OAAO;MAClBa,SAAS,EAAEH,GAAG;MACdI,IAAI,EAAEC,IAAI,CAACC,IAAI,CAAC,IAAI,CAAChB,OAAO,GAAGK,MAAM;IACvC,CAAC;IACD,IAAIC,MAAM,CAACrB,IAAI,KAAK,QAAQ,IAAIqB,MAAM,CAACpB,QAAQ,IAAI,CAAC,EAAE;MACpD,IAAI,CAACc,OAAO,GAAGK,MAAM;MACrB,IAAI,CAACb,KAAK,GAAG,CAAC;MACd,IAAI,CAACO,QAAQ,CAACM,MAAM,CAAC;IACvB;IACA,IAAI,IAAI,CAACX,KAAK,IAAI,IAAI,EAAE;MACtB,IAAI,CAACC,QAAQ,GAAGe,GAAG;MACnB,IAAI,CAAChB,KAAK,GAAGuB,qBAAqB,CAAC,IAAI,CAACC,IAAI,CAAC;IAC/C;EACF;EAEQA,IAAI,GAAIC,IAAY,IAAK;IAC/B,IAAI,CAACzB,KAAK,GAAG,IAAI;IACjB,MAAMD,GAAG,GAAG,IAAI,CAACA,GAAG;IACpB,IAAI,CAACA,GAAG,EAAE;IACV,MAAM2B,EAAE,GAAGL,IAAI,CAACM,GAAG,CACjBN,IAAI,CAACO,GAAG,CAAC,CAACH,IAAI,GAAG,IAAI,CAACxB,QAAQ,IAAI,IAAI,EAAE,CAAC,CAAC,EAC1CN,iBACF,CAAC;IACD,IAAI,CAACM,QAAQ,GAAGwB,IAAI;IAEpB,MAAMI,IAAI,GACR9B,GAAG,CAACa,MAAM,CAACrB,IAAI,KAAK,QAAQ,GACxB,IAAI,CAACuC,UAAU,CAAC/B,GAAG,EAAEA,GAAG,CAACa,MAAM,EAAEa,IAAI,EAAEC,EAAE,CAAC,GAC1C,IAAI,CAACK,UAAU,CAAChC,GAAG,EAAEA,GAAG,CAACa,MAAM,EAAEc,EAAE,CAAC;IAC1C,IAAIG,IAAI,EAAE;MACR,IAAI,CAACvB,OAAO,GAAGP,GAAG,CAACY,MAAM;MACzB,IAAI,CAACb,KAAK,GAAG,CAAC;MACd,IAAI,CAACC,GAAG,GAAG,IAAI;IACjB;IACA,IAAI,CAACM,QAAQ,CAAC,IAAI,CAACC,OAAO,CAAC;IAC3B,IAAIuB,IAAI,EAAE;MACR9B,GAAG,CAACc,OAAO,CAACmB,KAAK,GAAG,CAAC;IACvB,CAAC,MAAM;MACL,IAAI,CAAChC,KAAK,GAAGuB,qBAAqB,CAAC,IAAI,CAACC,IAAI,CAAC;IAC/C;EACF,CAAC;EAEOM,UAAUA,CAChB/B,GAAQ,EACRa,MAA2C,EAC3Ca,IAAY,EACZC,EAAU,EACD;IACT,MAAMO,QAAQ,GACZrB,MAAM,CAACpB,QAAQ,GAAG,CAAC,GACf6B,IAAI,CAACM,GAAG,CAACN,IAAI,CAACO,GAAG,CAAC,CAACH,IAAI,GAAG1B,GAAG,CAACoB,SAAS,IAAIP,MAAM,CAACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAClE,CAAC;IACP,MAAM0C,IAAI,GAAGnC,GAAG,CAACmB,IAAI,GAAG,CAACnB,GAAG,CAACY,MAAM,GAAGZ,GAAG,CAACmB,IAAI,IAAIN,MAAM,CAACnB,MAAM,CAACwC,QAAQ,CAAC;IACzE,IAAIP,EAAE,GAAG,CAAC,EAAE;MACV,IAAI,CAAC5B,KAAK,GAAG,CAACoC,IAAI,GAAG,IAAI,CAAC5B,OAAO,IAAIoB,EAAE;IACzC;IACA,IAAI,CAACpB,OAAO,GAAG4B,IAAI;IACnB,OAAOD,QAAQ,IAAI,CAAC;EACtB;EAEQF,UAAUA,CAChBhC,GAAQ,EACRa,MAA2C,EAC3Cc,EAAU,EACD;IACT,MAAMS,KAAK,GAAI,CAAC,GAAGd,IAAI,CAACe,EAAE,GAAIxB,MAAM,CAACyB,QAAQ;IAC7C,MAAMC,SAAS,GAAGH,KAAK,GAAGA,KAAK;IAC/B,MAAMI,OAAO,GAAG,CAAC,GAAG3B,MAAM,CAAC4B,YAAY,GAAGL,KAAK;IAC/C,IAAIM,MAAM,GAAG,IAAI,CAACnC,OAAO,GAAGP,GAAG,CAACY,MAAM;IACtC,IAAIG,QAAQ,GAAG,IAAI,CAAChB,KAAK;IACzB,MAAM4C,KAAK,GAAGrB,IAAI,CAACsB,IAAI,CAACjB,EAAE,GAAG9B,mBAAmB,CAAC;IACjD,KAAK,IAAIgD,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,KAAK,EAAEE,CAAC,EAAE,EAAE;MAC9B,MAAMC,CAAC,GAAGnB,EAAE,GAAGgB,KAAK;MACpB5B,QAAQ,IAAI,CAAC,CAACwB,SAAS,GAAGG,MAAM,GAAGF,OAAO,GAAGzB,QAAQ,IAAI+B,CAAC;MAC1DJ,MAAM,IAAI3B,QAAQ,GAAG+B,CAAC;IACxB;IACA,IAAI,CAACvC,OAAO,GAAGP,GAAG,CAACY,MAAM,GAAG8B,MAAM;IAClC,IAAI,CAAC3C,KAAK,GAAGgB,QAAQ;IAErB,IACEf,GAAG,CAACc,OAAO,CAACiC,YAAY,KACvB/C,GAAG,CAACqB,IAAI,KAAK,CAAC,IAAIC,IAAI,CAACC,IAAI,CAACmB,MAAM,CAAC,KAAK1C,GAAG,CAACqB,IAAI,CAAC,EAClD;MACA,OAAO,IAAI;IACb;IACA,OACEC,IAAI,CAAC0B,GAAG,CAACN,MAAM,CAAC,GAAG,IAAI,CAACrC,SAAS,IACjCiB,IAAI,CAAC0B,GAAG,CAACjC,QAAQ,CAAC,GAAG,IAAI,CAACV,SAAS,GAAG,EAAE;EAE5C;AACF","ignoreList":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/** Snapshot of the props that shape a presentation. */
|
|
4
|
+
|
|
5
|
+
export function makeConfig(props) {
|
|
6
|
+
return {
|
|
7
|
+
mode: props.mode,
|
|
8
|
+
detents: props.detents,
|
|
9
|
+
initialDetentIndex: Number.isFinite(props.initialDetentIndex) ? Math.trunc(props.initialDetentIndex) : 0,
|
|
10
|
+
backdropColor: props.backdropColor,
|
|
11
|
+
backdropOpacity: props.backdropOpacity,
|
|
12
|
+
backdropBlurRadius: props.backdropBlurRadius,
|
|
13
|
+
dismissOnBackdropPress: props.dismissOnBackdropPress,
|
|
14
|
+
dismissOnSwipe: props.dismissOnSwipe,
|
|
15
|
+
dismissOnBackButton: props.dismissOnBackButton,
|
|
16
|
+
grabberVisible: props.grabberVisible,
|
|
17
|
+
cornerRadius: props.cornerRadius >= 0 ? props.cornerRadius : null,
|
|
18
|
+
contentBackgroundColor: props.contentBackgroundColor ?? null,
|
|
19
|
+
keyboardBehavior: props.keyboardBehavior,
|
|
20
|
+
popupAnimation: props.popupAnimation
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export function isSameConfig(a, b) {
|
|
24
|
+
return Object.keys(a).every(key => key === 'detents' ? a.detents.join() === b.detents.join() : a[key] === b[key]);
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=ModalConfig.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["makeConfig","props","mode","detents","initialDetentIndex","Number","isFinite","Math","trunc","backdropColor","backdropOpacity","backdropBlurRadius","dismissOnBackdropPress","dismissOnSwipe","dismissOnBackButton","grabberVisible","cornerRadius","contentBackgroundColor","keyboardBehavior","popupAnimation","isSameConfig","a","b","Object","keys","every","key","join"],"sourceRoot":"../../../src","sources":["web/ModalConfig.ts"],"mappings":";;AAQA;;AAqBA,OAAO,SAASA,UAAUA,CAACC,KAAsB,EAAe;EAC9D,OAAO;IACLC,IAAI,EAAED,KAAK,CAACC,IAAI;IAChBC,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,kBAAkB,EAAEC,MAAM,CAACC,QAAQ,CAACL,KAAK,CAACG,kBAAkB,CAAC,GACzDG,IAAI,CAACC,KAAK,CAACP,KAAK,CAACG,kBAAkB,CAAC,GACpC,CAAC;IACLK,aAAa,EAAER,KAAK,CAACQ,aAAa;IAClCC,eAAe,EAAET,KAAK,CAACS,eAAe;IACtCC,kBAAkB,EAAEV,KAAK,CAACU,kBAAkB;IAC5CC,sBAAsB,EAAEX,KAAK,CAACW,sBAAsB;IACpDC,cAAc,EAAEZ,KAAK,CAACY,cAAc;IACpCC,mBAAmB,EAAEb,KAAK,CAACa,mBAAmB;IAC9CC,cAAc,EAAEd,KAAK,CAACc,cAAc;IACpCC,YAAY,EAAEf,KAAK,CAACe,YAAY,IAAI,CAAC,GAAGf,KAAK,CAACe,YAAY,GAAG,IAAI;IACjEC,sBAAsB,EAAEhB,KAAK,CAACgB,sBAAsB,IAAI,IAAI;IAC5DC,gBAAgB,EAAEjB,KAAK,CAACiB,gBAAgB;IACxCC,cAAc,EAAElB,KAAK,CAACkB;EACxB,CAAC;AACH;AAEA,OAAO,SAASC,YAAYA,CAACC,CAAc,EAAEC,CAAc,EAAW;EACpE,OAAQC,MAAM,CAACC,IAAI,CAACH,CAAC,CAAC,CAA2BI,KAAK,CAAEC,GAAG,IACzDA,GAAG,KAAK,SAAS,GACbL,CAAC,CAAClB,OAAO,CAACwB,IAAI,CAAC,CAAC,KAAKL,CAAC,CAACnB,OAAO,CAACwB,IAAI,CAAC,CAAC,GACrCN,CAAC,CAACK,GAAG,CAAC,KAAKJ,CAAC,CAACI,GAAG,CACtB,CAAC;AACH","ignoreList":[]}
|