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    marginVertical: em(1),
75  },
76  b: {
77    fontWeight: 'bold',
78  },
79  q: {
80    fontStyle: 'italic',
81  },
82  code: {
83    fontFamily: Platform.select({ default: 'Courier', ios: 'Courier New', android: 'monospace' }),
84    fontWeight: '500',
85  },
86  pre: {
87    marginVertical: em(1),
88  },
89  blockQuote: {
90    marginVertical: em(1),
91  },
92  br: {
93    width: 0,
94    height: em(0.5),
95  },
96  s: {
97    textDecorationLine: 'line-through',
98    textDecorationStyle: 'solid',
99  },
100  mark: {
101    backgroundColor: 'yellow',
102    color: 'black',
103  },
104  i: {
105    fontStyle: 'italic',
106  },
107});
108