@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
92 lines (91 loc) • 4.55 kB
JavaScript
"use client";
import { keys } from "../../core/utils/keys/keys.mjs";
import { px } from "../../core/utils/units-converters/px.mjs";
import { rem } from "../../core/utils/units-converters/rem.mjs";
import { filterProps } from "../../core/utils/filter-props/filter-props.mjs";
import { getSpacing } from "../../core/utils/get-size/get-size.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 { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/SimpleGrid/SimpleGridVariables.tsx
function getMinColWidthValue(value) {
if (value === void 0) return;
if (typeof value === "number") return rem(value);
return value;
}
function SimpleGridMediaVariables({ spacing, verticalSpacing, cols, minColWidth, autoRows, selector }) {
const theme = useMantineTheme();
const _verticalSpacing = verticalSpacing === void 0 ? spacing : verticalSpacing;
const useAutoColumns = minColWidth !== void 0;
const baseStyles = filterProps({
"--sg-spacing-x": getSpacing(getBaseValue(spacing)),
"--sg-spacing-y": getSpacing(getBaseValue(_verticalSpacing)),
"--sg-auto-rows": autoRows,
...useAutoColumns ? { "--sg-min-col-width": getMinColWidthValue(minColWidth) } : { "--sg-cols": getBaseValue(cols)?.toString() }
});
const queries = keys(theme.breakpoints).reduce((acc, breakpoint) => {
if (!acc[breakpoint]) acc[breakpoint] = {};
if (typeof spacing === "object" && spacing[breakpoint] !== void 0) acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing[breakpoint]);
if (typeof _verticalSpacing === "object" && _verticalSpacing[breakpoint] !== void 0) acc[breakpoint]["--sg-spacing-y"] = getSpacing(_verticalSpacing[breakpoint]);
if (!useAutoColumns && typeof cols === "object" && cols[breakpoint] !== void 0) acc[breakpoint]["--sg-cols"] = cols[breakpoint];
return acc;
}, {});
return /* @__PURE__ */ jsx(InlineStyles, {
styles: baseStyles,
media: getSortedBreakpoints(keys(queries), theme.breakpoints).filter((breakpoint) => keys(queries[breakpoint.value]).length > 0).map((breakpoint) => ({
query: `(min-width: ${theme.breakpoints[breakpoint.value]})`,
styles: queries[breakpoint.value]
})),
selector
});
}
function getBreakpoints(values) {
if (typeof values === "object" && values !== null) return keys(values);
return [];
}
function sortBreakpoints(breakpoints) {
return breakpoints.sort((a, b) => px(a) - px(b));
}
function getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth }) {
return sortBreakpoints(Array.from(new Set([
...getBreakpoints(spacing),
...getBreakpoints(verticalSpacing),
...minColWidth !== void 0 ? [] : getBreakpoints(cols)
])));
}
function SimpleGridContainerVariables({ spacing, verticalSpacing, cols, minColWidth, autoRows, selector }) {
const _verticalSpacing = verticalSpacing === void 0 ? spacing : verticalSpacing;
const useAutoColumns = minColWidth !== void 0;
const baseStyles = filterProps({
"--sg-spacing-x": getSpacing(getBaseValue(spacing)),
"--sg-spacing-y": getSpacing(getBaseValue(_verticalSpacing)),
"--sg-auto-rows": autoRows,
...useAutoColumns ? { "--sg-min-col-width": getMinColWidthValue(minColWidth) } : { "--sg-cols": getBaseValue(cols)?.toString() }
});
const uniqueBreakpoints = getUniqueBreakpoints({
spacing,
verticalSpacing,
cols,
minColWidth
});
const queries = uniqueBreakpoints.reduce((acc, breakpoint) => {
if (!acc[breakpoint]) acc[breakpoint] = {};
if (typeof spacing === "object" && spacing[breakpoint] !== void 0) acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing[breakpoint]);
if (typeof _verticalSpacing === "object" && _verticalSpacing[breakpoint] !== void 0) acc[breakpoint]["--sg-spacing-y"] = getSpacing(_verticalSpacing[breakpoint]);
if (!useAutoColumns && typeof cols === "object" && cols[breakpoint] !== void 0) acc[breakpoint]["--sg-cols"] = cols[breakpoint];
return acc;
}, {});
return /* @__PURE__ */ jsx(InlineStyles, {
styles: baseStyles,
container: uniqueBreakpoints.map((breakpoint) => ({
query: `simple-grid (min-width: ${breakpoint})`,
styles: queries[breakpoint]
})),
selector
});
}
//#endregion
export { SimpleGridContainerVariables, SimpleGridMediaVariables };
//# sourceMappingURL=SimpleGridVariables.mjs.map