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>
)
}
|
