@tamagui/sheet 1.1.3 → 1.1.4
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/SheetScrollView.js +1 -0
- package/dist/cjs/SheetScrollView.js.map +2 -2
- package/dist/esm/SheetScrollView.js +1 -0
- package/dist/esm/SheetScrollView.js.map +2 -2
- package/dist/jsx/SheetScrollView.js +1 -1
- package/dist/jsx/SheetScrollView.js.map +2 -2
- package/package.json +11 -11
- package/src/SheetScrollView.tsx +1 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Stack, TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollView } from 'react-native'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// TODO ideally would replicate https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.tsx\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge, position, snapPoints, frameSize, open } = useSheetContext(\n SHEET_SCROLL_VIEW_NAME,\n __scopeSheet\n )\n // const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollView | null>(null)\n\n const percentOpened = snapPoints[position] ?? 0\n const [percentToPadBottom, setPercentToPadBottom] = useState(0)\n\n const next = 100 - percentOpened\n if (open && next !== percentToPadBottom) {\n setPercentToPadBottom(next)\n }\n\n // const setScrollEnabled = (next: boolean) => {\n // scrollRef.current?.setNativeProps?.({\n // scrollEnabled: next,\n // })\n // setScrollEnabled_(next)\n // }\n\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n isDragging: false,\n })\n\n const release = () => {\n if (!state.current.isDragging) {\n return\n }\n state.current.isDragging = false\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n // setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={composeRefs(scrollRef as any, ref)}\n flex={1}\n scrollEventThrottle={8}\n // scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n state.current.isDragging = true\n return true\n }}\n // setting to false while onResponderMove is disabled\n onMoveShouldSetResponder={() => false}\n // somehow disabling works better, regression, no more nice drag continue scroll\n // onResponderMove={(e) => {\n // const { pageY } = e.nativeEvent\n\n // if (state.current.isScrolling) {\n // return\n // }\n\n // if (scrollBridge.scrollStartY === -1) {\n // scrollBridge.scrollStartY = pageY\n // state.current.lastPageY = pageY\n // }\n\n // const dragAt = pageY - scrollBridge.scrollStartY\n // const dy = pageY - state.current.lastPageY\n // state.current.lastPageY = pageY // after dy\n // const isDraggingUp = dy < 0\n // const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n // if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n // state.current.isScrolling = true\n // setScrollEnabled(true)\n // return\n // }\n\n // setScrollEnabled(false)\n // scrollBridge.drag(dragAt)\n // state.current.dragAt = dragAt\n // state.current.dys.push(dy)\n // // only do every so often, cut down to 10 again\n // if (state.current.dys.length > 100) {\n // state.current.dys = state.current.dys.slice(-10)\n // }\n // }}\n onResponderRelease={release}\n {...props}\n >\n {useMemo(() => children, [children])}\n <Stack height={(percentToPadBottom / 100) * frameSize} width={0} />\n </ScrollView>\n )\n }\n)\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEM;AAvEN,kBAAmD;AACnD,yBAA4C;AAC5C,mBAAsD;AAGtD,0BAAgC;AAShC,MAAM,yBAAyB;AAExB,MAAM,sBAAkB;AAAA,EAC7B,CAAC,EAAE,cAAc,aAAa,MAAM,GAAsC,QAAQ;AAChF,UAAM,EAAE,cAAc,UAAU,YAAY,WAAW,KAAK,QAAI;AAAA,MAC9D;AAAA,MACA;AAAA,IACF;AAEA,UAAM,gBAAY,qBAA4B,IAAI;AAElD,UAAM,gBAAgB,WAAW,aAAa;AAC9C,UAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,CAAC;AAE9D,UAAM,OAAO,MAAM;AACnB,QAAI,QAAQ,SAAS,oBAAoB;AACvC,4BAAsB,IAAI;AAAA,IAC5B;AASA,UAAM,YAAQ,qBAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,MAAM,QAAQ,YAAY;AAC7B;AAAA,MACF;AACA,YAAM,QAAQ,aAAa;AAC3B,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAE5B,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,6CAAC;AAAA,MACC,SAAK,yBAAY,WAAkB,GAAG;AAAA,MACtC,MAAM;AAAA,MACN,qBAAqB;AAAA,MAErB,UAAU,CAAC,MAAM;AACf,cAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,qBAAa,IAAI;AACjB,YAAI,IAAI,GAAG;AACT,uBAAa,eAAe;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,2BAA2B,MAAM;AAC/B,qBAAa,eAAe;AAC5B,cAAM,QAAQ,aAAa;AAC3B,eAAO;AAAA,MACT;AAAA,MAEA,0BAA0B,MAAM;AAAA,MAmChC,oBAAoB;AAAA,
|
|
4
|
+
"sourcesContent": ["import { Stack, TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollView } from 'react-native'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// TODO ideally would replicate https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.tsx\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge, position, snapPoints, frameSize, open } = useSheetContext(\n SHEET_SCROLL_VIEW_NAME,\n __scopeSheet\n )\n // const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollView | null>(null)\n\n const percentOpened = snapPoints[position] ?? 0\n const [percentToPadBottom, setPercentToPadBottom] = useState(0)\n\n const next = 100 - percentOpened\n if (open && next !== percentToPadBottom) {\n setPercentToPadBottom(next)\n }\n\n // const setScrollEnabled = (next: boolean) => {\n // scrollRef.current?.setNativeProps?.({\n // scrollEnabled: next,\n // })\n // setScrollEnabled_(next)\n // }\n\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n isDragging: false,\n })\n\n const release = () => {\n if (!state.current.isDragging) {\n return\n }\n state.current.isDragging = false\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n // setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={composeRefs(scrollRef as any, ref)}\n flex={1}\n scrollEventThrottle={8}\n // scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n state.current.isDragging = true\n return true\n }}\n // setting to false while onResponderMove is disabled\n onMoveShouldSetResponder={() => false}\n // somehow disabling works better, regression, no more nice drag continue scroll\n // onResponderMove={(e) => {\n // const { pageY } = e.nativeEvent\n\n // if (state.current.isScrolling) {\n // return\n // }\n\n // if (scrollBridge.scrollStartY === -1) {\n // scrollBridge.scrollStartY = pageY\n // state.current.lastPageY = pageY\n // }\n\n // const dragAt = pageY - scrollBridge.scrollStartY\n // const dy = pageY - state.current.lastPageY\n // state.current.lastPageY = pageY // after dy\n // const isDraggingUp = dy < 0\n // const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n // if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n // state.current.isScrolling = true\n // setScrollEnabled(true)\n // return\n // }\n\n // setScrollEnabled(false)\n // scrollBridge.drag(dragAt)\n // state.current.dragAt = dragAt\n // state.current.dys.push(dy)\n // // only do every so often, cut down to 10 again\n // if (state.current.dys.length > 100) {\n // state.current.dys = state.current.dys.slice(-10)\n // }\n // }}\n onResponderRelease={release}\n className=\"_ovs-contain\"\n {...props}\n >\n {useMemo(() => children, [children])}\n <Stack height={(percentToPadBottom / 100) * frameSize} width={0} />\n </ScrollView>\n )\n }\n)\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEM;AAvEN,kBAAmD;AACnD,yBAA4C;AAC5C,mBAAsD;AAGtD,0BAAgC;AAShC,MAAM,yBAAyB;AAExB,MAAM,sBAAkB;AAAA,EAC7B,CAAC,EAAE,cAAc,aAAa,MAAM,GAAsC,QAAQ;AAChF,UAAM,EAAE,cAAc,UAAU,YAAY,WAAW,KAAK,QAAI;AAAA,MAC9D;AAAA,MACA;AAAA,IACF;AAEA,UAAM,gBAAY,qBAA4B,IAAI;AAElD,UAAM,gBAAgB,WAAW,aAAa;AAC9C,UAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,CAAC;AAE9D,UAAM,OAAO,MAAM;AACnB,QAAI,QAAQ,SAAS,oBAAoB;AACvC,4BAAsB,IAAI;AAAA,IAC5B;AASA,UAAM,YAAQ,qBAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,MAAM,QAAQ,YAAY;AAC7B;AAAA,MACF;AACA,YAAM,QAAQ,aAAa;AAC3B,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAE5B,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,6CAAC;AAAA,MACC,SAAK,yBAAY,WAAkB,GAAG;AAAA,MACtC,MAAM;AAAA,MACN,qBAAqB;AAAA,MAErB,UAAU,CAAC,MAAM;AACf,cAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,qBAAa,IAAI;AACjB,YAAI,IAAI,GAAG;AACT,uBAAa,eAAe;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,2BAA2B,MAAM;AAC/B,qBAAa,eAAe;AAC5B,cAAM,QAAQ,aAAa;AAC3B,eAAO;AAAA,MACT;AAAA,MAEA,0BAA0B,MAAM;AAAA,MAmChC,oBAAoB;AAAA,MACpB,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,kCAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAAA,QACnC,4CAAC;AAAA,UAAM,QAAS,qBAAqB,MAAO;AAAA,UAAW,OAAO;AAAA,SAAG;AAAA;AAAA,KACnE;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Stack, TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollView } from 'react-native'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// TODO ideally would replicate https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.tsx\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge, position, snapPoints, frameSize, open } = useSheetContext(\n SHEET_SCROLL_VIEW_NAME,\n __scopeSheet\n )\n // const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollView | null>(null)\n\n const percentOpened = snapPoints[position] ?? 0\n const [percentToPadBottom, setPercentToPadBottom] = useState(0)\n\n const next = 100 - percentOpened\n if (open && next !== percentToPadBottom) {\n setPercentToPadBottom(next)\n }\n\n // const setScrollEnabled = (next: boolean) => {\n // scrollRef.current?.setNativeProps?.({\n // scrollEnabled: next,\n // })\n // setScrollEnabled_(next)\n // }\n\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n isDragging: false,\n })\n\n const release = () => {\n if (!state.current.isDragging) {\n return\n }\n state.current.isDragging = false\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n // setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={composeRefs(scrollRef as any, ref)}\n flex={1}\n scrollEventThrottle={8}\n // scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n state.current.isDragging = true\n return true\n }}\n // setting to false while onResponderMove is disabled\n onMoveShouldSetResponder={() => false}\n // somehow disabling works better, regression, no more nice drag continue scroll\n // onResponderMove={(e) => {\n // const { pageY } = e.nativeEvent\n\n // if (state.current.isScrolling) {\n // return\n // }\n\n // if (scrollBridge.scrollStartY === -1) {\n // scrollBridge.scrollStartY = pageY\n // state.current.lastPageY = pageY\n // }\n\n // const dragAt = pageY - scrollBridge.scrollStartY\n // const dy = pageY - state.current.lastPageY\n // state.current.lastPageY = pageY // after dy\n // const isDraggingUp = dy < 0\n // const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n // if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n // state.current.isScrolling = true\n // setScrollEnabled(true)\n // return\n // }\n\n // setScrollEnabled(false)\n // scrollBridge.drag(dragAt)\n // state.current.dragAt = dragAt\n // state.current.dys.push(dy)\n // // only do every so often, cut down to 10 again\n // if (state.current.dys.length > 100) {\n // state.current.dys = state.current.dys.slice(-10)\n // }\n // }}\n onResponderRelease={release}\n {...props}\n >\n {useMemo(() => children, [children])}\n <Stack height={(percentToPadBottom / 100) * frameSize} width={0} />\n </ScrollView>\n )\n }\n)\n"],
|
|
5
|
-
"mappings": "AAuEM,
|
|
4
|
+
"sourcesContent": ["import { Stack, TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollView } from 'react-native'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// TODO ideally would replicate https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.tsx\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge, position, snapPoints, frameSize, open } = useSheetContext(\n SHEET_SCROLL_VIEW_NAME,\n __scopeSheet\n )\n // const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollView | null>(null)\n\n const percentOpened = snapPoints[position] ?? 0\n const [percentToPadBottom, setPercentToPadBottom] = useState(0)\n\n const next = 100 - percentOpened\n if (open && next !== percentToPadBottom) {\n setPercentToPadBottom(next)\n }\n\n // const setScrollEnabled = (next: boolean) => {\n // scrollRef.current?.setNativeProps?.({\n // scrollEnabled: next,\n // })\n // setScrollEnabled_(next)\n // }\n\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n isDragging: false,\n })\n\n const release = () => {\n if (!state.current.isDragging) {\n return\n }\n state.current.isDragging = false\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n // setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={composeRefs(scrollRef as any, ref)}\n flex={1}\n scrollEventThrottle={8}\n // scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n state.current.isDragging = true\n return true\n }}\n // setting to false while onResponderMove is disabled\n onMoveShouldSetResponder={() => false}\n // somehow disabling works better, regression, no more nice drag continue scroll\n // onResponderMove={(e) => {\n // const { pageY } = e.nativeEvent\n\n // if (state.current.isScrolling) {\n // return\n // }\n\n // if (scrollBridge.scrollStartY === -1) {\n // scrollBridge.scrollStartY = pageY\n // state.current.lastPageY = pageY\n // }\n\n // const dragAt = pageY - scrollBridge.scrollStartY\n // const dy = pageY - state.current.lastPageY\n // state.current.lastPageY = pageY // after dy\n // const isDraggingUp = dy < 0\n // const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n // if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n // state.current.isScrolling = true\n // setScrollEnabled(true)\n // return\n // }\n\n // setScrollEnabled(false)\n // scrollBridge.drag(dragAt)\n // state.current.dragAt = dragAt\n // state.current.dys.push(dy)\n // // only do every so often, cut down to 10 again\n // if (state.current.dys.length > 100) {\n // state.current.dys = state.current.dys.slice(-10)\n // }\n // }}\n onResponderRelease={release}\n className=\"_ovs-contain\"\n {...props}\n >\n {useMemo(() => children, [children])}\n <Stack height={(percentToPadBottom / 100) * frameSize} width={0} />\n </ScrollView>\n )\n }\n)\n"],
|
|
5
|
+
"mappings": "AAuEM,SA0DE,KA1DF;AAvEN,SAAS,OAAuB,mBAAmB;AACnD,SAAS,kBAAmC;AAC5C,SAAS,YAAY,SAAS,QAAQ,gBAAgB;AAGtD,SAAS,uBAAuB;AAShC,MAAM,yBAAyB;AAExB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,cAAc,aAAa,MAAM,GAAsC,QAAQ;AAChF,UAAM,EAAE,cAAc,UAAU,YAAY,WAAW,KAAK,IAAI;AAAA,MAC9D;AAAA,MACA;AAAA,IACF;AAEA,UAAM,YAAY,OAA4B,IAAI;AAElD,UAAM,gBAAgB,WAAW,aAAa;AAC9C,UAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,CAAC;AAE9D,UAAM,OAAO,MAAM;AACnB,QAAI,QAAQ,SAAS,oBAAoB;AACvC,4BAAsB,IAAI;AAAA,IAC5B;AASA,UAAM,QAAQ,OAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,MAAM,QAAQ,YAAY;AAC7B;AAAA,MACF;AACA,YAAM,QAAQ,aAAa;AAC3B,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAE5B,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,qBAAC;AAAA,MACC,KAAK,YAAY,WAAkB,GAAG;AAAA,MACtC,MAAM;AAAA,MACN,qBAAqB;AAAA,MAErB,UAAU,CAAC,MAAM;AACf,cAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,qBAAa,IAAI;AACjB,YAAI,IAAI,GAAG;AACT,uBAAa,eAAe;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,2BAA2B,MAAM;AAC/B,qBAAa,eAAe;AAC5B,cAAM,QAAQ,aAAa;AAC3B,eAAO;AAAA,MACT;AAAA,MAEA,0BAA0B,MAAM;AAAA,MAmChC,oBAAoB;AAAA,MACpB,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,gBAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAAA,QACnC,oBAAC;AAAA,UAAM,QAAS,qBAAqB,MAAO;AAAA,UAAW,OAAO;AAAA,SAAG;AAAA;AAAA,KACnE;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -53,7 +53,7 @@ const SheetScrollView = forwardRef(
|
|
|
53
53
|
scrollBridge.scrollStartY = -1;
|
|
54
54
|
state.current.isDragging = true;
|
|
55
55
|
return true;
|
|
56
|
-
}} onMoveShouldSetResponder={() => false} onResponderRelease={release} {...props}>
|
|
56
|
+
}} onMoveShouldSetResponder={() => false} onResponderRelease={release} className="_ovs-contain" {...props}>
|
|
57
57
|
{useMemo(() => children, [children])}
|
|
58
58
|
<Stack height={percentToPadBottom / 100 * frameSize} width={0} />
|
|
59
59
|
</ScrollView>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Stack, TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollView } from 'react-native'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// TODO ideally would replicate https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.tsx\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge, position, snapPoints, frameSize, open } = useSheetContext(\n SHEET_SCROLL_VIEW_NAME,\n __scopeSheet\n )\n // const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollView | null>(null)\n\n const percentOpened = snapPoints[position] ?? 0\n const [percentToPadBottom, setPercentToPadBottom] = useState(0)\n\n const next = 100 - percentOpened\n if (open && next !== percentToPadBottom) {\n setPercentToPadBottom(next)\n }\n\n // const setScrollEnabled = (next: boolean) => {\n // scrollRef.current?.setNativeProps?.({\n // scrollEnabled: next,\n // })\n // setScrollEnabled_(next)\n // }\n\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n isDragging: false,\n })\n\n const release = () => {\n if (!state.current.isDragging) {\n return\n }\n state.current.isDragging = false\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n // setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={composeRefs(scrollRef as any, ref)}\n flex={1}\n scrollEventThrottle={8}\n // scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n state.current.isDragging = true\n return true\n }}\n // setting to false while onResponderMove is disabled\n onMoveShouldSetResponder={() => false}\n // somehow disabling works better, regression, no more nice drag continue scroll\n // onResponderMove={(e) => {\n // const { pageY } = e.nativeEvent\n\n // if (state.current.isScrolling) {\n // return\n // }\n\n // if (scrollBridge.scrollStartY === -1) {\n // scrollBridge.scrollStartY = pageY\n // state.current.lastPageY = pageY\n // }\n\n // const dragAt = pageY - scrollBridge.scrollStartY\n // const dy = pageY - state.current.lastPageY\n // state.current.lastPageY = pageY // after dy\n // const isDraggingUp = dy < 0\n // const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n // if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n // state.current.isScrolling = true\n // setScrollEnabled(true)\n // return\n // }\n\n // setScrollEnabled(false)\n // scrollBridge.drag(dragAt)\n // state.current.dragAt = dragAt\n // state.current.dys.push(dy)\n // // only do every so often, cut down to 10 again\n // if (state.current.dys.length > 100) {\n // state.current.dys = state.current.dys.slice(-10)\n // }\n // }}\n onResponderRelease={release}\n {...props}\n >\n {useMemo(() => children, [children])}\n <Stack height={(percentToPadBottom / 100) * frameSize} width={0} />\n </ScrollView>\n )\n }\n)\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,OAAuB,mBAAmB;AACnD,SAAS,kBAAmC;AAC5C,SAAS,YAAY,SAAS,QAAQ,gBAAgB;AAGtD,SAAS,uBAAuB;AAShC,MAAM,yBAAyB;AAExB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,cAAc,aAAa,MAAM,GAAsC,QAAQ;AAChF,UAAM,EAAE,cAAc,UAAU,YAAY,WAAW,KAAK,IAAI;AAAA,MAC9D;AAAA,MACA;AAAA,IACF;AAEA,UAAM,YAAY,OAA4B,IAAI;AAElD,UAAM,gBAAgB,WAAW,aAAa;AAC9C,UAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,CAAC;AAE9D,UAAM,OAAO,MAAM;AACnB,QAAI,QAAQ,SAAS,oBAAoB;AACvC,4BAAsB,IAAI;AAAA,IAC5B;AASA,UAAM,QAAQ,OAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,MAAM,QAAQ,YAAY;AAC7B;AAAA,MACF;AACA,YAAM,QAAQ,aAAa;AAC3B,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAE5B,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,CAAC,WACC,KAAK,YAAY,WAAkB,GAAG,GACtC,MAAM,GACN,qBAAqB,GAErB,UAAU,CAAC,MAAM;AACf,YAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,mBAAa,IAAI;AACjB,UAAI,IAAI,GAAG;AACT,qBAAa,eAAe;AAAA,MAC9B;AAAA,IACF,GACA,2BAA2B,MAAM;AAC/B,mBAAa,eAAe;AAC5B,YAAM,QAAQ,aAAa;AAC3B,aAAO;AAAA,IACT,GAEA,0BAA0B,MAAM,OAmChC,oBAAoB,
|
|
4
|
+
"sourcesContent": ["import { Stack, TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollView } from 'react-native'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// TODO ideally would replicate https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.tsx\n\n/* -------------------------------------------------------------------------------------------------\n * SheetScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'\n\nexport const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(\n ({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge, position, snapPoints, frameSize, open } = useSheetContext(\n SHEET_SCROLL_VIEW_NAME,\n __scopeSheet\n )\n // const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollView | null>(null)\n\n const percentOpened = snapPoints[position] ?? 0\n const [percentToPadBottom, setPercentToPadBottom] = useState(0)\n\n const next = 100 - percentOpened\n if (open && next !== percentToPadBottom) {\n setPercentToPadBottom(next)\n }\n\n // const setScrollEnabled = (next: boolean) => {\n // scrollRef.current?.setNativeProps?.({\n // scrollEnabled: next,\n // })\n // setScrollEnabled_(next)\n // }\n\n const state = useRef({\n lastPageY: 0,\n dragAt: 0,\n dys: [] as number[], // store a few recent dys to get velocity on release\n isScrolling: false,\n isDragging: false,\n })\n\n const release = () => {\n if (!state.current.isDragging) {\n return\n }\n state.current.isDragging = false\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n // setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={composeRefs(scrollRef as any, ref)}\n flex={1}\n scrollEventThrottle={8}\n // scrollEnabled={scrollEnabled}\n onScroll={(e) => {\n const { y } = e.nativeEvent.contentOffset\n scrollBridge.y = y\n if (y > 0) {\n scrollBridge.scrollStartY = -1\n }\n }}\n onStartShouldSetResponder={() => {\n scrollBridge.scrollStartY = -1\n state.current.isDragging = true\n return true\n }}\n // setting to false while onResponderMove is disabled\n onMoveShouldSetResponder={() => false}\n // somehow disabling works better, regression, no more nice drag continue scroll\n // onResponderMove={(e) => {\n // const { pageY } = e.nativeEvent\n\n // if (state.current.isScrolling) {\n // return\n // }\n\n // if (scrollBridge.scrollStartY === -1) {\n // scrollBridge.scrollStartY = pageY\n // state.current.lastPageY = pageY\n // }\n\n // const dragAt = pageY - scrollBridge.scrollStartY\n // const dy = pageY - state.current.lastPageY\n // state.current.lastPageY = pageY // after dy\n // const isDraggingUp = dy < 0\n // const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY\n\n // if ((dy === 0 || isDraggingUp) && isPaneAtTop) {\n // state.current.isScrolling = true\n // setScrollEnabled(true)\n // return\n // }\n\n // setScrollEnabled(false)\n // scrollBridge.drag(dragAt)\n // state.current.dragAt = dragAt\n // state.current.dys.push(dy)\n // // only do every so often, cut down to 10 again\n // if (state.current.dys.length > 100) {\n // state.current.dys = state.current.dys.slice(-10)\n // }\n // }}\n onResponderRelease={release}\n className=\"_ovs-contain\"\n {...props}\n >\n {useMemo(() => children, [children])}\n <Stack height={(percentToPadBottom / 100) * frameSize} width={0} />\n </ScrollView>\n )\n }\n)\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,OAAuB,mBAAmB;AACnD,SAAS,kBAAmC;AAC5C,SAAS,YAAY,SAAS,QAAQ,gBAAgB;AAGtD,SAAS,uBAAuB;AAShC,MAAM,yBAAyB;AAExB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,cAAc,aAAa,MAAM,GAAsC,QAAQ;AAChF,UAAM,EAAE,cAAc,UAAU,YAAY,WAAW,KAAK,IAAI;AAAA,MAC9D;AAAA,MACA;AAAA,IACF;AAEA,UAAM,YAAY,OAA4B,IAAI;AAElD,UAAM,gBAAgB,WAAW,aAAa;AAC9C,UAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,CAAC;AAE9D,UAAM,OAAO,MAAM;AACnB,QAAI,QAAQ,SAAS,oBAAoB;AACvC,4BAAsB,IAAI;AAAA,IAC5B;AASA,UAAM,QAAQ,OAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,MAAM,QAAQ,YAAY;AAC7B;AAAA,MACF;AACA,YAAM,QAAQ,aAAa;AAC3B,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAE5B,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,CAAC,WACC,KAAK,YAAY,WAAkB,GAAG,GACtC,MAAM,GACN,qBAAqB,GAErB,UAAU,CAAC,MAAM;AACf,YAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,mBAAa,IAAI;AACjB,UAAI,IAAI,GAAG;AACT,qBAAa,eAAe;AAAA,MAC9B;AAAA,IACF,GACA,2BAA2B,MAAM;AAC/B,mBAAa,eAAe;AAC5B,YAAM,QAAQ,aAAa;AAC3B,aAAO;AAAA,IACT,GAEA,0BAA0B,MAAM,OAmChC,oBAAoB,SACpB,UAAU,mBACN;AAAA,OAEH,QAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAAA,MACnC,CAAC,MAAM,QAAS,qBAAqB,MAAO,WAAW,OAAO,GAAG;AAAA,IACnE,EA3DC;AAAA,EA6DL;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/sheet",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"lint:fix": "../../node_modules/.bin/rome check --apply-suggested src"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@tamagui/animations-react-native": "^1.1.
|
|
26
|
-
"@tamagui/compose-refs": "^1.1.
|
|
27
|
-
"@tamagui/core": "^1.1.
|
|
28
|
-
"@tamagui/create-context": "^1.1.
|
|
29
|
-
"@tamagui/remove-scroll": "^1.1.
|
|
30
|
-
"@tamagui/scroll-view": "^1.1.
|
|
31
|
-
"@tamagui/stacks": "^1.1.
|
|
32
|
-
"@tamagui/use-constant": "^1.1.
|
|
33
|
-
"@tamagui/use-controllable-state": "^1.1.
|
|
25
|
+
"@tamagui/animations-react-native": "^1.1.4",
|
|
26
|
+
"@tamagui/compose-refs": "^1.1.4",
|
|
27
|
+
"@tamagui/core": "^1.1.4",
|
|
28
|
+
"@tamagui/create-context": "^1.1.4",
|
|
29
|
+
"@tamagui/remove-scroll": "^1.1.4",
|
|
30
|
+
"@tamagui/scroll-view": "^1.1.4",
|
|
31
|
+
"@tamagui/stacks": "^1.1.4",
|
|
32
|
+
"@tamagui/use-constant": "^1.1.4",
|
|
33
|
+
"@tamagui/use-controllable-state": "^1.1.4"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "*",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"react-native": "*"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.1.
|
|
41
|
+
"@tamagui/build": "^1.1.4",
|
|
42
42
|
"react": "^18.2.0",
|
|
43
43
|
"react-dom": "^18.2.0",
|
|
44
44
|
"react-native": "*"
|
package/src/SheetScrollView.tsx
CHANGED