npm - @ohkit/text-ellipsis - Versions diffs - 0.0.5 → 0.0.7 - Mend

@ohkit/text-ellipsis 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md CHANGED Viewed

@@ -39,9 +39,12 @@ function Demo() {
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|------|--------|
 | className | 自定义样式类名，会附加到根元素上 | string | - |
+| style | 自定义样式 | React.CSSProperties | - |
 | lines | 超过几行折叠 (number > 0) | number | - |
 | uiType | 展开按钮位置 `right`(右下侧) 或 `bottom`(底部) | string | `right` |
-| lineHeight | 行高(单位:px) | number/string | - |
+| truncateMode | 截断模式 `line`(行数) 或 `height`(高度) | string | `line` |
+| lineHeight | 行高(支持px/em等单位或数字) | number/string | - |
+| maxHeight | 高度模式下的最大高度(px) | number | - |
 | content | 文本内容 | ReactNode | - |
 | fold | 是否折叠 | boolean | `true` |
 | showFoldControl | 是否显示展开控制按钮 | boolean | `true` |
@@ -49,6 +52,11 @@ function Demo() {
 | unfoldText | 展开状态按钮文字 | string | `展开` |
 | maskBgColor | 展开按钮蒙层背景色(16进制) | string | `#fff` |
 | showTitleWhenFold | 折叠状态下是否显示title属性 | boolean | `false` |
+| titleWhenFold | 自定义折叠状态下的title内容 | string \| (title: string) => string | - |
+| resetFoldWhenChildrenOrEllipsisChange | 当内容变化时重置折叠状态 | boolean | `false` |
+| controlPlacement | 底部按钮对齐方式 `left`/`center`/`right` | string | `center` |
+| whiteSpace | 是否保留换行符 | CSSProperties['whiteSpace'] | - |
+| width | 容器宽度（默认自适应） | CSSProperties['width'] | - |
 | renderFoldButton | 自定义渲染展开按钮 | (fold: boolean) => ReactNode | - |
 ### 事件
@@ -80,6 +88,7 @@ function Demo() {
 ```
 ## 注意事项
-1. Safari浏览器下富文本截断可能有轻微高度计算偏差
-2. 图片和表格等复杂内容可能无法完美截断
+1. Safari浏览器下富文本截断可能有轻微高度计算偏差，可自行判断浏览器环境降级使用`height`截断模式
+2. 富文本中图片和表格等复杂内容可能无法完美截断
 3. 动态内容变化后会自动重新计算截断状态
+4. 使用`whiteSpace`保留换行符时建议设置`width`属性

package/dist/index.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.ohkit-text-ellipsis__container{display:flex;position:relative}.ohkit-text-ellipsis__container .offset-height-computer{overflow-wrap:break-word;pointer-events:none;position:absolute;visibility:hidden;word-break:break-word;z-index:-1}.ohkit-text-ellipsis__container .text-ellipsis-inner{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;overflow-wrap:break-word;position:relative;text-overflow:ellipsis;word-break:break-word}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper{align-items:center;bottom:0;color:#4c84ff;cursor:pointer;display:flex;justify-content:center;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper:hover{color:#709bff}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-right{padding-left:24px;right:0}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom{width:100%}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-left{justify-content:flex-start}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-center{justify-content:center}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-right{justify-content:flex-end}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper .btn-fold{display:inline-block}
+.ohkit-text-ellipsis__container{align-items:flex-start;display:flex;overflow:hidden;position:relative}.ohkit-text-ellipsis__container .content-shadow-dom{overflow-wrap:break-word;pointer-events:none;position:absolute;visibility:hidden;word-break:break-word;z-index:-1}.ohkit-text-ellipsis__container .text-ellipsis-inner{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;overflow-wrap:break-word;position:relative;text-overflow:ellipsis;word-break:break-word}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper{align-items:center;bottom:0;color:#4c84ff;cursor:pointer;display:flex;justify-content:center;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper:hover{color:#709bff}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-right{padding-left:24px;right:0}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom{width:100%}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-left{justify-content:flex-start}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-center{justify-content:center}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-right{justify-content:flex-end}.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper .btn-fold{display:inline-block}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,~~gCACE~~,YAAa,~~CACb~~,iBACF,CACA,~~wDAKE~~,wBAAyB,CAFzB,mBAAoB,CADpB,iBAAkB,CADlB,iBAAkB,CAKlB,qBAAsB,CAFtB,UAGF,CACA,qDAKE,2BAA4B,CAF5B,mBAAoB,CAFpB,eAAgB,CAKhB,wBAAyB,CAJzB,iBAAkB,CAElB,sBAAuB,CAGvB,qBACF,CACA,uEAKE,kBAAmB,CAHnB,QAAS,CAKT,aAAc,CAEd,cAAe,CALf,YAAa,CAEb,sBAAuB,CALvB,iBAAkB,CAOlB,wBAAiB,CAAjB,qBAAiB,CAAjB,gBAAiB,CALjB,SAOF,CACA,6EACE,aACF,CACA,6EAEE,iBAAkB,CADlB,OAEF,CACA,8EACE,UACF,CACA,6FACE,0BACF,CACA,+FACE,sBACF,CACA,8FACE,wBACF,CACA,iFACE,oBACF","file":"index.css","sourcesContent":[".ohkit-text-ellipsis__container {\n display: flex;\n position: relative;\n}\n.ohkit-text-ellipsis__container .~~offset~~-~~height~~-~~computer~~ {\n visibility: hidden;\n position: absolute;\n pointer-events: none;\n z-index: -1;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner {\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper {\n position: absolute;\n bottom: 0;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #4c84ff;\n user-select: none;\n cursor: pointer;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper:hover {\n color: #709bff;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-right {\n right: 0;\n padding-left: 24px;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom {\n width: 100%;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-left {\n justify-content: flex-start;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-center {\n justify-content: center;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-right {\n justify-content: flex-end;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper .btn-fold {\n display: inline-block;\n}"]}
1	+ {"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,gCAEE,sBAAuB,CADvB,YAAa,CAEb,eAAgB,CAChB,iBACF,CACA,oDAKE,wBAAyB,CAFzB,mBAAoB,CADpB,iBAAkB,CADlB,iBAAkB,CAKlB,qBAAsB,CAFtB,UAGF,CACA,qDAKE,2BAA4B,CAF5B,mBAAoB,CAFpB,eAAgB,CAKhB,wBAAyB,CAJzB,iBAAkB,CAElB,sBAAuB,CAGvB,qBACF,CACA,uEAKE,kBAAmB,CAHnB,QAAS,CAKT,aAAc,CAEd,cAAe,CALf,YAAa,CAEb,sBAAuB,CALvB,iBAAkB,CAOlB,wBAAiB,CAAjB,qBAAiB,CAAjB,gBAAiB,CALjB,SAOF,CACA,6EACE,aACF,CACA,6EAEE,iBAAkB,CADlB,OAEF,CACA,8EACE,UACF,CACA,6FACE,0BACF,CACA,+FACE,sBACF,CACA,8FACE,wBACF,CACA,iFACE,oBACF","file":"index.css","sourcesContent":[".ohkit-text-ellipsis__container {\n display: flex;\n align-items: flex-start;\n overflow: hidden;\n position: relative;\n}\n.ohkit-text-ellipsis__container .content-shadow-dom {\n visibility: hidden;\n position: absolute;\n pointer-events: none;\n z-index: -1;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner {\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper {\n position: absolute;\n bottom: 0;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #4c84ff;\n user-select: none;\n cursor: pointer;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper:hover {\n color: #709bff;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-right {\n right: 0;\n padding-left: 24px;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom {\n width: 100%;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-left {\n justify-content: flex-start;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-center {\n justify-content: center;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper-bottom.placement-right {\n justify-content: flex-end;\n}\n.ohkit-text-ellipsis__container .text-ellipsis-inner .btn-fold-wrapper .btn-fold {\n display: inline-block;\n}"]}

package/dist/index.es.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{forwardRef as t,useState as n,useRef as o,useMemo as i,useCallback as l,useEffect as r}from"react";import{prefixClassname as f,useSyncPropsState as a,useRuntime as d,classNames as s,useCompatibleEffect as c,isSafari as u,assignRef as h}from"@ohkit/utils";import{Measure as v}from"@ohkit/measure";function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},p.apply(null,arguments)}var g=f("ohkit-text-ellipsis__"),m=t(function(t,f){var m=t.className,C=t.lineHeight,w=void 0===C?"":C,x=t.lines,F=t.maskBgColor,E=void 0===F?"#fff":F,b=t.resetFoldWhenChildrenOrEllipsisChange,y=void 0!==b&&b,H=t.showTitleWhenFold,k=t.titleWhenFold,O=t.showFoldControl,W=void 0===O||O,M=t.foldText,S=void 0===M?"收起":M,B=t.unfoldText,L=void 0===B?"展开":B,N=t.uiType,P=void 0===N?"right":N,T=t.controlPlacement,R=void 0===T?"center":T,j=t.whiteSpace,q=t.renderFoldButton,A=t.onEllipsisChange,_=t.onFoldChange,z=t.onStatusChange,V=t.onMouseEnter,D=t.onMouseLeave,G=t.onPointerEnter,I=t.onPointerLeave,J=t.onClick,K=t.onFocus,Q=t.content||t.children,U=n(!1),X=U[0],Y=U[1],Z=n(!1),$=Z[0],ee=Z[1],te=a(t,"fold",{defaultValue:!0,onChange:_}),ne=te[0],oe=te[1],ie=n(1),le=ie[0],re=ie[1],fe=n("string"==typeof w&&w.endsWith("px")?parseFloat(w):0),ae=fe[0],de=fe[1],se=n(x),ce=se[0],ue=void 0===ce?0:ce,he=se[1],ve=n(""),pe=ve[0],ge=ve[1],me=d({inited:!1,contentOffsetHeight:0,ellipsis:X,defaultFold:ne,fold:ne,foldBtnWidth:le,textContent:pe,onEllipsisChange:A,onFoldChange:_},["onEllipsisChange","fold","onFoldChange"])[0],Ce=o(null),we=o(null),xe=o(null),Fe=o(null),Ee=i(function(){return{lineHeight:$?"1.4":w||void 0}},[w,$]),be=i(function(){var e={whiteSpace:j};return X&&ue&&ae?p({},e,{minHeight:ne?(ue-.2)*ae+"px":void 0,WebkitLineClamp:ne?ue:void 0,paddingBottom:"bottom"!==P&&ne?void 0:ae+"px"}):e},[ue,ae,X,ne,P,j]),ye=i(function(){if(ne){var e=ae,t="right"===P?Math.min(e/le*100,80):60;return{boxSizing:"content-box",height:ae+"px",lineHeight:ae+"px",paddingTop:"bottom"===P?e+"px":void 0,paddingLeft:"right"===P?e+"px":void 0,background:"linear-gradient(to "+P+", "+E+(4===E.length?"0":"00")+", "+E+" "+t+"%, "+E+" 100%)"}}},[ae,E,ne,P,le]),He=l(function(){Ce.current&&(Ce.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){Ce.current&&(Ce.current.style.width="100%")}))},[]),ke=l(function(e,t){void 0===t&&(t=!me.fold),me.fold=t,oe(t)},[]),Oe=i(function(){/*#__PURE__*/return e.createElement("div",{className:s("btn-fold-wrapper","btn-fold-wrapper-"+P,"bottom"===P&&"placement-"+R),style:ye,ref:Fe,onClick:ke},q?q(ne):/*#__PURE__*/e.createElement("div",{className:"btn-fold"},ne?L:S))},[ye,ne,S,ke,q,R,P,L]),We=l(function(e,t){void 0===e&&(e=me.ellipsis);var n=(void 0===t?{}:t).forceResetFold,o=void 0!==n&&n,i=me.ellipsis,l=me.fold,r=me.defaultFold;e!==i&&(Y(e),me.ellipsis=e,null==me.onEllipsisChange||me.onEllipsisChange(e)),y&&(o||!i&&e)&&l!==r&&ke(void 0,r)},[ke,Q,y]),Me=l(function(){var e=we.current,t=xe.current;if(e&&t){me.contentOffsetHeight=e.offsetHeight;var n=0;if(!n&&e){var o=((null==window.getComputedStyle?void 0:window.getComputedStyle(e))||{}).lineHeight;o&&((n=parseFloat(o))||ee(!0))}if(ae===n||(de(n),n))if(x)ue!==x&&he(x),We(me.contentOffsetHeight>=(x+1)*n-1);else if(me.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){var i=Math.floor(t.offsetHeight/n);ue!==i&&he(i),We(!0)}else We(!1)}},[x,ae,We]);c(function(){We(me.ellipsis,{forceResetFold:!0}),Me()},[Me,We]),r(function(){if(X&&Fe.current){var e=Fe.current.offsetWidth;e!==me.foldBtnWidth&&(me.foldBtnWidth=e,re(e))}},[X,L,W]),r(function(){u&&He()},[ne,He]);var Se=l(function(){var e,t=(null==(e=we.current)?void 0:e.textContent)||"";t!==me.textContent&&(me.textContent=t,ge(t))},[]),Be=i(function(){return X&&ne?"function"==typeof k?k(pe):k||pe:void 0},[k,X,ne,pe]);return r(function(){me.inited&&(null==z||z({ellipsis:X,fold:ne,title:Be}))},[z,ne,X,Be]),r(function(){me.inited=!0},[]),/*#__PURE__*/e.createElement("div",{className:s(g("container"),m),style:Ee,ref:function(e){h(xe,e),f&&h(f,e)},onMouseEnter:V,onMouseLeave:D,onPointerEnter:G,onPointerLeave:I,onClick:J,onFocus:K},/*#__PURE__*/e.createElement(v,{offset:!0},function(t){var n=t.measureRef,o=(t.contentRect.offset||{}).height;return void 0!==o&&Math.abs(o-me.contentOffsetHeight)>1&&Me(),/*#__PURE__*/e.createElement("div",{style:{whiteSpace:j},className:"offset-height-computer",ref:function(e){h(n,e),h(we,e),Se()}},Q)}),/*#__PURE__*/e.createElement("div",{className:"text-ellipsis-inner",title:H?Be:void 0,style:be,ref:Ce},X&&W&&Oe,Q))});export{m as TextEllipsis,g as c};
+import t,{forwardRef as e,useState as n,useRef as o,useMemo as i,useCallback as l,useEffect as r}from"react";import{prefixClassname as a,useSyncPropsState as d,useRuntime as s,classNames as f,useCompatibleEffect as c,isSafari as u,assignRef as h}from"@ohkit/utils";import{Measure as v}from"@ohkit/measure";function p(){return p=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},p.apply(null,arguments)}var g=a("ohkit-text-ellipsis__"),m=e(function(e,a){var m=e.className,C=e.style,x=e.lineHeight,w=void 0===x?"":x,F=e.lines,H=e.maskBgColor,b=void 0===H?"#fff":H,E=e.resetFoldWhenChildrenOrEllipsisChange,y=void 0!==E&&E,O=e.showTitleWhenFold,k=e.titleWhenFold,M=e.showFoldControl,W=void 0===M||M,B=e.foldText,S=void 0===B?"收起":B,L=e.unfoldText,N=void 0===L?"展开":L,P=e.uiType,T=void 0===P?"right":P,R=e.truncateMode,j=void 0===R?"line":R,q=e.maxHeight,z=e.controlPlacement,A=void 0===z?"center":z,_=e.whiteSpace,V=e.width,D=e.renderFoldButton,G=e.onEllipsisChange,I=e.onFoldChange,J=e.onStatusChange,K=e.onMouseEnter,Q=e.onMouseLeave,U=e.onPointerEnter,X=e.onPointerLeave,Y=e.onClick,Z=e.onFocus,$=e.content||e.children,tt=n(!1),et=tt[0],nt=tt[1],ot=n(!1),it=ot[0],lt=ot[1],rt=d(e,"fold",{defaultValue:!0,onChange:I}),at=rt[0],dt=rt[1],st=n(1),ft=st[0],ct=st[1],ut=n("string"==typeof w&&w.endsWith("px")?parseFloat(w):0),ht=ut[0],vt=ut[1],pt=n(F),gt=pt[0],mt=void 0===gt?0:gt,Ct=pt[1],xt=n(""),wt=xt[0],Ft=xt[1],Ht=s({inited:!1,contentOffsetHeight:0,containerContentHeight:0,ellipsis:et,defaultFold:at,fold:at,foldBtnWidth:ft,textContent:wt,onEllipsisChange:G,onFoldChange:I},["onEllipsisChange","fold","onFoldChange"])[0],bt=o(null),Et=o(null),yt=o(null),Ot=o(null),kt=i(function(){return p({lineHeight:it?"1.4":w||void 0},C)},[C,w,it]),Mt=i(function(){return{whiteSpace:_,width:V}},[_,V]),Wt=i(function(){var t="height"===j;if(!et||!(t||mt&&ht))return Mt;var e=!W||"bottom"!==T&&at?void 0:ht+"px";return p({},Mt,{minHeight:!t&&at?(mt-.2)*ht+"px":void 0,WebkitLineClamp:t?void 0:at?mt:void 0,maxHeight:t&&at?q||mt*ht||Ht.containerContentHeight||0:void 0,paddingBottom:e,boxSizing:e?"border-box":void 0})},[mt,ht,et,at,W,T,j,q,Mt]),Bt=i(function(){if(at){var t=ht,e="right"===T?Math.min(t/ft*100,80):60;return{boxSizing:"content-box",height:ht+"px",lineHeight:ht+"px",paddingTop:"bottom"===T?t+"px":void 0,paddingLeft:"right"===T?t+"px":void 0,background:"linear-gradient(to "+T+", "+b+(4===b.length?"0":"00")+", "+b+" "+e+"%, "+b+" 100%)"}}},[ht,b,at,T,ft]),St=l(function(){if(bt.current){var t=bt.current.style.width,e=window.getComputedStyle(bt.current).width;bt.current.style.width=parseFloat(e)-.1+"px",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){bt.current&&(bt.current.style.width=t)})}},[]),Lt=l(function(t,e){void 0===e&&(e=!Ht.fold),Ht.fold=e,dt(e)},[]),Nt=i(function(){/*#__PURE__*/return t.createElement("div",{className:f("btn-fold-wrapper","btn-fold-wrapper-"+T,"bottom"===T&&"placement-"+A),style:Bt,ref:Ot,onClick:Lt},D?D(at):/*#__PURE__*/t.createElement("div",{className:"btn-fold"},at?N:S))},[Bt,at,S,Lt,D,A,T,N]),Pt=l(function(t,e){void 0===t&&(t=Ht.ellipsis);var n=(void 0===e?{}:e).forceResetFold,o=void 0!==n&&n,i=Ht.ellipsis,l=Ht.fold,r=Ht.defaultFold;t!==i&&(nt(t),Ht.ellipsis=t,null==Ht.onEllipsisChange||Ht.onEllipsisChange(t)),y&&(o||!i&&t)&&l!==r&&Lt(void 0,r)},[Lt,$,y]),Tt=l(function(){var t=Et.current,e=yt.current;if(t&&e){Ht.contentOffsetHeight=t.offsetHeight;var n=window.getComputedStyle(e),o=parseFloat(n.paddingTop),i=parseFloat(n.paddingBottom),l=Ht.containerContentHeight=e.clientHeight-o-i,r=0;if(!r&&t){var a=(n||{}).lineHeight;a&&((r=parseFloat(a))||lt(!0))}if(ht===r||(vt(r),r))if("height"===j)Pt(Ht.contentOffsetHeight>(q||l));else if(F)mt!==F&&Ct(F),Pt(Ht.contentOffsetHeight>=(F+1)*Math.floor(r)-1);else if(Ht.contentOffsetHeight>l){var d=Math.floor(l/r)||1;mt!==d&&Ct(d),Pt(!0)}else Pt(!1)}},[F,ht,j,q,Pt]);c(function(){Pt(Ht.ellipsis,{forceResetFold:!0}),Tt()},[Tt,Pt]),r(function(){if(et&&Ot.current){var t=Ot.current.offsetWidth;t!==Ht.foldBtnWidth&&(Ht.foldBtnWidth=t,ct(t))}},[et,N,W]),r(function(){u&&St()},[at,St]);var Rt=l(function(){var t,e=(null==(t=Et.current)?void 0:t.textContent)||"";e!==Ht.textContent&&(Ht.textContent=e,Ft(e))},[]),jt=i(function(){return et&&at?"function"==typeof k?k(wt):k||wt:void 0},[k,et,at,wt]);return r(function(){Ht.inited&&(null==J||J({ellipsis:et,fold:at,title:jt}))},[J,at,et,jt]),r(function(){Ht.inited=!0},[]),/*#__PURE__*/t.createElement("div",{className:f(g("container"),m),style:kt,ref:function(t){h(yt,t),a&&h(a,t)},onMouseEnter:K,onMouseLeave:Q,onPointerEnter:U,onPointerLeave:X,onClick:Y,onFocus:Z},/*#__PURE__*/t.createElement(v,{offset:!0},function(e){var n=e.measureRef,o=(e.contentRect.offset||{}).height;return void 0!==o&&Math.abs(o-Ht.contentOffsetHeight)>1&&Tt(),/*#__PURE__*/t.createElement("div",{style:Mt,className:"content-shadow-dom",ref:function(t){h(n,t),h(Et,t),Rt()}},$)}),/*#__PURE__*/t.createElement("div",{className:"text-ellipsis-inner",title:O?jt:void 0,style:Wt,ref:bt},et&&W&&Nt,$))});export{m as TextEllipsis,g as c};
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0,\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n };\n }, [lineHeight, getLineHeightFail]);\n\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const commonStyle = {\n whiteSpace\n }; \n if (!ellipsis \|\| !lines \|\| !innerLineHeight) {\n return commonStyle;\n }\n return {\n ...commonStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" \|\| !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n let realLineHeight = 0;\n\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const realStyle = window.getComputedStyle?.(wrapDom);\n const { lineHeight } = realStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth, offsetHeight} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$controlPlaceme","controlPlacement","whiteSpace","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","commonStyle","_extends","minHeight","WebkitLineClamp","paddingBottom","btnStyle","padding","ratio","Math","min","boxSizing","height","paddingTop","paddingLeft","background","transparent","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","resetState","newEllipsis","_temp","_ref","_ref$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","getComputedStyle","adjustLines","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","_ref3","measureRef","contentRect","abs"],"mappings":"0gBA4Ba,IAAAA,EAAIC,EAAE,yBA0GNC,EAAeC,EAA8C,SAACC,EAAOC,GAChF,IACEC,EAyBEF,EAzBFE,UAASC,EAyBPH,EAxBFI,WAAAA,OAAU,IAAAD,EAAG,GAAEA,EACfE,EAuBEL,EAvBFK,MAAKC,EAuBHN,EAtBFO,YAAAA,OAAW,IAAAD,EAAG,OAAMA,EAEZE,EAoBNR,EAnBFS,sCAAAA,OAAqC,IAAAD,GAAQA,EAC7CE,EAkBEV,EAlBFU,kBACAC,EAiBEX,EAjBFW,cAAaC,EAiBXZ,EAhBFa,gBAAAA,WAAeD,GAAOA,EAAAE,EAgBpBd,EAfFe,SAAAA,WAAQD,EAAG,KAAIA,EAAAE,EAebhB,EAdFiB,WAAAA,WAAUD,EAAG,KAAIA,EAAAE,EAcflB,EAbFmB,OAAAA,WAAMD,EAAG,QAAOA,EAAAE,EAadpB,EAZFqB,iBAAAA,OAAmB,IAAHD,EAAG,SAAQA,EAC3BE,EAWEtB,EAXFsB,WACAC,EAUEvB,EAVFuB,iBACAC,EASExB,EATFwB,iBACAC,EAQEzB,EARFyB,aACAC,EAOE1B,EAPF0B,eACAC,EAME3B,EANF2B,aACAC,EAKE5B,EALF4B,aACAC,EAIE7B,EAJF6B,eACAC,EAGE9B,EAHF8B,eACAC,EAEE/B,EAFF+B,QACAC,EACEhC,EADFgC,QAEIC,EADFjC,EArBFkC,SAqBElC,EApBFmC,SAuBFC,EAAgCC,GAAS,GAAlCC,EAAQF,EAAEG,GAAAA,EAAWH,EAAA,GAC5BI,EAAkDH,GAAS,GAApDI,EAAiBD,KAAEE,GAAoBF,EAAA,GAE9CG,GAAwBC,EAAkB5C,EAAO,OAAQ,CAAC6C,cAAc,EAAMC,SAAUrB,IAAjFsB,GAAIJ,GAAA,GAAEK,GAAOL,GACpB,GAAAM,GAAwCZ,EAAS,GAA1Ca,GAAYD,GAAEE,GAAAA,GAAeF,GACpC,GAAAG,GAA8Cf,EACtB,iBAAfjC,GAA2BA,EAAWiD,SAAS,MAClDC,WAAWlD,GACX,GAHCmD,GAAeH,MAAEI,GAAkBJ,GAAA,GAK1CK,GAAwCpB,EAAShC,GAAMqD,GAAAD,GAAA,GAAhDE,QAAU,IAAAD,GAAG,EAACA,GAAEE,GAAaH,MAEpCI,GAAsCxB,EAAS,IAAxCyB,GAAWD,GAAEE,GAAAA,GAAcF,GAElC,GAAOG,GAAWC,EAAW,CAC3BC,QAAQ,EACRC,oBAAqB,EACrB7B,SAAAA,EACA8B,YAAarB,GACbA,KAAAA,GACAG,aAAAA,GACAY,YAAAA,GACAtC,iBAAAA,EACAC,aAAAA,GACC,CAAC,mBAAoB,OAAQ,iBAEhC,GAAM4C,GAAaC,EAAuB,MACpCC,GAAaD,EAAuB,MACpCE,GAAeF,EAAuB,MACtCG,GAAgBH,EAAuB,MAEvCI,GAAiBC,EAAQ,WAC7B,MAAO,CACLvE,WAAYqC,EACR,MACArC,QAA0BwE,EAElC,EAAG,CAACxE,EAAYqC,IAGVoC,GAAYF,EAAQ,WACxB,IACMG,EAAc,CAClBxD,WAAAA,GAEF,OAAKgB,GAJSqB,IAIcJ,GAG5BwB,EAAA,CAAA,EACKD,EAAW,CAEdE,UAAWjC,IAVCY,GAUkB,IAAOJ,GAAsBqB,UAAAA,EAC3DK,gBAAiBlC,GAXLY,QAWoBiB,EAIhCM,cACa,WAAX/D,GAAwB4B,QAAgC6B,EAAtBrB,GAAsBqB,OAXnDE,CAaX,EAAG,CAACnB,GAAYJ,GAAiBjB,EAAUS,GAAM5B,EAAQG,IAGnD6D,GAAWR,EAAQ,WACvB,GAAK5B,GAAL,CAIA,IAAMqC,EAAU7B,GAEV8B,EAAmB,UAAXlE,EAAqBmE,KAAKC,IAAKH,EAAUlC,GAAgB,IAAK,IAAM,GAKlF,MAAO,CACLsC,UAAW,cACXC,OAAWlC,GAAmB,KAC9BnD,WAAemD,GAAe,KAC9BmC,WAAuB,WAAXvE,EAAyBiE,EAAcR,UAAAA,EACnDe,YAAwB,UAAXxE,EAAwBiE,EAAO,UAAOR,EAEnDgB,WAAkCzE,sBAAAA,EAAW0E,KAVxBtF,GACE,IAAvBA,EAAYuF,OAAe,IAAM,MAS4BvF,KAAAA,MAAe8E,EAAK,MAAM9E,EAAW,SAhBnG,CAkBH,EAAG,CAACgD,GAAiBhD,EAAawC,GAAM5B,EAAQ+B,KAE1C6C,GAAgBC,EAAY,WAE5B3B,GAAW4B,UACb5B,GAAW4B,QAAQC,MAAMC,MAAQ,UACjCC,MAAAA,OAAOC,uBAAPD,OAAOC,sBAAwB,WACzBhC,GAAW4B,UACb5B,GAAW4B,QAAQC,MAAMC,MAAQ,OAErC,GAEJ,EAAG,IAEGG,GAAmBN,EACvB,SAACO,EAAkCxD,YAAAA,IAAAA,GAAQiB,GAAQjB,MACjDiB,GAAQjB,KAAOA,EACfC,GAAQD,EACZ,EAAG,IAEGyD,GAAa7B,EAAQ,wBACzB,OACE8B,EAAAC,cACExG,MAAAA,CAAAA,UAAWyG,EACT,mBACoBxF,oBAAAA,EACT,WAAXA,GAAmB,aAAiBE,GAEtC6E,MAAOf,GACPlF,IAAKwE,GACL1C,QAASuE,IAER/E,EACCA,EAAiBwB,iBAEjB0D,EAAAC,cAAA,MAAA,CAAKxG,UAAW,YAAa6C,GAAO9B,EAAaF,GAIzD,EAAG,CACDoE,GACApC,GACAhC,EACAuF,GACA/E,EACAF,EACAF,EACAF,IAII2F,GAAaZ,EAAY,SAACa,EAAWC,QAAA,IAAXD,IAAAA,EAAc7C,GAAQ1B,UAAQyE,IAExDC,QAFwD,IAAAF,EAE1D,CAAE,EAAAA,GADJG,eAAAA,OAAiB,IAAHD,GAAQA,EAEf1E,EAAwC0B,GAAxC1B,SAAgB4E,EAAwBlD,GAA9BjB,KAAeqB,EAAeJ,GAAfI,YAC5ByC,IAAgBvE,IAClBC,EAAYsE,GACZ7C,GAAQ1B,SAAWuE,EACnB7C,MAAAA,GAAQxC,kBAARwC,GAAQxC,iBAAmBqF,IAI3BpG,IACIwG,IAAoB3E,GAAYuE,IACjCK,IAAY9C,GAEfkC,QAAiB1B,EAAWR,EAEhC,EAAG,CAACkC,GAAkBrE,EAAcxB,IAE9B0G,GAAenB,EAAY,WAC/B,IAAMoB,EAAU7C,GAAW0B,QACrBoB,EAAe7C,GAAayB,QAClC,GAAKmB,GAAYC,EAAjB,CAGArD,GAAQG,oBAAsBiD,EAAQE,aACtC,IAAIC,EAAiB,EAGrB,IAAKA,GAAkBH,EAAS,CAC9B,IACQhH,IADUgG,MAAAA,OAAOoB,sBAAPpB,EAAAA,OAAOoB,iBAAmBJ,KACR,CAAE,GAA9BhH,WACJA,KAEFmH,EAAiBjE,WAAWlD,KAE1BsC,IAAqB,GAG1B,CAED,GAAIa,KAAoBgE,IACtB/D,GAAmB+D,GACdA,GAIP,GAAKlH,EAWCsD,KAAetD,GACjBuD,GAAcvD,GAIduG,GADE5C,GAAQG,sBAAwB9D,EAAQ,GAAKkH,EAAiB,QAdlE,GAAIvD,GAAQG,qBAAsBkD,MAAAA,OAAAA,EAAAA,EAAcC,cAAc,CAC1D,IAAMG,EAAcnC,KAAKoC,MAAML,EAAaC,aAAeC,GACvD5D,KAAe8D,GACjB7D,GAAc6D,GAEhBb,IAAW,EACd,MACCA,IAAW,EA/Bd,CA4CH,EAAG,CAACvG,EAAOkD,GAAiBqD,KAI5Be,EAAoB,WAClBf,GAAW5C,GAAQ1B,SAAU,CAC3B2E,gBAAgB,IAElBE,IACF,EAAG,CAACA,GAAcP,KAGlBgB,EAAU,WACR,GAAItF,GAAYmC,GAAcwB,QAAS,CACrC,IAAO4B,EAA6BpD,GAAcwB,QAA3C4B,YACHA,IAAgB7D,GAAQd,eAC1Bc,GAAQd,aAAe2E,EACvB1E,GAAgB0E,GAEnB,CACH,EAAG,CAACvF,EAAUrB,EAAYJ,IAC1B+G,EAAU,WACJE,GACF/B,IAEJ,EAAG,CAAChD,GAAMgD,KACV,IAAMgC,GAAoB/B,EAAY,WAAKgC,IAAAA,EACnCC,GAAmC,OAAlBD,EAAAzD,GAAW0B,cAAO,EAAlB+B,EAAoBlE,cAAe,GACtDmE,IAAmBjE,GAAQF,cAC7BE,GAAQF,YAAcmE,EACtBlE,GAAekE,GAEnB,EAAG,IACGC,GAAavD,EAAQ,WACvB,OAAOrC,GAAYS,GACW,mBAAlBpC,EACNA,EAAcmD,IACdnD,GAAiBmD,QACnBc,CACR,EAAG,CAACjE,EAAe2B,EAAUS,GAAMe,KAcnC,OAbA8D,EAAU,WACJ5D,GAAQE,SACI,MAAdxC,GAAAA,EAAiB,CACbY,SAAAA,EACAS,KAAAA,GACAoF,MAAOD,KAGf,EAAG,CAACxG,EAAgBqB,GAAMT,EAAU4F,KACpCN,EAAU,WACR5D,GAAQE,QAAS,CACnB,EAAG,iBAGDuC,EAAAC,cACExG,MAAAA,CAAAA,UAAWyG,EAAG/G,EAAE,aAAcM,GAC9BgG,MAAOxB,GACPzE,IAAK,SAACmI,GACJC,EAAU7D,GAAc4D,GACxBnI,GAAOoI,EAAUpI,EAAKmI,EACxB,EACAzG,aAAcA,EACdC,aAAcA,EACdC,eAAgBA,EAChBC,eAAgBA,EAChBC,QAASA,EACTC,QAASA,gBAGTyE,EAAAC,cAAC4B,EAAQC,CAAAA,WACN,SAAAC,GAA8B,IAA5BC,EAAUD,EAAVC,WAEMhD,GAFiB+C,EAAXE,YAEgBH,QAAU,CAAA,GAAhC9C,OAIP,YAHeb,IAAXa,GAAwBH,KAAKqD,IAAIlD,EAASzB,GAAQG,qBAAuB,GAC3EgD,kBAEKV,EAAAC,cAAA,MAAA,CAAKR,MAAO,CAAC5E,WAAAA,GAAapB,UAAW,yBAA0BD,IAAK,SAACmI,GAC1EC,EAAUI,EAAYL,GACtBC,EAAU9D,GAAY6D,GACtBL,IACF,GACG9F,EAEL,gBAMFwE,EAAAC,cACExG,MAAAA,CAAAA,UAAW,sBACXiI,MAAOzH,EAAoBwH,QAAatD,EACxCsB,MAAOrB,GACP5E,IAAKoE,IAIJ/B,GAAYzB,GAAmB2F,GAC/BvE,GAIT"}
1	+ {"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n 自定义样式\n /\n style?: React.CSSProperties;\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)\n * @default line\n /\n truncateMode?: \"line\" \| \"height\";\n /\n truncateMode === \"height\" 时生效\n * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效自动截断到容器的最大高度\n * 单位: px\n /\n maxHeight?: number;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n truncateMode === \"line\" 时生效\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 容器宽度（默认自适应内容）\n * 应用场景：whiteSpace='pre' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定\n /\n width?: React.CSSProperties['width'];\n /*\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n style,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n truncateMode = \"line\",\n maxHeight,\n controlPlacement = 'center',\n whiteSpace,\n width,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0, // 内容节点offsetHeight\n containerContentHeight: 0, // 容器内容高度 = 容器高 - 上下padding\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n ...style,\n };\n }, [style, lineHeight, getLineHeightFail]);\n\n const commonWrapStyle = useMemo(() => {\n return {\n whiteSpace,\n width,\n };\n }, [whiteSpace, width])\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const isHeightMode = truncateMode === 'height';\n if (!ellipsis \|\| !isHeightMode && (!lines \|\| !innerLineHeight)) {\n return commonWrapStyle;\n }\n const paddingBottom = showFoldControl && (uiType === \"bottom\" \|\| !fold) ? `${innerLineHeight}px` : undefined;\n return {\n ...commonWrapStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: !isHeightMode && fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案？目前先交给用户去判断，自行选择truncateMode\n // WebkitLineClamp: isSafari ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && fold ? lines * innerLineHeight : undefined,\n WebkitLineClamp: isHeightMode ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n maxHeight: isHeightMode && fold ? (maxHeight \|\| lines * innerLineHeight \|\| runtime.containerContentHeight \|\| 0) : undefined,\n paddingBottom,\n boxSizing: paddingBottom ? 'border-box' as const : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, showFoldControl, uiType, truncateMode, maxHeight, commonWrapStyle]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // Note: safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n const orginStyleWidth = contentRef.current.style.width;\n const orginWidth = window.getComputedStyle(contentRef.current).width;\n // console.log('orginWidth, orginStyleWidth:', orginWidth, orginStyleWidth);\n contentRef.current.style.width = `${parseFloat(orginWidth) - 0.1}px`;\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = orginStyleWidth;\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n const containerStyle = window.getComputedStyle(containerDom);\n const paddingTop = parseFloat(containerStyle.paddingTop);\n const paddingBottom = parseFloat(containerStyle.paddingBottom);\n const containerContentHeight = runtime.containerContentHeight = containerDom.clientHeight - paddingTop - paddingBottom;\n\n // 计算真实行高\n let realLineHeight = 0;\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const {lineHeight} = containerStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n\n const isHeightMode = truncateMode === 'height';\n // 高度截断模式，比较简单直接判断是否超出容器高度\n if (isHeightMode) {\n resetState(runtime.contentOffsetHeight > (maxHeight \|\| containerContentHeight));\n return;\n }\n\n // 行数截断模式，需要利用行高计算是否超出容器高度\n if (!lines) {\n if (runtime.contentOffsetHeight > containerContentHeight) {\n const adjustLines = Math.floor(containerContentHeight / realLineHeight) \|\| 1;\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // console.log('contentOffsetHeight, realLineHeight', runtime.contentOffsetHeight, realLineHeight);\n // 允许误差1px（行高为小数时, safari计算行高行数和实践总高有差异，故将行高向下取整兼容）\n resetState(runtime.contentOffsetHeight >= (lines + 1) Math.floor(realLineHeight) - 1);\n }\n }, [lines, innerLineHeight, truncateMode, maxHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // 高度自适应，容器高度变化时重新计算高度(容器也需要包装Measure，TODO: 待开发 hooks -> useMeasure, 使得观测dom尺寸的方式更简洁)\n // if (!maxHeight && !lines) {\n // calcEllipsis();\n // }\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"content-shadow-dom\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","style","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$truncateMode","truncateMode","maxHeight","_props$controlPlaceme","controlPlacement","whiteSpace","width","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","containerContentHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","_extends","undefined","commonWrapStyle","wrapStyle","isHeightMode","paddingBottom","minHeight","WebkitLineClamp","boxSizing","btnStyle","padding","ratio","Math","min","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","orginStyleWidth","orginWidth","window","getComputedStyle","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","resetState","newEllipsis","_temp","_ref","_ref$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","clientHeight","realLineHeight","floor","adjustLines","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","_ref3","measureRef","contentRect","abs"],"mappings":"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"}

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=require("react"),t=require("@ohkit/utils"),n=require("@ohkit/measure");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/i(e);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)({}).hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},l.apply(null,arguments)}var s=t.prefixClassname("ohkit-text-ellipsis__"),a=e.forwardRef(function(i,a){var r=i.className,f=i.lineHeight,u=void 0===f?"":f,d=i.lines,c=i.maskBgColor,h=void 0===c?"#fff":c,v=i.resetFoldWhenChildrenOrEllipsisChange,p=void 0!==v&&v,g=i.showTitleWhenFold,m=i.titleWhenFold,C=i.showFoldControl,E=void 0===C||C,b=i.foldText,x=void 0===b?"收起":b,w=i.unfoldText,F=void 0===w?"展开":w,S=i.uiType,y=void 0===S?"right":S,k=i.controlPlacement,R=void 0===k?"center":k,H=i.whiteSpace,M=i.renderFoldButton,O=i.onEllipsisChange,W=i.onFoldChange,N=i.onStatusChange,P=i.onMouseEnter,B=i.onMouseLeave,L=i.onPointerEnter,T=i.onPointerLeave,q=i.onClick,j=i.onFocus,A=i.content||i.children,_=e.useState(!1),z=_[0],V=_[1],D=e.useState(!1),G=D[0],I=D[1],J=t.useSyncPropsState(i,"fold",{defaultValue:!0,onChange:W}),K=J[0],Q=J[1],U=e.useState(1),X=U[0],Y=U[1],Z=e.useState("string"==typeof u&&u.endsWith("px")?parseFloat(u):0),$=Z[0],ee=Z[1],te=e.useState(d),ne=te[0],ie=void 0===ne?0:ne,oe=te[1],le=e.useState(""),se=le[0],ae=le[1],re=t.useRuntime({inited:!1,contentOffsetHeight:0,ellipsis:z,defaultFold:K,fold:K,foldBtnWidth:X,textContent:se,onEllipsisChange:O,onFoldChange:W},["onEllipsisChange","fold","onFoldChange"])[0],fe=e.useRef(null),ue=e.useRef(null),de=e.useRef(null),ce=e.useRef(null),he=e.useMemo(function(){return{lineHeight:G?"1.4":u||void 0}},[u,G]),ve=e.useMemo(function(){var e={whiteSpace:H};return z&&ie&&$?l({},e,{minHeight:K?(ie-.2)*$+"px":void 0,WebkitLineClamp:K?ie:void 0,paddingBottom:"bottom"!==y&&K?void 0:$+"px"}):e},[ie,$,z,K,y,H]),pe=e.useMemo(function(){if(K){var e=$,t="right"===y?Math.min(e/X*100,80):60;return{boxSizing:"content-box",height:$+"px",lineHeight:$+"px",paddingTop:"bottom"===y?e+"px":void 0,paddingLeft:"right"===y?e+"px":void 0,background:"linear-gradient(to "+y+", "+h+(4===h.length?"0":"00")+", "+h+" "+t+"%, "+h+" 100%)"}}},[$,h,K,y,X]),ge=e.useCallback(function(){fe.current&&(fe.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){fe.current&&(fe.current.style.width="100%")}))},[]),me=e.useCallback(function(e,t){void 0===t&&(t=!re.fold),re.fold=t,Q(t)},[]),Ce=e.useMemo(function(){/*#__PURE__*/return o.default.createElement("div",{className:t.classNames("btn-fold-wrapper","btn-fold-wrapper-"+y,"bottom"===y&&"placement-"+R),style:pe,ref:ce,onClick:me},M?M(K):/*#__PURE__*/o.default.createElement("div",{className:"btn-fold"},K?F:x))},[pe,K,x,me,M,R,y,F]),Ee=e.useCallback(function(e,t){void 0===e&&(e=re.ellipsis);var n=(void 0===t?{}:t).forceResetFold,i=void 0!==n&&n,o=re.ellipsis,l=re.fold,s=re.defaultFold;e!==o&&(V(e),re.ellipsis=e,null==re.onEllipsisChange||re.onEllipsisChange(e)),p&&(i||!o&&e)&&l!==s&&me(void 0,s)},[me,A,p]),be=e.useCallback(function(){var e=ue.current,t=de.current;if(e&&t){re.contentOffsetHeight=e.offsetHeight;var n=0;if(!n&&e){var i=((null==window.getComputedStyle?void 0:window.getComputedStyle(e))||{}).lineHeight;i&&((n=parseFloat(i))||I(!0))}if($===n||(ee(n),n))if(d)ie!==d&&oe(d),Ee(re.contentOffsetHeight>=(d+1)*n-1);else if(re.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){var o=Math.floor(t.offsetHeight/n);ie!==o&&oe(o),Ee(!0)}else Ee(!1)}},[d,$,Ee]);t.useCompatibleEffect(function(){Ee(re.ellipsis,{forceResetFold:!0}),be()},[be,Ee]),e.useEffect(function(){if(z&&ce.current){var e=ce.current.offsetWidth;e!==re.foldBtnWidth&&(re.foldBtnWidth=e,Y(e))}},[z,F,E]),e.useEffect(function(){t.isSafari&&ge()},[K,ge]);var xe=e.useCallback(function(){var e,t=(null==(e=ue.current)?void 0:e.textContent)||"";t!==re.textContent&&(re.textContent=t,ae(t))},[]),we=e.useMemo(function(){return z&&K?"function"==typeof m?m(se):m||se:void 0},[m,z,K,se]);return e.useEffect(function(){re.inited&&(null==N||N({ellipsis:z,fold:K,title:we}))},[N,K,z,we]),e.useEffect(function(){re.inited=!0},[]),/*#__PURE__*/o.default.createElement("div",{className:t.classNames(s("container"),r),style:he,ref:function(e){t.assignRef(de,e),a&&t.assignRef(a,e)},onMouseEnter:P,onMouseLeave:B,onPointerEnter:L,onPointerLeave:T,onClick:q,onFocus:j},/*#__PURE__*/o.default.createElement(n.Measure,{offset:!0},function(e){var n=e.measureRef,i=(e.contentRect.offset||{}).height;return void 0!==i&&Math.abs(i-re.contentOffsetHeight)>1&&be(),/*#__PURE__*/o.default.createElement("div",{style:{whiteSpace:H},className:"offset-height-computer",ref:function(e){t.assignRef(n,e),t.assignRef(ue,e),xe()}},A)}),/*#__PURE__*/o.default.createElement("div",{className:"text-ellipsis-inner",title:g?we:void 0,style:ve,ref:fe},z&&E&&Ce,A))});exports.TextEllipsis=a,exports.c=s;
+var e=require("react"),t=require("@ohkit/utils"),n=require("@ohkit/measure");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/i(e);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)({}).hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},l.apply(null,arguments)}var a=t.prefixClassname("ohkit-text-ellipsis__"),r=e.forwardRef(function(i,r){var s=i.className,f=i.style,u=i.lineHeight,d=void 0===u?"":u,c=i.lines,h=i.maskBgColor,g=void 0===h?"#fff":h,p=i.resetFoldWhenChildrenOrEllipsisChange,v=void 0!==p&&p,m=i.showTitleWhenFold,C=i.titleWhenFold,x=i.showFoldControl,b=void 0===x||x,w=i.foldText,E=void 0===w?"收起":w,F=i.unfoldText,H=void 0===F?"展开":F,y=i.uiType,M=void 0===y?"right":y,S=i.truncateMode,k=void 0===S?"line":S,R=i.maxHeight,O=i.controlPlacement,W=void 0===O?"center":O,N=i.whiteSpace,B=i.width,P=i.renderFoldButton,T=i.onEllipsisChange,L=i.onFoldChange,q=i.onStatusChange,j=i.onMouseEnter,z=i.onMouseLeave,A=i.onPointerEnter,_=i.onPointerLeave,V=i.onClick,D=i.onFocus,G=i.content||i.children,I=e.useState(!1),J=I[0],K=I[1],Q=e.useState(!1),U=Q[0],X=Q[1],Y=t.useSyncPropsState(i,"fold",{defaultValue:!0,onChange:L}),Z=Y[0],$=Y[1],ee=e.useState(1),te=ee[0],ne=ee[1],ie=e.useState("string"==typeof d&&d.endsWith("px")?parseFloat(d):0),oe=ie[0],le=ie[1],ae=e.useState(c),re=ae[0],se=void 0===re?0:re,fe=ae[1],ue=e.useState(""),de=ue[0],ce=ue[1],he=t.useRuntime({inited:!1,contentOffsetHeight:0,containerContentHeight:0,ellipsis:J,defaultFold:Z,fold:Z,foldBtnWidth:te,textContent:de,onEllipsisChange:T,onFoldChange:L},["onEllipsisChange","fold","onFoldChange"])[0],ge=e.useRef(null),pe=e.useRef(null),ve=e.useRef(null),me=e.useRef(null),Ce=e.useMemo(function(){return l({lineHeight:U?"1.4":d||void 0},f)},[f,d,U]),xe=e.useMemo(function(){return{whiteSpace:N,width:B}},[N,B]),be=e.useMemo(function(){var e="height"===k;if(!J||!(e||se&&oe))return xe;var t=!b||"bottom"!==M&&Z?void 0:oe+"px";return l({},xe,{minHeight:!e&&Z?(se-.2)*oe+"px":void 0,WebkitLineClamp:e?void 0:Z?se:void 0,maxHeight:e&&Z?R||se*oe||he.containerContentHeight||0:void 0,paddingBottom:t,boxSizing:t?"border-box":void 0})},[se,oe,J,Z,b,M,k,R,xe]),we=e.useMemo(function(){if(Z){var e=oe,t="right"===M?Math.min(e/te*100,80):60;return{boxSizing:"content-box",height:oe+"px",lineHeight:oe+"px",paddingTop:"bottom"===M?e+"px":void 0,paddingLeft:"right"===M?e+"px":void 0,background:"linear-gradient(to "+M+", "+g+(4===g.length?"0":"00")+", "+g+" "+t+"%, "+g+" 100%)"}}},[oe,g,Z,M,te]),Ee=e.useCallback(function(){if(ge.current){var e=ge.current.style.width,t=window.getComputedStyle(ge.current).width;ge.current.style.width=parseFloat(t)-.1+"px",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){ge.current&&(ge.current.style.width=e)})}},[]),Fe=e.useCallback(function(e,t){void 0===t&&(t=!he.fold),he.fold=t,$(t)},[]),He=e.useMemo(function(){/*#__PURE__*/return o.default.createElement("div",{className:t.classNames("btn-fold-wrapper","btn-fold-wrapper-"+M,"bottom"===M&&"placement-"+W),style:we,ref:me,onClick:Fe},P?P(Z):/*#__PURE__*/o.default.createElement("div",{className:"btn-fold"},Z?H:E))},[we,Z,E,Fe,P,W,M,H]),ye=e.useCallback(function(e,t){void 0===e&&(e=he.ellipsis);var n=(void 0===t?{}:t).forceResetFold,i=void 0!==n&&n,o=he.ellipsis,l=he.fold,a=he.defaultFold;e!==o&&(K(e),he.ellipsis=e,null==he.onEllipsisChange||he.onEllipsisChange(e)),v&&(i||!o&&e)&&l!==a&&Fe(void 0,a)},[Fe,G,v]),Me=e.useCallback(function(){var e=pe.current,t=ve.current;if(e&&t){he.contentOffsetHeight=e.offsetHeight;var n=window.getComputedStyle(t),i=parseFloat(n.paddingTop),o=parseFloat(n.paddingBottom),l=he.containerContentHeight=t.clientHeight-i-o,a=0;if(!a&&e){var r=(n||{}).lineHeight;r&&((a=parseFloat(r))||X(!0))}if(oe===a||(le(a),a))if("height"===k)ye(he.contentOffsetHeight>(R||l));else if(c)se!==c&&fe(c),ye(he.contentOffsetHeight>=(c+1)*Math.floor(a)-1);else if(he.contentOffsetHeight>l){var s=Math.floor(l/a)||1;se!==s&&fe(s),ye(!0)}else ye(!1)}},[c,oe,k,R,ye]);t.useCompatibleEffect(function(){ye(he.ellipsis,{forceResetFold:!0}),Me()},[Me,ye]),e.useEffect(function(){if(J&&me.current){var e=me.current.offsetWidth;e!==he.foldBtnWidth&&(he.foldBtnWidth=e,ne(e))}},[J,H,b]),e.useEffect(function(){t.isSafari&&Ee()},[Z,Ee]);var Se=e.useCallback(function(){var e,t=(null==(e=pe.current)?void 0:e.textContent)||"";t!==he.textContent&&(he.textContent=t,ce(t))},[]),ke=e.useMemo(function(){return J&&Z?"function"==typeof C?C(de):C||de:void 0},[C,J,Z,de]);return e.useEffect(function(){he.inited&&(null==q||q({ellipsis:J,fold:Z,title:ke}))},[q,Z,J,ke]),e.useEffect(function(){he.inited=!0},[]),/*#__PURE__*/o.default.createElement("div",{className:t.classNames(a("container"),s),style:Ce,ref:function(e){t.assignRef(ve,e),r&&t.assignRef(r,e)},onMouseEnter:j,onMouseLeave:z,onPointerEnter:A,onPointerLeave:_,onClick:V,onFocus:D},/*#__PURE__*/o.default.createElement(n.Measure,{offset:!0},function(e){var n=e.measureRef,i=(e.contentRect.offset||{}).height;return void 0!==i&&Math.abs(i-he.contentOffsetHeight)>1&&Me(),/*#__PURE__*/o.default.createElement("div",{style:xe,className:"content-shadow-dom",ref:function(e){t.assignRef(n,e),t.assignRef(pe,e),Se()}},G)}),/*#__PURE__*/o.default.createElement("div",{className:"text-ellipsis-inner",title:m?ke:void 0,style:be,ref:ge},J&&b&&He,G))});exports.TextEllipsis=r,exports.c=a;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0,\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n };\n }, [lineHeight, getLineHeightFail]);\n\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const commonStyle = {\n whiteSpace\n }; \n if (!ellipsis \|\| !lines \|\| !innerLineHeight) {\n return commonStyle;\n }\n return {\n ...commonStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" \|\| !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n let realLineHeight = 0;\n\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const realStyle = window.getComputedStyle?.(wrapDom);\n const { lineHeight } = realStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth, offsetHeight} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$controlPlaceme","controlPlacement","whiteSpace","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","commonStyle","_extends","minHeight","WebkitLineClamp","paddingBottom","btnStyle","padding","ratio","Math","min","boxSizing","height","paddingTop","paddingLeft","background","transparent","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","classNames","resetState","newEllipsis","_temp","_ref","_ref$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","getComputedStyle","adjustLines","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","_ref3","measureRef","contentRect","abs"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n 自定义样式\n /\n style?: React.CSSProperties;\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)\n * @default line\n /\n truncateMode?: \"line\" \| \"height\";\n /\n truncateMode === \"height\" 时生效\n * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效自动截断到容器的最大高度\n * 单位: px\n /\n maxHeight?: number;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n truncateMode === \"line\" 时生效\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 容器宽度（默认自适应内容）\n * 应用场景：whiteSpace='pre' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定\n /\n width?: React.CSSProperties['width'];\n /*\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n style,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n truncateMode = \"line\",\n maxHeight,\n controlPlacement = 'center',\n whiteSpace,\n width,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0, // 内容节点offsetHeight\n containerContentHeight: 0, // 容器内容高度 = 容器高 - 上下padding\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n ...style,\n };\n }, [style, lineHeight, getLineHeightFail]);\n\n const commonWrapStyle = useMemo(() => {\n return {\n whiteSpace,\n width,\n };\n }, [whiteSpace, width])\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const isHeightMode = truncateMode === 'height';\n if (!ellipsis \|\| !isHeightMode && (!lines \|\| !innerLineHeight)) {\n return commonWrapStyle;\n }\n const paddingBottom = showFoldControl && (uiType === \"bottom\" \|\| !fold) ? `${innerLineHeight}px` : undefined;\n return {\n ...commonWrapStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: !isHeightMode && fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案？目前先交给用户去判断，自行选择truncateMode\n // WebkitLineClamp: isSafari ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && fold ? lines * innerLineHeight : undefined,\n WebkitLineClamp: isHeightMode ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n maxHeight: isHeightMode && fold ? (maxHeight \|\| lines * innerLineHeight \|\| runtime.containerContentHeight \|\| 0) : undefined,\n paddingBottom,\n boxSizing: paddingBottom ? 'border-box' as const : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, showFoldControl, uiType, truncateMode, maxHeight, commonWrapStyle]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // Note: safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n const orginStyleWidth = contentRef.current.style.width;\n const orginWidth = window.getComputedStyle(contentRef.current).width;\n // console.log('orginWidth, orginStyleWidth:', orginWidth, orginStyleWidth);\n contentRef.current.style.width = `${parseFloat(orginWidth) - 0.1}px`;\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = orginStyleWidth;\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n const containerStyle = window.getComputedStyle(containerDom);\n const paddingTop = parseFloat(containerStyle.paddingTop);\n const paddingBottom = parseFloat(containerStyle.paddingBottom);\n const containerContentHeight = runtime.containerContentHeight = containerDom.clientHeight - paddingTop - paddingBottom;\n\n // 计算真实行高\n let realLineHeight = 0;\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const {lineHeight} = containerStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n\n const isHeightMode = truncateMode === 'height';\n // 高度截断模式，比较简单直接判断是否超出容器高度\n if (isHeightMode) {\n resetState(runtime.contentOffsetHeight > (maxHeight \|\| containerContentHeight));\n return;\n }\n\n // 行数截断模式，需要利用行高计算是否超出容器高度\n if (!lines) {\n if (runtime.contentOffsetHeight > containerContentHeight) {\n const adjustLines = Math.floor(containerContentHeight / realLineHeight) \|\| 1;\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // console.log('contentOffsetHeight, realLineHeight', runtime.contentOffsetHeight, realLineHeight);\n // 允许误差1px（行高为小数时, safari计算行高行数和实践总高有差异，故将行高向下取整兼容）\n resetState(runtime.contentOffsetHeight >= (lines + 1) Math.floor(realLineHeight) - 1);\n }\n }, [lines, innerLineHeight, truncateMode, maxHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // 高度自适应，容器高度变化时重新计算高度(容器也需要包装Measure，TODO: 待开发 hooks -> useMeasure, 使得观测dom尺寸的方式更简洁)\n // if (!maxHeight && !lines) {\n // calcEllipsis();\n // }\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"content-shadow-dom\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","prefixClassname","TextEllipsis","forwardRef","props","ref","className","style","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$truncateMode","truncateMode","maxHeight","_props$controlPlaceme","controlPlacement","whiteSpace","width","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","containerContentHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","_extends","undefined","commonWrapStyle","wrapStyle","isHeightMode","paddingBottom","minHeight","WebkitLineClamp","boxSizing","btnStyle","padding","ratio","Math","min","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","orginStyleWidth","orginWidth","window","getComputedStyle","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","classNames","resetState","newEllipsis","_temp","_ref","_ref$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","clientHeight","realLineHeight","floor","adjustLines","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","_ref3","measureRef","contentRect","abs"],"mappings":"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"}

package/dist/index.modern.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{forwardRef as t,useState as n,useRef as o,useMemo as i,useCallback as l,useEffect as r}from"react";import{prefixClassname as s,useSyncPropsState as a,useRuntime as d,classNames as f,useCompatibleEffect as c,isSafari as h,assignRef as u}from"@ohkit/utils";import{Measure as p}from"@ohkit/measure";function g(){return g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},g.apply(null,arguments)}const m=s("ohkit-text-ellipsis__"),v=t((t,s)=>{const{className:v,lineHeight:C="",lines:w,maskBgColor:x="#fff",content:F,children:E,resetFoldWhenChildrenOrEllipsisChange:b=!1,showTitleWhenFold:y,titleWhenFold:H,showFoldControl:$=!0,foldText:k="收起",unfoldText:O="展开",uiType:W="right",controlPlacement:M="center",whiteSpace:S,renderFoldButton:B,onEllipsisChange:L,onFoldChange:N,onStatusChange:P,onMouseEnter:T,onMouseLeave:R,onPointerEnter:j,onPointerLeave:q,onClick:A,onFocus:_}=t,z=F||E,[V,D]=n(!1),[G,I]=n(!1),[J,K]=a(t,"fold",{defaultValue:!0,onChange:N}),[Q,U]=n(1),[X,Y]=n("string"==typeof C&&C.endsWith("px")?parseFloat(C):0),[Z=0,ee]=n(w),[te,ne]=n(""),[oe]=d({inited:!1,contentOffsetHeight:0,ellipsis:V,defaultFold:J,fold:J,foldBtnWidth:Q,textContent:te,onEllipsisChange:L,onFoldChange:N},["onEllipsisChange","fold","onFoldChange"]),ie=o(null),le=o(null),re=o(null),se=o(null),ae=i(()=>({lineHeight:G?"1.4":C||void 0}),[C,G]),de=i(()=>{const e={whiteSpace:S};return V&&Z&&X?g({},e,{minHeight:J?(Z-.2)*X+"px":void 0,WebkitLineClamp:J?Z:void 0,paddingBottom:"bottom"!==W&&J?void 0:`${X}px`}):e},[Z,X,V,J,W,S]),fe=i(()=>{if(!J)return;const e=X,t="right"===W?Math.min(e/Q*100,80):60;return{boxSizing:"content-box",height:`${X}px`,lineHeight:`${X}px`,paddingTop:"bottom"===W?`${e}px`:void 0,paddingLeft:"right"===W?`${e}px`:void 0,background:`linear-gradient(to ${W}, ${x}${4===x.length?"0":"00"}, ${x} ${t}%, ${x} 100%)`}},[X,x,J,W,Q]),ce=l(()=>{ie.current&&(ie.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(()=>{ie.current&&(ie.current.style.width="100%")}))},[]),he=l((e,t=!oe.fold)=>{oe.fold=t,K(t)},[]),ue=i(()=>/*#__PURE__*/e.createElement("div",{className:f("btn-fold-wrapper",`btn-fold-wrapper-${W}`,"bottom"===W&&`placement-${M}`),style:fe,ref:se,onClick:he},B?B(J):/*#__PURE__*/e.createElement("div",{className:"btn-fold"},J?O:k)),[fe,J,k,he,B,M,W,O]),pe=l((e=oe.ellipsis,{forceResetFold:t=!1}={})=>{const{ellipsis:n,fold:o,defaultFold:i}=oe;e!==n&&(D(e),oe.ellipsis=e,null==oe.onEllipsisChange||oe.onEllipsisChange(e)),b&&(t||!n&&e)&&o!==i&&he(void 0,i)},[he,z,b]),ge=l(()=>{const e=le.current,t=re.current;if(!e||!t)return;oe.contentOffsetHeight=e.offsetHeight;let n=0;if(!n&&e){const t=null==window.getComputedStyle?void 0:window.getComputedStyle(e),{lineHeight:o}=t||{};o&&(n=parseFloat(o),n||I(!0))}if(X===n||(Y(n),n))if(w)Z!==w&&ee(w),pe(oe.contentOffsetHeight>=(w+1)*n-1);else if(oe.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){const e=Math.floor(t.offsetHeight/n);Z!==e&&ee(e),pe(!0)}else pe(!1)},[w,X,pe]);c(()=>{pe(oe.ellipsis,{forceResetFold:!0}),ge()},[ge,pe]),r(()=>{if(V&&se.current){const{offsetWidth:e}=se.current;e!==oe.foldBtnWidth&&(oe.foldBtnWidth=e,U(e))}},[V,O,$]),r(()=>{h&&ce()},[J,ce]);const me=l(()=>{var e;const t=(null==(e=le.current)?void 0:e.textContent)||"";t!==oe.textContent&&(oe.textContent=t,ne(t))},[]),ve=i(()=>V&&J?"function"==typeof H?H(te):H||te:void 0,[H,V,J,te]);return r(()=>{oe.inited&&(null==P||P({ellipsis:V,fold:J,title:ve}))},[P,J,V,ve]),r(()=>{oe.inited=!0},[]),/*#__PURE__*/e.createElement("div",{className:f(m("container"),v),style:ae,ref:e=>{u(re,e),s&&u(s,e)},onMouseEnter:T,onMouseLeave:R,onPointerEnter:j,onPointerLeave:q,onClick:A,onFocus:_},/*#__PURE__*/e.createElement(p,{offset:!0},({measureRef:t,contentRect:n})=>{const{height:o}=n.offset||{};return void 0!==o&&Math.abs(o-oe.contentOffsetHeight)>1&&ge(),/*#__PURE__*/e.createElement("div",{style:{whiteSpace:S},className:"offset-height-computer",ref:e=>{u(t,e),u(le,e),me()}},z)}),/*#__PURE__*/e.createElement("div",{className:"text-ellipsis-inner",title:y?ve:void 0,style:de,ref:ie},V&&$&&ue,z))});export{v as TextEllipsis,m as c};
+import e,{forwardRef as t,useState as n,useRef as o,useMemo as i,useCallback as l,useEffect as r}from"react";import{prefixClassname as s,useSyncPropsState as a,useRuntime as d,classNames as c,useCompatibleEffect as f,isSafari as h,assignRef as u}from"@ohkit/utils";import{Measure as p}from"@ohkit/measure";function g(){return g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},g.apply(null,arguments)}const m=s("ohkit-text-ellipsis__"),v=t((t,s)=>{const{className:v,style:C,lineHeight:x="",lines:w,maskBgColor:F="#fff",content:H,children:b,resetFoldWhenChildrenOrEllipsisChange:E=!1,showTitleWhenFold:y,titleWhenFold:$,showFoldControl:O=!0,foldText:k="收起",unfoldText:M="展开",uiType:W="right",truncateMode:B="line",maxHeight:S,controlPlacement:L="center",whiteSpace:N,width:P,renderFoldButton:T,onEllipsisChange:R,onFoldChange:j,onStatusChange:q,onMouseEnter:z,onMouseLeave:A,onPointerEnter:_,onPointerLeave:V,onClick:D,onFocus:G}=t,I=H||b,[J,K]=n(!1),[Q,U]=n(!1),[X,Y]=a(t,"fold",{defaultValue:!0,onChange:j}),[Z,ee]=n(1),[te,ne]=n("string"==typeof x&&x.endsWith("px")?parseFloat(x):0),[oe=0,ie]=n(w),[le,re]=n(""),[se]=d({inited:!1,contentOffsetHeight:0,containerContentHeight:0,ellipsis:J,defaultFold:X,fold:X,foldBtnWidth:Z,textContent:le,onEllipsisChange:R,onFoldChange:j},["onEllipsisChange","fold","onFoldChange"]),ae=o(null),de=o(null),ce=o(null),fe=o(null),he=i(()=>g({lineHeight:Q?"1.4":x||void 0},C),[C,x,Q]),ue=i(()=>({whiteSpace:N,width:P}),[N,P]),pe=i(()=>{const e="height"===B;if(!J||!(e||oe&&te))return ue;const t=!O||"bottom"!==W&&X?void 0:`${te}px`;return g({},ue,{minHeight:!e&&X?(oe-.2)*te+"px":void 0,WebkitLineClamp:e?void 0:X?oe:void 0,maxHeight:e&&X?S||oe*te||se.containerContentHeight||0:void 0,paddingBottom:t,boxSizing:t?"border-box":void 0})},[oe,te,J,X,O,W,B,S,ue]),ge=i(()=>{if(!X)return;const e=te,t="right"===W?Math.min(e/Z*100,80):60;return{boxSizing:"content-box",height:`${te}px`,lineHeight:`${te}px`,paddingTop:"bottom"===W?`${e}px`:void 0,paddingLeft:"right"===W?`${e}px`:void 0,background:`linear-gradient(to ${W}, ${F}${4===F.length?"0":"00"}, ${F} ${t}%, ${F} 100%)`}},[te,F,X,W,Z]),me=l(()=>{if(ae.current){const e=ae.current.style.width,t=window.getComputedStyle(ae.current).width;ae.current.style.width=parseFloat(t)-.1+"px",null==window.requestAnimationFrame||window.requestAnimationFrame(()=>{ae.current&&(ae.current.style.width=e)})}},[]),ve=l((e,t=!se.fold)=>{se.fold=t,Y(t)},[]),Ce=i(()=>/*#__PURE__*/e.createElement("div",{className:c("btn-fold-wrapper",`btn-fold-wrapper-${W}`,"bottom"===W&&`placement-${L}`),style:ge,ref:fe,onClick:ve},T?T(X):/*#__PURE__*/e.createElement("div",{className:"btn-fold"},X?M:k)),[ge,X,k,ve,T,L,W,M]),xe=l((e=se.ellipsis,{forceResetFold:t=!1}={})=>{const{ellipsis:n,fold:o,defaultFold:i}=se;e!==n&&(K(e),se.ellipsis=e,null==se.onEllipsisChange||se.onEllipsisChange(e)),E&&(t||!n&&e)&&o!==i&&ve(void 0,i)},[ve,I,E]),we=l(()=>{const e=de.current,t=ce.current;if(!e||!t)return;se.contentOffsetHeight=e.offsetHeight;const n=window.getComputedStyle(t),o=parseFloat(n.paddingTop),i=parseFloat(n.paddingBottom),l=se.containerContentHeight=t.clientHeight-o-i;let r=0;if(!r&&e){const{lineHeight:e}=n||{};e&&(r=parseFloat(e),r||U(!0))}if(te===r||(ne(r),r))if("height"===B)xe(se.contentOffsetHeight>(S||l));else if(w)oe!==w&&ie(w),xe(se.contentOffsetHeight>=(w+1)*Math.floor(r)-1);else if(se.contentOffsetHeight>l){const e=Math.floor(l/r)||1;oe!==e&&ie(e),xe(!0)}else xe(!1)},[w,te,B,S,xe]);f(()=>{xe(se.ellipsis,{forceResetFold:!0}),we()},[we,xe]),r(()=>{if(J&&fe.current){const{offsetWidth:e}=fe.current;e!==se.foldBtnWidth&&(se.foldBtnWidth=e,ee(e))}},[J,M,O]),r(()=>{h&&me()},[X,me]);const Fe=l(()=>{var e;const t=(null==(e=de.current)?void 0:e.textContent)||"";t!==se.textContent&&(se.textContent=t,re(t))},[]),He=i(()=>J&&X?"function"==typeof $?$(le):$||le:void 0,[$,J,X,le]);return r(()=>{se.inited&&(null==q||q({ellipsis:J,fold:X,title:He}))},[q,X,J,He]),r(()=>{se.inited=!0},[]),/*#__PURE__*/e.createElement("div",{className:c(m("container"),v),style:he,ref:e=>{u(ce,e),s&&u(s,e)},onMouseEnter:z,onMouseLeave:A,onPointerEnter:_,onPointerLeave:V,onClick:D,onFocus:G},/*#__PURE__*/e.createElement(p,{offset:!0},({measureRef:t,contentRect:n})=>{const{height:o}=n.offset||{};return void 0!==o&&Math.abs(o-se.contentOffsetHeight)>1&&we(),/*#__PURE__*/e.createElement("div",{style:ue,className:"content-shadow-dom",ref:e=>{u(t,e),u(de,e),Fe()}},I)}),/*#__PURE__*/e.createElement("div",{className:"text-ellipsis-inner",title:y?He:void 0,style:pe,ref:ae},J&&O&&Ce,I))});export{v as TextEllipsis,m as c};
 //# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.modern.mjs","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0,\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n };\n }, [lineHeight, getLineHeightFail]);\n\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const commonStyle = {\n whiteSpace\n }; \n if (!ellipsis \|\| !lines \|\| !innerLineHeight) {\n return commonStyle;\n }\n return {\n ...commonStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" \|\| !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n let realLineHeight = 0;\n\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const realStyle = window.getComputedStyle?.(wrapDom);\n const { lineHeight } = realStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth, offsetHeight} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","lineHeight","lines","maskBgColor","content","children","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","showFoldControl","foldText","unfoldText","uiType","controlPlacement","whiteSpace","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","ellipsis","setEllipsis","useState","getLineHeightFail","setGetLineHeightFail","fold","setFold","useSyncPropsState","defaultValue","onChange","foldBtnWidth","setFoldBtnWidth","innerLineHeight","setInnerLineHeight","endsWith","parseFloat","innerLines","setInnerLines","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","commonStyle","_extends","minHeight","WebkitLineClamp","paddingBottom","btnStyle","padding","ratio","Math","min","boxSizing","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","resetState","newEllipsis","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","realStyle","getComputedStyle","adjustLines","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","measureRef","contentRect","abs"],"mappings":"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"}
1	+ {"version":3,"file":"index.modern.mjs","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n 自定义样式\n /\n style?: React.CSSProperties;\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)\n * @default line\n /\n truncateMode?: \"line\" \| \"height\";\n /\n truncateMode === \"height\" 时生效\n * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效自动截断到容器的最大高度\n * 单位: px\n /\n maxHeight?: number;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n truncateMode === \"line\" 时生效\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 容器宽度（默认自适应内容）\n * 应用场景：whiteSpace='pre' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定\n /\n width?: React.CSSProperties['width'];\n /*\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n style,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n truncateMode = \"line\",\n maxHeight,\n controlPlacement = 'center',\n whiteSpace,\n width,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0, // 内容节点offsetHeight\n containerContentHeight: 0, // 容器内容高度 = 容器高 - 上下padding\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n ...style,\n };\n }, [style, lineHeight, getLineHeightFail]);\n\n const commonWrapStyle = useMemo(() => {\n return {\n whiteSpace,\n width,\n };\n }, [whiteSpace, width])\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const isHeightMode = truncateMode === 'height';\n if (!ellipsis \|\| !isHeightMode && (!lines \|\| !innerLineHeight)) {\n return commonWrapStyle;\n }\n const paddingBottom = showFoldControl && (uiType === \"bottom\" \|\| !fold) ? `${innerLineHeight}px` : undefined;\n return {\n ...commonWrapStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: !isHeightMode && fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案？目前先交给用户去判断，自行选择truncateMode\n // WebkitLineClamp: isSafari ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && fold ? lines * innerLineHeight : undefined,\n WebkitLineClamp: isHeightMode ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n maxHeight: isHeightMode && fold ? (maxHeight \|\| lines * innerLineHeight \|\| runtime.containerContentHeight \|\| 0) : undefined,\n paddingBottom,\n boxSizing: paddingBottom ? 'border-box' as const : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, showFoldControl, uiType, truncateMode, maxHeight, commonWrapStyle]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // Note: safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n const orginStyleWidth = contentRef.current.style.width;\n const orginWidth = window.getComputedStyle(contentRef.current).width;\n // console.log('orginWidth, orginStyleWidth:', orginWidth, orginStyleWidth);\n contentRef.current.style.width = `${parseFloat(orginWidth) - 0.1}px`;\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = orginStyleWidth;\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n const containerStyle = window.getComputedStyle(containerDom);\n const paddingTop = parseFloat(containerStyle.paddingTop);\n const paddingBottom = parseFloat(containerStyle.paddingBottom);\n const containerContentHeight = runtime.containerContentHeight = containerDom.clientHeight - paddingTop - paddingBottom;\n\n // 计算真实行高\n let realLineHeight = 0;\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const {lineHeight} = containerStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n\n const isHeightMode = truncateMode === 'height';\n // 高度截断模式，比较简单直接判断是否超出容器高度\n if (isHeightMode) {\n resetState(runtime.contentOffsetHeight > (maxHeight \|\| containerContentHeight));\n return;\n }\n\n // 行数截断模式，需要利用行高计算是否超出容器高度\n if (!lines) {\n if (runtime.contentOffsetHeight > containerContentHeight) {\n const adjustLines = Math.floor(containerContentHeight / realLineHeight) \|\| 1;\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // console.log('contentOffsetHeight, realLineHeight', runtime.contentOffsetHeight, realLineHeight);\n // 允许误差1px（行高为小数时, safari计算行高行数和实践总高有差异，故将行高向下取整兼容）\n resetState(runtime.contentOffsetHeight >= (lines + 1) Math.floor(realLineHeight) - 1);\n }\n }, [lines, innerLineHeight, truncateMode, maxHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // 高度自适应，容器高度变化时重新计算高度(容器也需要包装Measure，TODO: 待开发 hooks -> useMeasure, 使得观测dom尺寸的方式更简洁)\n // if (!maxHeight && !lines) {\n // calcEllipsis();\n // }\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"content-shadow-dom\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","style","lineHeight","lines","maskBgColor","content","children","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","showFoldControl","foldText","unfoldText","uiType","truncateMode","maxHeight","controlPlacement","whiteSpace","width","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","ellipsis","setEllipsis","useState","getLineHeightFail","setGetLineHeightFail","fold","setFold","useSyncPropsState","defaultValue","onChange","foldBtnWidth","setFoldBtnWidth","innerLineHeight","setInnerLineHeight","endsWith","parseFloat","innerLines","setInnerLines","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","containerContentHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","_extends","undefined","commonWrapStyle","wrapStyle","isHeightMode","paddingBottom","minHeight","WebkitLineClamp","boxSizing","btnStyle","padding","ratio","Math","min","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","orginStyleWidth","orginWidth","window","getComputedStyle","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","resetState","newEllipsis","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","clientHeight","realLineHeight","floor","adjustLines","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","measureRef","contentRect","abs"],"mappings":"0gBA4Ba,MAAAA,EAAIC,EAAE,yBA+HNC,EAAeC,EAA8C,CAACC,EAAOC,KAChF,MAAMC,UACJA,EAASC,MACTA,EAAKC,WACLA,EAAa,GAAEC,MACfA,EAAKC,YACLA,EAAc,OAAMC,QACpBA,EAAOC,SACPA,EAAQC,sCACRA,GAAwC,EAAKC,kBAC7CA,EAAiBC,cACjBA,EAAaC,gBACbA,GAAkB,EAAIC,SACtBA,EAAW,KAAIC,WACfA,EAAa,KAAIC,OACjBA,EAAS,QAAOC,aAChBA,EAAe,OAAMC,UACrBA,EAASC,iBACTA,EAAmB,SAAQC,WAC3BA,EAAUC,MACVA,EAAKC,iBACLA,EAAgBC,iBAChBA,EAAgBC,aAChBA,EAAYC,eACZA,EAAcC,aACdA,EAAYC,aACZA,EAAYC,eACZA,EAAcC,eACdA,EAAcC,QACdA,EAAOC,QACPA,GACE9B,EACE+B,EAAexB,GAAWC,GAEzBwB,EAAUC,GAAeC,GAAS,IAClCC,EAAmBC,GAAwBF,GAAS,IAEpDG,EAAMC,GAAWC,EAAkBvC,EAAO,OAAQ,CAACwC,cAAc,EAAMC,SAAUlB,KACjFmB,EAAcC,IAAmBT,EAAS,IAC1CU,GAAiBC,IAAsBX,EACtB,iBAAf9B,GAA2BA,EAAW0C,SAAS,MAClDC,WAAW3C,GACX,IAEC4C,GAAa,EAAGC,IAAiBf,EAAS7B,IAE1C6C,GAAaC,IAAkBjB,EAAS,KAExCkB,IAAWC,EAAW,CAC3BC,QAAQ,EACRC,oBAAqB,EACrBC,uBAAwB,EACxBxB,WACAyB,YAAapB,EACbA,OACAK,eACAQ,eACA5B,mBACAC,gBACC,CAAC,mBAAoB,OAAQ,iBAE1BmC,GAAaC,EAAuB,MACpCC,GAAaD,EAAuB,MACpCE,GAAeF,EAAuB,MACtCG,GAAgBH,EAAuB,MAEvCI,GAAiBC,EAAQ,IAC7BC,EACE7D,CAAAA,WAAY+B,EACR,MACA/B,QAA0B8D,GAC3B/D,GAEJ,CAACA,EAAOC,EAAY+B,IAEjBgC,GAAkBH,EAAQ,KACvB,CACL7C,aACAC,UAED,CAACD,EAAYC,IAEVgD,GAAYJ,EAAQ,KACxB,MACMK,EAAgC,WAAjBrD,EACrB,IAAKgB,KAAaqC,GAFJrB,IAEgCJ,IAC5C,OAAOuB,GAET,MAAMG,GAAgB1D,GAA+B,WAAXG,GAAwBsB,OAAiC6B,EAAzB,GAAGtB,OAC7E,OAAAqB,EACKE,CAAAA,EAAAA,GAEHI,CAAAA,WAAYF,GAAgBhC,GAThBW,GASmC,IAAOJ,GAAnB,UAAyCsB,EAI5EM,gBAAiBH,OAAeH,EAAY7B,EAbhCW,QAa+CkB,EAC3DjD,UAAWoD,GAAgBhC,EAAQpB,GAdvB+B,GAc4CJ,IAAmBQ,GAAQI,wBAA0B,OAAKU,EAClHI,gBACAG,UAAWH,EAAgB,kBAAwBJ,KAEpD,CAAClB,GAAYJ,GAAiBZ,EAAUK,EAAMzB,EAAiBG,EAAQC,EAAcC,EAAWkD,KAG7FO,GAAWV,EAAQ,KACvB,IAAK3B,EACH,OAGF,MAAMsC,EAAU/B,GAEVgC,EAAmB,UAAX7D,EAAqB8D,KAAKC,IAAKH,EAAUjC,EAAgB,IAAK,IAAM,GAKlF,MAAO,CACL+B,UAAW,cACXM,OAAQ,GAAGnC,OACXxC,WAAY,GAAGwC,OACfoC,WAAuB,WAAXjE,EAAsB,GAAG4D,WAAcT,EACnDe,YAAwB,UAAXlE,EAAqB,GAAG4D,WAAcT,EAEnDgB,WAAY,sBAAsBnE,MAVbT,IACE,IAAvBA,EAAY6E,OAAe,IAAM,SAS4B7E,KAAesE,OAAWtE,YAExF,CAACsC,GAAiBtC,EAAa+B,EAAMtB,EAAQ2B,IAE1C0C,GAAgBC,EAAY,KAEhC,GAAI3B,GAAW4B,QAAS,CACtB,MAAMC,EAAkB7B,GAAW4B,QAAQnF,MAAMiB,MAC3CoE,EAAaC,OAAOC,iBAAiBhC,GAAW4B,SAASlE,MAE/DsC,GAAW4B,QAAQnF,MAAMiB,MAAW2B,WAAWyC,GAAc,GAA5B,KACL,MAA5BC,OAAOE,uBAAPF,OAAOE,sBAAwB,KACzBjC,GAAW4B,UACb5B,GAAW4B,QAAQnF,MAAMiB,MAAQmE,IAGtC,GACA,IAEGK,GAAmBP,EACvB,CAACQ,EAAkCxD,GAAQe,GAAQf,QACjDe,GAAQf,KAAOA,EACfC,EAAQD,IACT,IAEGyD,GAAa9B,EAAQ,iBAEvB+B,EAAAC,cACE9F,MAAAA,CAAAA,UAAW+F,EACT,mBACA,oBAAoBlF,IACT,WAAXA,GAAuB,aAAaG,KAEtCf,MAAOuE,GACPzE,IAAK6D,GACLjC,QAAS+D,IAERvE,EACCA,EAAiBgB,gBAEjB0D,EAAAC,cAAA,MAAA,CAAK9F,UAAW,YAAamC,EAAOvB,EAAaD,IAItD,CACD6D,GACArC,EACAxB,EACA+E,GACAvE,EACAH,EACAH,EACAD,IAIIoF,GAAab,EAAY,CAACc,EAAc/C,GAAQpB,UACpDoE,eAAAA,GAAiB,GACf,CAAA,KACF,MAAMpE,SAACA,EAAUK,KAAMgE,EAAO5C,YAAEA,GAAeL,GAC3C+C,IAAgBnE,IAClBC,EAAYkE,GACZ/C,GAAQpB,SAAWmE,QACnB/C,GAAQ9B,kBAAR8B,GAAQ9B,iBAAmB6E,IAI3B1F,IACI2F,IAAoBpE,GAAYmE,IACjCE,IAAY5C,GAEfmC,QAAiB1B,EAAWT,IAE7B,CAACmC,GAAkB7D,EAActB,IAE9B6F,GAAejB,EAAY,KAC/B,MAAMkB,EAAU3C,GAAW0B,QACrBkB,EAAe3C,GAAayB,QAClC,IAAKiB,IAAYC,EACf,OAEFpD,GAAQG,oBAAsBgD,EAAQE,aACtC,MAAM1C,EAAiB0B,OAAOC,iBAAiBc,GACzCxB,EAAajC,WAAWgB,EAAeiB,YACvCV,EAAgBvB,WAAWgB,EAAeO,eAC1Cd,EAAyBJ,GAAQI,uBAAyBgD,EAAaE,aAAe1B,EAAaV,EAGzG,IAAIqC,EAAiB,EAErB,IAAKA,GAAkBJ,EAAS,CAC9B,MAAMnG,WAACA,GAAc2D,GAAkB,GACnC3D,IAEFuG,EAAiB5D,WAAW3C,GACvBuG,GACHvE,GAAqB,GAG1B,CAED,GAAIQ,KAAoB+D,IACtB9D,GAAmB8D,GACdA,GAOP,GAFsC,WAAjB3F,EAGnBkF,GAAW9C,GAAQG,qBAAuBtC,GAAauC,SAKzD,GAAKnD,EAWC2C,KAAe3C,GACjB4C,GAAc5C,GAId6F,GAAW9C,GAAQG,sBAAwBlD,EAAQ,GAAKwE,KAAK+B,MAAMD,GAAkB,QAfvF,GAAIvD,GAAQG,oBAAsBC,EAAwB,CACtD,MAAMqD,EAAchC,KAAK+B,MAAMpD,EAAyBmD,IAAmB,EACvE3D,KAAe6D,GACjB5D,GAAc4D,GAEhBX,IAAW,EACd,MACCA,IAAW,IAUd,CAAC7F,EAAOuC,GAAiB5B,EAAcC,EAAWiF,KAIrDY,EAAoB,KAClBZ,GAAW9C,GAAQpB,SAAU,CAC3BoE,gBAAgB,IAElBE,MACC,CAACA,GAAcJ,KAGlBa,EAAU,KACR,GAAI/E,GAAY8B,GAAcwB,QAAS,CACrC,MAAM0B,YAACA,GAAelD,GAAcwB,QAChC0B,IAAgB5D,GAAQV,eAC1BU,GAAQV,aAAesE,EACvBrE,GAAgBqE,GAEnB,GACA,CAAChF,EAAUlB,EAAYF,IAC1BmG,EAAU,KACJE,GACF7B,MAED,CAAC/C,EAAM+C,KACV,MAAM8B,GAAoB7B,EAAY,KAAK,IAAA8B,EACzC,MAAMC,GAAmC,OAAlBD,EAAAvD,GAAW0B,cAAO,EAAlB6B,EAAoBjE,cAAe,GACtDkE,IAAmBhE,GAAQF,cAC7BE,GAAQF,YAAckE,EACtBjE,GAAeiE,KAEhB,IACGC,GAAarD,EAAQ,IAChBhC,GAAYK,EACW,mBAAlB1B,EACNA,EAAcuC,IACdvC,GAAiBuC,QACnBgB,EACL,CAACvD,EAAeqB,EAAUK,EAAMa,KAkBnC,OAjBA6D,EAAU,KACJ3D,GAAQE,SACI,MAAd9B,GAAAA,EAAiB,CACbQ,WACAK,OACAiF,MAAOD,OAGZ,CAAC7F,EAAgBa,EAAML,EAAUqF,KACpCN,EAAU,KACR3D,GAAQE,QAAS,GAChB,iBAODyC,EAAAC,cAAA,MAAA,CACE9F,UAAW+F,EAAGrG,EAAE,aAAcM,GAC9BC,MAAO4D,GACP9D,IAAMsH,IACJC,EAAU3D,GAAc0D,GACxBtH,GAAOuH,EAAUvH,EAAKsH,IAExB9F,aAAcA,EACdC,aAAcA,EACdC,eAAgBA,EAChBC,eAAgBA,EAChBC,QAASA,EACTC,QAASA,gBAGTiE,EAAAC,cAACyB,EAAO,CAACC,QACN,GAAA,EAAEC,aAAYC,kBAEb,MAAM7C,OAACA,GAAU6C,EAAYF,QAAU,GAIvC,YAHexD,IAAXa,GAAwBF,KAAKgD,IAAI9C,EAAS3B,GAAQG,qBAAuB,GAC3E+C,kBAEKP,EAAAC,cAAA,MAAA,CAAK7F,MAAOgE,GAAiBjE,UAAW,qBAAsBD,IAAMsH,IACzEC,EAAUG,EAAYJ,GACtBC,EAAU5D,GAAY2D,GACtBL,OAECnF,kBAQPgE,EAAAC,cAAA,MAAA,CACE9F,UAAW,sBACXoH,MAAO5G,EAAoB2G,QAAanD,EACxC/D,MAAOiE,GACPnE,IAAKyD,IAIJ1B,GAAYpB,GAAmBkF,GAC/B/D"}

package/dist/index.umd.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@ohkit/utils"),require("@ohkit/measure")):"function"==typeof define&&define.amd?define(["exports","react","@ohkit/utils","@ohkit/measure"],t):t((e||self).textEllipsis={},e.react,e.utils,e.measure)}(this,function(e,t,n,i){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=/*#__PURE__*/o(t);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)({}).hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},s.apply(null,arguments)}var a=n.prefixClassname("ohkit-text-ellipsis__"),f=t.forwardRef(function(e,o){var f=e.className,r=e.lineHeight,u=void 0===r?"":r,d=e.lines,c=e.maskBgColor,h=void 0===c?"#fff":c,p=e.resetFoldWhenChildrenOrEllipsisChange,v=void 0!==p&&p,g=e.showTitleWhenFold,m=e.titleWhenFold,C=e.showFoldControl,b=void 0===C||C,x=e.foldText,E=void 0===x?"收起":x,w=e.unfoldText,y=void 0===w?"展开":w,F=e.uiType,k=void 0===F?"right":F,S=e.controlPlacement,R=void 0===S?"center":S,H=e.whiteSpace,M=e.renderFoldButton,O=e.onEllipsisChange,W=e.onFoldChange,N=e.onStatusChange,T=e.onMouseEnter,P=e.onMouseLeave,B=e.onPointerEnter,L=e.onPointerLeave,q=e.onClick,j=e.onFocus,A=e.content||e.children,_=t.useState(!1),z=_[0],V=_[1],D=t.useState(!1),G=D[0],I=D[1],J=n.useSyncPropsState(e,"fold",{defaultValue:!0,onChange:W}),K=J[0],Q=J[1],U=t.useState(1),X=U[0],Y=U[1],Z=t.useState("string"==typeof u&&u.endsWith("px")?parseFloat(u):0),$=Z[0],ee=Z[1],te=t.useState(d),ne=te[0],ie=void 0===ne?0:ne,oe=te[1],le=t.useState(""),se=le[0],ae=le[1],fe=n.useRuntime({inited:!1,contentOffsetHeight:0,ellipsis:z,defaultFold:K,fold:K,foldBtnWidth:X,textContent:se,onEllipsisChange:O,onFoldChange:W},["onEllipsisChange","fold","onFoldChange"])[0],re=t.useRef(null),ue=t.useRef(null),de=t.useRef(null),ce=t.useRef(null),he=t.useMemo(function(){return{lineHeight:G?"1.4":u||void 0}},[u,G]),pe=t.useMemo(function(){var e={whiteSpace:H};return z&&ie&&$?s({},e,{minHeight:K?(ie-.2)*$+"px":void 0,WebkitLineClamp:K?ie:void 0,paddingBottom:"bottom"!==k&&K?void 0:$+"px"}):e},[ie,$,z,K,k,H]),ve=t.useMemo(function(){if(K){var e=$,t="right"===k?Math.min(e/X*100,80):60;return{boxSizing:"content-box",height:$+"px",lineHeight:$+"px",paddingTop:"bottom"===k?e+"px":void 0,paddingLeft:"right"===k?e+"px":void 0,background:"linear-gradient(to "+k+", "+h+(4===h.length?"0":"00")+", "+h+" "+t+"%, "+h+" 100%)"}}},[$,h,K,k,X]),ge=t.useCallback(function(){re.current&&(re.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){re.current&&(re.current.style.width="100%")}))},[]),me=t.useCallback(function(e,t){void 0===t&&(t=!fe.fold),fe.fold=t,Q(t)},[]),Ce=t.useMemo(function(){/*#__PURE__*/return l.default.createElement("div",{className:n.classNames("btn-fold-wrapper","btn-fold-wrapper-"+k,"bottom"===k&&"placement-"+R),style:ve,ref:ce,onClick:me},M?M(K):/*#__PURE__*/l.default.createElement("div",{className:"btn-fold"},K?y:E))},[ve,K,E,me,M,R,k,y]),be=t.useCallback(function(e,t){void 0===e&&(e=fe.ellipsis);var n=(void 0===t?{}:t).forceResetFold,i=void 0!==n&&n,o=fe.ellipsis,l=fe.fold,s=fe.defaultFold;e!==o&&(V(e),fe.ellipsis=e,null==fe.onEllipsisChange||fe.onEllipsisChange(e)),v&&(i||!o&&e)&&l!==s&&me(void 0,s)},[me,A,v]),xe=t.useCallback(function(){var e=ue.current,t=de.current;if(e&&t){fe.contentOffsetHeight=e.offsetHeight;var n=0;if(!n&&e){var i=((null==window.getComputedStyle?void 0:window.getComputedStyle(e))||{}).lineHeight;i&&((n=parseFloat(i))||I(!0))}if($===n||(ee(n),n))if(d)ie!==d&&oe(d),be(fe.contentOffsetHeight>=(d+1)*n-1);else if(fe.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){var o=Math.floor(t.offsetHeight/n);ie!==o&&oe(o),be(!0)}else be(!1)}},[d,$,be]);n.useCompatibleEffect(function(){be(fe.ellipsis,{forceResetFold:!0}),xe()},[xe,be]),t.useEffect(function(){if(z&&ce.current){var e=ce.current.offsetWidth;e!==fe.foldBtnWidth&&(fe.foldBtnWidth=e,Y(e))}},[z,y,b]),t.useEffect(function(){n.isSafari&&ge()},[K,ge]);var Ee=t.useCallback(function(){var e,t=(null==(e=ue.current)?void 0:e.textContent)||"";t!==fe.textContent&&(fe.textContent=t,ae(t))},[]),we=t.useMemo(function(){return z&&K?"function"==typeof m?m(se):m||se:void 0},[m,z,K,se]);return t.useEffect(function(){fe.inited&&(null==N||N({ellipsis:z,fold:K,title:we}))},[N,K,z,we]),t.useEffect(function(){fe.inited=!0},[]),/*#__PURE__*/l.default.createElement("div",{className:n.classNames(a("container"),f),style:he,ref:function(e){n.assignRef(de,e),o&&n.assignRef(o,e)},onMouseEnter:T,onMouseLeave:P,onPointerEnter:B,onPointerLeave:L,onClick:q,onFocus:j},/*#__PURE__*/l.default.createElement(i.Measure,{offset:!0},function(e){var t=e.measureRef,i=(e.contentRect.offset||{}).height;return void 0!==i&&Math.abs(i-fe.contentOffsetHeight)>1&&xe(),/*#__PURE__*/l.default.createElement("div",{style:{whiteSpace:H},className:"offset-height-computer",ref:function(e){n.assignRef(t,e),n.assignRef(ue,e),Ee()}},A)}),/*#__PURE__*/l.default.createElement("div",{className:"text-ellipsis-inner",title:g?we:void 0,style:pe,ref:re},z&&b&&Ce,A))});e.TextEllipsis=f,e.c=a});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@ohkit/utils"),require("@ohkit/measure")):"function"==typeof define&&define.amd?define(["exports","react","@ohkit/utils","@ohkit/measure"],t):t((e||self).textEllipsis={},e.react,e.utils,e.measure)}(this,function(e,t,n,i){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=/*#__PURE__*/o(t);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)({}).hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},s.apply(null,arguments)}var a=n.prefixClassname("ohkit-text-ellipsis__"),r=t.forwardRef(function(e,o){var r=e.className,f=e.style,u=e.lineHeight,d=void 0===u?"":u,c=e.lines,h=e.maskBgColor,p=void 0===h?"#fff":h,g=e.resetFoldWhenChildrenOrEllipsisChange,v=void 0!==g&&g,m=e.showTitleWhenFold,C=e.titleWhenFold,x=e.showFoldControl,b=void 0===x||x,w=e.foldText,E=void 0===w?"收起":w,y=e.unfoldText,F=void 0===y?"展开":y,H=e.uiType,k=void 0===H?"right":H,M=e.truncateMode,S=void 0===M?"line":M,R=e.maxHeight,O=e.controlPlacement,T=void 0===O?"center":O,W=e.whiteSpace,N=e.width,B=e.renderFoldButton,P=e.onEllipsisChange,L=e.onFoldChange,q=e.onStatusChange,j=e.onMouseEnter,z=e.onMouseLeave,A=e.onPointerEnter,_=e.onPointerLeave,V=e.onClick,D=e.onFocus,G=e.content||e.children,I=t.useState(!1),J=I[0],K=I[1],Q=t.useState(!1),U=Q[0],X=Q[1],Y=n.useSyncPropsState(e,"fold",{defaultValue:!0,onChange:L}),Z=Y[0],$=Y[1],ee=t.useState(1),te=ee[0],ne=ee[1],ie=t.useState("string"==typeof d&&d.endsWith("px")?parseFloat(d):0),oe=ie[0],le=ie[1],se=t.useState(c),ae=se[0],re=void 0===ae?0:ae,fe=se[1],ue=t.useState(""),de=ue[0],ce=ue[1],he=n.useRuntime({inited:!1,contentOffsetHeight:0,containerContentHeight:0,ellipsis:J,defaultFold:Z,fold:Z,foldBtnWidth:te,textContent:de,onEllipsisChange:P,onFoldChange:L},["onEllipsisChange","fold","onFoldChange"])[0],pe=t.useRef(null),ge=t.useRef(null),ve=t.useRef(null),me=t.useRef(null),Ce=t.useMemo(function(){return s({lineHeight:U?"1.4":d||void 0},f)},[f,d,U]),xe=t.useMemo(function(){return{whiteSpace:W,width:N}},[W,N]),be=t.useMemo(function(){var e="height"===S;if(!J||!(e||re&&oe))return xe;var t=!b||"bottom"!==k&&Z?void 0:oe+"px";return s({},xe,{minHeight:!e&&Z?(re-.2)*oe+"px":void 0,WebkitLineClamp:e?void 0:Z?re:void 0,maxHeight:e&&Z?R||re*oe||he.containerContentHeight||0:void 0,paddingBottom:t,boxSizing:t?"border-box":void 0})},[re,oe,J,Z,b,k,S,R,xe]),we=t.useMemo(function(){if(Z){var e=oe,t="right"===k?Math.min(e/te*100,80):60;return{boxSizing:"content-box",height:oe+"px",lineHeight:oe+"px",paddingTop:"bottom"===k?e+"px":void 0,paddingLeft:"right"===k?e+"px":void 0,background:"linear-gradient(to "+k+", "+p+(4===p.length?"0":"00")+", "+p+" "+t+"%, "+p+" 100%)"}}},[oe,p,Z,k,te]),Ee=t.useCallback(function(){if(pe.current){var e=pe.current.style.width,t=window.getComputedStyle(pe.current).width;pe.current.style.width=parseFloat(t)-.1+"px",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){pe.current&&(pe.current.style.width=e)})}},[]),ye=t.useCallback(function(e,t){void 0===t&&(t=!he.fold),he.fold=t,$(t)},[]),Fe=t.useMemo(function(){/*#__PURE__*/return l.default.createElement("div",{className:n.classNames("btn-fold-wrapper","btn-fold-wrapper-"+k,"bottom"===k&&"placement-"+T),style:we,ref:me,onClick:ye},B?B(Z):/*#__PURE__*/l.default.createElement("div",{className:"btn-fold"},Z?F:E))},[we,Z,E,ye,B,T,k,F]),He=t.useCallback(function(e,t){void 0===e&&(e=he.ellipsis);var n=(void 0===t?{}:t).forceResetFold,i=void 0!==n&&n,o=he.ellipsis,l=he.fold,s=he.defaultFold;e!==o&&(K(e),he.ellipsis=e,null==he.onEllipsisChange||he.onEllipsisChange(e)),v&&(i||!o&&e)&&l!==s&&ye(void 0,s)},[ye,G,v]),ke=t.useCallback(function(){var e=ge.current,t=ve.current;if(e&&t){he.contentOffsetHeight=e.offsetHeight;var n=window.getComputedStyle(t),i=parseFloat(n.paddingTop),o=parseFloat(n.paddingBottom),l=he.containerContentHeight=t.clientHeight-i-o,s=0;if(!s&&e){var a=(n||{}).lineHeight;a&&((s=parseFloat(a))||X(!0))}if(oe===s||(le(s),s))if("height"===S)He(he.contentOffsetHeight>(R||l));else if(c)re!==c&&fe(c),He(he.contentOffsetHeight>=(c+1)*Math.floor(s)-1);else if(he.contentOffsetHeight>l){var r=Math.floor(l/s)||1;re!==r&&fe(r),He(!0)}else He(!1)}},[c,oe,S,R,He]);n.useCompatibleEffect(function(){He(he.ellipsis,{forceResetFold:!0}),ke()},[ke,He]),t.useEffect(function(){if(J&&me.current){var e=me.current.offsetWidth;e!==he.foldBtnWidth&&(he.foldBtnWidth=e,ne(e))}},[J,F,b]),t.useEffect(function(){n.isSafari&&Ee()},[Z,Ee]);var Me=t.useCallback(function(){var e,t=(null==(e=ge.current)?void 0:e.textContent)||"";t!==he.textContent&&(he.textContent=t,ce(t))},[]),Se=t.useMemo(function(){return J&&Z?"function"==typeof C?C(de):C||de:void 0},[C,J,Z,de]);return t.useEffect(function(){he.inited&&(null==q||q({ellipsis:J,fold:Z,title:Se}))},[q,Z,J,Se]),t.useEffect(function(){he.inited=!0},[]),/*#__PURE__*/l.default.createElement("div",{className:n.classNames(a("container"),r),style:Ce,ref:function(e){n.assignRef(ve,e),o&&n.assignRef(o,e)},onMouseEnter:j,onMouseLeave:z,onPointerEnter:A,onPointerLeave:_,onClick:V,onFocus:D},/*#__PURE__*/l.default.createElement(i.Measure,{offset:!0},function(e){var t=e.measureRef,i=(e.contentRect.offset||{}).height;return void 0!==i&&Math.abs(i-he.contentOffsetHeight)>1&&ke(),/*#__PURE__*/l.default.createElement("div",{style:xe,className:"content-shadow-dom",ref:function(e){n.assignRef(t,e),n.assignRef(ge,e),Me()}},G)}),/*#__PURE__*/l.default.createElement("div",{className:"text-ellipsis-inner",title:m?Se:void 0,style:be,ref:pe},J&&b&&Fe,G))});e.TextEllipsis=r,e.c=a});
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0,\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n };\n }, [lineHeight, getLineHeightFail]);\n\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const commonStyle = {\n whiteSpace\n }; \n if (!ellipsis \|\| !lines \|\| !innerLineHeight) {\n return commonStyle;\n }\n return {\n ...commonStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" \|\| !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n let realLineHeight = 0;\n\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const realStyle = window.getComputedStyle?.(wrapDom);\n const { lineHeight } = realStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth, offsetHeight} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$controlPlaceme","controlPlacement","whiteSpace","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","commonStyle","_extends","minHeight","WebkitLineClamp","paddingBottom","btnStyle","padding","ratio","Math","min","boxSizing","height","paddingTop","paddingLeft","background","transparent","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","classNames","resetState","newEllipsis","_temp","_ref","_ref$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","getComputedStyle","adjustLines","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","_ref3","measureRef","contentRect","abs"],"mappings":"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"}
1	+ {"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["/*\n @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n /\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n \| \"onMouseEnter\"\n \| \"onMouseLeave\"\n \| \"onPointerEnter\"\n \| \"onPointerLeave\"\n \| \"onFocus\"\n \| \"onClick\"\n > {\n /\n 自定义样式类名，会附加到根元素上\n /\n className?: string;\n /\n 自定义样式\n /\n style?: React.CSSProperties;\n /\n right \| bottom 展开按钮在右下侧还是底部\n * @default right\n /\n uiType?: \"right\" \| \"bottom\";\n /\n 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)\n * @default line\n /\n truncateMode?: \"line\" \| \"height\";\n /\n truncateMode === \"height\" 时生效\n * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效自动截断到容器的最大高度\n * 单位: px\n /\n maxHeight?: number;\n /\n （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n /\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /\n truncateMode === \"line\" 时生效\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n /\n lines?: number;\n /\n 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n /\n maskBgColor?: string;\n /\n text｜ReactNode 与children任传一个\n /\n content?: React.ReactNode;\n /\n 当 content or children or ellipsis 变化时，重置 fold 状态 \n * @default false\n /\n resetFoldWhenChildrenOrEllipsisChange?: boolean;\n /\n 折叠状态\n * @default true\n /\n fold?: boolean;\n /\n 显示展开控制按钮\n * @default true\n /\n showFoldControl?: boolean;\n /\n 展开按钮位置 uiType='bottom'时有效\n * @default center\n /\n controlPlacement?: 'left' \| 'center' \| 'right';\n /\n 展开按钮文字\n * @default 收起\n /\n foldText?: string;\n /\n 展开按钮文字\n * @default 展开\n /\n unfoldText?: string;\n /\n 折叠状态下是否显示title属性\n * @default false\n /\n showTitleWhenFold?: boolean;\n /\n 折叠状态自定义title属性内容\n /\n titleWhenFold?: string \| ((title: string) => string);\n /\n 是否保留换行\n /\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /\n 容器宽度（默认自适应内容）\n * 应用场景：whiteSpace='pre' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定\n /\n width?: React.CSSProperties['width'];\n /*\n 自定义渲染展开按钮\n /\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /\n @param fold 折叠状态，true 折叠，false 展开\n /\n onFoldChange?: (fold: boolean) => void;\n /\n @param ellipsis 是否截断，true 截断，false 未截断\n /\n onEllipsisChange?: (ellipsis: boolean) => void;\n /\n 关键状态变更触发\n * @param status\n /\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n style,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n resetFoldWhenChildrenOrEllipsisChange = false,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n truncateMode = \"line\",\n maxHeight,\n controlPlacement = 'center',\n whiteSpace,\n width,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n const finalContent = content \|\| children;\n // 是否截断\n const [ellipsis, setEllipsis] = useState(false);\n const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n // 折叠状态\n const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n const [innerLineHeight, setInnerLineHeight] = useState(\n typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n ? parseFloat(lineHeight)\n : 0\n );\n const [innerLines = 0, setInnerLines] = useState(lines);\n // children提取的纯文本\n const [textContent, setTextContent] = useState('');\n\n const [runtime] = useRuntime({\n inited: false, // mounted\n contentOffsetHeight: 0, // 内容节点offsetHeight\n containerContentHeight: 0, // 容器内容高度 = 容器高 - 上下padding\n ellipsis,\n defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n fold,\n foldBtnWidth,\n textContent,\n onEllipsisChange,\n onFoldChange,\n }, ['onEllipsisChange', 'fold', 'onFoldChange']);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n const containerStyle = useMemo(() => {\n return {\n lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n ? \"1.4\" // more brower normal default lineHeight\n : lineHeight ? lineHeight : undefined,\n ...style,\n };\n }, [style, lineHeight, getLineHeightFail]);\n\n const commonWrapStyle = useMemo(() => {\n return {\n whiteSpace,\n width,\n };\n }, [whiteSpace, width])\n // 容器样式\n const wrapStyle = useMemo(() => {\n const lines = innerLines;\n const isHeightMode = truncateMode === 'height';\n if (!ellipsis \|\| !isHeightMode && (!lines \|\| !innerLineHeight)) {\n return commonWrapStyle;\n }\n const paddingBottom = showFoldControl && (uiType === \"bottom\" \|\| !fold) ? `${innerLineHeight}px` : undefined;\n return {\n ...commonWrapStyle,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: !isHeightMode && fold ? `${(lines - 0.2) innerLineHeight}px` : undefined,\n // Note: safari 对WebkitLineClamp支持太差劲判断浏览器优雅降级为高度截断方案？目前先交给用户去判断，自行选择truncateMode\n // WebkitLineClamp: isSafari ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && fold ? lines * innerLineHeight : undefined,\n WebkitLineClamp: isHeightMode ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n maxHeight: isHeightMode && fold ? (maxHeight \|\| lines * innerLineHeight \|\| runtime.containerContentHeight \|\| 0) : undefined,\n paddingBottom,\n boxSizing: paddingBottom ? 'border-box' as const : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, showFoldControl, uiType, truncateMode, maxHeight, commonWrapStyle]);\n\n // 展开｜收起按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // Note: safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n const orginStyleWidth = contentRef.current.style.width;\n const orginWidth = window.getComputedStyle(contentRef.current).width;\n // console.log('orginWidth, orginStyleWidth:', orginWidth, orginStyleWidth);\n contentRef.current.style.width = `${parseFloat(orginWidth) - 0.1}px`;\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = orginStyleWidth;\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n forceResetFold = false, // 强制重置fold 比如child变化时\n } = {}) => {\n const {ellipsis, fold: preFold, defaultFold} = runtime;\n if (newEllipsis !== ellipsis) {\n setEllipsis(newEllipsis);\n runtime.ellipsis = newEllipsis;\n runtime.onEllipsisChange?.(newEllipsis);\n }\n // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n if (\n resetFoldWhenChildrenOrEllipsisChange\n && (forceResetFold \|\| !ellipsis && newEllipsis)\n && preFold !== defaultFold\n ) {\n handleFoldChange(undefined, defaultFold);\n }\n }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n const calcEllipsis = useCallback(() => {\n const wrapDom = wrapperRef.current;\n const containerDom = containerRef.current;\n if (!wrapDom \|\| !containerDom) {\n return;\n }\n runtime.contentOffsetHeight = wrapDom.offsetHeight;\n const containerStyle = window.getComputedStyle(containerDom);\n const paddingTop = parseFloat(containerStyle.paddingTop);\n const paddingBottom = parseFloat(containerStyle.paddingBottom);\n const containerContentHeight = runtime.containerContentHeight = containerDom.clientHeight - paddingTop - paddingBottom;\n\n // 计算真实行高\n let realLineHeight = 0;\n // 若外部未传入, 尝试读取当前文本的行高。\n if (!realLineHeight && wrapDom) {\n const {lineHeight} = containerStyle \|\| {};\n if (lineHeight) {\n // 未设置行高的为 normal\n realLineHeight = parseFloat(lineHeight);\n if (!realLineHeight) {\n setGetLineHeightFail(true);\n }\n }\n }\n // lineHeight同步到innerLineHeight\n if (innerLineHeight !== realLineHeight) {\n setInnerLineHeight(realLineHeight);\n if (!realLineHeight) {\n return;\n }\n }\n\n const isHeightMode = truncateMode === 'height';\n // 高度截断模式，比较简单直接判断是否超出容器高度\n if (isHeightMode) {\n resetState(runtime.contentOffsetHeight > (maxHeight \|\| containerContentHeight));\n return;\n }\n\n // 行数截断模式，需要利用行高计算是否超出容器高度\n if (!lines) {\n if (runtime.contentOffsetHeight > containerContentHeight) {\n const adjustLines = Math.floor(containerContentHeight / realLineHeight) \|\| 1;\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // console.log('contentOffsetHeight, realLineHeight', runtime.contentOffsetHeight, realLineHeight);\n // 允许误差1px（行高为小数时, safari计算行高行数和实践总高有差异，故将行高向下取整兼容）\n resetState(runtime.contentOffsetHeight >= (lines + 1) Math.floor(realLineHeight) - 1);\n }\n }, [lines, innerLineHeight, truncateMode, maxHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState(runtime.ellipsis, {\n forceResetFold: true,\n });\n calcEllipsis();\n }, [calcEllipsis, resetState]);\n\n // 监听\"展开\"按钮宽度变化\n useEffect(() => {\n if (ellipsis && btnWrapperRef.current) {\n const {offsetWidth} = btnWrapperRef.current;\n if (offsetWidth !== runtime.foldBtnWidth) {\n runtime.foldBtnWidth = offsetWidth;\n setFoldBtnWidth(offsetWidth);\n }\n }\n }, [ellipsis, unfoldText, showFoldControl]);\n useEffect(() => {\n if (isSafari) {\n reorganizeDom();\n }\n }, [fold, reorganizeDom]);\n const updateTextContent = useCallback(() => {\n const newTextContent = wrapperRef.current?.textContent \|\| '';\n if (newTextContent !== runtime.textContent) {\n runtime.textContent = newTextContent;\n setTextContent(newTextContent);\n }\n }, []);\n const hoverTitle = useMemo(() => {\n return ellipsis && fold\n ? (typeof titleWhenFold === 'function'\n ? titleWhenFold(textContent)\n : titleWhenFold \|\| textContent)\n : undefined;\n }, [titleWhenFold, ellipsis, fold, textContent]);\n useEffect(() => {\n if (runtime.inited) { \n onStatusChange?.({\n ellipsis,\n fold,\n title: hoverTitle\n });\n }\n }, [onStatusChange, fold, ellipsis, hoverTitle]);\n useEffect(() => {\n runtime.inited = true;\n }, []);\n // 高度自适应，容器高度变化时重新计算高度(容器也需要包装Measure，TODO: 待开发 hooks -> useMeasure, 使得观测dom尺寸的方式更简洁)\n // if (!maxHeight && !lines) {\n // calcEllipsis();\n // }\n // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n return (\n <div\n className={cx(c(\"container\"), className)}\n style={containerStyle}\n ref={(r) => {\n assignRef(containerRef, r);\n ref && assignRef(ref, r);\n }}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerEnter={onPointerEnter}\n onPointerLeave={onPointerLeave}\n onClick={onClick}\n onFocus={onFocus}\n >\n {/* 此dom仅用于计算高度用.text-ellipsis-inner计算在不重新初始化情况下切换文本时高度计算有问题 /}\n <Measure offset>\n {({measureRef, contentRect}) => {\n // console.log('contentRect:', contentRect.offset?.height, runtime.contentOffsetHeight);\n const {height} = contentRect.offset \|\| {};\n if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n calcEllipsis();\n }\n return <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/ <div className={\"content-shadow-dom\"} ref={wrapperRef}>\n {finalContent}\n </div> /}\n {/ 主文本显示 /}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/ {finalContent} /}\n {/ firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","prefixClassname","TextEllipsis","forwardRef","props","ref","className","style","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$truncateMode","truncateMode","maxHeight","_props$controlPlaceme","controlPlacement","whiteSpace","width","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","containerContentHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","_extends","undefined","commonWrapStyle","wrapStyle","isHeightMode","paddingBottom","minHeight","WebkitLineClamp","boxSizing","btnStyle","padding","ratio","Math","min","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","orginStyleWidth","orginWidth","window","getComputedStyle","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","classNames","resetState","newEllipsis","_temp","_ref","_ref$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","clientHeight","realLineHeight","floor","adjustLines","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","hoverTitle","title","r","assignRef","Measure","offset","_ref3","measureRef","contentRect","abs"],"mappings":"yqBA4Ba,IAAAA,EAAIC,EAACC,gBAAC,yBA+HNC,EAAeC,EAAAA,WAA8C,SAACC,EAAOC,GAChF,IACEC,EA6BEF,EA7BFE,UACAC,EA4BEH,EA5BFG,MAAKC,EA4BHJ,EA3BFK,WAAAA,OAAU,IAAAD,EAAG,GAAEA,EACfE,EA0BEN,EA1BFM,MAAKC,EA0BHP,EAzBFQ,YAAAA,OAAW,IAAAD,EAAG,OAAMA,EAEZE,EAuBNT,EAtBFU,sCAAAA,OAAwC,IAAHD,GAAQA,EAC7CE,EAqBEX,EArBFW,kBACAC,EAoBEZ,EApBFY,cAAaC,EAoBXb,EAnBFc,gBAAAA,OAAe,IAAAD,GAAOA,EAAAE,EAmBpBf,EAlBFgB,SAAAA,OAAQ,IAAAD,EAAG,KAAIA,EAAAE,EAkBbjB,EAjBFkB,WAAAA,OAAa,IAAHD,EAAG,KAAIA,EAAAE,EAiBfnB,EAhBFoB,OAAAA,OAAS,IAAHD,EAAG,QAAOA,EAAAE,EAgBdrB,EAfFsB,aAAAA,OAAe,IAAHD,EAAG,OAAMA,EACrBE,EAcEvB,EAdFuB,UAASC,EAcPxB,EAbFyB,iBAAAA,OAAmB,IAAHD,EAAG,SAAQA,EAC3BE,EAYE1B,EAZF0B,WACAC,EAWE3B,EAXF2B,MACAC,EAUE5B,EAVF4B,iBACAC,EASE7B,EATF6B,iBACAC,EAQE9B,EARF8B,aACAC,EAOE/B,EAPF+B,eACAC,EAMEhC,EANFgC,aACAC,EAKEjC,EALFiC,aACAC,EAIElC,EAJFkC,eACAC,EAGEnC,EAHFmC,eACAC,EAEEpC,EAFFoC,QACAC,EACErC,EADFqC,QAEIC,EADFtC,EAxBFuC,SAwBEvC,EAvBFwC,SA0BFC,EAAgCC,EAAQA,UAAC,GAAlCC,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GAC5BI,EAAkDH,EAAQA,UAAC,GAApDI,EAAiBD,EAAA,GAAEE,EAAoBF,EAAA,GAE9CG,EAAwBC,EAAiBA,kBAACjD,EAAO,OAAQ,CAACkD,cAAc,EAAMC,SAAUrB,IAAjFsB,EAAIJ,EAAEK,GAAAA,EAAOL,EACpB,GAAAM,GAAwCZ,EAAQA,SAAC,GAA1Ca,GAAYD,GAAEE,GAAAA,GAAeF,GACpC,GAAAG,GAA8Cf,EAAAA,SACtB,iBAAfrC,GAA2BA,EAAWqD,SAAS,MAClDC,WAAWtD,GACX,GAHCuD,GAAeH,GAAA,GAAEI,GAAkBJ,GAK1C,GAAAK,GAAwCpB,EAAQA,SAACpC,GAAMyD,GAAAD,GAAhDE,GAAAA,QAAa,IAAHD,GAAG,EAACA,GAAEE,GAAaH,GAEpC,GAAAI,GAAsCxB,EAAAA,SAAS,IAAxCyB,GAAWD,GAAEE,GAAAA,GAAcF,GAElC,GAAOG,GAAWC,EAAAA,WAAW,CAC3BC,QAAQ,EACRC,oBAAqB,EACrBC,uBAAwB,EACxB9B,SAAAA,EACA+B,YAAatB,EACbA,KAAAA,EACAG,aAAAA,GACAY,YAAAA,GACAtC,iBAAAA,EACAC,aAAAA,GACC,CAAC,mBAAoB,OAAQ,iBAEhC,GAAM6C,GAAaC,EAAAA,OAAuB,MACpCC,GAAaD,EAAAA,OAAuB,MACpCE,GAAeF,EAAAA,OAAuB,MACtCG,GAAgBH,EAAAA,OAAuB,MAEvCI,GAAiBC,EAAAA,QAAQ,WAC7B,OAAAC,EACE7E,CAAAA,WAAYyC,EACR,MACAzC,QAA0B8E,GAC3BhF,EAEP,EAAG,CAACA,EAAOE,EAAYyC,IAEjBsC,GAAkBH,EAAOA,QAAC,WAC9B,MAAO,CACLvD,WAAAA,EACAC,MAAAA,EAEJ,EAAG,CAACD,EAAYC,IAEV0D,GAAYJ,EAAOA,QAAC,WACxB,IACMK,EAAgC,WAAjBhE,EACrB,IAAKqB,KAAa2C,GAFJtB,IAEgCJ,IAC5C,OAAOwB,GAET,IAAMG,GAAgBzE,GAA+B,WAAXM,GAAwBgC,OAAiC+B,EAAtBvB,GAAsBuB,KACnG,OAAAD,EAAA,CAAA,EACKE,GAAe,CAElBI,WAAYF,GAAgBlC,GAThBY,GASmC,IAAOJ,GAAe,UAAOuB,EAI5EM,gBAAiBH,OAAeH,EAAY/B,EAbhCY,QAa+CmB,EAC3D5D,UAAW+D,GAAgBlC,EAAQ7B,GAdvByC,GAc4CJ,IAAmBS,GAAQI,wBAA0B,OAAKU,EAClHI,cAAAA,EACAG,UAAWH,EAAgB,kBAAwBJ,GAEvD,EAAG,CAACnB,GAAYJ,GAAiBjB,EAAUS,EAAMtC,EAAiBM,EAAQE,EAAcC,EAAW6D,KAG7FO,GAAWV,EAAAA,QAAQ,WACvB,GAAK7B,EAAL,CAIA,IAAMwC,EAAUhC,GAEViC,EAAmB,UAAXzE,EAAqB0E,KAAKC,IAAKH,EAAUrC,GAAgB,IAAK,IAAM,GAKlF,MAAO,CACLmC,UAAW,cACXM,OAAWpC,GAAmB,KAC9BvD,WAAeuD,GAAe,KAC9BqC,WAAuB,WAAX7E,EAAyBwE,EAAcT,UAAAA,EACnDe,YAAwB,UAAX9E,EAAwBwE,EAAO,UAAOT,EAEnDgB,WAAU,sBAAwB/E,EAAM,KAVnBZ,GACE,IAAvBA,EAAY4F,OAAe,IAAM,MASuB,KAAK5F,EAAW,IAAIqF,EAAK,MAAMrF,EAAW,SAhBnG,CAkBH,EAAG,CAACoD,GAAiBpD,EAAa4C,EAAMhC,EAAQmC,KAE1C8C,GAAgBC,EAAWA,YAAC,WAEhC,GAAI3B,GAAW4B,QAAS,CACtB,IAAMC,EAAkB7B,GAAW4B,QAAQpG,MAAMwB,MAC3C8E,EAAaC,OAAOC,iBAAiBhC,GAAW4B,SAAS5E,MAE/DgD,GAAW4B,QAAQpG,MAAMwB,MAAWgC,WAAW8C,GAAc,GAAO,KACxC,MAA5BC,OAAOE,uBAAPF,OAAOE,sBAAwB,WACzBjC,GAAW4B,UACb5B,GAAW4B,QAAQpG,MAAMwB,MAAQ6E,EAErC,EACD,CACH,EAAG,IAEGK,GAAmBP,EAAWA,YAClC,SAACQ,EAAkC1D,QAAAA,IAAAA,IAAAA,GAAQiB,GAAQjB,MACjDiB,GAAQjB,KAAOA,EACfC,EAAQD,EACZ,EAAG,IAEG2D,GAAa9B,EAAOA,QAAC,wBACzB,OACE+B,EAAAA,QAAAC,cACE/G,MAAAA,CAAAA,UAAWgH,EAAEC,WACX,mBACoB/F,oBAAAA,EACT,WAAXA,GAAoCK,aAAAA,GAEtCtB,MAAOwF,GACP1F,IAAK8E,GACL3C,QAASyE,IAERjF,EACCA,EAAiBwB,gBAEjB4D,EAAAA,QAAAC,cAAA,MAAA,CAAK/G,UAAW,YAAakD,EAAOlC,EAAaF,GAIzD,EAAG,CACD2E,GACAvC,EACApC,EACA6F,GACAjF,EACAH,EACAL,EACAF,IAIIkG,GAAad,EAAWA,YAAC,SAACe,EAAWC,QAAXD,IAAAA,IAAAA,EAAchD,GAAQ1B,UAAQ4E,IAExDC,QAAF,IAF0DF,EAE1D,CAAA,EAAEA,GADJG,eAAAA,OAAiB,IAAHD,GAAQA,EAEf7E,EAAwC0B,GAAxC1B,SAAgB+E,EAAwBrD,GAA9BjB,KAAesB,EAAeL,GAAfK,YAC5B2C,IAAgB1E,IAClBC,EAAYyE,GACZhD,GAAQ1B,SAAW0E,EACnBhD,MAAAA,GAAQxC,kBAARwC,GAAQxC,iBAAmBwF,IAI3B3G,IACI+G,IAAoB9E,GAAY0E,IACjCK,IAAYhD,GAEfmC,QAAiB1B,EAAWT,EAEhC,EAAG,CAACmC,GAAkBvE,EAAc5B,IAE9BiH,GAAerB,EAAAA,YAAY,WAC/B,IAAMsB,EAAU/C,GAAW0B,QACrBsB,EAAe/C,GAAayB,QAClC,GAAKqB,GAAYC,EAAjB,CAGAxD,GAAQG,oBAAsBoD,EAAQE,aACtC,IAAM9C,EAAiB0B,OAAOC,iBAAiBkB,GACzC5B,EAAatC,WAAWqB,EAAeiB,YACvCV,EAAgB5B,WAAWqB,EAAeO,eAC1Cd,EAAyBJ,GAAQI,uBAAyBoD,EAAaE,aAAe9B,EAAaV,EAGrGyC,EAAiB,EAErB,IAAKA,GAAkBJ,EAAS,CAC9B,IAAOvH,GAAc2E,GAAkB,CAAA,GAAhC3E,WACHA,KAEF2H,EAAiBrE,WAAWtD,KAE1B0C,GAAqB,GAG1B,CAED,GAAIa,KAAoBoE,IACtBnE,GAAmBmE,GACdA,GAOP,GAFsC,WAAjB1G,EAGnB8F,GAAW/C,GAAQG,qBAAuBjD,GAAakD,SAKzD,GAAKnE,EAWC0D,KAAe1D,GACjB2D,GAAc3D,GAId8G,GAAW/C,GAAQG,sBAAwBlE,EAAQ,GAAKwF,KAAKmC,MAAMD,GAAkB,QAfvF,GAAI3D,GAAQG,oBAAsBC,EAAwB,CACtD,IAAMyD,EAAcpC,KAAKmC,MAAMxD,EAAyBuD,IAAmB,EACvEhE,KAAekE,GACjBjE,GAAciE,GAEhBd,IAAW,EACd,MACCA,IAAW,EA5Cd,CAsDH,EAAG,CAAC9G,EAAOsD,GAAiBtC,EAAcC,EAAW6F,KAIrDe,EAAmBA,oBAAC,WAClBf,GAAW/C,GAAQ1B,SAAU,CAC3B8E,gBAAgB,IAElBE,IACF,EAAG,CAACA,GAAcP,KAGlBgB,EAASA,UAAC,WACR,GAAIzF,GAAYoC,GAAcwB,QAAS,CACrC,IAAO8B,EAAetD,GAAcwB,QAA7B8B,YACHA,IAAgBhE,GAAQd,eAC1Bc,GAAQd,aAAe8E,EACvB7E,GAAgB6E,GAEnB,CACH,EAAG,CAAC1F,EAAUzB,EAAYJ,IAC1BsH,EAASA,UAAC,WACJE,EAAAA,UACFjC,IAEJ,EAAG,CAACjD,EAAMiD,KACV,IAAMkC,GAAoBjC,EAAAA,YAAY,WAAK,IAAAkC,EACnCC,GAAiBD,OAAAA,EAAA3D,GAAW0B,cAAXiC,EAAAA,EAAoBrE,cAAe,GACtDsE,IAAmBpE,GAAQF,cAC7BE,GAAQF,YAAcsE,EACtBrE,GAAeqE,GAEnB,EAAG,IACGC,GAAazD,EAAAA,QAAQ,WACvB,OAAOtC,GAAYS,EACW,mBAAlBxC,EACNA,EAAcuD,IACdvD,GAAiBuD,QACnBgB,CACR,EAAG,CAACvE,EAAe+B,EAAUS,EAAMe,KAkBnC,OAjBAiE,EAASA,UAAC,WACJ/D,GAAQE,SACI,MAAdxC,GAAAA,EAAiB,CACbY,SAAAA,EACAS,KAAAA,EACAuF,MAAOD,KAGf,EAAG,CAAC3G,EAAgBqB,EAAMT,EAAU+F,KACpCN,EAAAA,UAAU,WACR/D,GAAQE,QAAS,CACnB,EAAG,iBAODyC,EAAA,QAAAC,cACE/G,MAAAA,CAAAA,UAAWgH,EAAAA,WAAGvH,EAAE,aAAcO,GAC9BC,MAAO6E,GACP/E,IAAK,SAAC2I,GACJC,EAAAA,UAAU/D,GAAc8D,GACxB3I,GAAO4I,EAASA,UAAC5I,EAAK2I,EACxB,EACA5G,aAAcA,EACdC,aAAcA,EACdC,eAAgBA,EAChBC,eAAgBA,EAChBC,QAASA,EACTC,QAASA,gBAGT2E,EAAAA,QAAAC,cAAC6B,EAAAA,QAAO,CAACC,QAAM,GACZ,SAAAC,GAA8B,IAA5BC,EAAUD,EAAVC,WAEMjD,GAFiBgD,EAAXE,YAEgBH,QAAU,CAAE,GAAlC/C,OAIP,YAHeb,IAAXa,GAAwBF,KAAKqD,IAAInD,EAAS3B,GAAQG,qBAAuB,GAC3EmD,kBAEKX,EAAAA,QAAAC,cAAA,MAAA,CAAK9G,MAAOiF,GAAiBlF,UAAW,qBAAsBD,IAAK,SAAC2I,GACzEC,EAASA,UAACI,EAAYL,GACtBC,EAAAA,UAAUhE,GAAY+D,GACtBL,IACF,GACGjG,EAEL,gBAMF0E,EAAA,QAAAC,cAAA,MAAA,CACE/G,UAAW,sBACXyI,MAAOhI,EAAoB+H,QAAavD,EACxChF,MAAOkF,GACPpF,IAAK0E,IAIJhC,GAAY7B,GAAmBiG,GAC/BzE,GAIT"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -4,24 +4,40 @@
  * @author <wuqiuyang305@126.com>
  */
 import React, { PropsWithChildren } from "react";
-import "./style.scss";
 import { classNames as cx } from "@ohkit/utils";
+import "./style.scss";
 export declare const c: (...arg: cx.ArgumentArray) => string;
 interface ITextEllipsis extends Pick<React.DOMAttributes<HTMLDivElement>, "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onFocus" | "onClick"> {
+    /**
+     * 自定义样式类名，会附加到根元素上
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
     /**
      * right | bottom 展开按钮在右下侧还是底部
      * @default right
      */
     uiType?: "right" | "bottom";
     /**
-     * 自定义样式类名，会附加到根元素上
+     * 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)
+     * @default line
      */
-    className?: string;
+    truncateMode?: "line" | "height";
+    /**
+     * truncateMode === "height" 时生效
+     * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效 自动截断到容器的最大高度
+     * 单位: px
+     */
+    maxHeight?: number;
     /**
      * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高
      */
     lineHeight?: React.CSSProperties["lineHeight"];
     /**
+     * truncateMode === "line" 时生效
      * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度
      */
     lines?: number;
@@ -77,6 +93,11 @@ interface ITextEllipsis extends Pick<React.DOMAttributes<HTMLDivElement>, "onMou
      * 是否保留换行
      */
     whiteSpace?: React.CSSProperties['whiteSpace'];
+    /**
+     * 容器宽度（默认自适应内容）
+     * 应用场景：whiteSpace='pre*' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定
+     */
+    width?: React.CSSProperties['width'];
     /**
      * 自定义渲染展开按钮
      */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ohkit/text-ellipsis",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "text ellipsis for react",
   "keywords": [
     "text ellipsis"
@@ -32,7 +32,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@ohkit/measure": "0.0.3-alpha.0",
+    "@ohkit/measure": "0.0.3",
     "@ohkit/utils": "0.0.3"
   },
   "devDependencies": {
@@ -43,5 +43,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "5994f58ae88f5d2a80c0208b16859031fb6dad3d"
+  "gitHead": "0b9cb51d650f932fca8d4365dad030951ee84cdf"
 }

package/src/index.tsx CHANGED Viewed

@@ -14,7 +14,6 @@ import React, {
   PropsWithChildren,
   MouseEvent,
 } from "react";
-import "./style.scss";
 import {
   isSafari,
   prefixClassname as p,
@@ -25,6 +24,7 @@ import {
   useSyncPropsState,
 } from "@ohkit/utils";
 import { Measure } from "@ohkit/measure";
+import "./style.scss";
 export const c = p("ohkit-text-ellipsis__");
@@ -38,20 +38,36 @@ interface ITextEllipsis
     | "onFocus"
     | "onClick"
   > {
+  /**
+   * 自定义样式类名，会附加到根元素上
+   */
+  className?: string;
+  /**
+   * 自定义样式
+   */
+  style?: React.CSSProperties;
   /**
    * right | bottom 展开按钮在右下侧还是底部
    * @default right
    */
   uiType?: "right" | "bottom";
   /**
-   * 自定义样式类名，会附加到根元素上
+   * 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)
+   * @default line
    */
-  className?: string;
+  truncateMode?: "line" | "height";
+  /**
+   * truncateMode === "height" 时生效
+   * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效 自动截断到容器的最大高度
+   * 单位: px
+   */
+  maxHeight?: number;
   /**
    * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高
    */
   lineHeight?: React.CSSProperties["lineHeight"];
   /**
+   * truncateMode === "line" 时生效
    * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度
    */
   lines?: number;
@@ -107,6 +123,11 @@ interface ITextEllipsis
    * 是否保留换行
    */
   whiteSpace?: React.CSSProperties['whiteSpace'];
+  /**
+   * 容器宽度（默认自适应内容）
+   * 应用场景：whiteSpace='pre*' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定
+   */
+  width?: React.CSSProperties['width'];
   /**
    * 自定义渲染展开按钮
    */
@@ -135,6 +156,7 @@ export type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;
 export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {
   const {
     className,
+    style,
     lineHeight = "",
     lines,
     maskBgColor = "#fff",
@@ -147,8 +169,11 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
     foldText = "收起",
     unfoldText = "展开",
     uiType = "right",
+    truncateMode = "line",
+    maxHeight,
     controlPlacement = 'center',
     whiteSpace,
+    width,
     renderFoldButton,
     onEllipsisChange,
     onFoldChange,
@@ -178,7 +203,8 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
   const [runtime] = useRuntime({
     inited: false, // mounted
-    contentOffsetHeight: 0,
+    contentOffsetHeight: 0, // 内容节点offsetHeight
+    containerContentHeight: 0, // 容器内容高度 = 容器高 - 上下padding
     ellipsis,
     defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold
     fold,
@@ -198,30 +224,37 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
       lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)
         ? "1.4" // more brower normal default lineHeight
         : lineHeight ? lineHeight : undefined,
+      ...style,
     };
-  }, [lineHeight, getLineHeightFail]);
+  }, [style, lineHeight, getLineHeightFail]);
+  const commonWrapStyle = useMemo(() => {
+    return {
+      whiteSpace,
+      width,
+    };
+  }, [whiteSpace, width])
   // 容器样式
   const wrapStyle = useMemo(() => {
     const lines = innerLines;
-    const commonStyle = {
-      whiteSpace
-    };
-    if (!ellipsis || !lines || !innerLineHeight) {
-      return commonStyle;
+    const isHeightMode = truncateMode === 'height';
+    if (!ellipsis || !isHeightMode && (!lines || !innerLineHeight)) {
+      return commonWrapStyle;
     }
+    const paddingBottom = showFoldControl && (uiType === "bottom" || !fold) ? `${innerLineHeight}px` : undefined;
     return {
-      ...commonStyle,
+      ...commonWrapStyle,
       // HACK: 兼容safari 15+ 富文本折叠高度丢失问题
-      minHeight: fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,
-      WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案
-      // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案
-      // WebkitLineClamp: isSafari ? undefined :  ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案
-      // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,
-      paddingBottom:
-        uiType === "bottom" || !fold ? `${innerLineHeight}px` : undefined,
+      minHeight: !isHeightMode && fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,
+      // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案？目前先交给用户去判断，自行选择truncateMode
+      // WebkitLineClamp: isSafari ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案
+      // maxHeight: isSafari && fold ? lines * innerLineHeight : undefined,
+      WebkitLineClamp: isHeightMode ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案
+      maxHeight: isHeightMode && fold ? (maxHeight || lines * innerLineHeight || runtime.containerContentHeight || 0) : undefined,
+      paddingBottom,
+      boxSizing: paddingBottom ? 'border-box' as const : undefined,
     };
-  }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);
+  }, [innerLines, innerLineHeight, ellipsis, fold, showFoldControl, uiType, truncateMode, maxHeight, commonWrapStyle]);
   // 展开｜收起 按钮样式
   const btnStyle = useMemo(() => {
@@ -248,12 +281,15 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
   }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);
   const reorganizeDom = useCallback(() => {
-    // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发
+    // Note: safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发
     if (contentRef.current) {
-      contentRef.current.style.width = "99.999%";
+      const orginStyleWidth = contentRef.current.style.width;
+      const orginWidth = window.getComputedStyle(contentRef.current).width;
+      // console.log('orginWidth, orginStyleWidth:', orginWidth, orginStyleWidth);
+      contentRef.current.style.width = `${parseFloat(orginWidth) - 0.1}px`;
       window.requestAnimationFrame?.(() => {
         if (contentRef.current) {
-          contentRef.current.style.width = "100%";
+          contentRef.current.style.width = orginStyleWidth;
         }
       });
     }
@@ -322,12 +358,16 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
       return;
     }
     runtime.contentOffsetHeight = wrapDom.offsetHeight;
-    let realLineHeight = 0;
+    const containerStyle = window.getComputedStyle(containerDom);
+    const paddingTop = parseFloat(containerStyle.paddingTop);
+    const paddingBottom = parseFloat(containerStyle.paddingBottom);
+    const containerContentHeight = runtime.containerContentHeight = containerDom.clientHeight - paddingTop - paddingBottom;
+    // 计算真实行高
+    let realLineHeight = 0;
     // 若外部未传入, 尝试读取当前文本的行高。
     if (!realLineHeight && wrapDom) {
-      const realStyle = window.getComputedStyle?.(wrapDom);
-      const { lineHeight } = realStyle || {};
+      const {lineHeight} = containerStyle || {};
       if (lineHeight) {
         // 未设置行高的为 normal
         realLineHeight = parseFloat(lineHeight);
@@ -343,9 +383,18 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
         return;
       }
     }
+    const isHeightMode = truncateMode === 'height';
+    // 高度截断模式，比较简单 直接判断是否超出容器高度
+    if (isHeightMode) {
+      resetState(runtime.contentOffsetHeight > (maxHeight || containerContentHeight));
+      return;
+    }
+    // 行数截断模式，需要利用行高计算是否超出容器高度
     if (!lines) {
-      if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {
-          const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);
+      if (runtime.contentOffsetHeight > containerContentHeight) {
+          const adjustLines = Math.floor(containerContentHeight / realLineHeight) || 1;
           if (innerLines !== adjustLines) {
             setInnerLines(adjustLines);
           }
@@ -357,14 +406,11 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
       if (innerLines !== lines) {
         setInnerLines(lines);
       }
-      // 允许误差1px（行高为小数时）
-      if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {
-        resetState(true);
-      } else {
-        resetState(false);
-      }
+      // console.log('contentOffsetHeight, realLineHeight', runtime.contentOffsetHeight, realLineHeight);
+      // 允许误差1px（行高为小数时, safari计算行高*行数和实践总高有差异，故将行高向下取整兼容）
+        resetState(runtime.contentOffsetHeight >= (lines + 1) * Math.floor(realLineHeight) - 1);
     }
-  }, [lines, innerLineHeight, resetState]);
+  }, [lines, innerLineHeight, truncateMode, maxHeight, resetState]);
   // 监听内容高度，是否需要折叠
   // 用useLayoutEffect方式闪屏显示
@@ -378,7 +424,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
   // 监听"展开"按钮宽度变化
   useEffect(() => {
     if (ellipsis && btnWrapperRef.current) {
-      const {offsetWidth, offsetHeight} = btnWrapperRef.current;
+      const {offsetWidth} = btnWrapperRef.current;
       if (offsetWidth !== runtime.foldBtnWidth) {
         runtime.foldBtnWidth = offsetWidth;
         setFoldBtnWidth(offsetWidth);
@@ -416,6 +462,10 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
   useEffect(() => {
     runtime.inited = true;
   }, []);
+  // 高度自适应，容器高度变化时重新计算高度(容器也需要包装Measure，TODO: 待开发 hooks -> useMeasure, 使得观测dom尺寸的方式更简洁)
+  // if (!maxHeight && !lines) {
+  //    calcEllipsis();
+  // }
   // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);
   return (
     <div
@@ -440,7 +490,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
           if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {
             calcEllipsis();
           }
-          return <div style={{whiteSpace}} className={"offset-height-computer"} ref={(r) => {
+          return <div style={commonWrapStyle} className={"content-shadow-dom"} ref={(r) => {
             assignRef(measureRef, r);
             assignRef(wrapperRef, r);
             updateTextContent();
@@ -449,7 +499,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
           </div>
         }}
       </Measure>
-      {/* <div className={"offset-height-computer"} ref={wrapperRef}>
+      {/* <div className={"content-shadow-dom"} ref={wrapperRef}>
           {finalContent}
       </div> */}
       {/* 主文本显示 */}

package/src/style.scss CHANGED Viewed

@@ -12,10 +12,12 @@ $prefix: global.$comp-prefix;
 .#{$prefix}-text-ellipsis__ {
   &container {
     display: flex; // INFO: 这里必须非block, safari 13.1.3版本有bug 折叠切换时节点高度未更新
+    align-items: flex-start; // 配合flex食用，否则内部 display: -webkit-box 截断不生效
+    overflow: hidden; // 避免 .content-shadow-dom 溢出父容器导致外部滚动条视觉展示异常
     position: relative;
     // 保留dom用于计算高度, 不影响视图
-    .offset-height-computer {
+    .content-shadow-dom {
       visibility: hidden;
       position: absolute;
       pointer-events: none;