1import { ComponentType, forwardRef } from 'react';
2import { StyleSheet } from 'react-native';
3import createElement from 'react-native-web/dist/exports/createElement';
4
5import { TableTextProps } from '../primitives/Table';
6import { TextProps } from '../primitives/Text';
7import { ViewProps } from '../primitives/View';
8
9export const Table = forwardRef((props: ViewProps, ref) => {
10  return createElement('table', { ...props, style: [styles.reset, props.style], ref });
11}) as ComponentType<ViewProps>;
12
13export const THead = forwardRef((props: ViewProps, ref) => {
14  return createElement('thead', { ...props, style: [styles.reset, props.style], ref });
15}) as ComponentType<ViewProps>;
16
17export const TBody = forwardRef((props: ViewProps, ref) => {
18  return createElement('tbody', { ...props, style: [styles.reset, props.style], ref });
19}) as ComponentType<ViewProps>;
20
21export const TFoot = forwardRef((props: ViewProps, ref) => {
22  return createElement('tfoot', { ...props, style: [styles.reset, props.style], ref });
23}) as ComponentType<ViewProps>;
24
25export const TH = forwardRef((props: TableTextProps, ref) => {
26  return createElement('th', { ...props, style: [styles.reset, props.style], ref });
27}) as ComponentType<TableTextProps>;
28
29export const TR = forwardRef((props: ViewProps, ref) => {
30  return createElement('tr', { ...props, style: [styles.reset, props.style], ref });
31}) as ComponentType<ViewProps>;
32
33export const TD = forwardRef((props: TableTextProps, ref) => {
34  return createElement('td', { ...props, style: [styles.reset, props.style], ref });
35}) as ComponentType<TableTextProps>;
36
37export const Caption = forwardRef((props: TextProps, ref) => {
38  return createElement('caption', { ...props, style: [styles.reset, props.style], ref });
39}) as ComponentType<TextProps>;
40
41const styles = StyleSheet.create({
42  reset: {
43    fontFamily: 'System',
44    padding: 0,
45  },
46});
47