-
Notifications
You must be signed in to change notification settings - Fork 2
/
fonts.ts
121 lines (109 loc) · 3.17 KB
/
fonts.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* Utility functions to manage font properties to style mapping for both iOS and Android
* Fonts are managed differently on Android and iOS. Read the Font section of the
* README file included in this repository.
*/
import { Platform } from "react-native";
/**
* Choose the font name based on the platform
*/
const fonts = {
TitilliumSansPro: Platform.select({
android: "TitilliumSansPro",
web: "TitilliumSansPro",
ios: "Titillium Sans Pro"
}),
ReadexPro: Platform.select({
android: "ReadexPro",
web: "ReadexPro",
ios: "Readex Pro"
}),
DMMono: Platform.select({
android: "DMMono",
web: "DMMono",
ios: "DM Mono"
})
};
export type IOFontFamily = keyof typeof fonts;
const weights = ["Light", "Regular", "Medium", "Semibold", "Bold"] as const;
export type IOFontWeight = (typeof weights)[number];
const weightValues = ["300", "400", "500", "600", "700"] as const;
export type FontWeightValue = (typeof weightValues)[number];
/**
* Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
* used on iOS
*/
export const fontWeights: Record<IOFontWeight, FontWeightValue> = {
Light: "300",
Regular: "400",
Medium: "500",
Semibold: "600",
Bold: "700"
};
export type FontFamily = keyof typeof fonts;
export type FontWeight = keyof typeof fontWeights;
/**
* Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
* used on iOS
*/
export const fontWeightsMap: Record<IOFontWeight, FontWeightValue> = {
Light: "300",
Regular: "400",
Medium: "500",
Semibold: "600",
Bold: "700"
};
export enum FontStyle {
"normal" = "normal",
"italic" = "italic"
}
type FontStyleObject = {
fontFamily: string;
fontWeight?: FontWeightValue;
fontStyle?: FontStyle;
};
/**
* Get the correct `fontFamily` name on both Android and iOS.
* @param font
* @param weight
* @param isItalic
*/
export const makeFontFamilyName = (
font: FontFamily,
weight?: IOFontWeight,
isItalic: boolean = false
): string =>
Platform.select({
web: fonts[font],
android: `${fonts[font]}-${weight || "Regular"}${isItalic ? "Italic" : ""}`,
ios: fonts[font],
default: "undefined"
});
/**
* Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android).
* @param weight
* @param isItalic
* @param font
*/
export const makeFontStyleObject = (
weight: IOFontWeight | undefined = undefined,
isItalic: boolean | undefined = false,
font: FontFamily | undefined = "TitilliumSansPro"
): FontStyleObject =>
Platform.select({
web: {
fontFamily: makeFontFamilyName(font, weight, isItalic),
fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
},
android: {
includeFontPadding: false,
fontFamily: makeFontFamilyName(font, weight, isItalic)
},
ios: {
fontFamily: makeFontFamilyName(font, weight, isItalic),
fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
},
default: { fontFamily: "undefined" }
});