@tamagui/sheet 1.0.1-beta.159 → 1.0.1-beta.162
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.map +2 -2
- package/dist/esm/Sheet.js.map +2 -2
- package/dist/jsx/Sheet.js.map +2 -2
- package/package.json +9 -9
- package/src/Sheet.tsx +2 -3
- package/types/Sheet.d.ts +4 -4
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 // TODO still have as const bug\n } as const,\n },\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,
|
|
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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",
|
|
6
6
|
"names": ["import_SheetContext", "Sheet", "React", "position", "at"]
|
|
7
7
|
}
|
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 // TODO still have as const bug\n } as const,\n },\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 } = 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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",
|
|
6
6
|
"names": ["Sheet", "position", "at"]
|
|
7
7
|
}
|
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 // TODO still have as const bug\n } as const,\n },\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,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,CAAC,iBACC,SAAS,MAAM;AAEb,YAAM,MAAM,QAAQ,WAAW,UAAU,QAAQ,wBAAwB,KAAK;AAC9E,YAAM,WAAW,QAAQ,WAAW,KAAK;AACzC,cAAQ,YAAY,OAAO;AAAA,IAC7B,GACA,MAAM,QAAQ,UACV,OACN;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,
|
|
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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",
|
|
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.162",
|
|
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.162",
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.162",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.162",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.162",
|
|
29
|
+
"@tamagui/remove-scroll": "^1.0.1-beta.162",
|
|
30
|
+
"@tamagui/stacks": "^1.0.1-beta.162",
|
|
31
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.162"
|
|
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.162",
|
|
40
40
|
"react": "*",
|
|
41
41
|
"react-dom": "*",
|
|
42
42
|
"react-native": "*"
|
package/src/Sheet.tsx
CHANGED
|
@@ -111,9 +111,8 @@ export const SheetOverlayFrame = styled(YStack, {
|
|
|
111
111
|
false: {
|
|
112
112
|
pointerEvents: 'auto',
|
|
113
113
|
},
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
},
|
|
114
|
+
},
|
|
115
|
+
} as const,
|
|
117
116
|
})
|
|
118
117
|
|
|
119
118
|
export type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>
|
package/types/Sheet.d.ts
CHANGED
|
@@ -30,22 +30,22 @@ export declare const SheetOverlayFrame: import("@tamagui/core").TamaguiComponent
|
|
|
30
30
|
readonly fullscreen?: boolean | undefined;
|
|
31
31
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
32
32
|
}, "closed"> & {
|
|
33
|
-
closed?: boolean | undefined;
|
|
33
|
+
readonly closed?: boolean | undefined;
|
|
34
34
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
35
35
|
readonly fullscreen?: boolean | undefined;
|
|
36
36
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
37
37
|
}, "closed"> & {
|
|
38
|
-
closed?: boolean | undefined;
|
|
38
|
+
readonly closed?: boolean | undefined;
|
|
39
39
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
40
40
|
readonly fullscreen?: boolean | undefined;
|
|
41
41
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
42
42
|
}, "closed"> & {
|
|
43
|
-
closed?: boolean | undefined;
|
|
43
|
+
readonly closed?: boolean | undefined;
|
|
44
44
|
}>>, TamaguiElement, import("@tamagui/core").StackPropsBase, {
|
|
45
45
|
readonly fullscreen?: boolean | undefined;
|
|
46
46
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
47
47
|
} & {
|
|
48
|
-
closed?: boolean | undefined;
|
|
48
|
+
readonly closed?: boolean | undefined;
|
|
49
49
|
}>;
|
|
50
50
|
export declare type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>;
|
|
51
51
|
export declare const SheetOverlay: ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => JSX.Element;
|