@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
34 lines (33 loc) • 1.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComponentStatesTable = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const Table = (0, common_1.styled)('table')({
width: '100%',
thead: {
textAlign: 'left',
paddingBottom: 16,
},
'td, th': {
minWidth: 100,
paddingBottom: 16,
paddingRight: 16,
textAlign: 'left',
},
});
const ComponentStatesTable = ({ rowProps, columnProps, children, }) => {
return ((0, jsx_runtime_1.jsxs)(Table, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Variants" }), columnProps.map(col => ((0, jsx_runtime_1.jsx)("th", { children: col.label }, `component-table-heading-${col.label.toLowerCase().replace(' ', ',')}`)))] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: rowProps.map(row => {
return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: row.label }), columnProps.map(col => {
return ((0, jsx_runtime_1.jsx)("td", { children: children({
...row.props,
...col.props,
// join class names between rows and columns
className: [row.props.className, col.props.className]
.filter(c => c)
.join(' '),
}) }, col.label.toLowerCase().replace(' ', '-')));
})] }, row.label.toLowerCase().replace(' ', '-')));
}) })] }));
};
exports.ComponentStatesTable = ComponentStatesTable;