Skip to content

Instantly share code, notes, and snippets.

@sidferreira
Last active November 13, 2018 21:04
Show Gist options
  • Save sidferreira/abcd814e096daf4770b247d90b798e9c to your computer and use it in GitHub Desktop.
Save sidferreira/abcd814e096daf4770b247d90b798e9c to your computer and use it in GitHub Desktop.
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { Text } from "react-native";
import { Colors } from "../../../Theme";
export default class Label extends PureComponent {
render() {
const {
white,
blue,
center,
font38,
font30,
font18,
font14,
font12,
mb10,
mb16,
weightLight,
weightBold,
weightSemiBold,
showBorder,
showBorderActive,
shadow,
children,
style,
...props
} = this.props;
const labelStyles = [
Styles.label,
center && Styles.center,
white && Styles.colorWhite,
blue && Styles.colorBlue,
font38 && Styles.font38,
font30 && Styles.font30,
font18 && Styles.font18,
font14 && Styles.font14,
font12 && Styles.font12,
mb10 && Styles.mb10,
mb16 && Styles.mb16,
weightLight && Styles.weightLight,
weightBold && Styles.weightBold,
weightSemiBold && Styles.weightSemiBold,
(showBorder || showBorderActive) && Styles.border,
showBorderActive && Styles.borderActive,
shadow && Styles.shadow,
style
];
return (
<Text style={labelStyles} {...props}>
{children}
</Text>
);
}
}
Label.propTypes = {
white: PropTypes.bool,
blue: PropTypes.bool,
center: PropTypes.bool,
font38: PropTypes.bool,
font30: PropTypes.bool,
font18: PropTypes.bool,
font14: PropTypes.bool,
font12: PropTypes.bool,
mb10: PropTypes.bool,
mb16: PropTypes.bool,
weightLight: PropTypes.bool,
weightBold: PropTypes.bool,
weightSemiBold: PropTypes.bool,
showBorder: PropTypes.bool,
showBorderActive: PropTypes.bool,
shadow: PropTypes.bool,
children: PropTypes.any,
style: PropTypes.any
};
const Styles = {
label: { textAlign: "left" },
center: { textAlign: "center" },
font38: { fontSize: 38 },
font30: { fontSize: 30 },
font18: { fontSize: 18 },
font14: { fontSize: 14 },
font12: { fontSize: 12 },
colorWhite: { color: Colors.white },
colorBlue: { color: Colors.blue },
weightLight: { fontWeight: "300" },
weightSemiBold: { fontWeight: "600" },
weightBold: { fontWeight: "700" },
mb10: { marginBottom: 10 },
mb16: { marginBottom: 16 },
border: {
borderWidth: 1,
borderColor: Colors.white,
borderRadius: 18,
lineHeight: 36,
overflow: "hidden",
textAlign: "center"
},
borderActive: {
backgroundColor: Colors.white,
color: Colors.blue
},
shadow: {
textShadowColor: Colors.black30p,
textShadowRadius: 1,
textShadowOffset: {
width: 0,
height: 1
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment