@re-dev/react-truncate/dist/index.js

Provides `Truncate`, `MiddleTruncate` and `ShowMore` React components for truncating multi-line spans and adding an ellipsis.

/**
 * name: @re-dev/react-truncate
 * version: v0.5.1
 * description: Provides `Truncate`, `MiddleTruncate` and `ShowMore` React components for truncating multi-line spans and adding an ellipsis.
 * author: chengpeiquan <chengpeiquan@chengpeiquan.com>
 * homepage: https://truncate.js.org
 * license: MIT
 */
"use strict";"use client";var ReactTruncate=(()=>{var le=Object.create;var z=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var fe=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),me=(e,t)=>{for(var r in t)z(e,r,{get:t[r],enumerable:!0})},_=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ce(t))!ue.call(e,i)&&i!==r&&z(e,i,{get:()=>t[i],enumerable:!(s=ae(t,i))||s.enumerable});return e};var B=(e,t,r)=>(r=e!=null?le(pe(e)):{},_(t||!e||!e.__esModule?z(r,"default",{value:e,enumerable:!0}):r,e)),de=e=>_(z({},"__esModule",{value:!0}),e);var W=fe((xe,ee)=>{"use strict";ee.exports=window.React});var ge={};me(ge,{MiddleTruncate:()=>se,ShowMore:()=>ie,Truncate:()=>J});var n=B(W(),1);var D=B(W(),1),te=e=>e?.offsetWidth,O=e=>e.replace(/\s+$/,""),ne=(e,t,r)=>{if(t===r.length-1)return D.default.createElement("span",{key:t},e);{let s=D.default.createElement("br",{key:`${t}br`});return e?[D.default.createElement("span",{key:t},e),s]:s}},re=(e,t)=>{let r=document.createElement("div"),s="innerText"in window.HTMLElement.prototype?"innerText":"textContent";r.innerHTML=e?.innerHTML.replace(/\r\n|\r|\n/g,t)||"";let i=r[s],l=document.createElement("div");return l.innerHTML="foo<br/>bar",l[s]?.replace(/\r\n|\r/g,`
`)!==`foo
bar`&&(r.innerHTML=r.innerHTML.replace(/<br.*?[/]?>/gi,`
`),i=r[s]),i||""},oe=({end:e,lastLineText:t,fullText:r,targetWidth:s,ellipsisWidth:i,measureWidth:l})=>{let c=t.length,S=Math.abs(e),T=S>c?0:c-S,f=t.slice(0,T),g=T===0?-c:e,R=r.slice(g),k=l(f)+l(R)+i;for(;k>s;)f=f.slice(0,f.length-1),k=l(f)+l(R)+i;return{startFragment:f,endFragment:R}};var J=({children:e,ellipsis:t="\u2026",lines:r=1,trimWhitespace:s=!1,width:i=0,separator:l=" ",middle:c=!1,end:S=5,onTruncate:T,...f})=>{let[g,R]=(0,n.useState)(),[k,V]=(0,n.useState)(),[m,$]=(0,n.useState)(0),[j,I]=(0,n.useState)(0),h=(0,n.useRef)(null),p=(0,n.useRef)(null),F=(0,n.useRef)(null);(0,n.useEffect)(()=>{p&&p.current&&p.current.parentNode&&p.current.parentNode.removeChild(p.current)},[m]);let L=(0,n.useCallback)(()=>{if(!h.current?.parentElement)return;let o=i||Math.floor(h.current.parentElement.getBoundingClientRect().width);if(!o)return window.requestAnimationFrame(()=>L());let u=window.getComputedStyle(h.current),P=[u.fontWeight,u.fontStyle,u.fontSize,u.fontFamily].join(" ");g&&(g.font=P,g.letterSpacing=u.letterSpacing),$(o)},[g,i]);(0,n.useEffect)(()=>{let o=document.createElement("canvas");R(o.getContext("2d"))},[]),(0,n.useEffect)(()=>(L(),window.addEventListener("resize",L),()=>{window.removeEventListener("resize",L),window.cancelAnimationFrame(j)}),[L,j]);let b=(0,n.useCallback)(o=>{typeof T=="function"&&I(window.requestAnimationFrame(()=>{T(o)}))},[T]),A=(0,n.useCallback)(o=>g?.measureText(o).width||0,[g]),U=(0,n.useMemo)(()=>!Number.isSafeInteger(r)||r<0?0:r,[r]),C=(0,n.useMemo)(()=>c?1:U,[U,c]),q=(0,n.useMemo)(()=>{let o=Math.abs(S),u=Number.isFinite(o)?Math.floor(o):0;return u>0?-u:u},[S]),Q=(0,n.useCallback)(()=>{let o=[],u=re(p.current,l),P=u.split(`
`).map(y=>y.split(l)),Y=te(F.current)||0,Z=!0;for(let y=1;y<=C;y++){let H=P[0];if(H.length===0){o.push(),P.shift(),y--;continue}let N=H.join(l)||"";if(A(N)<=m&&P.length===1){Z=!1,o.push(N);break}if(y===C){let d=H.join(l),w=0,E=d.length-1;for(;w<=E;){let x=Math.floor((w+E)/2),G=d.slice(0,x+1);A(G)+Y<=m?w=x+1:E=x-1}let M=d.slice(0,w);if(s)for(M=O(M);!M.length&&o.length;){let x=o.pop();x&&typeof x=="string"&&(M=O(x))}if(c&&q!==0){let{startFragment:x,endFragment:G}=oe({end:q,lastLineText:M,fullText:u,targetWidth:m,ellipsisWidth:Y,measureWidth:A});N=n.default.createElement("span",null,x,t,G)}else N=n.default.createElement("span",null,M,t)}else{let d=0,w=H.length-1;for(;d<=w;){let E=Math.floor((d+w)/2),M=H.slice(0,E+1).join(l);A(M)<=m?d=E+1:w=E-1}if(d===0){y=C-1;continue}N=H.slice(0,d).join(l),P[0].splice(0,d)}o.push(N)}return b(Z),o},[l,b,C,A,m,s,q,c,t]);return(0,n.useEffect)(()=>{let o=!!(h.current&&m);typeof window<"u"&&o&&(C>0?V(Q().map(ne)):(V(e),b(!1)))},[e,C,m,Q,b]),n.default.createElement("span",{...f,ref:h},n.default.createElement("span",null,k),n.default.createElement("span",{ref:p},e),n.default.createElement("span",{ref:F,style:{position:"fixed",visibility:"hidden",top:0,left:0}},t))};var X=B(W(),1);var se=(0,X.forwardRef)(({children:e,...t},r)=>{let{width:s,middle:i,lines:l,...c}=t;return X.default.createElement("div",{ref:r,style:{width:"100%"}},X.default.createElement(J,{...c,middle:!0},e))});se.displayName="MiddleTruncate";var a=B(W(),1);var v=B(W(),1),K=({type:e,label:t,className:r,toggleLines:s})=>{let i=(0,v.useMemo)(()=>e==="more"?"\u2026 ":" ",[e]);return(0,v.isValidElement)(t)?t:v.default.createElement("span",null,i,v.default.createElement("a",{href:"#",className:r,onClick:s,"data-testid":`${e}-button`},t))};var ie=(0,a.forwardRef)(({defaultExpanded:e=!1,expanded:t,lines:r=3,more:s="Expand",less:i="Collapse",anchorClass:l,onToggle:c,children:S,...T},f)=>{let{width:g,middle:R,end:k,ellipsis:V,...m}=T,[,$]=(0,a.useState)({}),j=(0,a.useCallback)(()=>$({}),[]),I=(0,a.useRef)(e),h=typeof t=="boolean",p=h?t:I.current,F=(0,a.useCallback)(L=>{L.preventDefault();let b=!p;h||(I.current=b,j()),c?.(b)},[p,h,c,j]);return(0,a.useImperativeHandle)(f,()=>({toggleLines:F})),a.default.createElement("div",{style:{width:"100%"}},a.default.createElement(J,{...m,lines:p?0:r,ellipsis:a.default.createElement(K,{type:"more",label:s,className:l,toggleLines:F})},S),p&&a.default.createElement(K,{type:"less",label:i,className:l,toggleLines:F}))});ie.displayName="ShowMore";return de(ge);})();