@lodev09/react-native-true-sheet 0.9.8 → 0.9.9
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 +90 -8
- package/android/src/main/java/com/lodev09/truesheet/TrueSheetDialog.kt +18 -11
- package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt +14 -8
- package/ios/TrueSheetView.swift +0 -3
- package/lib/commonjs/TrueSheet.js +59 -25
- package/lib/commonjs/TrueSheet.js.map +1 -1
- package/lib/commonjs/TrueSheetFooter.js +20 -0
- package/lib/commonjs/TrueSheetFooter.js.map +1 -0
- package/lib/commonjs/__mocks__/index.js +3 -0
- package/lib/commonjs/__mocks__/index.js.map +1 -1
- package/lib/module/TrueSheet.js +58 -24
- package/lib/module/TrueSheet.js.map +1 -1
- package/lib/module/TrueSheetFooter.js +12 -0
- package/lib/module/TrueSheetFooter.js.map +1 -0
- package/lib/module/__mocks__/index.js +3 -0
- package/lib/module/__mocks__/index.js.map +1 -1
- package/lib/typescript/src/TrueSheet.d.ts +23 -3
- package/lib/typescript/src/TrueSheet.d.ts.map +1 -1
- package/lib/typescript/src/TrueSheetFooter.d.ts +8 -0
- package/lib/typescript/src/TrueSheetFooter.d.ts.map +1 -0
- package/lib/typescript/src/types.d.ts +15 -0
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/TrueSheet.tsx +74 -37
- package/src/TrueSheetFooter.tsx +18 -0
- package/src/__mocks__/index.js +4 -0
- package/src/types.ts +15 -0
package/README.md
CHANGED
|
@@ -16,8 +16,7 @@ The true native bottom sheet 💩
|
|
|
16
16
|
* ✅ Handles your _Footer_ needs, natively.
|
|
17
17
|
* ✅ Handles your _Keyboard_ needs, natively.
|
|
18
18
|
* ✅ Asynchronus `ref` [methods](#methods).
|
|
19
|
-
* ✅
|
|
20
|
-
* ✅ Bonus! [Blur](#blurtint) support on iOS 😎
|
|
19
|
+
* ✅ Bonus! [Blur](#blurtint) support on IOS 😎
|
|
21
20
|
|
|
22
21
|
## Installation
|
|
23
22
|
|
|
@@ -29,6 +28,8 @@ yarn add @lodev09/react-native-true-sheet
|
|
|
29
28
|
npm i @lodev09/react-native-true-sheet
|
|
30
29
|
```
|
|
31
30
|
|
|
31
|
+
> This package is not compatible with [Expo Go](https://docs.expo.dev/get-started/expo-go/). Use this with [Expo CNG](https://docs.expo.dev/workflow/continuous-native-generation/) instead.
|
|
32
|
+
|
|
32
33
|
## Usage
|
|
33
34
|
|
|
34
35
|
```tsx
|
|
@@ -65,6 +66,7 @@ Extends `ViewProps`
|
|
|
65
66
|
| Prop | Type | Default | Description | 🍎 | 🤖 |
|
|
66
67
|
| - | - | - | - | - | - |
|
|
67
68
|
| sizes | [`SheetSize[]`](#sheetsize) | `["medium", "large"]` | Array of sizes you want the sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_**, and **_expanded_**. Example: `size={["auto", "60%", "large"]}`| ✅ | ✅ |
|
|
69
|
+
| name | `string` | - | The name to reference this sheet. It has to be **_unique_**. You can then present this sheet globally using its name. | ✅ | ✅ |
|
|
68
70
|
| backgroundColor | `ColorValue` | `"white"` | The sheet's background color. | ✅ | ✅ |
|
|
69
71
|
| cornerRadius | `number` | - | the sheet corner radius. | ✅ | ✅ |
|
|
70
72
|
| maxHeight | `number` | - | Overrides `"large"` or `"100%"` height. | ✅ | ✅ |
|
|
@@ -73,8 +75,8 @@ Extends `ViewProps`
|
|
|
73
75
|
| dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
|
|
74
76
|
| grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
|
|
75
77
|
| grabberProps | [`TrueSheetGrabberProps`](#truesheetgrabberprops) | - | Overrides the grabber props for android. | | ✅ |
|
|
76
|
-
| blurTint | [`BlurTint`](#blurtint) | - | The blur effect style on
|
|
77
|
-
| scrollRef | `RefObject<...>` | - | The main scrollable ref that the sheet should handle on
|
|
78
|
+
| blurTint | [`BlurTint`](#blurtint) | - | The blur effect style on IOS. Overrides `backgroundColor` if set. Example: `"light"`, `"dark"`, etc. | ✅ | |
|
|
79
|
+
| scrollRef | `RefObject<...>` | - | The main scrollable ref that the sheet should handle on IOS. | ✅ | |
|
|
78
80
|
|
|
79
81
|
## Methods
|
|
80
82
|
|
|
@@ -106,6 +108,37 @@ return (
|
|
|
106
108
|
| resize | `index: number` | Resizes the sheet programmatically by `index`. This is an alias of the `present(index)` method. |
|
|
107
109
|
| dismiss | - | Dismisses the sheet. |
|
|
108
110
|
|
|
111
|
+
### Static Methods
|
|
112
|
+
|
|
113
|
+
You can also call the above methods statically without having access to a sheet's `ref`. This is particularly useful when you want to present a sheet from anywhere.
|
|
114
|
+
|
|
115
|
+
The API is similar to the ref methods except for the required `name` prop.
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
TrueSheet.present('SHEET-NAME')
|
|
119
|
+
TrueSheet.dismiss('SHEET-NAME')
|
|
120
|
+
TrueSheet.resize('SHEET-NAME', 1)
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Example:
|
|
124
|
+
```tsx
|
|
125
|
+
// Define the sheet as usual
|
|
126
|
+
<TrueSheet name="my-sheet">
|
|
127
|
+
// ...
|
|
128
|
+
</TrueSheet>
|
|
129
|
+
```
|
|
130
|
+
```tsx
|
|
131
|
+
// Somewhere in your screen
|
|
132
|
+
const presentMySheet = async () => {
|
|
133
|
+
await TrueSheet.present('my-sheet')
|
|
134
|
+
console.log('🎉')
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return (
|
|
138
|
+
<Button onPress={presentMySheet} />
|
|
139
|
+
)
|
|
140
|
+
```
|
|
141
|
+
|
|
109
142
|
## Events
|
|
110
143
|
|
|
111
144
|
```tsx
|
|
@@ -142,8 +175,8 @@ return (
|
|
|
142
175
|
| `"small"` | Translates to 25% | **_16+_** | ✅ |
|
|
143
176
|
| `"medium"` | Translates to 50% | **_15+_** | ✅ |
|
|
144
177
|
| `"large"` | Translates to 100% | ✅ | ✅ |
|
|
178
|
+
| `"${number}%"` | Fixed height in % | **_16+_** | ✅ |
|
|
145
179
|
| `number` | Fixed height | **_16+_** | ✅ |
|
|
146
|
-
| `${number}%` | Fixed height in % | **_16+_** | ✅ |
|
|
147
180
|
|
|
148
181
|
> [!NOTE]
|
|
149
182
|
> `auto` is not guaranteed to be accurate if your content depends on various rendering logic. Experiment with it and try to keep your content size as fixed as possible.
|
|
@@ -164,7 +197,7 @@ Grabber props to be used for android grabber or handle.
|
|
|
164
197
|
|
|
165
198
|
### `BlurTint`
|
|
166
199
|
|
|
167
|
-
Blur tint that is mapped into native values in
|
|
200
|
+
Blur tint that is mapped into native values in IOS.
|
|
168
201
|
|
|
169
202
|
```tsx
|
|
170
203
|
<TrueSheet blurTint="dark">
|
|
@@ -222,6 +255,55 @@ jest.mock('@lodev09/react-native-true-sheet')
|
|
|
222
255
|
|
|
223
256
|
## Troubleshooting
|
|
224
257
|
|
|
258
|
+
### Presenting a sheet on top of an existing sheet on **IOS**
|
|
259
|
+
|
|
260
|
+
On IOS, presenting a sheet on top of an existing sheet will cause error.
|
|
261
|
+
|
|
262
|
+
```console
|
|
263
|
+
Attempt to present <TrueSheet.TrueSheetViewController: 0x11829f800> on <UIViewController: 0x10900eb10> (from <RNSScreen: 0x117dbf400>) which is already presenting <TrueSheet.TrueSheetViewController: 0x11a0b9200>
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
There are _two_ ways to resolve this.
|
|
267
|
+
|
|
268
|
+
1. Dismiss the "parent" sheet first
|
|
269
|
+
```tsx
|
|
270
|
+
const presentSheet2 = async () => {
|
|
271
|
+
await sheet1.current?.dismiss() // Wait for sheet 1 to dismiss ✅
|
|
272
|
+
await sheet2.current?.present() // Sheet 2 will now present 🎉
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
return (
|
|
276
|
+
<>
|
|
277
|
+
<TrueSheet ref={sheet1}>
|
|
278
|
+
<Button onPress={presentSheet2} title="Present Sheet 2" />
|
|
279
|
+
// ...
|
|
280
|
+
</TrueSheet>
|
|
281
|
+
|
|
282
|
+
<TrueSheet ref={sheet2}>
|
|
283
|
+
// ...
|
|
284
|
+
</TrueSheet>
|
|
285
|
+
</>
|
|
286
|
+
)
|
|
287
|
+
```
|
|
288
|
+
2. Define the 2nd sheet within the "parent" sheet. IOS handles this automatically by default 😎.
|
|
289
|
+
```tsx
|
|
290
|
+
const presentSheet2 = async () => {
|
|
291
|
+
await sheet2.current?.present() // Sheet 2 will now present 🎉
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
return (
|
|
295
|
+
<TrueSheet ref={sheet1}>
|
|
296
|
+
<Button onPress={presentSheet2} title="Present Sheet 2" />
|
|
297
|
+
|
|
298
|
+
// ...
|
|
299
|
+
|
|
300
|
+
<TrueSheet ref={sheet2}>
|
|
301
|
+
// ...
|
|
302
|
+
</TrueSheet>
|
|
303
|
+
</TrueSheet>
|
|
304
|
+
)
|
|
305
|
+
```
|
|
306
|
+
|
|
225
307
|
### Handling `ScrollView` on **Android**
|
|
226
308
|
|
|
227
309
|
On Android, `nestedScrollEnabled` needs to be enabled so that scrolling works when the sheet is expanded to its `maxHeight`.
|
|
@@ -252,9 +334,9 @@ return (
|
|
|
252
334
|
)
|
|
253
335
|
```
|
|
254
336
|
|
|
255
|
-
### Integrating `@react-navigation/native` on
|
|
337
|
+
### Integrating `@react-navigation/native` on **IOS**
|
|
256
338
|
|
|
257
|
-
On
|
|
339
|
+
On IOS, navigating to a [React Navigation](https://reactnavigation.org) screen from within the Sheet can cause issues. To resolve this, dismiss the sheet before navigating!
|
|
258
340
|
|
|
259
341
|
Example:
|
|
260
342
|
```tsx
|
|
@@ -25,7 +25,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
25
25
|
|
|
26
26
|
var sizes: Array<Any> = arrayOf("medium", "large")
|
|
27
27
|
|
|
28
|
-
var sheetView: ViewGroup
|
|
28
|
+
private var sheetView: ViewGroup
|
|
29
29
|
|
|
30
30
|
init {
|
|
31
31
|
setContentView(rootSheetView)
|
|
@@ -39,6 +39,9 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
39
39
|
WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
|
|
40
40
|
)
|
|
41
41
|
}
|
|
42
|
+
|
|
43
|
+
// Update the usable sheet height
|
|
44
|
+
maxScreenHeight = Utils.screenHeight(reactContext)
|
|
42
45
|
}
|
|
43
46
|
|
|
44
47
|
fun show(sizeIndex: Int) {
|
|
@@ -52,6 +55,12 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
52
55
|
}
|
|
53
56
|
}
|
|
54
57
|
|
|
58
|
+
fun positionFooter() {
|
|
59
|
+
footerView?.apply {
|
|
60
|
+
y = (maxScreenHeight - sheetView.top - height).toFloat()
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
55
64
|
/**
|
|
56
65
|
* Set the state based on the given size index.
|
|
57
66
|
*/
|
|
@@ -102,7 +111,10 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
102
111
|
else -> (maxScreenHeight * 0.5).toInt()
|
|
103
112
|
}
|
|
104
113
|
|
|
105
|
-
return
|
|
114
|
+
return when (maxSheetHeight) {
|
|
115
|
+
null -> height
|
|
116
|
+
else -> minOf(height, maxSheetHeight ?: maxScreenHeight)
|
|
117
|
+
}
|
|
106
118
|
}
|
|
107
119
|
|
|
108
120
|
/**
|
|
@@ -144,9 +156,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
144
156
|
else -> Utils.screenHeight(reactContext)
|
|
145
157
|
}
|
|
146
158
|
|
|
147
|
-
|
|
148
|
-
y = (maxScreenHeight - (sheetView.top ?: 0) - height).toFloat()
|
|
149
|
-
}
|
|
159
|
+
positionFooter()
|
|
150
160
|
}
|
|
151
161
|
})
|
|
152
162
|
}
|
|
@@ -162,9 +172,6 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
162
172
|
* Configure the sheet based on size preferences.
|
|
163
173
|
*/
|
|
164
174
|
fun configure() {
|
|
165
|
-
// Update the usable sheet height
|
|
166
|
-
maxScreenHeight = Utils.screenHeight(reactContext)
|
|
167
|
-
|
|
168
175
|
var contentHeight = 0
|
|
169
176
|
|
|
170
177
|
contentView?.let { contentHeight = it.height }
|
|
@@ -181,12 +188,12 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
181
188
|
when (sizes.size) {
|
|
182
189
|
1 -> {
|
|
183
190
|
maxHeight = getSizeHeight(sizes[0], contentHeight)
|
|
184
|
-
|
|
191
|
+
setPeekHeight(maxHeight, isShowing)
|
|
185
192
|
skipCollapsed = true
|
|
186
193
|
}
|
|
187
194
|
|
|
188
195
|
2 -> {
|
|
189
|
-
|
|
196
|
+
setPeekHeight(getSizeHeight(sizes[0], contentHeight), isShowing)
|
|
190
197
|
maxHeight = getSizeHeight(sizes[1], contentHeight)
|
|
191
198
|
}
|
|
192
199
|
|
|
@@ -194,7 +201,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
|
|
|
194
201
|
// Enables half expanded
|
|
195
202
|
isFitToContents = false
|
|
196
203
|
|
|
197
|
-
|
|
204
|
+
setPeekHeight(getSizeHeight(sizes[0], contentHeight), isShowing)
|
|
198
205
|
halfExpandedRatio = getSizeHeight(sizes[1], contentHeight).toFloat() / maxScreenHeight.toFloat()
|
|
199
206
|
maxHeight = getSizeHeight(sizes[2], contentHeight)
|
|
200
207
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
package com.lodev09.truesheet
|
|
2
2
|
|
|
3
3
|
import android.content.Context
|
|
4
|
-
import android.util.Log
|
|
5
4
|
import android.view.View
|
|
6
5
|
import android.view.ViewGroup
|
|
7
6
|
import android.view.ViewStructure
|
|
@@ -79,10 +78,8 @@ class TrueSheetView(context: Context) :
|
|
|
79
78
|
registerKeyboardManager()
|
|
80
79
|
|
|
81
80
|
// Initialize footer y
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
y = (sheetDialog.maxScreenHeight - sheetView.top - height).toFloat()
|
|
85
|
-
}
|
|
81
|
+
UiThreadUtil.runOnUiThread {
|
|
82
|
+
positionFooter()
|
|
86
83
|
}
|
|
87
84
|
|
|
88
85
|
presentPromise?.let { promise ->
|
|
@@ -96,8 +93,8 @@ class TrueSheetView(context: Context) :
|
|
|
96
93
|
|
|
97
94
|
// Setup listener when the dialog has been dismissed.
|
|
98
95
|
setOnDismissListener {
|
|
99
|
-
Log.d(TAG, "dismissed")
|
|
100
96
|
unregisterKeyboardManager()
|
|
97
|
+
|
|
101
98
|
dismissPromise?.let { promise ->
|
|
102
99
|
promise()
|
|
103
100
|
dismissPromise = null
|
|
@@ -221,9 +218,18 @@ class TrueSheetView(context: Context) :
|
|
|
221
218
|
sheetDialog.dismiss()
|
|
222
219
|
}
|
|
223
220
|
|
|
221
|
+
private fun configureIfPresented() {
|
|
222
|
+
if (sheetDialog.isShowing) {
|
|
223
|
+
UiThreadUtil.runOnUiThread {
|
|
224
|
+
sheetDialog.configure()
|
|
225
|
+
sheetDialog.positionFooter()
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
224
230
|
fun setMaxHeight(height: Int) {
|
|
225
231
|
sheetDialog.maxSheetHeight = height
|
|
226
|
-
|
|
232
|
+
configureIfPresented()
|
|
227
233
|
}
|
|
228
234
|
|
|
229
235
|
fun setDismissible(dismissible: Boolean) {
|
|
@@ -233,7 +239,7 @@ class TrueSheetView(context: Context) :
|
|
|
233
239
|
|
|
234
240
|
fun setSizes(newSizes: Array<Any>) {
|
|
235
241
|
sheetDialog.sizes = newSizes
|
|
236
|
-
|
|
242
|
+
configureIfPresented()
|
|
237
243
|
}
|
|
238
244
|
|
|
239
245
|
/**
|
package/ios/TrueSheetView.swift
CHANGED
|
@@ -8,20 +8,25 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _TrueSheetModule = require("./TrueSheetModule");
|
|
10
10
|
var _TrueSheetGrabber = require("./TrueSheetGrabber");
|
|
11
|
+
var _TrueSheetFooter = require("./TrueSheetFooter");
|
|
11
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
14
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
15
|
+
const NATIVE_COMPONENT_NAME = 'TrueSheetView';
|
|
14
16
|
const LINKING_ERROR = `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` + _reactNative.Platform.select({
|
|
15
17
|
ios: "- You have run 'pod install'\n",
|
|
16
18
|
default: ''
|
|
17
19
|
}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo Go\n';
|
|
18
|
-
const
|
|
19
|
-
const TrueSheetNativeView = (0, _reactNative.requireNativeComponent)(ComponentName);
|
|
20
|
+
const TrueSheetNativeView = (0, _reactNative.requireNativeComponent)(NATIVE_COMPONENT_NAME);
|
|
20
21
|
if (!TrueSheetNativeView) {
|
|
21
22
|
throw new Error(LINKING_ERROR);
|
|
22
23
|
}
|
|
23
24
|
class TrueSheet extends _react.PureComponent {
|
|
24
25
|
displayName = 'TrueSheet';
|
|
26
|
+
/**
|
|
27
|
+
* Map of sheet names against their handle.
|
|
28
|
+
*/
|
|
29
|
+
static handles = {};
|
|
25
30
|
constructor(props) {
|
|
26
31
|
super(props);
|
|
27
32
|
this.ref = /*#__PURE__*/(0, _react.createRef)();
|
|
@@ -32,15 +37,54 @@ class TrueSheet extends _react.PureComponent {
|
|
|
32
37
|
scrollableHandle: null
|
|
33
38
|
};
|
|
34
39
|
}
|
|
40
|
+
static getHandle(name) {
|
|
41
|
+
const handle = TrueSheet.handles[name];
|
|
42
|
+
if (!handle) {
|
|
43
|
+
console.warn(`Could not get native view tag from "${name}". Check your name prop.`);
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
return handle;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Present the sheet by given `name`.
|
|
51
|
+
* See `name` prop.
|
|
52
|
+
*/
|
|
53
|
+
static async present(name, index = 0) {
|
|
54
|
+
const handle = TrueSheet.getHandle(name);
|
|
55
|
+
if (!handle) return;
|
|
56
|
+
await _TrueSheetModule.TrueSheetModule.present(handle, index);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Dismiss the sheet by given `name`.
|
|
61
|
+
* See `name` prop.
|
|
62
|
+
*/
|
|
63
|
+
static async dismiss(name) {
|
|
64
|
+
const handle = TrueSheet.getHandle(name);
|
|
65
|
+
if (!handle) return;
|
|
66
|
+
await _TrueSheetModule.TrueSheetModule.dismiss(handle);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Resize the sheet by given `name`.
|
|
71
|
+
* See `name` prop.
|
|
72
|
+
*/
|
|
73
|
+
static async resize(name, index) {
|
|
74
|
+
await TrueSheet.present(name, index);
|
|
75
|
+
}
|
|
35
76
|
get handle() {
|
|
36
77
|
const nodeHandle = (0, _reactNative.findNodeHandle)(this.ref.current);
|
|
37
78
|
if (nodeHandle == null || nodeHandle === -1) {
|
|
38
|
-
throw new Error(
|
|
79
|
+
throw new Error('Could not get native view tag');
|
|
39
80
|
}
|
|
40
81
|
return nodeHandle;
|
|
41
82
|
}
|
|
42
83
|
updateState() {
|
|
43
84
|
const scrollableHandle = this.props.scrollRef?.current ? (0, _reactNative.findNodeHandle)(this.props.scrollRef.current) : null;
|
|
85
|
+
if (this.props.name) {
|
|
86
|
+
TrueSheet.handles[this.props.name] = this.handle;
|
|
87
|
+
}
|
|
44
88
|
this.setState({
|
|
45
89
|
scrollableHandle
|
|
46
90
|
});
|
|
@@ -54,18 +98,9 @@ class TrueSheet extends _react.PureComponent {
|
|
|
54
98
|
onDismiss() {
|
|
55
99
|
this.props.onDismiss?.();
|
|
56
100
|
}
|
|
57
|
-
componentDidMount() {
|
|
58
|
-
if (this.props.sizes && this.props.sizes.length > 3) {
|
|
59
|
-
console.warn('TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.');
|
|
60
|
-
}
|
|
61
|
-
this.updateState();
|
|
62
|
-
}
|
|
63
|
-
componentDidUpdate() {
|
|
64
|
-
this.updateState();
|
|
65
|
-
}
|
|
66
101
|
|
|
67
102
|
/**
|
|
68
|
-
* Present the
|
|
103
|
+
* Present the sheet. Optionally accepts a size `index`.
|
|
69
104
|
* See `sizes` prop
|
|
70
105
|
*/
|
|
71
106
|
async present(index = 0) {
|
|
@@ -86,6 +121,15 @@ class TrueSheet extends _react.PureComponent {
|
|
|
86
121
|
async dismiss() {
|
|
87
122
|
await _TrueSheetModule.TrueSheetModule.dismiss(this.handle);
|
|
88
123
|
}
|
|
124
|
+
componentDidMount() {
|
|
125
|
+
if (this.props.sizes && this.props.sizes.length > 3) {
|
|
126
|
+
console.warn('TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.');
|
|
127
|
+
}
|
|
128
|
+
this.updateState();
|
|
129
|
+
}
|
|
130
|
+
componentDidUpdate() {
|
|
131
|
+
this.updateState();
|
|
132
|
+
}
|
|
89
133
|
render() {
|
|
90
134
|
const {
|
|
91
135
|
sizes = ['medium', 'large'],
|
|
@@ -135,24 +179,14 @@ class TrueSheet extends _react.PureComponent {
|
|
|
135
179
|
style: contentContainerStyle
|
|
136
180
|
}, children), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
137
181
|
collapsable: false
|
|
138
|
-
}, /*#__PURE__*/_react.default.createElement(TrueSheetFooter, {
|
|
139
|
-
|
|
182
|
+
}, /*#__PURE__*/_react.default.createElement(_TrueSheetFooter.TrueSheetFooter, {
|
|
183
|
+
Component: FooterComponent
|
|
140
184
|
})), _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react.default.createElement(_TrueSheetGrabber.TrueSheetGrabber, _extends({
|
|
141
185
|
visible: grabber
|
|
142
186
|
}, grabberProps))));
|
|
143
187
|
}
|
|
144
188
|
}
|
|
145
189
|
exports.TrueSheet = TrueSheet;
|
|
146
|
-
const TrueSheetFooter = props => {
|
|
147
|
-
const {
|
|
148
|
-
FooterComponent
|
|
149
|
-
} = props;
|
|
150
|
-
if (!FooterComponent) return null;
|
|
151
|
-
if (typeof FooterComponent !== 'function') {
|
|
152
|
-
return FooterComponent;
|
|
153
|
-
}
|
|
154
|
-
return /*#__PURE__*/_react.default.createElement(FooterComponent, null);
|
|
155
|
-
};
|
|
156
190
|
const $nativeSheet = {
|
|
157
191
|
position: 'absolute',
|
|
158
192
|
left: -9999,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_TrueSheetModule","_TrueSheetGrabber","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","LINKING_ERROR","Platform","select","ios","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_TrueSheetModule","_TrueSheetGrabber","_TrueSheetFooter","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","NATIVE_COMPONENT_NAME","LINKING_ERROR","Platform","select","ios","TrueSheetNativeView","requireNativeComponent","Error","TrueSheet","PureComponent","displayName","handles","constructor","props","ref","createRef","onDismiss","onPresent","onSizeChange","state","scrollableHandle","getHandle","name","handle","console","warn","present","index","TrueSheetModule","dismiss","resize","nodeHandle","findNodeHandle","current","updateState","scrollRef","setState","event","nativeEvent","componentDidMount","sizes","componentDidUpdate","render","backgroundColor","dismissible","grabber","grabberProps","blurTint","cornerRadius","maxHeight","FooterComponent","style","contentContainerStyle","children","rest","createElement","$nativeSheet","View","collapsable","overflow","undefined","android","borderTopLeftRadius","borderTopRightRadius","TrueSheetFooter","Component","OS","TrueSheetGrabber","visible","exports","position","left","zIndex"],"sourceRoot":"../../src","sources":["TrueSheet.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TrueSheetFooter = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const TrueSheetFooter = props => {
|
|
10
|
+
const {
|
|
11
|
+
Component
|
|
12
|
+
} = props;
|
|
13
|
+
if (!Component) return null;
|
|
14
|
+
if (typeof Component !== 'function') {
|
|
15
|
+
return Component;
|
|
16
|
+
}
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(Component, null);
|
|
18
|
+
};
|
|
19
|
+
exports.TrueSheetFooter = TrueSheetFooter;
|
|
20
|
+
//# sourceMappingURL=TrueSheetFooter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","obj","__esModule","default","TrueSheetFooter","props","Component","createElement","exports"],"sourceRoot":"../../src","sources":["TrueSheetFooter.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAyB,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOlB,MAAMG,eAAe,GAAIC,KAA2B,IAAK;EAC9D,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAE3B,IAAI,CAACC,SAAS,EAAE,OAAO,IAAI;EAE3B,IAAI,OAAOA,SAAS,KAAK,UAAU,EAAE;IACnC,OAAOA,SAAS;EAClB;EAEA,oBAAOR,MAAA,CAAAK,OAAA,CAAAI,aAAA,CAACD,SAAS,MAAE,CAAC;AACtB,CAAC;AAAAE,OAAA,CAAAJ,eAAA,GAAAA,eAAA","ignoreList":[]}
|
|
@@ -23,6 +23,9 @@ Object.keys(_TrueSheetGrabber).forEach(function (key) {
|
|
|
23
23
|
});
|
|
24
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
25
|
class TrueSheet extends _react.default.Component {
|
|
26
|
+
static dismiss = jest.fn();
|
|
27
|
+
static present = jest.fn();
|
|
28
|
+
static resize = jest.fn();
|
|
26
29
|
dismiss = jest.fn();
|
|
27
30
|
present = jest.fn();
|
|
28
31
|
resize = jest.fn();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_TrueSheetGrabber","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","obj","__esModule","default","TrueSheet","React","Component","dismiss","jest","fn","present","resize","render","createElement","View","props"],"sourceRoot":"../../../src","sources":["__mocks__/index.js"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAF,iBAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,iBAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,iBAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAAmC,SAAAP,uBAAAgB,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE5B,MAAMG,SAAS,SAASC,cAAK,CAACC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_TrueSheetGrabber","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","obj","__esModule","default","TrueSheet","React","Component","dismiss","jest","fn","present","resize","render","createElement","View","props"],"sourceRoot":"../../../src","sources":["__mocks__/index.js"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AAAAG,MAAA,CAAAC,IAAA,CAAAF,iBAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,iBAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,iBAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAAmC,SAAAP,uBAAAgB,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE5B,MAAMG,SAAS,SAASC,cAAK,CAACC,SAAS,CAAC;EAC7C,OAAOC,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EAC1B,OAAOC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EAC1B,OAAOE,MAAM,GAAGH,IAAI,CAACC,EAAE,CAAC,CAAC;EAEzBF,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBE,MAAM,GAAGH,IAAI,CAACC,EAAE,CAAC,CAAC;EAElBG,MAAMA,CAAA,EAAG;IACP,oBAAO5B,MAAA,CAAAmB,OAAA,CAAAU,aAAA,CAAC1B,YAAA,CAAA2B,IAAI,EAAK,IAAI,CAACC,KAAQ,CAAC;EACjC;AACF;AAAClB,OAAA,CAAAO,SAAA,GAAAA,SAAA","ignoreList":[]}
|
package/lib/module/TrueSheet.js
CHANGED
|
@@ -3,17 +3,22 @@ import React, { PureComponent, createRef } from 'react';
|
|
|
3
3
|
import { requireNativeComponent, Platform, findNodeHandle, View } from 'react-native';
|
|
4
4
|
import { TrueSheetModule } from './TrueSheetModule';
|
|
5
5
|
import { TrueSheetGrabber } from './TrueSheetGrabber';
|
|
6
|
+
import { TrueSheetFooter } from './TrueSheetFooter';
|
|
7
|
+
const NATIVE_COMPONENT_NAME = 'TrueSheetView';
|
|
6
8
|
const LINKING_ERROR = `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` + Platform.select({
|
|
7
9
|
ios: "- You have run 'pod install'\n",
|
|
8
10
|
default: ''
|
|
9
11
|
}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo Go\n';
|
|
10
|
-
const
|
|
11
|
-
const TrueSheetNativeView = requireNativeComponent(ComponentName);
|
|
12
|
+
const TrueSheetNativeView = requireNativeComponent(NATIVE_COMPONENT_NAME);
|
|
12
13
|
if (!TrueSheetNativeView) {
|
|
13
14
|
throw new Error(LINKING_ERROR);
|
|
14
15
|
}
|
|
15
16
|
export class TrueSheet extends PureComponent {
|
|
16
17
|
displayName = 'TrueSheet';
|
|
18
|
+
/**
|
|
19
|
+
* Map of sheet names against their handle.
|
|
20
|
+
*/
|
|
21
|
+
static handles = {};
|
|
17
22
|
constructor(props) {
|
|
18
23
|
super(props);
|
|
19
24
|
this.ref = /*#__PURE__*/createRef();
|
|
@@ -24,15 +29,54 @@ export class TrueSheet extends PureComponent {
|
|
|
24
29
|
scrollableHandle: null
|
|
25
30
|
};
|
|
26
31
|
}
|
|
32
|
+
static getHandle(name) {
|
|
33
|
+
const handle = TrueSheet.handles[name];
|
|
34
|
+
if (!handle) {
|
|
35
|
+
console.warn(`Could not get native view tag from "${name}". Check your name prop.`);
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
return handle;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Present the sheet by given `name`.
|
|
43
|
+
* See `name` prop.
|
|
44
|
+
*/
|
|
45
|
+
static async present(name, index = 0) {
|
|
46
|
+
const handle = TrueSheet.getHandle(name);
|
|
47
|
+
if (!handle) return;
|
|
48
|
+
await TrueSheetModule.present(handle, index);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Dismiss the sheet by given `name`.
|
|
53
|
+
* See `name` prop.
|
|
54
|
+
*/
|
|
55
|
+
static async dismiss(name) {
|
|
56
|
+
const handle = TrueSheet.getHandle(name);
|
|
57
|
+
if (!handle) return;
|
|
58
|
+
await TrueSheetModule.dismiss(handle);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Resize the sheet by given `name`.
|
|
63
|
+
* See `name` prop.
|
|
64
|
+
*/
|
|
65
|
+
static async resize(name, index) {
|
|
66
|
+
await TrueSheet.present(name, index);
|
|
67
|
+
}
|
|
27
68
|
get handle() {
|
|
28
69
|
const nodeHandle = findNodeHandle(this.ref.current);
|
|
29
70
|
if (nodeHandle == null || nodeHandle === -1) {
|
|
30
|
-
throw new Error(
|
|
71
|
+
throw new Error('Could not get native view tag');
|
|
31
72
|
}
|
|
32
73
|
return nodeHandle;
|
|
33
74
|
}
|
|
34
75
|
updateState() {
|
|
35
76
|
const scrollableHandle = this.props.scrollRef?.current ? findNodeHandle(this.props.scrollRef.current) : null;
|
|
77
|
+
if (this.props.name) {
|
|
78
|
+
TrueSheet.handles[this.props.name] = this.handle;
|
|
79
|
+
}
|
|
36
80
|
this.setState({
|
|
37
81
|
scrollableHandle
|
|
38
82
|
});
|
|
@@ -46,18 +90,9 @@ export class TrueSheet extends PureComponent {
|
|
|
46
90
|
onDismiss() {
|
|
47
91
|
this.props.onDismiss?.();
|
|
48
92
|
}
|
|
49
|
-
componentDidMount() {
|
|
50
|
-
if (this.props.sizes && this.props.sizes.length > 3) {
|
|
51
|
-
console.warn('TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.');
|
|
52
|
-
}
|
|
53
|
-
this.updateState();
|
|
54
|
-
}
|
|
55
|
-
componentDidUpdate() {
|
|
56
|
-
this.updateState();
|
|
57
|
-
}
|
|
58
93
|
|
|
59
94
|
/**
|
|
60
|
-
* Present the
|
|
95
|
+
* Present the sheet. Optionally accepts a size `index`.
|
|
61
96
|
* See `sizes` prop
|
|
62
97
|
*/
|
|
63
98
|
async present(index = 0) {
|
|
@@ -78,6 +113,15 @@ export class TrueSheet extends PureComponent {
|
|
|
78
113
|
async dismiss() {
|
|
79
114
|
await TrueSheetModule.dismiss(this.handle);
|
|
80
115
|
}
|
|
116
|
+
componentDidMount() {
|
|
117
|
+
if (this.props.sizes && this.props.sizes.length > 3) {
|
|
118
|
+
console.warn('TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.');
|
|
119
|
+
}
|
|
120
|
+
this.updateState();
|
|
121
|
+
}
|
|
122
|
+
componentDidUpdate() {
|
|
123
|
+
this.updateState();
|
|
124
|
+
}
|
|
81
125
|
render() {
|
|
82
126
|
const {
|
|
83
127
|
sizes = ['medium', 'large'],
|
|
@@ -128,22 +172,12 @@ export class TrueSheet extends PureComponent {
|
|
|
128
172
|
}, children), /*#__PURE__*/React.createElement(View, {
|
|
129
173
|
collapsable: false
|
|
130
174
|
}, /*#__PURE__*/React.createElement(TrueSheetFooter, {
|
|
131
|
-
|
|
175
|
+
Component: FooterComponent
|
|
132
176
|
})), Platform.OS === 'android' && /*#__PURE__*/React.createElement(TrueSheetGrabber, _extends({
|
|
133
177
|
visible: grabber
|
|
134
178
|
}, grabberProps))));
|
|
135
179
|
}
|
|
136
180
|
}
|
|
137
|
-
const TrueSheetFooter = props => {
|
|
138
|
-
const {
|
|
139
|
-
FooterComponent
|
|
140
|
-
} = props;
|
|
141
|
-
if (!FooterComponent) return null;
|
|
142
|
-
if (typeof FooterComponent !== 'function') {
|
|
143
|
-
return FooterComponent;
|
|
144
|
-
}
|
|
145
|
-
return /*#__PURE__*/React.createElement(FooterComponent, null);
|
|
146
|
-
};
|
|
147
181
|
const $nativeSheet = {
|
|
148
182
|
position: 'absolute',
|
|
149
183
|
left: -9999,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","PureComponent","createRef","requireNativeComponent","Platform","findNodeHandle","View","TrueSheetModule","TrueSheetGrabber","LINKING_ERROR","select","ios","default","
|
|
1
|
+
{"version":3,"names":["React","PureComponent","createRef","requireNativeComponent","Platform","findNodeHandle","View","TrueSheetModule","TrueSheetGrabber","TrueSheetFooter","NATIVE_COMPONENT_NAME","LINKING_ERROR","select","ios","default","TrueSheetNativeView","Error","TrueSheet","displayName","handles","constructor","props","ref","onDismiss","bind","onPresent","onSizeChange","state","scrollableHandle","getHandle","name","handle","console","warn","present","index","dismiss","resize","nodeHandle","current","updateState","scrollRef","setState","event","nativeEvent","componentDidMount","sizes","length","componentDidUpdate","render","backgroundColor","dismissible","grabber","grabberProps","blurTint","cornerRadius","maxHeight","FooterComponent","style","contentContainerStyle","children","rest","createElement","$nativeSheet","_extends","collapsable","overflow","undefined","android","borderTopLeftRadius","borderTopRightRadius","Component","OS","visible","position","left","zIndex"],"sourceRoot":"../../src","sources":["TrueSheet.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const TrueSheetFooter = props => {
|
|
3
|
+
const {
|
|
4
|
+
Component
|
|
5
|
+
} = props;
|
|
6
|
+
if (!Component) return null;
|
|
7
|
+
if (typeof Component !== 'function') {
|
|
8
|
+
return Component;
|
|
9
|
+
}
|
|
10
|
+
return /*#__PURE__*/React.createElement(Component, null);
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=TrueSheetFooter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","TrueSheetFooter","props","Component","createElement"],"sourceRoot":"../../src","sources":["TrueSheetFooter.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAOzB,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC9D,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAE3B,IAAI,CAACC,SAAS,EAAE,OAAO,IAAI;EAE3B,IAAI,OAAOA,SAAS,KAAK,UAAU,EAAE;IACnC,OAAOA,SAAS;EAClB;EAEA,oBAAOH,KAAA,CAAAI,aAAA,CAACD,SAAS,MAAE,CAAC;AACtB,CAAC","ignoreList":[]}
|
|
@@ -2,6 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
export * from '../TrueSheetGrabber';
|
|
4
4
|
export class TrueSheet extends React.Component {
|
|
5
|
+
static dismiss = jest.fn();
|
|
6
|
+
static present = jest.fn();
|
|
7
|
+
static resize = jest.fn();
|
|
5
8
|
dismiss = jest.fn();
|
|
6
9
|
present = jest.fn();
|
|
7
10
|
resize = jest.fn();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","TrueSheet","Component","dismiss","jest","fn","present","resize","render","createElement","props"],"sourceRoot":"../../../src","sources":["__mocks__/index.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,cAAc,qBAAqB;AAEnC,OAAO,MAAMC,SAAS,SAASF,KAAK,CAACG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"names":["React","View","TrueSheet","Component","dismiss","jest","fn","present","resize","render","createElement","props"],"sourceRoot":"../../../src","sources":["__mocks__/index.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,cAAc,qBAAqB;AAEnC,OAAO,MAAMC,SAAS,SAASF,KAAK,CAACG,SAAS,CAAC;EAC7C,OAAOC,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EAC1B,OAAOC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EAC1B,OAAOE,MAAM,GAAGH,IAAI,CAACC,EAAE,CAAC,CAAC;EAEzBF,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBE,MAAM,GAAGH,IAAI,CAACC,EAAE,CAAC,CAAC;EAElBG,MAAMA,CAAA,EAAG;IACP,oBAAOT,KAAA,CAAAU,aAAA,CAACT,IAAI,EAAK,IAAI,CAACU,KAAQ,CAAC;EACjC;AACF","ignoreList":[]}
|
|
@@ -6,16 +6,34 @@ interface TrueSheetState {
|
|
|
6
6
|
export declare class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
7
7
|
displayName: string;
|
|
8
8
|
private readonly ref;
|
|
9
|
+
/**
|
|
10
|
+
* Map of sheet names against their handle.
|
|
11
|
+
*/
|
|
12
|
+
private static readonly handles;
|
|
9
13
|
constructor(props: TrueSheetProps);
|
|
14
|
+
private static getHandle;
|
|
15
|
+
/**
|
|
16
|
+
* Present the sheet by given `name`.
|
|
17
|
+
* See `name` prop.
|
|
18
|
+
*/
|
|
19
|
+
static present(name: string, index?: number): Promise<void>;
|
|
20
|
+
/**
|
|
21
|
+
* Dismiss the sheet by given `name`.
|
|
22
|
+
* See `name` prop.
|
|
23
|
+
*/
|
|
24
|
+
static dismiss(name: string): Promise<void>;
|
|
25
|
+
/**
|
|
26
|
+
* Resize the sheet by given `name`.
|
|
27
|
+
* See `name` prop.
|
|
28
|
+
*/
|
|
29
|
+
static resize(name: string, index: number): Promise<void>;
|
|
10
30
|
private get handle();
|
|
11
31
|
private updateState;
|
|
12
32
|
private onSizeChange;
|
|
13
33
|
private onPresent;
|
|
14
34
|
private onDismiss;
|
|
15
|
-
componentDidMount(): void;
|
|
16
|
-
componentDidUpdate(): void;
|
|
17
35
|
/**
|
|
18
|
-
* Present the
|
|
36
|
+
* Present the sheet. Optionally accepts a size `index`.
|
|
19
37
|
* See `sizes` prop
|
|
20
38
|
*/
|
|
21
39
|
present(index?: number): Promise<void>;
|
|
@@ -28,6 +46,8 @@ export declare class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetSt
|
|
|
28
46
|
* Dismisses the Sheet
|
|
29
47
|
*/
|
|
30
48
|
dismiss(): Promise<void>;
|
|
49
|
+
componentDidMount(): void;
|
|
50
|
+
componentDidUpdate(): void;
|
|
31
51
|
render(): ReactNode;
|
|
32
52
|
}
|
|
33
53
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;AAoBvD,UAAU,cAAc;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAQD,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,WAAW,SAAc;IAEzB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAsB;IAE1C;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAiC;gBAEpD,KAAK,EAAE,cAAc;IAcjC,OAAO,CAAC,MAAM,CAAC,SAAS;IAUxB;;;OAGG;WACiB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,GAAE,MAAU;IAO3D;;;OAGG;WACiB,OAAO,CAAC,IAAI,EAAE,MAAM;IAOxC;;;OAGG;WACiB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAItD,OAAO,KAAK,MAAM,GAOjB;IAED,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB;;;OAGG;IACU,OAAO,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD;;;OAGG;IACU,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD;;OAEG;IACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC,iBAAiB,IAAI,IAAI;IAUzB,kBAAkB,IAAI,IAAI;IAI1B,MAAM,IAAI,SAAS;CA6DpB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TrueSheetProps } from './types';
|
|
3
|
+
interface TrueSheetFooterProps {
|
|
4
|
+
Component?: TrueSheetProps['FooterComponent'];
|
|
5
|
+
}
|
|
6
|
+
export declare const TrueSheetFooter: (props: TrueSheetFooterProps) => React.JSX.Element | null;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=TrueSheetFooter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrueSheetFooter.d.ts","sourceRoot":"","sources":["../../../src/TrueSheetFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,6BAU1D,CAAA"}
|
|
@@ -61,6 +61,21 @@ export type SheetSize =
|
|
|
61
61
|
*/
|
|
62
62
|
| 'large';
|
|
63
63
|
export interface TrueSheetProps extends ViewProps {
|
|
64
|
+
/**
|
|
65
|
+
* The name to reference this sheet. It has to be unique.
|
|
66
|
+
* You can then present this sheet globally using its `name`.
|
|
67
|
+
*
|
|
68
|
+
* Example:
|
|
69
|
+
* ```ts
|
|
70
|
+
* <TrueSheet name="my-awesome-sheet">
|
|
71
|
+
* <MyComponent />
|
|
72
|
+
* </TrueSheet>
|
|
73
|
+
* ```
|
|
74
|
+
* ```ts
|
|
75
|
+
* TrueSheet.present('my-awesome-sheet')
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
name?: string;
|
|
64
79
|
/**
|
|
65
80
|
* The sizes you want the Sheet to support.
|
|
66
81
|
* Maximum of 3 sizes only; collapsed, half-expanded, expanded.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAA;IAEvD;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAA;IAEvD;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}
|
package/package.json
CHANGED
package/src/TrueSheet.tsx
CHANGED
|
@@ -12,38 +12,43 @@ import {
|
|
|
12
12
|
import type { TrueSheetProps, SizeInfo } from './types'
|
|
13
13
|
import { TrueSheetModule } from './TrueSheetModule'
|
|
14
14
|
import { TrueSheetGrabber } from './TrueSheetGrabber'
|
|
15
|
+
import { TrueSheetFooter } from './TrueSheetFooter'
|
|
15
16
|
|
|
17
|
+
const NATIVE_COMPONENT_NAME = 'TrueSheetView'
|
|
16
18
|
const LINKING_ERROR =
|
|
17
19
|
`The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` +
|
|
18
20
|
Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
|
|
19
21
|
'- You rebuilt the app after installing the package\n' +
|
|
20
22
|
'- You are not using Expo Go\n'
|
|
21
23
|
|
|
22
|
-
const ComponentName = 'TrueSheetView'
|
|
23
|
-
|
|
24
24
|
interface TrueSheetNativeViewProps extends Omit<TrueSheetProps, 'onPresent' | 'onSizeChange'> {
|
|
25
25
|
scrollableHandle: number | null
|
|
26
26
|
onPresent: (event: NativeSyntheticEvent<SizeInfo>) => void
|
|
27
27
|
onSizeChange: (event: NativeSyntheticEvent<SizeInfo>) => void
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(ComponentName)
|
|
31
|
-
|
|
32
|
-
if (!TrueSheetNativeView) {
|
|
33
|
-
throw new Error(LINKING_ERROR)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
30
|
type NativeRef = Component<TrueSheetNativeViewProps> & Readonly<NativeMethods>
|
|
37
31
|
|
|
38
32
|
interface TrueSheetState {
|
|
39
33
|
scrollableHandle: number | null
|
|
40
34
|
}
|
|
41
35
|
|
|
36
|
+
const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(NATIVE_COMPONENT_NAME)
|
|
37
|
+
|
|
38
|
+
if (!TrueSheetNativeView) {
|
|
39
|
+
throw new Error(LINKING_ERROR)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
42
|
export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
43
43
|
displayName = 'TrueSheet'
|
|
44
44
|
|
|
45
45
|
private readonly ref: RefObject<NativeRef>
|
|
46
46
|
|
|
47
|
+
/**
|
|
48
|
+
* Map of sheet names against their handle.
|
|
49
|
+
*/
|
|
50
|
+
private static readonly handles: { [name: string]: number } = {}
|
|
51
|
+
|
|
47
52
|
constructor(props: TrueSheetProps) {
|
|
48
53
|
super(props)
|
|
49
54
|
|
|
@@ -58,10 +63,50 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
58
63
|
}
|
|
59
64
|
}
|
|
60
65
|
|
|
66
|
+
private static getHandle(name: string) {
|
|
67
|
+
const handle = TrueSheet.handles[name]
|
|
68
|
+
if (!handle) {
|
|
69
|
+
console.warn(`Could not get native view tag from "${name}". Check your name prop.`)
|
|
70
|
+
return
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return handle
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Present the sheet by given `name`.
|
|
78
|
+
* See `name` prop.
|
|
79
|
+
*/
|
|
80
|
+
public static async present(name: string, index: number = 0) {
|
|
81
|
+
const handle = TrueSheet.getHandle(name)
|
|
82
|
+
if (!handle) return
|
|
83
|
+
|
|
84
|
+
await TrueSheetModule.present(handle, index)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Dismiss the sheet by given `name`.
|
|
89
|
+
* See `name` prop.
|
|
90
|
+
*/
|
|
91
|
+
public static async dismiss(name: string) {
|
|
92
|
+
const handle = TrueSheet.getHandle(name)
|
|
93
|
+
if (!handle) return
|
|
94
|
+
|
|
95
|
+
await TrueSheetModule.dismiss(handle)
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Resize the sheet by given `name`.
|
|
100
|
+
* See `name` prop.
|
|
101
|
+
*/
|
|
102
|
+
public static async resize(name: string, index: number) {
|
|
103
|
+
await TrueSheet.present(name, index)
|
|
104
|
+
}
|
|
105
|
+
|
|
61
106
|
private get handle(): number {
|
|
62
107
|
const nodeHandle = findNodeHandle(this.ref.current)
|
|
63
108
|
if (nodeHandle == null || nodeHandle === -1) {
|
|
64
|
-
throw new Error(
|
|
109
|
+
throw new Error('Could not get native view tag')
|
|
65
110
|
}
|
|
66
111
|
|
|
67
112
|
return nodeHandle
|
|
@@ -72,6 +117,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
72
117
|
? findNodeHandle(this.props.scrollRef.current)
|
|
73
118
|
: null
|
|
74
119
|
|
|
120
|
+
if (this.props.name) {
|
|
121
|
+
TrueSheet.handles[this.props.name] = this.handle
|
|
122
|
+
}
|
|
123
|
+
|
|
75
124
|
this.setState({
|
|
76
125
|
scrollableHandle,
|
|
77
126
|
})
|
|
@@ -89,22 +138,8 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
89
138
|
this.props.onDismiss?.()
|
|
90
139
|
}
|
|
91
140
|
|
|
92
|
-
componentDidMount(): void {
|
|
93
|
-
if (this.props.sizes && this.props.sizes.length > 3) {
|
|
94
|
-
console.warn(
|
|
95
|
-
'TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.'
|
|
96
|
-
)
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
this.updateState()
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
componentDidUpdate(): void {
|
|
103
|
-
this.updateState()
|
|
104
|
-
}
|
|
105
|
-
|
|
106
141
|
/**
|
|
107
|
-
* Present the
|
|
142
|
+
* Present the sheet. Optionally accepts a size `index`.
|
|
108
143
|
* See `sizes` prop
|
|
109
144
|
*/
|
|
110
145
|
public async present(index: number = 0): Promise<void> {
|
|
@@ -126,6 +161,20 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
126
161
|
await TrueSheetModule.dismiss(this.handle)
|
|
127
162
|
}
|
|
128
163
|
|
|
164
|
+
componentDidMount(): void {
|
|
165
|
+
if (this.props.sizes && this.props.sizes.length > 3) {
|
|
166
|
+
console.warn(
|
|
167
|
+
'TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.'
|
|
168
|
+
)
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
this.updateState()
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
componentDidUpdate(): void {
|
|
175
|
+
this.updateState()
|
|
176
|
+
}
|
|
177
|
+
|
|
129
178
|
render(): ReactNode {
|
|
130
179
|
const {
|
|
131
180
|
sizes = ['medium', 'large'],
|
|
@@ -180,7 +229,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
180
229
|
{children}
|
|
181
230
|
</View>
|
|
182
231
|
<View collapsable={false}>
|
|
183
|
-
<TrueSheetFooter
|
|
232
|
+
<TrueSheetFooter Component={FooterComponent} />
|
|
184
233
|
</View>
|
|
185
234
|
{Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} {...grabberProps} />}
|
|
186
235
|
</View>
|
|
@@ -189,18 +238,6 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
189
238
|
}
|
|
190
239
|
}
|
|
191
240
|
|
|
192
|
-
const TrueSheetFooter = (props: Pick<TrueSheetProps, 'FooterComponent'>) => {
|
|
193
|
-
const { FooterComponent } = props
|
|
194
|
-
|
|
195
|
-
if (!FooterComponent) return null
|
|
196
|
-
|
|
197
|
-
if (typeof FooterComponent !== 'function') {
|
|
198
|
-
return FooterComponent
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
return <FooterComponent />
|
|
202
|
-
}
|
|
203
|
-
|
|
204
241
|
const $nativeSheet: ViewStyle = {
|
|
205
242
|
position: 'absolute',
|
|
206
243
|
left: -9999,
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import type { TrueSheetProps } from './types'
|
|
3
|
+
|
|
4
|
+
interface TrueSheetFooterProps {
|
|
5
|
+
Component?: TrueSheetProps['FooterComponent']
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export const TrueSheetFooter = (props: TrueSheetFooterProps) => {
|
|
9
|
+
const { Component } = props
|
|
10
|
+
|
|
11
|
+
if (!Component) return null
|
|
12
|
+
|
|
13
|
+
if (typeof Component !== 'function') {
|
|
14
|
+
return Component
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
return <Component />
|
|
18
|
+
}
|
package/src/__mocks__/index.js
CHANGED
|
@@ -4,6 +4,10 @@ import { View } from 'react-native'
|
|
|
4
4
|
export * from '../TrueSheetGrabber'
|
|
5
5
|
|
|
6
6
|
export class TrueSheet extends React.Component {
|
|
7
|
+
static dismiss = jest.fn()
|
|
8
|
+
static present = jest.fn()
|
|
9
|
+
static resize = jest.fn()
|
|
10
|
+
|
|
7
11
|
dismiss = jest.fn()
|
|
8
12
|
present = jest.fn()
|
|
9
13
|
resize = jest.fn()
|
package/src/types.ts
CHANGED
|
@@ -92,6 +92,21 @@ export type SheetSize =
|
|
|
92
92
|
| 'large'
|
|
93
93
|
|
|
94
94
|
export interface TrueSheetProps extends ViewProps {
|
|
95
|
+
/**
|
|
96
|
+
* The name to reference this sheet. It has to be unique.
|
|
97
|
+
* You can then present this sheet globally using its `name`.
|
|
98
|
+
*
|
|
99
|
+
* Example:
|
|
100
|
+
* ```ts
|
|
101
|
+
* <TrueSheet name="my-awesome-sheet">
|
|
102
|
+
* <MyComponent />
|
|
103
|
+
* </TrueSheet>
|
|
104
|
+
* ```
|
|
105
|
+
* ```ts
|
|
106
|
+
* TrueSheet.present('my-awesome-sheet')
|
|
107
|
+
* ```
|
|
108
|
+
*/
|
|
109
|
+
name?: string
|
|
95
110
|
/**
|
|
96
111
|
* The sizes you want the Sheet to support.
|
|
97
112
|
* Maximum of 3 sizes only; collapsed, half-expanded, expanded.
|