forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
absolutely position header, set a headerheight (#9858)
authored by
Samuel Newman
and committed by
GitHub
8580e4a0
57997d6d
+24
-9
+24
-9
src/screens/ProfileList/index.tsx
+24
-9
src/screens/ProfileList/index.tsx
···
1
-
import {useCallback, useMemo, useRef} from 'react'
1
+
import {useCallback, useMemo, useRef, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
import {useAnimatedRef} from 'react-native-reanimated'
4
4
import {
···
35
35
import {FAB} from '#/view/com/util/fab/FAB'
36
36
import {type ListRef} from '#/view/com/util/List'
37
37
import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
38
-
import {atoms as a, platform} from '#/alf'
38
+
import {atoms as a, native, platform, useTheme} from '#/alf'
39
39
import {useDialogControl} from '#/components/Dialog'
40
40
import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog'
41
41
import * as Layout from '#/components/Layout'
42
42
import {Loader} from '#/components/Loader'
43
43
import * as Hider from '#/components/moderation/Hider'
44
+
import {IS_WEB} from '#/env'
44
45
import {AboutSection} from './AboutSection'
45
46
import {ErrorScreen} from './components/ErrorScreen'
46
47
import {Header} from './components/Header'
···
149
150
moderationOpts: ModerationOpts
150
151
preferences: UsePreferencesQueryResponse
151
152
}) {
153
+
const t = useTheme()
152
154
const {_} = useLingui()
153
155
const queryClient = useQueryClient()
154
156
const {openComposer} = useOpenComposer()
···
164
166
const scrollElRef = useAnimatedRef()
165
167
const addUserDialogControl = useDialogControl()
166
168
const sectionTitlesCurate = [_(msg`Posts`), _(msg`People`)]
169
+
// modlist only
170
+
const [headerHeight, setHeaderHeight] = useState<number | null>(null)
167
171
168
172
const moderation = useMemo(() => {
169
173
return moderateUserList(list, moderationOpts)
···
263
267
</Hider.Mask>
264
268
<Hider.Content>
265
269
<View style={[a.util_screen_outer]}>
266
-
<Layout.Center>{renderHeader()}</Layout.Center>
267
-
<AboutSection
268
-
list={list}
269
-
scrollElRef={scrollElRef as ListRef}
270
-
onPressAddUser={addUserDialogControl.open}
271
-
headerHeight={0}
272
-
/>
270
+
<Layout.Center
271
+
onLayout={evt => setHeaderHeight(evt.nativeEvent.layout.height)}
272
+
style={[
273
+
native([a.absolute, a.z_10, t.atoms.bg]),
274
+
275
+
a.border_b,
276
+
t.atoms.border_contrast_low,
277
+
]}>
278
+
{renderHeader()}
279
+
</Layout.Center>
280
+
{headerHeight !== null && (
281
+
<AboutSection
282
+
list={list}
283
+
scrollElRef={scrollElRef as ListRef}
284
+
onPressAddUser={addUserDialogControl.open}
285
+
headerHeight={IS_WEB ? 0 : headerHeight}
286
+
/>
287
+
)}
273
288
<FAB
274
289
testID="composeFAB"
275
290
onPress={() => openComposer({logContext: 'Fab'})}