1import React, { ComponentType, forwardRef } from 'react';
2import { StyleSheet } from 'react-native';
3
4import { em } from '../css/units';
5import { TableText, TableTextProps } from '../primitives/Table';
6import Text, { TextProps } from '../primitives/Text';
7import View, { ViewProps } from '../primitives/View';
8
9export const Table = forwardRef((props: ViewProps, ref) => {
10  return <View {...props} ref={ref} />;
11}) as ComponentType<ViewProps>;
12
13export const THead = forwardRef((props: ViewProps, ref) => {
14  return <View {...props} ref={ref} />;
15}) as ComponentType<ViewProps>;
16
17export const TBody = forwardRef((props: ViewProps, ref) => {
18  return <View {...props} ref={ref} />;
19}) as ComponentType<ViewProps>;
20
21export const TFoot = forwardRef((props: ViewProps, ref) => {
22  return <View {...props} ref={ref} />;
23}) as ComponentType<ViewProps>;
24
25export const TH = forwardRef((props: TableTextProps, ref: any) => {
26  return <TableText {...props} style={[styles.th, props.style]} ref={ref} />;
27}) as ComponentType<TableTextProps>;
28
29export const TR = forwardRef((props: ViewProps, ref) => {
30  return <View {...props} style={[styles.tr, props.style]} ref={ref} />;
31}) as ComponentType<ViewProps>;
32
33export const TD = forwardRef((props: TableTextProps, ref: any) => {
34  return <TableText {...props} style={[styles.td, props.style]} ref={ref} />;
35}) as ComponentType<TableTextProps>;
36
37export const Caption = forwardRef((props: TextProps, ref: any) => {
38  return <Text {...props} style={[styles.caption, props.style]} ref={ref} />;
39}) as ComponentType<TextProps>;
40
41const styles = StyleSheet.create({
42  caption: {
43    textAlign: 'center',
44    fontSize: em(1) as number,
45  },
46  th: {
47    textAlign: 'center',
48    fontWeight: 'bold',
49    flex: 1,
50    fontSize: em(1) as number,
51  },
52  tr: {
53    flexDirection: 'row',
54  },
55  td: {
56    flex: 1,
57    fontSize: em(1) as number,
58  },
59});
60