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/button | |
parent | f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff) |
WIP
Diffstat (limited to 'app/components/button')
-rw-r--r-- | app/components/button/button.presets.ts | 58 | ||||
-rw-r--r-- | app/components/button/button.props.ts | 40 | ||||
-rw-r--r-- | app/components/button/button.story.tsx | 51 | ||||
-rw-r--r-- | app/components/button/button.tsx | 36 |
4 files changed, 0 insertions, 185 deletions
diff --git a/app/components/button/button.presets.ts b/app/components/button/button.presets.ts deleted file mode 100644 index bc0ad3f..0000000 --- a/app/components/button/button.presets.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { ViewStyle, TextStyle } from 'react-native' -import { color, spacing } from '../../theme' - -/** - * All text will start off looking like this. - */ -const BASE_VIEW: ViewStyle = { - paddingVertical: spacing[2], - paddingHorizontal: spacing[2], - borderRadius: 4, - justifyContent: 'center', - alignItems: 'center', -} - -const BASE_TEXT: TextStyle = { - paddingHorizontal: spacing[3], -} - -/** - * All the variations of text styling within the app. - * - * You want to customize these to whatever you need in your app. - */ -export const viewPresets: Record<string, ViewStyle> = { - /** - * A smaller piece of secondard information. - */ - primary: { ...BASE_VIEW, backgroundColor: color.palette.orange } as ViewStyle, - - /** - * A button without extras. - */ - link: { - ...BASE_VIEW, - paddingHorizontal: 0, - paddingVertical: 0, - alignItems: 'flex-start', - } as ViewStyle, -} - -export const textPresets: Record<ButtonPresetNames, TextStyle> = { - primary: { - ...BASE_TEXT, - fontSize: 9, - color: color.palette.white, - } as TextStyle, - link: { - ...BASE_TEXT, - color: color.text, - paddingHorizontal: 0, - paddingVertical: 0, - } as TextStyle, -} - -/** - * A list of preset names. - */ -export type ButtonPresetNames = keyof typeof viewPresets diff --git a/app/components/button/button.props.ts b/app/components/button/button.props.ts deleted file mode 100644 index 5f26136..0000000 --- a/app/components/button/button.props.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { - StyleProp, - TextStyle, - TouchableOpacityProps, - ViewStyle, -} from 'react-native' -import { ButtonPresetNames } from './button.presets' -import { TxKeyPath } from '../../i18n' - -export interface ButtonProps extends TouchableOpacityProps { - /** - * Text which is looked up via i18n. - */ - tx?: TxKeyPath - - /** - * The text to display if not using `tx` or nested components. - */ - text?: string - - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp<ViewStyle> - - /** - * An optional style override useful for the button text. - */ - textStyle?: StyleProp<TextStyle> - - /** - * One of the different types of text presets. - */ - preset?: ButtonPresetNames - - /** - * One of the different types of text presets. - */ - children?: React.ReactNode -} diff --git a/app/components/button/button.story.tsx b/app/components/button/button.story.tsx deleted file mode 100644 index 5dc21c1..0000000 --- a/app/components/button/button.story.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react' -import { ViewStyle, TextStyle, Alert } from 'react-native' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Button } from './button' - -declare let module - -const buttonStyleArray: ViewStyle[] = [ - { paddingVertical: 100 }, - { borderRadius: 0 }, -] - -const buttonTextStyleArray: TextStyle[] = [ - { fontSize: 20 }, - { color: '#a511dc' }, -] - -storiesOf('Button', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="Primary" usage="The primary button."> - <Button - text="Click It" - preset="primary" - onPress={() => Alert.alert('pressed')} - /> - </UseCase> - <UseCase - text="Disabled" - usage="The disabled behaviour of the primary button." - > - <Button - text="Click It" - preset="primary" - onPress={() => Alert.alert('pressed')} - disabled - /> - </UseCase> - <UseCase text="Array Style" usage="Button with array style"> - <Button - text="Click It" - preset="primary" - onPress={() => Alert.alert('pressed')} - style={buttonStyleArray} - textStyle={buttonTextStyleArray} - /> - </UseCase> - </Story> - )) diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx deleted file mode 100644 index 03b8f85..0000000 --- a/app/components/button/button.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react' -import { TouchableOpacity } from 'react-native' -import { Text } from '../text/text' -import { viewPresets, textPresets } from './button.presets' -import { ButtonProps } from './button.props' - -/** - * For your text displaying needs. - * - * This component is a HOC over the built-in React Native one. - */ -export function Button(props: ButtonProps) { - // grab the props - const { - preset = 'primary', - tx, - text, - style: styleOverride, - textStyle: textStyleOverride, - children, - ...rest - } = props - - const viewStyle = viewPresets[preset] || viewPresets.primary - const viewStyles = [viewStyle, styleOverride] - const textStyle = textPresets[preset] || textPresets.primary - const textStyles = [textStyle, textStyleOverride] - - const content = children || <Text tx={tx} text={text} style={textStyles} /> - - return ( - <TouchableOpacity style={viewStyles} {...rest}> - {content} - </TouchableOpacity> - ) -} |