@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
44 lines (43 loc) • 1.96 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComponentStatesTable = void 0;
const react_1 = __importDefault(require("react"));
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 (react_1.default.createElement(Table, null,
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", null, "Variants"),
columnProps.map(col => (react_1.default.createElement("th", { key: `component-table-heading-${col.label.toLowerCase().replace(' ', ',')}` }, col.label))))),
react_1.default.createElement("tbody", null, rowProps.map(row => {
return (react_1.default.createElement("tr", { key: row.label.toLowerCase().replace(' ', '-') },
react_1.default.createElement("td", null, row.label),
columnProps.map(col => {
return (react_1.default.createElement("td", { key: col.label.toLowerCase().replace(' ', '-') }, children({
...row.props,
...col.props,
// join class names between rows and columns
className: [row.props.className, col.props.className]
.filter(c => c)
.join(' '),
})));
})));
}))));
};
exports.ComponentStatesTable = ComponentStatesTable;