@hitachivantara/uikit-react-pentaho
Version:
UI Kit Pentaho React components.
209 lines (208 loc) • 8.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const reactResizeDetector = require("react-resize-detector");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const CanvasContext = require("../CanvasContext.cjs");
const BottomPanel_styles = require("./BottomPanel.styles.cjs");
const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
const PanelTab = require("../PanelTab/PanelTab.cjs");
const HvCanvasBottomPanel = react.forwardRef(function HvCanvasBottomPanel2(props, ref) {
const {
id: idProp,
className,
children,
open,
tabs,
minimize,
leftActions,
rightActions,
overflowActions,
selectedTabId: selectedTabIdProp,
classes: classesProp,
onTabChange,
onAction,
...others
} = uikitReactCore.useDefaultProps("HvCanvasBottomPanel", props);
const { classes, cx } = BottomPanel_styles.useClasses(classesProp);
const canvasContext = CanvasContext.useCanvasContext();
const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
const id = uikitReactCore.useUniqueId(idProp);
const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
handleHeight: false
});
const { width: panelWidth = 0, ref: panelRef } = reactResizeDetector.useResizeDetector({
handleHeight: false
});
const { width: leftActionWidth = 32, ref: leftActionRef } = reactResizeDetector.useResizeDetector(
{
handleHeight: false,
refreshMode: "debounce",
refreshOptions: {
trailing: true
}
}
);
const { width: rightActionWidth = 32, ref: rightActionRef } = reactResizeDetector.useResizeDetector({
handleHeight: false,
refreshMode: "debounce",
refreshOptions: {
trailing: true
}
});
const overflowing = react.useMemo(() => {
const availableWidth = tabWidth - (leftActions ? leftActionWidth : 0) - (rightActions ? rightActionWidth : 0);
return availableWidth < 60;
}, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);
const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
selectedTabIdProp,
tabs[0].id
);
const handleTabChange = (event, tabId) => {
setSelectedTab(tabId);
onTabChange?.(event, tabId);
};
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
id,
ref,
className: cx(
classes.root,
{
[classes.closed]: !open,
[classes.minimized]: minimize,
[classes.multipleTabs]: tabs.length > 1,
[classes.overflowing]: overflowing
},
className
),
style: {
width: `calc(100% - ${sidePanelWidth}px - 2 * ${uikitReactCore.theme.space.sm})`,
right: uikitReactCore.theme.space.sm,
transition: canvasContext?.sidePanelDragging ? "height 0.3s ease, opacity 0.3s ease" : "width 0.3s ease"
},
...others,
children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsRoot, children: [
/* @__PURE__ */ jsxRuntime.jsx(
PanelTabs.HvCanvasPanelTabs,
{
style: {
// @ts-ignore
"--left-actions-width": overflowing || !leftActions ? uikitReactCore.theme.space.sm : `calc(${leftActionWidth}px + ${uikitReactCore.theme.space.xs})`,
"--right-actions-width": !rightActions || overflowing && !overflowActions ? uikitReactCore.theme.space.sm : `calc(${overflowing ? 32 : rightActionWidth}px + ${uikitReactCore.theme.space.xs})`
},
onChange: handleTabChange,
value: selectedTab,
children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
PanelTab.HvCanvasPanelTab,
{
ref: index === 0 ? tabRef : void 0,
id: `${id}-${tab.id}`,
value: tab.id,
className: classes.tab,
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title })
},
tab.id
))
}
),
leftActions || rightActions || overflowActions ? tabs.map((tab, index) => {
const btnsDisabled = selectedTab !== tab.id && !minimize;
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
style: {
// @ts-ignore
"--tab-width": `${tabWidth}px`,
"--right": `calc((${index} + 1) * var(--tab-width))`,
"--left": `calc(${index} * var(--tab-width))`
},
children: [
leftActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
ref: leftActionRef,
className: cx(classes.leftActions, {
[classes.actionsDisabled]: btnsDisabled
}),
children: /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvActionsGeneric,
{
maxVisibleActions: 1,
actions: leftActions,
disabled: btnsDisabled,
onAction: (event, action) => onAction?.(event, action, tab.id),
variant: "secondaryGhost",
iconOnly: true
}
)
}
),
rightActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
ref: rightActionRef,
className: cx(classes.rightActions, {
[classes.actionsDisabled]: btnsDisabled
}),
children: /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvActionsGeneric,
{
maxVisibleActions: 2,
actions: rightActions,
disabled: btnsDisabled,
onAction: (event, action) => onAction?.(event, action, tab.id),
variant: "secondaryGhost",
iconOnly: true
}
)
}
),
overflowActions && overflowing && /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: cx(classes.rightActions, {
[classes.actionsDisabled]: btnsDisabled
}),
children: /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvActionsGeneric,
{
maxVisibleActions: 0,
actions: overflowActions,
disabled: btnsDisabled,
onAction: (event, action) => onAction?.(event, action, tab.id),
variant: "secondaryGhost",
iconOnly: true
}
)
}
)
]
},
tab.id
);
}) : null
] }),
/* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvPanel,
{
ref: panelRef,
role: "tabpanel",
"aria-labelledby": `${id}-${selectedTab}`,
className: classes.content,
style: {
// @ts-ignore
"--right-border-radius": tabWidth * tabs.length >= panelWidth ? "0px" : "16px"
},
children
}
)
]
}
);
});
exports.canvasBottomPanelClasses = BottomPanel_styles.staticClasses;
exports.HvCanvasBottomPanel = HvCanvasBottomPanel;