alinea/dist/dashboard/view/explorer/ExplorerItem.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/explorer/ExplorerItem.tsx
import { Type } from "alinea/core";
import { link } from "alinea/dashboard/util/HashRouter";
import { EntryReference } from "alinea/picker/entry/EntryReference";
import { Icon, fromModule } 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 { 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 = fromModule(ExplorerItem_module_default);
function ExplorerItem({
  schema,
  entry,
  summaryView,
  defaultView
}) {
  const nav = useNav();
  const explorer = useExplorer();
  const itemRef = useFocusListItem(
    () => explorer?.onSelect(entry)
  );
  const type = schema[entry.type];
  const View2 = type && Type.meta(type)[summaryView] || 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.entry === entry.entryId
    )
  );
  const childrenAmount = entry.childrenAmount ?? 0;
  function navigateTo() {
    explorer.onNavigate?.(entry.entryId);
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: itemRef,
      className: styles.root(summaryView === "summaryRow" ? "row" : "thumb", {
        selected: isSelected,
        border: explorer.border
      }),
      tabIndex: 0,
      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(View2, { ...entry })
            ]
          }
        ),
        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.entryId
  );
}
export {
  ExplorerItem
};