@tamagui/sheet 1.0.1-beta.165 → 1.0.1-beta.166
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 +4 -2
- package/dist/cjs/Sheet.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/Sheet.js +4 -2
- package/dist/esm/Sheet.js.map +2 -2
- package/dist/jsx/Sheet.js +4 -3
- package/dist/jsx/Sheet.js.map +2 -2
- package/package.json +9 -9
- package/src/Sheet.tsx +3 -2
- package/src/types.tsx +1 -0
- package/types/Sheet.d.ts +1 -0
- package/types/types.d.ts +1 -0
package/dist/cjs/Sheet.js
CHANGED
|
@@ -164,7 +164,8 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
164
164
|
dismissOnSnapToBottom = false,
|
|
165
165
|
disableDrag: disableDragProp,
|
|
166
166
|
modal = false,
|
|
167
|
-
handleDisableScroll = true
|
|
167
|
+
handleDisableScroll = true,
|
|
168
|
+
zIndex = 40
|
|
168
169
|
} = props;
|
|
169
170
|
if (process.env.NODE_ENV === "development") {
|
|
170
171
|
if (snapPointsProp.some((p) => p < 0 || p > 100)) {
|
|
@@ -447,7 +448,7 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
447
448
|
style: [
|
|
448
449
|
{
|
|
449
450
|
position: "absolute",
|
|
450
|
-
zIndex
|
|
451
|
+
zIndex,
|
|
451
452
|
width: "100%",
|
|
452
453
|
height: "100%"
|
|
453
454
|
},
|
|
@@ -469,6 +470,7 @@ const Sheet = (0, import_core.withStaticProperties)(
|
|
|
469
470
|
});
|
|
470
471
|
if (modal) {
|
|
471
472
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, {
|
|
473
|
+
zIndex,
|
|
472
474
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
|
|
473
475
|
name: themeName,
|
|
474
476
|
children: contents
|
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 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 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\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 onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n dismissOnSnapToBottom = false,\n disableDrag: disableDragProp,\n modal = false,\n handleDisableScroll = true,\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 onChangeOpenInternal = (val: boolean) => {\n controller?.onChangeOpen?.(val)\n onChangeOpen?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onChangeOpenInternal,\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: onChangePosition,\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 to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { 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 if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\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 ? 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 ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\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 (modal) {\n return (\n <Portal>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n }\n)\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 onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onChangeOpen: onChangeOpenProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onChangeOpen = useEvent(onChangeOpenProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onChangeOpen,\n }),\n [onChangeOpen, 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;AA4EM;AA5EN,0BAAgC;AAChC,kBAeO;AACP,oBAAuB;AACvB,2BAA6B;AAC7B,oBAAyD;AACzD,oCAAqC;AACrC,mBAUO;AACP,0BAAoF;AAEpF,+BAA8C;AAC9C,0BAA+C;AAC/C,6BAAgC;AAGhC,IAAAA,uBAAiC;AAM1B,MAAM,uBAAmB,oBAAO,sBAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,SAAS;AAAA,EAET,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,QACJ,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,iBAAiB;AAAA,EAC1C,CAAC,EAAE,iBAAiB,MAAM,MAAqC;AAC7D,UAAM,cAAU,qCAAgB,4CAAmB,YAAY;AAC/D,WACE,4CAAC;AAAA,MACC,SAAS,MAAM;AAEb,cAAM,MAAM,QAAQ,WAAW,UAAU,QAAQ,wBAAwB,KAAK;AAC9E,cAAM,WAAW,QAAQ,WAAW,KAAK;AACzC,gBAAQ,YAAY,OAAO;AAAA,MAC7B;AAAA,MACA,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA,KACN;AAAA,EAEJ;AACF;AAMA,MAAM,qBAAqB;AAEpB,MAAM,wBAAoB,oBAAO,sBAAQ;AAAA,EAC9C,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAIM,MAAM,eAAe,kBAAkB;AAAA,EAC5C,CAAC,EAAE,iBAAiB,MAAM,MAA2C;AACnE,UAAM,cAAU,qCAAgB,oBAAoB,YAAY;AAChE,WACE,4CAAC;AAAA,MACC,QAAQ,CAAC,QAAQ,QAAQ,QAAQ;AAAA,MAChC,GAAG;AAAA,MACJ,aAAS;AAAA,QACP,MAAM;AAAA,QACN,QAAQ,wBACJ,MAAM;AACJ,kBAAQ,QAAQ,KAAK;AAAA,QACvB,IACA;AAAA,MACN;AAAA,KACF;AAAA,EAEJ;AACF;AAMA,MAAM,sBAAsB,uBAAW,SAAS,cAAc,OAAO,IAAI;AACzE,IAAI,qBAAqB;AACvB,WAAS,KAAK,YAAY,mBAAmB;AAC/C;AAEO,MAAM,sBAAkB,oBAAO,sBAAQ;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,eAAe;AACjB,CAAC;AAEM,MAAM,aAAa,gBAAgB;AAAA,MACxC,yBAAW,CAAC,EAAE,iBAAiB,MAAM,GAAkC,iBAAiB;AACtF,UAAM,cAAU,qCAAgB,qCAAY,YAAY;AACxD,UAAM,yBAAqB,qCAAgB,cAAc,QAAQ,UAAU;AAC3E,WAAO,4CAAC;AAAA,MAAgB,KAAK;AAAA,MAAqB,GAAG;AAAA,KAAO;AAAA,EAC9D,CAAC;AACH;AAGA,MAAM,cAAc;AAEb,MAAM,YAAQ;AAAA,MACnB;AAAA,QACE,yBAA6B,SAASC,OAAM,OAAO,KAAK;AACtD,YAAM;AAAA,QACJ;AAAA,QACA,YAAY,iBAAiB,CAAC,EAAE;AAAA,QAChC,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,wBAAwB;AAAA,QACxB;AAAA,QACA,wBAAwB;AAAA,QACxB,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,sBAAsB;AAAA,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n getAnimationDriver,\n isClient,\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 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\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 onChangePosition,\n onChangeOpen,\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 onChangeOpenInternal = (val: boolean) => {\n controller?.onChangeOpen?.(val)\n onChangeOpen?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onChangeOpenInternal,\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: onChangePosition,\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 to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { 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 if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\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 ? 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 ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex,\n width: '100%',\n height: '100%',\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 (modal) {\n return (\n <Portal zIndex={zIndex}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n }\n)\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 onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onChangeOpen: onChangeOpenProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onChangeOpen = useEvent(onChangeOpenProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onChangeOpen,\n }),\n [onChangeOpen, 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;AA4EM;AA5EN,0BAAgC;AAChC,kBAeO;AACP,oBAAuB;AACvB,2BAA6B;AAC7B,oBAAyD;AACzD,oCAAqC;AACrC,mBAUO;AACP,0BAAoF;AAEpF,+BAA8C;AAC9C,0BAA+C;AAC/C,6BAAgC;AAGhC,IAAAA,uBAAiC;AAM1B,MAAM,uBAAmB,oBAAO,sBAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,SAAS;AAAA,EAET,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,QACJ,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,iBAAiB;AAAA,EAC1C,CAAC,EAAE,iBAAiB,MAAM,MAAqC;AAC7D,UAAM,cAAU,qCAAgB,4CAAmB,YAAY;AAC/D,WACE,4CAAC;AAAA,MACC,SAAS,MAAM;AAEb,cAAM,MAAM,QAAQ,WAAW,UAAU,QAAQ,wBAAwB,KAAK;AAC9E,cAAM,WAAW,QAAQ,WAAW,KAAK;AACzC,gBAAQ,YAAY,OAAO;AAAA,MAC7B;AAAA,MACA,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA,KACN;AAAA,EAEJ;AACF;AAMA,MAAM,qBAAqB;AAEpB,MAAM,wBAAoB,oBAAO,sBAAQ;AAAA,EAC9C,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAIM,MAAM,eAAe,kBAAkB;AAAA,EAC5C,CAAC,EAAE,iBAAiB,MAAM,MAA2C;AACnE,UAAM,cAAU,qCAAgB,oBAAoB,YAAY;AAChE,WACE,4CAAC;AAAA,MACC,QAAQ,CAAC,QAAQ,QAAQ,QAAQ;AAAA,MAChC,GAAG;AAAA,MACJ,aAAS;AAAA,QACP,MAAM;AAAA,QACN,QAAQ,wBACJ,MAAM;AACJ,kBAAQ,QAAQ,KAAK;AAAA,QACvB,IACA;AAAA,MACN;AAAA,KACF;AAAA,EAEJ;AACF;AAMA,MAAM,sBAAsB,uBAAW,SAAS,cAAc,OAAO,IAAI;AACzE,IAAI,qBAAqB;AACvB,WAAS,KAAK,YAAY,mBAAmB;AAC/C;AAEO,MAAM,sBAAkB,oBAAO,sBAAQ;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,eAAe;AACjB,CAAC;AAEM,MAAM,aAAa,gBAAgB;AAAA,MACxC,yBAAW,CAAC,EAAE,iBAAiB,MAAM,GAAkC,iBAAiB;AACtF,UAAM,cAAU,qCAAgB,qCAAY,YAAY;AACxD,UAAM,yBAAqB,qCAAgB,cAAc,QAAQ,UAAU;AAC3E,WAAO,4CAAC;AAAA,MAAgB,KAAK;AAAA,MAAqB,GAAG;AAAA,KAAO;AAAA,EAC9D,CAAC;AACH;AAGA,MAAM,cAAc;AAEb,MAAM,YAAQ;AAAA,MACnB;AAAA,QACE,yBAA6B,SAASC,OAAM,OAAO,KAAK;AACtD,YAAM;AAAA,QACJ;AAAA,QACA,YAAY,iBAAiB,CAAC,EAAE;AAAA,QAChC,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,wBAAwB;AAAA,QACxB;AAAA,QACA,wBAAwB;AAAA,QACxB,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,sBAAsB;AAAA,QACtB,SAAS;AAAA,MACX,IAAI;AAEJ,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,YAAI,eAAe,KAAK,CAAC,MAAM,IAAI,KAAK,IAAI,GAAG,GAAG;AAEhD,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,YAAM,aAAS,gCAAmB;AAClC,UAAI,CAAC,QAAQ;AACX,cAAM,IAAI,MAAM,0CAA0C;AAAA,MAC5D;AAGA,YAAM,iBAAa,yBAAW,sBAAsB;AACpD,YAAM,YAAW,yCAAY,WAAU;AACvC,YAAM,cAAc,oBAAmB,yCAAY;AACnD,YAAM,gBAAY,0BAAa;AAC/B,YAAM,aAAa,aAAAC,QAAM,OAAuB,IAAI;AACpD,YAAM,mBAAe,yBAA0B,OAAO;AAAA,QACpD,SAAS;AAAA,QACT,GAAG;AAAA,QACH,OAAO;AAAA,QACP,UAAU;AAAA,QACV,cAAc;AAAA,QACd,MAAM,MAAM;AAAA,QAAC;AAAA,QACb,SAAS,MAAM;AAAA,QAAC;AAAA,QAChB,YAAY;AAAA,MACd,EAAE;AAEF,YAAM,uBAAuB,CAAC,QAAiB;AAhOrD;AAiOQ,uDAAY,iBAAZ,oCAA2B;AAC3B,qDAAe;AAAA,MACjB;AAEA,YAAM,CAAC,MAAM,OAAO,QAAI,oDAAqB;AAAA,QAC3C,OAAM,yCAAY,SAAQ;AAAA,QAC1B,aAAa,eAAe;AAAA,QAC5B,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AAED,YAAM,CAAC,WAAW,YAAY,QAAI,uBAAiB,CAAC;AAEpD,YAAM,iBAAa;AAAA,QACjB,MAAO,wBAAwB,CAAC,GAAG,gBAAgB,CAAC,IAAI;AAAA,QAExD,CAAC,KAAK,UAAU,cAAc,GAAG,qBAAqB;AAAA,MACxD;AAGA,YAAM,CAAC,WAAW,YAAY,QAAI,oDAAqB;AAAA,QACrD,MAAM;AAAA,QACN,aAAa,oBAAoB,OAAO,IAAI;AAAA,QAC5C,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,YAAM,WAAW,SAAS,QAAQ,KAAK;AAGvC,UAAI,QAAQ,yBAAyB,aAAa,WAAW,SAAS,GAAG;AACvE,qBAAa,CAAC;AAAA,MAChB;AAEA,YAAM,kBAAc;AAAA,QAClB,CAAC,SAAiB;AAEhB,cAAI,yBAAyB,SAAS,WAAW,SAAS,GAAG;AAC3D,oBAAQ,KAAK;AAAA,UACf,OAAO;AACL,yBAAa,IAAI;AAAA,UACnB;AAAA,QACF;AAAA,QACA,CAAC,uBAAuB,WAAW,QAAQ,cAAc,OAAO;AAAA,MAClE;AAEA,YAAM,iBAAiB,OAAO,kBAAkB,WAAW;AAG3D,YAAM,SAAK,qBAAO,CAAC;AACnB,aAAO,0BAA0B,gBAAgB,CAAC,UAAU;AAC1D,WAAG,UAAU;AACb,qBAAa,QAAQ;AAAA,MACvB,CAAC;AAED,YAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,IAAI;AACjD,iDAA0B,MAAM;AAC9B,YAAI,CAAC,YAAY;AACf,wBAAc,IAAI;AAAA,QACpB;AAAA,MAEF,GAAG,CAAC,KAAK,CAAC;AAEV,eAAS,aAAa;AACpB,uBAAe,KAAK;AACpB,YAAI,aAAa,iBAAiB;AAChC,uBAAa,gBAAgB;AAC7B,uBAAa,kBAAkB;AAAA,QACjC;AAAA,MACF;AAGA,YAAM,wBAAwB,QAAQ,WAAW;AACjD,kCAAU,MAAM;AACd,YAAI,uBAAuB;AACzB,sBAAY,CAAC;AAAA,QACf;AAAA,MACF,GAAG,CAAC,aAAa,qBAAqB,CAAC;AAEvC,YAAM,gBAAY;AAAA,QAChB,MAAM,WAAW,IAAI,CAAC,UAAU,eAAe,OAAO,SAAS,CAAC;AAAA,QAChE,CAAC,WAAW,UAAU;AAAA,MACxB;AAEA,YAAM,gBAAY,sBAAS,CAACC,cAAqB;AAC/C,cAAM,UAAU,eAAe,SAAS;AACxC,YAAI,YAAY;AAAM;AACtB,YAAI,CAAC;AAAS;AACd,YAAI,cAAc;AAAG;AACrB,cAAM,cAAc,cAAc,IAAI,cAAc;AACpD,cAAM,UAAU,YAAYA,cAAa,KAAK,cAAc,UAAUA;AACtE,YAAI,GAAG,YAAY;AAAS;AAC5B,mBAAW;AACX,YAAI,YAAY,YAAY;AAC1B,cAAI,YAAY;AACd,0BAAc,KAAK;AAAA,UACrB;AACA,yBAAe,SAAS,SAAS;AAAA,YAC/B,MAAM;AAAA,YACN,UAAU;AAAA,UACZ,CAAC;AACD,aAAG,UAAU;AACb;AAAA,QACF;AAEA,cAAM,oBAAoB,GAAG,YAAY;AACzC,uBAAe,SAAS,SAAS;AAAA,UAC/B,GAAG;AAAA,UACH,MAAM;AAAA,UACN;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAED,iDAA0B,MAAM;AAC9B,kBAAU,QAAQ;AAAA,MACpB,GAAG,CAAC,UAAU,WAAW,UAAU,SAAS,CAAC;AAE7C,YAAM,mBAAe;AAAA,QACnB,MAAM;AACJ,cAAI;AAAa;AACjB,cAAI,CAAC;AAAW;AAEhB,gBAAM,OAAO,UAAU;AACvB,uBAAa,WAAW;AACxB,cAAI,SAAS,GAAG;AAEhB,mBAAS,iBAAiB,KAAc;AACtC,gBAAI,CAAC;AAAqB;AAC1B,gBAAI,CAAC,KAAK;AACR,kCAAoB,YAAY;AAAA,YAClC,OAAO;AACL,kCAAoB,YAAY;AAAA,YAClC;AAAA,UACF;AAEA,gBAAM,UAAU,CAAC,EAAE,IAAI,OAAO,MAAsC;AAClE,6BAAiB;AACjB,kCAAsB;AACtB,6BAAiB,KAAK;AACtB,kBAAMC,MAAK,SAAS;AAGpB,kBAAM,MAAMA,MAAK,YAAY,KAAK;AAClC,gBAAI,eAAe;AACnB,gBAAI,OAAO;AACX,qBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,oBAAMD,YAAW,UAAU;AAC3B,oBAAM,UAAU,MAAMA,YAAW,MAAMA,YAAWA,YAAW;AAC7D,kBAAI,UAAU,MAAM;AAClB,uBAAO;AACP,+BAAe;AAAA,cACjB;AAAA,YACF;AAEA,wBAAY,YAAY;AACxB,sBAAU,YAAY;AAAA,UACxB;AAEA,gBAAM,SAAS,CAAC,IAA2B,UAAoC;AAC7E,oBAAQ;AAAA,cACN,IAAI,MAAM;AAAA,cACV,QAAQ,MAAM;AAAA,YAChB,CAAC;AAAA,UACH;AAEA,cAAI,sBAAsB;AAE1B,gBAAM,kBAAkB,CAAC,IAA2B,EAAE,GAAG,MAAgC;AACvF,kBAAM,aAAa,aAAa,MAAM;AACtC,gBAAI,YAAY;AACd,oCAAsB;AACtB,qBAAO;AAAA,YACT;AACA,gBAAI,qBAAqB;AACvB,oCAAsB;AACtB,qBAAO;AAAA,YACT;AACA,kBAAM,eAAe,KAAK;AAC1B,kBAAM,UAAU,aAAa,SAAS,aAAa;AAEnD,gBAAI,SAAS;AACX,kBAAI,CAAC,cAAc,cAAc;AAC/B,uBAAO;AAAA,cACT;AAAA,YACF;AAEA,mBAAO,KAAK,IAAI,EAAE,IAAI;AAAA,UACxB;AAEA,gBAAM,QAAQ,MAAM;AAClB,6BAAiB,IAAI;AACrB,uBAAW;AACX,qBAAS,GAAG;AAAA,UACd;AAEA,cAAI,iBAAiB;AAErB,uBAAa,OAAO,CAAC,OAAO;AAC1B,gBAAI,CAAC,gBAAgB;AACnB,+BAAiB;AACjB,oBAAM;AAAA,YACR;AACA,kBAAM,KAAK,KAAK;AAChB,2BAAe,SAAS,SAAS,IAAI,IAAI,GAAG,EAAE,MAAM,SAAS,CAAC;AAAA,UAChE;AAEA,uBAAa,UAAU;AAEvB,iBAAO,iCAAa,OAAO;AAAA,YACzB,6BAA6B;AAAA,YAC7B,qBAAqB;AAAA,YACrB,oBAAoB,CAAC,IAAI,EAAE,GAAG,MAAM;AAClC,oBAAM,KAAK,KAAK;AAChB,6BAAe,SAAS,SAAS,IAAI,IAAI,GAAG,EAAE,MAAM,SAAS,CAAC;AAAA,YAChE;AAAA,YACA,mBAAmB;AAAA,YACnB,yBAAyB;AAAA,YACzB,uBAAuB;AAAA,UACzB,CAAC;AAAA,QACH;AAAA,QAEA,CAAC,aAAa,WAAW,WAAW,WAAW,WAAW;AAAA,MAC5D;AAEA,UAAI,kBAA6C;AACjD,UAAI,mBAA8C;AAClD,UAAI,iBAA4C;AAGhD,mBAAAD,QAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AArctD;AAscQ,gBAAI,6BAAe,KAAK,GAAG;AACzB,gBAAM,QAAO,iBAAM,SAAN,mBAAa,oBAAb,mBAA8B;AAC3C,kBAAQ;AAAA,iBACD;AACH,gCAAkB;AAClB;AAAA,iBACG;AACH,+BAAiB;AACjB;AAAA,iBACG;AACH,iCAAmB;AACnB;AAAA;AAGA,sBAAQ,KAAK,0CAA0C,KAAK;AAAA;AAAA,QAElE;AAAA,MACF,CAAC;AAED,YAAM,gBAAe,yCAAY,YAAU,yCAAY;AAEvD,YAAM,gBAAgB,OAAO,uBAAuB,gBAAgB,CAAC,QAAQ;AAC3E,eAAO;AAAA,UACL,WAAW,CAAC,EAAE,YAAY,cAAc,IAAI,cAAc,IAAI,CAAC;AAAA,QACjE;AAAA,MACF,CAAC;AAED,UAAI,cAAc;AAChB,eAAO;AAAA,MACT;AAGA,YAAM,eAAe,OAAO,iBAAiB,OAAO;AAEpD,YAAM,WACJ,6CAAC;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,OAAO;AAAA,UAErB,6CAAC;AAAA,YACC;AAAA,YACC,GAAG,6CAAc;AAAA,YAClB,UAAU,CAAC,MAAM;AACf,oBAAM,OAAO,EAAE,YAAY,OAAO;AAClC,2BAAa,CAAC,SAAS;AACrB,sBAAM,cAAc,KAAK,IAAI,OAAO,IAAI,IAAI;AAC5C,8BAAc,WAAW;AACzB,uBAAO;AAAA,cACT,CAAC;AAAA,YACH;AAAA,YACA,eAAe,OAAO,SAAS;AAAA,YAC/B,OAAO;AAAA,cACL;AAAA,gBACE,UAAU;AAAA,gBACV;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,cACV;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,cAED,4CAAC;AAAA,gBACC,SAAS,QAAQ,SAAS;AAAA,gBAC1B,IAAI;AAAA,gBACJ,gBAAc;AAAA,gBACd,QAAQ,CAAC,UAAU;AAAA,gBAEnB,iBAAiB;AAAA,gBAEhB,uBAAa,OAAO;AAAA,eACvB;AAAA;AAAA,WACF;AAAA;AAAA,OACF;AAGF,UAAI,OAAO;AACT,eACE,4CAAC;AAAA,UAAO;AAAA,UACN,sDAAC;AAAA,YAAM,MAAM;AAAA,YAAY;AAAA,WAAS;AAAA,SACpC;AAAA,MAEJ;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF;AAIA,SAAS,eAAe,OAAgB,WAAoB;AAC1D,MAAI,CAAC;AAAW,WAAO;AACvB,MAAI,UAAU,QAAW;AAEvB,YAAQ,KAAK,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,MAAM,QAAQ;AACpB,QAAM,OAAO,KAAK,MAAM,YAAY,MAAM,SAAS;AACnD,SAAO;AACT;AAEA,SAAS,SAAS,GAAW,MAAc,cAAc,IAAI;AAC3D,MAAI,IAAI,MAAM;AACZ,UAAM,OAAO,OAAO;AACpB,UAAM,UAAU,KAAK,IAAI,aAAa,IAAI,IAAI;AAC9C,UAAM,aAAa,MAAM,KAAK,IAAI,KAAK,OAAO;AAC9C,UAAM,QAAQ,CAAC,aAAa;AAC5B,WAAO,OAAO;AAAA,EAChB;AACA,SAAO;AACT;AAUA,MAAM,6BAAyB,4BAAkD,IAAI;AAE9E,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,cAAc;AAAA,KACX;AACL,MAA6E;AAC3E,QAAM,mBAAe,sBAAS,gBAAgB;AAE9C,QAAM,gBAAY;AAAA,IAChB,OAAO;AAAA,MACL,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,aAAa,MAAM;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,MAAM,MAAM,MAAM,QAAQ,MAAM,WAAW;AAAA,EAC5D;AAEA,SACE,4CAAC,uBAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,IAAY;AAAA,GAAS;AAEjE;",
|
|
6
6
|
"names": ["import_SheetContext", "Sheet", "React", "position", "at"]
|
|
7
7
|
}
|
package/dist/cjs/types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/types.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AnimatedNumberStrategy } from '@tamagui/core'\nimport { ScopedProps } from '@tamagui/create-context'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport React, { ReactNode } from 'react'\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n dismissOnSnapToBottom?: boolean\n animationConfig?: AnimatedNumberStrategy\n handleDisableScroll?: boolean\n disableDrag?: boolean\n modal?: boolean\n },\n 'Sheet'\n>\n\nexport type PositionChangeHandler = (position: number) => void\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\nexport type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\nexport type SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport type ScrollBridge = {\n enabled: boolean\n y: number\n paneY: number\n paneMinY: number\n scrollStartY: number\n drag: (dy: number) => void\n release: (state: { dragAt: number; vy: number }) => void\n scrollLock: boolean\n onFinishAnimate?: () => void\n}\n"],
|
|
4
|
+
"sourcesContent": ["import { AnimatedNumberStrategy } from '@tamagui/core'\nimport { ScopedProps } from '@tamagui/create-context'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport React, { ReactNode } from 'react'\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n dismissOnSnapToBottom?: boolean\n animationConfig?: AnimatedNumberStrategy\n handleDisableScroll?: boolean\n disableDrag?: boolean\n modal?: boolean\n zIndex?: number\n },\n 'Sheet'\n>\n\nexport type PositionChangeHandler = (position: number) => void\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\nexport type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\nexport type SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport type ScrollBridge = {\n enabled: boolean\n y: number\n paneY: number\n paneMinY: number\n scrollStartY: number\n drag: (dy: number) => void\n release: (state: { dragAt: number; vy: number }) => void\n scrollLock: boolean\n onFinishAnimate?: () => void\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Sheet.js
CHANGED
|
@@ -150,7 +150,8 @@ const Sheet = withStaticProperties(
|
|
|
150
150
|
dismissOnSnapToBottom = false,
|
|
151
151
|
disableDrag: disableDragProp,
|
|
152
152
|
modal = false,
|
|
153
|
-
handleDisableScroll = true
|
|
153
|
+
handleDisableScroll = true,
|
|
154
|
+
zIndex = 40
|
|
154
155
|
} = props;
|
|
155
156
|
if (process.env.NODE_ENV === "development") {
|
|
156
157
|
if (snapPointsProp.some((p) => p < 0 || p > 100)) {
|
|
@@ -433,7 +434,7 @@ const Sheet = withStaticProperties(
|
|
|
433
434
|
style: [
|
|
434
435
|
{
|
|
435
436
|
position: "absolute",
|
|
436
|
-
zIndex
|
|
437
|
+
zIndex,
|
|
437
438
|
width: "100%",
|
|
438
439
|
height: "100%"
|
|
439
440
|
},
|
|
@@ -455,6 +456,7 @@ const Sheet = withStaticProperties(
|
|
|
455
456
|
});
|
|
456
457
|
if (modal) {
|
|
457
458
|
return /* @__PURE__ */ jsx(Portal, {
|
|
459
|
+
zIndex,
|
|
458
460
|
children: /* @__PURE__ */ jsx(Theme, {
|
|
459
461
|
name: themeName,
|
|
460
462
|
children: contents
|
package/dist/esm/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 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 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\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 onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n dismissOnSnapToBottom = false,\n disableDrag: disableDragProp,\n modal = false,\n handleDisableScroll = true,\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 onChangeOpenInternal = (val: boolean) => {\n controller?.onChangeOpen?.(val)\n onChangeOpen?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onChangeOpenInternal,\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: onChangePosition,\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 to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { 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 if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\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 ? 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 ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\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 (modal) {\n return (\n <Portal>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n }\n)\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 onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onChangeOpen: onChangeOpenProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onChangeOpen = useEvent(onChangeOpenProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onChangeOpen,\n }),\n [onChangeOpen, value.open, value.hidden, value.disableDrag]\n )\n\n return (\n <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>\n )\n}\n"],
|
|
5
|
-
"mappings": "AA4EM,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n getAnimationDriver,\n isClient,\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 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\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 onChangePosition,\n onChangeOpen,\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 onChangeOpenInternal = (val: boolean) => {\n controller?.onChangeOpen?.(val)\n onChangeOpen?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onChangeOpenInternal,\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: onChangePosition,\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 to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { 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 if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\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 ? 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 ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex,\n width: '100%',\n height: '100%',\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 (modal) {\n return (\n <Portal zIndex={zIndex}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n }\n)\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 onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onChangeOpen: onChangeOpenProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onChangeOpen = useEvent(onChangeOpenProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onChangeOpen,\n }),\n [onChangeOpen, value.open, value.hidden, value.disableDrag]\n )\n\n return (\n <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>\n )\n}\n"],
|
|
5
|
+
"mappings": "AA4EM,cA6aI,YA7aJ;AA5EN,SAAS,uBAAuB;AAChC;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,QAAqB,cAA2B;AACzD,SAAS,4BAA4B;AACrC,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgC,oBAAoD;AAEpF,SAAS,mBAAmB,kBAAkB;AAC9C,SAAS,eAAe,uBAAuB;AAC/C,SAAS,uBAAuB;AAGhC,SAAS,wBAAwB;AAM1B,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,SAAS;AAAA,EAET,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,QACJ,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,iBAAiB;AAAA,EAC1C,CAAC,EAAE,iBAAiB,MAAM,MAAqC;AAC7D,UAAM,UAAU,gBAAgB,mBAAmB,YAAY;AAC/D,WACE,oBAAC;AAAA,MACC,SAAS,MAAM;AAEb,cAAM,MAAM,QAAQ,WAAW,UAAU,QAAQ,wBAAwB,KAAK;AAC9E,cAAM,WAAW,QAAQ,WAAW,KAAK;AACzC,gBAAQ,YAAY,OAAO;AAAA,MAC7B;AAAA,MACA,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA,KACN;AAAA,EAEJ;AACF;AAMA,MAAM,qBAAqB;AAEpB,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EAEN,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA,MACA,OAAO;AAAA,QACL,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAIM,MAAM,eAAe,kBAAkB;AAAA,EAC5C,CAAC,EAAE,iBAAiB,MAAM,MAA2C;AACnE,UAAM,UAAU,gBAAgB,oBAAoB,YAAY;AAChE,WACE,oBAAC;AAAA,MACC,QAAQ,CAAC,QAAQ,QAAQ,QAAQ;AAAA,MAChC,GAAG;AAAA,MACJ,SAAS;AAAA,QACP,MAAM;AAAA,QACN,QAAQ,wBACJ,MAAM;AACJ,kBAAQ,QAAQ,KAAK;AAAA,QACvB,IACA;AAAA,MACN;AAAA,KACF;AAAA,EAEJ;AACF;AAMA,MAAM,sBAAsB,WAAW,SAAS,cAAc,OAAO,IAAI;AACzE,IAAI,qBAAqB;AACvB,WAAS,KAAK,YAAY,mBAAmB;AAC/C;AAEO,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,eAAe;AACjB,CAAC;AAEM,MAAM,aAAa,gBAAgB;AAAA,EACxC,WAAW,CAAC,EAAE,iBAAiB,MAAM,GAAkC,iBAAiB;AACtF,UAAM,UAAU,gBAAgB,YAAY,YAAY;AACxD,UAAM,qBAAqB,gBAAgB,cAAc,QAAQ,UAAU;AAC3E,WAAO,oBAAC;AAAA,MAAgB,KAAK;AAAA,MAAqB,GAAG;AAAA,KAAO;AAAA,EAC9D,CAAC;AACH;AAGA,MAAM,cAAc;AAEb,MAAM,QAAQ;AAAA,EACnB;AAAA,IACE,WAA6B,SAASA,OAAM,OAAO,KAAK;AACtD,YAAM;AAAA,QACJ;AAAA,QACA,YAAY,iBAAiB,CAAC,EAAE;AAAA,QAChC,MAAM;AAAA,QACN;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,wBAAwB;AAAA,QACxB;AAAA,QACA,wBAAwB;AAAA,QACxB,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,sBAAsB;AAAA,QACtB,SAAS;AAAA,MACX,IAAI;AAEJ,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,YAAI,eAAe,KAAK,CAAC,MAAM,IAAI,KAAK,IAAI,GAAG,GAAG;AAEhD,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,YAAM,SAAS,mBAAmB;AAClC,UAAI,CAAC,QAAQ;AACX,cAAM,IAAI,MAAM,0CAA0C;AAAA,MAC5D;AAGA,YAAM,aAAa,WAAW,sBAAsB;AACpD,YAAM,YAAW,yCAAY,WAAU;AACvC,YAAM,cAAc,oBAAmB,yCAAY;AACnD,YAAM,YAAY,aAAa;AAC/B,YAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,YAAM,eAAe,YAA0B,OAAO;AAAA,QACpD,SAAS;AAAA,QACT,GAAG;AAAA,QACH,OAAO;AAAA,QACP,UAAU;AAAA,QACV,cAAc;AAAA,QACd,MAAM,MAAM;AAAA,QAAC;AAAA,QACb,SAAS,MAAM;AAAA,QAAC;AAAA,QAChB,YAAY;AAAA,MACd,EAAE;AAEF,YAAM,uBAAuB,CAAC,QAAiB;AAhOrD;AAiOQ,uDAAY,iBAAZ,oCAA2B;AAC3B,qDAAe;AAAA,MACjB;AAEA,YAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,QAC3C,OAAM,yCAAY,SAAQ;AAAA,QAC1B,aAAa,eAAe;AAAA,QAC5B,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AAED,YAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AAEpD,YAAM,aAAa;AAAA,QACjB,MAAO,wBAAwB,CAAC,GAAG,gBAAgB,CAAC,IAAI;AAAA,QAExD,CAAC,KAAK,UAAU,cAAc,GAAG,qBAAqB;AAAA,MACxD;AAGA,YAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,QACrD,MAAM;AAAA,QACN,aAAa,oBAAoB,OAAO,IAAI;AAAA,QAC5C,UAAU;AAAA,QACV,UAAU;AAAA,MACZ,CAAC;AACD,YAAM,WAAW,SAAS,QAAQ,KAAK;AAGvC,UAAI,QAAQ,yBAAyB,aAAa,WAAW,SAAS,GAAG;AACvE,qBAAa,CAAC;AAAA,MAChB;AAEA,YAAM,cAAc;AAAA,QAClB,CAAC,SAAiB;AAEhB,cAAI,yBAAyB,SAAS,WAAW,SAAS,GAAG;AAC3D,oBAAQ,KAAK;AAAA,UACf,OAAO;AACL,yBAAa,IAAI;AAAA,UACnB;AAAA,QACF;AAAA,QACA,CAAC,uBAAuB,WAAW,QAAQ,cAAc,OAAO;AAAA,MAClE;AAEA,YAAM,iBAAiB,OAAO,kBAAkB,WAAW;AAG3D,YAAM,KAAK,OAAO,CAAC;AACnB,aAAO,0BAA0B,gBAAgB,CAAC,UAAU;AAC1D,WAAG,UAAU;AACb,qBAAa,QAAQ;AAAA,MACvB,CAAC;AAED,YAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,gCAA0B,MAAM;AAC9B,YAAI,CAAC,YAAY;AACf,wBAAc,IAAI;AAAA,QACpB;AAAA,MAEF,GAAG,CAAC,KAAK,CAAC;AAEV,eAAS,aAAa;AACpB,uBAAe,KAAK;AACpB,YAAI,aAAa,iBAAiB;AAChC,uBAAa,gBAAgB;AAC7B,uBAAa,kBAAkB;AAAA,QACjC;AAAA,MACF;AAGA,YAAM,wBAAwB,QAAQ,WAAW;AACjD,gBAAU,MAAM;AACd,YAAI,uBAAuB;AACzB,sBAAY,CAAC;AAAA,QACf;AAAA,MACF,GAAG,CAAC,aAAa,qBAAqB,CAAC;AAEvC,YAAM,YAAY;AAAA,QAChB,MAAM,WAAW,IAAI,CAAC,UAAU,eAAe,OAAO,SAAS,CAAC;AAAA,QAChE,CAAC,WAAW,UAAU;AAAA,MACxB;AAEA,YAAM,YAAY,SAAS,CAACC,cAAqB;AAC/C,cAAM,UAAU,eAAe,SAAS;AACxC,YAAI,YAAY;AAAM;AACtB,YAAI,CAAC;AAAS;AACd,YAAI,cAAc;AAAG;AACrB,cAAM,cAAc,cAAc,IAAI,cAAc;AACpD,cAAM,UAAU,YAAYA,cAAa,KAAK,cAAc,UAAUA;AACtE,YAAI,GAAG,YAAY;AAAS;AAC5B,mBAAW;AACX,YAAI,YAAY,YAAY;AAC1B,cAAI,YAAY;AACd,0BAAc,KAAK;AAAA,UACrB;AACA,yBAAe,SAAS,SAAS;AAAA,YAC/B,MAAM;AAAA,YACN,UAAU;AAAA,UACZ,CAAC;AACD,aAAG,UAAU;AACb;AAAA,QACF;AAEA,cAAM,oBAAoB,GAAG,YAAY;AACzC,uBAAe,SAAS,SAAS;AAAA,UAC/B,GAAG;AAAA,UACH,MAAM;AAAA,UACN;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAED,gCAA0B,MAAM;AAC9B,kBAAU,QAAQ;AAAA,MACpB,GAAG,CAAC,UAAU,WAAW,UAAU,SAAS,CAAC;AAE7C,YAAM,eAAe;AAAA,QACnB,MAAM;AACJ,cAAI;AAAa;AACjB,cAAI,CAAC;AAAW;AAEhB,gBAAM,OAAO,UAAU;AACvB,uBAAa,WAAW;AACxB,cAAI,SAAS,GAAG;AAEhB,mBAAS,iBAAiB,KAAc;AACtC,gBAAI,CAAC;AAAqB;AAC1B,gBAAI,CAAC,KAAK;AACR,kCAAoB,YAAY;AAAA,YAClC,OAAO;AACL,kCAAoB,YAAY;AAAA,YAClC;AAAA,UACF;AAEA,gBAAM,UAAU,CAAC,EAAE,IAAI,OAAO,MAAsC;AAClE,6BAAiB;AACjB,kCAAsB;AACtB,6BAAiB,KAAK;AACtB,kBAAMC,MAAK,SAAS;AAGpB,kBAAM,MAAMA,MAAK,YAAY,KAAK;AAClC,gBAAI,eAAe;AACnB,gBAAI,OAAO;AACX,qBAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,oBAAMD,YAAW,UAAU;AAC3B,oBAAM,UAAU,MAAMA,YAAW,MAAMA,YAAWA,YAAW;AAC7D,kBAAI,UAAU,MAAM;AAClB,uBAAO;AACP,+BAAe;AAAA,cACjB;AAAA,YACF;AAEA,wBAAY,YAAY;AACxB,sBAAU,YAAY;AAAA,UACxB;AAEA,gBAAM,SAAS,CAAC,IAA2B,UAAoC;AAC7E,oBAAQ;AAAA,cACN,IAAI,MAAM;AAAA,cACV,QAAQ,MAAM;AAAA,YAChB,CAAC;AAAA,UACH;AAEA,cAAI,sBAAsB;AAE1B,gBAAM,kBAAkB,CAAC,IAA2B,EAAE,GAAG,MAAgC;AACvF,kBAAM,aAAa,aAAa,MAAM;AACtC,gBAAI,YAAY;AACd,oCAAsB;AACtB,qBAAO;AAAA,YACT;AACA,gBAAI,qBAAqB;AACvB,oCAAsB;AACtB,qBAAO;AAAA,YACT;AACA,kBAAM,eAAe,KAAK;AAC1B,kBAAM,UAAU,aAAa,SAAS,aAAa;AAEnD,gBAAI,SAAS;AACX,kBAAI,CAAC,cAAc,cAAc;AAC/B,uBAAO;AAAA,cACT;AAAA,YACF;AAEA,mBAAO,KAAK,IAAI,EAAE,IAAI;AAAA,UACxB;AAEA,gBAAM,QAAQ,MAAM;AAClB,6BAAiB,IAAI;AACrB,uBAAW;AACX,qBAAS,GAAG;AAAA,UACd;AAEA,cAAI,iBAAiB;AAErB,uBAAa,OAAO,CAAC,OAAO;AAC1B,gBAAI,CAAC,gBAAgB;AACnB,+BAAiB;AACjB,oBAAM;AAAA,YACR;AACA,kBAAM,KAAK,KAAK;AAChB,2BAAe,SAAS,SAAS,IAAI,IAAI,GAAG,EAAE,MAAM,SAAS,CAAC;AAAA,UAChE;AAEA,uBAAa,UAAU;AAEvB,iBAAO,aAAa,OAAO;AAAA,YACzB,6BAA6B;AAAA,YAC7B,qBAAqB;AAAA,YACrB,oBAAoB,CAAC,IAAI,EAAE,GAAG,MAAM;AAClC,oBAAM,KAAK,KAAK;AAChB,6BAAe,SAAS,SAAS,IAAI,IAAI,GAAG,EAAE,MAAM,SAAS,CAAC;AAAA,YAChE;AAAA,YACA,mBAAmB;AAAA,YACnB,yBAAyB;AAAA,YACzB,uBAAuB;AAAA,UACzB,CAAC;AAAA,QACH;AAAA,QAEA,CAAC,aAAa,WAAW,WAAW,WAAW,WAAW;AAAA,MAC5D;AAEA,UAAI,kBAA6C;AACjD,UAAI,mBAA8C;AAClD,UAAI,iBAA4C;AAGhD,YAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AArctD;AAscQ,YAAI,eAAe,KAAK,GAAG;AACzB,gBAAM,QAAO,iBAAM,SAAN,mBAAa,oBAAb,mBAA8B;AAC3C,kBAAQ;AAAA,iBACD;AACH,gCAAkB;AAClB;AAAA,iBACG;AACH,+BAAiB;AACjB;AAAA,iBACG;AACH,iCAAmB;AACnB;AAAA;AAGA,sBAAQ,KAAK,0CAA0C,KAAK;AAAA;AAAA,QAElE;AAAA,MACF,CAAC;AAED,YAAM,gBAAe,yCAAY,YAAU,yCAAY;AAEvD,YAAM,gBAAgB,OAAO,uBAAuB,gBAAgB,CAAC,QAAQ;AAC3E,eAAO;AAAA,UACL,WAAW,CAAC,EAAE,YAAY,cAAc,IAAI,cAAc,IAAI,CAAC;AAAA,QACjE;AAAA,MACF,CAAC;AAED,UAAI,cAAc;AAChB,eAAO;AAAA,MACT;AAGA,YAAM,eAAe,OAAO,iBAAiB,OAAO;AAEpD,YAAM,WACJ,qBAAC;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA,uBAAa,OAAO;AAAA,UAErB,qBAAC;AAAA,YACC;AAAA,YACC,GAAG,6CAAc;AAAA,YAClB,UAAU,CAAC,MAAM;AACf,oBAAM,OAAO,EAAE,YAAY,OAAO;AAClC,2BAAa,CAAC,SAAS;AACrB,sBAAM,cAAc,KAAK,IAAI,OAAO,IAAI,IAAI;AAC5C,8BAAc,WAAW;AACzB,uBAAO;AAAA,cACT,CAAC;AAAA,YACH;AAAA,YACA,eAAe,OAAO,SAAS;AAAA,YAC/B,OAAO;AAAA,cACL;AAAA,gBACE,UAAU;AAAA,gBACV;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,cACV;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,cAED,oBAAC;AAAA,gBACC,SAAS,QAAQ,SAAS;AAAA,gBAC1B,IAAI;AAAA,gBACJ,gBAAc;AAAA,gBACd,QAAQ,CAAC,UAAU;AAAA,gBAEnB,iBAAiB;AAAA,gBAEhB,uBAAa,OAAO;AAAA,eACvB;AAAA;AAAA,WACF;AAAA;AAAA,OACF;AAGF,UAAI,OAAO;AACT,eACE,oBAAC;AAAA,UAAO;AAAA,UACN,8BAAC;AAAA,YAAM,MAAM;AAAA,YAAY;AAAA,WAAS;AAAA,SACpC;AAAA,MAEJ;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF;AAIA,SAAS,eAAe,OAAgB,WAAoB;AAC1D,MAAI,CAAC;AAAW,WAAO;AACvB,MAAI,UAAU,QAAW;AAEvB,YAAQ,KAAK,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,MAAM,QAAQ;AACpB,QAAM,OAAO,KAAK,MAAM,YAAY,MAAM,SAAS;AACnD,SAAO;AACT;AAEA,SAAS,SAAS,GAAW,MAAc,cAAc,IAAI;AAC3D,MAAI,IAAI,MAAM;AACZ,UAAM,OAAO,OAAO;AACpB,UAAM,UAAU,KAAK,IAAI,aAAa,IAAI,IAAI;AAC9C,UAAM,aAAa,MAAM,KAAK,IAAI,KAAK,OAAO;AAC9C,UAAM,QAAQ,CAAC,aAAa;AAC5B,WAAO,OAAO;AAAA,EAChB;AACA,SAAO;AACT;AAUA,MAAM,yBAAyB,cAAkD,IAAI;AAE9E,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,cAAc;AAAA,KACX;AACL,MAA6E;AAC3E,QAAM,eAAe,SAAS,gBAAgB;AAE9C,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,aAAa,MAAM;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,MAAM,MAAM,MAAM,QAAQ,MAAM,WAAW;AAAA,EAC5D;AAEA,SACE,oBAAC,uBAAuB,UAAvB;AAAA,IAAgC,OAAO;AAAA,IAAY;AAAA,GAAS;AAEjE;",
|
|
6
6
|
"names": ["Sheet", "position", "at"]
|
|
7
7
|
}
|
package/dist/jsx/Sheet.js
CHANGED
|
@@ -138,7 +138,8 @@ const Sheet = withStaticProperties(
|
|
|
138
138
|
dismissOnSnapToBottom = false,
|
|
139
139
|
disableDrag: disableDragProp,
|
|
140
140
|
modal = false,
|
|
141
|
-
handleDisableScroll = true
|
|
141
|
+
handleDisableScroll = true,
|
|
142
|
+
zIndex = 40
|
|
142
143
|
} = props;
|
|
143
144
|
if (process.env.NODE_ENV === "development") {
|
|
144
145
|
if (snapPointsProp.some((p) => p < 0 || p > 100)) {
|
|
@@ -401,7 +402,7 @@ const Sheet = withStaticProperties(
|
|
|
401
402
|
}} pointerEvents={open ? "auto" : "none"} style={[
|
|
402
403
|
{
|
|
403
404
|
position: "absolute",
|
|
404
|
-
zIndex
|
|
405
|
+
zIndex,
|
|
405
406
|
width: "100%",
|
|
406
407
|
height: "100%"
|
|
407
408
|
},
|
|
@@ -412,7 +413,7 @@ const Sheet = withStaticProperties(
|
|
|
412
413
|
</AnimatedView>
|
|
413
414
|
</SheetProvider>;
|
|
414
415
|
if (modal) {
|
|
415
|
-
return <Portal><Theme name={themeName}>{contents}</Theme></Portal>;
|
|
416
|
+
return <Portal zIndex={zIndex}><Theme name={themeName}>{contents}</Theme></Portal>;
|
|
416
417
|
}
|
|
417
418
|
return contents;
|
|
418
419
|
})
|
package/dist/jsx/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 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 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\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 onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n dismissOnSnapToBottom = false,\n disableDrag: disableDragProp,\n modal = false,\n handleDisableScroll = true,\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 onChangeOpenInternal = (val: boolean) => {\n controller?.onChangeOpen?.(val)\n onChangeOpen?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onChangeOpenInternal,\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: onChangePosition,\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 to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { 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 if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\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 ? 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 ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\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 (modal) {\n return (\n <Portal>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n }\n)\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 onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onChangeOpen: onChangeOpenProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onChangeOpen = useEvent(onChangeOpenProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onChangeOpen,\n }),\n [onChangeOpen, 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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
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n getAnimationDriver,\n isClient,\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 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\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 onChangePosition,\n onChangeOpen,\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 onChangeOpenInternal = (val: boolean) => {\n controller?.onChangeOpen?.(val)\n onChangeOpen?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onChangeOpenInternal,\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: onChangePosition,\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 to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { 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 if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\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 ? 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 ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex,\n width: '100%',\n height: '100%',\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 (modal) {\n return (\n <Portal zIndex={zIndex}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n }\n)\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 onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onChangeOpen: onChangeOpenProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onChangeOpen = useEvent(onChangeOpenProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onChangeOpen,\n }),\n [onChangeOpen, 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": ["Sheet", "position", "at"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/sheet",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.166",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
"lint:fix": "yarn lint --fix"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@tamagui/animations-react-native": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/remove-scroll": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
25
|
+
"@tamagui/animations-react-native": "^1.0.1-beta.166",
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.166",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.166",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.166",
|
|
29
|
+
"@tamagui/remove-scroll": "^1.0.1-beta.166",
|
|
30
|
+
"@tamagui/stacks": "^1.0.1-beta.166",
|
|
31
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.166"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "*",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"react-native": "*"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
39
|
+
"@tamagui/build": "^1.0.1-beta.166",
|
|
40
40
|
"react": "*",
|
|
41
41
|
"react-dom": "*",
|
|
42
42
|
"react-native": "*"
|
package/src/Sheet.tsx
CHANGED
|
@@ -188,6 +188,7 @@ export const Sheet = withStaticProperties(
|
|
|
188
188
|
disableDrag: disableDragProp,
|
|
189
189
|
modal = false,
|
|
190
190
|
handleDisableScroll = true,
|
|
191
|
+
zIndex = 40,
|
|
191
192
|
} = props
|
|
192
193
|
|
|
193
194
|
if (process.env.NODE_ENV === 'development') {
|
|
@@ -517,7 +518,7 @@ export const Sheet = withStaticProperties(
|
|
|
517
518
|
style={[
|
|
518
519
|
{
|
|
519
520
|
position: 'absolute',
|
|
520
|
-
zIndex
|
|
521
|
+
zIndex,
|
|
521
522
|
width: '100%',
|
|
522
523
|
height: '100%',
|
|
523
524
|
},
|
|
@@ -542,7 +543,7 @@ export const Sheet = withStaticProperties(
|
|
|
542
543
|
|
|
543
544
|
if (modal) {
|
|
544
545
|
return (
|
|
545
|
-
<Portal>
|
|
546
|
+
<Portal zIndex={zIndex}>
|
|
546
547
|
<Theme name={themeName}>{contents}</Theme>
|
|
547
548
|
</Portal>
|
|
548
549
|
)
|
package/src/types.tsx
CHANGED
package/types/Sheet.d.ts
CHANGED
|
@@ -109,6 +109,7 @@ export declare const Sheet: ((props: Omit<{
|
|
|
109
109
|
handleDisableScroll?: boolean | undefined;
|
|
110
110
|
disableDrag?: boolean | undefined;
|
|
111
111
|
modal?: boolean | undefined;
|
|
112
|
+
zIndex?: number | undefined;
|
|
112
113
|
} & {
|
|
113
114
|
__scopeSheet?: import("@tamagui/create-context").Scope<any>;
|
|
114
115
|
} & React.RefAttributes<View>, "theme" | "themeInverse"> & {
|
package/types/types.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export declare type SheetProps = ScopedProps<{
|
|
|
17
17
|
handleDisableScroll?: boolean;
|
|
18
18
|
disableDrag?: boolean;
|
|
19
19
|
modal?: boolean;
|
|
20
|
+
zIndex?: number;
|
|
20
21
|
}, 'Sheet'>;
|
|
21
22
|
export declare type PositionChangeHandler = (position: number) => void;
|
|
22
23
|
declare type OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>;
|