retro-react/dist/cjs/components/tree/Tree.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),s=require("react"),a=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),o=require("../../utils/classNames.js"),n=require("../../constants/commonClassNames.js"),l=require("./Tree.styled.js");const d=e=>{let{node:n,$variant:t,$defaultCollapsed:r,$selectedNode:i,$onNodeSelect:c,$onNodeToggle:N}=e;const j=void 0!==n.children,[$,u]=s.useState(!!j&&(n.collapsed||r)),m=i===n.label;return a.jsxs(l.TreeNodeContainer,Object.assign({$collapsed:$,$variant:t,$selected:m},{children:[a.jsxs(l.NodeLabel,Object.assign({className:"tree-node-label",onClick:()=>{null==c||c(n.label)},$collapsible:j,$variant:t,$selected:m},{children:[j&&a.jsx(l.ExpandIcon,Object.assign({$variant:t,$collapsed:$,onClick:e=>{if(e.stopPropagation(),n.children){const e=!$;u(e),null==N||N(n.label,!e)}}},{children:$?"+":"−"}),void 0),a.jsx(l.NodeIcon,{children:j?$?"📁":"📂":"📄"},void 0),n.label]}),void 0),!n.children&&n.content&&a.jsx(l.NodeContent,Object.assign({className:"tree-node-content"},{children:n.content}),void 0),n.children&&a.jsx(l.TreeNodeWrapper,Object.assign({$expanded:!$,className:$?"":"tree-expanded"},{children:a.jsxs(l.NodeContainer,Object.assign({className:"tree-node-container"},{children:[n.content&&a.jsx(l.NodeContent,Object.assign({className:"tree-node-content"},{children:n.content}),void 0),a.jsx(l.ChildrenContainer,Object.assign({className:o.classNames("tree-node-children")},{children:n.children.map(((e,s)=>a.jsx(d,{node:e,$variant:t,$defaultCollapsed:r,$selectedNode:i,$onNodeSelect:c,$onNodeToggle:N},`${n.label}-${s}`)))}),void 0)]}),void 0)}),void 0)]}),void 0)},t=s.forwardRef(((s,t)=>{var{id:r,sx:i,className:c,data:N,variant:j="default",defaultCollapsed:$=!1,selectedNode:u,onNodeSelect:m,onNodeToggle:v}=s,x=e.__rest(s,["id","sx","className","data","variant","defaultCollapsed","selectedNode","onNodeSelect","onNodeToggle"]);return a.jsx(l.TreeContainer,Object.assign({sx:i,id:r,className:o.classNames("tree-root",c,n.default),$variant:j,ref:t},x,{children:N.map(((e,s)=>a.jsx(d,{node:e,className:"tree-node",$variant:j,$defaultCollapsed:$,$selectedNode:u,$onNodeSelect:m,$onNodeToggle:v},`tree-node-root-${s}`)))}),void 0)}));t.displayName="Tree",exports.Tree=t;