@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
95 lines (94 loc) • 3.43 kB
JavaScript
import { useWidth } from "../hooks/useWidth.js";
import { useClasses } from "./Grid.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
import MuiGrid from "@mui/material/GridLegacy";
//#region src/Grid/Grid.tsx
var BREAKPOINT_GUTTERS = {
xs: 2,
sm: 2,
md: 4,
lg: 4,
xl: 4
};
var BREAKPOINT_COLUMNS = {
xs: 4,
sm: 8,
md: 12,
lg: 12,
xl: 12
};
function getGridSpacing(spacing) {
let gridSpacing;
if (typeof spacing === "string") if (spacing === "auto") gridSpacing = BREAKPOINT_GUTTERS;
else gridSpacing = BREAKPOINT_GUTTERS[spacing];
else if (typeof spacing === "object") gridSpacing = Object.keys(spacing).reduce((acc, bp) => {
acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];
return acc;
}, {});
else if (spacing === 0) gridSpacing = { xs: 0 };
else gridSpacing = spacing;
return gridSpacing;
}
function getNumberOfColumns(columns) {
let numberOfColumns;
if (columns === "auto") numberOfColumns = BREAKPOINT_COLUMNS;
else numberOfColumns = columns;
return numberOfColumns;
}
function getContainerProps(spacing, rowSpacing, columnSpacing, columns) {
const containerProps = { container: true };
if (spacing != null) containerProps.spacing = getGridSpacing(spacing);
if (rowSpacing != null) containerProps.rowSpacing = getGridSpacing(rowSpacing);
if (columnSpacing != null) containerProps.columnSpacing = getGridSpacing(columnSpacing);
if (columns != null) containerProps.columns = getNumberOfColumns(columns);
return containerProps;
}
var WidthGrid = forwardRef(function WidthGrid(props, ref) {
const { container, spacing, rowSpacing, columnSpacing, columns, ...others } = props;
const width = useWidth();
return /* @__PURE__ */ jsx(MuiGrid, {
ref,
...container ? getContainerProps(spacing === "auto" ? width : spacing, rowSpacing === "auto" ? width : rowSpacing, columnSpacing === "auto" ? width : columnSpacing, columns) : {},
...others
});
});
/**
* The grid creates visual consistency between layouts while allowing flexibility
* across a wide variety of designs. This component is based on a 12-column grid layout.
*
* It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).
*
* However, the number of columns is set to 12 for all breakpoints, as it serves most
* of the use cases and simplifies the implementation.
* To opt-in to the Design System directives, you can set the `columns` prop to `auto`.
*
* Also, the Design System specifications are omissive about the horizontal gutters.
* The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.
* It can be overridden by setting the `rowSpacing` prop.
*/
var HvGrid = forwardRef(function HvGrid(props, ref) {
const { item, container, spacing = "auto", rowSpacing, columnSpacing, columns, classes: classesProp, ...others } = useDefaultProps("HvGrid", props);
const { classes } = useClasses(classesProp);
if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) return /* @__PURE__ */ jsx(WidthGrid, {
ref,
classes,
item,
container,
spacing,
rowSpacing,
columnSpacing,
columns,
...others
});
return /* @__PURE__ */ jsx(MuiGrid, {
ref,
classes,
item,
...container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {},
...others
});
});
//#endregion
export { HvGrid };