1import React, { ComponentType, forwardRef } from 'react';
2import { StyleSheet } from 'react-native';
3
4import { em } from '../css/units';
5import Text, { TextProps } from '../primitives/Text';
6import View, { ViewProps } from '../primitives/View';
7import { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';
8
9export const P = forwardRef(({ style, ...props }: TextProps, ref) => {
10  return <Text {...props} style={[styles.p, style]} ref={ref} />;
11}) as ComponentType<TextProps>;
12
13export const B = forwardRef(({ style, ...props }: TextProps, ref) => {
14  return <P {...props} style={[styles.b, style]} ref={ref} />;
15}) as ComponentType<TextProps>;
16
17export const S = forwardRef(({ style, ...props }: TextProps, ref) => {
18  return <P {...props} style={[styles.s, style]} ref={ref} />;
19}) as ComponentType<TextProps>;
20
21export const I = forwardRef(({ style, ...props }: TextProps, ref) => {
22  return <P {...props} style={[styles.i, style]} ref={ref} />;
23}) as ComponentType<TextProps>;
24
25export const Q = forwardRef(({ children, cite, style, ...props }: QuoteProps, ref) => {
26  return (
27    <P {...props} style={[styles.q, style]} ref={ref}>
28      "{children}"
29    </P>
30  );
31}) as ComponentType<QuoteProps>;
32
33export const BlockQuote = forwardRef(({ style, cite, ...props }: BlockQuoteProps, ref) => {
34  return <View {...props} style={[styles.blockQuote, style]} ref={ref} />;
35}) as ComponentType<BlockQuoteProps>;
36
37export const BR = forwardRef(({ style, ...props }: TextProps, ref) => {
38  return <Text {...props} style={[styles.br, style]} ref={ref} />;
39}) as ComponentType<TextProps>;
40
41export const Small = forwardRef(({ style, ...props }: TextProps, ref) => {
42  return <Text {...props} style={[styles.small, style]} ref={ref} />;
43}) as ComponentType<TextProps>;
44
45export const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {
46  return <Text {...props} style={[styles.mark, style]} ref={ref} />;
47}) as ComponentType<TextProps>;
48
49// TODO: Lazy load mono font on native
50export const Code = forwardRef((props: TextProps, ref) => {
51  return <Text {...props} ref={ref} />;
52}) as ComponentType<TextProps>;
53
54function isTextProps(props: any): props is TextProps {
55  return typeof props.children === 'string';
56}
57
58type PreProps = TextProps | ViewProps;
59
60// TODO: Lazy load mono font on native
61export const Pre = forwardRef((props: PreProps, ref: any) => {
62  if (isTextProps(props)) {
63    return <Text {...props} style={[styles.pre, props.style]} ref={ref} />;
64  }
65  return <View {...props} style={[styles.pre, props.style]} ref={ref} />;
66}) as ComponentType<PreProps>;
67
68// Extract dateTime to prevent passing it to the native Text element
69export const Time = forwardRef(({ dateTime, ...props }: TimeProps, ref) => {
70  return <Text {...props} ref={ref} />;
71}) as ComponentType<TimeProps>;
72
73export const Strong = B;
74export const Del = S;
75export const EM = I;
76
77const styles = StyleSheet.create({
78  p: {
79    marginVertical: em(1),
80    fontSize: em(1),
81  },
82  b: {
83    fontWeight: 'bold',
84  },
85  q: {
86    fontStyle: 'italic',
87  },
88  pre: {
89    marginVertical: em(1),
90  },
91  blockQuote: {
92    marginVertical: em(1),
93  },
94  br: {
95    width: 0,
96    height: 8,
97  },
98  small: {
99    fontSize: 10,
100  },
101  s: {
102    textDecorationLine: 'line-through',
103    textDecorationStyle: 'solid',
104  },
105  mark: {
106    backgroundColor: 'yellow',
107    color: 'black',
108  },
109  i: {
110    fontStyle: 'italic',
111  },
112});
113