From 7c3258ca775723c4abfe7e1c8ccb69c334d89f3b Mon Sep 17 00:00:00 2001 From: jeluard Date: Fri, 22 Mar 2019 15:04:11 +0100 Subject: [PATCH] Improved Button component --- src/components/Button.jsx | 44 +- src/components/Welcome.jsx | 46 - src/stories/index.js | 19 +- yarn.lock | 1875 +----------------------------------- 4 files changed, 52 insertions(+), 1932 deletions(-) delete mode 100644 src/components/Welcome.jsx diff --git a/src/components/Button.jsx b/src/components/Button.jsx index a3929b5..3413b53 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -1,24 +1,44 @@ import * as React from 'react'; -import { Button as Btn } from 'react-native'; +import { ViewPropTypes, StyleSheet, Text, TouchableHighlight } from 'react-native'; + +const styles = StyleSheet.create({ + touchable: { + flexDirection: "row", flexWrap: "wrap", justifyContent: "center", alignItems: "center" + }, + touchableMain: { + backgroundColor: '#4360DF1a', borderRadius: 8 + }, + touchableDisabled: { + backgroundColor:"#939BA11A" + }, + text: { + marginHorizontal: 32, marginVertical: 11, color: "#4360DF", textAlign: "center", fontSize: 15 + }, + textDisabled: { + color:"#939BA1" + } +}); export class Button extends React.Component { + + static propTypes = { + style: ViewPropTypes.style + } + constructor(props) { super(props); } - toggle = () => { - console.log('touched') - }; - render() { - const { title, color } = this.props; + const { main, title, disabled, onPress, accessibilityLabel} = this.props; return ( - + + {title} + ); } } \ No newline at end of file diff --git a/src/components/Welcome.jsx b/src/components/Welcome.jsx deleted file mode 100644 index bd317e4..0000000 --- a/src/components/Welcome.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -const styles = { - main: { - margin: 15, - lineHeight: 1.4, - }, - - logo: { - width: 200, - }, - - link: { - color: '#1474f3', - textDecoration: 'none', - borderBottom: '1px solid #1474f3', - paddingBottom: 2, - }, - - code: { - fontSize: 15, - fontWeight: 600, - padding: "2px 5px", - border: "1px solid #eae9e9", - borderRadius: 4, - backgroundColor: '#f3f2f2', - color: '#3a3a3a', - }, -}; - -export default class Welcome extends React.Component { - showApp(e) { - e.preventDefault(); - if(this.props.showApp) this.props.showApp(); - } - - render() { - return ( -
- <> - A reusable component library that is designed and engineered to help us build better product faster at Status. - -
- ); - } -} diff --git a/src/stories/index.js b/src/stories/index.js index 3e3a299..8de97a9 100644 --- a/src/stories/index.js +++ b/src/stories/index.js @@ -4,14 +4,17 @@ import 'typeface-roboto' import { storiesOf } from '@storybook/react' import { linkTo } from '@storybook/addon-links' -import StatusWelcome from '../components/Welcome' +import { Text, TouchableHighlight, View } from 'react-native'; import { Button } from '../components/Button' -// import MobileButton from '../components/MobileButton' - - -storiesOf('Welcome', module) - .add('To Status-Welcome', () => ) storiesOf('Button', module) - .add('To Status-Button', () =>