1import { ComponentType, forwardRef } from 'react';
2import { createElement, StyleSheet } from 'react-native';
3
4import { TextProps } from '../primitives/Text';
5import { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';
6
7export const P = forwardRef(({ style, ...props }: TextProps, ref) => {
8  return createElement('p', { ...props, style: [styles.reset, style], ref });
9}) as ComponentType<TextProps>;
10
11export const B = forwardRef(({ style, ...props }: TextProps, ref) => {
12  return createElement('b', { ...props, style: [styles.reset, style], ref });
13}) as ComponentType<TextProps>;
14
15export const S = forwardRef(({ style, ...props }: TextProps, ref) => {
16  return createElement('s', { ...props, style: [styles.reset, style], ref });
17}) as ComponentType<TextProps>;
18
19export const Del = forwardRef(({ style, ...props }: TextProps, ref) => {
20  return createElement('del', { ...props, style: [styles.reset, style], ref });
21}) as ComponentType<TextProps>;
22
23export const Strong = forwardRef(({ style, ...props }: TextProps, ref) => {
24  return createElement('strong', { ...props, style: [styles.reset, style], ref });
25}) as ComponentType<TextProps>;
26
27export const I = forwardRef(({ style, ...props }: TextProps, ref) => {
28  return createElement('i', { ...props, style: [styles.reset, style], ref });
29}) as ComponentType<TextProps>;
30
31export const Q = forwardRef(({ style, ...props }: QuoteProps, ref) => {
32  return createElement('q', { ...props, style: [styles.reset, style], ref });
33}) as ComponentType<QuoteProps>;
34
35export const BlockQuote = forwardRef(({ style, ...props }: BlockQuoteProps, ref) => {
36  return createElement('blockquote', { ...props, style: [styles.reset, style], ref });
37}) as ComponentType<BlockQuoteProps>;
38
39export const EM = forwardRef(({ style, ...props }: TextProps, ref) => {
40  return createElement('em', { ...props, style: [styles.reset, style], ref });
41}) as ComponentType<TextProps>;
42
43export const BR = forwardRef((props: TextProps, ref) => {
44  return createElement('br', { ...props, ref });
45}) as ComponentType<TextProps>;
46
47export const Small = forwardRef(({ style, ...props }: TextProps, ref) => {
48  return createElement('small', { ...props, style: [styles.reset, style], ref });
49}) as ComponentType<TextProps>;
50
51export const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {
52  return createElement('mark', { ...props, style: [styles.reset, style], ref });
53}) as ComponentType<TextProps>;
54
55export const Code = forwardRef((props: TextProps, ref) => {
56  return createElement('code', { ...props, ref });
57}) as ComponentType<TextProps>;
58
59export const Time = forwardRef(({ style, ...props }: TimeProps, ref) => {
60  return createElement('time', { ...props, style: [styles.reset, style], ref });
61}) as ComponentType<TimeProps>;
62
63export const Pre = forwardRef(({ style, ...props }: TextProps, ref) => {
64  return createElement('pre', { ...props, style: [styles.resetStyle, style], ref });
65}) as ComponentType<TextProps>;
66
67const styles = StyleSheet.create({
68  reset: {
69    fontFamily: 'System',
70    color: '#000',
71    border: '0 solid black',
72    boxSizing: 'border-box',
73    // @ts-ignore: inline is not supported
74    display: 'inline',
75    margin: 0,
76    padding: 0,
77    whiteSpace: 'pre-wrap',
78    wordWrap: 'break-word',
79  },
80});
81