@react95/core/cjs/Modal/Modal.cjs

Windows 95 styleguide

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const nanoid = require("nanoid");
const React = require("react");
const react = require("@neodrag/react");
const Button = require("../Button/Button.cjs");
const Frame = require("../Frame/Frame.cjs");
const TitleBar = require("../TitleBar/TitleBar.cjs");
const Modal_css = require("./Modal.css.cjs");
const cn = require("classnames");
const usehooksTs = require("usehooks-ts");
const useModal = require("../shared/use-modal.cjs");
const modalTypes = require("../shared/modal-types.cjs");
const ModalContent = Frame.fixedForwardRef(
  (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(Modal_css.content, rest.className) })
);
const ModalMinimize = Frame.fixedForwardRef(
  (props, ref) => {
    const [id, setId] = React.useState("");
    const { minimize, focus, subscribe } = useModal.useModal();
    React.useEffect(() => {
      const handleVisibilityChange = ({ id: activeId }) => {
        setId(activeId);
      };
      const unsubscribe = subscribe(
        modalTypes.ModalEvents.ModalVisibilityChanged,
        handleVisibilityChange
      );
      return unsubscribe;
    }, [subscribe]);
    const handleMinimize = () => {
      minimize(id);
      focus("no-id");
    };
    return /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Minimize, { ...props, ref, onClick: handleMinimize });
  }
);
const ModalRenderer = ({
  id: providedId,
  hasWindowButton: hasButton = true,
  buttons = [],
  buttonsAlignment = "flex-end",
  children,
  icon,
  menu = [],
  title,
  dragOptions,
  titleBarOptions,
  className,
  ...rest
}, ref) => {
  const [id] = React.useState(providedId || nanoid.nanoid());
  const [menuOpened, setMenuOpened] = React.useState("");
  const [isActive, setIsActive] = React.useState(false);
  const [isModalMinimized, setIsModalMinimized] = React.useState(false);
  const { add, remove, focus, subscribe } = useModal.useModal();
  const draggableRef = React.useRef(null);
  react.useDraggable(draggableRef, {
    ...dragOptions,
    handle: ".draggable"
  });
  const menuRef = React.useRef(null);
  usehooksTs.useOnClickOutside(menuRef, () => {
    setMenuOpened("");
  });
  React.useEffect(() => {
    add({
      icon,
      title: title || "",
      id,
      hasButton
    });
    const unsubscribeVisibility = subscribe(
      modalTypes.ModalEvents.ModalVisibilityChanged,
      ({ id: activeId }) => {
        setIsActive(activeId === id);
      }
    );
    focus(id);
    return () => {
      remove(id);
      unsubscribeVisibility();
    };
  }, [id, icon, title, hasButton, providedId, add, remove, focus, subscribe]);
  React.useEffect(() => {
    const unsubscribeMinimize = subscribe(
      modalTypes.ModalEvents.MinimizeModal,
      ({ id: activeId }) => {
        if (activeId === id) {
          setIsModalMinimized(true);
        }
      }
    );
    const unsubscribeRestore = subscribe(
      modalTypes.ModalEvents.RestoreModal,
      ({ id: activeId }) => {
        if (activeId === id) {
          setIsModalMinimized(false);
        }
      }
    );
    return () => {
      unsubscribeMinimize();
      unsubscribeRestore();
    };
  }, [id, subscribe]);
  React.useImperativeHandle(ref, () => {
    return draggableRef.current;
  });
  return /* @__PURE__ */ React.createElement(
    Frame.Frame,
    {
      ...rest,
      className: cn(
        Modal_css.modalWrapper({ active: isActive, minimized: isModalMinimized }),
        className
      ),
      role: "dialog",
      "aria-hidden": isModalMinimized,
      ref: draggableRef,
      onMouseDown: () => {
        focus(id);
      }
    },
    /* @__PURE__ */ React.createElement(
      TitleBar.TitleBar,
      {
        active: isActive,
        icon,
        title,
        className: "draggable",
        mb: "$2"
      },
      titleBarOptions && /* @__PURE__ */ React.createElement(TitleBar.TitleBar.OptionsBox, null, titleBarOptions)
    ),
    menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: Modal_css.menuWrapper, ref: menuRef }, menu.map(({ name, list }) => {
      const active = menuOpened === name;
      return /* @__PURE__ */ React.createElement(
        "li",
        {
          key: name,
          onMouseDown: () => setMenuOpened(name),
          className: Modal_css.menuItem({ active })
        },
        name,
        active && list
      );
    })),
    children,
    buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
      Frame.Frame,
      {
        className: Modal_css.buttonWrapper,
        justifyContent: buttonsAlignment
      },
      buttons.map((button) => /* @__PURE__ */ React.createElement(
        Button.Button,
        {
          key: button.value,
          onClick: button.onClick,
          value: button.value
        },
        button.value
      ))
    )
  );
};
const Modal = Object.assign(
  Frame.fixedForwardRef(ModalRenderer),
  {
    Content: ModalContent,
    Minimize: ModalMinimize
  }
);
exports.Modal = Modal;