@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) • 1.01 kB
JavaScript
import{jsx as t,Fragment as e}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as n}from"react";import i from"@mui/material/Typography";import{useLexicalComposerContext as a}from"@lexical/react/LexicalComposerContext";const c=({maxLines:c=3,selected:s,onLayoutChange:m,t:l})=>{const[p]=a(),[u,x]=r(!1),[g,d]=r(!1),h=o(),y=o();n((()=>{const t=p.getRootElement();if(t){h.current=t;const e=parseInt(window.getComputedStyle(t).lineHeight,10),r=t.clientHeight,o=e*c;y.current=o,d(r>o),t.style.maxHeight=`${o}px`}}),[p,c]),n((()=>{h.current&&(h.current.style.maxHeight=s?"unset":`${y.current}px`,x(!!s))}),[s]);const f=l(u?"readLess":"readMore");return g?t(i,{"data-testid":"show-more-text",component:"div",variant:"caption",color:"primary",sx:{mx:0,mt:3,mb:.5,alignSelf:"flex-start",cursor:"pointer",display:"inline-block"},onClick:t=>{t.stopPropagation();const e=!u;h.current&&(h.current.style.maxHeight=e?"unset":`${y.current}px`),x(e),m?.()},children:f}):t(e,{})};export{c as ReadMorePlugin};