zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-02 18:41:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] default Text styles

Browse Source 
Match React Native's default font-size for Text, and use the system font
stack by default. Nested Text elements will inherit font styles from
their parent Text.
This commit is contained in:
Nicolas Gallagher
2017-09-11 15:47:49 -07:00
parent e802026298
commit 5ed2127175
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Text/__tests__/__snapshots__/index-test.js.snap
+3 -3
View File
@@ -2,7 +2,7 @@
exports[`components/Text prop "onPress" 1`] = ` exports[`components/Text prop "onPress" 1`] = `
<div <div
className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0" className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-1b43r93 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
dir="auto" dir="auto"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
@@ -12,14 +12,14 @@ exports[`components/Text prop "onPress" 1`] = `
exports[`components/Text prop "selectable" 1`] = ` exports[`components/Text prop "selectable" 1`] = `
<div <div
className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0" className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-1b43r93 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
dir="auto" dir="auto"
/> />
`; `;
exports[`components/Text prop "selectable" 2`] = ` exports[`components/Text prop "selectable" 2`] = `
<div <div
className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-userSelect-lrvibr rn-whiteSpace-q42fyq rn-wordWrap-qvutc0" className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-fontFamily-10u92zi rn-fontSize-1b43r93 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-userSelect-lrvibr rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
dir="auto" dir="auto"
/> />
`; `;
src/components/Text/index.js
+9 -3
View File
@@ -66,7 +66,7 @@ class Text extends Component {
otherProps.dir = dir !== undefined ? dir : 'auto'; otherProps.dir = dir !== undefined ? dir : 'auto';
otherProps.style = [ otherProps.style = [
styles.initial, styles.initial,
this.context.isInAParentText !== true && styles.preserveWhitespace, this.context.isInAParentText === true && styles.isInAParentText,
style, style,
selectable === false && styles.notSelectable, selectable === false && styles.notSelectable,
numberOfLines === 1 && styles.singleLineStyle, numberOfLines === 1 && styles.singleLineStyle,
@@ -94,13 +94,19 @@ const styles = StyleSheet.create({
color: 'inherit', color: 'inherit',
display: 'inline', display: 'inline',
font: 'inherit', font: 'inherit',
fontFamily: 'System',
fontSize: 14,
margin: 0, margin: 0,
padding: 0, padding: 0,
textDecorationLine: 'none', textDecorationLine: 'none',
whiteSpace: 'pre-wrap',
wordWrap: 'break-word' wordWrap: 'break-word'
}, },
preserveWhitespace: { isInAParentText: {
whiteSpace: 'pre-wrap' // inherit parent font styles
fontFamily: 'inherit',
fontSize: 'inherit',
whiteSpace: 'inherit'
}, },
notSelectable: { notSelectable: {
userSelect: 'none' userSelect: 'none'