forked from freeCodeCamp/freeCodeCamp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
table.tsx
59 lines (45 loc) · 1.78 KB
/
table.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from 'react';
import '../../../../client/src/components/layouts/global.css'
import { TableProps, TableVariant } from './types';
const defaultClassNames = ['table','table-auto', 'w-full', 'border-collapse',
'text-left', 'bg-transparent'];
const MAX_MOBILE_WIDTH = 767;
const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH
const variantClasses: Record<TableVariant, string> = {
light: 'bg-light-theme-background',
dark: 'bg-dark-theme-background text-gray-0'
}
const computeClassNames = (size: string) => {
switch (size) {
case 'large':
return 'text-lg'
case 'small':
return 'text-sm'
// default is medium
default:
return 'text-md'
}
}
export const Table = React.forwardRef<HTMLTableElement, TableProps>(
(
{ borderless, bordered, className, hover, striped, responsive, variant, size, ...props },
ref
) => {
props.cellPadding = 10 // Default cell padding for visual clarity in Storybook
if (borderless && bordered) bordered = false;
const borderClass = bordered ? "bordered" : ""
const stripedClass = striped ? "table-striped" : ""
const hoverClass = hover ? "table-hover" : ""
const classes = [...defaultClassNames, borderClass, stripedClass, computeClassNames(size || ''), hoverClass].join(' ');
const table = <table {...props} ref={ref} className={classes}/>;
if (responsive) {
let responsiveClass = computeWindowSize ? 'sm' : 'lg';
return <div className={responsiveClass}>{table}</div>
}
// For storybook use cases. Table should remain transparent to the background color
// if (variant == 'light') {
// return <div className={variantClasses[variant]}>{table}</div>
// } else return <div className={variantClasses[variant]}>{table}</div>
return table;
}
);