@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
104 lines (103 loc) • 4.72 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";
const GRID_ALIGN_SELF = ["start", "end", "center", "stretch", "baseline"];
const GRID_JUSTIFY_SELF = ["start", "end", "center", "stretch"];
// Mapping objects for alignment properties
const alignSelfClassMap = {
start: "vuiGridItem--alignSelfStart",
end: "vuiGridItem--alignSelfEnd",
center: "vuiGridItem--alignSelfCenter",
stretch: "vuiGridItem--alignSelfStretch",
baseline: "vuiGridItem--alignSelfBaseline"
};
const justifySelfClassMap = {
start: "vuiGridItem--justifySelfStart",
end: "vuiGridItem--justifySelfEnd",
center: "vuiGridItem--justifySelfCenter",
stretch: "vuiGridItem--justifySelfStretch"
};
const isResponsiveGridValue = (value) => {
return typeof value === "object" && value !== null && !Array.isArray(value);
};
const normalizeGridSpan = (value) => {
if (value === "auto")
return "auto";
return `span ${value}`;
};
// Helper to check if a grid value is a number within the valid range for CSS classes
const isGridValueInRange = (value, maxValue = 12) => {
return typeof value === "number" && value >= 1 && value <= maxValue;
};
export const VuiGridItem = (_a) => {
var { children, area, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, alignSelf, justifySelf, className } = _a, rest = __rest(_a, ["children", "area", "colSpan", "rowSpan", "colStart", "colEnd", "rowStart", "rowEnd", "alignSelf", "justifySelf", "className"]);
const isColSpanResponsive = isResponsiveGridValue(colSpan);
const classes = classNames("vuiGridItem", {
[`vuiGridItem--colSpan${colSpan}`]: !isColSpanResponsive && isGridValueInRange(colSpan),
[`vuiGridItem--rowSpan${rowSpan}`]: isGridValueInRange(rowSpan),
[`vuiGridItem--colStart${colStart}`]: isGridValueInRange(colStart),
[`vuiGridItem--colEnd${colEnd}`]: isGridValueInRange(colEnd),
[`vuiGridItem--rowStart${rowStart}`]: isGridValueInRange(rowStart),
[`vuiGridItem--rowEnd${rowEnd}`]: isGridValueInRange(rowEnd),
"vuiGridItem--responsive": isColSpanResponsive
}, alignSelf && alignSelfClassMap[alignSelf], justifySelf && justifySelfClassMap[justifySelf], className);
const style = {};
if (area) {
style.gridArea = area;
}
if (isColSpanResponsive) {
// Implement cascading: each breakpoint inherits from the previous if not defined
// If 'default' is specified, use it as the base fallback value
const defaultValue = colSpan.default;
const smValue = colSpan.sm !== undefined ? colSpan.sm : defaultValue;
const mdValue = colSpan.md !== undefined ? colSpan.md : smValue;
const lgValue = colSpan.lg !== undefined ? colSpan.lg : mdValue;
if (smValue !== undefined) {
style["--grid-item-colSpan-sm"] = normalizeGridSpan(smValue);
}
if (mdValue !== undefined) {
style["--grid-item-colSpan-md"] = normalizeGridSpan(mdValue);
}
if (lgValue !== undefined) {
style["--grid-item-colSpan-lg"] = normalizeGridSpan(lgValue);
}
}
else if (colSpan === "auto" || (typeof colSpan === "number" && colSpan > 12)) {
style.gridColumn = colSpan === "auto" ? "auto" : `span ${colSpan}`;
}
if (rowSpan === "auto" || (typeof rowSpan === "number" && rowSpan > 12)) {
style.gridRow = rowSpan === "auto" ? "auto" : `span ${rowSpan}`;
}
// Handle position values that are strings or > 12
if (colStart) {
if (typeof colStart === "string" || colStart > 12) {
style.gridColumnStart = colStart;
}
}
if (colEnd) {
if (typeof colEnd === "string" || colEnd > 12) {
style.gridColumnEnd = colEnd;
}
}
if (rowStart) {
if (typeof rowStart === "string" || rowStart > 12) {
style.gridRowStart = rowStart;
}
}
if (rowEnd) {
if (typeof rowEnd === "string" || rowEnd > 12) {
style.gridRowEnd = rowEnd;
}
}
return (_jsx("div", Object.assign({ className: classes, style: Object.keys(style).length > 0 ? style : undefined }, rest, { children: children })));
};