graphiql
Version:
An graphical interactive in-browser GraphQL IDE.
436 lines (435 loc) • 14.3 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { useEffect, useState } from "react";
import { useGraphiQLActions, pick, useGraphiQL, cn, Dialog, VisuallyHidden, ButtonGroup, Button, KEY_MAP, Tooltip, UnStyledButton, ReloadIcon, KeyboardShortcutIcon, SettingsIcon, isMacOs } from "@graphiql/react";
import { ShortKeys } from "./short-keys.js";
const LABEL = {
refetchSchema: `Re-fetch GraphQL schema (${KEY_MAP.refetchSchema.key})`,
shortCutDialog: "Open short keys dialog",
settingsDialogs: "Open settings dialog"
};
const THEMES = ["light", "dark", "system"];
const Sidebar = (t0) => {
const $ = c(72);
const {
forcedTheme: $forcedTheme,
showPersistHeadersSettings,
setHiddenElement
} = t0;
const forcedTheme = $forcedTheme && THEMES.includes($forcedTheme) ? $forcedTheme : void 0;
const {
setShouldPersistHeaders,
introspect,
setVisiblePlugin,
setTheme
} = useGraphiQLActions();
let t1;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t1 = pick("shouldPersistHeaders", "isIntrospecting", "visiblePlugin", "plugins", "theme", "storage");
$[0] = t1;
} else {
t1 = $[0];
}
const {
shouldPersistHeaders,
isIntrospecting,
visiblePlugin,
plugins,
theme,
storage
} = useGraphiQL(t1);
let t2;
let t3;
if ($[1] !== forcedTheme || $[2] !== setTheme) {
t2 = () => {
if (forcedTheme === "system") {
setTheme(null);
} else {
if (forcedTheme === "light" || forcedTheme === "dark") {
setTheme(forcedTheme);
}
}
};
t3 = [forcedTheme, setTheme];
$[1] = forcedTheme;
$[2] = setTheme;
$[3] = t2;
$[4] = t3;
} else {
t2 = $[3];
t3 = $[4];
}
useEffect(t2, t3);
const [showDialog, setShowDialog] = useState(null);
const [clearStorageStatus, setClearStorageStatus] = useState();
let t4;
let t5;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t4 = () => {
const openSettings = function openSettings2(event) {
if ((isMacOs ? event.metaKey : event.ctrlKey) && event.key === ",") {
event.preventDefault();
setShowDialog(_temp);
}
};
window.addEventListener("keydown", openSettings);
return () => {
window.removeEventListener("keydown", openSettings);
};
};
t5 = [];
$[5] = t4;
$[6] = t5;
} else {
t4 = $[5];
t5 = $[6];
}
useEffect(t4, t5);
let t6;
if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
t6 = function handleOpenShortKeysDialog2(isOpen) {
if (!isOpen) {
setShowDialog(null);
}
};
$[7] = t6;
} else {
t6 = $[7];
}
const handleOpenShortKeysDialog = t6;
let t7;
if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
t7 = function handleOpenSettingsDialog2(isOpen_0) {
if (!isOpen_0) {
setShowDialog(null);
setClearStorageStatus(void 0);
}
};
$[8] = t7;
} else {
t7 = $[8];
}
const handleOpenSettingsDialog = t7;
let t8;
if ($[9] !== storage) {
t8 = function handleClearData2() {
try {
storage.clear();
setClearStorageStatus("success");
} catch {
setClearStorageStatus("error");
}
};
$[9] = storage;
$[10] = t8;
} else {
t8 = $[10];
}
const handleClearData = t8;
let t9;
if ($[11] !== setShouldPersistHeaders) {
t9 = (event_0) => {
setShouldPersistHeaders(event_0.currentTarget.dataset.value === "true");
};
$[11] = setShouldPersistHeaders;
$[12] = t9;
} else {
t9 = $[12];
}
const handlePersistHeaders = t9;
let t10;
if ($[13] !== setTheme) {
t10 = (event_1) => {
const selectedTheme = event_1.currentTarget.dataset.theme;
setTheme(selectedTheme || null);
};
$[13] = setTheme;
$[14] = t10;
} else {
t10 = $[14];
}
const handleChangeTheme = t10;
let t11;
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
t11 = (event_2) => {
setShowDialog(event_2.currentTarget.dataset.value);
};
$[15] = t11;
} else {
t11 = $[15];
}
const handleShowDialog = t11;
let t12;
if ($[16] !== plugins || $[17] !== setHiddenElement || $[18] !== setVisiblePlugin || $[19] !== visiblePlugin) {
t12 = (event_3) => {
const pluginIndex = Number(event_3.currentTarget.dataset.index);
const plugin = plugins.find((_, index) => pluginIndex === index);
const isVisible = plugin === visiblePlugin;
if (isVisible) {
setVisiblePlugin(null);
setHiddenElement("first");
} else {
setVisiblePlugin(plugin);
setHiddenElement(null);
}
};
$[16] = plugins;
$[17] = setHiddenElement;
$[18] = setVisiblePlugin;
$[19] = visiblePlugin;
$[20] = t12;
} else {
t12 = $[20];
}
const handlePluginClick = t12;
let t13;
if ($[21] !== handlePluginClick || $[22] !== plugins || $[23] !== visiblePlugin) {
let t142;
if ($[25] !== handlePluginClick || $[26] !== visiblePlugin) {
t142 = (plugin_0, index_0) => {
const isVisible_0 = plugin_0 === visiblePlugin;
const label = `${isVisible_0 ? "Hide" : "Show"} ${plugin_0.title}`;
return /* @__PURE__ */ jsx(Tooltip, { label, children: /* @__PURE__ */ jsx(UnStyledButton, { type: "button", className: cn(isVisible_0 && "active"), onClick: handlePluginClick, "data-index": index_0, "aria-label": label, children: /* @__PURE__ */ jsx(plugin_0.icon, { "aria-hidden": "true" }) }) }, plugin_0.title);
};
$[25] = handlePluginClick;
$[26] = visiblePlugin;
$[27] = t142;
} else {
t142 = $[27];
}
t13 = plugins.map(t142);
$[21] = handlePluginClick;
$[22] = plugins;
$[23] = visiblePlugin;
$[24] = t13;
} else {
t13 = $[24];
}
let t14;
if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
t14 = {
marginTop: "auto"
};
$[28] = t14;
} else {
t14 = $[28];
}
const t15 = isIntrospecting && "graphiql-spin";
let t16;
if ($[29] !== t15) {
t16 = cn(t15);
$[29] = t15;
$[30] = t16;
} else {
t16 = $[30];
}
let t17;
if ($[31] !== t16) {
t17 = /* @__PURE__ */ jsx(ReloadIcon, { className: t16, "aria-hidden": "true" });
$[31] = t16;
$[32] = t17;
} else {
t17 = $[32];
}
let t18;
if ($[33] !== introspect || $[34] !== isIntrospecting || $[35] !== t17) {
t18 = /* @__PURE__ */ jsx(Tooltip, { label: LABEL.refetchSchema, children: /* @__PURE__ */ jsx(UnStyledButton, { type: "button", disabled: isIntrospecting, onClick: introspect, "aria-label": LABEL.refetchSchema, style: t14, children: t17 }) });
$[33] = introspect;
$[34] = isIntrospecting;
$[35] = t17;
$[36] = t18;
} else {
t18 = $[36];
}
let t19;
if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
t19 = /* @__PURE__ */ jsx(Tooltip, { label: LABEL.shortCutDialog, children: /* @__PURE__ */ jsx(UnStyledButton, { type: "button", "data-value": "short-keys", onClick: handleShowDialog, "aria-label": LABEL.shortCutDialog, children: /* @__PURE__ */ jsx(KeyboardShortcutIcon, { "aria-hidden": "true" }) }) });
$[37] = t19;
} else {
t19 = $[37];
}
let t20;
if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
t20 = /* @__PURE__ */ jsx(Tooltip, { label: LABEL.settingsDialogs, children: /* @__PURE__ */ jsx(UnStyledButton, { type: "button", "data-value": "settings", onClick: handleShowDialog, "aria-label": LABEL.settingsDialogs, children: /* @__PURE__ */ jsx(SettingsIcon, { "aria-hidden": "true" }) }) });
$[38] = t20;
} else {
t20 = $[38];
}
const t21 = showDialog === "short-keys";
let t22;
if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
t22 = /* @__PURE__ */ jsx(Dialog.Title, { className: "graphiql-dialog-title", children: "Short Keys" });
$[39] = t22;
} else {
t22 = $[39];
}
let t23;
if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
t23 = /* @__PURE__ */ jsxs("div", { className: "graphiql-dialog-header", children: [
t22,
/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Dialog.Description, { children: "This modal provides a list of available keyboard shortcuts and their functions." }) }),
/* @__PURE__ */ jsx(Dialog.Close, {})
] });
$[40] = t23;
} else {
t23 = $[40];
}
let t24;
if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
t24 = /* @__PURE__ */ jsx("div", { className: "graphiql-dialog-section", children: /* @__PURE__ */ jsx(ShortKeys, {}) });
$[41] = t24;
} else {
t24 = $[41];
}
let t25;
if ($[42] !== t21) {
t25 = /* @__PURE__ */ jsxs(Dialog, { open: t21, onOpenChange: handleOpenShortKeysDialog, children: [
t23,
t24
] });
$[42] = t21;
$[43] = t25;
} else {
t25 = $[43];
}
const t26 = showDialog === "settings";
let t27;
if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
t27 = /* @__PURE__ */ jsx(Dialog.Title, { className: "graphiql-dialog-title", children: "Settings" });
$[44] = t27;
} else {
t27 = $[44];
}
let t28;
if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
t28 = /* @__PURE__ */ jsxs("div", { className: "graphiql-dialog-header", children: [
t27,
/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Dialog.Description, { children: "This modal lets you adjust header persistence, interface theme, and clear local storage." }) }),
/* @__PURE__ */ jsx(Dialog.Close, {})
] });
$[45] = t28;
} else {
t28 = $[45];
}
let t29;
if ($[46] !== handlePersistHeaders || $[47] !== shouldPersistHeaders || $[48] !== showPersistHeadersSettings) {
t29 = showPersistHeadersSettings ? /* @__PURE__ */ jsxs("div", { className: "graphiql-dialog-section", children: [
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("div", { className: "graphiql-dialog-section-title", children: "Persist headers" }),
/* @__PURE__ */ jsxs("div", { className: "graphiql-dialog-section-caption", children: [
"Save headers upon reloading.",
" ",
/* @__PURE__ */ jsx("span", { className: "graphiql-warning-text", children: "Only enable if you trust this device." })
] })
] }),
/* @__PURE__ */ jsxs(ButtonGroup, { children: [
/* @__PURE__ */ jsx(Button, { type: "button", id: "enable-persist-headers", className: cn(shouldPersistHeaders && "active"), "data-value": "true", onClick: handlePersistHeaders, children: "On" }),
/* @__PURE__ */ jsx(Button, { type: "button", id: "disable-persist-headers", className: cn(!shouldPersistHeaders && "active"), onClick: handlePersistHeaders, children: "Off" })
] })
] }) : null;
$[46] = handlePersistHeaders;
$[47] = shouldPersistHeaders;
$[48] = showPersistHeadersSettings;
$[49] = t29;
} else {
t29 = $[49];
}
let t30;
if ($[50] !== forcedTheme || $[51] !== handleChangeTheme || $[52] !== theme) {
t30 = !forcedTheme && /* @__PURE__ */ jsxs("div", { className: "graphiql-dialog-section", children: [
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("div", { className: "graphiql-dialog-section-title", children: "Theme" }),
/* @__PURE__ */ jsx("div", { className: "graphiql-dialog-section-caption", children: "Adjust how the interface appears." })
] }),
/* @__PURE__ */ jsxs(ButtonGroup, { children: [
/* @__PURE__ */ jsx(Button, { type: "button", className: cn(theme === null && "active"), onClick: handleChangeTheme, children: "System" }),
/* @__PURE__ */ jsx(Button, { type: "button", className: cn(theme === "light" && "active"), "data-theme": "light", onClick: handleChangeTheme, children: "Light" }),
/* @__PURE__ */ jsx(Button, { type: "button", className: cn(theme === "dark" && "active"), "data-theme": "dark", onClick: handleChangeTheme, children: "Dark" })
] })
] });
$[50] = forcedTheme;
$[51] = handleChangeTheme;
$[52] = theme;
$[53] = t30;
} else {
t30 = $[53];
}
let t31;
if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
t31 = /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("div", { className: "graphiql-dialog-section-title", children: "Clear storage" }),
/* @__PURE__ */ jsx("div", { className: "graphiql-dialog-section-caption", children: "Remove all locally stored data and start fresh." })
] });
$[54] = t31;
} else {
t31 = $[54];
}
const t32 = clearStorageStatus === "success";
let t33;
if ($[55] !== clearStorageStatus) {
t33 = {
success: "Cleared data",
error: "Failed"
}[clearStorageStatus] || "Clear data";
$[55] = clearStorageStatus;
$[56] = t33;
} else {
t33 = $[56];
}
let t34;
if ($[57] !== clearStorageStatus || $[58] !== handleClearData || $[59] !== t32 || $[60] !== t33) {
t34 = /* @__PURE__ */ jsxs("div", { className: "graphiql-dialog-section", children: [
t31,
/* @__PURE__ */ jsx(Button, { type: "button", state: clearStorageStatus, disabled: t32, onClick: handleClearData, children: t33 })
] });
$[57] = clearStorageStatus;
$[58] = handleClearData;
$[59] = t32;
$[60] = t33;
$[61] = t34;
} else {
t34 = $[61];
}
let t35;
if ($[62] !== t26 || $[63] !== t29 || $[64] !== t30 || $[65] !== t34) {
t35 = /* @__PURE__ */ jsxs(Dialog, { open: t26, onOpenChange: handleOpenSettingsDialog, children: [
t28,
t29,
t30,
t34
] });
$[62] = t26;
$[63] = t29;
$[64] = t30;
$[65] = t34;
$[66] = t35;
} else {
t35 = $[66];
}
let t36;
if ($[67] !== t13 || $[68] !== t18 || $[69] !== t25 || $[70] !== t35) {
t36 = /* @__PURE__ */ jsxs("div", { className: "graphiql-sidebar", children: [
t13,
t18,
t19,
t20,
t25,
t35
] });
$[67] = t13;
$[68] = t18;
$[69] = t25;
$[70] = t35;
$[71] = t36;
} else {
t36 = $[71];
}
return t36;
};
function _temp(prev) {
return prev === "settings" ? null : "settings";
}
export {
Sidebar
};
//# sourceMappingURL=sidebar.js.map