Skip to content

Commit 8dcf3e3

Browse files
hawkriveshawkrives
authored
Merge pull request #2134 from StoDevX/hawkrives/typography
Add dep on react-native-typography and sprinkle it in
2 parents 790601b + 5e5c83b commit 8dcf3e3

File tree

13 files changed

+296
-106
lines changed

13 files changed

+296
-106
lines changed

‎ios/AllAboutOlaf.xcodeproj/project.pbxproj‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,20 @@
192192
remoteGlobalIDString = 134814201AA4EA6300B7C361;
193193
remoteInfo = SafariViewManager;
194194
};
195+
009C5FF9200C20C00070B6B3 /* PBXContainerItemProxy */ = {
196+
isa = PBXContainerItemProxy;
197+
containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
198+
proxyType = 2;
199+
remoteGlobalIDString = EBF21BDC1FC498900052F4D5;
200+
remoteInfo = jsinspector;
201+
};
202+
009C5FFB200C20C00070B6B3 /* PBXContainerItemProxy */ = {
203+
isa = PBXContainerItemProxy;
204+
containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
205+
proxyType = 2;
206+
remoteGlobalIDString = EBF21BFA1FC4989A0052F4D5;
207+
remoteInfo = "jsinspector-tvOS";
208+
};
195209
00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = {
196210
isa = PBXContainerItemProxy;
197211
containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
@@ -768,6 +782,8 @@
768782
0035C1091E4F59AE00768B84 /* libcxxreact.a */,
769783
0035C10B1E4F59AE00768B84 /* libjschelpers.a */,
770784
0035C10D1E4F59AE00768B84 /* libjschelpers.a */,
785+
009C5FFA200C20C00070B6B3 /* libjsinspector.a */,
786+
009C5FFC200C20C00070B6B3 /* libjsinspector-tvOS.a */,
771787
00CDE5501F1F041900FEA89E /* libthird-party.a */,
772788
00E9BA4C1FBBB54C00E0DFCD /* libthird-party.a */,
773789
00CDE5521F1F041900FEA89E /* libdouble-conversion.a */,
@@ -1254,6 +1270,20 @@
12541270
remoteRef = 009845C01E5DEE6800194E4A /* PBXContainerItemProxy */;
12551271
sourceTree = BUILT_PRODUCTS_DIR;
12561272
};
1273+
009C5FFA200C20C00070B6B3 /* libjsinspector.a */ = {
1274+
isa = PBXReferenceProxy;
1275+
fileType = archive.ar;
1276+
path = libjsinspector.a;
1277+
remoteRef = 009C5FF9200C20C00070B6B3 /* PBXContainerItemProxy */;
1278+
sourceTree = BUILT_PRODUCTS_DIR;
1279+
};
1280+
009C5FFC200C20C00070B6B3 /* libjsinspector-tvOS.a */ = {
1281+
isa = PBXReferenceProxy;
1282+
fileType = archive.ar;
1283+
path = "libjsinspector-tvOS.a";
1284+
remoteRef = 009C5FFB200C20C00070B6B3 /* PBXContainerItemProxy */;
1285+
sourceTree = BUILT_PRODUCTS_DIR;
1286+
};
12571287
00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = {
12581288
isa = PBXReferenceProxy;
12591289
fileType = archive.ar;

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
"react-native-safari-view": "2.1.0",
9494
"react-native-search-bar": "3.3.1",
9595
"react-native-tableview-simple": "0.17.2",
96+
"react-native-typography": "1.2.1",
9697
"react-native-vector-icons": "4.5.0",
9798
"react-navigation": "1.0.0-beta.22",
9899
"react-redux": "5.0.6",

‎source/views/components/__tests__/__snapshots__/button.test.js.snap‎

Lines changed: 60 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -48,22 +48,39 @@ exports[`calls the callback 2`] = `
4848

4949
exports[`can change the title 1`] = `
5050
<Button
51+
containerStyle={
52+
Object {
53+
"alignSelf": "center",
54+
"backgroundColor": "rgb(67, 114, 170)",
55+
"borderRadius": 6,
56+
"marginVertical": 10,
57+
"overflow": "hidden",
58+
"paddingHorizontal": 20,
59+
"paddingVertical": 10,
60+
}
61+
}
5162
disabled={false}
63+
disabledContainerStyle={
64+
Object {
65+
"backgroundColor": "rgb(240, 239, 245)",
66+
}
67+
}
5268
onPress={[Function]}
5369
style={
54-
Array [
55-
Object {
56-
"alignSelf": "center",
57-
"backgroundColor": "rgb(67, 114, 170)",
58-
"borderRadius": 6,
59-
"color": "#FFFFFF",
60-
"marginVertical": 10,
61-
"overflow": "hidden",
62-
"paddingHorizontal": 20,
63-
"paddingVertical": 10,
64-
},
65-
false,
66-
]
70+
Object {
71+
"backgroundColor": "transparent",
72+
"color": "#FFFFFF",
73+
"fontFamily": "System",
74+
"fontSize": 16,
75+
"fontWeight": "400",
76+
"letterSpacing": -0.32,
77+
"lineHeight": 21,
78+
}
79+
}
80+
styleDisabled={
81+
Object {
82+
"color": "rgb(143, 143, 143)",
83+
}
6784
}
6885
>
6986
Title
@@ -72,22 +89,39 @@ exports[`can change the title 1`] = `
7289

7390
exports[`renders 1`] = `
7491
<Button
92+
containerStyle={
93+
Object {
94+
"alignSelf": "center",
95+
"backgroundColor": "rgb(67, 114, 170)",
96+
"borderRadius": 6,
97+
"marginVertical": 10,
98+
"overflow": "hidden",
99+
"paddingHorizontal": 20,
100+
"paddingVertical": 10,
101+
}
102+
}
75103
disabled={false}
104+
disabledContainerStyle={
105+
Object {
106+
"backgroundColor": "rgb(240, 239, 245)",
107+
}
108+
}
76109
onPress={[Function]}
77110
style={
78-
Array [
79-
Object {
80-
"alignSelf": "center",
81-
"backgroundColor": "rgb(67, 114, 170)",
82-
"borderRadius": 6,
83-
"color": "#FFFFFF",
84-
"marginVertical": 10,
85-
"overflow": "hidden",
86-
"paddingHorizontal": 20,
87-
"paddingVertical": 10,
88-
},
89-
false,
90-
]
111+
Object {
112+
"backgroundColor": "transparent",
113+
"color": "#FFFFFF",
114+
"fontFamily": "System",
115+
"fontSize": 16,
116+
"fontWeight": "400",
117+
"letterSpacing": -0.32,
118+
"lineHeight": 21,
119+
}
120+
}
121+
styleDisabled={
122+
Object {
123+
"color": "rgb(143, 143, 143)",
124+
}
91125
}
92126
>
93127
Push me!

‎source/views/components/button.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// @flow
22
import * as React from 'react'
3-
import {StyleSheet} from 'react-native'
3+
import {StyleSheet, Platform} from 'react-native'
44
import BasicButton from 'react-native-button'
55
import noop from 'lodash/noop'
6+
import {material, iOSUIKit} from 'react-native-typography'
67

78
import * as c from './colors'
89

910
const styles = StyleSheet.create({
1011
button: {
1112
backgroundColor: c.denim,
12-
color: c.white,
1313
alignSelf: 'center',
1414
paddingVertical: 10,
1515
paddingHorizontal: 20,
@@ -19,6 +19,14 @@ const styles = StyleSheet.create({
1919
},
2020
disabled: {
2121
backgroundColor: c.iosLightBackground,
22+
},
23+
text: {
24+
...Platform.select({
25+
ios: iOSUIKit.calloutWhiteObject,
26+
android: material.buttonWhiteObject,
27+
}),
28+
},
29+
textDisabled: {
2230
color: c.iosDisabledText,
2331
},
2432
})
@@ -29,14 +37,21 @@ type Props = {
2937
disabled?: boolean,
3038
}
3139

32-
export function Button({title, onPress = noop, disabled = false}: Props) {
40+
export function Button({
41+
title = 'Push me!',
42+
onPress = noop,
43+
disabled = false,
44+
}: Props) {
3345
return (
3446
<BasicButton
47+
containerStyle={styles.button}
3548
disabled={disabled}
49+
disabledContainerStyle={styles.disabled}
3650
onPress={onPress}
37-
style={[styles.button, disabled && styles.disabled]}
51+
style={styles.text}
52+
styleDisabled={styles.textDisabled}
3853
>
39-
{title || 'Push me!'}
54+
{Platform.OS === 'android' ? title.toUpperCase() : title}
4055
</BasicButton>
4156
)
4257
}

‎source/views/components/card.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22
import * as React from 'react'
3-
import {View, Text, StyleSheet} from 'react-native'
3+
import {View, Text, StyleSheet, Platform} from 'react-native'
4+
import {material, iOSUIKit} from 'react-native-typography'
45
import * as c from './colors'
56

67
const cardStyles = StyleSheet.create({
@@ -17,8 +18,16 @@ const cardStyles = StyleSheet.create({
1718
paddingBottom: 6,
1819
},
1920
titleText: {
20-
color: c.androidTextColor,
21-
fontWeight: 'bold',
21+
...Platform.select({
22+
ios: iOSUIKit.title3Object,
23+
android: material.titleObject,
24+
}),
25+
},
26+
footerText: {
27+
...Platform.select({
28+
ios: iOSUIKit.footnoteObject,
29+
android: material.captionObject,
30+
}),
2231
},
2332
footer: {
2433
borderTopWidth: 1,
@@ -50,7 +59,9 @@ export function Card({header, footer, children, style}: Props) {
5059

5160
{footer ? (
5261
<View style={cardStyles.footer}>
53-
<Text selectable={true}>{footer}</Text>
62+
<Text selectable={true} style={cardStyles.footerText}>
63+
{footer}
64+
</Text>
5465
</View>
5566
) : null}
5667
</View>

‎source/views/components/markdown/formatting.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,33 @@
22

33
import glamorous from 'glamorous-native'
44
import {SelectableText} from './selectable'
5+
import {Platform, Text} from 'react-native'
6+
import {iOSUIKit, material} from 'react-native-typography'
7+
8+
export const BaseText = glamorous(Text)({
9+
...Platform.select({
10+
ios: iOSUIKit.bodyObject,
11+
android: material.body1Object,
12+
}),
13+
})
514

615
export const Paragraph = glamorous(SelectableText)({
716
marginVertical: 3,
817
paddingRight: 4,
18+
...Platform.select({
19+
ios: iOSUIKit.bodyObject,
20+
android: material.body1Object,
21+
}),
922
})
1023

1124
export const BlockQuote = glamorous(Paragraph)({
25+
marginHorizontal: 8,
26+
marginVertical: 5,
1227
fontStyle: 'italic',
13-
marginLeft: 8,
28+
...Platform.select({
29+
ios: iOSUIKit.calloutObject,
30+
android: material.captionObject,
31+
}),
1432
})
1533

1634
export const Strong = glamorous.text({

‎source/views/components/markdown/heading.js‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,56 @@
11
// @flow
22

3+
import * as React from 'react'
4+
import {Platform} from 'react-native'
35
import glamorous from 'glamorous-native'
46
import {SelectableText} from './selectable'
7+
import {iOSUIKit, material} from 'react-native-typography'
58

6-
export const Heading = glamorous(SelectableText)({
9+
export const Header = glamorous(SelectableText)({
710
marginTop: 8,
811
marginBottom: 4,
9-
fontWeight: 'bold',
10-
fontSize: 16,
1112
})
13+
14+
const h1 = {
15+
...Platform.select({
16+
ios: iOSUIKit.title3EmphasizedObject,
17+
android: material.headlineObject,
18+
}),
19+
}
20+
21+
const h2 = {
22+
...Platform.select({
23+
ios: iOSUIKit.title3Object,
24+
android: material.titleObject,
25+
}),
26+
}
27+
28+
const h3 = {
29+
...Platform.select({
30+
ios: iOSUIKit.subheadEmphasizedObject,
31+
android: material.subheadingObject,
32+
}),
33+
}
34+
35+
const h4 = {
36+
...Platform.select({
37+
ios: iOSUIKit.subheadObject,
38+
android: material.buttonObject,
39+
}),
40+
}
41+
42+
export const Heading = (props: any) => {
43+
switch (props.level) {
44+
case 1:
45+
return <Header style={h1}>{props.children}</Header>
46+
case 2:
47+
return <Header style={h2}>{props.children}</Header>
48+
case 3:
49+
return <Header style={h3}>{props.children}</Header>
50+
case 4:
51+
case 5:
52+
case 6:
53+
default:
54+
return <Header style={h4}>{props.children}</Header>
55+
}
56+
}

‎source/views/components/markdown/list.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// @flow
22

33
import * as React from 'react'
4-
import glamorous, {View, Text} from 'glamorous-native'
5-
import {Paragraph} from './formatting'
4+
import glamorous, {View} from 'glamorous-native'
5+
import {BaseText, Paragraph} from './formatting'
66

77
// the list itself
88
export const List = glamorous(View)({})
@@ -21,7 +21,7 @@ export class ListItem extends React.PureComponent<Props> {
2121
render() {
2222
return (
2323
<View alignItems="center" flexDirection="row">
24-
<Text paddingRight={4}>• </Text>
24+
<BaseText paddingRight={4}>• </BaseText>
2525
<ListText {...this.props} />
2626
</View>
2727
)

0 commit comments

Comments
 (0)