nasso.dev
my fork of the bluesky client
Fix jumpy web animation for modal backdrop (#6673)
authored by
GitHub
aa58216b
fdc3f0f1
+27
-16
src/components/Dialog/index.web.tsx
+27
-16
src/components/Dialog/index.web.tsx
···
7
View,
8
ViewStyle,
9
} from 'react-native'
10
-
import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
11
import {msg} from '@lingui/macro'
12
import {useLingui} from '@lingui/react'
13
import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
···
42
onClose,
43
}: React.PropsWithChildren<DialogOuterProps>) {
44
const {_} = useLingui()
45
-
const t = useTheme()
46
const {gtMobile} = useBreakpoints()
47
const [isOpen, setIsOpen] = React.useState(false)
48
const {setDialogIsOpen} = useDialogStateControlContext()
···
118
gtMobile ? a.p_lg : a.p_md,
119
{overflowY: 'auto'},
120
]}>
121
-
<Animated.View
122
-
entering={FadeIn.duration(150)}
123
-
// exiting={FadeOut.duration(150)}
124
-
style={[
125
-
web(a.fixed),
126
-
a.inset_0,
127
-
{opacity: 0.8, backgroundColor: t.palette.black},
128
-
]}
129
-
/>
130
-
131
<View
132
style={[
133
a.w_full,
···
164
useFocusGuards()
165
return (
166
<FocusScope loop asChild trapped>
167
-
<Animated.View
168
role="dialog"
169
aria-role="dialog"
170
aria-label={label}
···
174
onClick={stopPropagation}
175
onStartShouldSetResponder={_ => true}
176
onTouchEnd={stopPropagation}
177
-
entering={FadeInDown.duration(100)}
178
-
// exiting={FadeOut.duration(100)}
179
style={flatten([
180
a.relative,
181
a.rounded_md,
···
188
shadowColor: t.palette.black,
189
shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
190
shadowRadius: 30,
191
},
192
flatten(style),
193
])}>
···
201
{children}
202
</View>
203
</DismissableLayer>
204
-
</Animated.View>
205
</FocusScope>
206
)
207
}
···
268
export function Handle() {
269
return null
270
}
···
7
View,
8
ViewStyle,
9
} from 'react-native'
10
import {msg} from '@lingui/macro'
11
import {useLingui} from '@lingui/react'
12
import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
···
41
onClose,
42
}: React.PropsWithChildren<DialogOuterProps>) {
43
const {_} = useLingui()
44
const {gtMobile} = useBreakpoints()
45
const [isOpen, setIsOpen] = React.useState(false)
46
const {setDialogIsOpen} = useDialogStateControlContext()
···
116
gtMobile ? a.p_lg : a.p_md,
117
{overflowY: 'auto'},
118
]}>
119
+
<Backdrop />
120
<View
121
style={[
122
a.w_full,
···
153
useFocusGuards()
154
return (
155
<FocusScope loop asChild trapped>
156
+
<View
157
role="dialog"
158
aria-role="dialog"
159
aria-label={label}
···
163
onClick={stopPropagation}
164
onStartShouldSetResponder={_ => true}
165
onTouchEnd={stopPropagation}
166
style={flatten([
167
a.relative,
168
a.rounded_md,
···
175
shadowColor: t.palette.black,
176
shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
177
shadowRadius: 30,
178
+
// @ts-ignore web only
179
+
animation: 'fadeIn ease-out 0.1s',
180
},
181
flatten(style),
182
])}>
···
190
{children}
191
</View>
192
</DismissableLayer>
193
+
</View>
194
</FocusScope>
195
)
196
}
···
257
export function Handle() {
258
return null
259
}
260
+
261
+
function Backdrop() {
262
+
const t = useTheme()
263
+
return (
264
+
<View
265
+
style={{
266
+
opacity: 0.8,
267
+
}}>
268
+
<View
269
+
style={[
270
+
a.fixed,
271
+
a.inset_0,
272
+
{
273
+
backgroundColor: t.palette.black,
274
+
// @ts-ignore web only
275
+
animation: 'fadeIn ease-out 0.15s',
276
+
},
277
+
]}
278
+
/>
279
+
</View>
280
+
)
281
+
}
+2
-2
src/components/ProfileHoverCard/index.web.tsx
+2
-2
src/components/ProfileHoverCard/index.web.tsx
+2
-2
src/style.css
+2
-2
src/style.css