@tamagui/sheet 1.0.1-beta.209 → 1.0.1-beta.210
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 +14 -4
- package/dist/cjs/SheetScrollView.js.map +2 -2
- package/dist/esm/SheetScrollView.js +15 -5
- package/dist/esm/SheetScrollView.js.map +2 -2
- package/dist/jsx/SheetScrollView.js +13 -5
- package/dist/jsx/SheetScrollView.js.map +2 -2
- package/package.json +11 -11
- package/src/SheetScrollView.tsx +18 -6
|
@@ -22,14 +22,23 @@ __export(SheetScrollView_exports, {
|
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(SheetScrollView_exports);
|
|
24
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_core = require("@tamagui/core");
|
|
25
26
|
var import_scroll_view = require("@tamagui/scroll-view");
|
|
26
27
|
var import_react = require("react");
|
|
27
28
|
var import_SheetContext = require("./SheetContext");
|
|
28
29
|
const SHEET_SCROLL_VIEW_NAME = "SheetScrollView";
|
|
29
30
|
const SheetScrollView = (0, import_react.forwardRef)(
|
|
30
|
-
({ __scopeSheet, ...props }, ref) => {
|
|
31
|
+
({ __scopeSheet, children, ...props }, ref) => {
|
|
31
32
|
const { scrollBridge } = (0, import_SheetContext.useSheetContext)(SHEET_SCROLL_VIEW_NAME, __scopeSheet);
|
|
32
|
-
const [scrollEnabled,
|
|
33
|
+
const [scrollEnabled, setScrollEnabled_] = (0, import_react.useState)(true);
|
|
34
|
+
const scrollRef = (0, import_react.useRef)(null);
|
|
35
|
+
const setScrollEnabled = (next) => {
|
|
36
|
+
var _a, _b;
|
|
37
|
+
(_b = (_a = scrollRef.current) == null ? void 0 : _a.setNativeProps) == null ? void 0 : _b.call(_a, {
|
|
38
|
+
scrollEnabled: next
|
|
39
|
+
});
|
|
40
|
+
setScrollEnabled_(next);
|
|
41
|
+
};
|
|
33
42
|
const state = (0, import_react.useRef)({
|
|
34
43
|
lastPageY: 0,
|
|
35
44
|
dragAt: 0,
|
|
@@ -54,7 +63,7 @@ const SheetScrollView = (0, import_react.forwardRef)(
|
|
|
54
63
|
});
|
|
55
64
|
};
|
|
56
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scroll_view.ScrollView, {
|
|
57
|
-
ref,
|
|
66
|
+
ref: (0, import_core.composeRefs)(scrollRef, ref),
|
|
58
67
|
flex: 1,
|
|
59
68
|
scrollEventThrottle: 8,
|
|
60
69
|
scrollEnabled,
|
|
@@ -98,7 +107,8 @@ const SheetScrollView = (0, import_react.forwardRef)(
|
|
|
98
107
|
}
|
|
99
108
|
},
|
|
100
109
|
onResponderRelease: release,
|
|
101
|
-
...props
|
|
110
|
+
...props,
|
|
111
|
+
children: (0, import_react.useMemo)(() => children, [children])
|
|
102
112
|
});
|
|
103
113
|
}
|
|
104
114
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import { TamaguiElement } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useRef, useState } from 'react'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// 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, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollVeiw } 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 } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollVeiw | null>(null)\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 })\n\n const release = () => {\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={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 return true\n }}\n onMoveShouldSetResponder={() => true}\n onResponderMove={(e) => {\n const { pageY } = e.nativeEvent\n\n if (state.current.isScrolling) {\n return\n }\n\n if (scrollBridge.scrollStartY === -1) {\n scrollBridge.scrollStartY = pageY\n state.current.lastPageY = pageY\n }\n\n const dragAt = pageY - scrollBridge.scrollStartY\n const dy = pageY - state.current.lastPageY\n state.current.lastPageY = pageY // after dy\n const 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 </ScrollView>\n )\n }\n)\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuDM;AAvDN,kBAA4C;AAC5C,yBAA4C;AAC5C,mBAAsD;AAGtD,0BAAgC;AAShC,MAAM,yBAAyB;AAExB,MAAM,sBAAkB;AAAA,EAC7B,CAAC,EAAE,cAAc,aAAa,MAAM,GAAsC,QAAQ;AAChF,UAAM,EAAE,aAAa,QAAI,qCAAgB,wBAAwB,YAAY;AAC7E,UAAM,CAAC,eAAe,iBAAiB,QAAI,uBAAS,IAAI;AACxD,UAAM,gBAAY,qBAA4B,IAAI;AAElD,UAAM,mBAAmB,CAAC,SAAkB;AAtBhD;AAuBM,4BAAU,YAAV,mBAAmB,mBAAnB,4BAAoC;AAAA,QAClC,eAAe;AAAA,MACjB;AACA,wBAAkB,IAAI;AAAA,IACxB;AAEA,UAAM,YAAQ,qBAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,IACf,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAC5B,uBAAiB,IAAI;AACrB,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,4CAAC;AAAA,MACC,SAAK,yBAAY,WAAkB,GAAG;AAAA,MACtC,MAAM;AAAA,MACN,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU,CAAC,MAAM;AACf,cAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,qBAAa,IAAI;AACjB,YAAI,IAAI,GAAG;AACT,uBAAa,eAAe;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,2BAA2B,MAAM;AAC/B,qBAAa,eAAe;AAC5B,eAAO;AAAA,MACT;AAAA,MACA,0BAA0B,MAAM;AAAA,MAChC,iBAAiB,CAAC,MAAM;AACtB,cAAM,EAAE,MAAM,IAAI,EAAE;AAEpB,YAAI,MAAM,QAAQ,aAAa;AAC7B;AAAA,QACF;AAEA,YAAI,aAAa,iBAAiB,IAAI;AACpC,uBAAa,eAAe;AAC5B,gBAAM,QAAQ,YAAY;AAAA,QAC5B;AAEA,cAAM,SAAS,QAAQ,aAAa;AACpC,cAAM,KAAK,QAAQ,MAAM,QAAQ;AACjC,cAAM,QAAQ,YAAY;AAC1B,cAAM,eAAe,KAAK;AAC1B,cAAM,cAAc,aAAa,SAAS,aAAa;AAEvD,aAAK,OAAO,KAAK,iBAAiB,aAAa;AAC7C,gBAAM,QAAQ,cAAc;AAC5B,2BAAiB,IAAI;AACrB;AAAA,QACF;AAEA,yBAAiB,KAAK;AACtB,qBAAa,KAAK,MAAM;AACxB,cAAM,QAAQ,SAAS;AACvB,cAAM,QAAQ,IAAI,KAAK,EAAE;AAEzB,YAAI,MAAM,QAAQ,IAAI,SAAS,KAAK;AAClC,gBAAM,QAAQ,MAAM,MAAM,QAAQ,IAAI,MAAM,GAAG;AAAA,QACjD;AAAA,MACF;AAAA,MACA,oBAAoB;AAAA,MACnB,GAAG;AAAA,MAEH,oCAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAAA,KACrC;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { composeRefs } from "@tamagui/core";
|
|
2
3
|
import { ScrollView } from "@tamagui/scroll-view";
|
|
3
|
-
import { forwardRef, useRef, useState } from "react";
|
|
4
|
+
import { forwardRef, useMemo, useRef, useState } from "react";
|
|
4
5
|
import { useSheetContext } from "./SheetContext";
|
|
5
6
|
const SHEET_SCROLL_VIEW_NAME = "SheetScrollView";
|
|
6
7
|
const SheetScrollView = forwardRef(
|
|
7
|
-
({ __scopeSheet, ...props }, ref) => {
|
|
8
|
+
({ __scopeSheet, children, ...props }, ref) => {
|
|
8
9
|
const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet);
|
|
9
|
-
const [scrollEnabled,
|
|
10
|
+
const [scrollEnabled, setScrollEnabled_] = useState(true);
|
|
11
|
+
const scrollRef = useRef(null);
|
|
12
|
+
const setScrollEnabled = (next) => {
|
|
13
|
+
var _a, _b;
|
|
14
|
+
(_b = (_a = scrollRef.current) == null ? void 0 : _a.setNativeProps) == null ? void 0 : _b.call(_a, {
|
|
15
|
+
scrollEnabled: next
|
|
16
|
+
});
|
|
17
|
+
setScrollEnabled_(next);
|
|
18
|
+
};
|
|
10
19
|
const state = useRef({
|
|
11
20
|
lastPageY: 0,
|
|
12
21
|
dragAt: 0,
|
|
@@ -31,7 +40,7 @@ const SheetScrollView = forwardRef(
|
|
|
31
40
|
});
|
|
32
41
|
};
|
|
33
42
|
return /* @__PURE__ */ jsx(ScrollView, {
|
|
34
|
-
ref,
|
|
43
|
+
ref: composeRefs(scrollRef, ref),
|
|
35
44
|
flex: 1,
|
|
36
45
|
scrollEventThrottle: 8,
|
|
37
46
|
scrollEnabled,
|
|
@@ -75,7 +84,8 @@ const SheetScrollView = forwardRef(
|
|
|
75
84
|
}
|
|
76
85
|
},
|
|
77
86
|
onResponderRelease: release,
|
|
78
|
-
...props
|
|
87
|
+
...props,
|
|
88
|
+
children: useMemo(() => children, [children])
|
|
79
89
|
});
|
|
80
90
|
}
|
|
81
91
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import { TamaguiElement } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useRef, useState } from 'react'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// 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, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled,
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollVeiw } 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 } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollVeiw | null>(null)\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 })\n\n const release = () => {\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={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 return true\n }}\n onMoveShouldSetResponder={() => true}\n onResponderMove={(e) => {\n const { pageY } = e.nativeEvent\n\n if (state.current.isScrolling) {\n return\n }\n\n if (scrollBridge.scrollStartY === -1) {\n scrollBridge.scrollStartY = pageY\n state.current.lastPageY = pageY\n }\n\n const dragAt = pageY - scrollBridge.scrollStartY\n const dy = pageY - state.current.lastPageY\n state.current.lastPageY = pageY // after dy\n const 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 </ScrollView>\n )\n }\n)\n"],
|
|
5
|
+
"mappings": "AAuDM;AAvDN,SAAyB,mBAAmB;AAC5C,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,aAAa,IAAI,gBAAgB,wBAAwB,YAAY;AAC7E,UAAM,CAAC,eAAe,iBAAiB,IAAI,SAAS,IAAI;AACxD,UAAM,YAAY,OAA4B,IAAI;AAElD,UAAM,mBAAmB,CAAC,SAAkB;AAtBhD;AAuBM,4BAAU,YAAV,mBAAmB,mBAAnB,4BAAoC;AAAA,QAClC,eAAe;AAAA,MACjB;AACA,wBAAkB,IAAI;AAAA,IACxB;AAEA,UAAM,QAAQ,OAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,IACf,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAC5B,uBAAiB,IAAI;AACrB,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,oBAAC;AAAA,MACC,KAAK,YAAY,WAAkB,GAAG;AAAA,MACtC,MAAM;AAAA,MACN,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU,CAAC,MAAM;AACf,cAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,qBAAa,IAAI;AACjB,YAAI,IAAI,GAAG;AACT,uBAAa,eAAe;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,2BAA2B,MAAM;AAC/B,qBAAa,eAAe;AAC5B,eAAO;AAAA,MACT;AAAA,MACA,0BAA0B,MAAM;AAAA,MAChC,iBAAiB,CAAC,MAAM;AACtB,cAAM,EAAE,MAAM,IAAI,EAAE;AAEpB,YAAI,MAAM,QAAQ,aAAa;AAC7B;AAAA,QACF;AAEA,YAAI,aAAa,iBAAiB,IAAI;AACpC,uBAAa,eAAe;AAC5B,gBAAM,QAAQ,YAAY;AAAA,QAC5B;AAEA,cAAM,SAAS,QAAQ,aAAa;AACpC,cAAM,KAAK,QAAQ,MAAM,QAAQ;AACjC,cAAM,QAAQ,YAAY;AAC1B,cAAM,eAAe,KAAK;AAC1B,cAAM,cAAc,aAAa,SAAS,aAAa;AAEvD,aAAK,OAAO,KAAK,iBAAiB,aAAa;AAC7C,gBAAM,QAAQ,cAAc;AAC5B,2BAAiB,IAAI;AACrB;AAAA,QACF;AAEA,yBAAiB,KAAK;AACtB,qBAAa,KAAK,MAAM;AACxB,cAAM,QAAQ,SAAS;AACvB,cAAM,QAAQ,IAAI,KAAK,EAAE;AAEzB,YAAI,MAAM,QAAQ,IAAI,SAAS,KAAK;AAClC,gBAAM,QAAQ,MAAM,MAAM,QAAQ,IAAI,MAAM,GAAG;AAAA,QACjD;AAAA,MACF;AAAA,MACA,oBAAoB;AAAA,MACnB,GAAG;AAAA,MAEH,kBAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAAA,KACrC;AAAA,EAEJ;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
+
import { composeRefs } from "@tamagui/core";
|
|
1
2
|
import { ScrollView } from "@tamagui/scroll-view";
|
|
2
|
-
import { forwardRef, useRef, useState } from "react";
|
|
3
|
+
import { forwardRef, useMemo, useRef, useState } from "react";
|
|
3
4
|
import { useSheetContext } from "./SheetContext";
|
|
4
5
|
const SHEET_SCROLL_VIEW_NAME = "SheetScrollView";
|
|
5
6
|
const SheetScrollView = forwardRef(
|
|
6
|
-
({ __scopeSheet, ...props }, ref) => {
|
|
7
|
+
({ __scopeSheet, children, ...props }, ref) => {
|
|
7
8
|
const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet);
|
|
8
|
-
const [scrollEnabled,
|
|
9
|
+
const [scrollEnabled, setScrollEnabled_] = useState(true);
|
|
10
|
+
const scrollRef = useRef(null);
|
|
11
|
+
const setScrollEnabled = (next) => {
|
|
12
|
+
scrollRef.current?.setNativeProps?.({
|
|
13
|
+
scrollEnabled: next
|
|
14
|
+
});
|
|
15
|
+
setScrollEnabled_(next);
|
|
16
|
+
};
|
|
9
17
|
const state = useRef({
|
|
10
18
|
lastPageY: 0,
|
|
11
19
|
dragAt: 0,
|
|
@@ -29,7 +37,7 @@ const SheetScrollView = forwardRef(
|
|
|
29
37
|
vy
|
|
30
38
|
});
|
|
31
39
|
};
|
|
32
|
-
return <ScrollView ref={ref} flex={1} scrollEventThrottle={8} scrollEnabled={scrollEnabled} onScroll={(e) => {
|
|
40
|
+
return <ScrollView ref={composeRefs(scrollRef, ref)} flex={1} scrollEventThrottle={8} scrollEnabled={scrollEnabled} onScroll={(e) => {
|
|
33
41
|
const { y } = e.nativeEvent.contentOffset;
|
|
34
42
|
scrollBridge.y = y;
|
|
35
43
|
if (y > 0) {
|
|
@@ -64,7 +72,7 @@ const SheetScrollView = forwardRef(
|
|
|
64
72
|
if (state.current.dys.length > 100) {
|
|
65
73
|
state.current.dys = state.current.dys.slice(-10);
|
|
66
74
|
}
|
|
67
|
-
}} onResponderRelease={release} {...props}
|
|
75
|
+
}} onResponderRelease={release} {...props}>{useMemo(() => children, [children])}</ScrollView>;
|
|
68
76
|
}
|
|
69
77
|
);
|
|
70
78
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SheetScrollView.tsx"],
|
|
4
|
-
"sourcesContent": ["import { TamaguiElement } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useRef, useState } from 'react'\n\nimport { useSheetContext } from './SheetContext'\nimport { SheetScopedProps } from './types'\n\n// 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, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {\n const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled,
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { TamaguiElement, composeRefs } from '@tamagui/core'\nimport { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\nimport { ScrollView as RNScrollVeiw } 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 } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)\n const [scrollEnabled, setScrollEnabled_] = useState(true)\n const scrollRef = useRef<RNScrollVeiw | null>(null)\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 })\n\n const release = () => {\n scrollBridge.scrollStartY = -1\n state.current.isScrolling = false\n setScrollEnabled(true)\n let vy = 0\n if (state.current.dys.length) {\n const recentDys = state.current.dys.slice(-10)\n const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0\n const avgDy = dist / recentDys.length\n vy = avgDy * 0.04\n }\n state.current.dys = []\n scrollBridge.release({\n dragAt: state.current.dragAt,\n vy,\n })\n }\n\n return (\n <ScrollView\n ref={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 return true\n }}\n onMoveShouldSetResponder={() => true}\n onResponderMove={(e) => {\n const { pageY } = e.nativeEvent\n\n if (state.current.isScrolling) {\n return\n }\n\n if (scrollBridge.scrollStartY === -1) {\n scrollBridge.scrollStartY = pageY\n state.current.lastPageY = pageY\n }\n\n const dragAt = pageY - scrollBridge.scrollStartY\n const dy = pageY - state.current.lastPageY\n state.current.lastPageY = pageY // after dy\n const 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 </ScrollView>\n )\n }\n)\n"],
|
|
5
|
+
"mappings": "AAAA,SAAyB,mBAAmB;AAC5C,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,aAAa,IAAI,gBAAgB,wBAAwB,YAAY;AAC7E,UAAM,CAAC,eAAe,iBAAiB,IAAI,SAAS,IAAI;AACxD,UAAM,YAAY,OAA4B,IAAI;AAElD,UAAM,mBAAmB,CAAC,SAAkB;AAC1C,gBAAU,SAAS,iBAAiB;AAAA,QAClC,eAAe;AAAA,MACjB,CAAC;AACD,wBAAkB,IAAI;AAAA,IACxB;AAEA,UAAM,QAAQ,OAAO;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,KAAK,CAAC;AAAA,MACN,aAAa;AAAA,IACf,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,mBAAa,eAAe;AAC5B,YAAM,QAAQ,cAAc;AAC5B,uBAAiB,IAAI;AACrB,UAAI,KAAK;AACT,UAAI,MAAM,QAAQ,IAAI,QAAQ;AAC5B,cAAM,YAAY,MAAM,QAAQ,IAAI,MAAM,GAAG;AAC7C,cAAM,OAAO,UAAU,SAAS,UAAU,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI;AACvE,cAAM,QAAQ,OAAO,UAAU;AAC/B,aAAK,QAAQ;AAAA,MACf;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,mBAAa,QAAQ;AAAA,QACnB,QAAQ,MAAM,QAAQ;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,CAAC,WACC,KAAK,YAAY,WAAkB,GAAG,GACtC,MAAM,GACN,qBAAqB,GACrB,eAAe,eACf,UAAU,CAAC,MAAM;AACf,YAAM,EAAE,EAAE,IAAI,EAAE,YAAY;AAC5B,mBAAa,IAAI;AACjB,UAAI,IAAI,GAAG;AACT,qBAAa,eAAe;AAAA,MAC9B;AAAA,IACF,GACA,2BAA2B,MAAM;AAC/B,mBAAa,eAAe;AAC5B,aAAO;AAAA,IACT,GACA,0BAA0B,MAAM,MAChC,iBAAiB,CAAC,MAAM;AACtB,YAAM,EAAE,MAAM,IAAI,EAAE;AAEpB,UAAI,MAAM,QAAQ,aAAa;AAC7B;AAAA,MACF;AAEA,UAAI,aAAa,iBAAiB,IAAI;AACpC,qBAAa,eAAe;AAC5B,cAAM,QAAQ,YAAY;AAAA,MAC5B;AAEA,YAAM,SAAS,QAAQ,aAAa;AACpC,YAAM,KAAK,QAAQ,MAAM,QAAQ;AACjC,YAAM,QAAQ,YAAY;AAC1B,YAAM,eAAe,KAAK;AAC1B,YAAM,cAAc,aAAa,SAAS,aAAa;AAEvD,WAAK,OAAO,KAAK,iBAAiB,aAAa;AAC7C,cAAM,QAAQ,cAAc;AAC5B,yBAAiB,IAAI;AACrB;AAAA,MACF;AAEA,uBAAiB,KAAK;AACtB,mBAAa,KAAK,MAAM;AACxB,YAAM,QAAQ,SAAS;AACvB,YAAM,QAAQ,IAAI,KAAK,EAAE;AAEzB,UAAI,MAAM,QAAQ,IAAI,SAAS,KAAK;AAClC,cAAM,QAAQ,MAAM,MAAM,QAAQ,IAAI,MAAM,GAAG;AAAA,MACjD;AAAA,IACF,GACA,oBAAoB,aAChB,QAEH,QAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC,EACrC,EAtDC;AAAA,EAwDL;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/sheet",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.210",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"lint:fix": "yarn lint --fix"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@tamagui/animations-react-native": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/remove-scroll": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/scroll-view": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/use-constant": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
25
|
+
"@tamagui/animations-react-native": "^1.0.1-beta.210",
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.210",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.210",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.210",
|
|
29
|
+
"@tamagui/remove-scroll": "^1.0.1-beta.210",
|
|
30
|
+
"@tamagui/scroll-view": "^1.0.1-beta.210",
|
|
31
|
+
"@tamagui/stacks": "^1.0.1-beta.210",
|
|
32
|
+
"@tamagui/use-constant": "^1.0.1-beta.210",
|
|
33
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.210"
|
|
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.1-beta.
|
|
41
|
+
"@tamagui/build": "^1.0.1-beta.210",
|
|
42
42
|
"react": "*",
|
|
43
43
|
"react-dom": "*",
|
|
44
44
|
"react-native": "*"
|
package/src/SheetScrollView.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { TamaguiElement } from '@tamagui/core'
|
|
1
|
+
import { TamaguiElement, composeRefs } from '@tamagui/core'
|
|
2
2
|
import { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'
|
|
3
|
-
import { forwardRef, useRef, useState } from 'react'
|
|
3
|
+
import { forwardRef, useMemo, useRef, useState } from 'react'
|
|
4
|
+
import { ScrollView as RNScrollVeiw } from 'react-native'
|
|
4
5
|
|
|
5
6
|
import { useSheetContext } from './SheetContext'
|
|
6
7
|
import { SheetScopedProps } from './types'
|
|
@@ -14,9 +15,18 @@ import { SheetScopedProps } from './types'
|
|
|
14
15
|
const SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'
|
|
15
16
|
|
|
16
17
|
export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
|
|
17
|
-
({ __scopeSheet, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {
|
|
18
|
+
({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {
|
|
18
19
|
const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)
|
|
19
|
-
const [scrollEnabled,
|
|
20
|
+
const [scrollEnabled, setScrollEnabled_] = useState(true)
|
|
21
|
+
const scrollRef = useRef<RNScrollVeiw | null>(null)
|
|
22
|
+
|
|
23
|
+
const setScrollEnabled = (next: boolean) => {
|
|
24
|
+
scrollRef.current?.setNativeProps?.({
|
|
25
|
+
scrollEnabled: next,
|
|
26
|
+
})
|
|
27
|
+
setScrollEnabled_(next)
|
|
28
|
+
}
|
|
29
|
+
|
|
20
30
|
const state = useRef({
|
|
21
31
|
lastPageY: 0,
|
|
22
32
|
dragAt: 0,
|
|
@@ -44,7 +54,7 @@ export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
|
|
|
44
54
|
|
|
45
55
|
return (
|
|
46
56
|
<ScrollView
|
|
47
|
-
ref={ref}
|
|
57
|
+
ref={composeRefs(scrollRef as any, ref)}
|
|
48
58
|
flex={1}
|
|
49
59
|
scrollEventThrottle={8}
|
|
50
60
|
scrollEnabled={scrollEnabled}
|
|
@@ -95,7 +105,9 @@ export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
|
|
|
95
105
|
}}
|
|
96
106
|
onResponderRelease={release}
|
|
97
107
|
{...props}
|
|
98
|
-
|
|
108
|
+
>
|
|
109
|
+
{useMemo(() => children, [children])}
|
|
110
|
+
</ScrollView>
|
|
99
111
|
)
|
|
100
112
|
}
|
|
101
113
|
)
|