forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Update 'load latest' btn for web
+99
-50
+57
src/view/com/util/LoadLatestBtn.tsx
+57
src/view/com/util/LoadLatestBtn.tsx
···
1
+
import React from 'react'
2
+
import {StyleSheet, TouchableOpacity} from 'react-native'
3
+
import {observer} from 'mobx-react-lite'
4
+
import LinearGradient from 'react-native-linear-gradient'
5
+
import {useSafeAreaInsets} from 'react-native-safe-area-context'
6
+
import {Text} from './text/Text'
7
+
import {colors, gradients} from '../../lib/styles'
8
+
import {clamp} from 'lodash'
9
+
import {useStores} from '../../../state'
10
+
11
+
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
12
+
13
+
export const LoadLatestBtn = observer(({onPress}: {onPress: () => void}) => {
14
+
const store = useStores()
15
+
const safeAreaInsets = useSafeAreaInsets()
16
+
return (
17
+
<TouchableOpacity
18
+
style={[
19
+
styles.loadLatest,
20
+
!store.shell.minimalShellMode && {
21
+
bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
22
+
},
23
+
]}
24
+
onPress={onPress}
25
+
hitSlop={HITSLOP}>
26
+
<LinearGradient
27
+
colors={[gradients.blueLight.start, gradients.blueLight.end]}
28
+
start={{x: 0, y: 0}}
29
+
end={{x: 1, y: 1}}
30
+
style={styles.loadLatestInner}>
31
+
<Text type="md-bold" style={styles.loadLatestText}>
32
+
Load new posts
33
+
</Text>
34
+
</LinearGradient>
35
+
</TouchableOpacity>
36
+
)
37
+
})
38
+
39
+
const styles = StyleSheet.create({
40
+
loadLatest: {
41
+
position: 'absolute',
42
+
left: 20,
43
+
bottom: 35,
44
+
shadowColor: '#000',
45
+
shadowOpacity: 0.3,
46
+
shadowOffset: {width: 0, height: 1},
47
+
},
48
+
loadLatestInner: {
49
+
flexDirection: 'row',
50
+
paddingHorizontal: 14,
51
+
paddingVertical: 10,
52
+
borderRadius: 30,
53
+
},
54
+
loadLatestText: {
55
+
color: colors.white,
56
+
},
57
+
})
+36
src/view/com/util/LoadLatestBtn.web.tsx
+36
src/view/com/util/LoadLatestBtn.web.tsx
···
1
+
import React from 'react'
2
+
import {StyleSheet, TouchableOpacity} from 'react-native'
3
+
import {Text} from './text/Text'
4
+
import {usePalette} from '../../lib/hooks/usePalette'
5
+
6
+
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
7
+
8
+
export const LoadLatestBtn = ({onPress}: {onPress: () => void}) => {
9
+
const pal = usePalette('default')
10
+
return (
11
+
<TouchableOpacity
12
+
style={[pal.view, styles.loadLatest]}
13
+
onPress={onPress}
14
+
hitSlop={HITSLOP}>
15
+
<Text type="md-bold" style={pal.text}>
16
+
Load new posts
17
+
</Text>
18
+
</TouchableOpacity>
19
+
)
20
+
}
21
+
22
+
const styles = StyleSheet.create({
23
+
loadLatest: {
24
+
flexDirection: 'row',
25
+
position: 'absolute',
26
+
left: 'calc(50vw - 80px)',
27
+
top: 30,
28
+
shadowColor: '#000',
29
+
shadowOpacity: 0.2,
30
+
shadowOffset: {width: 0, height: 2},
31
+
shadowRadius: 4,
32
+
paddingHorizontal: 24,
33
+
paddingVertical: 10,
34
+
borderRadius: 30,
35
+
},
36
+
})
+6
-50
src/view/screens/Home.tsx
+6
-50
src/view/screens/Home.tsx
···
1
1
import React, {useEffect} from 'react'
2
-
import {StyleSheet, TouchableOpacity, View} from 'react-native'
2
+
import {View} from 'react-native'
3
3
import {observer} from 'mobx-react-lite'
4
4
import useAppState from 'react-native-appstate-hook'
5
-
import LinearGradient from 'react-native-linear-gradient'
6
-
import {useSafeAreaInsets} from 'react-native-safe-area-context'
7
5
import {ViewHeader} from '../com/util/ViewHeader'
8
6
import {Feed} from '../com/posts/Feed'
9
-
import {Text} from '../com/util/text/Text'
10
7
import {FAB} from '../com/util/FAB'
8
+
import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
11
9
import {useStores} from '../../state'
12
10
import {ScreenParams} from '../routes'
13
-
import {s, colors, gradients} from '../lib/styles'
11
+
import {s} from '../lib/styles'
14
12
import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
15
-
import {clamp} from 'lodash'
16
-
17
-
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
18
13
19
14
export const Home = observer(function Home({
20
15
navIdx,
···
23
18
}: ScreenParams) {
24
19
const store = useStores()
25
20
const onMainScroll = useOnMainScroll(store)
26
-
const safeAreaInsets = useSafeAreaInsets()
27
21
const [wasVisible, setWasVisible] = React.useState<boolean>(false)
28
22
const {appState} = useAppState({
29
23
onForeground: () => doPoll(true),
···
95
89
onPressTryAgain={onPressTryAgain}
96
90
onScroll={onMainScroll}
97
91
/>
98
-
{store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing ? (
99
-
<TouchableOpacity
100
-
style={[
101
-
styles.loadLatest,
102
-
!store.shell.minimalShellMode && {
103
-
bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
104
-
},
105
-
]}
106
-
onPress={onPressLoadLatest}
107
-
hitSlop={HITSLOP}>
108
-
<LinearGradient
109
-
colors={[gradients.blueLight.start, gradients.blueLight.end]}
110
-
start={{x: 0, y: 0}}
111
-
end={{x: 1, y: 1}}
112
-
style={styles.loadLatestInner}>
113
-
<Text type="md-bold" style={styles.loadLatestText}>
114
-
Load new posts
115
-
</Text>
116
-
</LinearGradient>
117
-
</TouchableOpacity>
118
-
) : undefined}
92
+
{store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && (
93
+
<LoadLatestBtn onPress={onPressLoadLatest} />
94
+
)}
119
95
<FAB icon="pen-nib" onPress={() => onPressCompose(false)} />
120
96
</View>
121
97
)
122
98
})
123
-
124
-
const styles = StyleSheet.create({
125
-
loadLatest: {
126
-
position: 'absolute',
127
-
left: 20,
128
-
bottom: 35,
129
-
shadowColor: '#000',
130
-
shadowOpacity: 0.3,
131
-
shadowOffset: {width: 0, height: 1},
132
-
},
133
-
loadLatestInner: {
134
-
flexDirection: 'row',
135
-
paddingHorizontal: 14,
136
-
paddingVertical: 10,
137
-
borderRadius: 30,
138
-
},
139
-
loadLatestText: {
140
-
color: colors.white,
141
-
},
142
-
})