Add zoom transition to image alt text dialog
Use the gallery item view as the source for the zoom transition, with a callback ref to resolve the view tag after mount. https://claude.ai/code/session_011cNDhEb2cDgg5QbVuzEyH1
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import React from 'react'
|
import React, {useState} from 'react'
|
||||||
import {
|
import {
|
||||||
|
findNodeHandle,
|
||||||
type ImageStyle,
|
type ImageStyle,
|
||||||
Keyboard,
|
|
||||||
type LayoutChangeEvent,
|
type LayoutChangeEvent,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
@@ -144,6 +144,14 @@ const GalleryItem = ({
|
|||||||
|
|
||||||
const altTextControl = Dialog.useDialogControl()
|
const altTextControl = Dialog.useDialogControl()
|
||||||
const editControl = Dialog.useDialogControl()
|
const editControl = Dialog.useDialogControl()
|
||||||
|
const [altBtnViewTag, setAltBtnViewTag] = useState<number>()
|
||||||
|
|
||||||
|
const altBtnRef = (node: View | null) => {
|
||||||
|
if (node) {
|
||||||
|
const tag = findNodeHandle(node)
|
||||||
|
if (tag != null) setAltBtnViewTag(tag)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const onImageEdit = () => {
|
const onImageEdit = () => {
|
||||||
if (IS_NATIVE) {
|
if (IS_NATIVE) {
|
||||||
@@ -156,12 +164,12 @@ const GalleryItem = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onAltTextEdit = () => {
|
const onAltTextEdit = () => {
|
||||||
Keyboard.dismiss()
|
|
||||||
altTextControl.open()
|
altTextControl.open()
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
|
ref={altBtnRef}
|
||||||
style={imageStyle as ViewStyle}
|
style={imageStyle as ViewStyle}
|
||||||
// Fixes ALT and icons appearing with half opacity when the post is inactive
|
// Fixes ALT and icons appearing with half opacity when the post is inactive
|
||||||
renderToHardwareTextureAndroid>
|
renderToHardwareTextureAndroid>
|
||||||
@@ -240,6 +248,7 @@ const GalleryItem = ({
|
|||||||
control={altTextControl}
|
control={altTextControl}
|
||||||
image={image}
|
image={image}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
|
sourceViewTag={altBtnViewTag}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<EditImageDialog
|
<EditImageDialog
|
||||||
|
|||||||
@@ -23,12 +23,14 @@ type Props = {
|
|||||||
control: Dialog.DialogOuterProps['control']
|
control: Dialog.DialogOuterProps['control']
|
||||||
image: ComposerImage
|
image: ComposerImage
|
||||||
onChange: (next: ComposerImage) => void
|
onChange: (next: ComposerImage) => void
|
||||||
|
sourceViewTag?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ImageAltTextDialog = ({
|
export const ImageAltTextDialog = ({
|
||||||
control,
|
control,
|
||||||
image,
|
image,
|
||||||
onChange,
|
onChange,
|
||||||
|
sourceViewTag,
|
||||||
}: Props): React.ReactNode => {
|
}: Props): React.ReactNode => {
|
||||||
const {height: minHeight} = useWindowDimensions()
|
const {height: minHeight} = useWindowDimensions()
|
||||||
const [altText, setAltText] = useState(image.alt)
|
const [altText, setAltText] = useState(image.alt)
|
||||||
@@ -42,7 +44,7 @@ export const ImageAltTextDialog = ({
|
|||||||
alt: enforceLen(altText, MAX_ALT_TEXT, true),
|
alt: enforceLen(altText, MAX_ALT_TEXT, true),
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
nativeOptions={{minHeight}}>
|
nativeOptions={{minHeight, sourceViewTag}}>
|
||||||
<Dialog.Handle />
|
<Dialog.Handle />
|
||||||
<ImageAltTextInner
|
<ImageAltTextInner
|
||||||
control={control}
|
control={control}
|
||||||
|
|||||||
Reference in New Issue
Block a user