@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
74 lines (73 loc) • 3.88 kB
JavaScript
"use client";
import { keys } from "../../../core/utils/keys/keys.mjs";
import { filterProps } from "../../../core/utils/filter-props/filter-props.mjs";
import { getSortedBreakpoints } from "../../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.mjs";
import { getBaseValue } from "../../../core/utils/get-base-value/get-base-value.mjs";
import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { InlineStyles } from "../../../core/InlineStyles/InlineStyles.mjs";
import { useGridContext } from "../Grid.context.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Grid/GridCol/GridColVariables.tsx
const getColumnFlexBasis = (colSpan, columns) => {
if (colSpan === "content") return "auto";
if (colSpan === "auto") return "0rem";
if (!colSpan) return;
if (colSpan === columns) return "100%";
return `calc(${100 * colSpan / columns}% - ${(columns - colSpan) / columns} * var(--grid-column-gap))`;
};
const getColumnMaxWidth = (colSpan, columns, grow) => {
if (grow || colSpan === "auto") return "100%";
if (colSpan === "content") return "unset";
return getColumnFlexBasis(colSpan, columns);
};
const getColumnFlexGrow = (colSpan, grow) => {
if (!colSpan) return;
return colSpan === "auto" || grow ? "1" : "auto";
};
const getColumnOffset = (offset, columns) => {
if (offset === 0) return "0";
if (!offset) return;
return `calc(${100 * offset / columns}% + ${offset / columns} * var(--grid-column-gap))`;
};
function GridColVariables({ span, order, offset, align, selector }) {
const theme = useMantineTheme();
const ctx = useGridContext();
const _breakpoints = ctx.breakpoints || theme.breakpoints;
const baseValue = getBaseValue(span);
const baseSpan = baseValue === void 0 ? 12 : baseValue;
const baseStyles = filterProps({
"--col-order": getBaseValue(order)?.toString(),
"--col-flex-grow": getColumnFlexGrow(baseSpan, ctx.grow),
"--col-flex-basis": getColumnFlexBasis(baseSpan, ctx.columns),
"--col-width": baseSpan === "content" ? "auto" : void 0,
"--col-max-width": getColumnMaxWidth(baseSpan, ctx.columns, ctx.grow),
"--col-offset": getColumnOffset(getBaseValue(offset), ctx.columns),
"--col-align-self": getBaseValue(align)
});
const queries = keys(_breakpoints).reduce((acc, breakpoint) => {
if (!acc[breakpoint]) acc[breakpoint] = {};
if (typeof order === "object" && order[breakpoint] !== void 0) acc[breakpoint]["--col-order"] = order[breakpoint]?.toString();
if (typeof span === "object" && span[breakpoint] !== void 0) {
acc[breakpoint]["--col-flex-grow"] = getColumnFlexGrow(span[breakpoint], ctx.grow);
acc[breakpoint]["--col-flex-basis"] = getColumnFlexBasis(span[breakpoint], ctx.columns);
acc[breakpoint]["--col-width"] = span[breakpoint] === "content" ? "auto" : void 0;
acc[breakpoint]["--col-max-width"] = getColumnMaxWidth(span[breakpoint], ctx.columns, ctx.grow);
}
if (typeof offset === "object" && offset[breakpoint] !== void 0) acc[breakpoint]["--col-offset"] = getColumnOffset(offset[breakpoint], ctx.columns);
if (typeof align === "object" && align[breakpoint] !== void 0) acc[breakpoint]["--col-align-self"] = align[breakpoint];
return acc;
}, {});
const values = getSortedBreakpoints(keys(queries), _breakpoints).filter((breakpoint) => keys(queries[breakpoint.value]).length > 0).map((breakpoint) => ({
query: ctx.type === "container" ? `mantine-grid (min-width: ${_breakpoints[breakpoint.value]})` : `(min-width: ${_breakpoints[breakpoint.value]})`,
styles: queries[breakpoint.value]
}));
return /* @__PURE__ */ jsx(InlineStyles, {
styles: baseStyles,
media: ctx.type === "container" ? void 0 : values,
container: ctx.type === "container" ? values : void 0,
selector
});
}
//#endregion
export { GridColVariables };
//# sourceMappingURL=GridColVariables.mjs.map