@hitachivantara/uikit-react-pentaho/dist/esm/Canvas/BottomPanel/BottomPanel.js

UI Kit Pentaho React components.

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useMemo } from "react";
import { useResizeDetector } from "react-resize-detector";
import { useDefaultProps, useUniqueId, useControlled, theme, HvActionsGeneric, HvPanel } from "@hitachivantara/uikit-react-core";
import { useCanvasContext } from "../CanvasContext.js";
import { useClasses } from "./BottomPanel.styles.js";
import { staticClasses } from "./BottomPanel.styles.js";
import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
const HvCanvasBottomPanel = forwardRef(function HvCanvasBottomPanel2(props, ref) {
  const {
    id: idProp,
    className,
    children,
    open,
    tabs,
    minimize,
    leftActions,
    rightActions,
    overflowActions,
    selectedTabId: selectedTabIdProp,
    classes: classesProp,
    onTabChange,
    onAction,
    ...others
  } = useDefaultProps("HvCanvasBottomPanel", props);
  const { classes, cx } = useClasses(classesProp);
  const canvasContext = useCanvasContext();
  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
  const id = useUniqueId(idProp);
  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({
    handleHeight: false
  });
  const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({
    handleHeight: false
  });
  const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(
    {
      handleHeight: false,
      refreshMode: "debounce",
      refreshOptions: {
        trailing: true
      }
    }
  );
  const { width: rightActionWidth = 32, ref: rightActionRef } = useResizeDetector({
    handleHeight: false,
    refreshMode: "debounce",
    refreshOptions: {
      trailing: true
    }
  });
  const overflowing = useMemo(() => {
    const availableWidth = tabWidth - (leftActions ? leftActionWidth : 0) - (rightActions ? rightActionWidth : 0);
    return availableWidth < 60;
  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);
  const [selectedTab, setSelectedTab] = useControlled(
    selectedTabIdProp,
    tabs[0].id
  );
  const handleTabChange = (event, tabId) => {
    setSelectedTab(tabId);
    onTabChange?.(event, tabId);
  };
  return /* @__PURE__ */ 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 * ${theme.space.sm})`,
        right: theme.space.sm,
        transition: canvasContext?.sidePanelDragging ? "height 0.3s ease, opacity 0.3s ease" : "width 0.3s ease"
      },
      ...others,
      children: [
        /* @__PURE__ */ jsxs("div", { className: classes.tabsRoot, children: [
          /* @__PURE__ */ jsx(
            HvCanvasPanelTabs,
            {
              style: {
                // @ts-ignore
                "--left-actions-width": overflowing || !leftActions ? theme.space.sm : `calc(${leftActionWidth}px + ${theme.space.xs})`,
                "--right-actions-width": !rightActions || overflowing && !overflowActions ? theme.space.sm : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`
              },
              onChange: handleTabChange,
              value: selectedTab,
              children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
                HvCanvasPanelTab,
                {
                  ref: index === 0 ? tabRef : void 0,
                  id: `${id}-${tab.id}`,
                  value: tab.id,
                  className: classes.tab,
                  children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
                    "div",
                    {
                      ref: leftActionRef,
                      className: cx(classes.leftActions, {
                        [classes.actionsDisabled]: btnsDisabled
                      }),
                      children: /* @__PURE__ */ jsx(
                        HvActionsGeneric,
                        {
                          maxVisibleActions: 1,
                          actions: leftActions,
                          disabled: btnsDisabled,
                          onAction: (event, action) => onAction?.(event, action, tab.id),
                          variant: "secondaryGhost",
                          iconOnly: true
                        }
                      )
                    }
                  ),
                  rightActions && !overflowing && /* @__PURE__ */ jsx(
                    "div",
                    {
                      ref: rightActionRef,
                      className: cx(classes.rightActions, {
                        [classes.actionsDisabled]: btnsDisabled
                      }),
                      children: /* @__PURE__ */ jsx(
                        HvActionsGeneric,
                        {
                          maxVisibleActions: 2,
                          actions: rightActions,
                          disabled: btnsDisabled,
                          onAction: (event, action) => onAction?.(event, action, tab.id),
                          variant: "secondaryGhost",
                          iconOnly: true
                        }
                      )
                    }
                  ),
                  overflowActions && overflowing && /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: cx(classes.rightActions, {
                        [classes.actionsDisabled]: btnsDisabled
                      }),
                      children: /* @__PURE__ */ jsx(
                        HvActionsGeneric,
                        {
                          maxVisibleActions: 0,
                          actions: overflowActions,
                          disabled: btnsDisabled,
                          onAction: (event, action) => onAction?.(event, action, tab.id),
                          variant: "secondaryGhost",
                          iconOnly: true
                        }
                      )
                    }
                  )
                ]
              },
              tab.id
            );
          }) : null
        ] }),
        /* @__PURE__ */ jsx(
          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
          }
        )
      ]
    }
  );
});
export {
  HvCanvasBottomPanel,
  staticClasses as canvasBottomPanelClasses
};