Skip to content

Instantly share code, notes, and snippets.

@nicholasess

nicholasess/Button.js

Created November 22, 2019 14:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nicholasess/be7185b0e113eea23f946d0799929ce8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nicholasess/be7185b0e113eea23f946d0799929ce8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nicholasess created this gist Nov 22, 2019.
    69 changes: 69 additions & 0 deletions Button.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    import React from 'react';
    import {TouchableOpacity} from 'react-native';
    import styled from 'styled-components';
    import Text from 'app/src/components/Text';
    const Button = styled(TouchableOpacity)`
    width: 100%;
    height: 50px;
    border-radius: 5px;
    background-color: ${({background}) => background};
    border-width: 1;
    border-color: ${({text}) => text};
    align-items: center;
    justify-content: center;
    `;

    export default ({children, onPress, style, type = 'primary', disabled}) => (
    <Button
    onPress={disabled ? () => {} : onPress}
    style={style}
    background={typeButton(type).background}
    text={typeButton(type).text}>
    <Text weight={'bold'} size={18} color={typeButton(type).text}>
    {children}
    </Text>
    </Button>
    );

    const typeButton = type => {
    let primary = {
    background: '#2980B9',
    text: '#fff',
    };

    let danger = {
    background: '#E74C3C',
    text: '#fff',
    };

    let outline = {
    background: '#fff',
    text: '#000',
    };

    let black = {
    background: '#2D3436',
    text: '#fff',
    };

    let success = {
    background: '#27AE96',
    text: '#fff',
    };

    switch (type) {
    case 'primary':
    return primary;
    case 'danger':
    return danger;
    case 'outline':
    return outline;
    case 'black':
    return black;
    case 'success':
    return success;
    default: {
    return primary;
    }
    }
    };