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

A React component library for building retro-style websites

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