alinea
Version:
[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)
302 lines (295 loc) • 10.9 kB
JavaScript
import {
esm_default
} from "../../chunks/chunk-G2AFWRAD.js";
import "../../chunks/chunk-U5RRZUYZ.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, c3) {
function i2() {
l.current && clearTimeout(l.current), l.current = void 0;
}
function a() {
l.current = void 0;
}
void 0 === o3 && (o3 = 100), void 0 === c3 && (c3 = 0);
var v = esm_default(n3), l = r(), m = [o3, c3, v];
return t(() => i2, m), e(function() {
var r3 = arguments, { current: t2 } = l;
if (void 0 === t2 && c3)
return l.current = setTimeout(a, o3), v.current.apply(null, r3);
t2 && clearTimeout(t2), l.current = setTimeout(() => {
l.current = void 0, v.current.apply(null, r3);
}, o3);
}, m);
};
var c = (r3, t2, e3) => {
var u = n(r3);
return [u[0], o(u[1], t2, e3)];
};
// node_modules/@react-hook/event/dist/esm/index.mjs
import { useRef as r2, useEffect as e2 } from "react";
function esm_default2(t2, n3, a, u) {
var c3 = r2(a), i2 = r2(u);
e2(() => {
c3.current = a, i2.current = u;
}), e2(() => {
function r3() {
if (!a2) {
for (var r4 = arguments.length, e4 = new Array(r4), t3 = 0; r4 > t3; t3++)
e4[t3] = arguments[t3];
c3.current.apply(this, e4);
}
}
var e3 = t2 && "current" in t2 ? t2.current : t2;
if (e3) {
var a2 = 0;
e3.addEventListener(n3, r3);
var u2 = i2.current;
return () => {
a2 = 1, e3.removeEventListener(n3, r3), u2 && u2();
};
}
}, [t2, n3]);
}
// node_modules/@react-hook/window-size/dist/esm/index.mjs
var n2 = {};
var i = "undefined" == typeof window ? null : window;
var o2 = () => [document.documentElement.clientWidth, document.documentElement.clientHeight];
var d = function(d2) {
void 0 === d2 && (d2 = n2);
var { wait: r3, leading: c3, initialWidth: m = 0, initialHeight: u = 0 } = d2, [a, l] = c("undefined" == typeof document ? [m, u] : o2, r3, c3), f = () => l(o2);
return esm_default2(i, "resize", f), esm_default2(i, "orientationchange", f), a;
};
var c2 = (e3) => d(e3)[0];
// src/dashboard/view/Sidebar.tsx
import { Root, Workspace } from "alinea/core";
import { entries } from "alinea/core/util/Objects";
import { link, useNavigate } from "alinea/dashboard/util/HashRouter";
import { HStack, Icon, Stack, fromModule } 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 = fromModule(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 = c2();
const isLarge = innerWidth >= 1024;
const isSmall = innerWidth < 768;
const [open, dispatchOpen] = useReducer(
isLarge ? simpleToggle : uniqueToggle,
{ nav: true, preview: isLarge }
);
const { entryId: id } = useEntryLocation() || {};
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 }),
/* @__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
};