ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add animation to content hider (#9812)
* add layout animation to contenthider
* add layout animation to posthider
samuel.fm
+13
-6
src/components/moderation/ContentHider.tsx
+13
-6
src/components/moderation/ContentHider.tsx
···
1
-
import React from 'react'
2
-
import {type StyleProp, View, type ViewStyle} from 'react-native'
1
+
import {useMemo, useState} from 'react'
2
+
import {
3
+
LayoutAnimation,
4
+
type StyleProp,
5
+
View,
6
+
type ViewStyle,
7
+
} from 'react-native'
3
8
import {type ModerationUI} from '@atproto/api'
4
9
import {msg, Trans} from '@lingui/macro'
5
10
import {useLingui} from '@lingui/react'
···
64
69
style,
65
70
childContainerStyle,
66
71
children,
67
-
}: React.PropsWithChildren<{
72
+
}: {
68
73
testID?: string
69
74
modui: ModerationUI
70
75
style?: StyleProp<ViewStyle>
71
76
childContainerStyle?: StyleProp<ViewStyle>
72
-
}>) {
77
+
children?: React.ReactNode
78
+
}) {
73
79
const t = useTheme()
74
80
const {_} = useLingui()
75
81
const {gtMobile} = useBreakpoints()
76
-
const [override, setOverride] = React.useState(false)
82
+
const [override, setOverride] = useState(false)
77
83
const control = useModerationDetailsDialogControl()
78
84
const {labelDefs} = useLabelDefinitions()
79
85
const globalLabelStrings = useGlobalLabelStrings()
···
81
87
const blur = modui?.blurs[0]
82
88
const desc = useModerationCauseDescription(blur)
83
89
84
-
const labelName = React.useMemo(() => {
90
+
const labelName = useMemo(() => {
85
91
if (!modui?.blurs || !blur) {
86
92
return undefined
87
93
}
···
150
156
e.preventDefault()
151
157
e.stopPropagation()
152
158
if (!modui.noOverride) {
159
+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
153
160
setOverride(v => !v)
154
161
} else {
155
162
control.open()
+10
-8
src/components/moderation/PostHider.tsx
+10
-8
src/components/moderation/PostHider.tsx
···
1
-
import React, {type ComponentProps} from 'react'
1
+
import {useCallback, useState} from 'react'
2
2
import {
3
+
LayoutAnimation,
3
4
Pressable,
4
5
type StyleProp,
5
6
StyleSheet,
···
17
18
18
19
import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
19
20
import {addStyle} from '#/lib/styles'
20
-
import {precacheProfile} from '#/state/queries/profile'
21
+
import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
21
22
// import {Link} from '#/components/Link' TODO this imposes some styles that screw things up
22
23
import {Link} from '#/view/com/util/Link'
23
24
import {atoms as a, useTheme} from '#/alf'
···
27
28
} from '#/components/moderation/ModerationDetailsDialog'
28
29
import {Text} from '#/components/Typography'
29
30
30
-
interface Props extends ComponentProps<typeof Link> {
31
+
interface Props extends React.ComponentProps<typeof Link> {
31
32
disabled: boolean
32
33
iconSize: number
33
34
iconStyles: StyleProp<ViewStyle>
···
54
55
const queryClient = useQueryClient()
55
56
const t = useTheme()
56
57
const {_} = useLingui()
57
-
const [override, setOverride] = React.useState(false)
58
+
const [override, setOverride] = useState(false)
58
59
const control = useModerationDetailsDialogControl()
59
60
const blur =
60
61
modui.blurs[0] ||
61
62
(interpretFilterAsBlur ? getBlurrableFilter(modui) : undefined)
62
63
const desc = useModerationCauseDescription(blur)
63
64
64
-
const onBeforePress = React.useCallback(() => {
65
-
precacheProfile(queryClient, profile)
65
+
const onBeforePress = useCallback(() => {
66
+
unstableCacheProfileView(queryClient, profile)
66
67
}, [queryClient, profile])
67
68
68
69
if (!blur || (disabled && !modui.noOverride)) {
···
83
84
<Pressable
84
85
onPress={() => {
85
86
if (!modui.noOverride) {
87
+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
86
88
setOverride(v => !v)
87
89
}
88
90
}}
89
91
accessibilityRole="button"
90
-
accessibilityHint={
92
+
accessibilityLabel={
91
93
override ? _(msg`Hides the content`) : _(msg`Shows the content`)
92
94
}
93
-
accessibilityLabel=""
95
+
accessibilityHint=""
94
96
style={[
95
97
a.flex_row,
96
98
a.align_center,