@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
65 lines (64 loc) • 1.73 kB
JavaScript
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { WidthProvider, Responsive } from "react-grid-layout";
import { Global } from "@emotion/react";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-core";
import { useClasses, gridStyles } from "./Dashboard.styles.js";
import { staticClasses } from "./Dashboard.styles.js";
const GridLayout = WidthProvider(Responsive);
const defaultCols = {
xs: 12,
sm: 12,
md: 12,
lg: 12,
xl: 12
};
const HvDashboard = (props) => {
const {
children,
className,
layout,
cols: colsProp,
layouts: layoutsProp,
classes: classesProp,
...others
} = useDefaultProps("HvDashboard", props);
const { classes, cx } = useClasses(classesProp);
const { activeTheme } = useTheme();
const layouts = useMemo(() => {
if (layoutsProp) return layoutsProp;
if (!layout) return {};
return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
}, [layoutsProp, layout]);
const cols = useMemo(() => {
if (!colsProp) return defaultCols;
if (typeof colsProp === "number") {
return {
xs: colsProp,
sm: colsProp,
md: colsProp,
lg: colsProp,
xl: colsProp
};
}
return colsProp;
}, [colsProp]);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(Global, { styles: gridStyles }),
/* @__PURE__ */ jsx(
GridLayout,
{
className: cx(classes.root, className),
breakpoints: activeTheme?.breakpoints.values,
cols,
layouts,
...others,
children
}
)
] });
};
export {
HvDashboard,
staticClasses as dashboardClasses
};