@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
33 lines (32 loc) • 1.84 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableRow = void 0;
const react_1 = __importDefault(require("react"));
const layout_1 = require("@workday/canvas-kit-react/layout");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const tableRowChildrenVars = (0, canvas_kit_styling_1.createVars)({ id: "afe05d", args: ["cellNumber"] });
// Styles for rows including dynamic sizing for amount of cells within a row
const tableRowStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "ojxa5t", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-afe05d), minmax(10rem, 1fr));" }
}, "table-row-787c4d");
exports.TableRow = (0, common_1.createComponent)('tr')({
displayName: 'Table.Row',
Component: ({ children, ...elemProps }, ref, Element) => {
// This calculates the amount of valid React children cells within the row and will update the gridTemplateColumns style property with that amount of cells within the row
const validChildren = (children) => {
return react_1.default.Children.toArray(children).filter(child => react_1.default.isValidElement(child));
};
/**
* This is the calculated amount of valid React children
*/
const childrenArray = validChildren(children).length;
return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, [
tableRowStencil(),
{ [tableRowChildrenVars.cellNumber]: childrenArray },
]) }, children));
},
});