@hitachivantara/uikit-react-lab
Version:
Contributed React components to UI Kit by the community.
62 lines (61 loc) • 1.92 kB
JavaScript
import { gridStyles, useClasses } from "./Dashboard.styles.js";
import { useMemo } from "react";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-core";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Responsive, WidthProvider } from "react-grid-layout";
import { Global } from "@emotion/react";
//#region src/Dashboard/Dashboard.tsx
var GridLayout = WidthProvider(Responsive);
/** Default column breakpoints. For now, use always 12-column */
var defaultCols = {
xs: 12,
sm: 12,
md: 12,
lg: 12,
xl: 12
};
/**
* A Dashboard grid layout component, based on `react-grid-layout`.
* The children elements are grid items and must be `key`ed.
*
* @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props
*
* DISCLAIMER: This component is a work in progress and there might be breaking changes.
*/
var 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
})] });
};
//#endregion
export { HvDashboard };