@react95/core/cjs/Tree/Node.cjs

Windows 95 styleguide

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