Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {
- PropTypes,
- } from 'react';
- import {
- StyleSheet,
- Text,
- TouchableHighlight,
- TouchableOpacity,
- View,
- } from 'react-native';
- import Color from 'color';
- const colors = {
- light: '#fff',
- stable: '#f8f8f8',
- primary: '#337AF9',
- calm: '#11c1f3',
- secondary: '#22DD5E',
- energized: '#FFC600',
- danger: '#F83B36',
- royal: '#7E59FF',
- dark: '#222',
- };
- const sizes = {
- xs: 4,
- sm: 8,
- md: 12,
- lg: 16,
- xl: 20,
- };
- const propTypes = {
- activeOpacity: PropTypes.number,
- block: PropTypes.bool,
- children: PropTypes.node,
- clear: PropTypes.bool,
- color: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- ]),
- onPress: PropTypes.func,
- outline: PropTypes.bool,
- round: PropTypes.bool,
- shadow: PropTypes.bool,
- size: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- ]),
- style: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.object,
- ]),
- text: PropTypes.string,
- underlayColor: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- ]),
- };
- const defaultProps = {
- activeOpacity: 1,
- block: false,
- children: null,
- clear: false,
- color: colors.stable,
- onPress: () => alert('Attach an onPress prop'),
- outline: false,
- round: false,
- shadow: true,
- size: sizes.md,
- style: null,
- text: 'Press Me',
- underlayColor: null,
- };
- const cs = StyleSheet.create({
- button: {
- alignItems: 'center',
- borderWidth: 2,
- flex: 0,
- justifyContent: 'center',
- },
- });
- export default function Button(props) {
- const {
- activeOpacity,
- block: $block,
- children,
- clear,
- color: $color,
- onPress,
- outline,
- round,
- shadow: $shadow,
- size: $size,
- style,
- text,
- underlayColor,
- ...passProps,
- } = props;
- const size = sizes[$size] || $size;
- const color = colors[$color] ? Color(colors[$color]) : Color($color);
- const colorDark = color.darken(0.2);
- const luminosTextColor = color.luminosity() < 0.5 ? '#fff' : '#000';
- const block = $block && { alignSelf: 'stretch' };
- const backgroundColor = clear || outline ? 'transparent' : color
- const borderColor = outline ? color : 'transparent';
- const borderRadius = round ? 50 : 2;
- const padding = size > 15
- ? { padding: 16 }
- : { paddingHorizontal: 4, paddingVertical: 8 };
- const shadow = $shadow && {
- elevation: 2,
- shadowColor: '#000',
- shadowOffset: { width: 0, height: 2 },
- shadowOpacity: 0.2,
- shadowRadius: 2,
- };
- const textColor = clear || outline ? color : luminosTextColor;
- const buttonStyle = [
- cs.button,
- block,
- { backgroundColor },
- { borderColor },
- { borderRadius },
- padding,
- shadow,
- style,
- ];
- const textStyle = {
- color: textColor,
- fontSize: size,
- };
- const content = children || (
- <Text style={textStyle}>
- {text}
- </Text>
- );
- if (clear) {
- return (
- <TouchableOpacity
- onPress={onPress}
- style={buttonStyle}
- {...passProps}
- >
- {content}
- </TouchableOpacity>
- );
- }
- return (
- <TouchableHighlight
- activeOpacity={activeOpacity}
- onPress={onPress}
- style={buttonStyle}
- underlayColor={underlayColor || colorDark}
- {...passProps}
- >
- {content}
- </TouchableHighlight>
- );
- }
- Button.propTypes = propTypes;
- Button.defaultProps = defaultProps;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement