/**
* A right-side slide-over that houses the full Settings form, keeping the home page
* uncluttered while the deep generation knobs stay one click away. Closes on the
* overlay, the × button, or the Escape key.
* @module gui/components/SettingsDrawer
*/
import { useEffect } from "react";
import { useIntl, defineMessages } from "react-intl";
import Settings from "./Settings.jsx";
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
const msgs = defineMessages({
settings: {
id: "settingsDrawer.title",
defaultMessage: "Settings"
},
close: {
id: "settingsDrawer.close",
defaultMessage: "Close settings"
}
});
/**
* @param {object} props
* @param {boolean} props.open Whether the drawer is shown.
* @param {Function} props.onClose Close the drawer.
* @param {object} props.settings The current settings.
* @param {Function} props.setSettings Update the settings.
* @returns {(JSX.Element|null)}
*/
export default function SettingsDrawer({
open,
onClose,
settings,
setSettings
}) {
const intl = useIntl();
useEffect(() => {
if (!open) return undefined;
const onKey = e => e.key === "Escape" && onClose();
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return /*#__PURE__*/_jsxDEV(_Fragment, {
children: [/*#__PURE__*/_jsxDEV("div", {
className: "drawer-overlay",
onClick: onClose
}, void 0, false), /*#__PURE__*/_jsxDEV("aside", {
className: "drawer",
role: "dialog",
"aria-label": intl.formatMessage(msgs.settings),
children: [/*#__PURE__*/_jsxDEV("div", {
className: "drawer-head",
children: [/*#__PURE__*/_jsxDEV("h2", {
children: intl.formatMessage(msgs.settings)
}, void 0, false), /*#__PURE__*/_jsxDEV("div", {
className: "spacer"
}, void 0, false), /*#__PURE__*/_jsxDEV("button", {
className: "drawer-close",
onClick: onClose,
"aria-label": intl.formatMessage(msgs.close),
children: "×"
}, void 0, false)]
}, void 0, true), /*#__PURE__*/_jsxDEV("div", {
className: "drawer-body",
children: /*#__PURE__*/_jsxDEV(Settings, {
settings: settings,
setSettings: setSettings
}, void 0, false)
}, void 0, false)]
}, void 0, true)]
}, void 0, true);
}