1import React, { ComponentType, forwardRef } from 'react';
2import { Platform, StyleSheet } from 'react-native';
3
4import { em } from '../css/units';
5import Text, { TextProps } from '../primitives/Text';
6
7function createHeadingComponent(level: number): ComponentType<TextProps> {
8  const nativeProps: any = Platform.select({
9    web: {
10      accessibilityLevel: level,
11    },
12    default: {},
13  });
14  return forwardRef((props: TextProps, ref) => {
15    return (
16      <Text
17        {...nativeProps}
18        accessibilityRole="header"
19        {...props}
20        style={[styles[`h${level}`], props.style]}
21        ref={ref}
22      />
23    );
24  }) as ComponentType<TextProps>;
25}
26
27export const H1 = createHeadingComponent(1);
28export const H2 = createHeadingComponent(2);
29export const H3 = createHeadingComponent(3);
30export const H4 = createHeadingComponent(4);
31export const H5 = createHeadingComponent(5);
32export const H6 = createHeadingComponent(6);
33
34// Default web styles: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
35const styles = StyleSheet.create({
36  h1: {
37    // @ts-ignore
38    fontSize: em(2),
39    // @ts-ignore
40    marginVertical: em(0.67),
41    fontWeight: 'bold',
42  },
43  h2: {
44    // @ts-ignore
45    fontSize: em(1.5),
46    // @ts-ignore
47    marginVertical: em(0.83),
48    fontWeight: 'bold',
49  },
50  h3: {
51    // @ts-ignore
52    fontSize: em(1.17),
53    // @ts-ignore
54    marginVertical: em(1),
55    fontWeight: 'bold',
56  },
57  h4: {
58    // @ts-ignore
59    fontSize: em(1),
60    // @ts-ignore
61    marginVertical: em(1.33),
62    fontWeight: 'bold',
63  },
64  h5: {
65    // @ts-ignore
66    fontSize: em(0.83),
67    // @ts-ignore
68    marginVertical: em(1.67),
69    fontWeight: 'bold',
70  },
71  h6: {
72    // @ts-ignore
73    fontSize: em(0.67),
74    // @ts-ignore
75    marginVertical: em(2.33),
76    fontWeight: 'bold',
77  },
78});
79