@react95/core/esm/TaskBar/TaskBar.mjs

Windows 95 styleguide

import React, { forwardRef, useState, useEffect } from "react";
import { Frame } from "../Frame/Frame.mjs";
import { Clock } from "./Clock.mjs";
import { WindowButton } from "./WindowButton.mjs";
import { Logo } from "@react95/icons";
import { truncate } from "./TaskBar.css.mjs";
import { modals, ModalEvents } from "../shared/events.mjs";
const TaskBar = forwardRef(
  ({ list }, ref) => {
    const [showList, toggleShowList] = useState(false);
    const [activeStart, toggleActiveStart] = useState(false);
    const [modalWindows, setModalWindows] = React.useState([]);
    const [activeWindow, setActiveWindow] = useState();
    useEffect(() => {
      const addModal = (window) => {
        setModalWindows((prevModals) => [...prevModals, window]);
      };
      const removeModal = (data) => {
        setModalWindows((prevModals) => {
          const filteredModals = prevModals.filter(
            (modal) => modal.id !== data.id
          );
          const lastModal = filteredModals.at(-1);
          if (!activeWindow && lastModal) {
            modals.emit(ModalEvents.ModalVisibilityChanged, {
              id: lastModal == null ? void 0 : lastModal.id
            });
          }
          return filteredModals;
        });
      };
      const updateVisibleModal = ({ id }) => {
        setActiveWindow(id);
      };
      modals.on(ModalEvents.AddModal, addModal);
      modals.on(ModalEvents.RemoveModal, removeModal);
      modals.on(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
      return () => {
        modals.off(ModalEvents.AddModal, addModal);
        modals.off(ModalEvents.RemoveModal, removeModal);
        modals.off(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
      };
    }, []);
    return /* @__PURE__ */ React.createElement(
      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
      },
      showList && /* @__PURE__ */ React.createElement(
        Frame,
        {
          position: "absolute",
          bottom: "28px",
          onClick: () => {
            toggleActiveStart(false);
            toggleShowList(false);
          }
        },
        list
      ),
      /* @__PURE__ */ React.createElement(
        WindowButton,
        {
          small: true,
          icon: /* @__PURE__ */ React.createElement(Logo, { variant: "32x32_4" }),
          active: activeStart,
          onClick: () => {
            toggleActiveStart(!activeStart);
            toggleShowList(!showList);
          }
        },
        "Start"
      ),
      /* @__PURE__ */ React.createElement(Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, modalWindows.map(
        ({ icon, title, hasButton, id }) => hasButton && /* @__PURE__ */ React.createElement(
          WindowButton,
          {
            key: id,
            icon,
            active: id === activeWindow,
            onClick: () => {
              if (id === activeWindow) {
                modals.emit(ModalEvents.MinimizeModal, { id });
                setActiveWindow("Minimize");
              } else {
                modals.emit(ModalEvents.RestoreModal, { id });
                modals.emit(ModalEvents.ModalVisibilityChanged, { id });
              }
            },
            small: false
          },
          /* @__PURE__ */ React.createElement("div", { className: truncate }, title)
        )
      )),
      /* @__PURE__ */ React.createElement(Clock, null)
    );
  }
);
export {
  TaskBar
};