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
54
55
56
57
58
59
60
61
62
|
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>
)
}
|
