@tamagui/sheet 1.0.22 → 1.1.0
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 +0 -9
- package/dist/cjs/SheetScrollView.js.map +3 -3
- package/dist/esm/SheetScrollView.js +0 -9
- package/dist/esm/SheetScrollView.js.map +3 -3
- package/dist/jsx/SheetScrollView.js +1 -8
- package/dist/jsx/SheetScrollView.js.map +3 -3
- package/package.json +11 -11
- package/src/SheetScrollView.tsx +8 -8
|
@@ -33,7 +33,6 @@ const SheetScrollView = (0, import_react.forwardRef)(
|
|
|
33
33
|
SHEET_SCROLL_VIEW_NAME,
|
|
34
34
|
__scopeSheet
|
|
35
35
|
);
|
|
36
|
-
const [scrollEnabled, setScrollEnabled_] = (0, import_react.useState)(true);
|
|
37
36
|
const scrollRef = (0, import_react.useRef)(null);
|
|
38
37
|
const percentOpened = snapPoints[position] ?? 0;
|
|
39
38
|
const [percentToPadBottom, setPercentToPadBottom] = (0, import_react.useState)(0);
|
|
@@ -41,13 +40,6 @@ const SheetScrollView = (0, import_react.forwardRef)(
|
|
|
41
40
|
if (open && next !== percentToPadBottom) {
|
|
42
41
|
setPercentToPadBottom(next);
|
|
43
42
|
}
|
|
44
|
-
const setScrollEnabled = (next2) => {
|
|
45
|
-
var _a, _b;
|
|
46
|
-
(_b = (_a = scrollRef.current) == null ? void 0 : _a.setNativeProps) == null ? void 0 : _b.call(_a, {
|
|
47
|
-
scrollEnabled: next2
|
|
48
|
-
});
|
|
49
|
-
setScrollEnabled_(next2);
|
|
50
|
-
};
|
|
51
43
|
const state = (0, import_react.useRef)({
|
|
52
44
|
lastPageY: 0,
|
|
53
45
|
dragAt: 0,
|
|
@@ -79,7 +71,6 @@ const SheetScrollView = (0, import_react.forwardRef)(
|
|
|
79
71
|
ref: (0, import_core.composeRefs)(scrollRef, ref),
|
|
80
72
|
flex: 1,
|
|
81
73
|
scrollEventThrottle: 8,
|
|
82
|
-
scrollEnabled,
|
|
83
74
|
onScroll: (e) => {
|
|
84
75
|
const { y } = e.nativeEvent.contentOffset;
|
|
85
76
|
scrollBridge.y = y;
|
|
@@ -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
|
|
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;
|
|
6
|
-
"names": [
|
|
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,MACnB,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
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -10,7 +10,6 @@ const SheetScrollView = forwardRef(
|
|
|
10
10
|
SHEET_SCROLL_VIEW_NAME,
|
|
11
11
|
__scopeSheet
|
|
12
12
|
);
|
|
13
|
-
const [scrollEnabled, setScrollEnabled_] = useState(true);
|
|
14
13
|
const scrollRef = useRef(null);
|
|
15
14
|
const percentOpened = snapPoints[position] ?? 0;
|
|
16
15
|
const [percentToPadBottom, setPercentToPadBottom] = useState(0);
|
|
@@ -18,13 +17,6 @@ const SheetScrollView = forwardRef(
|
|
|
18
17
|
if (open && next !== percentToPadBottom) {
|
|
19
18
|
setPercentToPadBottom(next);
|
|
20
19
|
}
|
|
21
|
-
const setScrollEnabled = (next2) => {
|
|
22
|
-
var _a, _b;
|
|
23
|
-
(_b = (_a = scrollRef.current) == null ? void 0 : _a.setNativeProps) == null ? void 0 : _b.call(_a, {
|
|
24
|
-
scrollEnabled: next2
|
|
25
|
-
});
|
|
26
|
-
setScrollEnabled_(next2);
|
|
27
|
-
};
|
|
28
20
|
const state = useRef({
|
|
29
21
|
lastPageY: 0,
|
|
30
22
|
dragAt: 0,
|
|
@@ -56,7 +48,6 @@ const SheetScrollView = forwardRef(
|
|
|
56
48
|
ref: composeRefs(scrollRef, ref),
|
|
57
49
|
flex: 1,
|
|
58
50
|
scrollEventThrottle: 8,
|
|
59
|
-
scrollEnabled,
|
|
60
51
|
onScroll: (e) => {
|
|
61
52
|
const { y } = e.nativeEvent.contentOffset;
|
|
62
53
|
scrollBridge.y = y;
|
|
@@ -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
|
|
5
|
-
"mappings": "AAuEM,SAyDE,KAzDF;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;
|
|
6
|
-
"names": [
|
|
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,SAyDE,KAzDF;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,MACnB,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
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ const SheetScrollView = forwardRef(
|
|
|
9
9
|
SHEET_SCROLL_VIEW_NAME,
|
|
10
10
|
__scopeSheet
|
|
11
11
|
);
|
|
12
|
-
const [scrollEnabled, setScrollEnabled_] = useState(true);
|
|
13
12
|
const scrollRef = useRef(null);
|
|
14
13
|
const percentOpened = snapPoints[position] ?? 0;
|
|
15
14
|
const [percentToPadBottom, setPercentToPadBottom] = useState(0);
|
|
@@ -17,12 +16,6 @@ const SheetScrollView = forwardRef(
|
|
|
17
16
|
if (open && next !== percentToPadBottom) {
|
|
18
17
|
setPercentToPadBottom(next);
|
|
19
18
|
}
|
|
20
|
-
const setScrollEnabled = (next2) => {
|
|
21
|
-
scrollRef.current?.setNativeProps?.({
|
|
22
|
-
scrollEnabled: next2
|
|
23
|
-
});
|
|
24
|
-
setScrollEnabled_(next2);
|
|
25
|
-
};
|
|
26
19
|
const state = useRef({
|
|
27
20
|
lastPageY: 0,
|
|
28
21
|
dragAt: 0,
|
|
@@ -50,7 +43,7 @@ const SheetScrollView = forwardRef(
|
|
|
50
43
|
vy
|
|
51
44
|
});
|
|
52
45
|
};
|
|
53
|
-
return <ScrollView ref={composeRefs(scrollRef, ref)} flex={1} scrollEventThrottle={8}
|
|
46
|
+
return <ScrollView ref={composeRefs(scrollRef, ref)} flex={1} scrollEventThrottle={8} onScroll={(e) => {
|
|
54
47
|
const { y } = e.nativeEvent.contentOffset;
|
|
55
48
|
scrollBridge.y = y;
|
|
56
49
|
if (y > 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
|
|
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;
|
|
6
|
-
"names": [
|
|
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,aAChB;AAAA,OAEH,QAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAAA,MACnC,CAAC,MAAM,QAAS,qBAAqB,MAAO,WAAW,OAAO,GAAG;AAAA,IACnE,EA1DC;AAAA,EA4DL;AACF;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/sheet",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
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.0
|
|
26
|
-
"@tamagui/compose-refs": "^1.0
|
|
27
|
-
"@tamagui/core": "^1.0
|
|
28
|
-
"@tamagui/create-context": "^1.0
|
|
29
|
-
"@tamagui/remove-scroll": "^1.0
|
|
30
|
-
"@tamagui/scroll-view": "^1.0
|
|
31
|
-
"@tamagui/stacks": "^1.0
|
|
32
|
-
"@tamagui/use-constant": "^1.0
|
|
33
|
-
"@tamagui/use-controllable-state": "^1.0
|
|
25
|
+
"@tamagui/animations-react-native": "^1.1.0",
|
|
26
|
+
"@tamagui/compose-refs": "^1.1.0",
|
|
27
|
+
"@tamagui/core": "^1.1.0",
|
|
28
|
+
"@tamagui/create-context": "^1.1.0",
|
|
29
|
+
"@tamagui/remove-scroll": "^1.1.0",
|
|
30
|
+
"@tamagui/scroll-view": "^1.1.0",
|
|
31
|
+
"@tamagui/stacks": "^1.1.0",
|
|
32
|
+
"@tamagui/use-constant": "^1.1.0",
|
|
33
|
+
"@tamagui/use-controllable-state": "^1.1.0"
|
|
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.0
|
|
41
|
+
"@tamagui/build": "^1.1.0",
|
|
42
42
|
"react": "^18.2.0",
|
|
43
43
|
"react-dom": "^18.2.0",
|
|
44
44
|
"react-native": "*"
|
package/src/SheetScrollView.tsx
CHANGED
|
@@ -20,7 +20,7 @@ export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
|
|
|
20
20
|
SHEET_SCROLL_VIEW_NAME,
|
|
21
21
|
__scopeSheet
|
|
22
22
|
)
|
|
23
|
-
const [scrollEnabled, setScrollEnabled_] = useState(true)
|
|
23
|
+
// const [scrollEnabled, setScrollEnabled_] = useState(true)
|
|
24
24
|
const scrollRef = useRef<RNScrollView | null>(null)
|
|
25
25
|
|
|
26
26
|
const percentOpened = snapPoints[position] ?? 0
|
|
@@ -31,12 +31,12 @@ export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
|
|
|
31
31
|
setPercentToPadBottom(next)
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
const setScrollEnabled = (next: boolean) => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
34
|
+
// const setScrollEnabled = (next: boolean) => {
|
|
35
|
+
// scrollRef.current?.setNativeProps?.({
|
|
36
|
+
// scrollEnabled: next,
|
|
37
|
+
// })
|
|
38
|
+
// setScrollEnabled_(next)
|
|
39
|
+
// }
|
|
40
40
|
|
|
41
41
|
const state = useRef({
|
|
42
42
|
lastPageY: 0,
|
|
@@ -73,7 +73,7 @@ export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
|
|
|
73
73
|
ref={composeRefs(scrollRef as any, ref)}
|
|
74
74
|
flex={1}
|
|
75
75
|
scrollEventThrottle={8}
|
|
76
|
-
scrollEnabled={scrollEnabled}
|
|
76
|
+
// scrollEnabled={scrollEnabled}
|
|
77
77
|
onScroll={(e) => {
|
|
78
78
|
const { y } = e.nativeEvent.contentOffset
|
|
79
79
|
scrollBridge.y = y
|