@react95/core/cjs/TaskBar/TaskBar.cjs

Windows 95 styleguide

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const React = require("react");
const Frame = require("../Frame/Frame.cjs");
const Clock = require("./Clock.cjs");
const WindowButton = require("./WindowButton.cjs");
const icons = require("@react95/icons");
const TaskBar_css = require("./TaskBar.css.cjs");
const useModal = require("../shared/use-modal.cjs");
const modalTypes = require("../shared/modal-types.cjs");
const TaskBar = React.forwardRef(
  ({ list, className }, ref) => {
    const [showList, toggleShowList] = React.useState(false);
    const [activeStart, toggleActiveStart] = React.useState(false);
    const [modalWindows, setModalWindows] = React.useState([]);
    const [activeWindow, setActiveWindow] = React.useState();
    const { minimize, restore, focus, subscribe } = useModal.useModal();
    React.useEffect(() => {
      const addModal = (window) => {
        if (!window.id) {
          console.warn("Modal added without ID");
          return;
        }
        setModalWindows((prevModals) => {
          if (prevModals.some((modal) => modal.id === window.id)) {
            return prevModals;
          }
          return [...prevModals, window];
        });
      };
      const removeModal = (data) => {
        setModalWindows((prevModals) => {
          const filteredModals = prevModals.filter(
            (modal) => modal.id !== data.id
          );
          const lastModal = filteredModals.at(-1);
          if (activeWindow === data.id && lastModal) {
            focus(lastModal.id);
          }
          return filteredModals;
        });
      };
      const updateVisibleModal = ({ id }) => {
        setActiveWindow(id);
      };
      const unsubscribeAdd = subscribe(modalTypes.ModalEvents.AddModal, addModal);
      const unsubscribeRemove = subscribe(modalTypes.ModalEvents.RemoveModal, removeModal);
      const unsubscribeVisibility = subscribe(
        modalTypes.ModalEvents.ModalVisibilityChanged,
        updateVisibleModal
      );
      return () => {
        unsubscribeAdd();
        unsubscribeRemove();
        unsubscribeVisibility();
      };
    }, [activeWindow, subscribe, focus]);
    return /* @__PURE__ */ React.createElement(
      Frame.Frame,
      {
        position: "fixed",
        bottom: "0px",
        left: "0px",
        right: "0px",
        display: "flex",
        justifyContent: "space-between",
        h: "28px",
        w: "100%",
        padding: "$2",
        zIndex: "$taskbar",
        backgroundColor: "$material",
        boxShadow: "$out",
        ref,
        className
      },
      showList && /* @__PURE__ */ React.createElement(
        Frame.Frame,
        {
          position: "absolute",
          bottom: "28px",
          onClick: () => {
            toggleActiveStart(false);
            toggleShowList(false);
          }
        },
        list
      ),
      /* @__PURE__ */ React.createElement(
        WindowButton.WindowButton,
        {
          small: true,
          icon: /* @__PURE__ */ React.createElement(icons.Logo, { variant: "32x32_4" }),
          active: activeStart,
          onClick: () => {
            toggleActiveStart(!activeStart);
            toggleShowList(!showList);
          }
        },
        "Start"
      ),
      /* @__PURE__ */ React.createElement(Frame.Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, modalWindows.map(
        ({ icon, title, hasButton, id }) => hasButton && /* @__PURE__ */ React.createElement(
          WindowButton.WindowButton,
          {
            key: id,
            icon,
            active: id === activeWindow,
            onClick: () => {
              if (id === activeWindow) {
                minimize(id);
                setActiveWindow(void 0);
              } else {
                restore(id);
                focus(id);
              }
            },
            small: false
          },
          /* @__PURE__ */ React.createElement("div", { className: TaskBar_css.truncate }, title)
        )
      )),
      /* @__PURE__ */ React.createElement(Clock.Clock, null)
    );
  }
);
exports.TaskBar = TaskBar;