adwaita-web/dist/components/Notebook.js

A GTK inspired toolkit designed to build awesome web apps

import cx from "clsx";
import React, { useState } from "react";
import { PanDown, PanEnd, PanStart, PanUp, WindowClose } from "../icons";
import { Button } from "./Button";
import { Label } from "./Label";
import { PageSwitcher } from "./PageSwitcher";
const noop = () => {
};
function Notebook({
  className,
  position = "top",
  transition,
  value: activePageValue,
  arrows = false,
  pages,
  action,
  onChange = noop,
  onClose = noop,
  ...rest
}) {
  const orientation = position === "top" || position === "bottom" ? "horizontal" : "vertical";
  const isHorizontal = orientation === "horizontal";
  const isControlled = activePageValue !== void 0;
  const [activePageState, setActivePage] = useState(0);
  const setPage = isControlled ? onChange : setActivePage;
  let activePage = isControlled ? activePageValue : activePageState;
  if (activePage >= pages.length) {
    activePage = pages.length - 1;
    setPage(activePage);
  }
  const previousPage = () => setPage(activePage - 1);
  const nextPage = () => setPage(activePage + 1);
  return /* @__PURE__ */ React.createElement("div", {
    className: cx("Notebook", className, position),
    ...rest
  }, /* @__PURE__ */ React.createElement("div", {
    className: cx("Notebook__header", position)
  }, /* @__PURE__ */ React.createElement("div", {
    className: "Notebook__tabs"
  }, arrows && /* @__PURE__ */ React.createElement(Button, {
    className: "Notebook__arrow",
    icon: isHorizontal ? PanStart : PanUp,
    disabled: activePage === 0,
    onClick: previousPage
  }), pages.map((page, i) => /* @__PURE__ */ React.createElement("div", {
    key: page.key,
    className: cx("Notebook__tab", {
      selected: i === activePage,
      reorderable: true
    }),
    role: "button",
    tabIndex: 0,
    onClick: () => setPage(i)
  }, /* @__PURE__ */ React.createElement(Label, null, page.label), page.closable && /* @__PURE__ */ React.createElement(Button, {
    size: "small",
    icon: WindowClose,
    tabIndex: -1,
    onClick: (ev) => (ev.stopPropagation(), onClose(i))
  }))), arrows && /* @__PURE__ */ React.createElement(Button, {
    className: "Notebook__arrow",
    icon: isHorizontal ? PanEnd : PanDown,
    disabled: activePage >= pages.length - 1,
    onClick: nextPage
  })), action && /* @__PURE__ */ React.createElement("div", {
    className: "Notebook__action"
  }, action)), /* @__PURE__ */ React.createElement("div", {
    className: "Notebook__content"
  }, /* @__PURE__ */ React.createElement(PageSwitcher, {
    pages,
    activePage,
    transition: transition ?? (position === "top" || position === "bottom" ? "horizontal" : "vertical")
  })));
}
export {
  Notebook
};