@octopusdeploy/design-system-components
Version:
The design systems component library.
42 lines (41 loc) • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.columnSizes = void 0;
exports.SimpleDataTable = SimpleDataTable;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const react_responsive_1 = require("react-responsive");
const styles_1 = require("./styles");
exports.columnSizes = ["x-small", "small", "medium", "large", "x-large"];
function SimpleDataTable({ columns, data, getRowKey, accessibleName }) {
const isLargerThanIpad = (0, react_responsive_1.useMediaQuery)({ query: `(min-width: 811px)` });
const headings = [
...columns.map((c) => typeof c.title === "string" ? ((0, jsx_runtime_1.jsx)("th", { className: getColumnSizeClass(c.columnSize), "aria-label": c.accessibleName, children: c.title }, c.title)) : ((0, jsx_runtime_1.jsx)("th", { className: getColumnSizeClass(c.columnSize), "aria-label": c.accessibleName, children: c.title.render() }, c.title.columnKey))),
];
const rows = data.map((d) => ((0, jsx_runtime_1.jsx)("tr", { children: columns.map((c, i) => ((0, jsx_runtime_1.jsx)("td", { className: getColumnSizeClass(c.columnSize), "aria-label": c.accessibleName, children: c.render(d) }, i))) }, getRowKey(d))));
return ((0, jsx_runtime_1.jsxs)("table", { className: (0, css_1.cx)(styles_1.tableStyles, { [styles_1.tableMobileStyles]: !isLargerThanIpad }), "aria-label": accessibleName, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: headings }) }), (0, jsx_runtime_1.jsx)("tbody", { children: rows })] }));
}
function getColumnSizeClass(columnSize) {
switch (columnSize) {
case "x-small":
return columnSizeClasses.xSmall;
case "small":
return columnSizeClasses.small;
case "medium":
return columnSizeClasses.medium;
case "large":
return columnSizeClasses.large;
case "x-large":
return columnSizeClasses.xLarge;
default:
return columnSizeClasses.base;
}
}
const columnSizeClasses = {
xSmall: (0, css_1.css)({ width: "5rem" }),
small: (0, css_1.css)({ width: "10rem" }),
medium: (0, css_1.css)({ width: "20rem" }),
large: (0, css_1.css)({ width: "40rem" }),
xLarge: (0, css_1.css)({ width: "80rem" }),
base: (0, css_1.css)({ width: "min-content" }),
};