@hitachivantara/uikit-react-pentaho
Version:
UI Kit Pentaho React components.
61 lines (60 loc) • 2.17 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
import { Previous } from "@hitachivantara/uikit-react-icons";
import { mergeStyles } from "@hitachivantara/uikit-react-utils";
import { useCanvasContext } from "../CanvasContext.js";
import { useClasses } from "./Toolbar.styles.js";
import { staticClasses } from "./Toolbar.styles.js";
const DEFAULT_LABELS = {
back: "Back"
};
const HvCanvasToolbar = forwardRef(
function HvCanvasToolbar2(props, ref) {
const {
title: titleProp,
backButton,
labels: labelsProp,
className,
style,
children,
backButtonProps,
classes: classesProp,
...others
} = useDefaultProps("HvCanvasToolbar", props);
const { classes, cx } = useClasses(classesProp);
const labels = useLabels(DEFAULT_LABELS, labelsProp);
const canvasContext = useCanvasContext();
const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
const title = typeof titleProp === "string" ? /* @__PURE__ */ jsx(HvTypography, { variant: "title4", children: titleProp }) : titleProp;
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cx(classes.root, className),
style: mergeStyles(style, {
"--sidepanel-width": `${sidePanelWidth}px`,
transition: canvasContext?.sidePanelDragging ? void 0 : "width 0.3s ease"
}),
...others,
children: [
/* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(
HvIconButton,
{
title: labels.back,
variant: "primaryGhost",
...backButtonProps,
children: /* @__PURE__ */ jsx(Previous, {})
}
) }),
/* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
]
}
);
}
);
export {
HvCanvasToolbar,
staticClasses as canvasToolbarClasses
};