1import React, { ComponentType, forwardRef } from 'react';
2import { StyleSheet, Platform } 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 <Text {...props} style={[styles.b, style]} ref={ref} />;
15}) as ComponentType<TextProps>;
16
17export const S = forwardRef(({ style, ...props }: TextProps, ref) => {
18  return <Text {...props} style={[styles.s, style]} ref={ref} />;
19}) as ComponentType<TextProps>;
20
21export const I = forwardRef(({ style, ...props }: TextProps, ref) => {
22  return <Text {...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    <Text {...props} style={[styles.q, style]} ref={ref}>
28      "{children}"
29    </Text>
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 Mark = forwardRef(({ style, ...props }: TextProps, ref) => {
42  return <Text {...props} style={[styles.mark, style]} ref={ref} />;
43}) as ComponentType<TextProps>;
44
45export const Code = forwardRef(({ style, ...props }: TextProps, ref) => {
46  return <Text {...props} style={[styles.code, style]} ref={ref} />;
47}) as ComponentType<TextProps>;
48
49function isTextProps(props: any): props is TextProps {
50  return typeof props.children === 'string';
51}
52
53type PreProps = TextProps | ViewProps;
54
55export const Pre = forwardRef((props: PreProps, ref: any) => {
56  if (isTextProps(props)) {
57    return <Text {...props} style={[styles.code, styles.pre, props.style]} ref={ref} />;
58  }
59  return <View {...props} style={[styles.pre, props.style]} ref={ref} />;
60}) as ComponentType<PreProps>;
61
62// Extract dateTime to prevent passing it to the native Text element
63export const Time = forwardRef(({ dateTime, ...props }: TimeProps, ref) => {
64  return <Text {...props} ref={ref} />;
65}) as ComponentType<TimeProps>;
66
67export const Strong = B;
68export const Del = S;
69export const EM = I;
70export const Span = Text;
71
72const styles = StyleSheet.create({
73  p: {
74    // @ts-ignore
75    marginVertical: em(1),
76  },
77  b: {
78    fontWeight: 'bold',
79  },
80  q: {
81    fontStyle: 'italic',
82  },
83  code: {
84    fontFamily: Platform.select({ default: 'Courier', ios: 'Courier New', android: 'monospace' }),
85    fontWeight: '500',
86  },
87  pre: {
88    // @ts-ignore
89    marginVertical: em(1),
90  },
91  blockQuote: {
92    // @ts-ignore
93    marginVertical: em(1),
94  },
95  br: {
96    width: 0,
97    // @ts-ignore
98    height: em(0.5),
99  },
100  s: {
101    textDecorationLine: 'line-through',
102    textDecorationStyle: 'solid',
103  },
104  mark: {
105    backgroundColor: 'yellow',
106    color: 'black',
107  },
108  i: {
109    fontStyle: 'italic',
110  },
111});
112