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    fontSize: em(2),
38    marginVertical: em(0.67),
39    fontWeight: 'bold',
40  },
41  h2: {
42    fontSize: em(1.5),
43    marginVertical: em(0.83),
44    fontWeight: 'bold',
45  },
46  h3: {
47    fontSize: em(1.17),
48    marginVertical: em(1),
49    fontWeight: 'bold',
50  },
51  h4: {
52    fontSize: em(1),
53    marginVertical: em(1.33),
54    fontWeight: 'bold',
55  },
56  h5: {
57    fontSize: em(0.83),
58    marginVertical: em(1.67),
59    fontWeight: 'bold',
60  },
61  h6: {
62    fontSize: em(0.67),
63    marginVertical: em(2.33),
64    fontWeight: 'bold',
65  },
66});
67