349 lines
12 KiB
TypeScript
349 lines
12 KiB
TypeScript
/* 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>,
|
|
],
|
|
}
|