alinea
Version:
Headless git-based CMS
129 lines (125 loc) • 5.06 kB
JavaScript
import {
dist_default
} from "../../../chunks/chunk-A5O3N2GS.js";
import "../../../chunks/chunk-NZLE2WMY.js";
// src/dashboard/view/explorer/ExplorerItem.tsx
import { getType } from "alinea/core/Internal";
import { resolveView } from "alinea/core/View";
import { link } from "alinea/dashboard/util/HashRouter";
import { EntryReference } from "alinea/picker/entry/EntryReference";
import { Icon } from "alinea/ui";
import { IcOutlineInsertDriveFile } from "alinea/ui/icons/IcOutlineInsertDriveFile";
import { IcRoundCheckBox } from "alinea/ui/icons/IcRoundCheckBox";
import { IcRoundCheckBoxOutlineBlank } from "alinea/ui/icons/IcRoundCheckBoxOutlineBlank";
import { IcRoundKeyboardArrowRight } from "alinea/ui/icons/IcRoundKeyboardArrowRight";
import { useDashboard } from "../../hook/UseDashboard.js";
import { useExplorer } from "../../hook/UseExplorer.js";
import { useFocusListItem } from "../../hook/UseFocusList.js";
import { useNav } from "../../hook/UseNav.js";
// src/dashboard/view/explorer/ExplorerItem.module.scss
var ExplorerItem_module_default = {
"root": "alinea-ExplorerItem",
"is-row": "alinea-ExplorerItem-is-row",
"isRow": "alinea-ExplorerItem-is-row",
"is-thumb": "alinea-ExplorerItem-is-thumb",
"isThumb": "alinea-ExplorerItem-is-thumb",
"root-inner": "alinea-ExplorerItem-inner",
"rootInner": "alinea-ExplorerItem-inner",
"is-border": "alinea-ExplorerItem-is-border",
"isBorder": "alinea-ExplorerItem-is-border",
"root-inner-hitBox": "alinea-ExplorerItem-inner-hitBox",
"rootInnerHitBox": "alinea-ExplorerItem-inner-hitBox",
"root-children": "alinea-ExplorerItem-children",
"rootChildren": "alinea-ExplorerItem-children",
"root-children-badge": "alinea-ExplorerItem-children-badge",
"rootChildrenBadge": "alinea-ExplorerItem-children-badge",
"root-checkbox": "alinea-ExplorerItem-checkbox",
"rootCheckbox": "alinea-ExplorerItem-checkbox",
"root-selection": "alinea-ExplorerItem-selection",
"rootSelection": "alinea-ExplorerItem-selection"
};
// src/dashboard/view/explorer/ExplorerItem.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(ExplorerItem_module_default);
function ExplorerItem({
schema,
entry,
summaryView,
defaultView
}) {
const nav = useNav();
const { views } = useDashboard();
const explorer = useExplorer();
const itemRef = useFocusListItem(
() => explorer?.onSelect(entry)
);
const type = schema[entry.type];
const typeView = type && getType(type)[summaryView];
const View = typeView ? resolveView(views, typeView) : defaultView;
const isSelectable = explorer.selectable === true || Array.isArray(explorer.selectable) && explorer.selectable.includes(entry.type);
const Tag = isSelectable ? "label" : "a";
const props = isSelectable ? {} : explorer.selectable ? { onClick: navigateTo } : link(nav.entry(entry));
const isSelected = Boolean(
isSelectable && explorer.selection.find(
(v) => EntryReference.isEntryReference(v) && v[EntryReference.entry] === entry.id
)
);
const childrenAmount = entry.childrenAmount ?? 0;
function navigateTo() {
explorer.onNavigate?.(entry.id);
}
return /* @__PURE__ */ jsx(
"div",
{
ref: itemRef,
className: styles.root(summaryView === "summaryRow" ? "row" : "thumb", {
selected: isSelected,
border: explorer.border
}),
children: /* @__PURE__ */ jsxs("div", { className: styles.root.inner(), children: [
/* @__PURE__ */ jsxs(
Tag,
{
className: styles.root.inner.hitBox(),
style: { flexGrow: 1 },
...props,
children: [
isSelectable && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"input",
{
type: "checkbox",
checked: isSelected,
onChange: () => {
explorer.onSelect(entry);
},
className: styles.root.checkbox()
}
),
/* @__PURE__ */ jsx("div", { className: styles.root.selection(), children: isSelected ? /* @__PURE__ */ jsx(IcRoundCheckBox, {}) : /* @__PURE__ */ jsx(IcRoundCheckBoxOutlineBlank, {}) })
] }),
/* @__PURE__ */ jsx(View, { ...entry })
]
}
),
explorer.withNavigation && explorer.onNavigate && childrenAmount > 0 && /* @__PURE__ */ jsxs(
"button",
{
type: "button",
className: styles.root.children(),
onClick: navigateTo,
children: [
/* @__PURE__ */ jsx(Icon, { icon: IcOutlineInsertDriveFile, size: 18 }),
/* @__PURE__ */ jsx("span", { className: styles.root.children.badge(), children: childrenAmount }),
/* @__PURE__ */ jsx(Icon, { icon: IcRoundKeyboardArrowRight, size: 18 })
]
}
)
] })
},
entry.id
);
}
export {
ExplorerItem
};