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

UI Kit Pentaho React components.

import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { forwardRef, useEffect } from "react";
import { useDefaultProps, useUniqueId, useLabels, useControlled, HvPanel, HvIconButton } from "@hitachivantara/uikit-react-core";
import { End } from "@hitachivantara/uikit-react-icons";
import { useCanvasContext } from "../CanvasContext.js";
import { useClasses } from "./SidePanel.styles.js";
import { staticClasses } from "./SidePanel.styles.js";
import { useResizable } from "./useResizable.js";
import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
const DEFAULT_LABELS = {
  open: "Open",
  close: "Close"
};
const HvCanvasSidePanel = forwardRef(function HvCanvasSidePanel2(props, ref) {
  const {
    id: idProp,
    tab: tabProp,
    open: openProp,
    defaultOpen = false,
    tabs,
    onToggle,
    onTabChange,
    labels: labelsProp,
    minWidth = 100,
    maxWidth = 500,
    initialWidth = 320,
    onResize,
    className,
    children,
    classes: classesProp,
    ...others
  } = useDefaultProps("HvCanvasSidePanel", props);
  const id = useUniqueId(idProp);
  const canvasContext = useCanvasContext();
  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;
  const sidePanelOpen = canvasContext?.sidePanelOpen;
  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;
  const handleSidePanelDragging = canvasContext?.handleSidePanelDragging;
  const { classes, cx } = useClasses(classesProp);
  const labels = useLabels(DEFAULT_LABELS, labelsProp);
  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));
  const [selectedTab, setSelectedTab] = useControlled(
    tabProp,
    tabs?.[0]?.id ?? "none"
  );
  useEffect(() => {
    handleSidePanelOpen?.(open);
  }, [handleSidePanelOpen, open]);
  useEffect(() => {
    handleSidePanelWidth?.(initialWidth);
  }, [handleSidePanelWidth, initialWidth]);
  const updateWidth = (width2) => {
    handleSidePanelWidth?.(width2);
    onResize?.(width2);
  };
  const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable({
    ref,
    initialWidth,
    minWidth,
    maxWidth,
    onResize: updateWidth
  });
  useEffect(() => {
    handleSidePanelDragging?.(isDragging);
  }, [handleSidePanelDragging, isDragging]);
  const handleTogglePanel = (event) => {
    setOpen((prev) => !prev);
    handleSidePanelOpen?.(!sidePanelOpen);
    onToggle?.(event, !open);
  };
  const handleTabChange = (event, tabId) => {
    setSelectedTab(tabId);
    onTabChange?.(event, tabId);
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      "div",
      {
        id,
        className: cx(classes.root, className, {
          [classes.open]: open,
          [classes.close]: !open
        }),
        ...getContainerProps({ style: { ...!open && { width: 0 } } }),
        ...others,
        children: [
          tabs && /* @__PURE__ */ jsx(
            HvCanvasPanelTabs,
            {
              className: classes.tabs,
              value: selectedTab,
              onChange: handleTabChange,
              children: tabs.map((tab) => /* @__PURE__ */ jsx(
                HvCanvasPanelTab,
                {
                  id: `${id}-${tab.id}`,
                  value: tab.id,
                  children: tab.content
                },
                tab.id
              ))
            }
          ),
          /* @__PURE__ */ jsx(
            HvPanel,
            {
              role: tabs ? "tabpanel" : void 0,
              "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
              className: classes.content,
              children
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsx("div", { ...getSeparatorProps() }),
    /* @__PURE__ */ jsx(
      HvIconButton,
      {
        variant: "primaryGhost",
        title: open ? labels.close : labels.open,
        onClick: handleTogglePanel,
        className: cx(classes.handle, {
          [classes.handleOpen]: open,
          [classes.handleClose]: !open
        }),
        style: {
          left: open ? width : 0,
          transition: isDragging ? "none" : void 0
        },
        children: /* @__PURE__ */ jsx(End, { rotate: open })
      }
    )
  ] });
});
export {
  HvCanvasSidePanel,
  staticClasses as canvasSidePanelClasses
};