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