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_expo/components/local-button | |
parent | f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff) |
WIP
Diffstat (limited to 'app_expo/components/local-button')
-rw-r--r-- | app_expo/components/local-button/local-button.story.tsx | 15 | ||||
-rw-r--r-- | app_expo/components/local-button/local-button.tsx | 50 |
2 files changed, 65 insertions, 0 deletions
diff --git a/app_expo/components/local-button/local-button.story.tsx b/app_expo/components/local-button/local-button.story.tsx new file mode 100644 index 0000000..0d35ab2 --- /dev/null +++ b/app_expo/components/local-button/local-button.story.tsx @@ -0,0 +1,15 @@ +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { LocalButton } from './local-button' + +storiesOf('LocalButton', module) + .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) + .add('Style Presets', () => ( + <Story> + <UseCase text="Primary" usage="The primary."> + <LocalButton style={{ backgroundColor: color.error }} /> + </UseCase> + </Story> + )) diff --git a/app_expo/components/local-button/local-button.tsx b/app_expo/components/local-button/local-button.tsx new file mode 100644 index 0000000..c1021a3 --- /dev/null +++ b/app_expo/components/local-button/local-button.tsx @@ -0,0 +1,50 @@ +import * as React from 'react' +import { StyleProp, TextStyle, View, ViewStyle } from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { Text } from '../' +import { flatten } from 'ramda' +import Icon from 'react-native-vector-icons/MaterialCommunityIcons' + +const CONTAINER: ViewStyle = { + justifyContent: 'center', +} + +const TEXT: TextStyle = { + fontFamily: typography.primary, + fontSize: 14, + color: color.primary, +} + +export interface LocalButtonProps { + /** + * An optional style override useful for padding & margin. + */ + style?: StyleProp<ViewStyle> + local + setLocal +} + +/** + * Describe your component here + */ +export const LocalButton = observer(function LocalButton(props: LocalButtonProps) { + const { style, local, setLocal } = props + const styles = flatten([CONTAINER, style]) + + return ( + <View style={[style, { height: 50, width: 150 }]}> + <Icon.Button + name={!local ? 'graph-outline' : 'graph'} + backgroundColor="#a991f1" + onPress={() => { + setLocal(!local) + }} + size={30} + style={{ textAlign: 'center' }} + > + {!local ? 'Global Graph' : 'Local Graph'} + </Icon.Button> + </View> + ) +}) |