1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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>
)
}
|
