@lodev09/react-native-true-sheet 3.11.0-beta.0 → 3.11.0-beta.1
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/lib/module/TrueSheet.web.js +8 -5
- package/lib/module/TrueSheet.web.js.map +1 -1
- package/lib/module/web/vaul/index.js +34 -14
- package/lib/module/web/vaul/index.js.map +1 -1
- package/lib/typescript/src/TrueSheet.web.d.ts.map +1 -1
- package/lib/typescript/src/web/vaul/index.d.ts +1 -1
- package/lib/typescript/src/web/vaul/index.d.ts.map +1 -1
- package/lib/typescript/src/web/vaul/use-prevent-scroll.d.ts +2 -2
- package/lib/typescript/src/web/vaul/use-prevent-scroll.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/TrueSheet.web.tsx +8 -6
- package/src/web/vaul/index.tsx +489 -463
package/src/TrueSheet.web.tsx
CHANGED
|
@@ -117,6 +117,10 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
|
|
|
117
117
|
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
|
|
118
118
|
const isLandscapeOrTablet = windowWidth >= 600 || windowWidth > windowHeight;
|
|
119
119
|
|
|
120
|
+
// pageSizing=false implies a floating/detached sheet on web — mirrors iOS
|
|
121
|
+
// form-sheet semantics where the sheet is never edge-attached.
|
|
122
|
+
const effectiveDetached = !pageSizing || detached;
|
|
123
|
+
|
|
120
124
|
const colorScheme = useColorScheme();
|
|
121
125
|
const backgroundColor =
|
|
122
126
|
backgroundColorProp ??
|
|
@@ -260,7 +264,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
|
|
|
260
264
|
if (count === 0) return { index: -1, detent: 0 };
|
|
261
265
|
|
|
262
266
|
const windowH = window.innerHeight;
|
|
263
|
-
const effectiveH =
|
|
267
|
+
const effectiveH = effectiveDetached ? windowH - detachedOffset : windowH;
|
|
264
268
|
// Matches vaul's height ceiling: min(effectiveH, maxContentHeight).
|
|
265
269
|
const ceiling =
|
|
266
270
|
maxContentHeight !== undefined ? Math.min(effectiveH, maxContentHeight) : effectiveH;
|
|
@@ -329,7 +333,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
|
|
|
329
333
|
|
|
330
334
|
return { index: count - 1, detent: values[count - 1]! };
|
|
331
335
|
},
|
|
332
|
-
[
|
|
336
|
+
[effectiveDetached, detachedOffset, maxContentHeight]
|
|
333
337
|
);
|
|
334
338
|
|
|
335
339
|
const handlePositionChange = useCallback(
|
|
@@ -632,8 +636,6 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
|
|
|
632
636
|
const effectiveMaxContentHeight =
|
|
633
637
|
maxContentHeight ?? (isFormSheet ? windowHeight * DEFAULT_FORM_SHEET_HEIGHT_RATIO : undefined);
|
|
634
638
|
|
|
635
|
-
const effectiveDetached = isFormSheet || detached;
|
|
636
|
-
|
|
637
639
|
const effectiveDetachedOffset = isFormSheet
|
|
638
640
|
? Math.max(0, (windowHeight - (effectiveMaxContentHeight ?? 0)) / 2)
|
|
639
641
|
: detachedOffset;
|
|
@@ -653,7 +655,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
|
|
|
653
655
|
: (maxContentWidth ?? (pageSizing ? DEFAULT_MAX_WIDTH : undefined))
|
|
654
656
|
: undefined;
|
|
655
657
|
|
|
656
|
-
if (maxWidth == null && !
|
|
658
|
+
if (maxWidth == null && !effectiveDetached) return undefined;
|
|
657
659
|
|
|
658
660
|
let marginLeft: number | string;
|
|
659
661
|
let marginRight: number | string;
|
|
@@ -680,7 +682,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
|
|
|
680
682
|
pageSizing,
|
|
681
683
|
anchor,
|
|
682
684
|
anchorOffset,
|
|
683
|
-
|
|
685
|
+
effectiveDetached,
|
|
684
686
|
]);
|
|
685
687
|
|
|
686
688
|
const handleStyle = useMemo<React.CSSProperties>(
|