diff options
Diffstat (limited to 'app/components/checkbox/checkbox.tsx')
-rw-r--r-- | app/components/checkbox/checkbox.tsx | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/app/components/checkbox/checkbox.tsx b/app/components/checkbox/checkbox.tsx new file mode 100644 index 0000000..fc3992a --- /dev/null +++ b/app/components/checkbox/checkbox.tsx @@ -0,0 +1,53 @@ +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", + paddingVertical: spacing[1], + alignSelf: "flex-start", +} + +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", + borderWidth: 1, + borderColor: color.primaryDarker, + borderRadius: 1, +} + +const FILL: ViewStyle = { + width: DIMENSIONS.width - 4, + height: DIMENSIONS.height - 4, + backgroundColor: color.primary, +} + +const LABEL: TextStyle = { paddingLeft: spacing[2] } + +export function Checkbox(props: CheckboxProps) { + const numberOfLines = props.multiline ? 0 : 1 + + const rootStyle = [ROOT, props.style] + const outlineStyle = [OUTLINE, props.outlineStyle] + const fillStyle = [FILL, props.fillStyle] + + const onPress = props.onToggle ? () => props.onToggle && props.onToggle(!props.value) : null + + return ( + <TouchableOpacity + activeOpacity={1} + disabled={!props.onToggle} + onPress={onPress} + style={rootStyle} + > + <View style={outlineStyle}>{props.value && <View style={fillStyle} />}</View> + <Text text={props.text} tx={props.tx} numberOfLines={numberOfLines} style={LABEL} /> + </TouchableOpacity> + ) +} |