@react95/core
Version:
Windows 95 styleguide
114 lines (113 loc) • 4.04 kB
JavaScript
"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 events = require("../shared/events.cjs");
const TaskBar = React.forwardRef(
({ list }, ref) => {
const [showList, toggleShowList] = React.useState(false);
const [activeStart, toggleActiveStart] = React.useState(false);
const [modalWindows, setModalWindows] = React.useState([]);
const [activeWindow, setActiveWindow] = React.useState();
React.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) {
events.modals.emit(events.ModalEvents.ModalVisibilityChanged, {
id: lastModal == null ? void 0 : lastModal.id
});
}
return filteredModals;
});
};
const updateVisibleModal = ({ id }) => {
setActiveWindow(id);
};
events.modals.on(events.ModalEvents.AddModal, addModal);
events.modals.on(events.ModalEvents.RemoveModal, removeModal);
events.modals.on(events.ModalEvents.ModalVisibilityChanged, updateVisibleModal);
return () => {
events.modals.off(events.ModalEvents.AddModal, addModal);
events.modals.off(events.ModalEvents.RemoveModal, removeModal);
events.modals.off(events.ModalEvents.ModalVisibilityChanged, updateVisibleModal);
};
}, []);
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
},
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) {
events.modals.emit(events.ModalEvents.MinimizeModal, { id });
setActiveWindow("Minimize");
} else {
events.modals.emit(events.ModalEvents.RestoreModal, { id });
events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
}
},
small: false
},
/* @__PURE__ */ React.createElement("div", { className: TaskBar_css.truncate }, title)
)
)),
/* @__PURE__ */ React.createElement(Clock.Clock, null)
);
}
);
exports.TaskBar = TaskBar;