@tamagui/scroll-view 2.7.7 → 3.0.0-beta.1093.1
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/ScrollView.cjs +20 -31
- package/dist/cjs/ScrollView.native.cjs +47 -0
- package/dist/cjs/ScrollView.native.js +35 -32
- package/dist/cjs/ScrollView.native.js.map +1 -1
- package/dist/cjs/WebScrollView.cjs +236 -0
- package/dist/cjs/WebScrollView.native.cjs +274 -0
- package/dist/cjs/WebScrollView.native.js +276 -0
- package/dist/cjs/WebScrollView.native.js.map +1 -0
- package/dist/cjs/index.cjs +9 -11
- package/dist/cjs/index.native.cjs +20 -0
- package/dist/cjs/index.native.js +9 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/web.cjs +24 -0
- package/dist/esm/ScrollView.mjs +8 -13
- package/dist/esm/ScrollView.mjs.map +1 -1
- package/dist/esm/ScrollView.native.js +17 -15
- package/dist/esm/ScrollView.native.js.map +1 -1
- package/dist/esm/WebScrollView.mjs +211 -0
- package/dist/esm/WebScrollView.mjs.map +1 -0
- package/dist/esm/WebScrollView.native.js +247 -0
- package/dist/esm/WebScrollView.native.js.map +1 -0
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/dist/esm/web.mjs +3 -0
- package/dist/jsx/ScrollView.mjs +8 -13
- package/dist/jsx/ScrollView.mjs.map +1 -1
- package/dist/jsx/ScrollView.native.cjs +47 -0
- package/dist/jsx/ScrollView.native.js +35 -32
- package/dist/jsx/ScrollView.native.js.map +1 -1
- package/dist/jsx/WebScrollView.mjs +211 -0
- package/dist/jsx/WebScrollView.mjs.map +1 -0
- package/dist/jsx/WebScrollView.native.cjs +274 -0
- package/dist/jsx/WebScrollView.native.js +276 -0
- package/dist/jsx/WebScrollView.native.js.map +1 -0
- package/dist/jsx/index.js +1 -2
- package/dist/jsx/index.mjs +1 -2
- package/dist/jsx/index.native.cjs +20 -0
- package/dist/jsx/index.native.js +9 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/web.mjs +3 -0
- package/package.json +15 -6
- package/src/ScrollView.native.tsx +45 -0
- package/src/ScrollView.tsx +12 -15
- package/src/WebScrollView.tsx +332 -0
- package/src/index.ts +1 -0
- package/src/web.ts +8 -0
- package/types/ScrollView.d.ts +18 -16
- package/types/ScrollView.d.ts.map +1 -1
- package/types/ScrollView.native.d.ts +25 -0
- package/types/ScrollView.native.d.ts.map +1 -0
- package/types/WebScrollView.d.ts +25 -0
- package/types/WebScrollView.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/types/web.d.ts +4 -0
- package/types/web.d.ts.map +1 -0
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/scroll-view",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-beta.1093.1",
|
|
4
|
+
"license": "MIT",
|
|
4
5
|
"source": "src/index.ts",
|
|
5
6
|
"files": [
|
|
6
7
|
"src",
|
|
@@ -22,6 +23,15 @@
|
|
|
22
23
|
"import": "./dist/esm/index.mjs",
|
|
23
24
|
"require": "./dist/cjs/index.cjs",
|
|
24
25
|
"default": "./dist/esm/index.mjs"
|
|
26
|
+
},
|
|
27
|
+
"./web": {
|
|
28
|
+
"types": "./types/web.d.ts",
|
|
29
|
+
"react-native": "./dist/esm/web.mjs",
|
|
30
|
+
"browser": "./dist/esm/web.mjs",
|
|
31
|
+
"module": "./dist/esm/web.mjs",
|
|
32
|
+
"import": "./dist/esm/web.mjs",
|
|
33
|
+
"require": "./dist/cjs/web.cjs",
|
|
34
|
+
"default": "./dist/esm/web.mjs"
|
|
25
35
|
}
|
|
26
36
|
},
|
|
27
37
|
"publishConfig": {
|
|
@@ -34,13 +44,12 @@
|
|
|
34
44
|
"clean:build": "tamagui-build clean:build"
|
|
35
45
|
},
|
|
36
46
|
"dependencies": {
|
|
37
|
-
"@tamagui/
|
|
38
|
-
"@tamagui/web": "2.7.7"
|
|
47
|
+
"@tamagui/web": "3.0.0-beta.1093.1"
|
|
39
48
|
},
|
|
40
49
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "
|
|
42
|
-
"react": "
|
|
43
|
-
"react-native": "0.
|
|
50
|
+
"@tamagui/build": "3.0.0-beta.1093.1",
|
|
51
|
+
"react": "19.2.3",
|
|
52
|
+
"react-native": "0.86.2"
|
|
44
53
|
},
|
|
45
54
|
"peerDependencies": {
|
|
46
55
|
"react": ">=19"
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import type { GetProps, GetRef, StylePiece } from '@tamagui/web'
|
|
2
|
+
import { styled, useStyle } from '@tamagui/web'
|
|
3
|
+
import React from 'react'
|
|
4
|
+
import {
|
|
5
|
+
ScrollView as ReactNativeScrollView,
|
|
6
|
+
type ScrollViewProps as ReactNativeScrollViewProps,
|
|
7
|
+
} from 'react-native'
|
|
8
|
+
|
|
9
|
+
type NativeScrollViewProps = Omit<ReactNativeScrollViewProps, 'contentContainerStyle'> & {
|
|
10
|
+
contentContainerStyle?: StylePiece
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const ScrollViewNative = React.forwardRef<ReactNativeScrollView, NativeScrollViewProps>(
|
|
14
|
+
({ contentContainerStyle, ...props }, ref) => (
|
|
15
|
+
<ReactNativeScrollView
|
|
16
|
+
{...props}
|
|
17
|
+
ref={ref}
|
|
18
|
+
contentContainerStyle={
|
|
19
|
+
useStyle(
|
|
20
|
+
contentContainerStyle
|
|
21
|
+
) as ReactNativeScrollViewProps['contentContainerStyle']
|
|
22
|
+
}
|
|
23
|
+
/>
|
|
24
|
+
)
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
export const ScrollView = styled(
|
|
28
|
+
ScrollViewNative,
|
|
29
|
+
{
|
|
30
|
+
displayName: 'ScrollView',
|
|
31
|
+
scrollEnabled: true,
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
neverFlatten: true,
|
|
35
|
+
}
|
|
36
|
+
)
|
|
37
|
+
|
|
38
|
+
export type ScrollView = GetRef<typeof ScrollView>
|
|
39
|
+
|
|
40
|
+
export type ScrollViewProps = Omit<
|
|
41
|
+
GetProps<typeof ScrollView>,
|
|
42
|
+
'contentContainerStyle'
|
|
43
|
+
> & {
|
|
44
|
+
contentContainerStyle?: StylePiece
|
|
45
|
+
}
|
package/src/ScrollView.tsx
CHANGED
|
@@ -1,27 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import type { GetProps, GetRef } from '@tamagui/web'
|
|
1
|
+
import type { GetProps, GetRef, StylePiece } from '@tamagui/web'
|
|
3
2
|
import { styled } from '@tamagui/web'
|
|
4
|
-
import {
|
|
3
|
+
import { WebScrollView } from './WebScrollView'
|
|
5
4
|
|
|
6
5
|
export const ScrollView = styled(
|
|
7
|
-
|
|
6
|
+
WebScrollView,
|
|
8
7
|
{
|
|
9
|
-
|
|
8
|
+
displayName: 'ScrollView',
|
|
10
9
|
scrollEnabled: true,
|
|
11
|
-
|
|
12
|
-
variants: {
|
|
13
|
-
fullscreen: {
|
|
14
|
-
true: fullscreenStyle,
|
|
15
|
-
},
|
|
16
|
-
} as const,
|
|
17
10
|
},
|
|
18
11
|
{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} as const,
|
|
12
|
+
acceptsClassName: true,
|
|
13
|
+
neverFlatten: true,
|
|
22
14
|
}
|
|
23
15
|
)
|
|
24
16
|
|
|
25
17
|
export type ScrollView = GetRef<typeof ScrollView>
|
|
26
18
|
|
|
27
|
-
export type ScrollViewProps =
|
|
19
|
+
export type ScrollViewProps = Omit<
|
|
20
|
+
GetProps<typeof ScrollView>,
|
|
21
|
+
'contentContainerStyle'
|
|
22
|
+
> & {
|
|
23
|
+
contentContainerStyle?: StylePiece
|
|
24
|
+
}
|
|
@@ -0,0 +1,332 @@
|
|
|
1
|
+
import { View as TamaguiView, type StylePiece } from '@tamagui/web'
|
|
2
|
+
import * as React from 'react'
|
|
3
|
+
|
|
4
|
+
// loosely typed to map the react-native ScrollView prop surface onto a
|
|
5
|
+
// tamagui View without fighting the strict styled-view prop types.
|
|
6
|
+
const View = TamaguiView as any
|
|
7
|
+
|
|
8
|
+
// clean-room web ScrollView: an overflow-scrolling tamagui View that maps the
|
|
9
|
+
// subset of the react-native ScrollView API that tamagui + its consumers use.
|
|
10
|
+
// this replaces the previous dependency on react-native (aliased to
|
|
11
|
+
// react-native-web-lite) so @tamagui/scroll-view no longer pulls react-native
|
|
12
|
+
// into web bundles. the native implementation lives in ScrollView.native.tsx.
|
|
13
|
+
|
|
14
|
+
export interface ScrollViewMethods {
|
|
15
|
+
getScrollResponder: () => any
|
|
16
|
+
getScrollableNode: () => HTMLElement
|
|
17
|
+
getInnerViewNode: () => HTMLElement
|
|
18
|
+
getInnerViewRef: () => HTMLElement
|
|
19
|
+
getNativeScrollRef: () => HTMLElement
|
|
20
|
+
scrollTo: (options?: { x?: number; y?: number; animated?: boolean }) => void
|
|
21
|
+
scrollToEnd: (options?: { animated?: boolean }) => void
|
|
22
|
+
flashScrollIndicators: () => void
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export type ScrollViewRef = HTMLElement & ScrollViewMethods
|
|
26
|
+
|
|
27
|
+
export type WebScrollViewProps = {
|
|
28
|
+
contentContainerStyle?: StylePiece
|
|
29
|
+
[key: string]: any
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function mergeRefs(...refs: any[]) {
|
|
33
|
+
return (node: any) => {
|
|
34
|
+
for (const ref of refs) {
|
|
35
|
+
if (!ref) continue
|
|
36
|
+
if (typeof ref === 'function') ref(node)
|
|
37
|
+
else ref.current = node
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function normalizeScrollEvent(e: any) {
|
|
43
|
+
const target = e.target
|
|
44
|
+
return {
|
|
45
|
+
nativeEvent: {
|
|
46
|
+
contentOffset: {
|
|
47
|
+
get x() {
|
|
48
|
+
return target.scrollLeft
|
|
49
|
+
},
|
|
50
|
+
get y() {
|
|
51
|
+
return target.scrollTop
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
contentSize: {
|
|
55
|
+
get height() {
|
|
56
|
+
return target.scrollHeight
|
|
57
|
+
},
|
|
58
|
+
get width() {
|
|
59
|
+
return target.scrollWidth
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
layoutMeasurement: {
|
|
63
|
+
get height() {
|
|
64
|
+
return target.offsetHeight
|
|
65
|
+
},
|
|
66
|
+
get width() {
|
|
67
|
+
return target.offsetWidth
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
timeStamp: Date.now(),
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function shouldEmitScrollEvent(lastTick: number, eventThrottle: number) {
|
|
76
|
+
const timeSinceLastTick = Date.now() - lastTick
|
|
77
|
+
return eventThrottle > 0 && timeSinceLastTick >= eventThrottle
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function resolveStyles(...inputs: any[]) {
|
|
81
|
+
return inputs.flat(Infinity).filter(Boolean)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
function joinClassNames(...parts: (string | undefined | false)[]): string | undefined {
|
|
85
|
+
const joined = parts.filter(Boolean).join(' ').trim()
|
|
86
|
+
return joined || undefined
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const commonStyle = {
|
|
90
|
+
flexGrow: 1,
|
|
91
|
+
flexShrink: 1,
|
|
92
|
+
} as const
|
|
93
|
+
|
|
94
|
+
const styles = {
|
|
95
|
+
baseVertical: {
|
|
96
|
+
...commonStyle,
|
|
97
|
+
flexDirection: 'column',
|
|
98
|
+
overflowX: 'hidden',
|
|
99
|
+
overflowY: 'auto',
|
|
100
|
+
},
|
|
101
|
+
baseHorizontal: {
|
|
102
|
+
...commonStyle,
|
|
103
|
+
flexDirection: 'row',
|
|
104
|
+
overflowX: 'auto',
|
|
105
|
+
overflowY: 'hidden',
|
|
106
|
+
},
|
|
107
|
+
contentContainerHorizontal: {
|
|
108
|
+
flexDirection: 'row',
|
|
109
|
+
},
|
|
110
|
+
contentContainerCenterContent: {
|
|
111
|
+
justifyContent: 'center',
|
|
112
|
+
flexGrow: 1,
|
|
113
|
+
},
|
|
114
|
+
stickyHeader: {
|
|
115
|
+
position: 'sticky',
|
|
116
|
+
top: 0,
|
|
117
|
+
zIndex: 10,
|
|
118
|
+
},
|
|
119
|
+
pagingEnabledHorizontal: {
|
|
120
|
+
scrollSnapType: 'x mandatory',
|
|
121
|
+
},
|
|
122
|
+
pagingEnabledVertical: {
|
|
123
|
+
scrollSnapType: 'y mandatory',
|
|
124
|
+
},
|
|
125
|
+
pagingEnabledChild: {
|
|
126
|
+
scrollSnapAlign: 'start',
|
|
127
|
+
},
|
|
128
|
+
scrollDisabled: {
|
|
129
|
+
overflowX: 'hidden',
|
|
130
|
+
overflowY: 'hidden',
|
|
131
|
+
touchAction: 'none',
|
|
132
|
+
},
|
|
133
|
+
} as const
|
|
134
|
+
|
|
135
|
+
export const WebScrollView = React.forwardRef<ScrollViewRef, WebScrollViewProps>(
|
|
136
|
+
(props, forwardedRef) => {
|
|
137
|
+
const {
|
|
138
|
+
children,
|
|
139
|
+
contentContainerStyle,
|
|
140
|
+
horizontal,
|
|
141
|
+
onContentSizeChange,
|
|
142
|
+
onScroll,
|
|
143
|
+
refreshControl,
|
|
144
|
+
stickyHeaderIndices,
|
|
145
|
+
pagingEnabled,
|
|
146
|
+
centerContent,
|
|
147
|
+
scrollEnabled = true,
|
|
148
|
+
scrollEventThrottle = 0,
|
|
149
|
+
showsHorizontalScrollIndicator,
|
|
150
|
+
showsVerticalScrollIndicator,
|
|
151
|
+
style,
|
|
152
|
+
// strip react-native-only props that shouldn't reach the DOM
|
|
153
|
+
keyboardShouldPersistTaps,
|
|
154
|
+
keyboardDismissMode,
|
|
155
|
+
contentOffset,
|
|
156
|
+
contentInset,
|
|
157
|
+
contentInsetAdjustmentBehavior,
|
|
158
|
+
decelerationRate,
|
|
159
|
+
directionalLockEnabled,
|
|
160
|
+
disableIntervalMomentum,
|
|
161
|
+
disableScrollViewPanResponder,
|
|
162
|
+
endFillColor,
|
|
163
|
+
fadingEdgeLength,
|
|
164
|
+
indicatorStyle,
|
|
165
|
+
invertStickyHeaders,
|
|
166
|
+
maintainVisibleContentPosition,
|
|
167
|
+
maximumZoomScale,
|
|
168
|
+
minimumZoomScale,
|
|
169
|
+
nestedScrollEnabled,
|
|
170
|
+
onScrollToTop,
|
|
171
|
+
overScrollMode,
|
|
172
|
+
pinchGestureEnabled,
|
|
173
|
+
removeClippedSubviews,
|
|
174
|
+
scrollIndicatorInsets,
|
|
175
|
+
scrollPerfTag,
|
|
176
|
+
scrollToOverflowEnabled,
|
|
177
|
+
snapToAlignment,
|
|
178
|
+
snapToEnd,
|
|
179
|
+
snapToInterval,
|
|
180
|
+
snapToOffsets,
|
|
181
|
+
snapToStart,
|
|
182
|
+
bounces,
|
|
183
|
+
...rest
|
|
184
|
+
} = props
|
|
185
|
+
|
|
186
|
+
const scrollNodeRef = React.useRef<any>(null)
|
|
187
|
+
const innerViewRef = React.useRef<any>(null)
|
|
188
|
+
const scrollState = React.useRef({ isScrolling: false, scrollLastTick: 0 })
|
|
189
|
+
const scrollTimeout = React.useRef<any>(null)
|
|
190
|
+
|
|
191
|
+
const scrollTo = (options?: { x?: number; y?: number; animated?: boolean }) => {
|
|
192
|
+
const node = scrollNodeRef.current
|
|
193
|
+
if (node == null) return
|
|
194
|
+
const { x = 0, y = 0, animated = true } = options || {}
|
|
195
|
+
if (typeof node.scroll === 'function') {
|
|
196
|
+
node.scroll({ top: y, left: x, behavior: animated ? 'smooth' : 'auto' })
|
|
197
|
+
} else {
|
|
198
|
+
node.scrollLeft = x
|
|
199
|
+
node.scrollTop = y
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
const scrollToEnd = (options?: { animated?: boolean }) => {
|
|
204
|
+
const node = scrollNodeRef.current
|
|
205
|
+
if (node == null) return
|
|
206
|
+
const animated = (options && options.animated) !== false
|
|
207
|
+
const x = horizontal ? node.scrollWidth : 0
|
|
208
|
+
const y = horizontal ? 0 : node.scrollHeight
|
|
209
|
+
scrollTo({ x, y, animated })
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
const setScrollNodeRef = React.useCallback(
|
|
213
|
+
(node: any) => {
|
|
214
|
+
scrollNodeRef.current = node
|
|
215
|
+
if (node != null) {
|
|
216
|
+
node.getScrollResponder = () => node
|
|
217
|
+
node.getScrollableNode = () => node
|
|
218
|
+
node.getInnerViewNode = () => innerViewRef.current
|
|
219
|
+
node.getInnerViewRef = () => innerViewRef.current
|
|
220
|
+
node.getNativeScrollRef = () => node
|
|
221
|
+
node.scrollTo = scrollTo
|
|
222
|
+
node.scrollToEnd = scrollToEnd
|
|
223
|
+
node.flashScrollIndicators = () => {}
|
|
224
|
+
}
|
|
225
|
+
mergeRefs(forwardedRef)(node)
|
|
226
|
+
},
|
|
227
|
+
[forwardedRef, horizontal]
|
|
228
|
+
)
|
|
229
|
+
|
|
230
|
+
function handleScroll(e: any) {
|
|
231
|
+
e.stopPropagation()
|
|
232
|
+
if (e.target !== scrollNodeRef.current) return
|
|
233
|
+
if (scrollTimeout.current != null) {
|
|
234
|
+
clearTimeout(scrollTimeout.current)
|
|
235
|
+
}
|
|
236
|
+
scrollTimeout.current = setTimeout(() => {
|
|
237
|
+
scrollState.current.isScrolling = false
|
|
238
|
+
onScroll?.(normalizeScrollEvent(e))
|
|
239
|
+
}, 100)
|
|
240
|
+
if (scrollState.current.isScrolling) {
|
|
241
|
+
if (
|
|
242
|
+
shouldEmitScrollEvent(scrollState.current.scrollLastTick, scrollEventThrottle)
|
|
243
|
+
) {
|
|
244
|
+
scrollState.current.scrollLastTick = Date.now()
|
|
245
|
+
onScroll?.(normalizeScrollEvent(e))
|
|
246
|
+
}
|
|
247
|
+
} else {
|
|
248
|
+
scrollState.current.isScrolling = true
|
|
249
|
+
scrollState.current.scrollLastTick = Date.now()
|
|
250
|
+
onScroll?.(normalizeScrollEvent(e))
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
const handleContentLayout = onContentSizeChange
|
|
255
|
+
? (e: any) => {
|
|
256
|
+
const { width, height } = e.nativeEvent.layout
|
|
257
|
+
onContentSizeChange(width, height)
|
|
258
|
+
}
|
|
259
|
+
: undefined
|
|
260
|
+
|
|
261
|
+
const hasStickyHeaderIndices = !horizontal && Array.isArray(stickyHeaderIndices)
|
|
262
|
+
const renderedChildren =
|
|
263
|
+
hasStickyHeaderIndices || pagingEnabled
|
|
264
|
+
? React.Children.map(children, (child, i) => {
|
|
265
|
+
const isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1
|
|
266
|
+
if (child != null && (isSticky || pagingEnabled)) {
|
|
267
|
+
const resolvedStyle = resolveStyles(
|
|
268
|
+
isSticky && styles.stickyHeader,
|
|
269
|
+
pagingEnabled && styles.pagingEnabledChild
|
|
270
|
+
)
|
|
271
|
+
return <View style={resolvedStyle}>{child}</View>
|
|
272
|
+
}
|
|
273
|
+
return child
|
|
274
|
+
})
|
|
275
|
+
: children
|
|
276
|
+
|
|
277
|
+
const contentStyle = resolveStyles(
|
|
278
|
+
horizontal && styles.contentContainerHorizontal,
|
|
279
|
+
centerContent && styles.contentContainerCenterContent,
|
|
280
|
+
contentContainerStyle
|
|
281
|
+
)
|
|
282
|
+
const contentContainer = (
|
|
283
|
+
<View ref={innerViewRef} onLayout={handleContentLayout} style={contentStyle}>
|
|
284
|
+
{renderedChildren}
|
|
285
|
+
</View>
|
|
286
|
+
)
|
|
287
|
+
|
|
288
|
+
const baseStyle = horizontal ? styles.baseHorizontal : styles.baseVertical
|
|
289
|
+
const pagingEnabledStyle = horizontal
|
|
290
|
+
? styles.pagingEnabledHorizontal
|
|
291
|
+
: styles.pagingEnabledVertical
|
|
292
|
+
|
|
293
|
+
const hideHorizontalScrollbar = showsHorizontalScrollIndicator === false
|
|
294
|
+
const hideVerticalScrollbar = showsVerticalScrollIndicator === false
|
|
295
|
+
const extraClassName =
|
|
296
|
+
(hideHorizontalScrollbar ? ' _hsb-x' : '') +
|
|
297
|
+
(hideVerticalScrollbar ? ' _hsb-y' : '')
|
|
298
|
+
|
|
299
|
+
const scrollStyle = resolveStyles(
|
|
300
|
+
baseStyle,
|
|
301
|
+
pagingEnabled && pagingEnabledStyle,
|
|
302
|
+
style,
|
|
303
|
+
!scrollEnabled && styles.scrollDisabled
|
|
304
|
+
)
|
|
305
|
+
const scrollView = (
|
|
306
|
+
<View
|
|
307
|
+
{...rest}
|
|
308
|
+
className={joinClassNames(rest.className, extraClassName)}
|
|
309
|
+
ref={setScrollNodeRef}
|
|
310
|
+
onScroll={handleScroll}
|
|
311
|
+
style={scrollStyle}
|
|
312
|
+
>
|
|
313
|
+
{contentContainer}
|
|
314
|
+
</View>
|
|
315
|
+
)
|
|
316
|
+
|
|
317
|
+
if (refreshControl) {
|
|
318
|
+
const refreshStyle = resolveStyles(baseStyle, style)
|
|
319
|
+
return React.cloneElement(
|
|
320
|
+
refreshControl,
|
|
321
|
+
{
|
|
322
|
+
style: refreshStyle,
|
|
323
|
+
},
|
|
324
|
+
scrollView
|
|
325
|
+
)
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
return scrollView
|
|
329
|
+
}
|
|
330
|
+
)
|
|
331
|
+
|
|
332
|
+
WebScrollView.displayName = 'ScrollView'
|
package/src/index.ts
CHANGED
package/src/web.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
// cycle-free entry for react-native-web-lite: always the web implementation,
|
|
2
|
+
// never the .native file (which imports 'react-native' — in bundling contexts
|
|
3
|
+
// where react-native aliases to lite, importing the package root from lite
|
|
4
|
+
// would resolve the react-native condition and create a require cycle that
|
|
5
|
+
// leaves ScrollView undefined)
|
|
6
|
+
export { ScrollView } from './ScrollView'
|
|
7
|
+
export type { ScrollViewProps } from './ScrollView'
|
|
8
|
+
export type { ScrollViewMethods, ScrollViewRef } from './WebScrollView'
|
package/types/ScrollView.d.ts
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
import type { GetProps, GetRef } from '@tamagui/web';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}, {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
}
|
|
1
|
+
import type { GetProps, GetRef, StylePiece } from '@tamagui/web';
|
|
2
|
+
export declare const ScrollView: import("react").FunctionComponent<Omit<import("@tamagui/web").TamaguiComponentPropsBaseBase & Omit<import("./WebScrollView").WebScrollViewProps, "ref"> & import("react").RefAttributes<import("./WebScrollView").ScrollViewRef>, keyof import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithFlatVariantValues<{}> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & {
|
|
3
|
+
ref?: import("react").Ref<import("./WebScrollView").ScrollViewRef> | undefined;
|
|
4
|
+
}> & import("@tamagui/web").StaticComponentObject<import("@tamagui/web").TamaDefer, import("./WebScrollView").ScrollViewRef, import("@tamagui/web").TamaguiComponentPropsBaseBase & Omit<import("./WebScrollView").WebScrollViewProps, "ref"> & import("react").RefAttributes<import("./WebScrollView").ScrollViewRef>, import("@tamagui/web").StackStyleBase, {}, {
|
|
5
|
+
acceptsClassName: true;
|
|
6
|
+
neverFlatten: true;
|
|
7
|
+
}> & Omit<{
|
|
8
|
+
acceptsClassName: true;
|
|
9
|
+
neverFlatten: true;
|
|
10
|
+
}, "staticConfig"> & {
|
|
11
|
+
__tama: [import("@tamagui/web").TamaDefer, import("./WebScrollView").ScrollViewRef, import("@tamagui/web").TamaguiComponentPropsBaseBase & Omit<import("./WebScrollView").WebScrollViewProps, "ref"> & import("react").RefAttributes<import("./WebScrollView").ScrollViewRef>, import("@tamagui/web").StackStyleBase, {}, {
|
|
12
|
+
acceptsClassName: true;
|
|
13
|
+
neverFlatten: true;
|
|
14
|
+
}];
|
|
15
|
+
};
|
|
16
16
|
export type ScrollView = GetRef<typeof ScrollView>;
|
|
17
|
-
export type ScrollViewProps = GetProps<typeof ScrollView
|
|
17
|
+
export type ScrollViewProps = Omit<GetProps<typeof ScrollView>, 'contentContainerStyle'> & {
|
|
18
|
+
contentContainerStyle?: StylePiece;
|
|
19
|
+
};
|
|
18
20
|
//# sourceMappingURL=ScrollView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../src/ScrollView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../src/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIhE,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAUtB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,UAAU,CAAC,CAAA;AAElD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAC3B,uBAAuB,CACxB,GAAG;IACF,qBAAqB,CAAC,EAAE,UAAU,CAAA;CACnC,CAAA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { GetProps, GetRef, StylePiece } from '@tamagui/web';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ScrollView as ReactNativeScrollView, type ScrollViewProps as ReactNativeScrollViewProps } from 'react-native';
|
|
4
|
+
export declare const ScrollView: React.FunctionComponent<Omit<import("@tamagui/web").TamaguiComponentPropsBaseBase & Omit<ReactNativeScrollViewProps, "contentContainerStyle"> & {
|
|
5
|
+
contentContainerStyle?: StylePiece;
|
|
6
|
+
} & React.RefAttributes<ReactNativeScrollView>, keyof import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithFlatVariantValues<{}> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & {
|
|
7
|
+
ref?: React.Ref<ReactNativeScrollView> | undefined;
|
|
8
|
+
}> & import("@tamagui/web").StaticComponentObject<import("@tamagui/web").TamaDefer, ReactNativeScrollView, import("@tamagui/web").TamaguiComponentPropsBaseBase & Omit<ReactNativeScrollViewProps, "contentContainerStyle"> & {
|
|
9
|
+
contentContainerStyle?: StylePiece;
|
|
10
|
+
} & React.RefAttributes<ReactNativeScrollView>, import("@tamagui/web").StackStyleBase, {}, {
|
|
11
|
+
neverFlatten: true;
|
|
12
|
+
}> & Omit<{
|
|
13
|
+
neverFlatten: true;
|
|
14
|
+
}, "staticConfig"> & {
|
|
15
|
+
__tama: [import("@tamagui/web").TamaDefer, ReactNativeScrollView, import("@tamagui/web").TamaguiComponentPropsBaseBase & Omit<ReactNativeScrollViewProps, "contentContainerStyle"> & {
|
|
16
|
+
contentContainerStyle?: StylePiece;
|
|
17
|
+
} & React.RefAttributes<ReactNativeScrollView>, import("@tamagui/web").StackStyleBase, {}, {
|
|
18
|
+
neverFlatten: true;
|
|
19
|
+
}];
|
|
20
|
+
};
|
|
21
|
+
export type ScrollView = GetRef<typeof ScrollView>;
|
|
22
|
+
export type ScrollViewProps = Omit<GetProps<typeof ScrollView>, 'contentContainerStyle'> & {
|
|
23
|
+
contentContainerStyle?: StylePiece;
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=ScrollView.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollView.native.d.ts","sourceRoot":"","sources":["../src/ScrollView.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEhE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,UAAU,IAAI,qBAAqB,EACnC,KAAK,eAAe,IAAI,0BAA0B,EACnD,MAAM,cAAc,CAAA;AAoBrB,eAAO,MAAM,UAAU;4BAjBG,UAAU;;;;;;;;;;;gCAAV,UAAU;;;;CA0BnC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,UAAU,CAAC,CAAA;AAElD,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAC3B,uBAAuB,CACxB,GAAG;IACF,qBAAqB,CAAC,EAAE,UAAU,CAAA;CACnC,CAAA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type StylePiece } from '@tamagui/web';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
export interface ScrollViewMethods {
|
|
4
|
+
getScrollResponder: () => any;
|
|
5
|
+
getScrollableNode: () => HTMLElement;
|
|
6
|
+
getInnerViewNode: () => HTMLElement;
|
|
7
|
+
getInnerViewRef: () => HTMLElement;
|
|
8
|
+
getNativeScrollRef: () => HTMLElement;
|
|
9
|
+
scrollTo: (options?: {
|
|
10
|
+
x?: number;
|
|
11
|
+
y?: number;
|
|
12
|
+
animated?: boolean;
|
|
13
|
+
}) => void;
|
|
14
|
+
scrollToEnd: (options?: {
|
|
15
|
+
animated?: boolean;
|
|
16
|
+
}) => void;
|
|
17
|
+
flashScrollIndicators: () => void;
|
|
18
|
+
}
|
|
19
|
+
export type ScrollViewRef = HTMLElement & ScrollViewMethods;
|
|
20
|
+
export type WebScrollViewProps = {
|
|
21
|
+
contentContainerStyle?: StylePiece;
|
|
22
|
+
[key: string]: any;
|
|
23
|
+
};
|
|
24
|
+
export declare const WebScrollView: React.ForwardRefExoticComponent<Omit<WebScrollViewProps, "ref"> & React.RefAttributes<ScrollViewRef>>;
|
|
25
|
+
//# sourceMappingURL=WebScrollView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WebScrollView.d.ts","sourceRoot":"","sources":["../src/WebScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,EAAE,MAAM,GAAG,CAAA;IAC7B,iBAAiB,EAAE,MAAM,WAAW,CAAA;IACpC,gBAAgB,EAAE,MAAM,WAAW,CAAA;IACnC,eAAe,EAAE,MAAM,WAAW,CAAA;IAClC,kBAAkB,EAAE,MAAM,WAAW,CAAA;IACrC,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IAC5E,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACvD,qBAAqB,EAAE,MAAM,IAAI,CAAA;CAClC;AAED,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,qBAAqB,CAAC,EAAE,UAAU,CAAA;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAyGD,eAAO,MAAM,aAAa,uGAmMzB,CAAA"}
|
package/types/index.d.ts
CHANGED
package/types/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
|
package/types/web.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"web.d.ts","sourceRoot":"","sources":["../src/web.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}
|
package/dist/esm/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}
|
package/dist/jsx/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}
|
package/dist/jsx/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}
|