1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
/**
* In the Web build, we center all content so that it mirrors the
* mobile experience (a single narrow column). We then place a UI
* shell around the content if you're in desktop.
*
* Because scrolling is handled by components deep in the hierarchy,
* we can't just wrap the top-level element with a max width. The
* centering has to be done at the ScrollView.
*
* These components wrap the RN ScrollView-based components to provide
* consistent layout. It also provides <CenteredView> for views that
* need to match layout but which aren't scrolled.
*/
import React from 'react'
import {
FlatList,
FlatListProps,
ScrollViewProps,
StyleSheet,
View,
ViewProps,
} from 'react-native'
import Animated from 'react-native-reanimated'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {addStyle} from 'lib/styles'
interface AddedProps {
desktopFixedHeight?: boolean | number
}
export function CenteredView({
style,
sideBorders,
topBorder,
...props
}: React.PropsWithChildren<
ViewProps & {sideBorders?: boolean; topBorder?: boolean}
>) {
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()
if (!isMobile) {
style = addStyle(style, styles.container)
}
if (sideBorders) {
style = addStyle(style, {
borderLeftWidth: 1,
borderRightWidth: 1,
})
style = addStyle(style, pal.border)
}
if (topBorder) {
style = addStyle(style, {
borderTopWidth: 1,
})
style = addStyle(style, pal.border)
}
return <View style={style} {...props} />
}
export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
{
contentContainerStyle,
style,
contentOffset,
desktopFixedHeight,
...props
}: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
ref: React.Ref<FlatList<ItemT>>,
) {
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()
if (!isMobile) {
contentContainerStyle = addStyle(
contentContainerStyle,
styles.containerScroll,
)
}
if (contentOffset && contentOffset?.y !== 0) {
// NOTE
// we use paddingTop & contentOffset to space around the floating header
// but reactnative web puts the paddingTop on the wrong element (style instead of the contentContainer)
// so we manually correct it here
// -prf
style = addStyle(style, {
paddingTop: 0,
})
contentContainerStyle = addStyle(contentContainerStyle, {
paddingTop: Math.abs(contentOffset.y),
})
}
if (desktopFixedHeight) {
if (typeof desktopFixedHeight === 'number') {
// @ts-ignore Web only -prf
style = addStyle(style, {
height: `calc(100vh - ${desktopFixedHeight}px)`,
})
} else {
style = addStyle(style, styles.fixedHeight)
}
if (!isMobile) {
// NOTE
// react native web produces *three* wrapping divs
// the first two use the `style` prop and the innermost uses the
// `contentContainerStyle`. Unfortunately the stable-gutter style
// needs to be applied to only the "middle" of these. To hack
// around this, we set data-stable-gutters which can then be
// styled in our external CSS.
// -prf
// @ts-ignore web only -prf
props.dataSet = props.dataSet || {}
// @ts-ignore web only -prf
props.dataSet.stableGutters = '1'
}
}
return (
<Animated.FlatList
ref={ref}
contentContainerStyle={[
styles.contentContainer,
contentContainerStyle,
pal.border,
]}
style={style}
contentOffset={contentOffset}
{...props}
/>
)
})
export const ScrollView = React.forwardRef(function ScrollViewImpl(
{contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
ref: React.Ref<Animated.ScrollView>,
) {
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()
if (!isMobile) {
contentContainerStyle = addStyle(
contentContainerStyle,
styles.containerScroll,
)
}
return (
<Animated.ScrollView
contentContainerStyle={[
styles.contentContainer,
contentContainerStyle,
pal.border,
]}
// @ts-ignore something is wrong with the reanimated types -prf
ref={ref}
{...props}
/>
)
})
const styles = StyleSheet.create({
contentContainer: {
borderLeftWidth: 1,
borderRightWidth: 1,
// @ts-ignore web only
minHeight: '100vh',
},
container: {
width: '100%',
maxWidth: 600,
marginLeft: 'auto',
marginRight: 'auto',
},
containerScroll: {
width: '100%',
maxWidth: 600,
marginLeft: 'auto',
marginRight: 'auto',
},
fixedHeight: {
// @ts-ignore web only
height: '100vh',
},
})
|
