alinea
Version:
Headless git-based CMS
309 lines (302 loc) • 11.1 kB
JavaScript
import {
esm_default
} from "../../chunks/chunk-G2AFWRAD.js";
import {
dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";
// node_modules/@react-hook/debounce/dist/esm/index.mjs
import { useRef as r, useEffect as t, useCallback as e, useState as n } from "react";
var o = function(n3, o3, c2) {
function i() {
l2.current && clearTimeout(l2.current), l2.current = void 0;
}
function a() {
l2.current = void 0;
}
void 0 === o3 && (o3 = 100), void 0 === c2 && (c2 = 0);
var v = esm_default(n3), l2 = r(), m = [o3, c2, v];
return t(() => i, m), e(function() {
var r4 = arguments, { current: t3 } = l2;
if (void 0 === t3 && c2) return l2.current = setTimeout(a, o3), v.current.apply(null, r4);
t3 && clearTimeout(t3), l2.current = setTimeout(() => {
l2.current = void 0, v.current.apply(null, r4);
}, o3);
}, m);
};
var c = (r4, t3, e3) => {
var u = n(r4);
return [u[0], o(u[1], t3, e3)];
};
// node_modules/@react-hook/event/dist/esm/index.mjs
import { useRef as r2, useEffect as e2 } from "react";
function esm_default2(t3, n3, a, u) {
var c2 = r2(a), i = r2(u);
e2(() => {
c2.current = a, i.current = u;
}), e2(() => {
function r4() {
if (!a2) {
for (var r5 = arguments.length, e4 = new Array(r5), t4 = 0; r5 > t4; t4++) e4[t4] = arguments[t4];
c2.current.apply(this, e4);
}
}
var e3 = t3 && "current" in t3 ? t3.current : t3;
if (e3) {
var a2 = 0;
e3.addEventListener(n3, r4);
var u2 = i.current;
return () => {
a2 = 1, e3.removeEventListener(n3, r4), u2 && u2();
};
}
}, [t3, n3]);
}
// node_modules/@react-hook/window-size/dist/esm/index.mjs
var t2 = {};
var n2 = "undefined" == typeof window ? null : window;
var o2 = n2 && void 0 !== n2.visualViewport ? n2.visualViewport : null;
var d = () => [document.documentElement.clientWidth, document.documentElement.clientHeight];
var r3 = function(r4) {
void 0 === r4 && (r4 = t2);
var { wait: u, leading: l2, initialWidth: a = 0, initialHeight: c2 = 0 } = r4, [m, f] = c("undefined" == typeof document ? [a, c2] : d, u, l2), h = () => f(d);
return esm_default2(n2, "resize", h), esm_default2(o2, "resize", h), esm_default2(n2, "orientationchange", h), m;
};
var l = (e3) => r3(e3)[0];
// src/dashboard/view/Sidebar.tsx
import { Root } from "alinea/core/Root";
import { Workspace } from "alinea/core/Workspace";
import { entries } from "alinea/core/util/Objects";
import { link, useNavigate } from "alinea/dashboard/util/HashRouter";
import { HStack, Icon, Stack } from "alinea/ui";
import { Badge } from "alinea/ui/Badge";
import { DropdownMenu } from "alinea/ui/DropdownMenu";
import { Pane } from "alinea/ui/Pane";
import { useNonInitialEffect } from "alinea/ui/hook/UseNonInitialEffect";
import { IcRoundUnfoldMore } from "alinea/ui/icons/IcRoundUnfoldMore";
import { createSlots } from "alinea/ui/util/Slots";
import {
createContext,
useContext,
useReducer
} from "react";
import { useConfig } from "../hook/UseConfig.js";
import { useEntryLocation } from "../hook/UseEntryLocation.js";
import { useLocale } from "../hook/UseLocale.js";
import { useNav } from "../hook/UseNav.js";
import { useRoot } from "../hook/UseRoot.js";
import { useWorkspace } from "../hook/UseWorkspace.js";
// src/dashboard/view/Sidebar.module.scss
var Sidebar_module_default = {
"root": "alinea-Sidebar",
"collapse": "alinea-Sidebar-collapse",
"is-left": "alinea-Sidebar-is-left",
"isLeft": "alinea-Sidebar-is-left",
"is-right": "alinea-Sidebar-is-right",
"isRight": "alinea-Sidebar-is-right",
"is-open": "alinea-Sidebar-is-open",
"isOpen": "alinea-Sidebar-is-open",
"collapse-inner": "alinea-Sidebar-collapse-inner",
"collapseInner": "alinea-Sidebar-collapse-inner",
"collapse-overlay": "alinea-Sidebar-collapse-overlay",
"collapseOverlay": "alinea-Sidebar-collapse-overlay",
"nav-inner": "alinea-Sidebar-nav-inner",
"navInner": "alinea-Sidebar-nav-inner",
"nav-container": "alinea-Sidebar-nav-container",
"navContainer": "alinea-Sidebar-nav-container",
"nav-menu": "alinea-Sidebar-nav-menu",
"navMenu": "alinea-Sidebar-nav-menu",
"nav-menu-item": "alinea-Sidebar-nav-menu-item",
"navMenuItem": "alinea-Sidebar-nav-menu-item",
"nav-menu-item-bg": "alinea-Sidebar-nav-menu-item-bg",
"navMenuItemBg": "alinea-Sidebar-nav-menu-item-bg",
"is-selected": "alinea-Sidebar-is-selected",
"isSelected": "alinea-Sidebar-is-selected",
"nav-portal": "alinea-Sidebar-nav-portal",
"navPortal": "alinea-Sidebar-nav-portal",
"navHeader": "alinea-Sidebar-navHeader",
"navHeader-workspace": "alinea-Sidebar-navHeader-workspace",
"navHeaderWorkspace": "alinea-Sidebar-navHeader-workspace"
};
// src/dashboard/view/Sidebar.tsx
import { WorkspaceLabel } from "./WorkspaceLabel.js";
import { Langswitch } from "./entry/LangSwitch.js";
import { jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(Sidebar_module_default);
var Sidebar;
((Sidebar2) => {
const slots = createSlots();
const opened = createContext(void 0);
function use() {
const [open, toggleOpen] = useContext(opened);
return {
isNavOpen: open.nav,
isPreviewOpen: open.preview,
toggleNav: () => toggleOpen("nav"),
togglePreview: () => toggleOpen("preview")
};
}
Sidebar2.use = use;
function simpleToggle(open, toggle) {
if (typeof toggle === "string") return { ...open, [toggle]: !open[toggle] };
return { ...open, ...toggle };
}
function uniqueToggle(open, toggle) {
const empty = { nav: false, preview: false };
if (typeof toggle === "string") return { ...empty, [toggle]: !open[toggle] };
return { ...empty, ...toggle };
}
function Provider({ children }) {
const innerWidth = l();
const isLarge = innerWidth >= 1024;
const isSmall = innerWidth < 768;
const [open, dispatchOpen] = useReducer(
isLarge ? simpleToggle : uniqueToggle,
{ nav: true, preview: isLarge }
);
const { name: workspace } = useWorkspace();
useNonInitialEffect(() => {
if (!isSmall) return;
dispatchOpen({ nav: true });
}, [isSmall, workspace]);
return /* @__PURE__ */ jsx(slots.Provider, { children: /* @__PURE__ */ jsx(opened.Provider, { value: [open, dispatchOpen], children }) });
}
Sidebar2.Provider = Provider;
function Tree({
children,
...props
}) {
return /* @__PURE__ */ jsx(slots.Slot, { children });
}
Sidebar2.Tree = Tree;
function Preview({ children }) {
const { isPreviewOpen, togglePreview } = use();
return /* @__PURE__ */ jsxs("div", { className: styles.collapse("right", { open: isPreviewOpen }), children: [
/* @__PURE__ */ jsx("div", { className: styles.collapse.overlay(), onClick: togglePreview }),
isPreviewOpen && /* @__PURE__ */ jsx(
Pane,
{
id: "preview",
resizable: "left",
className: styles.collapse.inner(),
children
}
)
] });
}
Sidebar2.Preview = Preview;
function NavHeader() {
const locale = useLocale();
const config = useConfig();
const workspace = useWorkspace();
const root = useRoot();
const workspaces = entries(config.workspaces);
const navigate = useNavigate();
const nav = useNav();
const entryLocation = useEntryLocation();
const location = {
root: root.name,
workspace: workspace.name,
...entryLocation
};
return /* @__PURE__ */ jsxs(HStack, { as: "header", center: true, gap: 12, className: styles.navHeader(), children: [
workspaces.length > 1 ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { bottom: true, children: [
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 4, children: [
/* @__PURE__ */ jsx(
WorkspaceLabel,
{
label: workspace.label,
color: workspace.color,
icon: workspace.icon
}
),
/* @__PURE__ */ jsx(Icon, { icon: IcRoundUnfoldMore })
] }) }),
/* @__PURE__ */ jsx(DropdownMenu.Items, { children: workspaces.map(([key, workspace2]) => {
const { roots, label, color, icon } = Workspace.data(workspace2);
const [name, root2] = entries(roots)[0];
return /* @__PURE__ */ jsx(
DropdownMenu.Item,
{
onClick: () => navigate(
nav.entry({
workspace: key,
root: name,
locale: Root.defaultLocale(root2)
})
),
children: /* @__PURE__ */ jsx(WorkspaceLabel, { label, color, icon })
},
key
);
}) })
] }) : /* @__PURE__ */ jsx(
"a",
{
...link(nav.root({ workspace: workspace.name })),
className: styles.navHeader.workspace(),
children: /* @__PURE__ */ jsx(
WorkspaceLabel,
{
label: workspace.label,
color: workspace.color,
icon: workspace.icon
}
)
}
),
/* @__PURE__ */ jsx(Stack.Right, { children: root.i18n && /* @__PURE__ */ jsx(
Langswitch,
{
selected: locale,
locales: root.i18n.locales,
onChange: (locale2) => {
navigate(nav.entry({ ...location, locale: locale2 }));
}
}
) })
] });
}
function Nav({ children }) {
const { isNavOpen, toggleNav } = use();
return /* @__PURE__ */ jsxs("div", { className: styles.collapse("left", { open: isNavOpen }), children: [
/* @__PURE__ */ jsx("div", { className: styles.collapse.overlay(), onClick: toggleNav }),
/* @__PURE__ */ jsx(
Pane,
{
id: "content-tree",
resizable: "right",
defaultWidth: 360,
minWidth: 200,
children: /* @__PURE__ */ jsxs("div", { className: styles.nav.inner(), children: [
/* @__PURE__ */ jsx(NavHeader, {}),
/* @__PURE__ */ jsxs("div", { className: styles.nav.container(), children: [
/* @__PURE__ */ jsx("nav", { className: styles.nav.menu(), children }),
/* @__PURE__ */ jsx(slots.Portal, { className: styles.nav.portal() })
] })
] })
}
)
] });
}
Sidebar2.Nav = Nav;
((Nav2) => {
function Item({ children, selected, badge, ...props }) {
return /* @__PURE__ */ jsx(
"a",
{
...props,
...link(props.href),
className: styles.nav.menu.item.mergeProps(props)({ selected }),
children: /* @__PURE__ */ jsx("div", { className: styles.nav.menu.item.bg(), children: /* @__PURE__ */ jsx(Badge, { amount: badge, right: -4, bottom: -3, children }) })
}
);
}
Nav2.Item = Item;
})(Nav = Sidebar2.Nav || (Sidebar2.Nav = {}));
})(Sidebar || (Sidebar = {}));
var useSidebar = Sidebar.use;
export {
Sidebar,
useSidebar
};