@ohkit/text-ellipsis 0.0.1-beta.0

package/LICENSE.md

@@ -0,0 +1,5 @@
+Copyright (c) [2015], [wuqiuyang]
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/dist/index.css

@@ -0,0 +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}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +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}"]}

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @file 文本截断显示组件
+ * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致
+ * @author <wuqiuyang305@126.com>
+ */
+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 {
+    /**
+     * right | bottom 展开按钮在右下侧还是底部
+     * @default right
+     */
+    uiType?: "right" | "bottom";
+    className?: string;
+    /**
+     * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高
+     */
+    lineHeight?: React.CSSProperties["lineHeight"];
+    /**
+     * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度
+     */
+    lines?: number;
+    /**
+     * 展开按钮蒙层背景色(仅支持16进制表示)
+     * @default #fff
+     */
+    maskBgColor?: string;
+    /**
+     * text｜ReactNode  与children任传一个
+     */
+    content?: React.ReactNode;
+    /**
+     * 显示展开控制按钮
+     * @default true
+     */
+    showFoldControl?: boolean;
+    /**
+     * 展开按钮文字
+     * @default 收起
+     */
+    foldText?: string;
+    /**
+     * 展开按钮文字
+     * @default 展开
+     */
+    unfoldText?: string;
+    /**
+     * 自定义渲染展开按钮
+     */
+    renderFoldButton?: (fold: boolean) => React.ReactNode;
+    /**
+     * @param fold 折叠状态，true 折叠，false 展开
+     */
+    onFoldChange?: (fold: boolean) => void;
+    /**
+     * @param ellipsis 是否截断，true 截断，false 未截断
+     */
+    onEllipsisChange?: (ellipsis: boolean) => 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 {};

package/dist/index.js

@@ -0,0 +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;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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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"}

package/dist/index.mjs

@@ -0,0 +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};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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":"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"}

package/dist/index.modern.mjs

