Samuel Newman
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import {type ReactNode} from 'react'
|
|
import {type StyleProp, type ViewStyle} from 'react-native'
|
|
import {useLingui} from '@lingui/react/macro'
|
|
|
|
import {shareImageModal} from '#/lib/media/manip'
|
|
import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
|
|
import {ArrowShareRight_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowShareRight'
|
|
import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
|
|
import * as PeekMenu from '#/components/PeekMenu'
|
|
import {IS_IOS} from '#/env'
|
|
|
|
/**
|
|
* Wraps an image embed with the iOS peek-and-menu interaction. On non-iOS
|
|
* platforms this renders children unchanged.
|
|
*
|
|
* The aspect ratio is consumed by the native side to size the preview
|
|
* viewController correctly — which is what makes the lift animation clean
|
|
* for portrait/panorama images.
|
|
*/
|
|
export function ImageContextMenu({
|
|
fullsizeUri,
|
|
thumbUri,
|
|
aspectRatio,
|
|
borderRadius,
|
|
onPreviewPress,
|
|
style,
|
|
children,
|
|
}: {
|
|
fullsizeUri: string
|
|
/** Thumbnail URL. Used as an instant placeholder in the native preview
|
|
* while the fullsize loads, so there's no black flash on first peek. */
|
|
thumbUri?: string
|
|
/** width / height; defaults to 1 if missing. */
|
|
aspectRatio: number | undefined
|
|
borderRadius?: number
|
|
onPreviewPress?: () => void
|
|
style?: StyleProp<ViewStyle>
|
|
children: ReactNode
|
|
}) {
|
|
const {t: l} = useLingui()
|
|
const saveImage = useSaveImageToMediaLibrary()
|
|
|
|
if (!IS_IOS) {
|
|
return children
|
|
}
|
|
|
|
const handleSave = () => {
|
|
void saveImage(fullsizeUri)
|
|
}
|
|
const handleShare = () => {
|
|
void shareImageModal({uri: fullsizeUri})
|
|
}
|
|
|
|
return (
|
|
<PeekMenu.Root style={style}>
|
|
<PeekMenu.Trigger
|
|
preview={{
|
|
type: 'image',
|
|
uri: fullsizeUri,
|
|
thumbUri,
|
|
aspectRatio: aspectRatio && aspectRatio > 0 ? aspectRatio : 1,
|
|
}}
|
|
borderRadius={borderRadius}
|
|
onPreviewPress={onPreviewPress}>
|
|
{children}
|
|
</PeekMenu.Trigger>
|
|
<PeekMenu.Menu>
|
|
<PeekMenu.MenuItem id="save" onSelect={handleSave}>
|
|
<PeekMenu.MenuItemIcon icon={DownloadIcon} />
|
|
<PeekMenu.MenuItemText>{l`Save image`}</PeekMenu.MenuItemText>
|
|
</PeekMenu.MenuItem>
|
|
<PeekMenu.MenuItem id="share" onSelect={handleShare}>
|
|
<PeekMenu.MenuItemIcon icon={ShareIcon} />
|
|
<PeekMenu.MenuItemText>{l`Share`}</PeekMenu.MenuItemText>
|
|
</PeekMenu.MenuItem>
|
|
</PeekMenu.Menu>
|
|
</PeekMenu.Root>
|
|
)
|
|
}
|