Skip to content

Refactor typography presets code #809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 15, 2020
Merged

Refactor typography presets code #809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cbededb
Refactor typography presets code
ethanshar Jun 10, 2020
512e35b
Merge branch 'master' into infra/refactor_typography_preset
ethanshar Jun 14, 2020
e5cbe94
fix typings for dynamic typography presets
ethanshar Jun 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions generatedTypes/components/button/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,14 +167,18 @@ declare class Button extends PureComponent<Props, ButtonState> {
elevation: number;
};
text: {
backgroundColor: string;
flex: number;
flexDirection: "row";
} | {
color?: string | undefined;
fontFamily?: string | undefined;
fontSize?: number | undefined;
fontStyle?: "normal" | "italic" | undefined;
fontWeight?: "200" | "300" | "400" | "600" | "500" | "700" | "800" | "900" | "normal" | "bold" | "100" | undefined;
fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
letterSpacing?: number | undefined;
lineHeight?: number | undefined;
textAlign?: "center" | "left" | "right" | "auto" | "justify" | undefined;
textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
textDecorationStyle?: "solid" | "double" | "dotted" | "dashed" | undefined;
textDecorationColor?: string | undefined;
Expand All @@ -184,7 +188,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
height: number;
} | undefined;
textShadowRadius?: number | undefined;
textTransform?: "none" | "uppercase" | "capitalize" | "lowercase" | undefined;
textTransform?: "none" | "capitalize" | "uppercase" | "lowercase" | undefined;
testID?: string | undefined;
fontVariant?: import("react-native").FontVariant[] | undefined;
writingDirection?: "auto" | "ltr" | "rtl" | undefined;
Expand Down Expand Up @@ -214,14 +218,14 @@ declare class Button extends PureComponent<Props, ButtonState> {
borderWidth?: number | undefined;
opacity?: number | undefined;
elevation?: number | undefined;
alignContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "stretch" | undefined;
alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
alignSelf?: "center" | "flex-start" | "flex-end" | "auto" | "stretch" | "baseline" | undefined;
alignSelf?: "auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
aspectRatio?: number | undefined;
borderEndWidth?: string | number | undefined;
borderStartWidth?: string | number | undefined;
bottom?: string | number | undefined;
display?: "flex" | "none" | undefined;
display?: "none" | "flex" | undefined;
end?: string | number | undefined;
flex: number;
flexBasis?: string | number | undefined;
Expand Down Expand Up @@ -276,7 +280,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
scaleY?: number | undefined;
translateX?: number | undefined;
translateY?: number | undefined;
textAlignVertical?: "center" | "top" | "bottom" | "auto" | undefined;
textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
includeFontPadding?: boolean | undefined;
};
};
Expand Down
95 changes: 2 additions & 93 deletions generatedTypes/style/typography.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,102 +13,11 @@ export declare class Typography {
loadTypographies(typographies: Dictionary<any>): void;
getKeysPattern(): RegExp;
generateKeysPattern(): RegExp;
measureWidth(text: string, typography?: TextStyle, containerWidth?: number): Promise<any>;
measureWidth(text: string, typography?: TextStyle | undefined, containerWidth?: number): Promise<any>;
measureTextSize(text: string, typography?: MeasureTextTypography, containerWidth?: number): Promise<any>;
}
declare type CustomTypographyPresets = {
[custom: string]: TextStyle;
};
declare const typography: Typography & {
text10: TextStyle;
text10T: TextStyle;
text10L: TextStyle;
text10R: TextStyle;
text10M: TextStyle;
text10BO: TextStyle;
text10H: TextStyle;
text10BL: TextStyle;
text20: TextStyle;
text20T: TextStyle;
text20L: TextStyle;
text20R: TextStyle;
text20M: TextStyle;
text20BO: TextStyle;
text20H: TextStyle;
text20BL: TextStyle;
text20B: TextStyle;
text30: TextStyle;
text30T: TextStyle;
text30L: TextStyle;
text30R: TextStyle;
text30M: TextStyle;
text30BO: TextStyle;
text30H: TextStyle;
text30BL: TextStyle;
text40: TextStyle;
text40T: TextStyle;
text40L: TextStyle;
text40R: TextStyle;
text40M: TextStyle;
text40BO: TextStyle;
text40H: TextStyle;
text40BL: TextStyle;
text50: TextStyle;
text50T: TextStyle;
text50L: TextStyle;
text50R: TextStyle;
text50M: TextStyle;
text50BO: TextStyle;
text50H: TextStyle;
text50BL: TextStyle;
text60: TextStyle;
text60T: TextStyle;
text60L: TextStyle;
text60R: TextStyle;
text60M: TextStyle;
text60BO: TextStyle;
text60H: TextStyle;
text60BL: TextStyle;
text60B: TextStyle;
text65: TextStyle;
text65T: TextStyle;
text65L: TextStyle;
text65R: TextStyle;
text65M: TextStyle;
text65BO: TextStyle;
text65H: TextStyle;
text65BL: TextStyle;
text70: TextStyle;
text70T: TextStyle;
text70L: TextStyle;
text70R: TextStyle;
text70M: TextStyle;
text70BO: TextStyle;
text70H: TextStyle;
text70BL: TextStyle;
text80: TextStyle;
text80T: TextStyle;
text80L: TextStyle;
text80R: TextStyle;
text80M: TextStyle;
text80BO: TextStyle;
text80H: TextStyle;
text80BL: TextStyle;
text90: TextStyle;
text90T: TextStyle;
text90L: TextStyle;
text90R: TextStyle;
text90M: TextStyle;
text90BO: TextStyle;
text90H: TextStyle;
text90BL: TextStyle;
text100: TextStyle;
text100T: TextStyle;
text100L: TextStyle;
text100R: TextStyle;
text100M: TextStyle;
text100BO: TextStyle;
text100H: TextStyle;
text100BL: TextStyle;
} & CustomTypographyPresets;
declare const typography: Typography & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", TextStyle>> & CustomTypographyPresets;
export default typography;
102 changes: 3 additions & 99 deletions generatedTypes/style/typographyPresets.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,103 +1,7 @@
import { TextStyle } from 'react-native';
export declare const WEIGHT_TYPES: {
THIN: "200";
LIGHT: "300";
REGULAR: "400";
MEDIUM: "600" | "500";
BOLD: "700";
HEAVY: "800";
BLACK: "900";
};
declare const Typography: {
text10: TextStyle;
text10T: TextStyle;
text10L: TextStyle;
text10R: TextStyle;
text10M: TextStyle;
text10BO: TextStyle;
text10H: TextStyle;
text10BL: TextStyle;
text20: TextStyle;
text20T: TextStyle;
text20L: TextStyle;
text20R: TextStyle;
text20M: TextStyle;
text20BO: TextStyle;
text20H: TextStyle;
text20BL: TextStyle;
text20B: TextStyle;
text30: TextStyle;
text30T: TextStyle;
text30L: TextStyle;
text30R: TextStyle;
text30M: TextStyle;
text30BO: TextStyle;
text30H: TextStyle;
text30BL: TextStyle;
text40: TextStyle;
text40T: TextStyle;
text40L: TextStyle;
text40R: TextStyle;
text40M: TextStyle;
text40BO: TextStyle;
text40H: TextStyle;
text40BL: TextStyle;
text50: TextStyle;
text50T: TextStyle;
text50L: TextStyle;
text50R: TextStyle;
text50M: TextStyle;
text50BO: TextStyle;
text50H: TextStyle;
text50BL: TextStyle;
text60: TextStyle;
text60T: TextStyle;
text60L: TextStyle;
text60R: TextStyle;
text60M: TextStyle;
text60BO: TextStyle;
text60H: TextStyle;
text60BL: TextStyle;
text60B: TextStyle;
text65: TextStyle;
text65T: TextStyle;
text65L: TextStyle;
text65R: TextStyle;
text65M: TextStyle;
text65BO: TextStyle;
text65H: TextStyle;
text65BL: TextStyle;
text70: TextStyle;
text70T: TextStyle;
text70L: TextStyle;
text70R: TextStyle;
text70M: TextStyle;
text70BO: TextStyle;
text70H: TextStyle;
text70BL: TextStyle;
text80: TextStyle;
text80T: TextStyle;
text80L: TextStyle;
text80R: TextStyle;
text80M: TextStyle;
text80BO: TextStyle;
text80H: TextStyle;
text80BL: TextStyle;
text90: TextStyle;
text90T: TextStyle;
text90L: TextStyle;
text90R: TextStyle;
text90M: TextStyle;
text90BO: TextStyle;
text90H: TextStyle;
text90BL: TextStyle;
text100: TextStyle;
text100T: TextStyle;
text100L: TextStyle;
text100R: TextStyle;
text100M: TextStyle;
text100BO: TextStyle;
text100H: TextStyle;
text100BL: TextStyle;
[key: string]: TextStyle['fontWeight'];
};
declare type TypographyKeys = Record<'text10' | 'text20' | 'text30' | 'text40' | 'text50' | 'text60' | 'text65' | 'text70' | 'text80' | 'text90' | 'text100' | 'text10T' | 'text10L' | 'text10R' | 'text10M' | 'text10BO' | 'text10H' | 'text10BL' | 'text20T' | 'text20L' | 'text20R' | 'text20M' | 'text20BO' | 'text20H' | 'text20BL' | 'text30T' | 'text30L' | 'text30R' | 'text30M' | 'text30BO' | 'text30H' | 'text30BL' | 'text40T' | 'text40L' | 'text40R' | 'text40M' | 'text40BO' | 'text40H' | 'text40BL' | 'text50T' | 'text50L' | 'text50R' | 'text50M' | 'text50BO' | 'text50H' | 'text50BL' | 'text60T' | 'text60L' | 'text60R' | 'text60M' | 'text60BO' | 'text60H' | 'text60BL' | 'text65T' | 'text65L' | 'text65R' | 'text65M' | 'text65BO' | 'text65H' | 'text65BL' | 'text70T' | 'text70L' | 'text70R' | 'text70M' | 'text70BO' | 'text70H' | 'text70BL' | 'text80T' | 'text80L' | 'text80R' | 'text80M' | 'text80BO' | 'text80H' | 'text80BL' | 'text90T' | 'text90L' | 'text90R' | 'text90M' | 'text90BO' | 'text90H' | 'text90BL' | 'text100T' | 'text100L' | 'text100R' | 'text100M' | 'text100BO' | 'text100H' | 'text100BL', TextStyle>;
declare const Typography: Partial<TypographyKeys>;
export default Typography;
2 changes: 1 addition & 1 deletion src/style/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class Typography {
}
}

async measureTextSize(text: string, typography: MeasureTextTypography = TypographyPresets.text70, containerWidth = Constants.screenWidth) {
async measureTextSize(text: string, typography: MeasureTextTypography = TypographyPresets.text70!, containerWidth = Constants.screenWidth) {
const rnTextSize = require('react-native-text-size').default;
if (text) {
const size = await rnTextSize.measure({
Expand Down
Loading