diff options
author | Kirill Rogovoy <[email protected]> | 2021-07-20 21:24:52 +0300 |
---|---|---|
committer | Kirill Rogovoy <[email protected]> | 2021-07-20 21:24:52 +0300 |
commit | 5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb (patch) | |
tree | 273dfc086444533d86d580961c92ba8d14781a67 /app/components/checkbox/checkbox.tsx | |
parent | f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff) |
WIP
Diffstat (limited to 'app/components/checkbox/checkbox.tsx')
-rw-r--r-- | app/components/checkbox/checkbox.tsx | 62 |
1 files changed, 0 insertions, 62 deletions
diff --git a/app/components/checkbox/checkbox.tsx b/app/components/checkbox/checkbox.tsx deleted file mode 100644 index d788114..0000000 --- a/app/components/checkbox/checkbox.tsx +++ /dev/null @@ -1,62 +0,0 @@ -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> - ) -} |