@react95/core/esm/Tree/Node.mjs

Windows 95 styleguide

import React, { useState } from "react";
import { MediaCd, FileText, Bat, FileFont2, FilePen, FileSettings, FileTextSettings, BatExec, FolderOpen, Folder } from "@react95/icons";
import { node, nodeContent, folderStatus, iconContainer, label, tree, nodeRoot } from "./Tree.css.mjs";
import { Frame } from "../Frame/Frame.mjs";
import cn from "classnames";
const icons = {
  FILE_MEDIA: MediaCd,
  FILE_TEXT: FileText,
  FILE_UNKNOWN: Bat,
  FILE_FONT: FileFont2,
  FILE_PEN: FilePen,
  FILE_SETTINGS: FileSettings,
  FILE_TEXT_SETTINGS: FileTextSettings,
  FILE_EXECUTABLE: BatExec
};
const NodeIcon = ({
  hasChildren,
  isOpen
}) => {
  if (!hasChildren) {
    return /* @__PURE__ */ React.createElement(Bat, { variant: "16x16_4", "data-testid": "react95-default-icon-bat" });
  }
  if (isOpen) {
    return /* @__PURE__ */ React.createElement(
      FolderOpen,
      {
        variant: "16x16_4",
        "data-testid": "react95-default-icon-folder-open"
      }
    );
  }
  return /* @__PURE__ */ React.createElement(Folder, { variant: "16x16_4", "data-testid": "react95-default-icon-folder" });
};
const Node = ({
  children = [],
  id,
  icon,
  label: label$1,
  onClick = () => {
  },
  ...rest
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const hasChildren = children.length > 0;
  const onClickHandler = (event) => {
    onClick(event, {
      id,
      icon,
      label: label$1,
      children
    });
  };
  const onKeyDownHandler = (event) => {
    if (event.key === " ") {
      setIsOpen(!isOpen);
      onClickHandler(event);
    }
  };
  return /* @__PURE__ */ React.createElement(Frame, { as: "li", ...rest, className: node }, /* @__PURE__ */ React.createElement("div", { className: nodeContent }, hasChildren && /* @__PURE__ */ React.createElement(
    "div",
    {
      className: folderStatus,
      onClick: () => setIsOpen(!isOpen)
    },
    isOpen ? "-" : "+"
  ), /* @__PURE__ */ React.createElement("div", { className: iconContainer({ hasChildren }) }, icon || /* @__PURE__ */ React.createElement(NodeIcon, { hasChildren, isOpen })), /* @__PURE__ */ React.createElement(
    "label",
    {
      className: label,
      tabIndex: 0,
      onDoubleClick: () => setIsOpen(!isOpen),
      onClick: onClickHandler,
      onKeyDown: onKeyDownHandler
    },
    label$1
  )), hasChildren && isOpen && /* @__PURE__ */ React.createElement("ul", { className: tree }, children == null ? void 0 : children.map((dataNode) => /* @__PURE__ */ React.createElement(Node, { key: dataNode.id, ...dataNode }))));
};
const NodeRoot = ({
  id,
  icon,
  label: label$1,
  onClick = () => {
  },
  ...rest
}) => {
  const onClickHandler = (event) => {
    onClick(event, {
      id,
      icon,
      label: label$1
    });
  };
  const onKeyDownHandler = (event) => {
    if (event.key === " ") {
      onClickHandler(event);
    }
  };
  return /* @__PURE__ */ React.createElement(Frame, { ...rest, className: cn(node, nodeRoot) }, /* @__PURE__ */ React.createElement("div", { className: nodeContent }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: cn(
        iconContainer.classNames.base,
        iconContainer.classNames.variants.hasChildren.true
      )
    },
    icon || /* @__PURE__ */ React.createElement(NodeIcon, { hasChildren: false, isOpen: true })
  ), /* @__PURE__ */ React.createElement(
    "label",
    {
      className: label,
      tabIndex: 0,
      onClick: onClickHandler,
      onKeyDown: onKeyDownHandler
    },
    label$1
  )));
};
export {
  Node,
  NodeRoot,
  icons
};