campus_react_local/App/utils/AppText.js

import * as React from 'react';
import { Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import variables from './';


const styles = StyleSheet.create({
  text: {
    fontWeight: variables.fontWeight.light
  },
  tiny: {
    fontSize: variables.fontSize.tiny
  },
  small: {
    fontSize: variables.fontSize.small
  },
  normal: {
    fontSize: variables.fontSize.normal
  },
  medium: {
    fontSize: variables.fontSize.medium
  },
  large: {
    fontSize: variables.fontSize.large
  },
  xlarge: {
    fontSize: variables.fontSize.xlarge
  },
  xxlarge: {
    fontSize: variables.fontSize.xxlarge
  },
  xxxlarge: {
    fontSize: variables.fontSize.xxxlarge
  },
  primary: {
    color: variables.color.text.primary
  },
  secondary: {
    color: variables.color.text.secondary
  },
  tip: {
    color: variables.color.text.tip
  },
  placeholder: {
    color: variables.color.text.placeholder
  },
  white: {
    color: variables.color.white
  },
  error: {
    color: variables.color.error
  }
});

class AppText extends React.Component {

  setNativeProps(props) {
    this.refs.text.setNativeProps(props);
  }

  render() {
    const { size, type, style, singleLine, ...others } = this.props;
    const filteredOthers = singleLine ? { numberOfLines: 1, ...others } : { ...others };
    return (
      <Text ref="text" style={[styles.text, styles[size], styles[type], style]} {...filteredOthers}>{this.props.children}</Text>
    );
  }
}

AppText.propTypes = {
  size: PropTypes.oneOf(['tiny', 'small', 'normal', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge']),
  type: PropTypes.oneOf(['primary', 'secondary', 'tip', 'placeholder', 'white', 'error']),
  style: PropTypes.any,
  children: PropTypes.node,
  singleLine: PropTypes.bool
};

AppText.defaultProps = {
  size: 'normal',
  type: 'primary'
};

export default AppText;