@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.
3 lines (2 loc) • 1.56 kB
JavaScript
"use client";
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as i,useCallback as r}from"react";import a from"@mui/material/Stack";import l from"@mui/material/Typography";import o from"@mui/material/ClickAwayListener";import n from"@mui/material/TextField";import m from"@mui/material/Box";import s from"@mui/material/Tooltip";const p="NexusAssemblyTreeItemLabel",d=({itemId:d,children:c,actions:u,onNodeChanged:f,icon:h,editable:x})=>{const[y,g]=i(!1),[w,v]=i(c),[$,k]=i(!1),N=r((e=>{k(null!==e&&e.offsetWidth<e.scrollWidth)}),[]),b=r((e=>{2===e.detail&&(y||g((e=>!0)))}),[y]),C=r((e=>{"Enter"===e.key?(e.preventDefault(),f?.(d,e.target.value),g(!1)):"Escape"===e.key&&(e.preventDefault(),v(c),g(!1))}),[f,d,c]),D=e(l,{ref:N,onClick:x?b:void 0,sx:{flex:"1 1 0px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"0.75rem"},"data-testid":`${p}-label`,className:`${p}-label`,children:c});return t(a,{direction:"row",alignItems:"center","data-testid":`${p}-root`,className:`${p}-root`,children:[h?e(m,{component:h,color:"inherit",sx:{mr:1,height:20,width:20}}):null,"string"==typeof c?y?e(o,{onClickAway:()=>g(!1),children:e(n,{onChange:e=>v(e.target.value),onKeyDown:C,margin:"none",size:"small",value:w,"data-testid":`${p}-textField`,className:`${p}-textField`,sx:{flex:1,"& .MuiInputBase-input":{py:0}},slotProps:{input:{inputProps:{"data-testid":`${p}-input`}}}})}):$&&"string"==typeof c?e(s,{title:c,enterDelay:1e3,enterNextDelay:1e3,children:D}):D:c,u&&!y?e(u,{itemId:d}):null]})};export{d as AssemblyTreeItemLabel};