@tamagui/sheet 1.0.1-beta.104 → 1.0.1-beta.105
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 +35 -11
- package/dist/cjs/Sheet.js.map +2 -2
- package/dist/esm/Sheet.js +35 -11
- package/dist/esm/Sheet.js.map +2 -2
- package/dist/jsx/Sheet.js +23 -9
- package/dist/jsx/Sheet.js.map +2 -2
- package/package.json +8 -6
- package/src/Sheet.tsx +55 -19
- package/types/Sheet.d.ts +21 -23
- package/types/Sheet.d.ts.map +1 -1
package/dist/cjs/Sheet.js
CHANGED
|
@@ -52,6 +52,7 @@ __export(Sheet_exports, {
|
|
|
52
52
|
Sheet: () => Sheet,
|
|
53
53
|
SheetController: () => SheetController,
|
|
54
54
|
SheetFrame: () => SheetFrame,
|
|
55
|
+
SheetFrameFrame: () => SheetFrameFrame,
|
|
55
56
|
SheetHandle: () => SheetHandle,
|
|
56
57
|
SheetHandleFrame: () => SheetHandleFrame,
|
|
57
58
|
SheetOverlay: () => SheetOverlay,
|
|
@@ -59,9 +60,11 @@ __export(Sheet_exports, {
|
|
|
59
60
|
createSheetScope: () => createSheetScope
|
|
60
61
|
});
|
|
61
62
|
module.exports = __toCommonJS(Sheet_exports);
|
|
63
|
+
var import_compose_refs = require("@tamagui/compose-refs");
|
|
62
64
|
var import_core = require("@tamagui/core");
|
|
63
65
|
var import_create_context = require("@tamagui/create-context");
|
|
64
66
|
var import_portal = require("@tamagui/portal");
|
|
67
|
+
var import_remove_scroll = require("@tamagui/remove-scroll");
|
|
65
68
|
var import_stacks = require("@tamagui/stacks");
|
|
66
69
|
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
67
70
|
var import_react = __toESM(require("react"));
|
|
@@ -100,8 +103,9 @@ const SheetHandle = SheetHandleFrame.extractable((_a) => {
|
|
|
100
103
|
}
|
|
101
104
|
}, props));
|
|
102
105
|
});
|
|
106
|
+
const SHEET_OVERLAY_NAME = "SheetOverlay";
|
|
103
107
|
const SheetOverlayFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
104
|
-
name:
|
|
108
|
+
name: SHEET_OVERLAY_NAME,
|
|
105
109
|
backgroundColor: "$color",
|
|
106
110
|
fullscreen: true,
|
|
107
111
|
opacity: 0.2,
|
|
@@ -120,29 +124,44 @@ const SheetOverlayFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
|
120
124
|
});
|
|
121
125
|
const SheetOverlay = SheetOverlayFrame.extractable((_c) => {
|
|
122
126
|
var _d = _c, { __scopeSheet } = _d, props = __objRest(_d, ["__scopeSheet"]);
|
|
123
|
-
const context = useSheetContext(
|
|
124
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
127
|
+
const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet);
|
|
128
|
+
return /* @__PURE__ */ import_react.default.createElement(import_remove_scroll.RemoveScroll, {
|
|
129
|
+
enabled: context.open,
|
|
130
|
+
as: import_core.Slot,
|
|
131
|
+
allowPinchZoom: context.allowPinchZoom,
|
|
132
|
+
shards: [context.contentRef]
|
|
133
|
+
}, /* @__PURE__ */ import_react.default.createElement(SheetOverlayFrame, __spreadProps(__spreadValues({
|
|
125
134
|
closed: !context.open || context.hidden
|
|
126
135
|
}, props), {
|
|
127
136
|
onPress: (0, import_core.mergeEvent)(props.onPress, context.dismissOnOverlayPress ? () => {
|
|
128
137
|
context.setOpen(false);
|
|
129
138
|
} : void 0)
|
|
130
|
-
}));
|
|
139
|
+
})));
|
|
131
140
|
});
|
|
132
141
|
const selectionStyleSheet = import_core.isClient ? document.createElement("style") : null;
|
|
133
142
|
if (selectionStyleSheet) {
|
|
134
143
|
document.head.appendChild(selectionStyleSheet);
|
|
135
144
|
}
|
|
136
|
-
const
|
|
137
|
-
|
|
145
|
+
const SHEET_FRAME_NAME = "SheetFrame";
|
|
146
|
+
const SheetFrameFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
147
|
+
name: SHEET_FRAME_NAME,
|
|
138
148
|
flex: 1,
|
|
139
149
|
backgroundColor: "$background",
|
|
140
150
|
borderTopLeftRadius: "$4",
|
|
141
151
|
borderTopRightRadius: "$4",
|
|
142
|
-
padding: "$4",
|
|
143
152
|
width: "100%",
|
|
153
|
+
maxHeight: "100%",
|
|
154
|
+
overflow: "hidden",
|
|
144
155
|
pointerEvents: "auto"
|
|
145
156
|
});
|
|
157
|
+
const SheetFrame = SheetFrameFrame.extractable((0, import_react.forwardRef)((_e, forwardedRef) => {
|
|
158
|
+
var _f = _e, { __scopeSheet } = _f, props = __objRest(_f, ["__scopeSheet"]);
|
|
159
|
+
const context = useSheetContext(SHEET_FRAME_NAME, __scopeSheet);
|
|
160
|
+
const composedContentRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef);
|
|
161
|
+
return /* @__PURE__ */ import_react.default.createElement(SheetFrameFrame, __spreadValues({
|
|
162
|
+
ref: composedContentRef
|
|
163
|
+
}, props));
|
|
164
|
+
}));
|
|
146
165
|
const HIDDEN_SIZE = 1e4;
|
|
147
166
|
const Sheet = (0, import_core.withStaticProperties)((0, import_core.themeable)((0, import_react.forwardRef)((props, ref) => {
|
|
148
167
|
const {
|
|
@@ -158,12 +177,14 @@ const Sheet = (0, import_core.withStaticProperties)((0, import_core.themeable)((
|
|
|
158
177
|
dismissOnOverlayPress = true,
|
|
159
178
|
animationConfig,
|
|
160
179
|
disableDrag: disableDragProp,
|
|
161
|
-
modal
|
|
180
|
+
modal,
|
|
181
|
+
allowPinchZoom
|
|
162
182
|
} = props;
|
|
163
183
|
const controller = (0, import_react.useContext)(SheetControllerContext);
|
|
164
184
|
const isHidden = (controller == null ? void 0 : controller.hidden) || false;
|
|
165
185
|
const disableDrag = disableDragProp ?? (controller == null ? void 0 : controller.disableDrag);
|
|
166
186
|
const themeName = (0, import_core.useThemeName)();
|
|
187
|
+
const contentRef = import_react.default.useRef(null);
|
|
167
188
|
const onChangeOpenInternal = (val) => {
|
|
168
189
|
var _a;
|
|
169
190
|
(_a = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a.call(controller, val);
|
|
@@ -320,7 +341,9 @@ const Sheet = (0, import_core.withStaticProperties)((0, import_core.themeable)((
|
|
|
320
341
|
return null;
|
|
321
342
|
}
|
|
322
343
|
const contents = /* @__PURE__ */ import_react.default.createElement(SheetProvider, {
|
|
344
|
+
contentRef,
|
|
323
345
|
dismissOnOverlayPress,
|
|
346
|
+
allowPinchZoom,
|
|
324
347
|
open,
|
|
325
348
|
hidden: isHidden,
|
|
326
349
|
scope: __scopeSheet,
|
|
@@ -385,11 +408,11 @@ function resisted(y, minY, maxOverflow = 25) {
|
|
|
385
408
|
return y;
|
|
386
409
|
}
|
|
387
410
|
const SheetControllerContext = (0, import_react.createContext)(null);
|
|
388
|
-
const SheetController = (
|
|
389
|
-
var
|
|
411
|
+
const SheetController = (_g) => {
|
|
412
|
+
var _h = _g, {
|
|
390
413
|
children,
|
|
391
414
|
onChangeOpen: onChangeOpenProp
|
|
392
|
-
} =
|
|
415
|
+
} = _h, value = __objRest(_h, [
|
|
393
416
|
"children",
|
|
394
417
|
"onChangeOpen"
|
|
395
418
|
]);
|
|
@@ -409,6 +432,7 @@ const SheetController = (_e) => {
|
|
|
409
432
|
Sheet,
|
|
410
433
|
SheetController,
|
|
411
434
|
SheetFrame,
|
|
435
|
+
SheetFrameFrame,
|
|
412
436
|
SheetHandle,
|
|
413
437
|
SheetHandleFrame,
|
|
414
438
|
SheetOverlay,
|
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 {\n GetProps,\n Theme,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useEvent,\n useIsomorphicLayoutEffect,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { Portal } from '@tamagui/portal'\nimport { XStack, XStackProps, YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n ReactNode,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Animated,\n GestureResponderEvent,\n PanResponder,\n PanResponderGestureState,\n View,\n} from 'react-native'\n\nconst SHEET_NAME = 'Sheet'\nconst SHEET_HANDLE_NAME = 'SheetHandle'\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n animationConfig?: Animated.SpringAnimationConfig\n disableDrag?: boolean\n modal?: boolean\n },\n 'Sheet'\n>\n\ntype PositionChangeHandler =\n | ((position: number) => void)\n | React.Dispatch<React.SetStateAction<number>>\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\ntype SheetContextValue = Required<\n Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>\n> & {\n hidden: boolean\n setPosition: React.Dispatch<React.SetStateAction<number>>\n setOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)\nconst [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(\n SHEET_NAME,\n {} as any\n)\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n position: 'absolute',\n pointerEvents: 'auto',\n zIndex: 10,\n y: -18,\n top: 0,\n left: '35%',\n right: '35%',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n})\n\ntype SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n\n if (context.open === false) {\n return null\n }\n\n return (\n <SheetHandleFrame\n onPress={() => {\n const nextPos = (context.position + 1) % context.snapPoints.length\n context.setPosition(nextPos)\n }}\n {...props}\n />\n )\n }\n)\n\nexport const SheetOverlayFrame = styled(YStack, {\n name: 'SheetOverlay',\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_HANDLE_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\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrame = styled(YStack, {\n name: 'SheetFrame',\n flex: 1,\n backgroundColor: '$background',\n borderTopLeftRadius: '$4',\n borderTopRightRadius: '$4',\n padding: '$4',\n width: '100%',\n pointerEvents: 'auto',\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>((props, ref) => {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80, 10],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n disableDrag: disableDragProp,\n modal,\n } = props\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\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: controller ? 'most-recent-wins' : 'prop-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\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 })\n const position = open === false ? -1 : position_\n\n const positionValue = useRef<Animated.Value>()\n if (!positionValue.current) {\n positionValue.current = new Animated.Value(HIDDEN_SIZE)\n }\n\n const [isResizing, setIsResizing] = useState(true)\n useLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n const spring = useRef<Animated.CompositeAnimation | null>(null)\n function stopSpring() {\n spring.current?.stop()\n spring.current = null\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 pos = positionValue.current\n if (isHidden && open) return\n if (!pos) 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 (pos['_value'] === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n Animated.timing(pos, {\n useNativeDriver: !isWeb,\n toValue,\n duration: 0,\n }).start()\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = pos['_value'] === HIDDEN_SIZE\n spring.current = Animated.spring(pos, {\n useNativeDriver: !isWeb,\n toValue,\n overshootClamping,\n ...animationConfig,\n })\n spring.current.start(({ finished }) => finished && stopSpring())\n })\n\n useLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(() => {\n if (disableDrag) return\n if (!frameSize) return\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const pos = positionValue.current!\n const minY = positions[0]\n let startY = pos['_value']\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 finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {\n makeUnselectable(false)\n const at = dy + 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.33\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 return PanResponder.create({\n onMoveShouldSetPanResponder: (_e, { dy }) => {\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 6\n },\n onPanResponderGrant: () => {\n makeUnselectable(true)\n stopSpring()\n startY = pos['_value']\n },\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n pos.setValue(resisted(to, minY))\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n }, [disableDrag, animateTo, frameSize, positions, setPosition])\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 'SheetFrame':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n if (preventShown) {\n return null\n }\n\n const contents = (\n <SheetProvider\n dismissOnOverlayPress={dismissOnOverlayPress}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n >\n {isResizing ? null : overlayComponent}\n {/* no fancy hidden animation etc for handle for now */}\n {isHidden ? null : handleComponent}\n <Animated.View\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 position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],\n }}\n >\n {isResizing ? null : frameComponent}\n </Animated.View>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal visible={open}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n }),\n {\n componentName: 'Sheet',\n }\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n }\n)\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = 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\nexport { createSheetScope }\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useEvent,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\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 ReactNode,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Animated,\n GestureResponderEvent,\n PanResponder,\n PanResponderGestureState,\n View,\n} from 'react-native'\n\nconst SHEET_NAME = 'Sheet'\nconst SHEET_HANDLE_NAME = 'SheetHandle'\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n animationConfig?: Animated.SpringAnimationConfig\n disableDrag?: boolean\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n },\n 'Sheet'\n>\n\ntype PositionChangeHandler =\n | ((position: number) => void)\n | React.Dispatch<React.SetStateAction<number>>\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\ntype SheetContextValue = Required<\n Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>\n> & {\n hidden: boolean\n setPosition: React.Dispatch<React.SetStateAction<number>>\n setOpen: React.Dispatch<React.SetStateAction<boolean>>\n allowPinchZoom: RemoveScrollProps['allowPinchZoom']\n contentRef: React.RefObject<TamaguiElement>\n}\n\nconst [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)\nconst [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(\n SHEET_NAME,\n {} as any\n)\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n position: 'absolute',\n pointerEvents: 'auto',\n zIndex: 10,\n y: -18,\n top: 0,\n left: '35%',\n right: '35%',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n})\n\ntype SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n\n if (context.open === false) {\n return null\n }\n\n return (\n <SheetHandleFrame\n onPress={() => {\n const nextPos = (context.position + 1) % context.snapPoints.length\n context.setPosition(nextPos)\n }}\n {...props}\n />\n )\n }\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 <RemoveScroll\n enabled={context.open}\n as={Slot}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n >\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 </RemoveScroll>\n )\n }\n)\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nconst SHEET_FRAME_NAME = 'SheetFrame'\n\nexport const SheetFrameFrame = styled(YStack, {\n name: SHEET_FRAME_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_FRAME_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>((props, ref) => {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80, 10],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n disableDrag: disableDragProp,\n modal,\n allowPinchZoom,\n } = props\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\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: controller ? 'most-recent-wins' : 'prop-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\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 })\n const position = open === false ? -1 : position_\n\n const positionValue = useRef<Animated.Value>()\n if (!positionValue.current) {\n positionValue.current = new Animated.Value(HIDDEN_SIZE)\n }\n\n const [isResizing, setIsResizing] = useState(true)\n useLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n const spring = useRef<Animated.CompositeAnimation | null>(null)\n function stopSpring() {\n spring.current?.stop()\n spring.current = null\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 pos = positionValue.current\n if (isHidden && open) return\n if (!pos) 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 (pos['_value'] === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n Animated.timing(pos, {\n useNativeDriver: !isWeb,\n toValue,\n duration: 0,\n }).start()\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = pos['_value'] === HIDDEN_SIZE\n spring.current = Animated.spring(pos, {\n useNativeDriver: !isWeb,\n toValue,\n overshootClamping,\n ...animationConfig,\n })\n spring.current.start(({ finished }) => finished && stopSpring())\n })\n\n useLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(() => {\n if (disableDrag) return\n if (!frameSize) return\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const pos = positionValue.current!\n const minY = positions[0]\n let startY = pos['_value']\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 finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {\n makeUnselectable(false)\n const at = dy + 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.33\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 return PanResponder.create({\n onMoveShouldSetPanResponder: (_e, { dy }) => {\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 6\n },\n onPanResponderGrant: () => {\n makeUnselectable(true)\n stopSpring()\n startY = pos['_value']\n },\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n pos.setValue(resisted(to, minY))\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n }, [disableDrag, animateTo, frameSize, positions, setPosition])\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 'SheetFrame':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n if (preventShown) {\n return null\n }\n\n const contents = (\n <SheetProvider\n contentRef={contentRef}\n dismissOnOverlayPress={dismissOnOverlayPress}\n allowPinchZoom={allowPinchZoom}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n >\n {isResizing ? null : overlayComponent}\n {/* no fancy hidden animation etc for handle for now */}\n {isHidden ? null : handleComponent}\n <Animated.View\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 position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],\n }}\n >\n {isResizing ? null : frameComponent}\n </Animated.View>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal visible={open}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n }),\n {\n componentName: 'Sheet',\n }\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n }\n)\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = 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\nexport { createSheetScope }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Sheet.js
CHANGED
|
@@ -29,7 +29,9 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
32
33
|
import {
|
|
34
|
+
Slot,
|
|
33
35
|
Theme,
|
|
34
36
|
isClient,
|
|
35
37
|
isWeb,
|
|
@@ -42,6 +44,7 @@ import {
|
|
|
42
44
|
} from "@tamagui/core";
|
|
43
45
|
import { createContextScope } from "@tamagui/create-context";
|
|
44
46
|
import { Portal } from "@tamagui/portal";
|
|
47
|
+
import { RemoveScroll } from "@tamagui/remove-scroll";
|
|
45
48
|
import { XStack, YStack } from "@tamagui/stacks";
|
|
46
49
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
47
50
|
import React, {
|
|
@@ -93,8 +96,9 @@ const SheetHandle = SheetHandleFrame.extractable((_a) => {
|
|
|
93
96
|
}
|
|
94
97
|
}, props));
|
|
95
98
|
});
|
|
99
|
+
const SHEET_OVERLAY_NAME = "SheetOverlay";
|
|
96
100
|
const SheetOverlayFrame = styled(YStack, {
|
|
97
|
-
name:
|
|
101
|
+
name: SHEET_OVERLAY_NAME,
|
|
98
102
|
backgroundColor: "$color",
|
|
99
103
|
fullscreen: true,
|
|
100
104
|
opacity: 0.2,
|
|
@@ -113,29 +117,44 @@ const SheetOverlayFrame = styled(YStack, {
|
|
|
113
117
|
});
|
|
114
118
|
const SheetOverlay = SheetOverlayFrame.extractable((_c) => {
|
|
115
119
|
var _d = _c, { __scopeSheet } = _d, props = __objRest(_d, ["__scopeSheet"]);
|
|
116
|
-
const context = useSheetContext(
|
|
117
|
-
return /* @__PURE__ */ React.createElement(
|
|
120
|
+
const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet);
|
|
121
|
+
return /* @__PURE__ */ React.createElement(RemoveScroll, {
|
|
122
|
+
enabled: context.open,
|
|
123
|
+
as: Slot,
|
|
124
|
+
allowPinchZoom: context.allowPinchZoom,
|
|
125
|
+
shards: [context.contentRef]
|
|
126
|
+
}, /* @__PURE__ */ React.createElement(SheetOverlayFrame, __spreadProps(__spreadValues({
|
|
118
127
|
closed: !context.open || context.hidden
|
|
119
128
|
}, props), {
|
|
120
129
|
onPress: mergeEvent(props.onPress, context.dismissOnOverlayPress ? () => {
|
|
121
130
|
context.setOpen(false);
|
|
122
131
|
} : void 0)
|
|
123
|
-
}));
|
|
132
|
+
})));
|
|
124
133
|
});
|
|
125
134
|
const selectionStyleSheet = isClient ? document.createElement("style") : null;
|
|
126
135
|
if (selectionStyleSheet) {
|
|
127
136
|
document.head.appendChild(selectionStyleSheet);
|
|
128
137
|
}
|
|
129
|
-
const
|
|
130
|
-
|
|
138
|
+
const SHEET_FRAME_NAME = "SheetFrame";
|
|
139
|
+
const SheetFrameFrame = styled(YStack, {
|
|
140
|
+
name: SHEET_FRAME_NAME,
|
|
131
141
|
flex: 1,
|
|
132
142
|
backgroundColor: "$background",
|
|
133
143
|
borderTopLeftRadius: "$4",
|
|
134
144
|
borderTopRightRadius: "$4",
|
|
135
|
-
padding: "$4",
|
|
136
145
|
width: "100%",
|
|
146
|
+
maxHeight: "100%",
|
|
147
|
+
overflow: "hidden",
|
|
137
148
|
pointerEvents: "auto"
|
|
138
149
|
});
|
|
150
|
+
const SheetFrame = SheetFrameFrame.extractable(forwardRef((_e, forwardedRef) => {
|
|
151
|
+
var _f = _e, { __scopeSheet } = _f, props = __objRest(_f, ["__scopeSheet"]);
|
|
152
|
+
const context = useSheetContext(SHEET_FRAME_NAME, __scopeSheet);
|
|
153
|
+
const composedContentRef = useComposedRefs(forwardedRef, context.contentRef);
|
|
154
|
+
return /* @__PURE__ */ React.createElement(SheetFrameFrame, __spreadValues({
|
|
155
|
+
ref: composedContentRef
|
|
156
|
+
}, props));
|
|
157
|
+
}));
|
|
139
158
|
const HIDDEN_SIZE = 1e4;
|
|
140
159
|
const Sheet = withStaticProperties(themeable(forwardRef((props, ref) => {
|
|
141
160
|
const {
|
|
@@ -151,12 +170,14 @@ const Sheet = withStaticProperties(themeable(forwardRef((props, ref) => {
|
|
|
151
170
|
dismissOnOverlayPress = true,
|
|
152
171
|
animationConfig,
|
|
153
172
|
disableDrag: disableDragProp,
|
|
154
|
-
modal
|
|
173
|
+
modal,
|
|
174
|
+
allowPinchZoom
|
|
155
175
|
} = props;
|
|
156
176
|
const controller = useContext(SheetControllerContext);
|
|
157
177
|
const isHidden = (controller == null ? void 0 : controller.hidden) || false;
|
|
158
178
|
const disableDrag = disableDragProp ?? (controller == null ? void 0 : controller.disableDrag);
|
|
159
179
|
const themeName = useThemeName();
|
|
180
|
+
const contentRef = React.useRef(null);
|
|
160
181
|
const onChangeOpenInternal = (val) => {
|
|
161
182
|
var _a;
|
|
162
183
|
(_a = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a.call(controller, val);
|
|
@@ -313,7 +334,9 @@ const Sheet = withStaticProperties(themeable(forwardRef((props, ref) => {
|
|
|
313
334
|
return null;
|
|
314
335
|
}
|
|
315
336
|
const contents = /* @__PURE__ */ React.createElement(SheetProvider, {
|
|
337
|
+
contentRef,
|
|
316
338
|
dismissOnOverlayPress,
|
|
339
|
+
allowPinchZoom,
|
|
317
340
|
open,
|
|
318
341
|
hidden: isHidden,
|
|
319
342
|
scope: __scopeSheet,
|
|
@@ -378,11 +401,11 @@ function resisted(y, minY, maxOverflow = 25) {
|
|
|
378
401
|
return y;
|
|
379
402
|
}
|
|
380
403
|
const SheetControllerContext = createContext(null);
|
|
381
|
-
const SheetController = (
|
|
382
|
-
var
|
|
404
|
+
const SheetController = (_g) => {
|
|
405
|
+
var _h = _g, {
|
|
383
406
|
children,
|
|
384
407
|
onChangeOpen: onChangeOpenProp
|
|
385
|
-
} =
|
|
408
|
+
} = _h, value = __objRest(_h, [
|
|
386
409
|
"children",
|
|
387
410
|
"onChangeOpen"
|
|
388
411
|
]);
|
|
@@ -401,6 +424,7 @@ export {
|
|
|
401
424
|
Sheet,
|
|
402
425
|
SheetController,
|
|
403
426
|
SheetFrame,
|
|
427
|
+
SheetFrameFrame,
|
|
404
428
|
SheetHandle,
|
|
405
429
|
SheetHandleFrame,
|
|
406
430
|
SheetOverlay,
|
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 {\n GetProps,\n Theme,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useEvent,\n useIsomorphicLayoutEffect,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { Portal } from '@tamagui/portal'\nimport { XStack, XStackProps, YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n ReactNode,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Animated,\n GestureResponderEvent,\n PanResponder,\n PanResponderGestureState,\n View,\n} from 'react-native'\n\nconst SHEET_NAME = 'Sheet'\nconst SHEET_HANDLE_NAME = 'SheetHandle'\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n animationConfig?: Animated.SpringAnimationConfig\n disableDrag?: boolean\n modal?: boolean\n },\n 'Sheet'\n>\n\ntype PositionChangeHandler =\n | ((position: number) => void)\n | React.Dispatch<React.SetStateAction<number>>\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\ntype SheetContextValue = Required<\n Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>\n> & {\n hidden: boolean\n setPosition: React.Dispatch<React.SetStateAction<number>>\n setOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)\nconst [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(\n SHEET_NAME,\n {} as any\n)\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n position: 'absolute',\n pointerEvents: 'auto',\n zIndex: 10,\n y: -18,\n top: 0,\n left: '35%',\n right: '35%',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n})\n\ntype SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n\n if (context.open === false) {\n return null\n }\n\n return (\n <SheetHandleFrame\n onPress={() => {\n const nextPos = (context.position + 1) % context.snapPoints.length\n context.setPosition(nextPos)\n }}\n {...props}\n />\n )\n }\n)\n\nexport const SheetOverlayFrame = styled(YStack, {\n name: 'SheetOverlay',\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_HANDLE_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\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrame = styled(YStack, {\n name: 'SheetFrame',\n flex: 1,\n backgroundColor: '$background',\n borderTopLeftRadius: '$4',\n borderTopRightRadius: '$4',\n padding: '$4',\n width: '100%',\n pointerEvents: 'auto',\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>((props, ref) => {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80, 10],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n disableDrag: disableDragProp,\n modal,\n } = props\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\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: controller ? 'most-recent-wins' : 'prop-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\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 })\n const position = open === false ? -1 : position_\n\n const positionValue = useRef<Animated.Value>()\n if (!positionValue.current) {\n positionValue.current = new Animated.Value(HIDDEN_SIZE)\n }\n\n const [isResizing, setIsResizing] = useState(true)\n useLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n const spring = useRef<Animated.CompositeAnimation | null>(null)\n function stopSpring() {\n spring.current?.stop()\n spring.current = null\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 pos = positionValue.current\n if (isHidden && open) return\n if (!pos) 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 (pos['_value'] === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n Animated.timing(pos, {\n useNativeDriver: !isWeb,\n toValue,\n duration: 0,\n }).start()\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = pos['_value'] === HIDDEN_SIZE\n spring.current = Animated.spring(pos, {\n useNativeDriver: !isWeb,\n toValue,\n overshootClamping,\n ...animationConfig,\n })\n spring.current.start(({ finished }) => finished && stopSpring())\n })\n\n useLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(() => {\n if (disableDrag) return\n if (!frameSize) return\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const pos = positionValue.current!\n const minY = positions[0]\n let startY = pos['_value']\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 finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {\n makeUnselectable(false)\n const at = dy + 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.33\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 return PanResponder.create({\n onMoveShouldSetPanResponder: (_e, { dy }) => {\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 6\n },\n onPanResponderGrant: () => {\n makeUnselectable(true)\n stopSpring()\n startY = pos['_value']\n },\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n pos.setValue(resisted(to, minY))\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n }, [disableDrag, animateTo, frameSize, positions, setPosition])\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 'SheetFrame':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n if (preventShown) {\n return null\n }\n\n const contents = (\n <SheetProvider\n dismissOnOverlayPress={dismissOnOverlayPress}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n >\n {isResizing ? null : overlayComponent}\n {/* no fancy hidden animation etc for handle for now */}\n {isHidden ? null : handleComponent}\n <Animated.View\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 position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],\n }}\n >\n {isResizing ? null : frameComponent}\n </Animated.View>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal visible={open}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n }),\n {\n componentName: 'Sheet',\n }\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n }\n)\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = 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\nexport { createSheetScope }\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useEvent,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\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 ReactNode,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Animated,\n GestureResponderEvent,\n PanResponder,\n PanResponderGestureState,\n View,\n} from 'react-native'\n\nconst SHEET_NAME = 'Sheet'\nconst SHEET_HANDLE_NAME = 'SheetHandle'\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n animationConfig?: Animated.SpringAnimationConfig\n disableDrag?: boolean\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n },\n 'Sheet'\n>\n\ntype PositionChangeHandler =\n | ((position: number) => void)\n | React.Dispatch<React.SetStateAction<number>>\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\ntype SheetContextValue = Required<\n Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>\n> & {\n hidden: boolean\n setPosition: React.Dispatch<React.SetStateAction<number>>\n setOpen: React.Dispatch<React.SetStateAction<boolean>>\n allowPinchZoom: RemoveScrollProps['allowPinchZoom']\n contentRef: React.RefObject<TamaguiElement>\n}\n\nconst [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)\nconst [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(\n SHEET_NAME,\n {} as any\n)\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n position: 'absolute',\n pointerEvents: 'auto',\n zIndex: 10,\n y: -18,\n top: 0,\n left: '35%',\n right: '35%',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n})\n\ntype SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n\n if (context.open === false) {\n return null\n }\n\n return (\n <SheetHandleFrame\n onPress={() => {\n const nextPos = (context.position + 1) % context.snapPoints.length\n context.setPosition(nextPos)\n }}\n {...props}\n />\n )\n }\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 <RemoveScroll\n enabled={context.open}\n as={Slot}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n >\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 </RemoveScroll>\n )\n }\n)\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nconst SHEET_FRAME_NAME = 'SheetFrame'\n\nexport const SheetFrameFrame = styled(YStack, {\n name: SHEET_FRAME_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_FRAME_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>((props, ref) => {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80, 10],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n disableDrag: disableDragProp,\n modal,\n allowPinchZoom,\n } = props\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\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: controller ? 'most-recent-wins' : 'prop-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\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 })\n const position = open === false ? -1 : position_\n\n const positionValue = useRef<Animated.Value>()\n if (!positionValue.current) {\n positionValue.current = new Animated.Value(HIDDEN_SIZE)\n }\n\n const [isResizing, setIsResizing] = useState(true)\n useLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n const spring = useRef<Animated.CompositeAnimation | null>(null)\n function stopSpring() {\n spring.current?.stop()\n spring.current = null\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 pos = positionValue.current\n if (isHidden && open) return\n if (!pos) 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 (pos['_value'] === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n Animated.timing(pos, {\n useNativeDriver: !isWeb,\n toValue,\n duration: 0,\n }).start()\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = pos['_value'] === HIDDEN_SIZE\n spring.current = Animated.spring(pos, {\n useNativeDriver: !isWeb,\n toValue,\n overshootClamping,\n ...animationConfig,\n })\n spring.current.start(({ finished }) => finished && stopSpring())\n })\n\n useLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(() => {\n if (disableDrag) return\n if (!frameSize) return\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const pos = positionValue.current!\n const minY = positions[0]\n let startY = pos['_value']\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 finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {\n makeUnselectable(false)\n const at = dy + 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.33\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 return PanResponder.create({\n onMoveShouldSetPanResponder: (_e, { dy }) => {\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 6\n },\n onPanResponderGrant: () => {\n makeUnselectable(true)\n stopSpring()\n startY = pos['_value']\n },\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n pos.setValue(resisted(to, minY))\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n }, [disableDrag, animateTo, frameSize, positions, setPosition])\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 'SheetFrame':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n if (preventShown) {\n return null\n }\n\n const contents = (\n <SheetProvider\n contentRef={contentRef}\n dismissOnOverlayPress={dismissOnOverlayPress}\n allowPinchZoom={allowPinchZoom}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n >\n {isResizing ? null : overlayComponent}\n {/* no fancy hidden animation etc for handle for now */}\n {isHidden ? null : handleComponent}\n <Animated.View\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 position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],\n }}\n >\n {isResizing ? null : frameComponent}\n </Animated.View>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal visible={open}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n }),\n {\n componentName: 'Sheet',\n }\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n }\n)\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = 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\nexport { createSheetScope }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Sheet.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
1
2
|
import {
|
|
3
|
+
Slot,
|
|
2
4
|
Theme,
|
|
3
5
|
isClient,
|
|
4
6
|
isWeb,
|
|
@@ -11,6 +13,7 @@ import {
|
|
|
11
13
|
} from "@tamagui/core";
|
|
12
14
|
import { createContextScope } from "@tamagui/create-context";
|
|
13
15
|
import { Portal } from "@tamagui/portal";
|
|
16
|
+
import { RemoveScroll } from "@tamagui/remove-scroll";
|
|
14
17
|
import { XStack, YStack } from "@tamagui/stacks";
|
|
15
18
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
16
19
|
import React, {
|
|
@@ -59,8 +62,9 @@ const SheetHandle = SheetHandleFrame.extractable(({ __scopeSheet, ...props }) =>
|
|
|
59
62
|
context.setPosition(nextPos);
|
|
60
63
|
}} {...props} />;
|
|
61
64
|
});
|
|
65
|
+
const SHEET_OVERLAY_NAME = "SheetOverlay";
|
|
62
66
|
const SheetOverlayFrame = styled(YStack, {
|
|
63
|
-
name:
|
|
67
|
+
name: SHEET_OVERLAY_NAME,
|
|
64
68
|
backgroundColor: "$color",
|
|
65
69
|
fullscreen: true,
|
|
66
70
|
opacity: 0.2,
|
|
@@ -78,25 +82,32 @@ const SheetOverlayFrame = styled(YStack, {
|
|
|
78
82
|
}
|
|
79
83
|
});
|
|
80
84
|
const SheetOverlay = SheetOverlayFrame.extractable(({ __scopeSheet, ...props }) => {
|
|
81
|
-
const context = useSheetContext(
|
|
82
|
-
return <SheetOverlayFrame closed={!context.open || context.hidden} {...props} onPress={mergeEvent(props.onPress, context.dismissOnOverlayPress ? () => {
|
|
85
|
+
const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet);
|
|
86
|
+
return <RemoveScroll enabled={context.open} as={Slot} allowPinchZoom={context.allowPinchZoom} shards={[context.contentRef]}><SheetOverlayFrame closed={!context.open || context.hidden} {...props} onPress={mergeEvent(props.onPress, context.dismissOnOverlayPress ? () => {
|
|
83
87
|
context.setOpen(false);
|
|
84
|
-
} : void 0)}
|
|
88
|
+
} : void 0)} /></RemoveScroll>;
|
|
85
89
|
});
|
|
86
90
|
const selectionStyleSheet = isClient ? document.createElement("style") : null;
|
|
87
91
|
if (selectionStyleSheet) {
|
|
88
92
|
document.head.appendChild(selectionStyleSheet);
|
|
89
93
|
}
|
|
90
|
-
const
|
|
91
|
-
|
|
94
|
+
const SHEET_FRAME_NAME = "SheetFrame";
|
|
95
|
+
const SheetFrameFrame = styled(YStack, {
|
|
96
|
+
name: SHEET_FRAME_NAME,
|
|
92
97
|
flex: 1,
|
|
93
98
|
backgroundColor: "$background",
|
|
94
99
|
borderTopLeftRadius: "$4",
|
|
95
100
|
borderTopRightRadius: "$4",
|
|
96
|
-
padding: "$4",
|
|
97
101
|
width: "100%",
|
|
102
|
+
maxHeight: "100%",
|
|
103
|
+
overflow: "hidden",
|
|
98
104
|
pointerEvents: "auto"
|
|
99
105
|
});
|
|
106
|
+
const SheetFrame = SheetFrameFrame.extractable(forwardRef(({ __scopeSheet, ...props }, forwardedRef) => {
|
|
107
|
+
const context = useSheetContext(SHEET_FRAME_NAME, __scopeSheet);
|
|
108
|
+
const composedContentRef = useComposedRefs(forwardedRef, context.contentRef);
|
|
109
|
+
return <SheetFrameFrame ref={composedContentRef} {...props} />;
|
|
110
|
+
}));
|
|
100
111
|
const HIDDEN_SIZE = 1e4;
|
|
101
112
|
const Sheet = withStaticProperties(themeable(forwardRef((props, ref) => {
|
|
102
113
|
var _a;
|
|
@@ -113,12 +124,14 @@ const Sheet = withStaticProperties(themeable(forwardRef((props, ref) => {
|
|
|
113
124
|
dismissOnOverlayPress = true,
|
|
114
125
|
animationConfig,
|
|
115
126
|
disableDrag: disableDragProp,
|
|
116
|
-
modal
|
|
127
|
+
modal,
|
|
128
|
+
allowPinchZoom
|
|
117
129
|
} = props;
|
|
118
130
|
const controller = useContext(SheetControllerContext);
|
|
119
131
|
const isHidden = (controller == null ? void 0 : controller.hidden) || false;
|
|
120
132
|
const disableDrag = disableDragProp != null ? disableDragProp : controller == null ? void 0 : controller.disableDrag;
|
|
121
133
|
const themeName = useThemeName();
|
|
134
|
+
const contentRef = React.useRef(null);
|
|
122
135
|
const onChangeOpenInternal = (val) => {
|
|
123
136
|
var _a2;
|
|
124
137
|
(_a2 = controller == null ? void 0 : controller.onChangeOpen) == null ? void 0 : _a2.call(controller, val);
|
|
@@ -275,7 +288,7 @@ const Sheet = withStaticProperties(themeable(forwardRef((props, ref) => {
|
|
|
275
288
|
if (preventShown) {
|
|
276
289
|
return null;
|
|
277
290
|
}
|
|
278
|
-
const contents = <SheetProvider dismissOnOverlayPress={dismissOnOverlayPress} open={open} hidden={isHidden} scope={__scopeSheet} position={position} snapPoints={snapPoints} setPosition={setPosition} setOpen={setOpen}>
|
|
291
|
+
const contents = <SheetProvider contentRef={contentRef} dismissOnOverlayPress={dismissOnOverlayPress} allowPinchZoom={allowPinchZoom} open={open} hidden={isHidden} scope={__scopeSheet} position={position} snapPoints={snapPoints} setPosition={setPosition} setOpen={setOpen}>
|
|
279
292
|
{isResizing ? null : overlayComponent}
|
|
280
293
|
{isHidden ? null : handleComponent}
|
|
281
294
|
<Animated.View ref={ref} {...panResponder == null ? void 0 : panResponder.panHandlers} onLayout={(e) => {
|
|
@@ -344,6 +357,7 @@ export {
|
|
|
344
357
|
Sheet,
|
|
345
358
|
SheetController,
|
|
346
359
|
SheetFrame,
|
|
360
|
+
SheetFrameFrame,
|
|
347
361
|
SheetHandle,
|
|
348
362
|
SheetHandleFrame,
|
|
349
363
|
SheetOverlay,
|
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 {\n GetProps,\n Theme,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useEvent,\n useIsomorphicLayoutEffect,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { Portal } from '@tamagui/portal'\nimport { XStack, XStackProps, YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n ReactNode,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Animated,\n GestureResponderEvent,\n PanResponder,\n PanResponderGestureState,\n View,\n} from 'react-native'\n\nconst SHEET_NAME = 'Sheet'\nconst SHEET_HANDLE_NAME = 'SheetHandle'\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n animationConfig?: Animated.SpringAnimationConfig\n disableDrag?: boolean\n modal?: boolean\n },\n 'Sheet'\n>\n\ntype PositionChangeHandler =\n | ((position: number) => void)\n | React.Dispatch<React.SetStateAction<number>>\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\ntype SheetContextValue = Required<\n Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>\n> & {\n hidden: boolean\n setPosition: React.Dispatch<React.SetStateAction<number>>\n setOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)\nconst [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(\n SHEET_NAME,\n {} as any\n)\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n position: 'absolute',\n pointerEvents: 'auto',\n zIndex: 10,\n y: -18,\n top: 0,\n left: '35%',\n right: '35%',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n})\n\ntype SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n\n if (context.open === false) {\n return null\n }\n\n return (\n <SheetHandleFrame\n onPress={() => {\n const nextPos = (context.position + 1) % context.snapPoints.length\n context.setPosition(nextPos)\n }}\n {...props}\n />\n )\n }\n)\n\nexport const SheetOverlayFrame = styled(YStack, {\n name: 'SheetOverlay',\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_HANDLE_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\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nexport const SheetFrame = styled(YStack, {\n name: 'SheetFrame',\n flex: 1,\n backgroundColor: '$background',\n borderTopLeftRadius: '$4',\n borderTopRightRadius: '$4',\n padding: '$4',\n width: '100%',\n pointerEvents: 'auto',\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>((props, ref) => {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80, 10],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n disableDrag: disableDragProp,\n modal,\n } = props\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\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: controller ? 'most-recent-wins' : 'prop-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\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 })\n const position = open === false ? -1 : position_\n\n const positionValue = useRef<Animated.Value>()\n if (!positionValue.current) {\n positionValue.current = new Animated.Value(HIDDEN_SIZE)\n }\n\n const [isResizing, setIsResizing] = useState(true)\n useLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n const spring = useRef<Animated.CompositeAnimation | null>(null)\n function stopSpring() {\n spring.current?.stop()\n spring.current = null\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 pos = positionValue.current\n if (isHidden && open) return\n if (!pos) 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 (pos['_value'] === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n Animated.timing(pos, {\n useNativeDriver: !isWeb,\n toValue,\n duration: 0,\n }).start()\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = pos['_value'] === HIDDEN_SIZE\n spring.current = Animated.spring(pos, {\n useNativeDriver: !isWeb,\n toValue,\n overshootClamping,\n ...animationConfig,\n })\n spring.current.start(({ finished }) => finished && stopSpring())\n })\n\n useLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(() => {\n if (disableDrag) return\n if (!frameSize) return\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const pos = positionValue.current!\n const minY = positions[0]\n let startY = pos['_value']\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 finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {\n makeUnselectable(false)\n const at = dy + 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.33\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 return PanResponder.create({\n onMoveShouldSetPanResponder: (_e, { dy }) => {\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 6\n },\n onPanResponderGrant: () => {\n makeUnselectable(true)\n stopSpring()\n startY = pos['_value']\n },\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n pos.setValue(resisted(to, minY))\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n }, [disableDrag, animateTo, frameSize, positions, setPosition])\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 'SheetFrame':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n if (preventShown) {\n return null\n }\n\n const contents = (\n <SheetProvider\n dismissOnOverlayPress={dismissOnOverlayPress}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n >\n {isResizing ? null : overlayComponent}\n {/* no fancy hidden animation etc for handle for now */}\n {isHidden ? null : handleComponent}\n <Animated.View\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 position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],\n }}\n >\n {isResizing ? null : frameComponent}\n </Animated.View>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal visible={open}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n }),\n {\n componentName: 'Sheet',\n }\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n }\n)\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = 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\nexport { createSheetScope }\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n Slot,\n TamaguiElement,\n Theme,\n isClient,\n isWeb,\n mergeEvent,\n styled,\n themeable,\n useEvent,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\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 ReactNode,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport {\n Animated,\n GestureResponderEvent,\n PanResponder,\n PanResponderGestureState,\n View,\n} from 'react-native'\n\nconst SHEET_NAME = 'Sheet'\nconst SHEET_HANDLE_NAME = 'SheetHandle'\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\nexport type SheetProps = ScopedProps<\n {\n open?: boolean\n defaultOpen?: boolean\n onChangeOpen?: OpenChangeHandler\n position?: number\n defaultPosition?: number\n snapPoints?: number[]\n onChangePosition?: PositionChangeHandler\n children?: ReactNode\n dismissOnOverlayPress?: boolean\n animationConfig?: Animated.SpringAnimationConfig\n disableDrag?: boolean\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n },\n 'Sheet'\n>\n\ntype PositionChangeHandler =\n | ((position: number) => void)\n | React.Dispatch<React.SetStateAction<number>>\n\ntype OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>\n\ntype SheetContextValue = Required<\n Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>\n> & {\n hidden: boolean\n setPosition: React.Dispatch<React.SetStateAction<number>>\n setOpen: React.Dispatch<React.SetStateAction<boolean>>\n allowPinchZoom: RemoveScrollProps['allowPinchZoom']\n contentRef: React.RefObject<TamaguiElement>\n}\n\nconst [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)\nconst [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(\n SHEET_NAME,\n {} as any\n)\n\nexport const SheetHandleFrame = styled(XStack, {\n name: SHEET_HANDLE_NAME,\n height: 10,\n borderRadius: 100,\n backgroundColor: '$background',\n position: 'absolute',\n pointerEvents: 'auto',\n zIndex: 10,\n y: -18,\n top: 0,\n left: '35%',\n right: '35%',\n opacity: 0.5,\n\n hoverStyle: {\n opacity: 0.7,\n },\n})\n\ntype SheetScopedProps<A> = ScopedProps<A, 'Sheet'>\n\nexport const SheetHandle = SheetHandleFrame.extractable(\n ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {\n const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)\n\n if (context.open === false) {\n return null\n }\n\n return (\n <SheetHandleFrame\n onPress={() => {\n const nextPos = (context.position + 1) % context.snapPoints.length\n context.setPosition(nextPos)\n }}\n {...props}\n />\n )\n }\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 <RemoveScroll\n enabled={context.open}\n as={Slot}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n >\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 </RemoveScroll>\n )\n }\n)\n\nconst selectionStyleSheet = isClient ? document.createElement('style') : null\nif (selectionStyleSheet) {\n document.head.appendChild(selectionStyleSheet)\n}\n\nconst SHEET_FRAME_NAME = 'SheetFrame'\n\nexport const SheetFrameFrame = styled(YStack, {\n name: SHEET_FRAME_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_FRAME_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>((props, ref) => {\n const {\n __scopeSheet,\n snapPoints: snapPointsProp = [80, 10],\n open: openProp,\n defaultOpen,\n children: childrenProp,\n position: positionProp,\n onChangePosition,\n onChangeOpen,\n defaultPosition,\n dismissOnOverlayPress = true,\n animationConfig,\n disableDrag: disableDragProp,\n modal,\n allowPinchZoom,\n } = props\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\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: controller ? 'most-recent-wins' : 'prop-wins',\n })\n\n const [frameSize, setFrameSize] = useState<number>(0)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\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 })\n const position = open === false ? -1 : position_\n\n const positionValue = useRef<Animated.Value>()\n if (!positionValue.current) {\n positionValue.current = new Animated.Value(HIDDEN_SIZE)\n }\n\n const [isResizing, setIsResizing] = useState(true)\n useLayoutEffect(() => {\n if (!isResizing) {\n setIsResizing(true)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modal])\n\n const spring = useRef<Animated.CompositeAnimation | null>(null)\n function stopSpring() {\n spring.current?.stop()\n spring.current = null\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 pos = positionValue.current\n if (isHidden && open) return\n if (!pos) 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 (pos['_value'] === toValue) return\n stopSpring()\n if (isHidden || isResizing) {\n if (isResizing) {\n setIsResizing(false)\n }\n Animated.timing(pos, {\n useNativeDriver: !isWeb,\n toValue,\n duration: 0,\n }).start()\n return\n }\n // dont bounce on initial measure to bottom\n const overshootClamping = pos['_value'] === HIDDEN_SIZE\n spring.current = Animated.spring(pos, {\n useNativeDriver: !isWeb,\n toValue,\n overshootClamping,\n ...animationConfig,\n })\n spring.current.start(({ finished }) => finished && stopSpring())\n })\n\n useLayoutEffect(() => {\n animateTo(position)\n }, [isHidden, frameSize, position, animateTo])\n\n const panResponder = useMemo(() => {\n if (disableDrag) return\n if (!frameSize) return\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const pos = positionValue.current!\n const minY = positions[0]\n let startY = pos['_value']\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 finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {\n makeUnselectable(false)\n const at = dy + 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.33\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 return PanResponder.create({\n onMoveShouldSetPanResponder: (_e, { dy }) => {\n // we could do some detection of other touchables and cancel here..\n return Math.abs(dy) > 6\n },\n onPanResponderGrant: () => {\n makeUnselectable(true)\n stopSpring()\n startY = pos['_value']\n },\n onPanResponderMove: (_e, { dy }) => {\n const to = dy + startY\n pos.setValue(resisted(to, minY))\n },\n onPanResponderEnd: finish,\n onPanResponderTerminate: finish,\n onPanResponderRelease: finish,\n })\n }, [disableDrag, animateTo, frameSize, positions, setPosition])\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 'SheetFrame':\n frameComponent = child\n break\n case 'SheetOverlay':\n overlayComponent = child\n break\n default:\n console.warn('Warning: passed invalid child to Sheet', child)\n }\n }\n })\n\n const preventShown = controller?.hidden && controller?.open\n\n if (preventShown) {\n return null\n }\n\n const contents = (\n <SheetProvider\n contentRef={contentRef}\n dismissOnOverlayPress={dismissOnOverlayPress}\n allowPinchZoom={allowPinchZoom}\n open={open}\n hidden={isHidden}\n scope={__scopeSheet}\n position={position}\n snapPoints={snapPoints}\n setPosition={setPosition}\n setOpen={setOpen}\n >\n {isResizing ? null : overlayComponent}\n {/* no fancy hidden animation etc for handle for now */}\n {isHidden ? null : handleComponent}\n <Animated.View\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 position: 'absolute',\n zIndex: 10,\n width: '100%',\n height: '100%',\n transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],\n }}\n >\n {isResizing ? null : frameComponent}\n </Animated.View>\n </SheetProvider>\n )\n\n if (modal) {\n return (\n <Portal visible={open}>\n <Theme name={themeName}>{contents}</Theme>\n </Portal>\n )\n }\n\n return contents\n }),\n {\n componentName: 'Sheet',\n }\n ),\n {\n Handle: SheetHandle,\n Frame: SheetFrame,\n Overlay: SheetOverlay,\n }\n)\n\nfunction getPercentSize(point?: number, frameSize?: number) {\n if (!frameSize) return 0\n if (point === undefined) {\n console.warn(`No snapPoint`)\n return 0\n }\n const pct = point / 100\n const next = 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\nexport { createSheetScope }\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAQA,MAAM,aAAa;AACnB,MAAM,oBAAoB;AA2C1B,MAAM,CAAC,oBAAoB,oBAAoB,mBAAmB,UAAU;AAC5E,MAAM,CAAC,eAAe,mBAAmB,mBACvC,YACA,CAAC,CACH;AAEO,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EAET,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AACF,CAAC;AAIM,MAAM,cAAc,iBAAiB,YAC1C,CAAC,EAAE,iBAAiB,YAA2C;AAC7D,QAAM,UAAU,gBAAgB,mBAAmB,YAAY;AAE/D,MAAI,QAAQ,SAAS,OAAO;AAC1B,WAAO;AAAA,EACT;AAEA,SACE,CAAC,iBACC,SAAS,MAAM;AACb,UAAM,UAAW,SAAQ,WAAW,KAAK,QAAQ,WAAW;AAC5D,YAAQ,YAAY,OAAO;AAAA,EAC7B,OACI,OACN;AAEJ,CACF;AAEA,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,IAEF;AAAA,EACF;AACF,CAAC;AAIM,MAAM,eAAe,kBAAkB,YAC5C,CAAC,EAAE,iBAAiB,YAAiD;AACnE,QAAM,UAAU,gBAAgB,oBAAoB,YAAY;AAChE,SACE,CAAC,aACC,SAAS,QAAQ,MACjB,IAAI,MACJ,gBAAgB,QAAQ,gBACxB,QAAQ,CAAC,QAAQ,UAAU,GAE3B,CAAC,kBACC,QAAQ,CAAC,QAAQ,QAAQ,QAAQ,YAC7B,OACJ,SAAS,WACP,MAAM,SACN,QAAQ,wBACJ,MAAM;AACJ,YAAQ,QAAQ,KAAK;AAAA,EACvB,IACA,MACN,GACF,EACF,EAlBC;AAoBL,CACF;AAEA,MAAM,sBAAsB,WAAW,SAAS,cAAc,OAAO,IAAI;AACzE,IAAI,qBAAqB;AACvB,WAAS,KAAK,YAAY,mBAAmB;AAC/C;AAEA,MAAM,mBAAmB;AAElB,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV,eAAe;AACjB,CAAC;AAEM,MAAM,aAAa,gBAAgB,YACxC,WAAW,CAAC,EAAE,iBAAiB,SAAwC,iBAAiB;AACtF,QAAM,UAAU,gBAAgB,kBAAkB,YAAY;AAC9D,QAAM,qBAAqB,gBAAgB,cAAc,QAAQ,UAAU;AAC3E,SAAO,CAAC,gBAAgB,KAAK,wBAAwB,OAAO;AAC9D,CAAC,CACH;AAGA,MAAM,cAAc;AAEb,MAAM,QAAQ,qBACnB,UACE,WAA6B,CAAC,OAAO,QAAQ;AAxNjD;AAyNM,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,iBAAiB,CAAC,IAAI,EAAE;AAAA,IACpC,MAAM;AAAA,IACN;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAGJ,QAAM,aAAa,WAAW,sBAAsB;AACpD,QAAM,WAAW,0CAAY,WAAU;AACvC,QAAM,cAAc,4CAAmB,yCAAY;AACnD,QAAM,YAAY,aAAa;AAC/B,QAAM,aAAa,MAAM,OAAuB,IAAI;AAEpD,QAAM,uBAAuB,CAAC,QAAiB;AAjPrD;AAkPQ,oDAAY,iBAAZ,qCAA2B;AAC3B,iDAAe;AAAA,EACjB;AAEA,QAAM,CAAC,MAAM,WAAW,qBAAqB;AAAA,IAC3C,MAAM,+CAAY,SAAZ,YAAoB;AAAA,IAC1B,aAAa,eAAe;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU,aAAa,qBAAqB;AAAA,EAC9C,CAAC;AAED,QAAM,CAAC,WAAW,gBAAgB,SAAiB,CAAC;AAEpD,QAAM,aAAa,QAAQ,MAAM,gBAAgB,CAAC,KAAK,UAAU,cAAc,CAAC,CAAC;AAGjF,QAAM,CAAC,WAAW,eAAe,qBAAqB;AAAA,IACpD,MAAM;AAAA,IACN,aAAa,mBAAoB,QAAO,IAAI;AAAA,IAC5C,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,WAAW,SAAS,QAAQ,KAAK;AAEvC,QAAM,gBAAgB,OAAuB;AAC7C,MAAI,CAAC,cAAc,SAAS;AAC1B,kBAAc,UAAU,IAAI,SAAS,MAAM,WAAW;AAAA,EACxD;AAEA,QAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;AACjD,kBAAgB,MAAM;AACpB,QAAI,CAAC,YAAY;AACf,oBAAc,IAAI;AAAA,IACpB;AAAA,EAEF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,SAAS,OAA2C,IAAI;AAC9D,wBAAsB;AAvR5B;AAwRQ,kBAAO,YAAP,oBAAgB;AAChB,WAAO,UAAU;AAAA,EACnB;AAGA,QAAM,wBAAwB,QAAQ,WAAW;AACjD,YAAU,MAAM;AACd,QAAI,uBAAuB;AACzB,kBAAY,CAAC;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,qBAAqB,CAAC;AAEvC,QAAM,YAAY,QAChB,MAAM,WAAW,IAAI,CAAC,UAAU,eAAe,OAAO,SAAS,CAAC,GAChE,CAAC,WAAW,UAAU,CACxB;AAEA,QAAM,YAAY,SAAS,CAAC,cAAqB;AAC/C,UAAM,MAAM,cAAc;AAC1B,QAAI,YAAY;AAAM;AACtB,QAAI,CAAC;AAAK;AACV,QAAI,cAAc;AAAG;AACrB,UAAM,cAAc,cAAc,IAAI,cAAc;AACpD,UAAM,UAAU,YAAY,cAAa,KAAK,cAAc,UAAU;AACtE,QAAI,IAAI,cAAc;AAAS;AAC/B,eAAW;AACX,QAAI,YAAY,YAAY;AAC1B,UAAI,YAAY;AACd,sBAAc,KAAK;AAAA,MACrB;AACA,eAAS,OAAO,KAAK;AAAA,QACnB,iBAAiB,CAAC;AAAA,QAClB;AAAA,QACA,UAAU;AAAA,MACZ,CAAC,EAAE,MAAM;AACT;AAAA,IACF;AAEA,UAAM,oBAAoB,IAAI,cAAc;AAC5C,WAAO,UAAU,SAAS,OAAO,KAAK;AAAA,MACpC,iBAAiB,CAAC;AAAA,MAClB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,WAAO,QAAQ,MAAM,CAAC,EAAE,eAAe,YAAY,WAAW,CAAC;AAAA,EACjE,CAAC;AAED,kBAAgB,MAAM;AACpB,cAAU,QAAQ;AAAA,EACpB,GAAG,CAAC,UAAU,WAAW,UAAU,SAAS,CAAC;AAE7C,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI;AAAa;AACjB,QAAI,CAAC;AAAW;AAGhB,UAAM,MAAM,cAAc;AAC1B,UAAM,OAAO,UAAU;AACvB,QAAI,SAAS,IAAI;AAEjB,8BAA0B,KAAc;AACtC,UAAI,CAAC;AAAqB;AAC1B,UAAI,CAAC,KAAK;AACR,4BAAoB,YAAY;AAAA,MAClC,OAAO;AACL,4BAAoB,YAAY;AAAA,MAClC;AAAA,IACF;AAEA,UAAM,SAAS,CAAC,IAA2B,EAAE,IAAI,SAAmC;AAClF,uBAAiB,KAAK;AACtB,YAAM,KAAK,KAAK;AAGhB,YAAM,MAAM,KAAK,YAAY,KAAK;AAClC,UAAI,eAAe;AACnB,UAAI,OAAO;AACX,eAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,cAAM,YAAW,UAAU;AAC3B,cAAM,UAAU,MAAM,YAAW,MAAM,YAAW,YAAW;AAC7D,YAAI,UAAU,MAAM;AAClB,iBAAO;AACP,yBAAe;AAAA,QACjB;AAAA,MACF;AAEA,kBAAY,YAAY;AACxB,gBAAU,YAAY;AAAA,IACxB;AAEA,WAAO,aAAa,OAAO;AAAA,MACzB,6BAA6B,CAAC,IAAI,EAAE,SAAS;AAE3C,eAAO,KAAK,IAAI,EAAE,IAAI;AAAA,MACxB;AAAA,MACA,qBAAqB,MAAM;AACzB,yBAAiB,IAAI;AACrB,mBAAW;AACX,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,oBAAoB,CAAC,IAAI,EAAE,SAAS;AAClC,cAAM,KAAK,KAAK;AAChB,YAAI,SAAS,SAAS,IAAI,IAAI,CAAC;AAAA,MACjC;AAAA,MACA,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,IACzB,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,WAAW,WAAW,WAAW,WAAW,CAAC;AAE9D,MAAI,kBAA6C;AACjD,MAAI,mBAA8C;AAClD,MAAI,iBAA4C;AAGhD,QAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AA5YtD;AA6YQ,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,OAAO,mBAAM,SAAN,oBAAa,oBAAb,mBAA8B;AAC3C,cAAQ;AAAA,aACD;AACH,4BAAkB;AAClB;AAAA,aACG;AACH,2BAAiB;AACjB;AAAA,aACG;AACH,6BAAmB;AACnB;AAAA;AAEA,kBAAQ,KAAK,0CAA0C,KAAK;AAAA;AAAA,IAElE;AAAA,EACF,CAAC;AAED,QAAM,eAAe,0CAAY,WAAU,0CAAY;AAEvD,MAAI,cAAc;AAChB,WAAO;AAAA,EACT;AAEA,QAAM,WACJ,CAAC,cACC,YAAY,YACZ,uBAAuB,uBACvB,gBAAgB,gBAChB,MAAM,MACN,QAAQ,UACR,OAAO,cACP,UAAU,UACV,YAAY,YACZ,aAAa,aACb,SAAS;AAAA,KAER,aAAa,OAAO;AAAA,KAEpB,WAAW,OAAO;AAAA,IACnB,CAAC,SAAS,KACR,KAAK,SACD,6CAAc,aAClB,UAAU,CAAC,MAAM;AACf,YAAM,OAAO,EAAE,YAAY,OAAO;AAClC,mBAAa,CAAC,SAAS;AACrB,cAAM,cAAc,KAAK,IAAI,OAAO,IAAI,IAAI;AAC5C,sBAAc,WAAW;AACzB,eAAO;AAAA,MACT,CAAC;AAAA,IACH,GACA,eAAe,OAAO,SAAS,QAC/B,OAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,YAAY,cAAc,IAAI,cAAc,cAAc,QAAQ,CAAC;AAAA,IACnF,IAEC,aAAa,OAAO,eACvB,EArBC,SAAS;AAAA,EAsBZ,EArCC;AAwCH,MAAI,OAAO;AACT,WACE,CAAC,OAAO,SAAS,MACf,CAAC,MAAM,MAAM,YAAY,SAAS,EAAjC,MACH,EAFC;AAAA,EAIL;AAEA,SAAO;AACT,CAAC,GACD;AAAA,EACE,eAAe;AACjB,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX,CACF;AAEA,wBAAwB,OAAgB,WAAoB;AAC1D,MAAI,CAAC;AAAW,WAAO;AACvB,MAAI,UAAU,QAAW;AACvB,YAAQ,KAAK,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,MAAM,QAAQ;AACpB,QAAM,OAAO,YAAY,MAAM;AAC/B,SAAO;AACT;AAEA,kBAAkB,GAAW,MAAc,cAAc,IAAI;AAC3D,MAAI,IAAI,MAAM;AACZ,UAAM,OAAO,OAAO;AACpB,UAAM,UAAU,KAAK,IAAI,aAAa,IAAI,IAAI;AAC9C,UAAM,aAAa,MAAM,KAAK,IAAI,KAAK,OAAO;AAC9C,UAAM,QAAQ,CAAC,aAAa;AAC5B,WAAO,OAAO;AAAA,EAChB;AACA,SAAO;AACT;AAUA,MAAM,yBAAyB,cAAkD,IAAI;AAE9E,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,cAAc;AAAA,KACX;AAAA,MACwE;AAC3E,QAAM,eAAe,SAAS,gBAAgB;AAE9C,QAAM,YAAY,QAChB,MAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ,QAAQ,MAAM;AAAA,IACd,aAAa,MAAM;AAAA,IACnB;AAAA,EACF,IACA,CAAC,cAAc,MAAM,MAAM,MAAM,QAAQ,MAAM,WAAW,CAC5D;AAEA,SACE,CAAC,uBAAuB,SAAS,OAAO,YAAY,SAAS,EAA5D,uBAAuB;AAE5B;",
|
|
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.105",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -20,10 +20,12 @@
|
|
|
20
20
|
"watch": "tamagui-build --watch"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@tamagui/
|
|
24
|
-
"@tamagui/
|
|
25
|
-
"@tamagui/
|
|
26
|
-
"@tamagui/
|
|
23
|
+
"@tamagui/compose-refs": "^1.0.1-beta.105",
|
|
24
|
+
"@tamagui/core": "^1.0.1-beta.105",
|
|
25
|
+
"@tamagui/create-context": "^1.0.1-beta.105",
|
|
26
|
+
"@tamagui/remove-scroll": "^1.0.1-beta.105",
|
|
27
|
+
"@tamagui/stacks": "^1.0.1-beta.105",
|
|
28
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.105"
|
|
27
29
|
},
|
|
28
30
|
"peerDependencies": {
|
|
29
31
|
"react": "*",
|
|
@@ -31,7 +33,7 @@
|
|
|
31
33
|
"react-native": "*"
|
|
32
34
|
},
|
|
33
35
|
"devDependencies": {
|
|
34
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
36
|
+
"@tamagui/build": "^1.0.1-beta.105",
|
|
35
37
|
"react": "*",
|
|
36
38
|
"react-dom": "*",
|
|
37
39
|
"react-native": "*"
|
package/src/Sheet.tsx
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import { useComposedRefs } from '@tamagui/compose-refs'
|
|
1
2
|
import {
|
|
2
3
|
GetProps,
|
|
4
|
+
Slot,
|
|
5
|
+
TamaguiElement,
|
|
3
6
|
Theme,
|
|
4
7
|
isClient,
|
|
5
8
|
isWeb,
|
|
@@ -7,13 +10,13 @@ import {
|
|
|
7
10
|
styled,
|
|
8
11
|
themeable,
|
|
9
12
|
useEvent,
|
|
10
|
-
useIsomorphicLayoutEffect,
|
|
11
13
|
useThemeName,
|
|
12
14
|
withStaticProperties,
|
|
13
15
|
} from '@tamagui/core'
|
|
14
16
|
import { ScopedProps, createContextScope } from '@tamagui/create-context'
|
|
15
17
|
import { Portal } from '@tamagui/portal'
|
|
16
|
-
import {
|
|
18
|
+
import { RemoveScroll } from '@tamagui/remove-scroll'
|
|
19
|
+
import { XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'
|
|
17
20
|
import { useControllableState } from '@tamagui/use-controllable-state'
|
|
18
21
|
import React, {
|
|
19
22
|
ReactNode,
|
|
@@ -38,6 +41,8 @@ import {
|
|
|
38
41
|
const SHEET_NAME = 'Sheet'
|
|
39
42
|
const SHEET_HANDLE_NAME = 'SheetHandle'
|
|
40
43
|
|
|
44
|
+
type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>
|
|
45
|
+
|
|
41
46
|
export type SheetProps = ScopedProps<
|
|
42
47
|
{
|
|
43
48
|
open?: boolean
|
|
@@ -52,6 +57,11 @@ export type SheetProps = ScopedProps<
|
|
|
52
57
|
animationConfig?: Animated.SpringAnimationConfig
|
|
53
58
|
disableDrag?: boolean
|
|
54
59
|
modal?: boolean
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* @see https://github.com/theKashey/react-remove-scroll#usage
|
|
63
|
+
*/
|
|
64
|
+
allowPinchZoom?: RemoveScrollProps['allowPinchZoom']
|
|
55
65
|
},
|
|
56
66
|
'Sheet'
|
|
57
67
|
>
|
|
@@ -68,6 +78,8 @@ type SheetContextValue = Required<
|
|
|
68
78
|
hidden: boolean
|
|
69
79
|
setPosition: React.Dispatch<React.SetStateAction<number>>
|
|
70
80
|
setOpen: React.Dispatch<React.SetStateAction<boolean>>
|
|
81
|
+
allowPinchZoom: RemoveScrollProps['allowPinchZoom']
|
|
82
|
+
contentRef: React.RefObject<TamaguiElement>
|
|
71
83
|
}
|
|
72
84
|
|
|
73
85
|
const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
|
|
@@ -117,8 +129,10 @@ export const SheetHandle = SheetHandleFrame.extractable(
|
|
|
117
129
|
}
|
|
118
130
|
)
|
|
119
131
|
|
|
132
|
+
const SHEET_OVERLAY_NAME = 'SheetOverlay'
|
|
133
|
+
|
|
120
134
|
export const SheetOverlayFrame = styled(YStack, {
|
|
121
|
-
name:
|
|
135
|
+
name: SHEET_OVERLAY_NAME,
|
|
122
136
|
// TODO this should be $background without opacity and just customized by theme
|
|
123
137
|
backgroundColor: '$color',
|
|
124
138
|
fullscreen: true,
|
|
@@ -143,20 +157,27 @@ export type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>
|
|
|
143
157
|
|
|
144
158
|
export const SheetOverlay = SheetOverlayFrame.extractable(
|
|
145
159
|
({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {
|
|
146
|
-
const context = useSheetContext(
|
|
160
|
+
const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)
|
|
147
161
|
return (
|
|
148
|
-
<
|
|
149
|
-
|
|
150
|
-
{
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
162
|
+
<RemoveScroll
|
|
163
|
+
enabled={context.open}
|
|
164
|
+
as={Slot}
|
|
165
|
+
allowPinchZoom={context.allowPinchZoom}
|
|
166
|
+
shards={[context.contentRef]}
|
|
167
|
+
>
|
|
168
|
+
<SheetOverlayFrame
|
|
169
|
+
closed={!context.open || context.hidden}
|
|
170
|
+
{...props}
|
|
171
|
+
onPress={mergeEvent(
|
|
172
|
+
props.onPress,
|
|
173
|
+
context.dismissOnOverlayPress
|
|
174
|
+
? () => {
|
|
175
|
+
context.setOpen(false)
|
|
176
|
+
}
|
|
177
|
+
: undefined
|
|
178
|
+
)}
|
|
179
|
+
/>
|
|
180
|
+
</RemoveScroll>
|
|
160
181
|
)
|
|
161
182
|
}
|
|
162
183
|
)
|
|
@@ -166,17 +187,28 @@ if (selectionStyleSheet) {
|
|
|
166
187
|
document.head.appendChild(selectionStyleSheet)
|
|
167
188
|
}
|
|
168
189
|
|
|
169
|
-
|
|
170
|
-
|
|
190
|
+
const SHEET_FRAME_NAME = 'SheetFrame'
|
|
191
|
+
|
|
192
|
+
export const SheetFrameFrame = styled(YStack, {
|
|
193
|
+
name: SHEET_FRAME_NAME,
|
|
171
194
|
flex: 1,
|
|
172
195
|
backgroundColor: '$background',
|
|
173
196
|
borderTopLeftRadius: '$4',
|
|
174
197
|
borderTopRightRadius: '$4',
|
|
175
|
-
padding: '$4',
|
|
176
198
|
width: '100%',
|
|
199
|
+
maxHeight: '100%',
|
|
200
|
+
overflow: 'hidden',
|
|
177
201
|
pointerEvents: 'auto',
|
|
178
202
|
})
|
|
179
203
|
|
|
204
|
+
export const SheetFrame = SheetFrameFrame.extractable(
|
|
205
|
+
forwardRef(({ __scopeSheet, ...props }: SheetScopedProps<YStackProps>, forwardedRef) => {
|
|
206
|
+
const context = useSheetContext(SHEET_FRAME_NAME, __scopeSheet)
|
|
207
|
+
const composedContentRef = useComposedRefs(forwardedRef, context.contentRef)
|
|
208
|
+
return <SheetFrameFrame ref={composedContentRef} {...props} />
|
|
209
|
+
})
|
|
210
|
+
)
|
|
211
|
+
|
|
180
212
|
// set all the way off screen
|
|
181
213
|
const HIDDEN_SIZE = 10_000
|
|
182
214
|
|
|
@@ -197,6 +229,7 @@ export const Sheet = withStaticProperties(
|
|
|
197
229
|
animationConfig,
|
|
198
230
|
disableDrag: disableDragProp,
|
|
199
231
|
modal,
|
|
232
|
+
allowPinchZoom,
|
|
200
233
|
} = props
|
|
201
234
|
|
|
202
235
|
// allows for sheets to be controlled by other components
|
|
@@ -204,6 +237,7 @@ export const Sheet = withStaticProperties(
|
|
|
204
237
|
const isHidden = controller?.hidden || false
|
|
205
238
|
const disableDrag = disableDragProp ?? controller?.disableDrag
|
|
206
239
|
const themeName = useThemeName()
|
|
240
|
+
const contentRef = React.useRef<TamaguiElement>(null)
|
|
207
241
|
|
|
208
242
|
const onChangeOpenInternal = (val: boolean) => {
|
|
209
243
|
controller?.onChangeOpen?.(val)
|
|
@@ -387,7 +421,9 @@ export const Sheet = withStaticProperties(
|
|
|
387
421
|
|
|
388
422
|
const contents = (
|
|
389
423
|
<SheetProvider
|
|
424
|
+
contentRef={contentRef}
|
|
390
425
|
dismissOnOverlayPress={dismissOnOverlayPress}
|
|
426
|
+
allowPinchZoom={allowPinchZoom}
|
|
391
427
|
open={open}
|
|
392
428
|
hidden={isHidden}
|
|
393
429
|
scope={__scopeSheet}
|
package/types/Sheet.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { GetProps } from '@tamagui/core';
|
|
2
2
|
import { ScopedProps } from '@tamagui/create-context';
|
|
3
|
+
import { RemoveScroll } from '@tamagui/remove-scroll';
|
|
3
4
|
import { XStackProps } from '@tamagui/stacks';
|
|
4
5
|
import React, { ReactNode } from 'react';
|
|
5
6
|
import { Animated, View } from 'react-native';
|
|
7
|
+
declare type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>;
|
|
6
8
|
export declare type SheetProps = ScopedProps<{
|
|
7
9
|
open?: boolean;
|
|
8
10
|
defaultOpen?: boolean;
|
|
@@ -16,6 +18,7 @@ export declare type SheetProps = ScopedProps<{
|
|
|
16
18
|
animationConfig?: Animated.SpringAnimationConfig;
|
|
17
19
|
disableDrag?: boolean;
|
|
18
20
|
modal?: boolean;
|
|
21
|
+
allowPinchZoom?: RemoveScrollProps['allowPinchZoom'];
|
|
19
22
|
}, 'Sheet'>;
|
|
20
23
|
declare type PositionChangeHandler = ((position: number) => void) | React.Dispatch<React.SetStateAction<number>>;
|
|
21
24
|
declare type OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>;
|
|
@@ -75,7 +78,7 @@ export declare const SheetOverlayFrame: import("@tamagui/core").TamaguiComponent
|
|
|
75
78
|
}>;
|
|
76
79
|
export declare type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>;
|
|
77
80
|
export declare const SheetOverlay: ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => JSX.Element;
|
|
78
|
-
export declare const
|
|
81
|
+
export declare const SheetFrameFrame: import("@tamagui/core").TamaguiComponent<(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<{}, "elevation" | "fullscreen"> & {
|
|
79
82
|
readonly fullscreen?: boolean | undefined;
|
|
80
83
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
81
84
|
} & 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<{}, "elevation" | "fullscreen"> & {
|
|
@@ -105,6 +108,18 @@ export declare const SheetFrame: import("@tamagui/core").TamaguiComponent<(Omit<
|
|
|
105
108
|
} & ({} | {
|
|
106
109
|
[x: string]: undefined;
|
|
107
110
|
})>;
|
|
111
|
+
export declare const SheetFrame: React.ForwardRefExoticComponent<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<{}, "elevation" | "fullscreen"> & {
|
|
112
|
+
readonly fullscreen?: boolean | undefined;
|
|
113
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
114
|
+
} & 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<{}, "elevation" | "fullscreen"> & {
|
|
115
|
+
readonly fullscreen?: boolean | undefined;
|
|
116
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
117
|
+
}>> & 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<{}, "elevation" | "fullscreen"> & {
|
|
118
|
+
readonly fullscreen?: boolean | undefined;
|
|
119
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
120
|
+
}>> & {
|
|
121
|
+
__scopeSheet?: import("@tamagui/create-context").Scope<any>;
|
|
122
|
+
} & React.RefAttributes<unknown>>;
|
|
108
123
|
export declare const Sheet: ((props: Omit<{
|
|
109
124
|
open?: boolean | undefined;
|
|
110
125
|
defaultOpen?: boolean | undefined;
|
|
@@ -118,6 +133,7 @@ export declare const Sheet: ((props: Omit<{
|
|
|
118
133
|
animationConfig?: Animated.SpringAnimationConfig | undefined;
|
|
119
134
|
disableDrag?: boolean | undefined;
|
|
120
135
|
modal?: boolean | undefined;
|
|
136
|
+
allowPinchZoom?: RemoveScrollProps['allowPinchZoom'];
|
|
121
137
|
} & {
|
|
122
138
|
__scopeSheet?: import("@tamagui/create-context").Scope<any>;
|
|
123
139
|
} & React.RefAttributes<View>, "theme" | "themeInverse"> & {
|
|
@@ -125,7 +141,7 @@ export declare const Sheet: ((props: Omit<{
|
|
|
125
141
|
themeInverse?: boolean | undefined;
|
|
126
142
|
}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
|
|
127
143
|
Handle: ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => JSX.Element | null;
|
|
128
|
-
Frame:
|
|
144
|
+
Frame: React.ForwardRefExoticComponent<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<{}, "elevation" | "fullscreen"> & {
|
|
129
145
|
readonly fullscreen?: boolean | undefined;
|
|
130
146
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
131
147
|
} & 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<{}, "elevation" | "fullscreen"> & {
|
|
@@ -134,27 +150,9 @@ export declare const Sheet: ((props: Omit<{
|
|
|
134
150
|
}>> & 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<{}, "elevation" | "fullscreen"> & {
|
|
135
151
|
readonly fullscreen?: boolean | undefined;
|
|
136
152
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
137
|
-
}>>
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}, string | number> & {
|
|
141
|
-
[x: string]: undefined;
|
|
142
|
-
} & 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<{
|
|
143
|
-
readonly fullscreen?: boolean | undefined;
|
|
144
|
-
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
145
|
-
}, string | number> & {
|
|
146
|
-
[x: string]: undefined;
|
|
147
|
-
}>> & 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<{
|
|
148
|
-
readonly fullscreen?: boolean | undefined;
|
|
149
|
-
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
150
|
-
}, string | number> & {
|
|
151
|
-
[x: string]: undefined;
|
|
152
|
-
}>>), any, import("@tamagui/core").StackPropsBase, {
|
|
153
|
-
readonly fullscreen?: boolean | undefined;
|
|
154
|
-
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
155
|
-
} & ({} | {
|
|
156
|
-
[x: string]: undefined;
|
|
157
|
-
})>;
|
|
153
|
+
}>> & {
|
|
154
|
+
__scopeSheet?: import("@tamagui/create-context").Scope<any>;
|
|
155
|
+
} & React.RefAttributes<unknown>>;
|
|
158
156
|
Overlay: ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => JSX.Element;
|
|
159
157
|
};
|
|
160
158
|
declare type SheetControllerContextValue = {
|
package/types/Sheet.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../src/Sheet.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../src/Sheet.tsx"],"names":[],"mappings":"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"}
|