/
text.tsx
124 lines (108 loc) · 3.36 KB
/
text.tsx
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
122
123
124
import React from "react";
import { Text as RNText, TextStyle } from "react-native";
import responsiveSize from "../../../utils/responsive-size";
import {
textStyleFunctions,
TextStyleProps,
} from "../../../theme/src/style-functions";
import { AtomComponentProps, FinalPearlTheme } from "../../../theme/src/types";
import { useTheme } from "../../../hooks/useTheme";
import { pearl } from "../../../pearl";
type BaseTextProps = React.ComponentProps<typeof RNText> & {
/**
* Whether to slightly scale the font size based on the screen dimensions
*
* @default true
*/
scaleFontSize?: boolean;
};
/**
* Builds a font configuration object based on the provided text style and whether font scaling is allowed.
*
* @param textStyle - The text style to build the font configuration from.
* @param allowFontScaling - Whether font scaling is allowed.
* @returns A font configuration object.
*/
export const buildFontConfig = (
textStyle: TextStyle,
allowFontScaling: boolean,
theme: FinalPearlTheme
): object => {
let fontWeight: string | number = textStyle.fontWeight ?? "400";
if (!!theme.fontWeights[fontWeight])
fontWeight = theme.fontWeights[fontWeight];
const fontStyle = textStyle.fontStyle ?? "normal";
let fontSize = textStyle.fontSize;
let lineHeight = textStyle.lineHeight;
if (allowFontScaling) {
fontSize = responsiveSize(fontSize);
lineHeight = responsiveSize(lineHeight);
}
const initialFontFamily = textStyle.fontFamily;
if (!initialFontFamily || !theme.fontConfig[initialFontFamily]) {
throw new Error(
`Font family "${initialFontFamily}" does not exist in the theme.fontConfig`
);
}
const finalFontFamily =
theme.fontConfig[initialFontFamily][fontWeight][fontStyle];
return {
fontSize,
fontWeight,
fontFamily: finalFontFamily,
fontStyle,
};
};
/**
* CustomText is a forwardRef component that applies a font configuration to the provided text style.
*
* @param scaleFontSize - Whether to slightly scale the font size based on the screen dimensions.
* @param props - The props to apply the font configuration to.
* @param ref - The ref to forward.
* @returns A <RNText /> component with the font configuration applied.
*/
const CustomText = React.forwardRef(
(
{
scaleFontSize = true,
...props
}: AtomComponentProps<"Text", BaseTextProps, TextStyleProps>,
ref: any
) => {
const { theme } = useTheme();
// Apply the font configuration to the provided text style.
props.style = React.useMemo(() => {
return {
includeFontPadding: false,
...(props.style as any),
...buildFontConfig(props.style as TextStyle, scaleFontSize, theme),
};
}, [props.style, scaleFontSize, theme]);
return (
<RNText
ref={ref}
accessible={true}
accessibilityRole="text"
allowFontScaling={scaleFontSize}
{...props}
>
{props.children}
</RNText>
);
}
);
/**
* Text is the component which controls the typography across your app. By default, it renders a <Text /> component
*/
const Text = pearl<BaseTextProps, "atom", Record<string, any>, TextStyleProps>(
CustomText,
{
componentName: "Text",
type: "atom",
animatable: true,
},
textStyleFunctions
);
export type TextProps = React.ComponentProps<typeof Text>;
Text.displayName = "Text";
export default Text;