230 lines
51 KiB
TypeScript
230 lines
51 KiB
TypeScript
|
/* eslint-disable react/jsx-key, react-native/no-inline-styles */
|
||
|
|
import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native"
|
||
|
|
|
||
|
|
import { AutoImage } from "@/components/AutoImage"
|
||
|
|
import { Text } from "@/components/Text"
|
||
|
|
import { translate } from "@/i18n/translate"
|
||
|
|
import { $styles } from "@/theme/styles"
|
||
|
|
import type { ThemedStyle } from "@/theme/types"
|
||
|
|
import { s } from "@/utils/responsive"
|
||
|
|
|
||
|
|
import { DemoDivider } from "../DemoDivider"
|
||
|
|
import { Demo } from "./types"
|
||
|
|
import { DemoUseCase } from "../DemoUseCase"
|
||
|
|
|
||
|
|
const $imageContainer: ViewStyle = {
|
||
|
|
alignItems: "center",
|
||
|
|
}
|
||
|
|
|
||
|
|
const $aspectRatioDescription: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
||
|
|
textAlign: "center",
|
||
|
|
width: "100%",
|
||
|
|
marginTop: spacing.xs,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $aspectRatioWidthExampleContainer: ViewStyle = {
|
||
|
|
justifyContent: "space-between",
|
||
|
|
}
|
||
|
|
|
||
|
|
const $aspectRatioHeightExampleContainer: ViewStyle = {
|
||
|
|
alignItems: "stretch",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
height: s(130),
|
||
|
|
}
|
||
|
|
|
||
|
|
const $aspectRatioBox: ThemedStyle<ViewStyle & ImageStyle> = (theme) => ({
|
||
|
|
borderRadius: s(4),
|
||
|
|
borderWidth: 3,
|
||
|
|
borderColor: theme.colors.palette.secondary300,
|
||
|
|
backgroundColor: theme.colors.palette.neutral800,
|
||
|
|
})
|
||
|
|
|
||
|
|
export const DemoAutoImage: Demo = {
|
||
|
|
name: "AutoImage",
|
||
|
|
description: "demoAutoImage:description",
|
||
|
|
data: ({ theme, themed }) => [
|
||
|
|
<DemoUseCase name="demoAutoImage:useCase.remoteUri.name">
|
||
|
|
<View style={$imageContainer}>
|
||
|
|
<AutoImage
|
||
|
|
source={{
|
||
|
|
uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</DemoUseCase>,
|
||
|
|
|
||
|
|
<DemoUseCase name="demoAutoImage:useCase.base64Uri.name">
|
||
|
|
<View style={$imageContainer}>
|
||
|
|
<AutoImage
|
||
|
|
source={{
|
||
|
|
uri: `data:image/png;base64,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
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</DemoUseCase>,
|
||
|
|
|
||
|
|
<DemoUseCase
|
||
|
|
name="demoAutoImage:useCase.scaledToFitDimensions.name"
|
||
|
|
description="demoAutoImage:useCase.scaledToFitDimensions.description"
|
||
|
|
>
|
||
|
|
<View style={[$styles.row, $aspectRatioWidthExampleContainer]}>
|
||
|
|
<Text
|
||
|
|
text="<View />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{ flexBasis: "33.3333%", color: theme.colors.palette.secondary400 }}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
text="<Image />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{
|
||
|
|
flexBasis: "33.3333%",
|
||
|
|
textAlign: "center",
|
||
|
|
color: theme.colors.palette.secondary400,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
text="<AutoImage />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{
|
||
|
|
flexBasis: "33.3333%",
|
||
|
|
textAlign: "right",
|
||
|
|
color: theme.colors.palette.secondary400,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<DemoDivider size={5} />
|
||
|
|
|
||
|
|
<View style={[$styles.row, $aspectRatioWidthExampleContainer, { height: s(80) }]}>
|
||
|
|
<View style={themed([$aspectRatioBox, { width: s(60) }])} />
|
||
|
|
<Image
|
||
|
|
source={{
|
||
|
|
uri: "https://user-images.githubusercontent.com/1775841/188244137-a35ab1b9-658d-4701-b1dd-7caa51173fa9.png",
|
||
|
|
}}
|
||
|
|
style={themed([$aspectRatioBox, { width: s(60) }])}
|
||
|
|
resizeMode="contain"
|
||
|
|
/>
|
||
|
|
<AutoImage
|
||
|
|
maxWidth={60}
|
||
|
|
style={themed($aspectRatioBox)}
|
||
|
|
source={{
|
||
|
|
uri: "https://user-images.githubusercontent.com/1775841/188244137-a35ab1b9-658d-4701-b1dd-7caa51173fa9.png",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<Text weight="bold" size="xs" style={themed($aspectRatioDescription)}>
|
||
|
|
{translate("demoAutoImage:useCase.scaledToFitDimensions.heightAuto")}
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
<DemoDivider size={40} />
|
||
|
|
|
||
|
|
<View style={$styles.row}>
|
||
|
|
<View style={$aspectRatioHeightExampleContainer}>
|
||
|
|
<Text
|
||
|
|
text="<View />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{ color: theme.colors.palette.secondary400 }}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
text="<Image />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{ color: theme.colors.palette.secondary400 }}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
text="<AutoImage />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{ color: theme.colors.palette.secondary400 }}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View
|
||
|
|
style={[$aspectRatioHeightExampleContainer, { flex: 1, marginStart: theme.spacing.sm }]}
|
||
|
|
>
|
||
|
|
<View style={themed([$aspectRatioBox, { height: s(32) }])} />
|
||
|
|
<Image
|
||
|
|
source={{
|
||
|
|
uri: "https://user-images.githubusercontent.com/1775841/188244137-a35ab1b9-658d-4701-b1dd-7caa51173fa9.png",
|
||
|
|
}}
|
||
|
|
style={themed([$aspectRatioBox, { height: s(32) }])}
|
||
|
|
resizeMode="contain"
|
||
|
|
/>
|
||
|
|
<AutoImage
|
||
|
|
maxHeight={32}
|
||
|
|
style={themed([$aspectRatioBox, { alignSelf: "center" }])}
|
||
|
|
source={{
|
||
|
|
uri: "https://user-images.githubusercontent.com/1775841/188244137-a35ab1b9-658d-4701-b1dd-7caa51173fa9.png",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<Text weight="bold" size="xs" style={themed($aspectRatioDescription)}>
|
||
|
|
{translate("demoAutoImage:useCase.scaledToFitDimensions.widthAuto")}
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
<DemoDivider size={40} />
|
||
|
|
|
||
|
|
<View style={[$styles.row, $aspectRatioWidthExampleContainer]}>
|
||
|
|
<Text
|
||
|
|
text="<View />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{ flexBasis: "33.3333%", color: theme.colors.palette.secondary400 }}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
text="<Image />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{
|
||
|
|
flexBasis: "33.3333%",
|
||
|
|
textAlign: "center",
|
||
|
|
color: theme.colors.palette.secondary400,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
text="<AutoImage />"
|
||
|
|
size="xxs"
|
||
|
|
weight="bold"
|
||
|
|
style={{
|
||
|
|
flexBasis: "33.3333%",
|
||
|
|
textAlign: "right",
|
||
|
|
color: theme.colors.palette.secondary400,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<DemoDivider size={5} />
|
||
|
|
|
||
|
|
<View style={[$styles.row, $aspectRatioWidthExampleContainer]}>
|
||
|
|
<View style={themed([$aspectRatioBox, { width: s(60), height: s(60) }])} />
|
||
|
|
<Image
|
||
|
|
source={{
|
||
|
|
uri: "https://user-images.githubusercontent.com/1775841/188244137-a35ab1b9-658d-4701-b1dd-7caa51173fa9.png",
|
||
|
|
}}
|
||
|
|
style={themed([$aspectRatioBox, { width: s(60), height: s(60) }])}
|
||
|
|
resizeMode="contain"
|
||
|
|
/>
|
||
|
|
<AutoImage
|
||
|
|
maxWidth={60}
|
||
|
|
maxHeight={60}
|
||
|
|
style={themed($aspectRatioBox)}
|
||
|
|
source={{
|
||
|
|
uri: "https://user-images.githubusercontent.com/1775841/188244137-a35ab1b9-658d-4701-b1dd-7caa51173fa9.png",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<Text weight="bold" size="xs" style={themed($aspectRatioDescription)}>
|
||
|
|
{translate("demoAutoImage:useCase.scaledToFitDimensions.bothManual")}
|
||
|
|
</Text>
|
||
|
|
</DemoUseCase>,
|
||
|
|
],
|
||
|
|
}
|