@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.68 kB
JavaScript
import{jsxs as t,Fragment as r,jsx as i}from"react/jsx-runtime";import e from"@mui/icons-material/CheckCircle";import a from"@mui/icons-material/Circle";import o from"@mui/material/ListItem";import s from"@mui/material/ListItemButton";import d from"@mui/material/ListItemIcon";import m from"@mui/material/ListItemText";import l from"@mui/material/Stack";import c from"@mui/material/Typography";const n="NexusTaskItem",p=t=>{switch(t){case"complete":return i(e,{"data-testid":`${n}-completeIcon`,color:"success",sx:{fontSize:32}});case"unavailable":return i(a,{"data-testid":`${n}-unavailableIcon`,sx:{fontSize:16,color:"text.disabled"}});default:return i(a,{"data-testid":`${n}-availableIcon`,sx:{fontSize:16,color:"primary.main"}})}},y=({primary:r,primaryModifier:e,sx:a,...o})=>t(l,{"data-testid":`${n}-primaryStack`,className:`${n}-primaryStack`,sx:[{flexDirection:{xs:"column",sm:"row"},alignItems:{xs:"flex-start",sm:"center"}},...Array.isArray(a)?a:[a]],...o,children:["string"==typeof r?i(c,{"data-testid":`${n}-primary`,className:`${n}-primary`,variant:"body2",children:r}):r,e&&("string"==typeof e?i(c,{"data-testid":`${n}-primaryModifier`,className:`${n}-primaryModifier`,variant:"caption",fontWeight:700,sx:{ml:{xs:0,sm:2}},children:e}):e)]}),f=e=>{const{primary:a,secondary:l,primaryModifier:f,status:x,action:b,nesting:u="none",sx:h,...$}=e,g="none"!==u,v=t(r,{children:[x&&i(d,{"data-testid":`${n}-icon`,className:`${n}-icon`,sx:{minWidth:32,mr:4,justifyContent:"center"},children:p(x)}),i(m,{disableTypography:!0,primary:i(y,{primary:a,primaryModifier:f,sx:{color:$.disabled?"text.disabled":"text.primary"}}),secondary:l&&("string"==typeof l?i(c,{"data-testid":`${n}-secondary`,className:`${n}-secondary`,variant:"caption",display:"block",color:$.disabled?"text.disabled":"text.secondary",children:l}):l)})]}),I=(t=>({ml:t?16:0,mb:4,border:"1px solid",borderColor:"divider",borderRadius:2,position:"relative","&.Mui-disabled":{opacity:1,color:"text.disabled"},"&:last-child":{mb:0}}))(g),C=(t=>({width:"unset","&:before":{content:'""',position:"absolute",width:32,height:"calc(50% + 17px)",borderLeft:"1px solid",borderBottom:"1px solid",borderColor:"divider",borderBottomLeftRadius:"last-child"===t?8:0,left:-32,bottom:"50%"},"&:after":"last-child"!==t?{content:'""',position:"absolute",width:0,height:"calc(50% + 1px)",borderLeft:"1px solid",borderColor:"divider",left:-32,top:"50%"}:{}}))(u);return e.onClick?t(s,{"data-testid":`${n}-root`,className:`${n}-root`,sx:[I,g?C:{},...Array.isArray(h)?h:[h]],...$,children:[v,b]}):t(o,{"data-testid":`${n}-root`,className:`${n}-root`,sx:[I,g?C:{},...Array.isArray(h)?h:[h]],...$,children:[v,b]})};export{f as TaskItem};