@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 events = require("../shared/events.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("");
    React.useEffect(() => {
      const handleVisibilityChange = ({ id: activeId }) => {
        setId(activeId);
      };
      events.modals.on(events.ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
      return () => {
        events.modals.off(events.ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
      };
    }, []);
    const handleMinimize = () => {
      events.modals.emit(events.ModalEvents.MinimizeModal, { id });
      events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id: "no id" });
    };
    return /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Minimize, { ...props, ref, onClick: handleMinimize });
  }
);
const ModalRenderer = ({
  hasWindowButton: hasButton = true,
  buttons = [],
  buttonsAlignment = "flex-end",
  children,
  icon,
  menu = [],
  title,
  dragOptions,
  titleBarOptions,
  className,
  ...rest
}, ref) => {
  const [id] = React.useState(nanoid.nanoid());
  const [menuOpened, setMenuOpened] = React.useState("");
  const [isActive, setIsActive] = React.useState(false);
  const [isModalMinimized, setIsModalMinimized] = React.useState(false);
  const draggableRef = React.useRef(null);
  react.useDraggable(draggableRef, {
    ...dragOptions,
    handle: ".draggable"
  });
  const menuRef = React.useRef(null);
  usehooksTs.useOnClickOutside(menuRef, () => {
    setMenuOpened("");
  });
  React.useEffect(() => {
    events.modals.emit(events.ModalEvents.AddModal, {
      icon,
      title,
      id,
      hasButton
    });
    events.modals.on(events.ModalEvents.ModalVisibilityChanged, ({ id: activeId }) => {
      setIsActive(activeId === id);
    });
    events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
    return () => {
      events.modals.emit(events.ModalEvents.RemoveModal, { id });
    };
  }, []);
  React.useEffect(() => {
    events.modals.on(events.ModalEvents.MinimizeModal, ({ id: activeId }) => {
      if (activeId === id) {
        setIsModalMinimized(true);
      }
    });
    events.modals.on(events.ModalEvents.RestoreModal, ({ id: activeId }) => {
      if (activeId === id) {
        setIsModalMinimized(false);
      }
    });
    return () => {
      events.modals.off(events.ModalEvents.MinimizeModal, () => {
      });
      events.modals.off(events.ModalEvents.RestoreModal, () => {
      });
    };
  }, [id]);
  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: () => {
        events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
      }
    },
    /* @__PURE__ */ React.createElement(
      TitleBar.TitleBar,
      {
        active: isActive,
        icon,
        title,
        className: "draggable"
      },
      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;