145 lines
4.1 KiB
JavaScript
145 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import { Text, StyleSheet } from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
import { Typography, FontWeight } from '../../config/typography';
|
|
import Tag from '../Tag';
|
|
|
|
export default function CustomText(props) {
|
|
|
|
const {
|
|
//props style
|
|
header,
|
|
title1,
|
|
title2,
|
|
title3,
|
|
headline,
|
|
body1,
|
|
body2,
|
|
callout,
|
|
subhead,
|
|
footnote,
|
|
caption1,
|
|
caption2,
|
|
overline,
|
|
// props font
|
|
thin,
|
|
ultraLight,
|
|
light,
|
|
regular,
|
|
medium,
|
|
semibold,
|
|
bold,
|
|
heavy,
|
|
black,
|
|
//numberOfLines
|
|
numberOfLines,
|
|
textAlign,
|
|
//custom
|
|
style,
|
|
//children
|
|
children,
|
|
} = props;
|
|
|
|
|
|
return (
|
|
<Text
|
|
style={StyleSheet.flatten([
|
|
header && Typography.header,
|
|
title1 && Typography.title1,
|
|
title2 && Typography.title2,
|
|
title3 && Typography.title3,
|
|
headline && Typography.headline,
|
|
body1 && Typography.body1,
|
|
body2 && Typography.body2,
|
|
callout && Typography.callout,
|
|
subhead && Typography.subhead,
|
|
footnote && Typography.footnote,
|
|
caption1 && Typography.caption1,
|
|
caption2 && Typography.caption2,
|
|
overline && Typography.overline,
|
|
//custom for font
|
|
thin && StyleSheet.flatten({ fontWeight: FontWeight.thin }),
|
|
ultraLight && StyleSheet.flatten({ fontWeight: FontWeight.ultraLight }),
|
|
light && StyleSheet.flatten({ fontWeight: FontWeight.light }),
|
|
regular && StyleSheet.flatten({ fontWeight: FontWeight.regular }),
|
|
medium && StyleSheet.flatten({ fontWeight: FontWeight.medium }),
|
|
semibold && StyleSheet.flatten({ fontWeight: FontWeight.semibold }),
|
|
bold && StyleSheet.flatten({ fontWeight: FontWeight.bold }),
|
|
heavy && StyleSheet.flatten({ fontWeight: FontWeight.heavy }),
|
|
black && StyleSheet.flatten({ fontWeight: FontWeight.black }),
|
|
style && style,
|
|
])}
|
|
{...props}
|
|
numberOfLines={numberOfLines}>
|
|
{children}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
// Define typechecking
|
|
CustomText.propTypes = {
|
|
//define style
|
|
header: PropTypes.bool,
|
|
title1: PropTypes.bool,
|
|
title2: PropTypes.bool,
|
|
title3: PropTypes.bool,
|
|
headline: PropTypes.bool,
|
|
body1: PropTypes.bool,
|
|
body2: PropTypes.bool,
|
|
callout: PropTypes.bool,
|
|
subhead: PropTypes.bool,
|
|
footnote: PropTypes.bool,
|
|
caption1: PropTypes.bool,
|
|
caption2: PropTypes.bool,
|
|
overline: PropTypes.bool,
|
|
//define font custom
|
|
thin: PropTypes.bool,
|
|
ultraLight: PropTypes.bool,
|
|
light: PropTypes.bool,
|
|
regular: PropTypes.bool,
|
|
medium: PropTypes.bool,
|
|
semibold: PropTypes.bool,
|
|
bold: PropTypes.bool,
|
|
heavy: PropTypes.bool,
|
|
black: PropTypes.bool,
|
|
//numberOfLines
|
|
numberOfLines: PropTypes.number,
|
|
textAlign: PropTypes.string,
|
|
//custom style
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
children: PropTypes.node, // plain text
|
|
};
|
|
|
|
CustomText.defaultProps = {
|
|
//props for style
|
|
header: false,
|
|
title1: false,
|
|
title2: false,
|
|
title3: false,
|
|
headline: false,
|
|
body1: false,
|
|
body2: false,
|
|
callout: false,
|
|
subhead: false,
|
|
footnote: false,
|
|
caption1: false,
|
|
caption2: false,
|
|
overline: false,
|
|
//props for font
|
|
thin: false,
|
|
ultraLight: false,
|
|
light: false,
|
|
regular: false,
|
|
medium: false,
|
|
semibold: false,
|
|
bold: false,
|
|
heavy: false,
|
|
black: false,
|
|
//numberOfLines
|
|
numberOfLines: 10,
|
|
textAlign: 'left',
|
|
//custom style
|
|
style: {},
|
|
children: '',
|
|
};
|