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

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 se=Object.create;var I=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var pe=(e,t)=>{for(var r in t)I(e,r,{get:t[r],enumerable:!0})},Z=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of le(t))!ce.call(e,i)&&i!==r&&I(e,i,{get:()=>t[i],enumerable:!(s=ie(t,i))||s.enumerable});return e};var A=(e,t,r)=>(r=e!=null?se(ae(e)):{},Z(t||!e||!e.__esModule?I(r,"default",{value:e,enumerable:!0}):r,e)),ue=e=>Z(I({},"__esModule",{value:!0}),e);var fe={};pe(fe,{MiddleTruncate:()=>re,ShowMore:()=>oe,Truncate:()=>B});module.exports=ue(fe);var n=A(require("react"),1);var z=A(require("react"),1),_=e=>e?.offsetWidth,G=e=>e.replace(/\s+$/,""),ee=(e,t,r)=>{if(t===r.length-1)return z.default.createElement("span",{key:t},e);{let s=z.default.createElement("br",{key:`${t}br`});return e?[z.default.createElement("span",{key:t},e),s]:s}},te=(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||""},ne=({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,F=r.slice(g),W=l(f)+l(F)+i;for(;W>s;)f=f.slice(0,f.length-1),W=l(f)+l(F)+i;return{startFragment:f,endFragment:F}};var B=({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,F]=(0,n.useState)(),[W,D]=(0,n.useState)(),[m,V]=(0,n.useState)(0),[k,X]=(0,n.useState)(0),h=(0,n.useRef)(null),p=(0,n.useRef)(null),R=(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),V(o)},[g,i]);(0,n.useEffect)(()=>{let o=document.createElement("canvas");F(o.getContext("2d"))},[]),(0,n.useEffect)(()=>(L(),window.addEventListener("resize",L),()=>{window.removeEventListener("resize",L),window.cancelAnimationFrame(k)}),[L,k]);let b=(0,n.useCallback)(o=>{typeof T=="function"&&X(window.requestAnimationFrame(()=>{T(o)}))},[T]),j=(0,n.useCallback)(o=>g?.measureText(o).width||0,[g]),K=(0,n.useMemo)(()=>!Number.isSafeInteger(r)||r<0?0:r,[r]),C=(0,n.useMemo)(()=>c?1:K,[K,c]),$=(0,n.useMemo)(()=>{let o=Math.abs(S),u=Number.isFinite(o)?Math.floor(o):0;return u>0?-u:u},[S]),U=(0,n.useCallback)(()=>{let o=[],u=te(p.current,l),P=u.split(`
`).map(y=>y.split(l)),Q=_(R.current)||0,Y=!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(j(N)<=m&&P.length===1){Y=!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),q=d.slice(0,x+1);j(q)+Q<=m?w=x+1:E=x-1}let M=d.slice(0,w);if(s)for(M=G(M);!M.length&&o.length;){let x=o.pop();x&&typeof x=="string"&&(M=G(x))}if(c&&$!==0){let{startFragment:x,endFragment:q}=ne({end:$,lastLineText:M,fullText:u,targetWidth:m,ellipsisWidth:Q,measureWidth:j});N=n.default.createElement("span",null,x,t,q)}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);j(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(Y),o},[l,b,C,j,m,s,$,c,t]);return(0,n.useEffect)(()=>{let o=!!(h.current&&m);typeof window<"u"&&o&&(C>0?D(U().map(ee)):(D(e),b(!1)))},[e,C,m,U,b]),n.default.createElement("span",{...f,ref:h},n.default.createElement("span",null,W),n.default.createElement("span",{ref:p},e),n.default.createElement("span",{ref:R,style:{position:"fixed",visibility:"hidden",top:0,left:0}},t))};var J=A(require("react"),1);var re=(0,J.forwardRef)(({children:e,...t},r)=>{let{width:s,middle:i,lines:l,...c}=t;return J.default.createElement("div",{ref:r,style:{width:"100%"}},J.default.createElement(B,{...c,middle:!0},e))});re.displayName="MiddleTruncate";var a=A(require("react"),1);var v=A(require("react"),1),O=({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 oe=(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:F,end:W,ellipsis:D,...m}=T,[,V]=(0,a.useState)({}),k=(0,a.useCallback)(()=>V({}),[]),X=(0,a.useRef)(e),h=typeof t=="boolean",p=h?t:X.current,R=(0,a.useCallback)(L=>{L.preventDefault();let b=!p;h||(X.current=b,k()),c?.(b)},[p,h,c,k]);return(0,a.useImperativeHandle)(f,()=>({toggleLines:R})),a.default.createElement("div",{style:{width:"100%"}},a.default.createElement(B,{...m,lines:p?0:r,ellipsis:a.default.createElement(O,{type:"more",label:s,className:l,toggleLines:R})},S),p&&a.default.createElement(O,{type:"less",label:i,className:l,toggleLines:R}))});oe.displayName="ShowMore";0&&(module.exports={MiddleTruncate,ShowMore,Truncate});