@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 2.69 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{SimpleTreeView as a}from"@mui/x-tree-view";import o from"@mui/material/Toolbar";import i from"@mui/material/Stack";import l from"@mui/material/Typography";import n from"@mui/icons-material/ArrowRight";import s from"@mui/icons-material/ArrowDropDown";import c from"@mui/material/Box";import{alpha as m}from"@mui/material/styles";import{AssemblyTreeItem as d}from"./AssemblyTreeItem/AssemblyTreeItem.component.js";const p="NexusAssemblyTree",h=(e,t)=>{for(let r=0;r<e.length;r++){const a=e[r];if(a.itemId===t)return a;if(a.children){const e=h(a.children,t);if(e)return e}}},u=(e,t)=>{if(!t||t.length<1)return[];let r=[],a=[];return e.forEach((e=>{a=a.concat(e.sectionData)})),t.forEach((t=>{const o=h(a,t);r.find((e=>e===t))||(r=r.concat([t]),o?.children&&(r=r.concat(u(e,o?.children.map((e=>e.itemId))||[]))))})),r},f=h=>{const{background:f="solid",Header:g,data:b,editable:y,onNodeChanged:x,actions:I,selectMode:S="standard",defaultSelectedItems:$,onSelectedItemsChange:k,autoSelectChildNodes:C=!0,autoDeselectChildNodes:N=!0,selectedItems:A,...D}=h,[T,w]=r($??[]),v=A??T;return e(c,{sx:[{p:0,py:4,[`& .${p}-tree:last-child`]:{pb:0}},"solid"===f?{backgroundColor:"background.paper"}:"translucent"===f?e=>({backgroundColor:`rgba(${e.vars.palette.background.paperChannel} / 0.5)`,backdropFilter:"blur(10px)",...e.applyStyles("dark",{backgroundColor:m(e.palette.grey[900],.5)})}):{background:"transparent"}],"data-testid":`${p}-root`,className:`${p}-root`,children:[g&&t(o,{sx:{px:{xs:2.5,sm:2.5},pb:4},"data-testid":`${p}-header`,className:`${p}-header`,children:g}),t(a,{multiSelect:!0,slots:{expandIcon:()=>t(n,{sx:e=>({color:"inherit",...e.applyStyles("dark",{color:"primary.light"})})}),collapseIcon:()=>t(s,{sx:e=>({color:"inherit",...e.applyStyles("dark",{color:"primary.light"})})})},"data-testid":`${p}-tree`,className:`${p}-tree`,defaultSelectedItems:$,selectedItems:v,itemChildrenIndentation:0,...D,onSelectedItemsChange:"toggle"===S?(e,t)=>{let r;if(1===t.length&&v.includes(t[0])){r=v.filter((e=>!(N?u(b,t):t).includes(e)))}else if(1===t.length){r=[...v,...C?u(b,t):t]}else r=C?u(b,t):t;w(r),k?.(e,r)}:(e,t)=>{const r=C?u(b,t):t;w(r),k?.(e,r)},children:b.map((({sectionLabel:r,sectionData:a},o)=>e(i,{sx:{mt:0===o?0:4},"data-testid":`${p}-treeSection`,className:`${p}-treeSection`,children:[r&&"string"==typeof r?t(l,{variant:"caption",sx:{ml:2.5,fontSize:"0.875rem",minHeight:28},"data-testid":`${p}-sectionLabel`,className:`${p}-sectionLabel`,children:r}):r,a.map((e=>t(d,{actions:I,depth:0,onNodeChanged:x,editable:y,...e},e.itemId)))]},`section-${o}`)))})]})};export{f as AssemblyTree};