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