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