diff options
Diffstat (limited to 'app/components/checkbox')
-rw-r--r-- | app/components/checkbox/checkbox.props.ts | 44 | ||||
-rw-r--r-- | app/components/checkbox/checkbox.story.tsx | 132 | ||||
-rw-r--r-- | app/components/checkbox/checkbox.tsx | 62 |
3 files changed, 0 insertions, 238 deletions
diff --git a/app/components/checkbox/checkbox.props.ts b/app/components/checkbox/checkbox.props.ts deleted file mode 100644 index 4a212e3..0000000 --- a/app/components/checkbox/checkbox.props.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { StyleProp, ViewStyle } from 'react-native' -import { TxKeyPath } from '../../i18n' - -export interface CheckboxProps { - /** - * Additional container style. Useful for margins. - */ - style?: StyleProp<ViewStyle> - - /** - * Additional outline style. - */ - outlineStyle?: StyleProp<ViewStyle> - - /** - * Additional fill style. Only visible when checked. - */ - fillStyle?: StyleProp<ViewStyle> - - /** - * Is the checkbox checked? - */ - value?: boolean - - /** - * The text to display if there isn't a tx. - */ - text?: string - - /** - * The i18n lookup key. - */ - tx?: TxKeyPath - - /** - * Multiline or clipped single line? - */ - multiline?: boolean - - /** - * Fires when the user tabs to change the value. - */ - onToggle?: (newValue: boolean) => void -} diff --git a/app/components/checkbox/checkbox.story.tsx b/app/components/checkbox/checkbox.story.tsx deleted file mode 100644 index 9d1429a..0000000 --- a/app/components/checkbox/checkbox.story.tsx +++ /dev/null @@ -1,132 +0,0 @@ -/* eslint-disable react-native/no-inline-styles */ -/* eslint-disable react-native/no-color-literals */ - -import * as React from 'react' -import { View, ViewStyle } from 'react-native' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Checkbox } from './checkbox' -import { Toggle } from 'react-powerplug' - -declare let module - -const arrayStyle: ViewStyle[] = [ - { paddingVertical: 40 }, - { alignSelf: 'flex-end' }, -] -const arrayOutlineStyle: ViewStyle[] = [ - { borderColor: '#b443c9' }, - { borderWidth: 25 }, -] -const arrayFillStyle: ViewStyle[] = [{ backgroundColor: '#55e0ff' }] - -storiesOf('Checkbox', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Behaviour', () => ( - <Story> - <UseCase - text="The Checkbox" - usage="Use the checkbox to represent on/off states." - > - <Toggle initial={false}> - {({ on, toggle }) => ( - <Checkbox value={on} onToggle={toggle} text="Toggle me" /> - )} - </Toggle> - </UseCase> - <UseCase text="value = true" usage="This is permanently on."> - <Checkbox value={true} text="Always on" /> - </UseCase> - <UseCase text="value = false" usage="This is permanantly off."> - <Checkbox value={false} text="Always off" /> - </UseCase> - </Story> - )) - .add('Styling', () => ( - <Story> - <UseCase text="multiline = true" usage="For really really long text"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="We’re an App Design & Development Team. Experts in mobile & web technologies. We create beautiful, functional mobile apps and websites." - value={on} - multiline - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - <UseCase text=".style" usage="Override the container style"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Hello there!" - value={on} - style={{ - backgroundColor: 'purple', - marginLeft: 40, - paddingVertical: 30, - paddingLeft: 60, - }} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - <UseCase text=".outlineStyle" usage="Override the outline style"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Outline is the box frame" - value={on} - outlineStyle={{ - borderColor: 'green', - borderRadius: 10, - borderWidth: 4, - width: 60, - height: 20, - }} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - <UseCase text=".fillStyle" usage="Override the fill style"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Fill er up" - value={on} - fillStyle={{ backgroundColor: 'red', borderRadius: 8 }} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - - <UseCase text="Array style" usage="Use array styles"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Check it twice" - value={on} - onToggle={toggle} - style={arrayStyle} - outlineStyle={arrayOutlineStyle} - fillStyle={arrayFillStyle} - /> - </View> - )} - </Toggle> - </UseCase> - </Story> - )) 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> - ) -} |