-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
TableBody.tsx
78 lines (71 loc) · 2.11 KB
/
TableBody.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React, { forwardRef, HTMLAttributes, useMemo } from "react";
import cn from "classnames";
import { TableConfig, TableConfigProvider, useTableConfig } from "./config";
export interface TableBodyProps
extends HTMLAttributes<HTMLTableSectionElement>,
Omit<TableConfig, "header"> {}
/**
* Creates a `<tbody>` element that also allows for overriding all the child
* `TableCell` components with additional styling behavior.
*/
export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
function TableBody(
{
className,
children,
hAlign: propHAlign,
vAlign: propVAlign,
lineWrap: propLineWrap,
disableHover: propDisableHover,
disableBorders: propDisableBorders,
...props
},
ref
) {
// update the table configuration with the custom overrides for the `<thead>`
const { hAlign, vAlign, lineWrap, disableHover, disableBorders } =
useTableConfig({
hAlign: propHAlign,
vAlign: propVAlign,
lineWrap: propLineWrap,
disableHover: propDisableHover,
disableBorders: propDisableBorders,
});
const configuration = useMemo(
() => ({
header: false,
hAlign,
vAlign,
lineWrap,
disableBorders,
disableHover,
}),
[hAlign, vAlign, lineWrap, disableBorders, disableHover]
);
return (
<TableConfigProvider value={configuration}>
<tbody {...props} ref={ref} className={cn("rmd-tbody", className)}>
{children}
</tbody>
</TableConfigProvider>
);
}
);
/* istanbul ignore next */
if (process.env.NODE_ENV !== "production") {
try {
const PropTypes = require("prop-types");
TableBody.propTypes = {
className: PropTypes.string,
children: PropTypes.node,
lineWrap: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.oneOf(["padded"]),
]),
hAlign: PropTypes.oneOf(["left", "center", "right"]),
vAlign: PropTypes.oneOf(["top", "middle", "bottom"]),
disableHover: PropTypes.bool,
disableBorders: PropTypes.bool,
};
} catch (e) {}
}