@@ -0,0 +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};
+//# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -0,0 +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":"2QA0Ba,MAAAA,EAAIC,EAAE,yBAyDH,SAAAC,GAAaC,UAC3BA,EAASC,WAITA,EAAa,GAAEC,MAIfA,EAAKC,YAILA,EAAc,OAAMC,QAIpBA,EAAOC,SACPA,EAAQC,gBAIRA,GAAkB,EAAIC,SACtBA,EAAW,KAAIC,WACfA,EAAa,KAAIC,OAIjBA,EAAS,QAAOC,iBAChBA,EAAgBC,iBAChBA,EAAgBC,aAChBA,IAGA,MAAOC,EAAUC,GAAeC,GAAS,IAClCC,EAAmBC,GAAwBF,GAAS,IAEpDG,EAAMC,GAAWJ,GAAS,IAC1BK,EAAcC,GAAmBN,EAAS,IAC1CO,EAAiBC,GAAsBR,EAAS,IAChDS,EAAa,EAAGC,GAAiBV,EAASb,IAE1CwB,GAAWC,EAAW,CAC3BC,oBAAqB,EACrBf,WACAK,OACAE,eACAT,mBACAC,gBACC,CAAC,mBAAoB,iBAElBiB,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAeF,EAAuB,MACtCG,EAAgBH,EAAuB,MAEvCI,EAAiBC,EAAQ,KACtB,CACLlC,WAAYA,IAGVe,EACE,WACAoB,KAEL,CAACnC,EAAYe,IAGVqB,EAAYF,EAAQ,KAExB,GAAKtB,GADSW,GACcF,EAG5B,MAAO,CAELgB,UAAWpB,GANCM,EAMkB,IAAOF,EAAnB,UAAyCc,EAC3DG,gBAAiBrB,EAPLM,OAOoBY,EAEhCI,cACa,WAAX/B,GAAwBS,OAAgCkB,EAAzB,GAAGd,QAErC,CAACE,EAAYF,EAAiBT,EAAUK,EAAMT,IAG3CgC,EAAWN,EAAQ,KACvB,GAAKjB,EAWL,MAAO,CACLwB,OAAQ,GAAGpB,MACXrB,WAAY,GAAGqB,MACfqB,WAAuB,WAAXlC,EAAsB,GAVpBa,WAUqCc,EACnDQ,YAAwB,UAAXnC,EAAqB,GAXpBa,WAWqCc,EAEnDS,WAAY,sBAAsBpC,MATbN,IACE,IAAvBA,EAAY2C,OAAe,IAAM,SAQ4B3C,KAXtC,UAAXM,EAFEa,EAE8BF,EAAgB,IAAM,QAWqBjB,YAExF,CAACmB,EAAiBnB,EAAae,EAAMT,EAAQW,IAE1C2B,EAAgBC,EAAY,KAE5BnB,EAAWoB,UACbpB,EAAWoB,QAAQC,MAAMC,MAAQ,UACL,MAA5BC,OAAOC,uBAAPD,OAAOC,sBAAwB,KACzBxB,EAAWoB,UACbpB,EAAWoB,QAAQC,MAAMC,MAAQ,YAItC,IAEGG,EAAmBN,EAAY,CAACO,EAAkCrC,GAAQQ,EAAQR,QACtFQ,EAAQR,KAAOA,EACfC,EAAQD,GACY,MAApBQ,EAAQd,cAARc,EAAQd,aAAeM,IACtB,IAEGsC,EAAarB,EAAQ,iBAEvBsB,EAAAC,cAAA,MAAA,CACE1D,UAAW2D,EAAG,mBAAoB,oBAAoBlD,KACtDyC,MAAOT,EACPmB,IAAK3B,EACL4B,QAASP,GAER5C,EACCA,EAAiBQ,gBAEjBuC,EAAAC,qBAAK1D,UAAW,YACbkB,EAAOV,EAAaD,IAK5B,CACDkC,EACAvB,EACAX,EACA+C,EACA5C,EAEAD,EACAD,IAIIsD,EAAad,EAAY,CAACnC,GAAW,KACzC,MAAOA,SAAUkD,EAAa7C,KAAM8C,GAAWtC,EAC3Cb,IAAakD,IACfrC,EAAQb,SAAWA,EACnBC,EAAYD,SACZa,EAAQf,kBAARe,EAAQf,iBAAmBE,GAEvBA,IAAamD,GACfV,OAAiBlB,GAAW,KAG/B,CAACkB,IAEEW,EAAejB,EAAY,KAC/B,MAAMkB,EAAUnC,EAAWkB,QACrBkB,EAAenC,EAAaiB,QAClC,IAAKiB,IAAYC,EACf,OAEFzC,EAAQE,oBAAsBsC,EAAQE,aACtC,IAAIC,EAAiB,EAGrB,IAAKA,GAAkBH,EAAS,CAC9B,MAAMI,EAAmC,MAAvBlB,OAAOmB,sBAAgB,EAAvBnB,OAAOmB,iBAAmBL,IACtCjE,WAAEA,GAAeqE,GAAa,GAChCrE,IAEFoE,EAAiBG,WAAWvE,GACvBoE,GACHpD,GAAqB,GAG1B,CAKD,GAHIK,IAAoB+C,GACtB9C,EAAmB8C,GAEhBnE,EASHuB,EAAcvB,GAEZ4D,EADEpC,EAAQE,sBAAwB1B,EAAQ,GAAKmE,QATjD,GAAI3C,EAAQE,qBAAsBuC,MAAAA,OAAAA,EAAAA,EAAcC,cAAc,CAC1D,MAAMK,EAAcC,KAAKC,MAAMR,EAAaC,aAAeC,GAC3D5C,EAAcgD,GACdX,GAAW,EACd,MACCA,GAAW,IAUd,CAAC5D,EAAOoB,EAAiBwC,IAI5Bc,EAAoB,KAClBd,IACAG,KACC,CAACA,EAAcH,IAGlBe,EAAU,KACR,GAAIhE,GAAYoB,EAAcgB,QAAS,CACrC,MAAM6B,YAACA,GAAe7C,EAAcgB,QAChC6B,IAAgBpD,EAAQN,eAC1BM,EAAQN,aAAe0D,EACvBzD,EAAgByD,GAEnB,GACA,CAACjE,EAAUL,IACdqE,EAAU,KACJE,GACFhC,KAED,CAAC7B,EAAM6B,IACV,MAAMiC,EAAe5E,GAAWC,EAC1B4E,EAAa9C,EAAQ,KAAK,IAAA+C,EAC5B,OAAOrE,GAAYK,GAAOgE,OAAAA,EAAAnD,EAAWkB,cAAXiC,EAAAA,EAAoBC,cAAe,QAAK/C,GACnE,CAACvB,EAAUK,iBAEd,OACEuC,EAAAC,qBAAK1D,UAAW2D,EAAG9D,EAAE,aAAcG,GAAYkD,MAAOhB,EAAgB0B,IAAK5B,gBAEzEyB,EAAAC,cAAC0B,EAAQC,CAAAA,WACN,EAAEC,aAAYC,kBAEb,MAAM7C,OAACA,GAAU6C,EAAYF,QAAU,CAAE,EAIzC,YAHejD,IAAXM,GAAwBgC,KAAKc,IAAI9C,EAAShB,EAAQE,qBAAuB,GAC3EqC,iBAEKR,EAAAC,qBAAK1D,UAAW,yBAA0B4D,IAAM6B,IACrDC,EAAUJ,EAAYG,GACtBC,EAAU3D,EAAY0D,KAErBT,kBAQPvB,EAAAC,qBAAK1D,UAAW,sBAAuB2F,MAAOV,EAAY/B,MAAOb,EAAWuB,IAAK/B,GAG9EhB,GAAYP,GAAmBkD,EAC/BwB,GAIT"}

package/dist/index.umd.js

@@ -0,0 +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});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n  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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"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@ohkit/text-ellipsis",
+  "version": "0.0.1-beta.0",
+  "description": "text ellipsis for react",
+  "keywords": [
+    "text ellipsis"
+  ],
+  "author": "wuqiuyang <wuqiuyang305@126.com>",
+  "homepage": "",
+  "license": "ISC",
+  "source": "src/index.@(js|jsx|mjs|ts|tsx)",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "directories": {
+    "dist": "dist",
+    "test": "__tests__"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WuQiuYang/ohkit"
+  },
+  "scripts": {
+    "build": "npm run clean && microbundle  --jsx React.createElement",
+    "dev": "npm run watch",
+    "watch": "microbundle watch --jsx React.createElement",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@ohkit/measure": "0.0.1-beta.0",
+    "@ohkit/utils": "0.0.1-beta.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "gitHead": "94f048aba9c99e94fa0362cdd3f7047b9e469ee4"
+}