diff --git a/src/Label.js b/src/Label.js index 43b5717..cd647a7 100644 --- a/src/Label.js +++ b/src/Label.js @@ -1,40 +1,55 @@ import React from 'react' -import { Text, View, Platform } from 'react-native' +import {Text, View, Platform} from 'react-native' import PropTypes from 'prop-types' -import styled from 'styled-components/native' import defaultTheme from './Theme' -const LabelWrapper = styled.View` - flex: ${props => props.inlineLabel ? 0.5 : 1}; - flex-direction: ${props => props.inlineLabel ? 'row' : 'column'}; - flex-direction: column; - justify-content: center; - padding-left: ${Platform.OS === 'android' ? 5 : 0}; - marginTop: ${props => props.inlineLabel ? 0 : 5}; -` - -const LabelText = styled.Text` - color: ${props => props.theme.Label.color}; - font-size: ${props => props.theme.Label.fontSize}; -` - -LabelText.defaultProps = { - theme: defaultTheme, - componentName: 'Label', -} -const Label = props => { - const { children, inlineLabel, theme } = props +const NON_TEXT_PROPS = ['stackedHeight'] +const NON_VIEW_PROPS = ['color', 'fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'includeFontPadding', 'letterSpacing', 'lineHeight', 'stackedHeight', 'textAlign', 'textAlignVertical', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'writingDirection'] - return ( - - { children } - - ) + +class LabelWrapper extends React.PureComponent { + render() { + const {children, inlineLabel, theme} = this.props + const style = { + flex: inlineLabel ? 0.5 : 1, + flexDirection: inlineLabel ? 'row' : 'column', + justifyContent: 'flex-start', + paddingLeft: Platform.OS === 'android' ? 5 : 0, + marginTop: inlineLabel ? 0 : 5, + ...theme.Label, + } + NON_VIEW_PROPS.forEach(p => delete style[p]) + return + } } -Label.propTypes = { - children: PropTypes.string.isRequired +class LabelText extends React.PureComponent { + static defaultProps = { + theme: defaultTheme, + componentName: 'Label', + } + + render() { + const {children, theme} = this.props + const style = { + ...theme.Label, + ...theme.LabelText, + } + NON_TEXT_PROPS.forEach(p => delete style[p]) + return + } } -export default Label +export default class Label extends React.PureComponent { + static propTypes = { + children: PropTypes.string.isRequired + } + + render() { + const {children, inlineLabel, theme} = this.props + return + {children} + + } +}