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