@ohkit/text-ellipsis 0.0.1-beta.1 → 0.0.2-alpha.0

package/dist/index.css

@@ -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 .btn-fold{display:inline-block}
+.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}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -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,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 .btn-fold {\n  display: inline-block;\n}"]}
+{"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}"]}

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import React, { PropsWithChildren } from "react";
 import "./style.scss";
 import { classNames as cx } from "@ohkit/utils";
 export declare const c: (...arg: cx.ArgumentArray) => string;
-interface ITextEllipsis {
+interface ITextEllipsis extends Pick<React.DOMAttributes<HTMLDivElement>, "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onFocus" | "onClick"> {
     /**
      * right | bottom 展开按钮在右下侧还是底部
      * @default right
@@ -31,11 +31,21 @@ interface ITextEllipsis {
      * text｜ReactNode  与children任传一个
      */
     content?: React.ReactNode;
+    /**
+     * 折叠状态
+     * @default true
+     */
+    fold?: boolean;
     /**
      * 显示展开控制按钮
      * @default true
      */
     showFoldControl?: boolean;
+    /**
+     * 展开按钮位置 uiType='bottom'时有效
+     * @default center
+     */
+    controlPlacement?: 'left' | 'center' | 'right';
     /**
      * 展开按钮文字
      * @default 收起
@@ -46,6 +56,15 @@ interface ITextEllipsis {
      * @default 展开
      */
     unfoldText?: string;
+    /**
+     * 折叠状态下是否显示title属性
+     * @default false
+     */
+    showTitleWhenFold?: boolean;
+    /**
+     * 折叠状态自定义title属性内容
+     */
+    titleWhenFold?: string | ((title: string) => string);
     /**
      * 自定义渲染展开按钮
      */
@@ -58,31 +77,18 @@ interface ITextEllipsis {
      * @param ellipsis 是否截断，true 截断，false 未截断
      */
     onEllipsisChange?: (ellipsis: boolean) => void;
+    /**
+     * 关键状态变更触发
+     * @param status
+     */
+    onStatusChange?: (status: {
+        fold: boolean;
+        ellipsis: boolean;
+        title?: string;
+    }) => void;
 }
 export type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;
-export declare function TextEllipsis({ className, 
-/**
- * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高
- */
-lineHeight, 
-/**
- * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度
- */
-lines, 
-/**
- * 展开按钮蒙层背景色(仅支持16进制表示)
- */
-maskBgColor, 
-/**
- * text｜ReactNode  与children任传一个
- */
-content, children, 
-/**
- * 显示展开控制按钮
- */
-showFoldControl, foldText, unfoldText, 
-/**
- * right | bottom 展开按钮在右下侧还是底部
- */
-uiType, renderFoldButton, onEllipsisChange, onFoldChange, }: TextEllipsisProps): React.JSX.Element;
+export declare const TextEllipsis: React.ForwardRefExoticComponent<ITextEllipsis & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/index.js

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

package/dist/index.js.map

@@ -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  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} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis {\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   * @default right\n   */\n  uiType?: \"right\" | \"bottom\";\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   * 显示展开控制按钮\n   * @default true\n   */\n  showFoldControl?: boolean;\n  /**\n   * 展开按钮文字\n   * @default 收起\n   */\n  foldText?: string;\n  /**\n   * 展开按钮文字\n   * @default 展开\n   */\n  unfoldText?: string;\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\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport function TextEllipsis({\n  className,\n  /**\n   * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n   */\n  lineHeight = \"\",\n  /**\n   * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n   */\n  lines,\n  /**\n   * 展开按钮蒙层背景色(仅支持16进制表示)\n   */\n  maskBgColor = \"#fff\",\n  /**\n   * text｜ReactNode  与children任传一个\n   */\n  content,\n  children,\n  /**\n   * 显示展开控制按钮\n   */\n  showFoldControl = true,\n  foldText = \"收起\",\n  unfoldText = \"展开\",\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   */\n  uiType = \"right\",\n  renderFoldButton,\n  onEllipsisChange,\n  onFoldChange,\n}: TextEllipsisProps) {\n  // 是否截断\n  const [ellipsis, setEllipsis] = useState(false);\n  const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n  // 折叠状态\n  const [fold, setFold] = useState(true);\n  const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n  const [innerLineHeight, setInnerLineHeight] = useState(0);\n  const [innerLines = 0, setInnerLines] = useState(lines);\n\n  const [runtime] = useRuntime({\n    contentOffsetHeight: 0,\n    ellipsis,\n    fold,\n    foldBtnWidth,\n    onEllipsisChange,\n    onFoldChange,\n  }, ['onEllipsisChange', '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: lineHeight\n        ? lineHeight\n        : // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.5(em)\n        getLineHeightFail\n        ? \"1.5\"\n        : undefined,\n    };\n  }, [lineHeight, getLineHeightFail]);\n\n  // 容器样式\n  const wrapStyle = useMemo(() => {\n    const lines = innerLines;\n    if (!ellipsis || !lines || !innerLineHeight) {\n      return;\n    }\n    return {\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: fold ? `${(lines - 0.5) * innerLineHeight}px` : undefined,\n      WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n      // maxHeight: ellipsis && fold && lines * innerLineHeight, // TODO: 上面方案不支持 则需优雅降级为高度截断方案\n      paddingBottom:\n        uiType === \"bottom\" || !fold ? `${innerLineHeight}px` : undefined,\n    };\n  }, [innerLines, innerLineHeight, ellipsis, fold, uiType]);\n\n  // 展开｜收起 按钮样式\n  const btnStyle = useMemo(() => {\n    if (!fold) {\n      return;\n    }\n    // 按钮padding，取行高\n    const padding = innerLineHeight;\n    // 蒙层透明度所占比例\n    const ratio = uiType === \"right\" ? (padding / foldBtnWidth) * 100 : 60;\n    // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n    const transparent = `${maskBgColor}${\n      maskBgColor.length === 4 ? \"0\" : \"00\"\n    }`;\n    return {\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((evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n    runtime.fold = fold;\n    setFold(fold);\n    runtime.onFoldChange?.(fold);\n  }, []);\n\n  const ButtonComp = useMemo(() => {\n    return (\n      <div\n        className={cx(\"btn-fold-wrapper\", `btn-fold-wrapper-${uiType}`)}\n        style={btnStyle}\n        ref={btnWrapperRef}\n        onClick={handleFoldChange}\n      >\n        {renderFoldButton ? (\n          renderFoldButton(fold)\n        ) : (\n          <div className={\"btn-fold\"}>\n            {fold ? unfoldText : foldText}\n          </div>\n        )}\n      </div>\n    );\n  }, [\n    btnStyle,\n    fold,\n    foldText,\n    handleFoldChange,\n    renderFoldButton,\n    // renderIcon,\n    uiType,\n    unfoldText,\n  ]);\n\n  // 重置状态\n  const resetState = useCallback((ellipsis = false) => {\n    const {ellipsis: preEllipsis, fold: preFold} = runtime;\n    if (ellipsis !== preEllipsis) {\n      runtime.ellipsis = ellipsis;\n      setEllipsis(ellipsis);\n      runtime.onEllipsisChange?.(ellipsis);\n      // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n      if (ellipsis && !preFold) {\n        handleFoldChange(undefined, true);\n      }\n    }\n  }, [handleFoldChange]);\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    }\n    if (!lines) {\n      if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n          const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n          setInnerLines(adjustLines);\n          resetState(true);\n      } else {\n        resetState(false);\n      }\n    } else {\n      setInnerLines(lines);\n      if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight) {\n        resetState(true);\n      } else {\n        resetState(false);\n      }\n    }\n  }, [lines, innerLineHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState();\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]);\n  useEffect(() => {\n    if (isSafari) {\n      reorganizeDom();\n    }\n  }, [fold, reorganizeDom]);\n  const finalContent = content || children;\n  const hoverTitle = useMemo(() => {\n      return ellipsis && fold ? wrapperRef.current?.textContent || '' : undefined;\n  }, [ellipsis, fold]);\n  // console.log('[render TextEllipsis]: ellipsis, fold: ', ellipsis, fold);\n  return (\n    <div className={cx(c(\"container\"), className)} style={containerStyle} ref={containerRef}>\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 className={\"offset-height-computer\"} ref={(r) => {\n            assignRef(measureRef, r);\n            assignRef(wrapperRef, r);\n          }}>\n            {finalContent}\n          </div>\n        }}\n      </Measure>\n      {/* <div className={\"offset-height-computer\"} ref={wrapperRef}>\n          {finalContent}\n      </div> */}\n      {/* 主文本显示 */}\n      <div className={\"text-ellipsis-inner\"} title={hoverTitle} style={wrapStyle} ref={contentRef}>\n        {/* {finalContent} */}\n        {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n        {ellipsis && showFoldControl && ButtonComp}\n        {finalContent}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["c","p","_ref","className","_ref$lineHeight","lineHeight","lines","_ref$maskBgColor","maskBgColor","content","children","_ref$showFoldControl","showFoldControl","_ref$foldText","foldText","_ref$unfoldText","unfoldText","_ref$uiType","uiType","renderFoldButton","onEllipsisChange","onFoldChange","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useState3","fold","setFold","_useState4","foldBtnWidth","setFoldBtnWidth","_useState5","innerLineHeight","setInnerLineHeight","_useState6","_useState6$","innerLines","setInnerLines","runtime","useRuntime","contentOffsetHeight","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","minHeight","WebkitLineClamp","paddingBottom","btnStyle","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","ref","onClick","resetState","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","getComputedStyle","parseFloat","adjustLines","Math","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","finalContent","hoverTitle","_wrapperRef$current","textContent","Measure","offset","_ref3","measureRef","contentRect","abs","r","assignRef","title"],"mappings":"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"}
+{"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  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   * 折叠状态\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  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    showTitleWhenFold,\n    titleWhenFold,\n    showFoldControl = true,\n    foldText = \"收起\",\n    unfoldText = \"展开\",\n    uiType = \"right\",\n    controlPlacement = 'center',\n    renderFoldButton,\n    onEllipsisChange,\n    onFoldChange,\n    onStatusChange,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onClick,\n    onFocus,\n  } = props;\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    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    if (!ellipsis || !lines || !innerLineHeight) {\n      return;\n    }\n    return {\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: fold ? `${(lines - 0.5) * 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]);\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      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    const {ellipsis, fold: preFold} = runtime;\n    if (newEllipsis !== ellipsis) {\n      setEllipsis(newEllipsis);\n      runtime.ellipsis = newEllipsis;\n      runtime.onEllipsisChange?.(newEllipsis);\n      // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n      if (newEllipsis && !preFold) {\n        handleFoldChange(undefined, true);\n      }\n    }\n  }, [handleFoldChange]);\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    }\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      if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight) {\n        resetState(true);\n      } else {\n        resetState(false);\n      }\n    }\n  }, [lines, innerLineHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState();\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 finalContent = content || children;\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 runtime.inited: ', ellipsis, fold, runtime.inited);\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 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","prefixClassname","TextEllipsis","forwardRef","props","ref","className","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","content","children","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$controlPlaceme","controlPlacement","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","_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","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","minHeight","WebkitLineClamp","paddingBottom","btnStyle","padding","ratio","Math","min","height","paddingTop","paddingLeft","background","transparent","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","classNames","resetState","newEllipsis","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","getComputedStyle","adjustLines","floor","useCompatibleEffect","useEffect","_btnWrapperRef$curren","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","finalContent","hoverTitle","title","r","assignRef","Measure","offset","_ref2","measureRef","contentRect","abs"],"mappings":"6KA4BaA,EAAIC,EAACC,gBAAC,yBA8FNC,EAAeC,EAAUA,WAAoC,SAACC,EAAOC,GAChF,IACEC,EAuBEF,EAvBFE,UAASC,EAuBPH,EAtBFI,WAAAA,OAAU,IAAAD,EAAG,GAAEA,EACfE,EAqBEL,EArBFK,MAAKC,EAqBHN,EApBFO,YAAAA,OAAW,IAAAD,EAAG,OAAMA,EACpBE,EAmBER,EAnBFQ,QACAC,EAkBET,EAlBFS,SACAC,EAiBEV,EAjBFU,kBACAC,EAgBEX,EAhBFW,cAAaC,EAgBXZ,EAfFa,gBAAAA,OAAe,IAAAD,GAAOA,EAAAE,EAepBd,EAdFe,SAAAA,OAAW,IAAHD,EAAG,KAAIA,EAAAE,EAcbhB,EAbFiB,WAAAA,OAAU,IAAAD,EAAG,KAAIA,EAAAE,EAaflB,EAZFmB,OAAAA,WAAMD,EAAG,QAAOA,EAAAE,EAYdpB,EAXFqB,iBAAAA,WAAgBD,EAAG,SAAQA,EAC3BE,EAUEtB,EAVFsB,iBACAC,EASEvB,EATFuB,iBACAC,EAQExB,EARFwB,aACAC,EAOEzB,EAPFyB,eACAC,EAME1B,EANF0B,aACAC,EAKE3B,EALF2B,aACAC,EAIE5B,EAJF4B,eACAC,EAGE7B,EAHF6B,eACAC,EAEE9B,EAFF8B,QACAC,EACE/B,EADF+B,QAGFC,EAAgCC,YAAS,GAAlCC,EAAQF,KAAEG,EAAWH,EAC5B,GAAAI,EAAkDH,EAAAA,UAAS,GAApDI,EAAiBD,KAAEE,EAAoBF,EAAA,GAE9CG,EAAwBC,EAAAA,kBAAkBxC,EAAO,OAAQ,CAACyC,cAAc,EAAMC,SAAUlB,IAAjFmB,EAAIJ,EAAEK,GAAAA,EAAOL,EACpB,GAAAM,EAAwCZ,EAAQA,SAAC,GAA1Ca,EAAYD,EAAA,GAAEE,EAAeF,EACpC,GAAAG,EAA8Cf,EAAQA,SAC9B,iBAAf7B,GAA2BA,EAAW6C,SAAS,MAClDC,WAAW9C,GACX,GAHC+C,EAAeH,EAAEI,GAAAA,EAAkBJ,EAAA,GAK1CK,EAAwCpB,EAAAA,SAAS5B,GAAMiD,EAAAD,EAAhDE,GAAAA,QAAa,IAAHD,EAAG,EAACA,EAAEE,GAAaH,KAEpCI,GAAsCxB,EAAQA,SAAC,IAAxCyB,GAAWD,GAAEE,GAAAA,GAAcF,GAAA,GAE3BG,GAAWC,EAAAA,WAAW,CAC3BC,QAAQ,EACRC,oBAAqB,EACrB7B,SAAAA,EACAS,KAAAA,EACAG,aAAAA,EACAY,YAAAA,GACAnC,iBAAAA,EACAC,aAAAA,GACC,CAAC,mBAAoB,OAAQ,iBAEhC,GAAMwC,GAAaC,EAAMA,OAAiB,MACpCC,GAAaD,EAAMA,OAAiB,MACpCE,GAAeF,EAAAA,OAAuB,MACtCG,GAAgBH,SAAuB,MAEvCI,GAAiBC,EAAOA,QAAC,WAC7B,MAAO,CACLlE,WAAYiC,EACR,MACAjC,QAA0BmE,EAElC,EAAG,CAACnE,EAAYiC,IAGVmC,GAAYF,UAAQ,WAExB,GAAKpC,GADSqB,IACcJ,EAG5B,MAAO,CAELsB,UAAW9B,GANCY,GAMkB,IAAOJ,EAAe,UAAOoB,EAC3DG,gBAAiB/B,EAPLY,QAOoBgB,EAIhCI,cACa,WAAXxD,GAAwBwB,OAAgC4B,EAAtBpB,OAExC,EAAG,CAACI,GAAYJ,EAAiBjB,EAAUS,EAAMxB,IAG3CyD,GAAWN,EAAAA,QAAQ,WACvB,GAAK3B,EAAL,CAIA,IAAMkC,EAAU1B,EAEV2B,EAAmB,UAAX3D,EAAqB4D,KAAKC,IAAKH,EAAU/B,EAAgB,IAAK,IAAM,GAKlF,MAAO,CACLmC,OAAW9B,EAAmB,KAC9B/C,WAAe+C,EAAe,KAC9B+B,WAAuB,WAAX/D,EAAyB0D,EAAO,UAAON,EACnDY,YAAwB,UAAXhE,EAAwB0D,EAAO,UAAON,EAEnDa,WAAkCjE,sBAAAA,EAAWkE,KATxB9E,GACE,IAAvBA,EAAY+E,OAAe,IAAM,WAQ4B/E,EAAW,IAAIuE,EAAWvE,MAAAA,WAfxF,CAiBH,EAAG,CAAC4C,EAAiB5C,EAAaoC,EAAMxB,EAAQ2B,IAE1CyC,GAAgBC,EAAWA,YAAC,WAE5BxB,GAAWyB,UACbzB,GAAWyB,QAAQC,MAAMC,MAAQ,UACL,MAA5BC,OAAOC,uBAAPD,OAAOC,sBAAwB,WACzB7B,GAAWyB,UACbzB,GAAWyB,QAAQC,MAAMC,MAAQ,OAErC,GAEJ,EAAG,IAEGG,GAAmBN,EAAAA,YACvB,SAACO,EAAkCpD,QAAAA,IAAAA,IAAAA,GAAQiB,GAAQjB,MACjDiB,GAAQjB,KAAOA,EACfC,EAAQD,EACZ,EAAG,IAEGqD,GAAa1B,EAAAA,QAAQ,wBACzB,OACE2B,EAAAA,QAAAC,cACEhG,MAAAA,CAAAA,UAAWiG,EAAEC,WACX,mBAAkB,oBACEjF,EACT,WAAXA,GAAmB,aAAiBE,GAEtCqE,MAAOd,GACP3E,IAAKmE,GACLtC,QAASgE,IAERxE,EACCA,EAAiBqB,gBAEjBsD,EAAA,QAAAC,cAAA,MAAA,CAAKhG,UAAW,YAAayC,EAAO1B,EAAaF,GAIzD,EAAG,CACD6D,GACAjC,EACA5B,EACA+E,GACAxE,EACAD,EACAF,EACAF,IAIIoF,GAAab,EAAWA,YAAC,SAACc,YAAAA,IAAAA,EAAc1C,GAAQ1B,UACpD,IAAuBqE,EAAW3C,GAAjBjB,KACb2D,IAD8B1C,GAA3B1B,WAELC,EAAYmE,GACZ1C,GAAQ1B,SAAWoE,EACnB1C,MAAAA,GAAQrC,kBAARqC,GAAQrC,iBAAmB+E,GAEvBA,IAAgBC,GAClBT,QAAiBvB,GAAW,GAGlC,EAAG,CAACuB,KAEEU,GAAehB,EAAAA,YAAY,WAC/B,IAAMiB,EAAUvC,GAAWuB,QACrBiB,EAAevC,GAAasB,QAClC,GAAKgB,GAAYC,EAAjB,CAGA9C,GAAQG,oBAAsB0C,EAAQE,aACtC,IAAIC,EAAiB,EAGrB,IAAKA,GAAkBH,EAAS,CAC9B,IACQrG,UADUwF,OAAOiB,wBAAPjB,OAAOiB,iBAAmBJ,KACR,CAAE,GAA9BrG,WACJA,KAEFwG,EAAiB1D,WAAW9C,KAE1BkC,GAAqB,GAG1B,CAKD,GAHIa,IAAoByD,GACtBxD,EAAmBwD,GAEhBvG,EAWCkD,KAAelD,GACjBmD,GAAcnD,GAGdgG,GADEzC,GAAQG,sBAAwB1D,EAAQ,GAAKuG,QAbjD,GAAIhD,GAAQG,qBAAsB2C,MAAAA,OAAAA,EAAAA,EAAcC,cAAc,CAC1D,IAAMG,EAAc/B,KAAKgC,MAAML,EAAaC,aAAeC,GACvDrD,KAAeuD,GACjBtD,GAAcsD,GAEhBT,IAAW,EACd,MACCA,IAAW,EA5Bd,CAwCH,EAAG,CAAChG,EAAO8C,EAAiBkD,KAI5BW,EAAmBA,oBAAC,WAClBX,KACAG,IACF,EAAG,CAACA,GAAcH,KAGlBY,EAASA,UAAC,WACR,GAAI/E,GAAYkC,GAAcqB,QAAS,CACrCyB,IAAOC,EAA6B/C,GAAcqB,QAA3C0B,YACHA,IAAgBvD,GAAQd,eAC1Bc,GAAQd,aAAeqE,EACvBpE,EAAgBoE,GAEnB,CACH,EAAG,CAACjF,EAAUjB,EAAYJ,IAC1BoG,YAAU,WACJG,EAAQA,UACV7B,IAEJ,EAAG,CAAC5C,EAAM4C,KACV,IAAM8B,GAAoB7B,EAAAA,YAAY,WAAK8B,IAAAA,EACnCC,GAAiBD,OAAAA,EAAApD,GAAWuB,cAAX6B,EAAAA,EAAoB5D,cAAe,GACtD6D,IAAmB3D,GAAQF,cAC7BE,GAAQF,YAAc6D,EACtB5D,GAAe4D,GAEnB,EAAG,IACGC,GAAehH,GAAWC,EAC1BgH,GAAanD,EAAAA,QAAQ,WACvB,OAAOpC,GAAYS,EACW,mBAAlBhC,EACNA,EAAc+C,IACd/C,GAAiB+C,QACnBa,CACR,EAAG,CAAC5D,EAAeuB,EAAUS,EAAMe,KAcnC,OAbAuD,YAAU,WACJrD,GAAQE,SACVrC,MAAAA,GAAAA,EAAiB,CACbS,SAAAA,EACAS,KAAAA,EACA+E,MAAOD,KAGf,EAAG,CAAChG,EAAgBkB,EAAMT,EAAUuF,KACpCR,EAASA,UAAC,WACRrD,GAAQE,QAAS,CACnB,EAAG,iBAGDmC,EAAAA,QAAAC,qBACEhG,UAAWiG,aAAGxG,EAAE,aAAcO,GAC9BwF,MAAOrB,GACPpE,IAAK,SAAC0H,GACJC,EAASA,UAACzD,GAAcwD,GACxB1H,GAAO2H,EAAAA,UAAU3H,EAAK0H,EACxB,EACAjG,aAAcA,EACdC,aAAcA,EACdC,eAAgBA,EAChBC,eAAgBA,EAChBC,QAASA,EACTC,QAASA,gBAGTkE,EAAA,QAAAC,cAAC2B,UAAQC,CAAAA,QACN,GAAA,SAAAC,GAA8B,IAA5BC,EAAUD,EAAVC,WAEM/C,GAFiB8C,EAAXE,YAEgBH,QAAU,CAAA,GAAhC7C,OAIP,YAHeV,IAAXU,GAAwBF,KAAKmD,IAAIjD,EAASrB,GAAQG,qBAAuB,GAC3EyC,kBAEKP,EAAA,QAAAC,qBAAKhG,UAAW,yBAA0BD,IAAK,SAAC0H,GACrDC,EAAAA,UAAUI,EAAYL,GACtBC,EAAAA,UAAU1D,GAAYyD,GACtBN,IACF,GACGG,GAEL,gBAMFvB,EAAA,QAAAC,cACEhG,MAAAA,CAAAA,UAAW,sBACXwH,MAAOhH,EAAoB+G,QAAalD,EACxCmB,MAAOlB,GACPvE,IAAK+D,IAIJ9B,GAAYrB,GAAmBmF,GAC/BwB,IAIT"}

package/dist/index.mjs

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

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\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} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis {\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   * @default right\n   */\n  uiType?: \"right\" | \"bottom\";\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   * 显示展开控制按钮\n   * @default true\n   */\n  showFoldControl?: boolean;\n  /**\n   * 展开按钮文字\n   * @default 收起\n   */\n  foldText?: string;\n  /**\n   * 展开按钮文字\n   * @default 展开\n   */\n  unfoldText?: string;\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\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport function TextEllipsis({\n  className,\n  /**\n   * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n   */\n  lineHeight = \"\",\n  /**\n   * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n   */\n  lines,\n  /**\n   * 展开按钮蒙层背景色(仅支持16进制表示)\n   */\n  maskBgColor = \"#fff\",\n  /**\n   * text｜ReactNode  与children任传一个\n   */\n  content,\n  children,\n  /**\n   * 显示展开控制按钮\n   */\n  showFoldControl = true,\n  foldText = \"收起\",\n  unfoldText = \"展开\",\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   */\n  uiType = \"right\",\n  renderFoldButton,\n  onEllipsisChange,\n  onFoldChange,\n}: TextEllipsisProps) {\n  // 是否截断\n  const [ellipsis, setEllipsis] = useState(false);\n  const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n  // 折叠状态\n  const [fold, setFold] = useState(true);\n  const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n  const [innerLineHeight, setInnerLineHeight] = useState(0);\n  const [innerLines = 0, setInnerLines] = useState(lines);\n\n  const [runtime] = useRuntime({\n    contentOffsetHeight: 0,\n    ellipsis,\n    fold,\n    foldBtnWidth,\n    onEllipsisChange,\n    onFoldChange,\n  }, ['onEllipsisChange', '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: lineHeight\n        ? lineHeight\n        : // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.5(em)\n        getLineHeightFail\n        ? \"1.5\"\n        : undefined,\n    };\n  }, [lineHeight, getLineHeightFail]);\n\n  // 容器样式\n  const wrapStyle = useMemo(() => {\n    const lines = innerLines;\n    if (!ellipsis || !lines || !innerLineHeight) {\n      return;\n    }\n    return {\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: fold ? `${(lines - 0.5) * innerLineHeight}px` : undefined,\n      WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n      // maxHeight: ellipsis && fold && lines * innerLineHeight, // TODO: 上面方案不支持 则需优雅降级为高度截断方案\n      paddingBottom:\n        uiType === \"bottom\" || !fold ? `${innerLineHeight}px` : undefined,\n    };\n  }, [innerLines, innerLineHeight, ellipsis, fold, uiType]);\n\n  // 展开｜收起 按钮样式\n  const btnStyle = useMemo(() => {\n    if (!fold) {\n      return;\n    }\n    // 按钮padding，取行高\n    const padding = innerLineHeight;\n    // 蒙层透明度所占比例\n    const ratio = uiType === \"right\" ? (padding / foldBtnWidth) * 100 : 60;\n    // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n    const transparent = `${maskBgColor}${\n      maskBgColor.length === 4 ? \"0\" : \"00\"\n    }`;\n    return {\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((evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n    runtime.fold = fold;\n    setFold(fold);\n    runtime.onFoldChange?.(fold);\n  }, []);\n\n  const ButtonComp = useMemo(() => {\n    return (\n      <div\n        className={cx(\"btn-fold-wrapper\", `btn-fold-wrapper-${uiType}`)}\n        style={btnStyle}\n        ref={btnWrapperRef}\n        onClick={handleFoldChange}\n      >\n        {renderFoldButton ? (\n          renderFoldButton(fold)\n        ) : (\n          <div className={\"btn-fold\"}>\n            {fold ? unfoldText : foldText}\n          </div>\n        )}\n      </div>\n    );\n  }, [\n    btnStyle,\n    fold,\n    foldText,\n    handleFoldChange,\n    renderFoldButton,\n    // renderIcon,\n    uiType,\n    unfoldText,\n  ]);\n\n  // 重置状态\n  const resetState = useCallback((ellipsis = false) => {\n    const {ellipsis: preEllipsis, fold: preFold} = runtime;\n    if (ellipsis !== preEllipsis) {\n      runtime.ellipsis = ellipsis;\n      setEllipsis(ellipsis);\n      runtime.onEllipsisChange?.(ellipsis);\n      // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n      if (ellipsis && !preFold) {\n        handleFoldChange(undefined, true);\n      }\n    }\n  }, [handleFoldChange]);\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    }\n    if (!lines) {\n      if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n          const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n          setInnerLines(adjustLines);\n          resetState(true);\n      } else {\n        resetState(false);\n      }\n    } else {\n      setInnerLines(lines);\n      if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight) {\n        resetState(true);\n      } else {\n        resetState(false);\n      }\n    }\n  }, [lines, innerLineHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState();\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]);\n  useEffect(() => {\n    if (isSafari) {\n      reorganizeDom();\n    }\n  }, [fold, reorganizeDom]);\n  const finalContent = content || children;\n  const hoverTitle = useMemo(() => {\n      return ellipsis && fold ? wrapperRef.current?.textContent || '' : undefined;\n  }, [ellipsis, fold]);\n  // console.log('[render TextEllipsis]: ellipsis, fold: ', ellipsis, fold);\n  return (\n    <div className={cx(c(\"container\"), className)} style={containerStyle} ref={containerRef}>\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 className={\"offset-height-computer\"} ref={(r) => {\n            assignRef(measureRef, r);\n            assignRef(wrapperRef, r);\n          }}>\n            {finalContent}\n          </div>\n        }}\n      </Measure>\n      {/* <div className={\"offset-height-computer\"} ref={wrapperRef}>\n          {finalContent}\n      </div> */}\n      {/* 主文本显示 */}\n      <div className={\"text-ellipsis-inner\"} title={hoverTitle} style={wrapStyle} ref={contentRef}>\n        {/* {finalContent} */}\n        {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n        {ellipsis && showFoldControl && ButtonComp}\n        {finalContent}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["c","p","TextEllipsis","_ref","className","_ref$lineHeight","lineHeight","lines","_ref$maskBgColor","maskBgColor","content","children","_ref$showFoldControl","showFoldControl","_ref$foldText","foldText","_ref$unfoldText","unfoldText","_ref$uiType","uiType","renderFoldButton","onEllipsisChange","onFoldChange","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useState3","fold","setFold","_useState4","foldBtnWidth","setFoldBtnWidth","_useState5","innerLineHeight","setInnerLineHeight","_useState6","_useState6$","innerLines","setInnerLines","runtime","useRuntime","contentOffsetHeight","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","minHeight","WebkitLineClamp","paddingBottom","btnStyle","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","ref","onClick","resetState","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","getComputedStyle","parseFloat","adjustLines","Math","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","finalContent","hoverTitle","_wrapperRef$current","textContent","Measure","offset","_ref3","measureRef","contentRect","abs","r","assignRef","title"],"mappings":"2QA0Ba,IAAAA,EAAIC,EAAE,kCAyDHC,EAAYC,GAC1B,IAAAC,EAASD,EAATC,UAASC,EAAAF,EAITG,WAAAA,OAAa,IAAHD,EAAG,GAAEA,EAIfE,EAAKJ,EAALI,MAAKC,EAAAL,EAILM,YAAAA,WAAWD,EAAG,OAAMA,EAIpBE,EAAOP,EAAPO,QACAC,EAAQR,EAARQ,SAAQC,EAAAT,EAIRU,gBAAAA,OAAe,IAAAD,GAAOA,EAAAE,EAAAX,EACtBY,SAAAA,OAAW,IAAHD,EAAG,KAAIA,EAAAE,EAAAb,EACfc,WAAAA,OAAa,IAAHD,EAAG,KAAIA,EAAAE,EAAAf,EAIjBgB,OAAAA,OAAS,IAAHD,EAAG,QAAOA,EAChBE,EAAgBjB,EAAhBiB,iBACAC,EAAgBlB,EAAhBkB,iBACAC,EAAYnB,EAAZmB,aAGAC,EAAgCC,GAAS,GAAlCC,EAAQF,EAAA,GAAEG,EAAWH,KAC5BI,EAAkDH,GAAS,GAApDI,EAAiBD,EAAA,GAAEE,EAAoBF,EAE9C,GAAAG,EAAwBN,GAAS,GAA1BO,EAAID,EAAA,GAAEE,EAAOF,KACpBG,EAAwCT,EAAS,GAA1CU,EAAYD,EAAEE,GAAAA,EAAeF,EAAA,GACpCG,EAA8CZ,EAAS,GAAhDa,EAAeD,EAAA,GAAEE,EAAkBF,KAC1CG,EAAwCf,EAASjB,GAAMiC,EAAAD,EAAhDE,GAAAA,OAAU,IAAAD,EAAG,EAACA,EAAEE,EAAaH,EAAA,GAE7BI,EAAWC,EAAW,CAC3BC,oBAAqB,EACrBpB,SAAAA,EACAM,KAAAA,EACAG,aAAAA,EACAb,iBAAAA,EACAC,aAAAA,GACC,CAAC,mBAAoB,iBAExB,GAAMwB,EAAaC,EAAuB,MACpCC,GAAaD,EAAuB,MACpCE,GAAeF,EAAuB,MACtCG,GAAgBH,EAAuB,MAEvCI,GAAiBC,EAAQ,WAC7B,MAAO,CACL9C,WAAYA,IAGVsB,EACE,WACAyB,GAER,EAAG,CAAC/C,EAAYsB,IAGV0B,GAAYF,EAAQ,WAExB,GAAK3B,GADSgB,GACcJ,EAG5B,MAAO,CAELkB,UAAWxB,GANCU,EAMkB,IAAOJ,EAAe,UAAOgB,EAC3DG,gBAAiBzB,EAPLU,OAOoBY,EAEhCI,cACa,WAAXtC,GAAwBY,OAAgCsB,EAAtBhB,EAAe,KAEvD,EAAG,CAACI,EAAYJ,EAAiBZ,EAAUM,EAAMZ,IAG3CuC,GAAWN,EAAQ,WACvB,GAAKrB,EAWL,MAAO,CACL4B,OAAWtB,EAAe,KAC1B/B,WAAe+B,EAAe,KAC9BuB,WAAuB,WAAXzC,EAVEkB,YAUqCgB,EACnDQ,YAAwB,UAAX1C,EAXCkB,YAWqCgB,EAEnDS,WAAkC3C,sBAAAA,OATbV,GACE,IAAvBA,EAAYsD,OAAe,IAAM,MAQuB,KAAKtD,EAAW,KAXjD,UAAXU,EAFEkB,EAE8BH,EAAgB,IAAM,IAWqBzB,MAAAA,WAE3F,EAAG,CAAC4B,EAAiB5B,EAAasB,EAAMZ,EAAQe,IAE1C8B,GAAgBC,EAAY,WAE5BnB,EAAWoB,UACbpB,EAAWoB,QAAQC,MAAMC,MAAQ,UACjCC,MAAAA,OAAOC,uBAAPD,OAAOC,sBAAwB,WACzBxB,EAAWoB,UACbpB,EAAWoB,QAAQC,MAAMC,MAAQ,OAErC,GAEJ,EAAG,IAEGG,GAAmBN,EAAY,SAACO,EAAkCzC,QAAI,IAAJA,IAAAA,GAAQY,EAAQZ,MACtFY,EAAQZ,KAAOA,EACfC,EAAQD,SACRY,EAAQrB,cAARqB,EAAQrB,aAAeS,EACzB,EAAG,IAEG0C,GAAarB,EAAQ,wBACzB,OACEsB,EAAAC,cACEvE,MAAAA,CAAAA,UAAWwE,EAAG,mBAAwCzD,oBAAAA,GACtDgD,MAAOT,GACPmB,IAAK3B,GACL4B,QAASP,IAERnD,EACCA,EAAiBW,gBAEjB2C,EAAAC,cAAKvE,MAAAA,CAAAA,UAAW,YACb2B,EAAOd,EAAaF,GAK/B,EAAG,CACD2C,GACA3B,EACAhB,EACAwD,GACAnD,EAEAD,EACAF,IAII8D,GAAad,EAAY,SAACxC,QAAQ,IAARA,IAAAA,GAAW,GACzC,IAAoCuD,EAAWrC,EAAjBZ,KAC1BN,IAD2CkB,EAAxClB,WAELkB,EAAQlB,SAAWA,EACnBC,EAAYD,GACY,MAAxBkB,EAAQtB,kBAARsB,EAAQtB,iBAAmBI,GAEvBA,IAAauD,GACfT,QAAiBlB,GAAW,GAGlC,EAAG,CAACkB,KAEEU,GAAehB,EAAY,WAC/B,IAAMiB,EAAUlC,GAAWkB,QACrBiB,EAAelC,GAAaiB,QAClC,GAAKgB,GAAYC,EAAjB,CAGAxC,EAAQE,oBAAsBqC,EAAQE,aACtC,IAAIC,EAAiB,EAGrB,IAAKA,GAAkBH,EAAS,CAC9B,IACQ5E,IADU+D,MAAAA,OAAOiB,sBAAPjB,EAAAA,OAAOiB,iBAAmBJ,KACR,CAAE,GAA9B5E,WACJA,KAEF+E,EAAiBE,WAAWjF,KAE1BuB,GAAqB,GAG1B,CAKD,GAHIQ,IAAoBgD,GACtB/C,EAAmB+C,GAEhB9E,EASHmC,EAAcnC,GAEZwE,GADEpC,EAAQE,sBAAwBtC,EAAQ,GAAK8E,QATjD,GAAI1C,EAAQE,qBAAsBsC,MAAAA,OAAAA,EAAAA,EAAcC,cAAc,CAC1D,IAAMI,EAAcC,KAAKC,MAAMP,EAAaC,aAAeC,GAC3D3C,EAAc8C,GACdT,IAAW,EACd,MACCA,IAAW,EA1Bd,CAoCH,EAAG,CAACxE,EAAO8B,EAAiB0C,KAI5BY,EAAoB,WAClBZ,KACAE,IACF,EAAG,CAACA,GAAcF,KAGlBa,EAAU,WACR,GAAInE,GAAYyB,GAAcgB,QAAS,CACrC,IAAO2B,EAAe3C,GAAcgB,QAA7B2B,YACHA,IAAgBlD,EAAQT,eAC1BS,EAAQT,aAAe2D,EACvB1D,EAAgB0D,GAEnB,CACH,EAAG,CAACpE,EAAUR,IACd2E,EAAU,WACJE,GACF9B,IAEJ,EAAG,CAACjC,EAAMiC,KACV,IAAM+B,GAAerF,GAAWC,EAC1BqF,GAAa5C,EAAQ,WAAK,IAAA6C,EAC5B,OAAOxE,GAAYM,UAAOkE,EAAAjD,GAAWkB,gBAAX+B,EAAoBC,cAAe,QAAK7C,CACtE,EAAG,CAAC5B,EAAUM,iBAEd,OACE2C,EAAAC,qBAAKvE,UAAWwE,EAAG5E,EAAE,aAAcI,GAAY+D,MAAOhB,GAAgB0B,IAAK5B,iBAEzEyB,EAAAC,cAACwB,GAAQC,QAAM,GACZ,SAAAC,GAAE,IAAAC,EAAUD,EAAVC,WAEM3C,GAFiB0C,EAAXE,YAEgBH,QAAU,CAAA,GAAhCzC,OAIP,YAHeN,IAAXM,GAAwB8B,KAAKe,IAAI7C,EAAShB,EAAQE,qBAAuB,GAC3EoC,kBAEKP,EAAAC,cAAA,MAAA,CAAKvE,UAAW,yBAA0ByE,IAAK,SAAC4B,GACrDC,EAAUJ,EAAYG,GACtBC,EAAU1D,GAAYyD,EACxB,GACGV,GAEL,gBAMFrB,EAAAC,cAAKvE,MAAAA,CAAAA,UAAW,sBAAuBuG,MAAOX,GAAY7B,MAAOb,GAAWuB,IAAK/B,GAG9ErB,GAAYZ,GAAmB4D,GAC/BsB,IAIT"}
+{"version":3,"file":"index.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  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   * 折叠状态\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  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    showTitleWhenFold,\n    titleWhenFold,\n    showFoldControl = true,\n    foldText = \"收起\",\n    unfoldText = \"展开\",\n    uiType = \"right\",\n    controlPlacement = 'center',\n    renderFoldButton,\n    onEllipsisChange,\n    onFoldChange,\n    onStatusChange,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onClick,\n    onFocus,\n  } = props;\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    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    if (!ellipsis || !lines || !innerLineHeight) {\n      return;\n    }\n    return {\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: fold ? `${(lines - 0.5) * 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]);\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      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    const {ellipsis, fold: preFold} = runtime;\n    if (newEllipsis !== ellipsis) {\n      setEllipsis(newEllipsis);\n      runtime.ellipsis = newEllipsis;\n      runtime.onEllipsisChange?.(newEllipsis);\n      // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n      if (newEllipsis && !preFold) {\n        handleFoldChange(undefined, true);\n      }\n    }\n  }, [handleFoldChange]);\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    }\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      if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight) {\n        resetState(true);\n      } else {\n        resetState(false);\n      }\n    }\n  }, [lines, innerLineHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState();\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 finalContent = content || children;\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 runtime.inited: ', ellipsis, fold, runtime.inited);\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 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","content","children","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$controlPlaceme","controlPlacement","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","_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","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","minHeight","WebkitLineClamp","paddingBottom","btnStyle","padding","ratio","Math","min","height","paddingTop","paddingLeft","background","transparent","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","resetState","newEllipsis","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","getComputedStyle","adjustLines","floor","useCompatibleEffect","useEffect","_btnWrapperRef$curren","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","finalContent","hoverTitle","title","r","assignRef","Measure","offset","_ref2","measureRef","contentRect","abs"],"mappings":"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"}

