@tamagui/sheet 1.0.1-beta.193 → 1.0.1-beta.195
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Sheet.js +68 -54
- package/dist/cjs/Sheet.js.map +2 -2
- package/dist/esm/Sheet.js +67 -54
- package/dist/esm/Sheet.js.map +2 -2
- package/dist/jsx/Sheet.js +17 -7
- package/dist/jsx/Sheet.js.map +2 -2
- package/package.json +11 -10
- package/src/Sheet.tsx +72 -57
- package/types/Sheet.d.ts +21 -21
package/dist/cjs/Sheet.js
CHANGED
|
@@ -42,6 +42,7 @@ var import_core = require("@tamagui/core");
|
|
|
42
42
|
var import_portal = require("@tamagui/portal");
|
|
43
43
|
var import_remove_scroll = require("@tamagui/remove-scroll");
|
|
44
44
|
var import_stacks = require("@tamagui/stacks");
|
|
45
|
+
var import_use_constant = require("@tamagui/use-constant");
|
|
45
46
|
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
46
47
|
var import_react = __toESM(require("react"));
|
|
47
48
|
var import_react_native = require("react-native");
|
|
@@ -153,9 +154,13 @@ const sheetComponents = {
|
|
|
153
154
|
Overlay: SheetOverlay,
|
|
154
155
|
ScrollView: import_SheetScrollView.SheetScrollView
|
|
155
156
|
};
|
|
157
|
+
const ParentSheetContext = (0, import_react.createContext)({
|
|
158
|
+
zIndex: 40
|
|
159
|
+
});
|
|
156
160
|
const Sheet = (0, import_core.withStaticProperties)(
|
|
157
161
|
(0, import_core.themeable)(
|
|
158
162
|
(0, import_react.forwardRef)(function Sheet2(props, ref) {
|
|
163
|
+
const parentSheet = (0, import_react.useContext)(ParentSheetContext);
|
|
159
164
|
const {
|
|
160
165
|
__scopeSheet,
|
|
161
166
|
snapPoints: snapPointsProp = [80],
|
|
@@ -172,7 +177,7 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
172
177
|
disableDrag: disableDragProp,
|
|
173
178
|
modal = false,
|
|
174
179
|
handleDisableScroll = true,
|
|
175
|
-
zIndex =
|
|
180
|
+
zIndex = parentSheet.zIndex + 1
|
|
176
181
|
} = props;
|
|
177
182
|
if (process.env.NODE_ENV === "development") {
|
|
178
183
|
if (snapPointsProp.some((p) => p < 0 || p > 100)) {
|
|
@@ -190,7 +195,7 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
190
195
|
const disableDrag = disableDragProp ?? (controller == null ? void 0 : controller.disableDrag);
|
|
191
196
|
const themeName = (0, import_core.useThemeName)();
|
|
192
197
|
const contentRef = import_react.default.useRef(null);
|
|
193
|
-
const scrollBridge = (0,
|
|
198
|
+
const scrollBridge = (0, import_use_constant.useConstant)(() => ({
|
|
194
199
|
enabled: false,
|
|
195
200
|
y: 0,
|
|
196
201
|
paneY: 0,
|
|
@@ -347,6 +352,8 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
347
352
|
let previouslyScrolling = false;
|
|
348
353
|
const onMoveShouldSet = (_e, { dy }) => {
|
|
349
354
|
const isScrolled = scrollBridge.y !== 0;
|
|
355
|
+
const isDraggingUp = dy < 0;
|
|
356
|
+
const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
|
|
350
357
|
if (isScrolled) {
|
|
351
358
|
previouslyScrolling = true;
|
|
352
359
|
return false;
|
|
@@ -355,14 +362,12 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
355
362
|
previouslyScrolling = false;
|
|
356
363
|
return true;
|
|
357
364
|
}
|
|
358
|
-
const isDraggingUp = dy < 0;
|
|
359
|
-
const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
|
|
360
365
|
if (isAtTop) {
|
|
361
366
|
if (!isScrolled && isDraggingUp) {
|
|
362
367
|
return false;
|
|
363
368
|
}
|
|
364
369
|
}
|
|
365
|
-
return Math.abs(dy) >
|
|
370
|
+
return Math.abs(dy) > 5;
|
|
366
371
|
};
|
|
367
372
|
const grant = () => {
|
|
368
373
|
makeUnselectable(true);
|
|
@@ -437,56 +442,65 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
437
442
|
parentSheetContext(false);
|
|
438
443
|
};
|
|
439
444
|
}, [parentSheetContext, open]);
|
|
440
|
-
const
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
opacity: shouldHideParentSheet ? 0 : 1
|
|
445
|
+
const nextParentContext = (0, import_react.useMemo)(
|
|
446
|
+
() => ({
|
|
447
|
+
zIndex
|
|
448
|
+
}),
|
|
449
|
+
[zIndex]
|
|
450
|
+
);
|
|
451
|
+
const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParentSheetContext.Provider, {
|
|
452
|
+
value: nextParentContext,
|
|
453
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_SheetContext.SheetProvider, {
|
|
454
|
+
modal,
|
|
455
|
+
contentRef,
|
|
456
|
+
dismissOnOverlayPress,
|
|
457
|
+
dismissOnSnapToBottom,
|
|
458
|
+
open,
|
|
459
|
+
hidden: isHidden,
|
|
460
|
+
scope: __scopeSheet,
|
|
461
|
+
position,
|
|
462
|
+
snapPoints,
|
|
463
|
+
setPosition,
|
|
464
|
+
setOpen,
|
|
465
|
+
scrollBridge,
|
|
466
|
+
children: [
|
|
467
|
+
isResizing || shouldHideParentSheet ? null : overlayComponent,
|
|
468
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AnimatedView, {
|
|
469
|
+
ref,
|
|
470
|
+
...panResponder == null ? void 0 : panResponder.panHandlers,
|
|
471
|
+
onLayout: (e) => {
|
|
472
|
+
const next = e.nativeEvent.layout.height;
|
|
473
|
+
setFrameSize((prev) => {
|
|
474
|
+
const isBigChange = Math.abs(prev - next) > 50;
|
|
475
|
+
setIsResizing(isBigChange);
|
|
476
|
+
return next;
|
|
477
|
+
});
|
|
474
478
|
},
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
479
|
+
pointerEvents: open && !shouldHideParentSheet ? "auto" : "none",
|
|
480
|
+
style: [
|
|
481
|
+
{
|
|
482
|
+
position: "absolute",
|
|
483
|
+
zIndex,
|
|
484
|
+
width: "100%",
|
|
485
|
+
height: "100%",
|
|
486
|
+
opacity: shouldHideParentSheet ? 0 : 1
|
|
487
|
+
},
|
|
488
|
+
animatedStyle
|
|
489
|
+
],
|
|
490
|
+
children: [
|
|
491
|
+
handleComponent,
|
|
492
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
|
|
493
|
+
enabled: open && modal && handleDisableScroll,
|
|
494
|
+
as: import_core.Slot,
|
|
495
|
+
allowPinchZoom: true,
|
|
496
|
+
shards: [contentRef],
|
|
497
|
+
removeScrollBar: false,
|
|
498
|
+
children: isResizing ? null : frameComponent
|
|
499
|
+
})
|
|
500
|
+
]
|
|
501
|
+
})
|
|
502
|
+
]
|
|
503
|
+
})
|
|
490
504
|
});
|
|
491
505
|
if (preventShown) {
|
|
492
506
|
return null;
|
package/dist/cjs/Sheet.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Sheet.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n getAnimationDriver,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useConstant,\n useEvent,\n useIsomorphicLayoutEffect,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n FunctionComponent,\n RefAttributes,\n createContext,\n forwardRef,\n isValidElement,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { GestureResponderEvent, PanResponder, PanResponderGestureState, View } from 'react-native'\n\nimport { SHEET_HANDLE_NAME, SHEET_NAME } from './SHEET_HANDLE_NAME'\nimport { SheetProvider, useSheetContext } from './SheetContext'\nimport { SheetScrollView } from './SheetScrollView'\nimport { ScrollBridge, SheetProps, SheetScopedProps } from './types'\n\nexport { createSheetScope } from './SheetContext'\n\n/* -------------------------------------------------------------------------------------------------\n * SheetHandle\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n zIndex: 10,\n marginHorizontal: '35%',\n marginBottom: '$2',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n\n variants: {\n open: {\n true: {\n pointerEvents: 'auto',\n },\n false: {\n opacity: 0,\n pointerEvents: 'none',\n },\n },\n } as const,\n})\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n return (\n <SheetHandleFrame\n onPress={() => {\n // don't toggle to the bottom snap position when dismissOnSnapToBottom set\n const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0)\n const nextPos = (context.position + 1) % max\n context.setPosition(nextPos)\n }}\n open={context.open}\n {...props}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SheetOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_OVERLAY_NAME = 'SheetOverlay'\n\nexport const SheetOverlayFrame = styled(YStack, {\n name: SHEET_OVERLAY_NAME,\n // TODO this should be $background without opacity and just customized by theme\n backgroundColor: '$color',\n fullscreen: true,\n opacity: 0.2,\n zIndex: 0,\n\n variants: {\n closed: {\n true: {\n opacity: 0,\n pointerEvents: 'none',\n },\n false: {\n pointerEvents: 'auto',\n },\n },\n } as const,\n})\n\nexport type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>\n\nexport const SheetOverlay = SheetOverlayFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {\n const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)\n return (\n <SheetOverlayFrame\n closed={!context.open || context.hidden}\n {...props}\n onPress={mergeEvent(\n props.onPress,\n context.dismissOnOverlayPress\n ? () => {\n context.setOpen(false)\n }\n : undefined\n )}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * Sheet\n * -----------------------------------------------------------------------------------------------*/\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrameFrame = styled(YStack, {\n name: SHEET_NAME,\n flex: 1,\n backgroundColor: '$background',\n borderTopLeftRadius: '$4',\n borderTopRightRadius: '$4',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n pointerEvents: 'auto',\n})\n\nexport const SheetFrame = SheetFrameFrame.extractable(\n forwardRef(({ __scopeSheet, ...props }: SheetScopedProps<YStackProps>, forwardedRef) => {\n const context = useSheetContext(SHEET_NAME, __scopeSheet)\n const composedContentRef = useComposedRefs(forwardedRef, context.contentRef)\n return <SheetFrameFrame ref={composedContentRef} {...props} />\n })\n)\n\n// set all the way off screen\nconst HIDDEN_SIZE = 10_000\n\nconst sheetComponents = {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n}\n\nexport const Sheet = withStaticProperties(\n themeable(\n forwardRef<View, SheetProps>(function Sheet(props, ref) {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onPositionChange,\n onOpenChange,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n dismissOnSnapToBottom = false,\n disableDrag: disableDragProp,\n modal = false,\n handleDisableScroll = true,\n zIndex = 40,\n } = props\n\n if (process.env.NODE_ENV === 'development') {\n if (snapPointsProp.some((p) => p < 0 || p > 100)) {\n // eslint-disable-next-line no-console\n console.warn(\n `\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`\n )\n }\n }\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error(`Must set animations in tamagui.config.ts`)\n }\n\n // allows for sheets to be controlled by other components\n const controller = useContext(SheetControllerContext)\n const isHidden = controller?.hidden || false\n const disableDrag = disableDragProp ?? controller?.disableDrag\n const themeName = useThemeName()\n const contentRef = React.useRef<TamaguiElement>(null)\n const scrollBridge = useConstant<ScrollBridge>(() => ({\n enabled: false,\n y: 0,\n paneY: 0,\n paneMinY: 0,\n scrollStartY: -1,\n drag: () => {},\n release: () => {},\n scrollLock: false,\n }))\n\n const onOpenChangeInternal = (val: boolean) => {\n controller?.onOpenChange?.(val)\n onOpenChange?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onOpenChangeInternal,\n strategy: 'most-recent-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n\n const snapPoints = useMemo(\n () => (dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]\n )\n\n // lets set -1 to be always the \"open = false\" position\n const [position_, setPosition_] = useControllableState({\n prop: positionProp,\n defaultProp: defaultPosition || (open ? 0 : -1),\n onChange: onPositionChange,\n strategy: 'most-recent-wins',\n })\n const position = open === false ? -1 : position_\n\n // reset position to fully open on re-open after dismissOnSnapToBottom\n if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {\n setPosition_(0)\n }\n\n const setPosition = useCallback(\n (next: number) => {\n // close on dismissOnSnapToBottom (and set position so it animates)\n if (dismissOnSnapToBottom && next === snapPoints.length - 1) {\n setOpen(false)\n } else {\n setPosition_(next)\n }\n },\n [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]\n )\n\n const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE)\n\n // native only fix\n const at = useRef(0)\n driver.useAnimatedNumberReaction(animatedNumber, (value) => {\n at.current = value\n scrollBridge.paneY = value\n })\n\n const [isResizing, setIsResizing] = useState(true)\n useIsomorphicLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n function stopSpring() {\n animatedNumber.stop()\n if (scrollBridge.onFinishAnimate) {\n scrollBridge.onFinishAnimate()\n scrollBridge.onFinishAnimate = undefined\n }\n }\n\n // open must set position\n const shouldSetPositionOpen = open && position < 0\n useEffect(() => {\n if (shouldSetPositionOpen) {\n setPosition(0)\n }\n }, [setPosition, shouldSetPositionOpen])\n\n const positions = useMemo(\n () => snapPoints.map((point) => getPercentSize(point, frameSize)),\n [frameSize, snapPoints]\n )\n\n const animateTo = useEvent((position: number) => {\n const current = animatedNumber.getValue()\n if (isHidden && open) return\n if (!current) return\n if (frameSize === 0) return\n const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize\n const toValue = isHidden || position === -1 ? hiddenValue : positions[position]\n if (at.current === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n animatedNumber.setValue(toValue, {\n type: 'timing',\n duration: 0,\n })\n at.current = toValue\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = at.current === HIDDEN_SIZE\n animatedNumber.setValue(toValue, {\n ...animationConfig,\n type: 'spring',\n overshootClamping,\n })\n })\n\n useIsomorphicLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(\n () => {\n if (disableDrag) return\n if (!frameSize) return\n\n const minY = positions[0]\n scrollBridge.paneMinY = minY\n let startY = at.current\n\n function makeUnselectable(val: boolean) {\n if (!selectionStyleSheet) return\n if (!val) {\n selectionStyleSheet.innerText = ``\n } else {\n selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`\n }\n }\n\n const release = ({ vy, dragAt }: { dragAt: number; vy: number }) => {\n isExternalDrag = false\n previouslyScrolling = false\n makeUnselectable(false)\n const at = dragAt + startY\n // seems liky vy goes up to about 4 at the very most (+ is down, - is up)\n // lets base our multiplier on the total layout height\n const end = at + frameSize * vy * 0.2\n let closestPoint = 0\n let dist = Infinity\n for (let i = 0; i < positions.length; i++) {\n const position = positions[i]\n const curDist = end > position ? end - position : position - end\n if (curDist < dist) {\n dist = curDist\n closestPoint = i\n }\n }\n // have to call both because state may not change but need to snap back\n setPosition(closestPoint)\n animateTo(closestPoint)\n }\n\n const finish = (_e: GestureResponderEvent, state: PanResponderGestureState) => {\n release({\n vy: state.vy,\n dragAt: state.dy,\n })\n }\n\n let previouslyScrolling = false\n\n const onMoveShouldSet = (_e: GestureResponderEvent, { dy }: PanResponderGestureState) => {\n const isScrolled = scrollBridge.y !== 0\n if (isScrolled) {\n previouslyScrolling = true\n return false\n }\n if (previouslyScrolling) {\n previouslyScrolling = false\n return true\n }\n const isDraggingUp = dy < 0\n const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n // prevent drag once at top and pulling up\n if (isAtTop) {\n if (!isScrolled && isDraggingUp) {\n return false\n }\n }\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 8\n }\n\n const grant = () => {\n makeUnselectable(true)\n stopSpring()\n startY = at.current\n }\n\n let isExternalDrag = false\n\n scrollBridge.drag = (dy) => {\n if (!isExternalDrag) {\n isExternalDrag = true\n grant()\n }\n const to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { type: 'direct' })\n }\n\n scrollBridge.release = release\n\n return PanResponder.create({\n onMoveShouldSetPanResponder: onMoveShouldSet,\n onPanResponderGrant: grant,\n onPanResponderMove: (_e, { dy }) => {\n const toFull = dy + startY\n const to = resisted(toFull, minY)\n animatedNumber.setValue(to, { type: 'direct' })\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [disableDrag, animateTo, frameSize, positions, setPosition]\n )\n\n let handleComponent: React.ReactElement | null = null\n let overlayComponent: React.ReactElement | null = null\n let frameComponent: React.ReactElement | null = null\n\n // TODO do more radix-like and don't require direct children descendents\n React.Children.forEach(childrenProp, (child) => {\n if (isValidElement(child)) {\n const name = child.type?.['staticConfig']?.componentName\n switch (name) {\n case 'SheetHandle':\n handleComponent = child\n break\n case 'Sheet':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n // eslint-disable-next-line no-console\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }],\n }\n })\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\n\n /**\n * This is a hacky workaround for native:\n */\n const [isShowingInnerSheet, setIsShowingInnerSheet] = useState(false)\n const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet\n const parentSheetContext = useContext(SheetInsideSheetContext)\n const onInnerSheet = useCallback((hasChild: boolean) => {\n setIsShowingInnerSheet(hasChild)\n }, [])\n useIsomorphicLayoutEffect(() => {\n if (!parentSheetContext || !open) return\n parentSheetContext(true)\n return () => {\n parentSheetContext(false)\n }\n }, [parentSheetContext, open])\n\n const contents = (\n <SheetProvider\n modal={modal}\n contentRef={contentRef}\n dismissOnOverlayPress={dismissOnOverlayPress}\n dismissOnSnapToBottom={dismissOnSnapToBottom}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n scrollBridge={scrollBridge}\n >\n {isResizing || shouldHideParentSheet ? null : overlayComponent}\n\n <AnimatedView\n ref={ref}\n {...panResponder?.panHandlers}\n onLayout={(e) => {\n const next = e.nativeEvent.layout.height\n setFrameSize((prev) => {\n const isBigChange = Math.abs(prev - next) > 50\n setIsResizing(isBigChange)\n return next\n })\n }}\n pointerEvents={open && !shouldHideParentSheet ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex,\n width: '100%',\n height: '100%',\n opacity: shouldHideParentSheet ? 0 : 1,\n },\n animatedStyle,\n ]}\n >\n {handleComponent}\n\n <RemoveScroll\n enabled={open && modal && handleDisableScroll}\n as={Slot}\n allowPinchZoom\n shards={[contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n {isResizing ? null : frameComponent}\n </RemoveScroll>\n </AnimatedView>\n </SheetProvider>\n )\n\n if (preventShown) {\n return null\n }\n\n if (modal) {\n const modalContents = (\n <Portal zIndex={zIndex}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n\n if (isWeb) {\n return modalContents\n }\n\n // on native we don't support multiple modals yet... fix for now is to hide outer one\n return (\n <SheetInsideSheetContext.Provider value={onInnerSheet}>\n {modalContents}\n </SheetInsideSheetContext.Provider>\n )\n }\n\n return contents\n })\n ),\n sheetComponents\n)\n\nconst SheetInsideSheetContext = createContext<((hasChild: boolean) => void) | null>(null)\n\nexport const ControlledSheet = Sheet as FunctionComponent<\n Omit<SheetProps, 'open' | 'onOpenChange'> & RefAttributes<View>\n> &\n typeof sheetComponents\n\n/* -------------------------------------------------------------------------------------------------*/\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = Math.round(frameSize - pct * frameSize)\n return next\n}\n\nfunction resisted(y: number, minY: number, maxOverflow = 25) {\n if (y < minY) {\n const past = minY - y\n const pctPast = Math.min(maxOverflow, past) / maxOverflow\n const diminishBy = 1.1 - Math.pow(0.1, pctPast)\n const extra = -diminishBy * maxOverflow\n return minY + extra\n }\n return y\n}\n\ntype SheetControllerContextValue = {\n disableDrag?: boolean\n open?: boolean\n // hide without \"closing\" to prevent re-animation when shown again\n hidden?: boolean\n onOpenChange?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onOpenChange: onOpenChangeProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onOpenChange = useEvent(onOpenChangeProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onOpenChange,\n }),\n [onOpenChange, value.open, value.hidden, value.disableDrag]\n )\n\n return (\n <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>\n )\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n getAnimationDriver,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useEvent,\n useIsomorphicLayoutEffect,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'\nimport { useConstant } from '@tamagui/use-constant'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n FunctionComponent,\n RefAttributes,\n createContext,\n forwardRef,\n isValidElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { GestureResponderEvent, PanResponder, PanResponderGestureState, View } from 'react-native'\n\nimport { SHEET_HANDLE_NAME, SHEET_NAME } from './SHEET_HANDLE_NAME'\nimport { SheetProvider, useSheetContext } from './SheetContext'\nimport { SheetScrollView } from './SheetScrollView'\nimport { ScrollBridge, SheetProps, SheetScopedProps } from './types'\n\nexport { createSheetScope } from './SheetContext'\n\n/* -------------------------------------------------------------------------------------------------\n * SheetHandle\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n zIndex: 10,\n marginHorizontal: '35%',\n marginBottom: '$2',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n\n variants: {\n open: {\n true: {\n pointerEvents: 'auto',\n },\n false: {\n opacity: 0,\n pointerEvents: 'none',\n },\n },\n } as const,\n})\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n return (\n <SheetHandleFrame\n onPress={() => {\n // don't toggle to the bottom snap position when dismissOnSnapToBottom set\n const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0)\n const nextPos = (context.position + 1) % max\n context.setPosition(nextPos)\n }}\n open={context.open}\n {...props}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SheetOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_OVERLAY_NAME = 'SheetOverlay'\n\nexport const SheetOverlayFrame = styled(YStack, {\n name: SHEET_OVERLAY_NAME,\n // TODO this should be $background without opacity and just customized by theme\n backgroundColor: '$color',\n fullscreen: true,\n opacity: 0.2,\n zIndex: 0,\n\n variants: {\n closed: {\n true: {\n opacity: 0,\n pointerEvents: 'none',\n },\n false: {\n pointerEvents: 'auto',\n },\n },\n } as const,\n})\n\nexport type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>\n\nexport const SheetOverlay = SheetOverlayFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {\n const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)\n return (\n <SheetOverlayFrame\n closed={!context.open || context.hidden}\n {...props}\n onPress={mergeEvent(\n props.onPress,\n context.dismissOnOverlayPress\n ? () => {\n context.setOpen(false)\n }\n : undefined\n )}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * Sheet\n * -----------------------------------------------------------------------------------------------*/\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrameFrame = styled(YStack, {\n name: SHEET_NAME,\n flex: 1,\n backgroundColor: '$background',\n borderTopLeftRadius: '$4',\n borderTopRightRadius: '$4',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n pointerEvents: 'auto',\n})\n\nexport const SheetFrame = SheetFrameFrame.extractable(\n forwardRef(({ __scopeSheet, ...props }: SheetScopedProps<YStackProps>, forwardedRef) => {\n const context = useSheetContext(SHEET_NAME, __scopeSheet)\n const composedContentRef = useComposedRefs(forwardedRef, context.contentRef)\n return <SheetFrameFrame ref={composedContentRef} {...props} />\n })\n)\n\n// set all the way off screen\nconst HIDDEN_SIZE = 10_000\n\nconst sheetComponents = {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n}\n\nconst ParentSheetContext = createContext({\n zIndex: 40,\n})\n\nexport const Sheet = withStaticProperties(\n themeable(\n forwardRef<View, SheetProps>(function Sheet(props, ref) {\n const parentSheet = useContext(ParentSheetContext)\n\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onPositionChange,\n onOpenChange,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n dismissOnSnapToBottom = false,\n disableDrag: disableDragProp,\n modal = false,\n handleDisableScroll = true,\n zIndex = parentSheet.zIndex + 1,\n } = props\n\n if (process.env.NODE_ENV === 'development') {\n if (snapPointsProp.some((p) => p < 0 || p > 100)) {\n // eslint-disable-next-line no-console\n console.warn(\n `\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`\n )\n }\n }\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error(`Must set animations in tamagui.config.ts`)\n }\n\n // allows for sheets to be controlled by other components\n const controller = useContext(SheetControllerContext)\n const isHidden = controller?.hidden || false\n const disableDrag = disableDragProp ?? controller?.disableDrag\n const themeName = useThemeName()\n const contentRef = React.useRef<TamaguiElement>(null)\n const scrollBridge = useConstant<ScrollBridge>(() => ({\n enabled: false,\n y: 0,\n paneY: 0,\n paneMinY: 0,\n scrollStartY: -1,\n drag: () => {},\n release: () => {},\n scrollLock: false,\n }))\n\n const onOpenChangeInternal = (val: boolean) => {\n controller?.onOpenChange?.(val)\n onOpenChange?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onOpenChangeInternal,\n strategy: 'most-recent-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n\n const snapPoints = useMemo(\n () => (dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]\n )\n\n // lets set -1 to be always the \"open = false\" position\n const [position_, setPosition_] = useControllableState({\n prop: positionProp,\n defaultProp: defaultPosition || (open ? 0 : -1),\n onChange: onPositionChange,\n strategy: 'most-recent-wins',\n })\n const position = open === false ? -1 : position_\n\n // reset position to fully open on re-open after dismissOnSnapToBottom\n if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {\n setPosition_(0)\n }\n\n const setPosition = useCallback(\n (next: number) => {\n // close on dismissOnSnapToBottom (and set position so it animates)\n if (dismissOnSnapToBottom && next === snapPoints.length - 1) {\n setOpen(false)\n } else {\n setPosition_(next)\n }\n },\n [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]\n )\n\n const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE)\n\n // native only fix\n const at = useRef(0)\n driver.useAnimatedNumberReaction(animatedNumber, (value) => {\n at.current = value\n scrollBridge.paneY = value\n })\n\n const [isResizing, setIsResizing] = useState(true)\n useIsomorphicLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n function stopSpring() {\n animatedNumber.stop()\n if (scrollBridge.onFinishAnimate) {\n scrollBridge.onFinishAnimate()\n scrollBridge.onFinishAnimate = undefined\n }\n }\n\n // open must set position\n const shouldSetPositionOpen = open && position < 0\n useEffect(() => {\n if (shouldSetPositionOpen) {\n setPosition(0)\n }\n }, [setPosition, shouldSetPositionOpen])\n\n const positions = useMemo(\n () => snapPoints.map((point) => getPercentSize(point, frameSize)),\n [frameSize, snapPoints]\n )\n\n const animateTo = useEvent((position: number) => {\n const current = animatedNumber.getValue()\n if (isHidden && open) return\n if (!current) return\n if (frameSize === 0) return\n const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize\n const toValue = isHidden || position === -1 ? hiddenValue : positions[position]\n if (at.current === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n animatedNumber.setValue(toValue, {\n type: 'timing',\n duration: 0,\n })\n at.current = toValue\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = at.current === HIDDEN_SIZE\n animatedNumber.setValue(toValue, {\n ...animationConfig,\n type: 'spring',\n overshootClamping,\n })\n })\n\n useIsomorphicLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(\n () => {\n if (disableDrag) return\n if (!frameSize) return\n\n const minY = positions[0]\n scrollBridge.paneMinY = minY\n let startY = at.current\n\n function makeUnselectable(val: boolean) {\n if (!selectionStyleSheet) return\n if (!val) {\n selectionStyleSheet.innerText = ``\n } else {\n selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`\n }\n }\n\n const release = ({ vy, dragAt }: { dragAt: number; vy: number }) => {\n isExternalDrag = false\n previouslyScrolling = false\n makeUnselectable(false)\n const at = dragAt + startY\n // seems liky vy goes up to about 4 at the very most (+ is down, - is up)\n // lets base our multiplier on the total layout height\n const end = at + frameSize * vy * 0.2\n let closestPoint = 0\n let dist = Infinity\n for (let i = 0; i < positions.length; i++) {\n const position = positions[i]\n const curDist = end > position ? end - position : position - end\n if (curDist < dist) {\n dist = curDist\n closestPoint = i\n }\n }\n // have to call both because state may not change but need to snap back\n setPosition(closestPoint)\n animateTo(closestPoint)\n }\n\n const finish = (_e: GestureResponderEvent, state: PanResponderGestureState) => {\n release({\n vy: state.vy,\n dragAt: state.dy,\n })\n }\n\n let previouslyScrolling = false\n\n const onMoveShouldSet = (_e: GestureResponderEvent, { dy }: PanResponderGestureState) => {\n const isScrolled = scrollBridge.y !== 0\n const isDraggingUp = dy < 0\n const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n if (isScrolled) {\n previouslyScrolling = true\n return false\n }\n if (previouslyScrolling) {\n previouslyScrolling = false\n return true\n }\n // prevent drag once at top and pulling up\n if (isAtTop) {\n if (!isScrolled && isDraggingUp) {\n return false\n }\n }\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 5\n }\n\n const grant = () => {\n makeUnselectable(true)\n stopSpring()\n startY = at.current\n }\n\n let isExternalDrag = false\n\n scrollBridge.drag = (dy) => {\n if (!isExternalDrag) {\n isExternalDrag = true\n grant()\n }\n const to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { type: 'direct' })\n }\n\n scrollBridge.release = release\n\n return PanResponder.create({\n onMoveShouldSetPanResponder: onMoveShouldSet,\n onPanResponderGrant: grant,\n onPanResponderMove: (_e, { dy }) => {\n const toFull = dy + startY\n const to = resisted(toFull, minY)\n animatedNumber.setValue(to, { type: 'direct' })\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [disableDrag, animateTo, frameSize, positions, setPosition]\n )\n\n let handleComponent: React.ReactElement | null = null\n let overlayComponent: React.ReactElement | null = null\n let frameComponent: React.ReactElement | null = null\n\n // TODO do more radix-like and don't require direct children descendents\n React.Children.forEach(childrenProp, (child) => {\n if (isValidElement(child)) {\n const name = child.type?.['staticConfig']?.componentName\n switch (name) {\n case 'SheetHandle':\n handleComponent = child\n break\n case 'Sheet':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n // eslint-disable-next-line no-console\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }],\n }\n })\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\n\n /**\n * This is a hacky workaround for native:\n */\n const [isShowingInnerSheet, setIsShowingInnerSheet] = useState(false)\n const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet\n const parentSheetContext = useContext(SheetInsideSheetContext)\n const onInnerSheet = useCallback((hasChild: boolean) => {\n setIsShowingInnerSheet(hasChild)\n }, [])\n\n useIsomorphicLayoutEffect(() => {\n if (!parentSheetContext || !open) return\n parentSheetContext(true)\n return () => {\n parentSheetContext(false)\n }\n }, [parentSheetContext, open])\n\n const nextParentContext = useMemo(\n () => ({\n zIndex,\n }),\n [zIndex]\n )\n\n const contents = (\n <ParentSheetContext.Provider value={nextParentContext}>\n <SheetProvider\n modal={modal}\n contentRef={contentRef}\n dismissOnOverlayPress={dismissOnOverlayPress}\n dismissOnSnapToBottom={dismissOnSnapToBottom}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n scrollBridge={scrollBridge}\n >\n {isResizing || shouldHideParentSheet ? null : overlayComponent}\n\n <AnimatedView\n ref={ref}\n {...panResponder?.panHandlers}\n onLayout={(e) => {\n const next = e.nativeEvent.layout.height\n setFrameSize((prev) => {\n const isBigChange = Math.abs(prev - next) > 50\n setIsResizing(isBigChange)\n return next\n })\n }}\n pointerEvents={open && !shouldHideParentSheet ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex,\n width: '100%',\n height: '100%',\n opacity: shouldHideParentSheet ? 0 : 1,\n },\n animatedStyle,\n ]}\n >\n {handleComponent}\n\n <RemoveScroll\n enabled={open && modal && handleDisableScroll}\n as={Slot}\n allowPinchZoom\n shards={[contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n {isResizing ? null : frameComponent}\n </RemoveScroll>\n </AnimatedView>\n </SheetProvider>\n </ParentSheetContext.Provider>\n )\n\n if (preventShown) {\n return null\n }\n\n if (modal) {\n const modalContents = (\n <Portal zIndex={zIndex}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n\n if (isWeb) {\n return modalContents\n }\n\n // on native we don't support multiple modals yet... fix for now is to hide outer one\n return (\n <SheetInsideSheetContext.Provider value={onInnerSheet}>\n {modalContents}\n </SheetInsideSheetContext.Provider>\n )\n }\n\n return contents\n })\n ),\n sheetComponents\n)\n\nconst SheetInsideSheetContext = createContext<((hasChild: boolean) => void) | null>(null)\n\nexport const ControlledSheet = Sheet as FunctionComponent<\n Omit<SheetProps, 'open' | 'onOpenChange'> & RefAttributes<View>\n> &\n typeof sheetComponents\n\n/* -------------------------------------------------------------------------------------------------*/\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = Math.round(frameSize - pct * frameSize)\n return next\n}\n\nfunction resisted(y: number, minY: number, maxOverflow = 25) {\n if (y < minY) {\n const past = minY - y\n const pctPast = Math.min(maxOverflow, past) / maxOverflow\n const diminishBy = 1.1 - Math.pow(0.1, pctPast)\n const extra = -diminishBy * maxOverflow\n return minY + extra\n }\n return y\n}\n\ntype SheetControllerContextValue = {\n disableDrag?: boolean\n open?: boolean\n // hide without \"closing\" to prevent re-animation when shown again\n hidden?: boolean\n onOpenChange?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onOpenChange: onOpenChangeProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onOpenChange = useEvent(onOpenChangeProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onOpenChange,\n }),\n [onOpenChange, value.open, value.hidden, value.disableDrag]\n )\n\n return (\n <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_SheetContext", "Sheet", "React", "position", "at"]
|
|
7
7
|
}
|
package/dist/esm/Sheet.js
CHANGED
|
@@ -9,7 +9,6 @@ import {
|
|
|
9
9
|
mergeEvent,
|
|
10
10
|
styled,
|
|
11
11
|
themeable,
|
|
12
|
-
useConstant,
|
|
13
12
|
useEvent,
|
|
14
13
|
useIsomorphicLayoutEffect,
|
|
15
14
|
useThemeName,
|
|
@@ -18,6 +17,7 @@ import {
|
|
|
18
17
|
import { Portal } from "@tamagui/portal";
|
|
19
18
|
import { RemoveScroll } from "@tamagui/remove-scroll";
|
|
20
19
|
import { XStack, YStack } from "@tamagui/stacks";
|
|
20
|
+
import { useConstant } from "@tamagui/use-constant";
|
|
21
21
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
22
22
|
import React, {
|
|
23
23
|
createContext,
|
|
@@ -139,9 +139,13 @@ const sheetComponents = {
|
|
|
139
139
|
Overlay: SheetOverlay,
|
|
140
140
|
ScrollView: SheetScrollView
|
|
141
141
|
};
|
|
142
|
+
const ParentSheetContext = createContext({
|
|
143
|
+
zIndex: 40
|
|
144
|
+
});
|
|
142
145
|
const Sheet = withStaticProperties(
|
|
143
146
|
themeable(
|
|
144
147
|
forwardRef(function Sheet2(props, ref) {
|
|
148
|
+
const parentSheet = useContext(ParentSheetContext);
|
|
145
149
|
const {
|
|
146
150
|
__scopeSheet,
|
|
147
151
|
snapPoints: snapPointsProp = [80],
|
|
@@ -158,7 +162,7 @@ const Sheet = withStaticProperties(
|
|
|
158
162
|
disableDrag: disableDragProp,
|
|
159
163
|
modal = false,
|
|
160
164
|
handleDisableScroll = true,
|
|
161
|
-
zIndex =
|
|
165
|
+
zIndex = parentSheet.zIndex + 1
|
|
162
166
|
} = props;
|
|
163
167
|
if (process.env.NODE_ENV === "development") {
|
|
164
168
|
if (snapPointsProp.some((p) => p < 0 || p > 100)) {
|
|
@@ -333,6 +337,8 @@ const Sheet = withStaticProperties(
|
|
|
333
337
|
let previouslyScrolling = false;
|
|
334
338
|
const onMoveShouldSet = (_e, { dy }) => {
|
|
335
339
|
const isScrolled = scrollBridge.y !== 0;
|
|
340
|
+
const isDraggingUp = dy < 0;
|
|
341
|
+
const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
|
|
336
342
|
if (isScrolled) {
|
|
337
343
|
previouslyScrolling = true;
|
|
338
344
|
return false;
|
|
@@ -341,14 +347,12 @@ const Sheet = withStaticProperties(
|
|
|
341
347
|
previouslyScrolling = false;
|
|
342
348
|
return true;
|
|
343
349
|
}
|
|
344
|
-
const isDraggingUp = dy < 0;
|
|
345
|
-
const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
|
|
346
350
|
if (isAtTop) {
|
|
347
351
|
if (!isScrolled && isDraggingUp) {
|
|
348
352
|
return false;
|
|
349
353
|
}
|
|
350
354
|
}
|
|
351
|
-
return Math.abs(dy) >
|
|
355
|
+
return Math.abs(dy) > 5;
|
|
352
356
|
};
|
|
353
357
|
const grant = () => {
|
|
354
358
|
makeUnselectable(true);
|
|
@@ -423,56 +427,65 @@ const Sheet = withStaticProperties(
|
|
|
423
427
|
parentSheetContext(false);
|
|
424
428
|
};
|
|
425
429
|
}, [parentSheetContext, open]);
|
|
426
|
-
const
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
opacity: shouldHideParentSheet ? 0 : 1
|
|
430
|
+
const nextParentContext = useMemo(
|
|
431
|
+
() => ({
|
|
432
|
+
zIndex
|
|
433
|
+
}),
|
|
434
|
+
[zIndex]
|
|
435
|
+
);
|
|
436
|
+
const contents = /* @__PURE__ */ jsx(ParentSheetContext.Provider, {
|
|
437
|
+
value: nextParentContext,
|
|
438
|
+
children: /* @__PURE__ */ jsxs(SheetProvider, {
|
|
439
|
+
modal,
|
|
440
|
+
contentRef,
|
|
441
|
+
dismissOnOverlayPress,
|
|
442
|
+
dismissOnSnapToBottom,
|
|
443
|
+
open,
|
|
444
|
+
hidden: isHidden,
|
|
445
|
+
scope: __scopeSheet,
|
|
446
|
+
position,
|
|
447
|
+
snapPoints,
|
|
448
|
+
setPosition,
|
|
449
|
+
setOpen,
|
|
450
|
+
scrollBridge,
|
|
451
|
+
children: [
|
|
452
|
+
isResizing || shouldHideParentSheet ? null : overlayComponent,
|
|
453
|
+
/* @__PURE__ */ jsxs(AnimatedView, {
|
|
454
|
+
ref,
|
|
455
|
+
...panResponder == null ? void 0 : panResponder.panHandlers,
|
|
456
|
+
onLayout: (e) => {
|
|
457
|
+
const next = e.nativeEvent.layout.height;
|
|
458
|
+
setFrameSize((prev) => {
|
|
459
|
+
const isBigChange = Math.abs(prev - next) > 50;
|
|
460
|
+
setIsResizing(isBigChange);
|
|
461
|
+
return next;
|
|
462
|
+
});
|
|
460
463
|
},
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
464
|
+
pointerEvents: open && !shouldHideParentSheet ? "auto" : "none",
|
|
465
|
+
style: [
|
|
466
|
+
{
|
|
467
|
+
position: "absolute",
|
|
468
|
+
zIndex,
|
|
469
|
+
width: "100%",
|
|
470
|
+
height: "100%",
|
|
471
|
+
opacity: shouldHideParentSheet ? 0 : 1
|
|
472
|
+
},
|
|
473
|
+
animatedStyle
|
|
474
|
+
],
|
|
475
|
+
children: [
|
|
476
|
+
handleComponent,
|
|
477
|
+
/* @__PURE__ */ jsx(RemoveScroll, {
|
|
478
|
+
enabled: open && modal && handleDisableScroll,
|
|
479
|
+
as: Slot,
|
|
480
|
+
allowPinchZoom: true,
|
|
481
|
+
shards: [contentRef],
|
|
482
|
+
removeScrollBar: false,
|
|
483
|
+
children: isResizing ? null : frameComponent
|
|
484
|
+
})
|
|
485
|
+
]
|
|
486
|
+
})
|
|
487
|
+
]
|
|
488
|
+
})
|
|
476
489
|
});
|
|
477
490
|
if (preventShown) {
|
|
478
491
|
return null;
|