Add disableTransition prop to Menu, enable transition on Repost button
- Add `disableTransition` prop to Menu.Outer that skips passing sourceViewTag when true, disabling the fluid morph transition. - Apply disableTransition to the profile menu (share, add to list, etc.) - Enable the fluid transition on the Repost button by passing sourceViewTag from a ref on the PostControlButton. https://claude.ai/code/session_011cNDhEb2cDgg5QbVuzEyH1
This commit is contained in:
@@ -98,13 +98,17 @@ export function Trigger({
|
|||||||
export function Outer({
|
export function Outer({
|
||||||
children,
|
children,
|
||||||
showCancel,
|
showCancel,
|
||||||
|
disableTransition,
|
||||||
}: React.PropsWithChildren<{
|
}: React.PropsWithChildren<{
|
||||||
showCancel?: boolean
|
showCancel?: boolean
|
||||||
style?: StyleProp<ViewStyle>
|
style?: StyleProp<ViewStyle>
|
||||||
|
disableTransition?: boolean
|
||||||
}>) {
|
}>) {
|
||||||
const context = useMenuContext()
|
const context = useMenuContext()
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const sourceViewTag = findNodeHandle(context.triggerRef.current) ?? undefined
|
const sourceViewTag = disableTransition
|
||||||
|
? undefined
|
||||||
|
: (findNodeHandle(context.triggerRef.current) ?? undefined)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog.Outer
|
<Dialog.Outer
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import {memo, useCallback} from 'react'
|
import {memo, useCallback, useRef} from 'react'
|
||||||
import {View} from 'react-native'
|
import {findNodeHandle, View} from 'react-native'
|
||||||
import {msg, plural} from '@lingui/core/macro'
|
import {msg, plural} from '@lingui/core/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
import {Trans} from '@lingui/react/macro'
|
import {Trans} from '@lingui/react/macro'
|
||||||
@@ -41,6 +41,7 @@ let RepostButton = ({
|
|||||||
const requireAuth = useRequireAuth()
|
const requireAuth = useRequireAuth()
|
||||||
const dialogControl = Dialog.useDialogControl()
|
const dialogControl = Dialog.useDialogControl()
|
||||||
const formatPostStatCount = useFormatPostStatCount()
|
const formatPostStatCount = useFormatPostStatCount()
|
||||||
|
const btnRef = useRef<View>(null)
|
||||||
|
|
||||||
const onPress = () => requireAuth(() => dialogControl.open())
|
const onPress = () => requireAuth(() => dialogControl.open())
|
||||||
|
|
||||||
@@ -56,6 +57,7 @@ let RepostButton = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PostControlButton
|
<PostControlButton
|
||||||
|
ref={btnRef}
|
||||||
testID="repostBtn"
|
testID="repostBtn"
|
||||||
active={isReposted}
|
active={isReposted}
|
||||||
activeColor={t.palette.positive_500}
|
activeColor={t.palette.positive_500}
|
||||||
@@ -94,7 +96,10 @@ let RepostButton = ({
|
|||||||
</PostControlButton>
|
</PostControlButton>
|
||||||
<Dialog.Outer
|
<Dialog.Outer
|
||||||
control={dialogControl}
|
control={dialogControl}
|
||||||
nativeOptions={{preventExpansion: true}}>
|
nativeOptions={{
|
||||||
|
preventExpansion: true,
|
||||||
|
sourceViewTag: findNodeHandle(btnRef.current) ?? undefined,
|
||||||
|
}}>
|
||||||
<Dialog.Handle />
|
<Dialog.Handle />
|
||||||
<RepostButtonDialogInner
|
<RepostButtonDialogInner
|
||||||
isReposted={isReposted}
|
isReposted={isReposted}
|
||||||
|
|||||||
@@ -262,7 +262,7 @@ let ProfileMenu = ({
|
|||||||
}}
|
}}
|
||||||
</Menu.Trigger>
|
</Menu.Trigger>
|
||||||
|
|
||||||
<Menu.Outer style={{minWidth: 170}}>
|
<Menu.Outer style={{minWidth: 170}} disableTransition>
|
||||||
<Menu.Group>
|
<Menu.Group>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
testID="profileHeaderDropdownShareBtn"
|
testID="profileHeaderDropdownShareBtn"
|
||||||
|
|||||||
Reference in New Issue
Block a user