package/dist/index.modern.mjs

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

package/dist/index.modern.mjs.map

@@ -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  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} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis {\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   * @default right\n   */\n  uiType?: \"right\" | \"bottom\";\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   * 显示展开控制按钮\n   * @default true\n   */\n  showFoldControl?: boolean;\n  /**\n   * 展开按钮文字\n   * @default 收起\n   */\n  foldText?: string;\n  /**\n   * 展开按钮文字\n   * @default 展开\n   */\n  unfoldText?: string;\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\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport function TextEllipsis({\n  className,\n  /**\n   * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n   */\n  lineHeight = \"\",\n  /**\n   * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n   */\n  lines,\n  /**\n   * 展开按钮蒙层背景色(仅支持16进制表示)\n   */\n  maskBgColor = \"#fff\",\n  /**\n   * text｜ReactNode  与children任传一个\n   */\n  content,\n  children,\n  /**\n   * 显示展开控制按钮\n   */\n  showFoldControl = true,\n  foldText = \"收起\",\n  unfoldText = \"展开\",\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   */\n  uiType = \"right\",\n  renderFoldButton,\n  onEllipsisChange,\n  onFoldChange,\n}: TextEllipsisProps) {\n  // 是否截断\n  const [ellipsis, setEllipsis] = useState(false);\n  const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n  // 折叠状态\n  const [fold, setFold] = useState(true);\n  const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n  const [innerLineHeight, setInnerLineHeight] = useState(0);\n  const [innerLines = 0, setInnerLines] = useState(lines);\n\n  const [runtime] = useRuntime({\n    contentOffsetHeight: 0,\n    ellipsis,\n    fold,\n    foldBtnWidth,\n    onEllipsisChange,\n    onFoldChange,\n  }, ['onEllipsisChange', '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: lineHeight\n        ? lineHeight\n        : // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.5(em)\n        getLineHeightFail\n        ? \"1.5\"\n        : undefined,\n    };\n  }, [lineHeight, getLineHeightFail]);\n\n  // 容器样式\n  const wrapStyle = useMemo(() => {\n    const lines = innerLines;\n    if (!ellipsis || !lines || !innerLineHeight) {\n      return;\n    }\n    return {\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: fold ? `${(lines - 0.5) * innerLineHeight}px` : undefined,\n      WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n      // maxHeight: ellipsis && fold && lines * innerLineHeight, // TODO: 上面方案不支持 则需优雅降级为高度截断方案\n      paddingBottom:\n        uiType === \"bottom\" || !fold ? `${innerLineHeight}px` : undefined,\n    };\n  }, [innerLines, innerLineHeight, ellipsis, fold, uiType]);\n\n  // 展开｜收起 按钮样式\n  const btnStyle = useMemo(() => {\n    if (!fold) {\n      return;\n    }\n    // 按钮padding，取行高\n    const padding = innerLineHeight;\n    // 蒙层透明度所占比例\n    const ratio = uiType === \"right\" ? (padding / foldBtnWidth) * 100 : 60;\n    // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n    const transparent = `${maskBgColor}${\n      maskBgColor.length === 4 ? \"0\" : \"00\"\n    }`;\n    return {\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((evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n    runtime.fold = fold;\n    setFold(fold);\n    runtime.onFoldChange?.(fold);\n  }, []);\n\n  const ButtonComp = useMemo(() => {\n    return (\n      <div\n        className={cx(\"btn-fold-wrapper\", `btn-fold-wrapper-${uiType}`)}\n        style={btnStyle}\n        ref={btnWrapperRef}\n        onClick={handleFoldChange}\n      >\n        {renderFoldButton ? (\n          renderFoldButton(fold)\n        ) : (\n          <div className={\"btn-fold\"}>\n            {fold ? unfoldText : foldText}\n          </div>\n        )}\n      </div>\n    );\n  }, [\n    btnStyle,\n    fold,\n    foldText,\n    handleFoldChange,\n    renderFoldButton,\n    // renderIcon,\n    uiType,\n    unfoldText,\n  ]);\n\n  // 重置状态\n  const resetState = useCallback((ellipsis = false) => {\n    const {ellipsis: preEllipsis, fold: preFold} = runtime;\n    if (ellipsis !== preEllipsis) {\n      runtime.ellipsis = ellipsis;\n      setEllipsis(ellipsis);\n      runtime.onEllipsisChange?.(ellipsis);\n      // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n      if (ellipsis && !preFold) {\n        handleFoldChange(undefined, true);\n      }\n    }\n  }, [handleFoldChange]);\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    }\n    if (!lines) {\n      if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n          const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n          setInnerLines(adjustLines);\n          resetState(true);\n      } else {\n        resetState(false);\n      }\n    } else {\n      setInnerLines(lines);\n      if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight) {\n        resetState(true);\n      } else {\n        resetState(false);\n      }\n    }\n  }, [lines, innerLineHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState();\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]);\n  useEffect(() => {\n    if (isSafari) {\n      reorganizeDom();\n    }\n  }, [fold, reorganizeDom]);\n  const finalContent = content || children;\n  const hoverTitle = useMemo(() => {\n      return ellipsis && fold ? wrapperRef.current?.textContent || '' : undefined;\n  }, [ellipsis, fold]);\n  // console.log('[render TextEllipsis]: ellipsis, fold: ', ellipsis, fold);\n  return (\n    <div className={cx(c(\"container\"), className)} style={containerStyle} ref={containerRef}>\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 className={\"offset-height-computer\"} ref={(r) => {\n            assignRef(measureRef, r);\n            assignRef(wrapperRef, r);\n          }}>\n            {finalContent}\n          </div>\n        }}\n      </Measure>\n      {/* <div className={\"offset-height-computer\"} ref={wrapperRef}>\n          {finalContent}\n      </div> */}\n      {/* 主文本显示 */}\n      <div className={\"text-ellipsis-inner\"} title={hoverTitle} style={wrapStyle} ref={contentRef}>\n        {/* {finalContent} */}\n        {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n        {ellipsis && showFoldControl && ButtonComp}\n        {finalContent}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["c","p","TextEllipsis","className","lineHeight","lines","maskBgColor","content","children","showFoldControl","foldText","unfoldText","uiType","renderFoldButton","onEllipsisChange","onFoldChange","ellipsis","setEllipsis","useState","getLineHeightFail","setGetLineHeightFail","fold","setFold","foldBtnWidth","setFoldBtnWidth","innerLineHeight","setInnerLineHeight","innerLines","setInnerLines","runtime","useRuntime","contentOffsetHeight","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","minHeight","WebkitLineClamp","paddingBottom","btnStyle","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","ref","onClick","resetState","preEllipsis","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","realStyle","getComputedStyle","parseFloat","adjustLines","Math","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","finalContent","hoverTitle","_wrapperRef$current","textContent","Measure","offset","measureRef","contentRect","abs","r","assignRef","title"],"mappings":"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"}
+{"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  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   * 折叠状态\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  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    showTitleWhenFold,\n    titleWhenFold,\n    showFoldControl = true,\n    foldText = \"收起\",\n    unfoldText = \"展开\",\n    uiType = \"right\",\n    controlPlacement = 'center',\n    renderFoldButton,\n    onEllipsisChange,\n    onFoldChange,\n    onStatusChange,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onClick,\n    onFocus,\n  } = props;\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    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    if (!ellipsis || !lines || !innerLineHeight) {\n      return;\n    }\n    return {\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: fold ? `${(lines - 0.5) * 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]);\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      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    const {ellipsis, fold: preFold} = runtime;\n    if (newEllipsis !== ellipsis) {\n      setEllipsis(newEllipsis);\n      runtime.ellipsis = newEllipsis;\n      runtime.onEllipsisChange?.(newEllipsis);\n      // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n      if (newEllipsis && !preFold) {\n        handleFoldChange(undefined, true);\n      }\n    }\n  }, [handleFoldChange]);\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    }\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      if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight) {\n        resetState(true);\n      } else {\n        resetState(false);\n      }\n    }\n  }, [lines, innerLineHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState();\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 finalContent = content || children;\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 runtime.inited: ', ellipsis, fold, runtime.inited);\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 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","showTitleWhenFold","titleWhenFold","showFoldControl","foldText","unfoldText","uiType","controlPlacement","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","ellipsis","setEllipsis","useState","getLineHeightFail","setGetLineHeightFail","fold","setFold","useSyncPropsState","defaultValue","onChange","foldBtnWidth","setFoldBtnWidth","innerLineHeight","setInnerLineHeight","endsWith","parseFloat","innerLines","setInnerLines","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","undefined","wrapStyle","minHeight","WebkitLineClamp","paddingBottom","btnStyle","padding","ratio","Math","min","height","paddingTop","paddingLeft","background","length","reorganizeDom","useCallback","current","style","width","window","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","resetState","newEllipsis","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","realLineHeight","realStyle","getComputedStyle","adjustLines","floor","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","finalContent","hoverTitle","title","r","assignRef","Measure","offset","measureRef","contentRect","abs"],"mappings":"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"}

package/dist/index.umd.js

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