@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
105 lines (104 loc) • 4.51 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import classNames from "classnames";
export const COLUMNS = [1, 2, 3, 4];
const GRID_ALIGN_ITEMS = ["start", "end", "center", "stretch", "baseline"];
const GRID_JUSTIFY_ITEMS = ["start", "end", "center", "stretch"];
const GRID_ALIGN_CONTENT = [
"start",
"end",
"center",
"stretch",
"spaceAround",
"spaceBetween",
"spaceEvenly"
];
const GRID_JUSTIFY_CONTENT = [
"start",
"end",
"center",
"stretch",
"spaceAround",
"spaceBetween",
"spaceEvenly"
];
const alignItemsClassMap = {
start: "vuiGrid--alignItemsStart",
end: "vuiGrid--alignItemsEnd",
center: "vuiGrid--alignItemsCenter",
stretch: "vuiGrid--alignItemsStretch",
baseline: "vuiGrid--alignItemsBaseline"
};
const justifyItemsClassMap = {
start: "vuiGrid--justifyItemsStart",
end: "vuiGrid--justifyItemsEnd",
center: "vuiGrid--justifyItemsCenter",
stretch: "vuiGrid--justifyItemsStretch"
};
const alignContentClassMap = {
start: "vuiGrid--alignContentStart",
end: "vuiGrid--alignContentEnd",
center: "vuiGrid--alignContentCenter",
stretch: "vuiGrid--alignContentStretch",
spaceAround: "vuiGrid--alignContentSpaceAround",
spaceBetween: "vuiGrid--alignContentSpaceBetween",
spaceEvenly: "vuiGrid--alignContentSpaceEvenly"
};
const justifyContentClassMap = {
start: "vuiGrid--justifyContentStart",
end: "vuiGrid--justifyContentEnd",
center: "vuiGrid--justifyContentCenter",
stretch: "vuiGrid--justifyContentStretch",
spaceAround: "vuiGrid--justifyContentSpaceAround",
spaceBetween: "vuiGrid--justifyContentSpaceBetween",
spaceEvenly: "vuiGrid--justifyContentSpaceEvenly"
};
export const VuiGrid = (_a) => {
var { children, columns = 2, spacing = "m", templateColumns, templateRows, alignItems, justifyItems, alignContent, justifyContent, inline, fullWidth, className } = _a, rest = __rest(_a, ["children", "columns", "spacing", "templateColumns", "templateRows", "alignItems", "justifyItems", "alignContent", "justifyContent", "inline", "fullWidth", "className"]);
const classes = classNames("vuiGridContainer", className);
const isResponsiveTemplateColumns = templateColumns && typeof templateColumns === "object";
const contentClasses = classNames("vuiGrid", {
[`vuiGrid--${spacing}`]: spacing,
[`vuiGrid--columns${columns}`]: !templateColumns && columns,
"vuiGrid--inline": inline,
"vuiGrid--fullWidth": fullWidth,
"vuiGrid--responsive": isResponsiveTemplateColumns
}, alignItems && alignItemsClassMap[alignItems], justifyItems && justifyItemsClassMap[justifyItems], alignContent && alignContentClassMap[alignContent], justifyContent && justifyContentClassMap[justifyContent]);
const gridStyle = {};
if (templateColumns) {
if (typeof templateColumns === "string") {
gridStyle.gridTemplateColumns = templateColumns;
}
else {
// Implement cascading: each breakpoint inherits from the previous if not defined
// If 'default' is specified, use it as the base fallback value
const defaultValue = templateColumns.default;
const smValue = templateColumns.sm || defaultValue;
const mdValue = templateColumns.md || smValue;
const lgValue = templateColumns.lg || mdValue;
if (smValue) {
gridStyle["--grid-template-sm"] = smValue;
}
if (mdValue) {
gridStyle["--grid-template-md"] = mdValue;
}
if (lgValue) {
gridStyle["--grid-template-lg"] = lgValue;
}
}
}
if (templateRows) {
gridStyle.gridTemplateRows = templateRows;
}
return (_jsx("div", Object.assign({ className: classes }, rest, { children: _jsx("div", Object.assign({ className: contentClasses, style: Object.keys(gridStyle).length > 0 ? gridStyle : undefined }, { children: children })) })));
};