Use explicit values when useImageAspectRatio doesn't know

It's not very good that you can't distingiush when we haven't loaded vs when we're certain. This shifts the burden of dealing with missing values to the caller.
This commit is contained in:
Dan Abramov
2024-11-01 01:36:01 +00:00
parent c4c01955cc
commit 9b076032cc
+15 -8
View File
@@ -21,14 +21,19 @@ export function useImageAspectRatio({
src: string src: string
dimensions: Dimensions | undefined dimensions: Dimensions | undefined
}) { }) {
const [raw, setAspectRatio] = React.useState<number>( const [raw, setAspectRatio] = React.useState(
dimensions ? calc(dimensions) : 1, dimensions ? calc(dimensions) : undefined,
) )
const ratio = 1 / 2 // max of 1:2 ratio in feeds let constrained: number | undefined
const constrained = Math.max(raw, ratio) let max: number | undefined
const max = Math.max(raw, 0.25) // max of 1:4 in thread let isCropped: boolean | undefined
const isCropped = raw < constrained if (raw !== undefined) {
const ratio = 1 / 2 // max of 1:2 ratio in feeds
constrained = Math.max(raw, ratio)
max = Math.max(raw, 0.25) // max of 1:4 in thread
isCropped = raw < constrained
}
React.useEffect(() => { React.useEffect(() => {
let aborted = false let aborted = false
@@ -215,14 +220,16 @@ export function AutoSizedImage({
a.rounded_md, a.rounded_md,
a.overflow_hidden, a.overflow_hidden,
t.atoms.bg_contrast_25, t.atoms.bg_contrast_25,
{aspectRatio: max}, {aspectRatio: max ?? 1},
]}> ]}>
{contents} {contents}
</Pressable> </Pressable>
) )
} else { } else {
return ( return (
<ConstrainedImage fullBleed={crop === 'square'} aspectRatio={constrained}> <ConstrainedImage
fullBleed={crop === 'square'}
aspectRatio={constrained ?? 1}>
<Pressable <Pressable
onPress={onPress} onPress={onPress}
onLongPress={onLongPress} onLongPress={onLongPress}