sofio/RN_Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

template_0205

Browse Source
This commit is contained in:
Sofio
2026-02-05 13:16:05 +08:00
commit d93e4d9c9f
197 changed files with 52810 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoCard.tsx Normal file
View File

@@ -0,0 +1,180 @@
/* eslint-disable react/jsx-key, react-native/no-inline-styles */
import { AutoImage } from "@/components/AutoImage"
import { Button } from "@/components/Button"
import { Card } from "@/components/Card"
import { Icon } from "@/components/Icon"
import { s } from "@/utils/responsive"
import { DemoDivider } from "../DemoDivider"
import { Demo } from "./types"
import { DemoUseCase } from "../DemoUseCase"
export const DemoCard: Demo = {
name: "Card",
description: "demoCard:description",
data: ({ theme }) => [
<DemoUseCase
name="demoCard:useCase.presets.name"
description="demoCard:useCase.presets.description"
>
<Card
headingTx="demoCard:useCase.presets.default.heading"
contentTx="demoCard:useCase.presets.default.content"
footerTx="demoCard:useCase.presets.default.footer"
/>
<DemoDivider />
<Card
headingTx="demoCard:useCase.presets.reversed.heading"
contentTx="demoCard:useCase.presets.reversed.content"
footerTx="demoCard:useCase.presets.reversed.footer"
preset="reversed"
/>
</DemoUseCase>,
<DemoUseCase
name="demoCard:useCase.verticalAlignment.name"
description="demoCard:useCase.verticalAlignment.description"
>
<Card
headingTx="demoCard:useCase.verticalAlignment.top.heading"
contentTx="demoCard:useCase.verticalAlignment.top.content"
footerTx="demoCard:useCase.verticalAlignment.top.footer"
style={{ minHeight: s(160) }}
/>
<DemoDivider />
<Card
headingTx="demoCard:useCase.verticalAlignment.center.heading"
verticalAlignment="center"
preset="reversed"
contentTx="demoCard:useCase.verticalAlignment.center.content"
footerTx="demoCard:useCase.verticalAlignment.center.footer"
style={{ minHeight: s(160) }}
/>
<DemoDivider />
<Card
headingTx="demoCard:useCase.verticalAlignment.spaceBetween.heading"
verticalAlignment="space-between"
contentTx="demoCard:useCase.verticalAlignment.spaceBetween.content"
footerTx="demoCard:useCase.verticalAlignment.spaceBetween.footer"
style={{ minHeight: s(160) }}
/>
<DemoDivider />
<Card
preset="reversed"
headingTx="demoCard:useCase.verticalAlignment.reversed.heading"
verticalAlignment="force-footer-bottom"
contentTx="demoCard:useCase.verticalAlignment.reversed.content"
footerTx="demoCard:useCase.verticalAlignment.reversed.footer"
style={{ minHeight: s(160) }}
/>
</DemoUseCase>,
<DemoUseCase
name="demoCard:useCase.passingContent.name"
description="demoCard:useCase.passingContent.description"
>
<Card
headingTx="demoCard:useCase.passingContent.heading"
contentTx="demoCard:useCase.passingContent.content"
footerTx="demoCard:useCase.passingContent.footer"
/>
<DemoDivider />
<Card
preset="reversed"
headingTx="showroomScreen:demoViaSpecifiedTxProp"
headingTxOptions={{ prop: "heading" }}
contentTx="showroomScreen:demoViaSpecifiedTxProp"
contentTxOptions={{ prop: "content" }}
footerTx="showroomScreen:demoViaSpecifiedTxProp"
footerTxOptions={{ prop: "footer" }}
/>
</DemoUseCase>,
<DemoUseCase
name="demoCard:useCase.customComponent.name"
description="demoCard:useCase.customComponent.description"
>
<Card
HeadingComponent={
<Button
preset="reversed"
text="HeadingComponent"
LeftAccessory={(props) => <Icon containerStyle={props.style} icon="ladybug" />}
/>
}
ContentComponent={
<Button
style={{ marginVertical: theme.spacing.sm }}
text="ContentComponent"
LeftAccessory={(props) => <Icon containerStyle={props.style} icon="ladybug" />}
/>
}
FooterComponent={
<Button
preset="reversed"
text="FooterComponent"
LeftAccessory={(props) => <Icon containerStyle={props.style} icon="ladybug" />}
/>
}
/>
<DemoDivider />
<Card
headingTx="demoCard:useCase.customComponent.rightComponent"
verticalAlignment="center"
RightComponent={
<AutoImage
maxWidth={s(80)}
maxHeight={s(60)}
style={{ alignSelf: "center" }}
source={{
uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
}}
/>
}
/>
<DemoDivider />
<Card
preset="reversed"
headingTx="demoCard:useCase.customComponent.leftComponent"
verticalAlignment="center"
LeftComponent={
<AutoImage
maxWidth={s(80)}
maxHeight={s(60)}
style={{ alignSelf: "center" }}
source={{
uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
}}
/>
}
/>
</DemoUseCase>,
<DemoUseCase
name="demoCard:useCase.style.name"
description="demoCard:useCase.style.description"
>
<Card
headingTx="demoCard:useCase.style.heading"
headingStyle={{ color: theme.colors.error }}
contentTx="demoCard:useCase.style.content"
contentStyle={{
backgroundColor: theme.colors.error,
color: theme.colors.palette.neutral100,
}}
footerTx="demoCard:useCase.style.footer"
footerStyle={{
textDecorationLine: "underline line-through",
textDecorationStyle: "dashed",
color: theme.colors.error,
textDecorationColor: theme.colors.error,
}}
style={{
shadowRadius: s(5),
shadowColor: theme.colors.error,
shadowOpacity: 0.5,
}}
/>
</DemoUseCase>,
],
}