diff options
Diffstat (limited to 'app/components/checkbox/checkbox.tsx')
-rw-r--r-- | app/components/checkbox/checkbox.tsx | 33 |
1 files changed, 21 insertions, 12 deletions
diff --git a/app/components/checkbox/checkbox.tsx b/app/components/checkbox/checkbox.tsx index fc3992a..d788114 100644 --- a/app/components/checkbox/checkbox.tsx +++ b/app/components/checkbox/checkbox.tsx @@ -1,13 +1,13 @@ -import * as React from "react" -import { TextStyle, TouchableOpacity, View, ViewStyle } from "react-native" -import { Text } from "../text/text" -import { color, spacing } from "../../theme" -import { CheckboxProps } from "./checkbox.props" +import * as React from 'react' +import { TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native' +import { Text } from '../text/text' +import { color, spacing } from '../../theme' +import { CheckboxProps } from './checkbox.props' const ROOT: ViewStyle = { - flexDirection: "row", + flexDirection: 'row', paddingVertical: spacing[1], - alignSelf: "flex-start", + alignSelf: 'flex-start', } const DIMENSIONS = { width: 16, height: 16 } @@ -15,8 +15,8 @@ const DIMENSIONS = { width: 16, height: 16 } const OUTLINE: ViewStyle = { ...DIMENSIONS, marginTop: 2, // finicky and will depend on font/line-height/baseline/weather - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', borderWidth: 1, borderColor: color.primaryDarker, borderRadius: 1, @@ -37,7 +37,9 @@ export function Checkbox(props: CheckboxProps) { const outlineStyle = [OUTLINE, props.outlineStyle] const fillStyle = [FILL, props.fillStyle] - const onPress = props.onToggle ? () => props.onToggle && props.onToggle(!props.value) : null + const onPress = props.onToggle + ? () => props.onToggle && props.onToggle(!props.value) + : null return ( <TouchableOpacity @@ -46,8 +48,15 @@ export function Checkbox(props: CheckboxProps) { onPress={onPress} style={rootStyle} > - <View style={outlineStyle}>{props.value && <View style={fillStyle} />}</View> - <Text text={props.text} tx={props.tx} numberOfLines={numberOfLines} style={LABEL} /> + <View style={outlineStyle}> + {props.value && <View style={fillStyle} />} + </View> + <Text + text={props.text} + tx={props.tx} + numberOfLines={numberOfLines} + style={LABEL} + /> </TouchableOpacity> ) } |