@tamagui/sheet 1.0.1-beta.166 → 1.0.1-beta.168
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 +21 -17
- package/dist/cjs/Sheet.js.map +2 -2
- package/dist/cjs/SheetScrollView.js +4 -10
- package/dist/cjs/SheetScrollView.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/Sheet.js +20 -17
- package/dist/esm/Sheet.js.map +2 -2
- package/dist/esm/SheetScrollView.js +3 -9
- package/dist/esm/SheetScrollView.js.map +2 -2
- package/dist/jsx/Sheet.js +20 -17
- package/dist/jsx/Sheet.js.map +2 -2
- package/dist/jsx/SheetScrollView.js +3 -9
- package/dist/jsx/SheetScrollView.js.map +2 -2
- package/package.json +10 -9
- package/src/Sheet.tsx +27 -18
- package/src/SheetScrollView.tsx +5 -10
- package/src/types.tsx +2 -2
- package/types/Sheet.d.ts +35 -6
- package/types/SheetScrollView.d.ts +9 -3
- package/types/types.d.ts +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "AA2CM;
|
|
4
|
+
"sourcesContent": ["import { TamaguiElement } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useRef, useState } from 'react'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled, setScrollEnabled] = useState(true)\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n })\n\n const release = () => {\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={ref}\n flex={1}\n scrollEventThrottle={8}\n scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n return true\n }}\n onMoveShouldSetResponder={() => true}\n onResponderMove={(e) => {\n const { pageY } = e.nativeEvent\n\n if (state.current.isScrolling) {\n return\n }\n\n if (scrollBridge.scrollStartY === -1) {\n scrollBridge.scrollStartY = pageY\n state.current.lastPageY = pageY\n }\n\n const dragAt = pageY - scrollBridge.scrollStartY\n const dy = pageY - state.current.lastPageY\n state.current.lastPageY = pageY // after dy\n // const isAboveStart = dragAt <= 0\n // const isDraggingDown = dy > 0\n // const isScrollAtTop = scrollBridge.y <= 0\n const isDraggingUp = dy < 0\n const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n state.current.isScrolling = true\n setScrollEnabled(true)\n return\n }\n\n setScrollEnabled(false)\n scrollBridge.drag(dragAt)\n state.current.dragAt = dragAt\n state.current.dys.push(dy)\n // only do every so often, cut down to 10 again\n if (state.current.dys.length > 100) {\n state.current.dys = state.current.dys.slice(-10)\n }\n }}\n onResponderRelease={release}\n // onResponderEnd={release}\n // onResponderTerminate={release}\n {...props}\n />\n )\n }\n)\n"],
|
|
5
|
+
"mappings": "AA2CM;AA1CN,SAAS,kBAAmC;AAC5C,SAAS,YAAY,QAAQ,gBAAgB;AAE7C,SAAS,uBAAuB;AAOhC,MAAM,yBAAyB;AAExB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,iBAAiB,MAAM,GAAsC,QAAQ;AACtE,UAAM,EAAE,aAAa,IAAI,gBAAgB,wBAAwB,YAAY;AAC7E,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,UAAM,QAAQ,OAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,IACf,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAC5B,uBAAiB,IAAI;AACrB,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,oBAAC;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU,CAAC,MAAM;AACf,cAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,qBAAa,IAAI;AACjB,YAAI,IAAI,GAAG;AACT,uBAAa,eAAe;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,2BAA2B,MAAM;AAC/B,qBAAa,eAAe;AAC5B,eAAO;AAAA,MACT;AAAA,MACA,0BAA0B,MAAM;AAAA,MAChC,iBAAiB,CAAC,MAAM;AACtB,cAAM,EAAE,MAAM,IAAI,EAAE;AAEpB,YAAI,MAAM,QAAQ,aAAa;AAC7B;AAAA,QACF;AAEA,YAAI,aAAa,iBAAiB,IAAI;AACpC,uBAAa,eAAe;AAC5B,gBAAM,QAAQ,YAAY;AAAA,QAC5B;AAEA,cAAM,SAAS,QAAQ,aAAa;AACpC,cAAM,KAAK,QAAQ,MAAM,QAAQ;AACjC,cAAM,QAAQ,YAAY;AAI1B,cAAM,eAAe,KAAK;AAC1B,cAAM,cAAc,aAAa,SAAS,aAAa;AAEvD,aAAK,OAAO,KAAK,iBAAiB,aAAa;AAC7C,gBAAM,QAAQ,cAAc;AAC5B,2BAAiB,IAAI;AACrB;AAAA,QACF;AAEA,yBAAiB,KAAK;AACtB,qBAAa,KAAK,MAAM;AACxB,cAAM,QAAQ,SAAS;AACvB,cAAM,QAAQ,IAAI,KAAK,EAAE;AAEzB,YAAI,MAAM,QAAQ,IAAI,SAAS,KAAK;AAClC,gBAAM,QAAQ,MAAM,MAAM,QAAQ,IAAI,MAAM,GAAG;AAAA,QACjD;AAAA,MACF;AAAA,MACA,oBAAoB;AAAA,MAGnB,GAAG;AAAA,KACN;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Sheet.js
CHANGED
|
@@ -120,6 +120,12 @@ const SheetFrame = SheetFrameFrame.extractable(
|
|
|
120
120
|
})
|
|
121
121
|
);
|
|
122
122
|
const HIDDEN_SIZE = 1e4;
|
|
123
|
+
const sheetComponents = {
|
|
124
|
+
Handle: SheetHandle,
|
|
125
|
+
Frame: SheetFrame,
|
|
126
|
+
Overlay: SheetOverlay,
|
|
127
|
+
ScrollView: SheetScrollView
|
|
128
|
+
};
|
|
123
129
|
const Sheet = withStaticProperties(
|
|
124
130
|
themeable(
|
|
125
131
|
forwardRef(function Sheet2(props, ref) {
|
|
@@ -130,8 +136,8 @@ const Sheet = withStaticProperties(
|
|
|
130
136
|
defaultOpen,
|
|
131
137
|
children: childrenProp,
|
|
132
138
|
position: positionProp,
|
|
133
|
-
|
|
134
|
-
|
|
139
|
+
onPositionChange,
|
|
140
|
+
onOpenChange,
|
|
135
141
|
defaultPosition,
|
|
136
142
|
dismissOnOverlayPress = true,
|
|
137
143
|
animationConfig,
|
|
@@ -169,14 +175,14 @@ const Sheet = withStaticProperties(
|
|
|
169
175
|
},
|
|
170
176
|
scrollLock: false
|
|
171
177
|
}));
|
|
172
|
-
const
|
|
173
|
-
controller?.
|
|
174
|
-
|
|
178
|
+
const onOpenChangeInternal = (val) => {
|
|
179
|
+
controller?.onOpenChange?.(val);
|
|
180
|
+
onOpenChange?.(val);
|
|
175
181
|
};
|
|
176
182
|
const [open, setOpen] = useControllableState({
|
|
177
183
|
prop: controller?.open ?? openProp,
|
|
178
184
|
defaultProp: defaultOpen || true,
|
|
179
|
-
onChange:
|
|
185
|
+
onChange: onOpenChangeInternal,
|
|
180
186
|
strategy: "most-recent-wins"
|
|
181
187
|
});
|
|
182
188
|
const [frameSize, setFrameSize] = useState(0);
|
|
@@ -187,7 +193,7 @@ const Sheet = withStaticProperties(
|
|
|
187
193
|
const [position_, setPosition_] = useControllableState({
|
|
188
194
|
prop: positionProp,
|
|
189
195
|
defaultProp: defaultPosition || (open ? 0 : -1),
|
|
190
|
-
onChange:
|
|
196
|
+
onChange: onPositionChange,
|
|
191
197
|
strategy: "most-recent-wins"
|
|
192
198
|
});
|
|
193
199
|
const position = open === false ? -1 : position_;
|
|
@@ -418,13 +424,9 @@ const Sheet = withStaticProperties(
|
|
|
418
424
|
return contents;
|
|
419
425
|
})
|
|
420
426
|
),
|
|
421
|
-
|
|
422
|
-
Handle: SheetHandle,
|
|
423
|
-
Frame: SheetFrame,
|
|
424
|
-
Overlay: SheetOverlay,
|
|
425
|
-
ScrollView: SheetScrollView
|
|
426
|
-
}
|
|
427
|
+
sheetComponents
|
|
427
428
|
);
|
|
429
|
+
const ControlledSheet = Sheet;
|
|
428
430
|
function getPercentSize(point, frameSize) {
|
|
429
431
|
if (!frameSize)
|
|
430
432
|
return 0;
|
|
@@ -449,22 +451,23 @@ function resisted(y, minY, maxOverflow = 25) {
|
|
|
449
451
|
const SheetControllerContext = createContext(null);
|
|
450
452
|
const SheetController = ({
|
|
451
453
|
children,
|
|
452
|
-
|
|
454
|
+
onOpenChange: onOpenChangeProp,
|
|
453
455
|
...value
|
|
454
456
|
}) => {
|
|
455
|
-
const
|
|
457
|
+
const onOpenChange = useEvent(onOpenChangeProp);
|
|
456
458
|
const memoValue = useMemo(
|
|
457
459
|
() => ({
|
|
458
460
|
open: value.open,
|
|
459
461
|
hidden: value.hidden,
|
|
460
462
|
disableDrag: value.disableDrag,
|
|
461
|
-
|
|
463
|
+
onOpenChange
|
|
462
464
|
}),
|
|
463
|
-
[
|
|
465
|
+
[onOpenChange, value.open, value.hidden, value.disableDrag]
|
|
464
466
|
);
|
|
465
467
|
return <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>;
|
|
466
468
|
};
|
|
467
469
|
export {
|
|
470
|
+
ControlledSheet,
|
|
468
471
|
Sheet,
|
|
469
472
|
SheetController,
|
|
470
473
|
SheetFrame,
|
package/dist/jsx/Sheet.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Sheet.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n getAnimationDriver,\n isClient,\n mergeEvent,\n styled,\n themeable,\n useConstant,\n useEvent,\n useIsomorphicLayoutEffect,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n createContext,\n forwardRef,\n isValidElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { GestureResponderEvent, PanResponder, PanResponderGestureState, View } from 'react-native'\n\nimport { SHEET_HANDLE_NAME, SHEET_NAME } from './SHEET_HANDLE_NAME'\nimport { SheetProvider, useSheetContext } from './SheetContext'\nimport { SheetScrollView } from './SheetScrollView'\nimport { ScrollBridge, SheetProps, SheetScopedProps } from './types'\n\nexport { createSheetScope } from './SheetContext'\n\n/* -------------------------------------------------------------------------------------------------\n * SheetHandle\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n zIndex: 10,\n marginHorizontal: '35%',\n marginBottom: '$2',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n\n variants: {\n open: {\n true: {\n pointerEvents: 'auto',\n },\n false: {\n opacity: 0,\n pointerEvents: 'none',\n },\n },\n } as const,\n})\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n return (\n <SheetHandleFrame\n onPress={() => {\n // don't toggle to the bottom snap position when dismissOnSnapToBottom set\n const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0)\n const nextPos = (context.position + 1) % max\n context.setPosition(nextPos)\n }}\n open={context.open}\n {...props}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SheetOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_OVERLAY_NAME = 'SheetOverlay'\n\nexport const SheetOverlayFrame = styled(YStack, {\n name: SHEET_OVERLAY_NAME,\n // TODO this should be $background without opacity and just customized by theme\n backgroundColor: '$color',\n fullscreen: true,\n opacity: 0.2,\n zIndex: 0,\n\n variants: {\n closed: {\n true: {\n opacity: 0,\n pointerEvents: 'none',\n },\n false: {\n pointerEvents: 'auto',\n },\n },\n } as const,\n})\n\nexport type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>\n\nexport const SheetOverlay = SheetOverlayFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {\n const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)\n return (\n <SheetOverlayFrame\n closed={!context.open || context.hidden}\n {...props}\n onPress={mergeEvent(\n props.onPress,\n context.dismissOnOverlayPress\n ? () => {\n context.setOpen(false)\n }\n : undefined\n )}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * Sheet\n * -----------------------------------------------------------------------------------------------*/\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrameFrame = styled(YStack, {\n name: SHEET_NAME,\n flex: 1,\n backgroundColor: '$background',\n borderTopLeftRadius: '$4',\n borderTopRightRadius: '$4',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n pointerEvents: 'auto',\n})\n\nexport const SheetFrame = SheetFrameFrame.extractable(\n forwardRef(({ __scopeSheet, ...props }: SheetScopedProps<YStackProps>, forwardedRef) => {\n const context = useSheetContext(SHEET_NAME, __scopeSheet)\n const composedContentRef = useComposedRefs(forwardedRef, context.contentRef)\n return <SheetFrameFrame ref={composedContentRef} {...props} />\n })\n)\n\n// set all the way off screen\nconst HIDDEN_SIZE = 10_000\n\nexport const Sheet = withStaticProperties(\n themeable(\n forwardRef<View, SheetProps>(function Sheet(props, ref) {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n dismissOnSnapToBottom = false,\n disableDrag: disableDragProp,\n modal = false,\n handleDisableScroll = true,\n zIndex = 40,\n } = props\n\n if (process.env.NODE_ENV === 'development') {\n if (snapPointsProp.some((p) => p < 0 || p > 100)) {\n // eslint-disable-next-line no-console\n console.warn(\n `\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`\n )\n }\n }\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error(`Must set animations in tamagui.config.ts`)\n }\n\n // allows for sheets to be controlled by other components\n const controller = useContext(SheetControllerContext)\n const isHidden = controller?.hidden || false\n const disableDrag = disableDragProp ?? controller?.disableDrag\n const themeName = useThemeName()\n const contentRef = React.useRef<TamaguiElement>(null)\n const scrollBridge = useConstant<ScrollBridge>(() => ({\n enabled: false,\n y: 0,\n paneY: 0,\n paneMinY: 0,\n scrollStartY: -1,\n drag: () => {},\n release: () => {},\n scrollLock: false,\n }))\n\n const onChangeOpenInternal = (val: boolean) => {\n controller?.onChangeOpen?.(val)\n onChangeOpen?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onChangeOpenInternal,\n strategy: 'most-recent-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n\n const snapPoints = useMemo(\n () => (dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]\n )\n\n // lets set -1 to be always the \"open = false\" position\n const [position_, setPosition_] = useControllableState({\n prop: positionProp,\n defaultProp: defaultPosition || (open ? 0 : -1),\n onChange: onChangePosition,\n strategy: 'most-recent-wins',\n })\n const position = open === false ? -1 : position_\n\n // reset position to fully open on re-open after dismissOnSnapToBottom\n if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {\n setPosition_(0)\n }\n\n const setPosition = useCallback(\n (next: number) => {\n // close on dismissOnSnapToBottom (and set position so it animates)\n if (dismissOnSnapToBottom && next === snapPoints.length - 1) {\n setOpen(false)\n } else {\n setPosition_(next)\n }\n },\n [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]\n )\n\n const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE)\n\n // native only fix\n const at = useRef(0)\n driver.useAnimatedNumberReaction(animatedNumber, (value) => {\n at.current = value\n scrollBridge.paneY = value\n })\n\n const [isResizing, setIsResizing] = useState(true)\n useIsomorphicLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n function stopSpring() {\n animatedNumber.stop()\n if (scrollBridge.onFinishAnimate) {\n scrollBridge.onFinishAnimate()\n scrollBridge.onFinishAnimate = undefined\n }\n }\n\n // open must set position\n const shouldSetPositionOpen = open && position < 0\n useEffect(() => {\n if (shouldSetPositionOpen) {\n setPosition(0)\n }\n }, [setPosition, shouldSetPositionOpen])\n\n const positions = useMemo(\n () => snapPoints.map((point) => getPercentSize(point, frameSize)),\n [frameSize, snapPoints]\n )\n\n const animateTo = useEvent((position: number) => {\n const current = animatedNumber.getValue()\n if (isHidden && open) return\n if (!current) return\n if (frameSize === 0) return\n const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize\n const toValue = isHidden || position === -1 ? hiddenValue : positions[position]\n if (at.current === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n animatedNumber.setValue(toValue, {\n type: 'timing',\n duration: 0,\n })\n at.current = toValue\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = at.current === HIDDEN_SIZE\n animatedNumber.setValue(toValue, {\n ...animationConfig,\n type: 'spring',\n overshootClamping,\n })\n })\n\n useIsomorphicLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(\n () => {\n if (disableDrag) return\n if (!frameSize) return\n\n const minY = positions[0]\n scrollBridge.paneMinY = minY\n let startY = at.current\n\n function makeUnselectable(val: boolean) {\n if (!selectionStyleSheet) return\n if (!val) {\n selectionStyleSheet.innerText = ``\n } else {\n selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`\n }\n }\n\n const release = ({ vy, dragAt }: { dragAt: number; vy: number }) => {\n isExternalDrag = false\n previouslyScrolling = false\n makeUnselectable(false)\n const at = dragAt + startY\n // seems liky vy goes up to about 4 at the very most (+ is down, - is up)\n // lets base our multiplier on the total layout height\n const end = at + frameSize * vy * 0.2\n let closestPoint = 0\n let dist = Infinity\n for (let i = 0; i < positions.length; i++) {\n const position = positions[i]\n const curDist = end > position ? end - position : position - end\n if (curDist < dist) {\n dist = curDist\n closestPoint = i\n }\n }\n // have to call both because state may not change but need to snap back\n setPosition(closestPoint)\n animateTo(closestPoint)\n }\n\n const finish = (_e: GestureResponderEvent, state: PanResponderGestureState) => {\n release({\n vy: state.vy,\n dragAt: state.dy,\n })\n }\n\n let previouslyScrolling = false\n\n const onMoveShouldSet = (_e: GestureResponderEvent, { dy }: PanResponderGestureState) => {\n const isScrolled = scrollBridge.y !== 0\n if (isScrolled) {\n previouslyScrolling = true\n return false\n }\n if (previouslyScrolling) {\n previouslyScrolling = false\n return true\n }\n const isDraggingUp = dy < 0\n const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n // prevent drag once at top and pulling up\n if (isAtTop) {\n if (!isScrolled && isDraggingUp) {\n return false\n }\n }\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 8\n }\n\n const grant = () => {\n makeUnselectable(true)\n stopSpring()\n startY = at.current\n }\n\n let isExternalDrag = false\n\n scrollBridge.drag = (dy) => {\n if (!isExternalDrag) {\n isExternalDrag = true\n grant()\n }\n const to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { type: 'direct' })\n }\n\n scrollBridge.release = release\n\n return PanResponder.create({\n onMoveShouldSetPanResponder: onMoveShouldSet,\n onPanResponderGrant: grant,\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { type: 'direct' })\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [disableDrag, animateTo, frameSize, positions, setPosition]\n )\n\n let handleComponent: React.ReactElement | null = null\n let overlayComponent: React.ReactElement | null = null\n let frameComponent: React.ReactElement | null = null\n\n // TODO do more radix-like and don't require direct children descendents\n React.Children.forEach(childrenProp, (child) => {\n if (isValidElement(child)) {\n const name = child.type?.['staticConfig']?.componentName\n switch (name) {\n case 'SheetHandle':\n handleComponent = child\n break\n case 'Sheet':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n // eslint-disable-next-line no-console\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }],\n }\n })\n\n if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\n\n const contents = (\n <SheetProvider\n modal={modal}\n contentRef={contentRef}\n dismissOnOverlayPress={dismissOnOverlayPress}\n dismissOnSnapToBottom={dismissOnSnapToBottom}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n scrollBridge={scrollBridge}\n >\n {isResizing ? null : overlayComponent}\n\n <AnimatedView\n ref={ref}\n {...panResponder?.panHandlers}\n onLayout={(e) => {\n const next = e.nativeEvent.layout.height\n setFrameSize((prev) => {\n const isBigChange = Math.abs(prev - next) > 50\n setIsResizing(isBigChange)\n return next\n })\n }}\n pointerEvents={open ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex,\n width: '100%',\n height: '100%',\n },\n animatedStyle,\n ]}\n >\n {handleComponent}\n\n <RemoveScroll\n enabled={open && modal && handleDisableScroll}\n as={Slot}\n allowPinchZoom\n shards={[contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n {isResizing ? null : frameComponent}\n </RemoveScroll>\n </AnimatedView>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal zIndex={zIndex}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n }\n)\n\n/* -------------------------------------------------------------------------------------------------*/\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = Math.round(frameSize - pct * frameSize)\n return next\n}\n\nfunction resisted(y: number, minY: number, maxOverflow = 25) {\n if (y < minY) {\n const past = minY - y\n const pctPast = Math.min(maxOverflow, past) / maxOverflow\n const diminishBy = 1.1 - Math.pow(0.1, pctPast)\n const extra = -diminishBy * maxOverflow\n return minY + extra\n }\n return y\n}\n\ntype SheetControllerContextValue = {\n disableDrag?: boolean\n open?: boolean\n // hide without \"closing\" to prevent re-animation when shown again\n hidden?: boolean\n onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onChangeOpen: onChangeOpenProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onChangeOpen = useEvent(onChangeOpenProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onChangeOpen,\n }),\n [onChangeOpen, value.open, value.hidden, value.disableDrag]\n )\n\n return (\n <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,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,
|
|
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 FunctionComponent,\n RefAttributes,\n createContext,\n forwardRef,\n isValidElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { GestureResponderEvent, PanResponder, PanResponderGestureState, View } from 'react-native'\n\nimport { SHEET_HANDLE_NAME, SHEET_NAME } from './SHEET_HANDLE_NAME'\nimport { SheetProvider, useSheetContext } from './SheetContext'\nimport { SheetScrollView } from './SheetScrollView'\nimport { ScrollBridge, SheetProps, SheetScopedProps } from './types'\n\nexport { createSheetScope } from './SheetContext'\n\n/* -------------------------------------------------------------------------------------------------\n * SheetHandle\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n zIndex: 10,\n marginHorizontal: '35%',\n marginBottom: '$2',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n\n variants: {\n open: {\n true: {\n pointerEvents: 'auto',\n },\n false: {\n opacity: 0,\n pointerEvents: 'none',\n },\n },\n } as const,\n})\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n return (\n <SheetHandleFrame\n onPress={() => {\n // don't toggle to the bottom snap position when dismissOnSnapToBottom set\n const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0)\n const nextPos = (context.position + 1) % max\n context.setPosition(nextPos)\n }}\n open={context.open}\n {...props}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SheetOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_OVERLAY_NAME = 'SheetOverlay'\n\nexport const SheetOverlayFrame = styled(YStack, {\n name: SHEET_OVERLAY_NAME,\n // TODO this should be $background without opacity and just customized by theme\n backgroundColor: '$color',\n fullscreen: true,\n opacity: 0.2,\n zIndex: 0,\n\n variants: {\n closed: {\n true: {\n opacity: 0,\n pointerEvents: 'none',\n },\n false: {\n pointerEvents: 'auto',\n },\n },\n } as const,\n})\n\nexport type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>\n\nexport const SheetOverlay = SheetOverlayFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {\n const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)\n return (\n <SheetOverlayFrame\n closed={!context.open || context.hidden}\n {...props}\n onPress={mergeEvent(\n props.onPress,\n context.dismissOnOverlayPress\n ? () => {\n context.setOpen(false)\n }\n : undefined\n )}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * Sheet\n * -----------------------------------------------------------------------------------------------*/\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrameFrame = styled(YStack, {\n name: SHEET_NAME,\n flex: 1,\n backgroundColor: '$background',\n borderTopLeftRadius: '$4',\n borderTopRightRadius: '$4',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n pointerEvents: 'auto',\n})\n\nexport const SheetFrame = SheetFrameFrame.extractable(\n forwardRef(({ __scopeSheet, ...props }: SheetScopedProps<YStackProps>, forwardedRef) => {\n const context = useSheetContext(SHEET_NAME, __scopeSheet)\n const composedContentRef = useComposedRefs(forwardedRef, context.contentRef)\n return <SheetFrameFrame ref={composedContentRef} {...props} />\n })\n)\n\n// set all the way off screen\nconst HIDDEN_SIZE = 10_000\n\nconst sheetComponents = {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n ScrollView: SheetScrollView,\n}\n\nexport const Sheet = withStaticProperties(\n themeable(\n forwardRef<View, SheetProps>(function Sheet(props, ref) {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onPositionChange,\n onOpenChange,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n dismissOnSnapToBottom = false,\n disableDrag: disableDragProp,\n modal = false,\n handleDisableScroll = true,\n zIndex = 40,\n } = props\n\n if (process.env.NODE_ENV === 'development') {\n if (snapPointsProp.some((p) => p < 0 || p > 100)) {\n // eslint-disable-next-line no-console\n console.warn(\n `\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`\n )\n }\n }\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error(`Must set animations in tamagui.config.ts`)\n }\n\n // allows for sheets to be controlled by other components\n const controller = useContext(SheetControllerContext)\n const isHidden = controller?.hidden || false\n const disableDrag = disableDragProp ?? controller?.disableDrag\n const themeName = useThemeName()\n const contentRef = React.useRef<TamaguiElement>(null)\n const scrollBridge = useConstant<ScrollBridge>(() => ({\n enabled: false,\n y: 0,\n paneY: 0,\n paneMinY: 0,\n scrollStartY: -1,\n drag: () => {},\n release: () => {},\n scrollLock: false,\n }))\n\n const onOpenChangeInternal = (val: boolean) => {\n controller?.onOpenChange?.(val)\n onOpenChange?.(val)\n }\n\n const [open, setOpen] = useControllableState({\n prop: controller?.open ?? openProp,\n defaultProp: defaultOpen || true,\n onChange: onOpenChangeInternal,\n strategy: 'most-recent-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n\n const snapPoints = useMemo(\n () => (dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]\n )\n\n // lets set -1 to be always the \"open = false\" position\n const [position_, setPosition_] = useControllableState({\n prop: positionProp,\n defaultProp: defaultPosition || (open ? 0 : -1),\n onChange: onPositionChange,\n strategy: 'most-recent-wins',\n })\n const position = open === false ? -1 : position_\n\n // reset position to fully open on re-open after dismissOnSnapToBottom\n if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {\n setPosition_(0)\n }\n\n const setPosition = useCallback(\n (next: number) => {\n // close on dismissOnSnapToBottom (and set position so it animates)\n if (dismissOnSnapToBottom && next === snapPoints.length - 1) {\n setOpen(false)\n } else {\n setPosition_(next)\n }\n },\n [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]\n )\n\n const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE)\n\n // native only fix\n const at = useRef(0)\n driver.useAnimatedNumberReaction(animatedNumber, (value) => {\n at.current = value\n scrollBridge.paneY = value\n })\n\n const [isResizing, setIsResizing] = useState(true)\n useIsomorphicLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n function stopSpring() {\n animatedNumber.stop()\n if (scrollBridge.onFinishAnimate) {\n scrollBridge.onFinishAnimate()\n scrollBridge.onFinishAnimate = undefined\n }\n }\n\n // open must set position\n const shouldSetPositionOpen = open && position < 0\n useEffect(() => {\n if (shouldSetPositionOpen) {\n setPosition(0)\n }\n }, [setPosition, shouldSetPositionOpen])\n\n const positions = useMemo(\n () => snapPoints.map((point) => getPercentSize(point, frameSize)),\n [frameSize, snapPoints]\n )\n\n const animateTo = useEvent((position: number) => {\n const current = animatedNumber.getValue()\n if (isHidden && open) return\n if (!current) return\n if (frameSize === 0) return\n const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize\n const toValue = isHidden || position === -1 ? hiddenValue : positions[position]\n if (at.current === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n animatedNumber.setValue(toValue, {\n type: 'timing',\n duration: 0,\n })\n at.current = toValue\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = at.current === HIDDEN_SIZE\n animatedNumber.setValue(toValue, {\n ...animationConfig,\n type: 'spring',\n overshootClamping,\n })\n })\n\n useIsomorphicLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(\n () => {\n if (disableDrag) return\n if (!frameSize) return\n\n const minY = positions[0]\n scrollBridge.paneMinY = minY\n let startY = at.current\n\n function makeUnselectable(val: boolean) {\n if (!selectionStyleSheet) return\n if (!val) {\n selectionStyleSheet.innerText = ``\n } else {\n selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`\n }\n }\n\n const release = ({ vy, dragAt }: { dragAt: number; vy: number }) => {\n isExternalDrag = false\n previouslyScrolling = false\n makeUnselectable(false)\n const at = dragAt + startY\n // seems liky vy goes up to about 4 at the very most (+ is down, - is up)\n // lets base our multiplier on the total layout height\n const end = at + frameSize * vy * 0.2\n let closestPoint = 0\n let dist = Infinity\n for (let i = 0; i < positions.length; i++) {\n const position = positions[i]\n const curDist = end > position ? end - position : position - end\n if (curDist < dist) {\n dist = curDist\n closestPoint = i\n }\n }\n // have to call both because state may not change but need to snap back\n setPosition(closestPoint)\n animateTo(closestPoint)\n }\n\n const finish = (_e: GestureResponderEvent, state: PanResponderGestureState) => {\n release({\n vy: state.vy,\n dragAt: state.dy,\n })\n }\n\n let previouslyScrolling = false\n\n const onMoveShouldSet = (_e: GestureResponderEvent, { dy }: PanResponderGestureState) => {\n const isScrolled = scrollBridge.y !== 0\n if (isScrolled) {\n previouslyScrolling = true\n return false\n }\n if (previouslyScrolling) {\n previouslyScrolling = false\n return true\n }\n const isDraggingUp = dy < 0\n const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n // prevent drag once at top and pulling up\n if (isAtTop) {\n if (!isScrolled && isDraggingUp) {\n return false\n }\n }\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 8\n }\n\n const grant = () => {\n makeUnselectable(true)\n stopSpring()\n startY = at.current\n }\n\n let isExternalDrag = false\n\n scrollBridge.drag = (dy) => {\n if (!isExternalDrag) {\n isExternalDrag = true\n grant()\n }\n const to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { type: 'direct' })\n }\n\n scrollBridge.release = release\n\n return PanResponder.create({\n onMoveShouldSetPanResponder: onMoveShouldSet,\n onPanResponderGrant: grant,\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n animatedNumber.setValue(resisted(to, minY), { type: 'direct' })\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [disableDrag, animateTo, frameSize, positions, setPosition]\n )\n\n let handleComponent: React.ReactElement | null = null\n let overlayComponent: React.ReactElement | null = null\n let frameComponent: React.ReactElement | null = null\n\n // TODO do more radix-like and don't require direct children descendents\n React.Children.forEach(childrenProp, (child) => {\n if (isValidElement(child)) {\n const name = child.type?.['staticConfig']?.componentName\n switch (name) {\n case 'SheetHandle':\n handleComponent = child\n break\n case 'Sheet':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n // eslint-disable-next-line no-console\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }],\n }\n })\n\n if (preventShown) {\n return null\n }\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = driver['NumberView'] ?? driver.View\n\n const contents = (\n <SheetProvider\n modal={modal}\n contentRef={contentRef}\n dismissOnOverlayPress={dismissOnOverlayPress}\n dismissOnSnapToBottom={dismissOnSnapToBottom}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n scrollBridge={scrollBridge}\n >\n {isResizing ? null : overlayComponent}\n\n <AnimatedView\n ref={ref}\n {...panResponder?.panHandlers}\n onLayout={(e) => {\n const next = e.nativeEvent.layout.height\n setFrameSize((prev) => {\n const isBigChange = Math.abs(prev - next) > 50\n setIsResizing(isBigChange)\n return next\n })\n }}\n pointerEvents={open ? 'auto' : 'none'}\n style={[\n {\n position: 'absolute',\n zIndex,\n width: '100%',\n height: '100%',\n },\n animatedStyle,\n ]}\n >\n {handleComponent}\n\n <RemoveScroll\n enabled={open && modal && handleDisableScroll}\n as={Slot}\n allowPinchZoom\n shards={[contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n {isResizing ? null : frameComponent}\n </RemoveScroll>\n </AnimatedView>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal zIndex={zIndex}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n })\n ),\n sheetComponents\n)\n\nexport const ControlledSheet = Sheet as FunctionComponent<\n Omit<SheetProps, 'open' | 'onOpenChange'> & RefAttributes<View>\n> &\n typeof sheetComponents\n\n/* -------------------------------------------------------------------------------------------------*/\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = Math.round(frameSize - pct * frameSize)\n return next\n}\n\nfunction resisted(y: number, minY: number, maxOverflow = 25) {\n if (y < minY) {\n const past = minY - y\n const pctPast = Math.min(maxOverflow, past) / maxOverflow\n const diminishBy = 1.1 - Math.pow(0.1, pctPast)\n const extra = -diminishBy * maxOverflow\n return minY + extra\n }\n return y\n}\n\ntype SheetControllerContextValue = {\n disableDrag?: boolean\n open?: boolean\n // hide without \"closing\" to prevent re-animation when shown again\n hidden?: boolean\n onOpenChange?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)\n}\n\nconst SheetControllerContext = createContext<SheetControllerContextValue | null>(null)\n\nexport const SheetController = ({\n children,\n onOpenChange: onOpenChangeProp,\n ...value\n}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {\n const onOpenChange = useEvent(onOpenChangeProp)\n\n const memoValue = useMemo(\n () => ({\n open: value.open,\n hidden: value.hidden,\n disableDrag: value.disableDrag,\n onOpenChange,\n }),\n [onOpenChange, value.open, value.hidden, value.disableDrag]\n )\n\n return (\n <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Sheet", "position", "at"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { ScrollView } from "@tamagui/scroll-view";
|
|
1
2
|
import { forwardRef, useRef, useState } from "react";
|
|
2
|
-
import { ScrollView } from "react-native";
|
|
3
3
|
import { useSheetContext } from "./SheetContext";
|
|
4
4
|
const SHEET_SCROLL_VIEW_NAME = "SheetScrollView";
|
|
5
5
|
const SheetScrollView = forwardRef(
|
|
@@ -22,7 +22,6 @@ const SheetScrollView = forwardRef(
|
|
|
22
22
|
const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0;
|
|
23
23
|
const avgDy = dist / recentDys.length;
|
|
24
24
|
vy = avgDy * 0.04;
|
|
25
|
-
console.table([{ vy, avgDy, dist, recentDys }]);
|
|
26
25
|
}
|
|
27
26
|
state.current.dys = [];
|
|
28
27
|
scrollBridge.release({
|
|
@@ -30,7 +29,7 @@ const SheetScrollView = forwardRef(
|
|
|
30
29
|
vy
|
|
31
30
|
});
|
|
32
31
|
};
|
|
33
|
-
return <ScrollView ref={ref} scrollEventThrottle={8} scrollEnabled={scrollEnabled} onScroll={(e) => {
|
|
32
|
+
return <ScrollView ref={ref} flex={1} scrollEventThrottle={8} scrollEnabled={scrollEnabled} onScroll={(e) => {
|
|
34
33
|
const { y } = e.nativeEvent.contentOffset;
|
|
35
34
|
scrollBridge.y = y;
|
|
36
35
|
if (y > 0) {
|
|
@@ -65,12 +64,7 @@ const SheetScrollView = forwardRef(
|
|
|
65
64
|
if (state.current.dys.length > 100) {
|
|
66
65
|
state.current.dys = state.current.dys.slice(-10);
|
|
67
66
|
}
|
|
68
|
-
}} onResponderRelease={release} {...props}
|
|
69
|
-
{
|
|
70
|
-
flex: 1
|
|
71
|
-
},
|
|
72
|
-
props.style
|
|
73
|
-
]} />;
|
|
67
|
+
}} onResponderRelease={release} {...props} />;
|
|
74
68
|
}
|
|
75
69
|
);
|
|
76
70
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { TamaguiElement } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useRef, useState } from 'react'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled, setScrollEnabled] = useState(true)\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n })\n\n const release = () => {\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={ref}\n flex={1}\n scrollEventThrottle={8}\n scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n return true\n }}\n onMoveShouldSetResponder={() => true}\n onResponderMove={(e) => {\n const { pageY } = e.nativeEvent\n\n if (state.current.isScrolling) {\n return\n }\n\n if (scrollBridge.scrollStartY === -1) {\n scrollBridge.scrollStartY = pageY\n state.current.lastPageY = pageY\n }\n\n const dragAt = pageY - scrollBridge.scrollStartY\n const dy = pageY - state.current.lastPageY\n state.current.lastPageY = pageY // after dy\n // const isAboveStart = dragAt <= 0\n // const isDraggingDown = dy > 0\n // const isScrollAtTop = scrollBridge.y <= 0\n const isDraggingUp = dy < 0\n const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n state.current.isScrolling = true\n setScrollEnabled(true)\n return\n }\n\n setScrollEnabled(false)\n scrollBridge.drag(dragAt)\n state.current.dragAt = dragAt\n state.current.dys.push(dy)\n // only do every so often, cut down to 10 again\n if (state.current.dys.length > 100) {\n state.current.dys = state.current.dys.slice(-10)\n }\n }}\n onResponderRelease={release}\n // onResponderEnd={release}\n // onResponderTerminate={release}\n {...props}\n />\n )\n }\n)\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,kBAAmC;AAC5C,SAAS,YAAY,QAAQ,gBAAgB;AAE7C,SAAS,uBAAuB;AAOhC,MAAM,yBAAyB;AAExB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,iBAAiB,MAAM,GAAsC,QAAQ;AACtE,UAAM,EAAE,aAAa,IAAI,gBAAgB,wBAAwB,YAAY;AAC7E,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,UAAM,QAAQ,OAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,IACf,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAC5B,uBAAiB,IAAI;AACrB,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,CAAC,WACC,KAAK,KACL,MAAM,GACN,qBAAqB,GACrB,eAAe,eACf,UAAU,CAAC,MAAM;AACf,YAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,mBAAa,IAAI;AACjB,UAAI,IAAI,GAAG;AACT,qBAAa,eAAe;AAAA,MAC9B;AAAA,IACF,GACA,2BAA2B,MAAM;AAC/B,mBAAa,eAAe;AAC5B,aAAO;AAAA,IACT,GACA,0BAA0B,MAAM,MAChC,iBAAiB,CAAC,MAAM;AACtB,YAAM,EAAE,MAAM,IAAI,EAAE;AAEpB,UAAI,MAAM,QAAQ,aAAa;AAC7B;AAAA,MACF;AAEA,UAAI,aAAa,iBAAiB,IAAI;AACpC,qBAAa,eAAe;AAC5B,cAAM,QAAQ,YAAY;AAAA,MAC5B;AAEA,YAAM,SAAS,QAAQ,aAAa;AACpC,YAAM,KAAK,QAAQ,MAAM,QAAQ;AACjC,YAAM,QAAQ,YAAY;AAI1B,YAAM,eAAe,KAAK;AAC1B,YAAM,cAAc,aAAa,SAAS,aAAa;AAEvD,WAAK,OAAO,KAAK,iBAAiB,aAAa;AAC7C,cAAM,QAAQ,cAAc;AAC5B,yBAAiB,IAAI;AACrB;AAAA,MACF;AAEA,uBAAiB,KAAK;AACtB,mBAAa,KAAK,MAAM;AACxB,YAAM,QAAQ,SAAS;AACvB,YAAM,QAAQ,IAAI,KAAK,EAAE;AAEzB,UAAI,MAAM,QAAQ,IAAI,SAAS,KAAK;AAClC,cAAM,QAAQ,MAAM,MAAM,QAAQ,IAAI,MAAM,GAAG;AAAA,MACjD;AAAA,IACF,GACA,oBAAoB,aAGhB,OACN;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": []
|
|
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.168",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -22,13 +22,14 @@
|
|
|
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/
|
|
31
|
-
"@tamagui/
|
|
25
|
+
"@tamagui/animations-react-native": "^1.0.1-beta.168",
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.168",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.168",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.168",
|
|
29
|
+
"@tamagui/remove-scroll": "^1.0.1-beta.168",
|
|
30
|
+
"@tamagui/scroll-view": "^1.0.1-beta.168",
|
|
31
|
+
"@tamagui/stacks": "^1.0.1-beta.168",
|
|
32
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.168"
|
|
32
33
|
},
|
|
33
34
|
"peerDependencies": {
|
|
34
35
|
"react": "*",
|
|
@@ -36,7 +37,7 @@
|
|
|
36
37
|
"react-native": "*"
|
|
37
38
|
},
|
|
38
39
|
"devDependencies": {
|
|
39
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
40
|
+
"@tamagui/build": "^1.0.1-beta.168",
|
|
40
41
|
"react": "*",
|
|
41
42
|
"react-dom": "*",
|
|
42
43
|
"react-native": "*"
|
package/src/Sheet.tsx
CHANGED
|
@@ -20,6 +20,8 @@ import { RemoveScroll } from '@tamagui/remove-scroll'
|
|
|
20
20
|
import { XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'
|
|
21
21
|
import { useControllableState } from '@tamagui/use-controllable-state'
|
|
22
22
|
import React, {
|
|
23
|
+
FunctionComponent,
|
|
24
|
+
RefAttributes,
|
|
23
25
|
createContext,
|
|
24
26
|
forwardRef,
|
|
25
27
|
isValidElement,
|
|
@@ -169,6 +171,13 @@ export const SheetFrame = SheetFrameFrame.extractable(
|
|
|
169
171
|
// set all the way off screen
|
|
170
172
|
const HIDDEN_SIZE = 10_000
|
|
171
173
|
|
|
174
|
+
const sheetComponents = {
|
|
175
|
+
Handle: SheetHandle,
|
|
176
|
+
Frame: SheetFrame,
|
|
177
|
+
Overlay: SheetOverlay,
|
|
178
|
+
ScrollView: SheetScrollView,
|
|
179
|
+
}
|
|
180
|
+
|
|
172
181
|
export const Sheet = withStaticProperties(
|
|
173
182
|
themeable(
|
|
174
183
|
forwardRef<View, SheetProps>(function Sheet(props, ref) {
|
|
@@ -179,8 +188,8 @@ export const Sheet = withStaticProperties(
|
|
|
179
188
|
defaultOpen,
|
|
180
189
|
children: childrenProp,
|
|
181
190
|
position: positionProp,
|
|
182
|
-
|
|
183
|
-
|
|
191
|
+
onPositionChange,
|
|
192
|
+
onOpenChange,
|
|
184
193
|
defaultPosition,
|
|
185
194
|
dismissOnOverlayPress = true,
|
|
186
195
|
animationConfig,
|
|
@@ -222,15 +231,15 @@ export const Sheet = withStaticProperties(
|
|
|
222
231
|
scrollLock: false,
|
|
223
232
|
}))
|
|
224
233
|
|
|
225
|
-
const
|
|
226
|
-
controller?.
|
|
227
|
-
|
|
234
|
+
const onOpenChangeInternal = (val: boolean) => {
|
|
235
|
+
controller?.onOpenChange?.(val)
|
|
236
|
+
onOpenChange?.(val)
|
|
228
237
|
}
|
|
229
238
|
|
|
230
239
|
const [open, setOpen] = useControllableState({
|
|
231
240
|
prop: controller?.open ?? openProp,
|
|
232
241
|
defaultProp: defaultOpen || true,
|
|
233
|
-
onChange:
|
|
242
|
+
onChange: onOpenChangeInternal,
|
|
234
243
|
strategy: 'most-recent-wins',
|
|
235
244
|
})
|
|
236
245
|
|
|
@@ -246,7 +255,7 @@ export const Sheet = withStaticProperties(
|
|
|
246
255
|
const [position_, setPosition_] = useControllableState({
|
|
247
256
|
prop: positionProp,
|
|
248
257
|
defaultProp: defaultPosition || (open ? 0 : -1),
|
|
249
|
-
onChange:
|
|
258
|
+
onChange: onPositionChange,
|
|
250
259
|
strategy: 'most-recent-wins',
|
|
251
260
|
})
|
|
252
261
|
const position = open === false ? -1 : position_
|
|
@@ -552,14 +561,14 @@ export const Sheet = withStaticProperties(
|
|
|
552
561
|
return contents
|
|
553
562
|
})
|
|
554
563
|
),
|
|
555
|
-
|
|
556
|
-
Handle: SheetHandle,
|
|
557
|
-
Frame: SheetFrame,
|
|
558
|
-
Overlay: SheetOverlay,
|
|
559
|
-
ScrollView: SheetScrollView,
|
|
560
|
-
}
|
|
564
|
+
sheetComponents
|
|
561
565
|
)
|
|
562
566
|
|
|
567
|
+
export const ControlledSheet = Sheet as FunctionComponent<
|
|
568
|
+
Omit<SheetProps, 'open' | 'onOpenChange'> & RefAttributes<View>
|
|
569
|
+
> &
|
|
570
|
+
typeof sheetComponents
|
|
571
|
+
|
|
563
572
|
/* -------------------------------------------------------------------------------------------------*/
|
|
564
573
|
|
|
565
574
|
function getPercentSize(point?: number, frameSize?: number) {
|
|
@@ -590,26 +599,26 @@ type SheetControllerContextValue = {
|
|
|
590
599
|
open?: boolean
|
|
591
600
|
// hide without "closing" to prevent re-animation when shown again
|
|
592
601
|
hidden?: boolean
|
|
593
|
-
|
|
602
|
+
onOpenChange?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)
|
|
594
603
|
}
|
|
595
604
|
|
|
596
605
|
const SheetControllerContext = createContext<SheetControllerContextValue | null>(null)
|
|
597
606
|
|
|
598
607
|
export const SheetController = ({
|
|
599
608
|
children,
|
|
600
|
-
|
|
609
|
+
onOpenChange: onOpenChangeProp,
|
|
601
610
|
...value
|
|
602
611
|
}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {
|
|
603
|
-
const
|
|
612
|
+
const onOpenChange = useEvent(onOpenChangeProp)
|
|
604
613
|
|
|
605
614
|
const memoValue = useMemo(
|
|
606
615
|
() => ({
|
|
607
616
|
open: value.open,
|
|
608
617
|
hidden: value.hidden,
|
|
609
618
|
disableDrag: value.disableDrag,
|
|
610
|
-
|
|
619
|
+
onOpenChange,
|
|
611
620
|
}),
|
|
612
|
-
[
|
|
621
|
+
[onOpenChange, value.open, value.hidden, value.disableDrag]
|
|
613
622
|
)
|
|
614
623
|
|
|
615
624
|
return (
|
package/src/SheetScrollView.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ScrollView, ScrollViewProps } from '
|
|
1
|
+
import { TamaguiElement } from '@tamagui/core'
|
|
2
|
+
import { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'
|
|
3
|
+
import { forwardRef, useRef, useState } from 'react'
|
|
3
4
|
|
|
4
5
|
import { useSheetContext } from './SheetContext'
|
|
5
6
|
import { SheetScopedProps } from './types'
|
|
@@ -10,7 +11,7 @@ import { SheetScopedProps } from './types'
|
|
|
10
11
|
|
|
11
12
|
const SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'
|
|
12
13
|
|
|
13
|
-
export const SheetScrollView = forwardRef<
|
|
14
|
+
export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
|
|
14
15
|
({ __scopeSheet, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {
|
|
15
16
|
const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)
|
|
16
17
|
const [scrollEnabled, setScrollEnabled] = useState(true)
|
|
@@ -31,7 +32,6 @@ export const SheetScrollView = forwardRef<ScrollView, ScrollViewProps>(
|
|
|
31
32
|
const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0
|
|
32
33
|
const avgDy = dist / recentDys.length
|
|
33
34
|
vy = avgDy * 0.04
|
|
34
|
-
console.table([{ vy, avgDy, dist, recentDys }])
|
|
35
35
|
}
|
|
36
36
|
state.current.dys = []
|
|
37
37
|
scrollBridge.release({
|
|
@@ -43,6 +43,7 @@ export const SheetScrollView = forwardRef<ScrollView, ScrollViewProps>(
|
|
|
43
43
|
return (
|
|
44
44
|
<ScrollView
|
|
45
45
|
ref={ref}
|
|
46
|
+
flex={1}
|
|
46
47
|
scrollEventThrottle={8}
|
|
47
48
|
scrollEnabled={scrollEnabled}
|
|
48
49
|
onScroll={(e) => {
|
|
@@ -97,12 +98,6 @@ export const SheetScrollView = forwardRef<ScrollView, ScrollViewProps>(
|
|
|
97
98
|
// onResponderEnd={release}
|
|
98
99
|
// onResponderTerminate={release}
|
|
99
100
|
{...props}
|
|
100
|
-
style={[
|
|
101
|
-
{
|
|
102
|
-
flex: 1,
|
|
103
|
-
},
|
|
104
|
-
props.style,
|
|
105
|
-
]}
|
|
106
101
|
/>
|
|
107
102
|
)
|
|
108
103
|
}
|
package/src/types.tsx
CHANGED
|
@@ -7,11 +7,11 @@ export type SheetProps = ScopedProps<
|
|
|
7
7
|
{
|
|
8
8
|
open?: boolean
|
|
9
9
|
defaultOpen?: boolean
|
|
10
|
-
|
|
10
|
+
onOpenChange?: OpenChangeHandler
|
|
11
11
|
position?: number
|
|
12
12
|
defaultPosition?: number
|
|
13
13
|
snapPoints?: number[]
|
|
14
|
-
|
|
14
|
+
onPositionChange?: PositionChangeHandler
|
|
15
15
|
children?: ReactNode
|
|
16
16
|
dismissOnOverlayPress?: boolean
|
|
17
17
|
dismissOnSnapToBottom?: boolean
|