template_0205
This commit is contained in:
Sofio
229
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoAutoImage.tsx
Normal file
229
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoAutoImage.tsx
Normal file
File diff suppressed because one or more lines are too long
226
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoButton.tsx
Normal file
226
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoButton.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
/* eslint-disable react/jsx-key */
|
||||
import { TextStyle, View, ViewStyle } from "react-native"
|
||||
|
||||
import { Button } from "@/components/Button"
|
||||
import { Icon } from "@/components/Icon"
|
||||
import { Text } from "@/components/Text"
|
||||
import { translate } from "@/i18n/translate"
|
||||
import type { ThemedStyle } from "@/theme/types"
|
||||
|
||||
import { DemoDivider } from "../DemoDivider"
|
||||
import { Demo } from "./types"
|
||||
import { DemoUseCase } from "../DemoUseCase"
|
||||
|
||||
const ICON_SIZE = 24
|
||||
const $customButtonStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
height: 100,
|
||||
})
|
||||
const $customButtonPressedStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
})
|
||||
const $customButtonTextStyle: ThemedStyle<TextStyle> = ({ colors, typography }) => ({
|
||||
color: colors.error,
|
||||
fontFamily: typography.primary.bold,
|
||||
textDecorationLine: "underline",
|
||||
textDecorationColor: colors.error,
|
||||
})
|
||||
const $customButtonPressedTextStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||||
color: colors.palette.neutral100,
|
||||
})
|
||||
const $customButtonRightAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
width: "53%",
|
||||
height: "200%",
|
||||
backgroundColor: colors.error,
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
})
|
||||
const $disabledOpacity: ViewStyle = { opacity: 0.5 }
|
||||
const $disabledButtonTextStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||||
color: colors.palette.neutral100,
|
||||
textDecorationColor: colors.palette.neutral100,
|
||||
})
|
||||
|
||||
export const DemoButton: Demo = {
|
||||
name: "Button",
|
||||
description: "demoButton:description",
|
||||
data: ({ themed, theme }) => [
|
||||
<DemoUseCase
|
||||
name="demoButton:useCase.presets.name"
|
||||
description="demoButton:useCase.presets.description"
|
||||
>
|
||||
<Button>Default - Laboris In Labore</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button preset="filled">Filled - Laboris Ex</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button preset="reversed">Reversed - Ad Ipsum</Button>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoButton:useCase.passingContent.name"
|
||||
description="demoButton:useCase.passingContent.description"
|
||||
>
|
||||
<Button text={translate("demoButton:useCase.passingContent.viaTextProps")} />
|
||||
<DemoDivider />
|
||||
|
||||
<Button tx="showroomScreen:demoViaTxProp" />
|
||||
<DemoDivider />
|
||||
|
||||
<Button>{translate("demoButton:useCase.passingContent.children")}</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
preset="filled"
|
||||
RightAccessory={(props) => (
|
||||
<Icon containerStyle={props.style} size={ICON_SIZE} icon="ladybug" />
|
||||
)}
|
||||
>
|
||||
{translate("demoButton:useCase.passingContent.rightAccessory")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
preset="filled"
|
||||
LeftAccessory={(props) => (
|
||||
<Icon containerStyle={props.style} size={ICON_SIZE} icon="ladybug" />
|
||||
)}
|
||||
>
|
||||
{translate("demoButton:useCase.passingContent.leftAccessory")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button>
|
||||
<Text>
|
||||
<Text preset="bold">{translate("demoButton:useCase.passingContent.nestedChildren")}</Text>
|
||||
{` `}
|
||||
<Text preset="default">
|
||||
{translate("demoButton:useCase.passingContent.nestedChildren2")}
|
||||
</Text>
|
||||
{` `}
|
||||
<Text preset="bold">
|
||||
{translate("demoButton:useCase.passingContent.nestedChildren3")}
|
||||
</Text>
|
||||
</Text>
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
preset="reversed"
|
||||
RightAccessory={(props) => (
|
||||
<Icon containerStyle={props.style} size={ICON_SIZE} icon="ladybug" />
|
||||
)}
|
||||
LeftAccessory={(props) => (
|
||||
<Icon containerStyle={props.style} size={ICON_SIZE} icon="ladybug" />
|
||||
)}
|
||||
>
|
||||
{translate("demoButton:useCase.passingContent.multiLine")}
|
||||
</Button>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoButton:useCase.styling.name"
|
||||
description="demoButton:useCase.styling.description"
|
||||
>
|
||||
<Button style={themed($customButtonStyle)}>
|
||||
{translate("demoButton:useCase.styling.styleContainer")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button preset="filled" textStyle={themed($customButtonTextStyle)}>
|
||||
{translate("demoButton:useCase.styling.styleText")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
preset="reversed"
|
||||
RightAccessory={() => <View style={themed($customButtonRightAccessoryStyle)} />}
|
||||
>
|
||||
{translate("demoButton:useCase.styling.styleAccessories")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
pressedStyle={themed($customButtonPressedStyle)}
|
||||
pressedTextStyle={themed($customButtonPressedTextStyle)}
|
||||
RightAccessory={(props) => (
|
||||
<Icon
|
||||
containerStyle={props.style}
|
||||
size={ICON_SIZE}
|
||||
color={props.pressableState.pressed ? theme.colors.palette.neutral100 : undefined}
|
||||
icon="ladybug"
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{translate("demoButton:useCase.styling.pressedState")}
|
||||
</Button>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoButton:useCase.disabling.name"
|
||||
description="demoButton:useCase.disabling.description"
|
||||
>
|
||||
<Button
|
||||
disabled
|
||||
disabledStyle={$disabledOpacity}
|
||||
pressedStyle={themed($customButtonPressedStyle)}
|
||||
pressedTextStyle={themed($customButtonPressedTextStyle)}
|
||||
>
|
||||
{translate("demoButton:useCase.disabling.standard")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
disabled
|
||||
preset="filled"
|
||||
disabledStyle={$disabledOpacity}
|
||||
pressedStyle={themed($customButtonPressedStyle)}
|
||||
pressedTextStyle={themed($customButtonPressedTextStyle)}
|
||||
>
|
||||
{translate("demoButton:useCase.disabling.filled")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
disabled
|
||||
preset="reversed"
|
||||
disabledStyle={$disabledOpacity}
|
||||
pressedStyle={themed($customButtonPressedStyle)}
|
||||
pressedTextStyle={themed($customButtonPressedTextStyle)}
|
||||
>
|
||||
{translate("demoButton:useCase.disabling.reversed")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
disabled
|
||||
pressedStyle={themed($customButtonPressedStyle)}
|
||||
pressedTextStyle={themed($customButtonPressedTextStyle)}
|
||||
RightAccessory={(props) => (
|
||||
<View
|
||||
style={
|
||||
props.disabled
|
||||
? [themed($customButtonRightAccessoryStyle), $disabledOpacity]
|
||||
: themed($customButtonRightAccessoryStyle)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
{translate("demoButton:useCase.disabling.accessory")}
|
||||
</Button>
|
||||
<DemoDivider />
|
||||
|
||||
<Button
|
||||
disabled
|
||||
preset="filled"
|
||||
disabledTextStyle={themed([$customButtonTextStyle, $disabledButtonTextStyle])}
|
||||
pressedStyle={themed($customButtonPressedStyle)}
|
||||
pressedTextStyle={themed($customButtonPressedTextStyle)}
|
||||
>
|
||||
{translate("demoButton:useCase.disabling.textStyle")}
|
||||
</Button>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
180
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoCard.tsx
Normal file
180
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoCard.tsx
Normal 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>,
|
||||
],
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* eslint-disable react/jsx-key, react-native/no-inline-styles */
|
||||
import { EmptyState } from "@/components/EmptyState"
|
||||
import { s } from "@/utils/responsive"
|
||||
|
||||
import { DemoDivider } from "../DemoDivider"
|
||||
import { Demo } from "./types"
|
||||
import { DemoUseCase } from "../DemoUseCase"
|
||||
|
||||
export const DemoEmptyState: Demo = {
|
||||
name: "EmptyState",
|
||||
description: "demoEmptyState:description",
|
||||
data: ({ theme }) => [
|
||||
<DemoUseCase
|
||||
name="demoEmptyState:useCase.presets.name"
|
||||
description="demoEmptyState:useCase.presets.description"
|
||||
>
|
||||
<EmptyState preset="generic" />
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoEmptyState:useCase.passingContent.name"
|
||||
description="demoEmptyState:useCase.passingContent.description"
|
||||
>
|
||||
<EmptyState
|
||||
imageSource={require("@assets/images/logo.png")}
|
||||
headingTx="demoEmptyState:useCase.passingContent.customizeImageHeading"
|
||||
contentTx="demoEmptyState:useCase.passingContent.customizeImageContent"
|
||||
/>
|
||||
|
||||
<DemoDivider size={30} line />
|
||||
|
||||
<EmptyState
|
||||
headingTx="demoEmptyState:useCase.passingContent.viaHeadingProp"
|
||||
contentTx="demoEmptyState:useCase.passingContent.viaContentProp"
|
||||
buttonTx="demoEmptyState:useCase.passingContent.viaButtonProp"
|
||||
/>
|
||||
|
||||
<DemoDivider size={30} line />
|
||||
|
||||
<EmptyState
|
||||
headingTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
headingTxOptions={{ prop: "heading" }}
|
||||
contentTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
contentTxOptions={{ prop: "content" }}
|
||||
buttonTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
buttonTxOptions={{ prop: "button" }}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoEmptyState:useCase.styling.name"
|
||||
description="demoEmptyState:useCase.styling.description"
|
||||
>
|
||||
<EmptyState
|
||||
preset="generic"
|
||||
style={{ backgroundColor: theme.colors.error, paddingVertical: s(20) }}
|
||||
imageStyle={{ height: s(75), tintColor: theme.colors.palette.neutral100 }}
|
||||
ImageProps={{ resizeMode: "contain" }}
|
||||
headingStyle={{
|
||||
color: theme.colors.palette.neutral100,
|
||||
textDecorationLine: "underline",
|
||||
textDecorationColor: theme.colors.palette.neutral100,
|
||||
}}
|
||||
contentStyle={{
|
||||
color: theme.colors.palette.neutral100,
|
||||
textDecorationLine: "underline",
|
||||
textDecorationColor: theme.colors.palette.neutral100,
|
||||
}}
|
||||
buttonStyle={{ alignSelf: "center", backgroundColor: theme.colors.palette.neutral100 }}
|
||||
buttonTextStyle={{ color: theme.colors.error }}
|
||||
ButtonProps={{
|
||||
preset: "reversed",
|
||||
}}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
150
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoHeader.tsx
Normal file
150
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoHeader.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
/* eslint-disable react/jsx-key, react-native/no-inline-styles */
|
||||
import { TextStyle, View, ViewStyle } from "react-native"
|
||||
|
||||
import { Header } from "@/components/Header"
|
||||
import { Icon } from "@/components/Icon"
|
||||
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 $rightAlignTitle: TextStyle = {
|
||||
textAlign: "right",
|
||||
}
|
||||
|
||||
const $customLeftAction: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
flexGrow: 0,
|
||||
flexBasis: s(100),
|
||||
height: "100%",
|
||||
flexWrap: "wrap",
|
||||
overflow: "hidden",
|
||||
})
|
||||
|
||||
const $customTitle: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||||
textDecorationLine: "underline line-through",
|
||||
textDecorationStyle: "dashed",
|
||||
color: colors.error,
|
||||
textDecorationColor: colors.error,
|
||||
})
|
||||
|
||||
const $customWhiteTitle: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||||
color: colors.palette.neutral100,
|
||||
})
|
||||
|
||||
export const DemoHeader: Demo = {
|
||||
name: "Header",
|
||||
description: "demoHeader:description",
|
||||
data: ({ theme, themed }) => [
|
||||
<DemoUseCase
|
||||
name="demoHeader:useCase.actionIcons.name"
|
||||
description="demoHeader:useCase.actionIcons.description"
|
||||
>
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.actionIcons.leftIconTitle"
|
||||
leftIcon="ladybug"
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.actionIcons.rightIconTitle"
|
||||
rightIcon="ladybug"
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.actionIcons.bothIconsTitle"
|
||||
leftIcon="ladybug"
|
||||
rightIcon="ladybug"
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoHeader:useCase.actionText.name"
|
||||
description="demoHeader:useCase.actionText.description"
|
||||
>
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.actionText.leftTxTitle"
|
||||
leftTx="showroomScreen:demoHeaderTxExample"
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.actionText.rightTextTitle"
|
||||
rightText="Yay"
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoHeader:useCase.customActionComponents.name"
|
||||
description="demoHeader:useCase.customActionComponents.description"
|
||||
>
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.customActionComponents.customLeftActionTitle"
|
||||
titleMode="flex"
|
||||
titleStyle={$rightAlignTitle}
|
||||
LeftActionComponent={
|
||||
<View style={themed([$styles.row, $customLeftAction])}>
|
||||
{Array.from({ length: 20 }, (x, i) => i).map((i) => (
|
||||
<Icon key={i} icon="ladybug" color={theme.colors.palette.neutral100} size={s(20)} />
|
||||
))}
|
||||
</View>
|
||||
}
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoHeader:useCase.titleModes.name"
|
||||
description="demoHeader:useCase.titleModes.description"
|
||||
>
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.titleModes.centeredTitle"
|
||||
leftIcon="ladybug"
|
||||
rightText="Hooray"
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.titleModes.flexTitle"
|
||||
titleMode="flex"
|
||||
leftIcon="ladybug"
|
||||
rightText="Hooray"
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoHeader:useCase.styling.name"
|
||||
description="demoHeader:useCase.styling.description"
|
||||
>
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.styling.styledTitle"
|
||||
titleStyle={themed($customTitle)}
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.styling.styledWrapperTitle"
|
||||
titleStyle={themed($customWhiteTitle)}
|
||||
backgroundColor={theme.colors.error}
|
||||
style={{ height: s(35) }}
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<Header
|
||||
titleTx="demoHeader:useCase.styling.tintedIconsTitle"
|
||||
titleStyle={themed($customWhiteTitle)}
|
||||
backgroundColor={theme.colors.error}
|
||||
leftIcon="ladybug"
|
||||
leftIconColor={theme.colors.palette.neutral100}
|
||||
safeAreaEdges={[]}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
109
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoIcon.tsx
Normal file
109
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoIcon.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
/* eslint-disable react/jsx-key */
|
||||
import { TextStyle, View, ViewStyle } from "react-native"
|
||||
|
||||
import { Icon, iconRegistry, type IconTypes } from "@/components/Icon"
|
||||
import { Text } from "@/components/Text"
|
||||
import { $styles } from "@/theme/styles"
|
||||
import type { ThemedStyle } from "@/theme/types"
|
||||
|
||||
import { Demo } from "./types"
|
||||
import { DemoUseCase } from "../DemoUseCase"
|
||||
|
||||
const $demoIconContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||||
padding: spacing.xs,
|
||||
})
|
||||
|
||||
const $iconTile: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||||
width: "33.333%",
|
||||
alignItems: "center",
|
||||
paddingVertical: spacing.xs,
|
||||
})
|
||||
|
||||
const $iconTileLabel: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
|
||||
marginTop: spacing.xxs,
|
||||
color: colors.textDim,
|
||||
})
|
||||
|
||||
const $customIconContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
|
||||
padding: spacing.md,
|
||||
backgroundColor: colors.palette.angry500,
|
||||
})
|
||||
|
||||
export const DemoIcon: Demo = {
|
||||
name: "Icon",
|
||||
description: "demoIcon:description",
|
||||
data: ({ theme, themed }) => [
|
||||
<DemoUseCase
|
||||
name="demoIcon:useCase.icons.name"
|
||||
description="demoIcon:useCase.icons.description"
|
||||
layout="row"
|
||||
itemStyle={$styles.flexWrap}
|
||||
>
|
||||
{Object.keys(iconRegistry).map((icon) => (
|
||||
<View key={icon} style={themed($iconTile)}>
|
||||
<Icon icon={icon as IconTypes} color={theme.colors.tint} size={35} />
|
||||
|
||||
<Text size="xs" style={themed($iconTileLabel)}>
|
||||
{icon}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoIcon:useCase.size.name"
|
||||
description="demoIcon:useCase.size.description"
|
||||
layout="row"
|
||||
>
|
||||
<Icon icon="ladybug" containerStyle={themed($demoIconContainer)} />
|
||||
<Icon icon="ladybug" size={35} containerStyle={themed($demoIconContainer)} />
|
||||
<Icon icon="ladybug" size={50} containerStyle={themed($demoIconContainer)} />
|
||||
<Icon icon="ladybug" size={75} containerStyle={themed($demoIconContainer)} />
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoIcon:useCase.color.name"
|
||||
description="demoIcon:useCase.color.description"
|
||||
layout="row"
|
||||
>
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
color={theme.colors.palette.accent500}
|
||||
containerStyle={themed($demoIconContainer)}
|
||||
/>
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
color={theme.colors.palette.primary500}
|
||||
containerStyle={themed($demoIconContainer)}
|
||||
/>
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
color={theme.colors.palette.secondary500}
|
||||
containerStyle={themed($demoIconContainer)}
|
||||
/>
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
color={theme.colors.palette.neutral700}
|
||||
containerStyle={themed($demoIconContainer)}
|
||||
/>
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
color={theme.colors.palette.angry500}
|
||||
containerStyle={themed($demoIconContainer)}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoIcon:useCase.styling.name"
|
||||
description="demoIcon:useCase.styling.description"
|
||||
layout="row"
|
||||
>
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
color={theme.colors.palette.neutral100}
|
||||
size={40}
|
||||
containerStyle={themed($customIconContainer)}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
217
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoListItem.tsx
Normal file
217
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoListItem.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
/* eslint-disable react/jsx-key */
|
||||
import { TextStyle, View, ViewStyle } from "react-native"
|
||||
import { FlatList } from "react-native-gesture-handler"
|
||||
|
||||
import { Icon } from "@/components/Icon"
|
||||
import { ListItem } from "@/components/ListItem"
|
||||
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 listData =
|
||||
`Tempor Id Ea Aliqua Pariatur Aliquip. Irure Minim Voluptate Consectetur Consequat Sint Esse Proident Irure. Nostrud Elit Veniam Nostrud Excepteur Minim Deserunt Quis Dolore Velit Nulla Irure Voluptate Tempor. Occaecat Amet Laboris Nostrud Qui Do Quis Lorem Ex Elit Fugiat Deserunt. In Pariatur Excepteur Exercitation Ex Incididunt Qui Mollit Dolor Sit Non. Culpa Officia Minim Cillum Exercitation Voluptate Proident Laboris Et Est Reprehenderit Quis Pariatur Nisi`
|
||||
.split(".")
|
||||
.map((item) => item.trim())
|
||||
|
||||
const $customLeft: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
flexGrow: 0,
|
||||
flexBasis: s(60),
|
||||
height: "100%",
|
||||
flexWrap: "wrap",
|
||||
overflow: "hidden",
|
||||
})
|
||||
|
||||
const $customTextStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||||
color: colors.error,
|
||||
})
|
||||
|
||||
const $customTouchableStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
})
|
||||
|
||||
const $customContainerStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
borderTopWidth: 5,
|
||||
borderTopColor: colors.palette.neutral100,
|
||||
})
|
||||
|
||||
const $listStyle: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
|
||||
height: s(148),
|
||||
paddingHorizontal: spacing.xs,
|
||||
backgroundColor: colors.palette.neutral200,
|
||||
})
|
||||
|
||||
export const DemoListItem: Demo = {
|
||||
name: "ListItem",
|
||||
description: "demoListItem:description",
|
||||
data: ({ theme, themed }) => [
|
||||
<DemoUseCase
|
||||
name="demoListItem:useCase.height.name"
|
||||
description="demoListItem:useCase.height.description"
|
||||
>
|
||||
<ListItem topSeparator>{translate("demoListItem:useCase.height.defaultHeight")}</ListItem>
|
||||
|
||||
<ListItem topSeparator height={s(100)}>
|
||||
{translate("demoListItem:useCase.height.customHeight")}
|
||||
</ListItem>
|
||||
|
||||
<ListItem topSeparator>{translate("demoListItem:useCase.height.textHeight")}</ListItem>
|
||||
|
||||
<ListItem topSeparator bottomSeparator TextProps={{ numberOfLines: 1 }}>
|
||||
{translate("demoListItem:useCase.height.longText")}
|
||||
</ListItem>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoListItem:useCase.separators.name"
|
||||
description="demoListItem:useCase.separators.description"
|
||||
>
|
||||
<ListItem topSeparator>{translate("demoListItem:useCase.separators.topSeparator")}</ListItem>
|
||||
|
||||
<DemoDivider size={40} />
|
||||
|
||||
<ListItem topSeparator bottomSeparator>
|
||||
{translate("demoListItem:useCase.separators.topAndBottomSeparator")}
|
||||
</ListItem>
|
||||
|
||||
<DemoDivider size={40} />
|
||||
|
||||
<ListItem bottomSeparator>
|
||||
{translate("demoListItem:useCase.separators.bottomSeparator")}
|
||||
</ListItem>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoListItem:useCase.icons.name"
|
||||
description="demoListItem:useCase.icons.description"
|
||||
>
|
||||
<ListItem topSeparator leftIcon="ladybug">
|
||||
{translate("demoListItem:useCase.icons.leftIcon")}
|
||||
</ListItem>
|
||||
|
||||
<ListItem topSeparator rightIcon="ladybug">
|
||||
{translate("demoListItem:useCase.icons.rightIcon")}
|
||||
</ListItem>
|
||||
|
||||
<ListItem topSeparator bottomSeparator rightIcon="ladybug" leftIcon="ladybug">
|
||||
{translate("demoListItem:useCase.icons.leftRightIcons")}
|
||||
</ListItem>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoListItem:useCase.customLeftRight.name"
|
||||
description="demoListItem:useCase.customLeftRight.description"
|
||||
>
|
||||
<ListItem
|
||||
topSeparator
|
||||
LeftComponent={
|
||||
<View style={themed([$styles.row, $customLeft, { marginEnd: theme.spacing.md }])}>
|
||||
{Array.from({ length: 9 }, (x, i) => i).map((i) => (
|
||||
<Icon key={i} icon="ladybug" color={theme.colors.palette.neutral100} size={s(20)} />
|
||||
))}
|
||||
</View>
|
||||
}
|
||||
>
|
||||
{translate("demoListItem:useCase.customLeftRight.customLeft")}
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
topSeparator
|
||||
bottomSeparator
|
||||
RightComponent={
|
||||
<View style={themed([$styles.row, $customLeft, { marginStart: theme.spacing.md }])}>
|
||||
{Array.from({ length: 9 }, (x, i) => i).map((i) => (
|
||||
<Icon key={i} icon="ladybug" color={theme.colors.palette.neutral100} size={s(20)} />
|
||||
))}
|
||||
</View>
|
||||
}
|
||||
>
|
||||
{translate("demoListItem:useCase.customLeftRight.customRight")}
|
||||
</ListItem>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoListItem:useCase.passingContent.name"
|
||||
description="demoListItem:useCase.passingContent.description"
|
||||
>
|
||||
<ListItem topSeparator text={translate("demoListItem:useCase.passingContent.children")} />
|
||||
<ListItem topSeparator tx="showroomScreen:demoViaTxProp" />
|
||||
<ListItem topSeparator>{translate("demoListItem:useCase.passingContent.children")}</ListItem>
|
||||
<ListItem topSeparator bottomSeparator>
|
||||
<Text>
|
||||
<Text preset="bold">
|
||||
{translate("demoListItem:useCase.passingContent.nestedChildren1")}
|
||||
</Text>
|
||||
{` `}
|
||||
<Text preset="default">
|
||||
{translate("demoListItem:useCase.passingContent.nestedChildren2")}
|
||||
</Text>
|
||||
</Text>
|
||||
</ListItem>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoListItem:useCase.listIntegration.name"
|
||||
description="demoListItem:useCase.listIntegration.description"
|
||||
>
|
||||
<View style={themed($listStyle)}>
|
||||
<FlatList<string>
|
||||
data={listData}
|
||||
keyExtractor={(item, index) => `${item}-${index}`}
|
||||
renderItem={({ item, index }) => (
|
||||
<ListItem
|
||||
text={item}
|
||||
rightIcon="caretRight"
|
||||
TextProps={{ numberOfLines: 1 }}
|
||||
topSeparator={index !== 0}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoListItem:useCase.styling.name"
|
||||
description="demoListItem:useCase.styling.description"
|
||||
>
|
||||
<ListItem topSeparator textStyle={themed($customTextStyle)}>
|
||||
{translate("demoListItem:useCase.styling.styledText")}
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
topSeparator
|
||||
textStyle={{ color: theme.colors.palette.neutral100 }}
|
||||
style={themed($customTouchableStyle)}
|
||||
>
|
||||
{translate("demoListItem:useCase.styling.styledText")}
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
topSeparator
|
||||
textStyle={{ color: theme.colors.palette.neutral100 }}
|
||||
style={themed($customTouchableStyle)}
|
||||
containerStyle={themed($customContainerStyle)}
|
||||
>
|
||||
{translate("demoListItem:useCase.styling.styledContainer")}
|
||||
</ListItem>
|
||||
<ListItem
|
||||
topSeparator
|
||||
textStyle={{ color: theme.colors.palette.neutral100 }}
|
||||
style={themed($customTouchableStyle)}
|
||||
containerStyle={themed($customContainerStyle)}
|
||||
rightIcon="ladybug"
|
||||
leftIcon="ladybug"
|
||||
rightIconColor={theme.colors.palette.neutral100}
|
||||
leftIconColor={theme.colors.palette.neutral100}
|
||||
>
|
||||
{translate("demoListItem:useCase.styling.tintedIcons")}
|
||||
</ListItem>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
142
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoText.tsx
Normal file
142
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoText.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
/* eslint-disable react/jsx-key, react-native/no-inline-styles */
|
||||
import { Text } from "@/components/Text"
|
||||
import { translate } from "@/i18n/translate"
|
||||
|
||||
import { DemoDivider } from "../DemoDivider"
|
||||
import { Demo } from "./types"
|
||||
import { DemoUseCase } from "../DemoUseCase"
|
||||
|
||||
export const DemoText: Demo = {
|
||||
name: "Text",
|
||||
description: "demoText:description",
|
||||
data: ({ theme }) => [
|
||||
<DemoUseCase
|
||||
name="demoText:useCase.presets.name"
|
||||
description="demoText:useCase.presets.description"
|
||||
>
|
||||
<Text>{translate("demoText:useCase.presets.default")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text preset="bold">{translate("demoText:useCase.presets.bold")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text preset="subheading">{translate("demoText:useCase.presets.subheading")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text preset="heading">{translate("demoText:useCase.presets.heading")}</Text>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoText:useCase.sizes.name"
|
||||
description="demoText:useCase.sizes.description"
|
||||
>
|
||||
<Text size="xs">{translate("demoText:useCase.sizes.xs")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text size="sm">{translate("demoText:useCase.sizes.sm")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text size="md">{translate("demoText:useCase.sizes.md")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text size="lg">{translate("demoText:useCase.sizes.lg")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text size="xl">{translate("demoText:useCase.sizes.xl")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text size="xxl">{translate("demoText:useCase.sizes.xxl")}</Text>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoText:useCase.weights.name"
|
||||
description="demoText:useCase.weights.description"
|
||||
>
|
||||
<Text weight="light">{translate("demoText:useCase.weights.light")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text weight="normal">{translate("demoText:useCase.weights.normal")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text weight="medium">{translate("demoText:useCase.weights.medium")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text weight="semiBold">{translate("demoText:useCase.weights.semibold")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text weight="bold">{translate("demoText:useCase.weights.bold")}</Text>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoText:useCase.passingContent.name"
|
||||
description="demoText:useCase.passingContent.description"
|
||||
>
|
||||
<Text text={translate("demoText:useCase.passingContent.viaText")} />
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text>
|
||||
<Text tx="demoText:useCase.passingContent.viaTx" />
|
||||
<Text tx="showroomScreen:lorem2Sentences" />
|
||||
</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text>{translate("demoText:useCase.passingContent.children")}</Text>
|
||||
|
||||
<DemoDivider />
|
||||
|
||||
<Text>
|
||||
<Text>{translate("demoText:useCase.passingContent.nestedChildren")}</Text>
|
||||
<Text preset="bold">{translate("demoText:useCase.passingContent.nestedChildren2")}</Text>
|
||||
{` `}
|
||||
<Text preset="default">{translate("demoText:useCase.passingContent.nestedChildren3")}</Text>
|
||||
{` `}
|
||||
<Text preset="bold"> {translate("demoText:useCase.passingContent.nestedChildren4")}</Text>
|
||||
</Text>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoText:useCase.styling.name"
|
||||
description="demoText:useCase.styling.description"
|
||||
>
|
||||
<Text>
|
||||
<Text style={{ color: theme.colors.error }}>
|
||||
{translate("demoText:useCase.styling.text")}
|
||||
</Text>
|
||||
{` `}
|
||||
<Text
|
||||
style={{
|
||||
color: theme.colors.palette.neutral100,
|
||||
backgroundColor: theme.colors.error,
|
||||
}}
|
||||
>
|
||||
{translate("demoText:useCase.styling.text2")}
|
||||
</Text>
|
||||
{` `}
|
||||
<Text
|
||||
style={{
|
||||
textDecorationLine: "underline line-through",
|
||||
textDecorationStyle: "dashed",
|
||||
color: theme.colors.error,
|
||||
textDecorationColor: theme.colors.error,
|
||||
}}
|
||||
>
|
||||
{translate("demoText:useCase.styling.text3")}
|
||||
</Text>
|
||||
</Text>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
231
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoTextField.tsx
Normal file
231
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoTextField.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
/* eslint-disable react/jsx-key */
|
||||
import { TextStyle, ViewStyle } from "react-native"
|
||||
|
||||
import { Icon } from "@/components/Icon"
|
||||
import { TextField } from "@/components/TextField"
|
||||
import type { ThemedStyle } from "@/theme/types"
|
||||
|
||||
import { DemoDivider } from "../DemoDivider"
|
||||
import { Demo } from "./types"
|
||||
import { DemoUseCase } from "../DemoUseCase"
|
||||
|
||||
const $customInputStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
color: colors.palette.neutral100,
|
||||
})
|
||||
|
||||
const $customInputWrapperStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
borderColor: colors.palette.neutral800,
|
||||
})
|
||||
|
||||
const $customContainerStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
})
|
||||
|
||||
const $customLabelAndHelperStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
|
||||
color: colors.palette.neutral100,
|
||||
})
|
||||
|
||||
const $customInputWithAbsoluteAccessoriesStyle: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
||||
marginHorizontal: spacing.xxl,
|
||||
})
|
||||
|
||||
const $customLeftAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
})
|
||||
|
||||
const $customRightAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
||||
backgroundColor: colors.error,
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
})
|
||||
|
||||
export const DemoTextField: Demo = {
|
||||
name: "TextField",
|
||||
description: "demoTextField:description",
|
||||
data: ({ themed }) => [
|
||||
<DemoUseCase
|
||||
name="demoTextField:useCase.statuses.name"
|
||||
description="demoTextField:useCase.statuses.description"
|
||||
>
|
||||
<TextField
|
||||
value="Labore occaecat in id eu commodo aliquip occaecat veniam officia pariatur."
|
||||
labelTx="demoTextField:useCase.statuses.noStatus.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.statuses.noStatus.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
placeholderTx="demoTextField:useCase.statuses.noStatus.placeholder"
|
||||
placeholderTxOptions={{ prop: "placeholder" }}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
status="error"
|
||||
value="Est Lorem duis sunt sunt duis proident minim elit dolore incididunt pariatur eiusmod anim cillum."
|
||||
labelTx="demoTextField:useCase.statuses.error.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.statuses.error.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
placeholderTx="demoTextField:useCase.statuses.error.placeholder"
|
||||
placeholderTxOptions={{ prop: "placeholder" }}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
status="disabled"
|
||||
value="Eu ipsum mollit non minim voluptate nulla fugiat aliqua ullamco aute consectetur nulla nulla amet."
|
||||
labelTx="demoTextField:useCase.statuses.disabled.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.statuses.disabled.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
placeholderTx="demoTextField:useCase.statuses.disabled.placeholder"
|
||||
placeholderTxOptions={{ prop: "placeholder" }}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoTextField:useCase.passingContent.name"
|
||||
description="demoTextField:useCase.passingContent.description"
|
||||
>
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.passingContent.viaLabel.labelTx"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.passingContent.viaLabel.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
placeholderTx="demoTextField:useCase.passingContent.viaLabel.placeholder"
|
||||
placeholderTxOptions={{ prop: "placeholder" }}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
labelTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
placeholderTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
placeholderTxOptions={{ prop: "placeholder" }}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
value="Reprehenderit Lorem magna non consequat ullamco cupidatat."
|
||||
labelTx="demoTextField:useCase.passingContent.rightAccessory.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.passingContent.rightAccessory.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.passingContent.leftAccessory.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.passingContent.leftAccessory.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam."
|
||||
LeftAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.passingContent.supportsMultiline.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.passingContent.supportsMultiline.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam. Laborum Lorem velit velit minim irure ad in ut adipisicing consectetur."
|
||||
multiline
|
||||
RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoTextField:useCase.styling.name"
|
||||
description="demoTextField:useCase.styling.description"
|
||||
>
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.styling.styleInput.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.styling.styleInput.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
value="Laborum cupidatat aliquip sunt sunt voluptate sint sit proident sunt mollit exercitation ullamco ea elit."
|
||||
style={themed($customInputStyle)}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.styling.styleInputWrapper.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.styling.styleInputWrapper.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
value="Aute velit esse dolore pariatur exercitation irure nulla do sunt in duis mollit duis et."
|
||||
inputWrapperStyle={themed($customInputWrapperStyle)}
|
||||
style={themed($customInputStyle)}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.styling.styleContainer.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.styling.styleContainer.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
value="Aliquip proident commodo adipisicing non adipisicing Lorem excepteur ullamco voluptate laborum."
|
||||
style={themed($customInputStyle)}
|
||||
containerStyle={themed($customContainerStyle)}
|
||||
inputWrapperStyle={themed($customInputWrapperStyle)}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.styling.styleLabel.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.styling.styleLabel.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
value="Ex culpa in consectetur dolor irure velit."
|
||||
style={themed($customInputStyle)}
|
||||
containerStyle={themed($customContainerStyle)}
|
||||
inputWrapperStyle={themed($customInputWrapperStyle)}
|
||||
HelperTextProps={{ style: themed($customLabelAndHelperStyle) }}
|
||||
LabelTextProps={{ style: themed($customLabelAndHelperStyle) }}
|
||||
/>
|
||||
|
||||
<DemoDivider size={24} />
|
||||
|
||||
<TextField
|
||||
labelTx="demoTextField:useCase.styling.styleAccessories.label"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="demoTextField:useCase.styling.styleAccessories.helper"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
value="Aute nisi dolore fugiat anim mollit nulla ex minim ipsum ex elit."
|
||||
style={themed($customInputWithAbsoluteAccessoriesStyle)}
|
||||
LeftAccessory={() => (
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
containerStyle={themed($customLeftAccessoryStyle)}
|
||||
color="white"
|
||||
size={41}
|
||||
/>
|
||||
)}
|
||||
RightAccessory={() => (
|
||||
<Icon
|
||||
icon="ladybug"
|
||||
containerStyle={themed($customRightAccessoryStyle)}
|
||||
color="white"
|
||||
size={41}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
348
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoToggle.tsx
Normal file
348
RN_TEMPLATE/app/screens/ShowroomScreen/demos/DemoToggle.tsx
Normal file
@@ -0,0 +1,348 @@
|
||||
/* eslint-disable react/jsx-key, react-native/no-inline-styles */
|
||||
import { useState } from "react"
|
||||
import { TextStyle, View, ViewStyle } from "react-native"
|
||||
|
||||
import { Text } from "@/components/Text"
|
||||
import { Checkbox, CheckboxToggleProps } from "@/components/Toggle/Checkbox"
|
||||
import { Radio, RadioToggleProps } from "@/components/Toggle/Radio"
|
||||
import { Switch, SwitchToggleProps } from "@/components/Toggle/Switch"
|
||||
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"
|
||||
|
||||
function ControlledCheckbox(props: CheckboxToggleProps) {
|
||||
const [value, setValue] = useState(props.value || false)
|
||||
return <Checkbox {...props} value={value} onPress={() => setValue(!value)} />
|
||||
}
|
||||
|
||||
function ControlledRadio(props: RadioToggleProps) {
|
||||
const [value, setValue] = useState(props.value || false)
|
||||
return <Radio {...props} value={value} onPress={() => setValue(!value)} />
|
||||
}
|
||||
|
||||
function ControlledSwitch(props: SwitchToggleProps) {
|
||||
const [value, setValue] = useState(props.value || false)
|
||||
return <Switch {...props} value={value} onPress={() => setValue(!value)} />
|
||||
}
|
||||
|
||||
const $centeredOneThirdCol: ViewStyle = {
|
||||
width: "33.33333%",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}
|
||||
const $centeredText: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
marginTop: spacing.xs,
|
||||
})
|
||||
|
||||
export const DemoToggle: Demo = {
|
||||
name: "Toggle",
|
||||
description: "demoToggle:description",
|
||||
data: ({ theme, themed }) => [
|
||||
<DemoUseCase
|
||||
name="demoToggle:useCase.variants.name"
|
||||
description="demoToggle:useCase.variants.description"
|
||||
>
|
||||
<ControlledCheckbox
|
||||
labelTx="demoToggle:useCase.variants.checkbox.label"
|
||||
helperTx="demoToggle:useCase.variants.checkbox.helper"
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledRadio
|
||||
labelTx="demoToggle:useCase.variants.radio.label"
|
||||
helperTx="demoToggle:useCase.variants.radio.helper"
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledSwitch
|
||||
labelTx="demoToggle:useCase.variants.switch.label"
|
||||
helperTx="demoToggle:useCase.variants.switch.helper"
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoToggle:useCase.statuses.name"
|
||||
description="demoToggle:useCase.statuses.description"
|
||||
layout="row"
|
||||
itemStyle={$styles.flexWrap}
|
||||
>
|
||||
<ControlledCheckbox containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledRadio containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledSwitch containerStyle={$centeredOneThirdCol} />
|
||||
<DemoDivider style={{ width: "100%" }} />
|
||||
<ControlledCheckbox value containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledRadio value containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledSwitch value containerStyle={$centeredOneThirdCol} />
|
||||
<Text preset="formHelper" style={themed($centeredText)}>
|
||||
{translate("demoToggle:useCase.statuses.noStatus")}
|
||||
</Text>
|
||||
|
||||
<DemoDivider size={24} style={{ width: "100%" }} />
|
||||
|
||||
<ControlledCheckbox status="error" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledRadio status="error" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledSwitch status="error" containerStyle={$centeredOneThirdCol} />
|
||||
<DemoDivider style={{ width: "100%" }} />
|
||||
<ControlledCheckbox value status="error" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledRadio value status="error" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledSwitch value status="error" containerStyle={$centeredOneThirdCol} />
|
||||
<Text preset="formHelper" style={themed($centeredText)}>
|
||||
{translate("demoToggle:useCase.statuses.errorStatus")}
|
||||
</Text>
|
||||
|
||||
<DemoDivider size={24} style={{ width: "100%" }} />
|
||||
|
||||
<ControlledCheckbox status="disabled" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledRadio status="disabled" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledSwitch status="disabled" containerStyle={$centeredOneThirdCol} />
|
||||
<DemoDivider style={{ width: "100%" }} />
|
||||
<ControlledCheckbox value status="disabled" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledRadio value status="disabled" containerStyle={$centeredOneThirdCol} />
|
||||
<ControlledSwitch value status="disabled" containerStyle={$centeredOneThirdCol} />
|
||||
<Text preset="formHelper" style={themed($centeredText)}>
|
||||
{translate("demoToggle:useCase.statuses.disabledStatus")}
|
||||
</Text>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoToggle:useCase.passingContent.name"
|
||||
description="demoToggle:useCase.passingContent.description"
|
||||
>
|
||||
<ControlledCheckbox
|
||||
value
|
||||
labelTx="demoToggle:useCase.passingContent.useCase.checkBox.label"
|
||||
helperTx="demoToggle:useCase.passingContent.useCase.checkBox.helper"
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledRadio
|
||||
value
|
||||
labelTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
labelTxOptions={{ prop: "label" }}
|
||||
helperTx="showroomScreen:demoViaSpecifiedTxProp"
|
||||
helperTxOptions={{ prop: "helper" }}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledCheckbox
|
||||
value
|
||||
labelTx="demoToggle:useCase.passingContent.useCase.checkBoxMultiLine.helper"
|
||||
editable={false}
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledRadio
|
||||
value
|
||||
labelTx="demoToggle:useCase.passingContent.useCase.radioChangeSides.helper"
|
||||
labelPosition="left"
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledCheckbox
|
||||
value
|
||||
status="error"
|
||||
icon="ladybug"
|
||||
labelTx="demoToggle:useCase.passingContent.useCase.customCheckBox.label"
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledSwitch
|
||||
value
|
||||
accessibilityMode="text"
|
||||
labelTx="demoToggle:useCase.passingContent.useCase.switch.label"
|
||||
status="error"
|
||||
helperTx="demoToggle:useCase.passingContent.useCase.switch.helper"
|
||||
/>
|
||||
<DemoDivider size={24} />
|
||||
<ControlledSwitch
|
||||
value
|
||||
labelPosition="left"
|
||||
accessibilityMode="icon"
|
||||
labelTx="demoToggle:useCase.passingContent.useCase.switchAid.label"
|
||||
/>
|
||||
</DemoUseCase>,
|
||||
|
||||
<DemoUseCase
|
||||
name="demoToggle:useCase.styling.name"
|
||||
description="demoToggle:useCase.styling.description"
|
||||
layout="row"
|
||||
itemStyle={$styles.flexWrap}
|
||||
>
|
||||
<ControlledCheckbox
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(50),
|
||||
height: s(50),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
/>
|
||||
<ControlledRadio
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(50),
|
||||
height: s(50),
|
||||
borderRadius: s(25),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
/>
|
||||
<ControlledSwitch
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(70),
|
||||
height: s(50),
|
||||
borderRadius: s(25),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
/>
|
||||
<Text preset="formHelper" style={themed($centeredText)}>
|
||||
{translate("demoToggle:useCase.styling.outerWrapper")}
|
||||
</Text>
|
||||
|
||||
<DemoDivider style={{ width: "100%" }} />
|
||||
|
||||
<ControlledCheckbox
|
||||
value
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(50),
|
||||
height: s(50),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
inputInnerStyle={{
|
||||
backgroundColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
/>
|
||||
<ControlledRadio
|
||||
value
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(50),
|
||||
height: s(50),
|
||||
borderRadius: s(25),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
inputInnerStyle={{
|
||||
backgroundColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
/>
|
||||
<ControlledSwitch
|
||||
value
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(70),
|
||||
height: s(50),
|
||||
borderRadius: s(25),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
inputInnerStyle={{
|
||||
backgroundColor: theme.colors.palette.accent500,
|
||||
paddingLeft: s(10),
|
||||
paddingRight: s(10),
|
||||
}}
|
||||
/>
|
||||
<Text preset="formHelper" style={themed($centeredText)}>
|
||||
{translate("demoToggle:useCase.styling.innerWrapper")}
|
||||
</Text>
|
||||
|
||||
<DemoDivider style={{ width: "100%" }} />
|
||||
|
||||
<ControlledCheckbox
|
||||
value
|
||||
icon="ladybug"
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(50),
|
||||
height: s(50),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
inputInnerStyle={{
|
||||
backgroundColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
/>
|
||||
<ControlledRadio
|
||||
value
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(50),
|
||||
height: s(50),
|
||||
borderRadius: s(25),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
inputInnerStyle={{
|
||||
backgroundColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
inputDetailStyle={{
|
||||
backgroundColor: theme.colors.tint,
|
||||
height: s(36),
|
||||
width: s(36),
|
||||
borderRadius: s(18),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ControlledSwitch
|
||||
value
|
||||
containerStyle={$centeredOneThirdCol}
|
||||
inputOuterStyle={{
|
||||
width: s(70),
|
||||
height: s(50),
|
||||
borderRadius: s(25),
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
borderColor: theme.colors.palette.accent500,
|
||||
}}
|
||||
inputInnerStyle={{
|
||||
backgroundColor: theme.colors.tint,
|
||||
paddingLeft: s(10),
|
||||
paddingRight: s(10),
|
||||
}}
|
||||
inputDetailStyle={{
|
||||
backgroundColor: theme.colors.palette.accent300,
|
||||
height: s(36),
|
||||
width: s(18),
|
||||
borderRadius: s(36),
|
||||
}}
|
||||
accessibilityMode="icon"
|
||||
/>
|
||||
|
||||
<Text preset="formHelper" style={themed($centeredText)}>
|
||||
{translate("demoToggle:useCase.styling.inputDetail")}
|
||||
</Text>
|
||||
|
||||
<DemoDivider size={32} style={{ width: "100%" }} />
|
||||
|
||||
<View style={{ width: "100%" }}>
|
||||
<ControlledRadio
|
||||
value
|
||||
labelTx="demoToggle:useCase.styling.labelTx"
|
||||
LabelTextProps={{ size: "xs", weight: "bold" }}
|
||||
status="error"
|
||||
labelStyle={{
|
||||
backgroundColor: theme.colors.error,
|
||||
color: theme.colors.palette.neutral100,
|
||||
paddingHorizontal: s(5),
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<DemoDivider size={24} style={{ width: "100%" }} />
|
||||
|
||||
<View style={{ width: "100%" }}>
|
||||
<ControlledRadio
|
||||
value
|
||||
labelPosition="left"
|
||||
containerStyle={{ padding: s(10), backgroundColor: theme.colors.error }}
|
||||
labelTx="demoToggle:useCase.styling.styleContainer"
|
||||
status="error"
|
||||
labelStyle={{ color: theme.colors.palette.neutral100 }}
|
||||
/>
|
||||
</View>
|
||||
</DemoUseCase>,
|
||||
],
|
||||
}
|
||||
10
RN_TEMPLATE/app/screens/ShowroomScreen/demos/index.ts
Normal file
10
RN_TEMPLATE/app/screens/ShowroomScreen/demos/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export * from "./DemoIcon"
|
||||
export * from "./DemoTextField"
|
||||
export * from "./DemoToggle"
|
||||
export * from "./DemoButton"
|
||||
export * from "./DemoListItem"
|
||||
export * from "./DemoCard"
|
||||
export * from "./DemoAutoImage"
|
||||
export * from "./DemoText"
|
||||
export * from "./DemoHeader"
|
||||
export * from "./DemoEmptyState"
|
||||
10
RN_TEMPLATE/app/screens/ShowroomScreen/demos/types.ts
Normal file
10
RN_TEMPLATE/app/screens/ShowroomScreen/demos/types.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { ReactElement } from "react"
|
||||
|
||||
import { TxKeyPath } from "@/i18n"
|
||||
import type { Theme } from "@/theme/types"
|
||||
|
||||
export interface Demo {
|
||||
name: string
|
||||
description: TxKeyPath
|
||||
data: ({ themed, theme }: { themed: any; theme: Theme }) => ReactElement[]
|
||||
}
|
||||
Reference in New Issue
Block a user