@ohkit/text-ellipsis 0.0.3-alpha.0 → 0.0.3-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.es.js +1 -1
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.modern.mjs +1 -1
  6. package/dist/index.modern.mjs.map +1 -1
  7. package/dist/index.umd.js +1 -1
  8. package/dist/index.umd.js.map +1 -1
  9. package/dist/types/index.d.ts +4 -0
  10. package/package.json +3 -3
  11. package/src/index.tsx +11 -4
package/dist/index.es.js CHANGED
@@ -1,2 +1,2 @@
1
- import e,{forwardRef as t,useState as n,useRef as i,useMemo as o,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,T=t.uiType,O=void 0===T?"right":T,P=t.controlPlacement,S=void 0===P?"center":P,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],ie=te[1],oe=n("string"==typeof C&&C.endsWith("px")?parseFloat(C):0),le=oe[0],re=oe[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=i(null),ge=i(null),me=i(null),Ce=i(null),xe=o(function(){return{lineHeight:X?"1.4":C||void 0}},[C,X]),Ee=o(function(){if(K&&se&&le)return{minHeight:$?(se-.5)*le+"px":void 0,WebkitLineClamp:$?se:void 0,paddingBottom:"bottom"!==O&&$?void 0:le+"px"}},[se,le,K,$,O]),we=o(function(){if($){var e=le,t="right"===O?Math.min(e/ne*100,80):60;return{height:le+"px",lineHeight:le+"px",paddingTop:"bottom"===O?e+"px":void 0,paddingLeft:"right"===O?e+"px":void 0,background:"linear-gradient(to "+O+", "+w+(4===w.length?"0":"00")+", "+w+" "+t+"%, "+w+" 100%)"}}},[le,w,$,O,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=o(function(){/*#__PURE__*/return e.createElement("div",{className:a("btn-fold-wrapper","btn-fold-wrapper-"+O,"bottom"===O&&"placement-"+S),style:we,ref:Ce,onClick:He},q?q($):/*#__PURE__*/e.createElement("div",{className:"btn-fold"},$?N:B))},[we,$,B,He,q,S,O,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 i=((null==window.getComputedStyle?void 0:window.getComputedStyle(e))||{}).lineHeight;i&&((n=parseFloat(i))||Y(!0))}if(le===n||(re(n),n))if(x)se!==x&&ae(x),be(ve.contentOffsetHeight>=(x+1)*n-1);else if(ve.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){var o=Math.floor(t.offsetHeight/n);se!==o&&ae(o),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,ie(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=o(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},[]),console.log("[render TextEllipsis]: ellipsis fold runtime.inited: ",K,$,ve.inited),/*#__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,i=(t.contentRect.offset||{}).height;return void 0!==i&&Math.abs(i-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};
1
+ import e,{forwardRef as t,useState as n,useRef as o,useMemo as i,useCallback as l,useEffect as r}from"react";import{prefixClassname as f,useSyncPropsState as a,useRuntime as d,classNames as s,useCompatibleEffect as c,isSafari as u,assignRef as h}from"@ohkit/utils";import{Measure as p}from"@ohkit/measure";var v=f("ohkit-text-ellipsis__"),g=t(function(t,f){var g=t.className,m=t.lineHeight,C=void 0===m?"":m,x=t.lines,w=t.maskBgColor,E=void 0===w?"#fff":w,F=t.content,H=t.children,b=t.showTitleWhenFold,y=t.titleWhenFold,k=t.showFoldControl,W=void 0===k||k,M=t.foldText,S=void 0===M?"收起":M,B=t.unfoldText,L=void 0===B?"展开":B,N=t.uiType,O=void 0===N?"right":N,P=t.controlPlacement,T=void 0===P?"center":P,q=t.whiteSpace,A=t.renderFoldButton,R=t.onEllipsisChange,_=t.onFoldChange,z=t.onStatusChange,V=t.onMouseEnter,j=t.onMouseLeave,D=t.onPointerEnter,G=t.onPointerLeave,I=t.onClick,J=t.onFocus,K=n(!1),Q=K[0],U=K[1],X=n(!1),Y=X[0],Z=X[1],$=a(t,"fold",{defaultValue:!0,onChange:_}),ee=$[0],te=$[1],ne=n(1),oe=ne[0],ie=ne[1],le=n("string"==typeof C&&C.endsWith("px")?parseFloat(C):0),re=le[0],fe=le[1],ae=n(x),de=ae[0],se=void 0===de?0:de,ce=ae[1],ue=n(""),he=ue[0],pe=ue[1],ve=d({inited:!1,contentOffsetHeight:0,ellipsis:Q,fold:ee,foldBtnWidth:oe,textContent:he,onEllipsisChange:R,onFoldChange:_},["onEllipsisChange","fold","onFoldChange"])[0],ge=o(null),me=o(null),Ce=o(null),xe=o(null),we=i(function(){return{lineHeight:Y?"1.4":C||void 0}},[C,Y]),Ee=i(function(){if(Q&&se&&re)return{whiteSpace:q,minHeight:ee?(se-.2)*re+"px":void 0,WebkitLineClamp:ee?se:void 0,paddingBottom:"bottom"!==O&&ee?void 0:re+"px"}},[se,re,Q,ee,O,q]),Fe=i(function(){if(ee){var e=re,t="right"===O?Math.min(e/oe*100,80):60;return{boxSizing:"content-box",height:re+"px",lineHeight:re+"px",paddingTop:"bottom"===O?e+"px":void 0,paddingLeft:"right"===O?e+"px":void 0,background:"linear-gradient(to "+O+", "+E+(4===E.length?"0":"00")+", "+E+" "+t+"%, "+E+" 100%)"}}},[re,E,ee,O,oe]),He=l(function(){ge.current&&(ge.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){ge.current&&(ge.current.style.width="100%")}))},[]),be=l(function(e,t){void 0===t&&(t=!ve.fold),ve.fold=t,te(t)},[]),ye=i(function(){/*#__PURE__*/return e.createElement("div",{className:s("btn-fold-wrapper","btn-fold-wrapper-"+O,"bottom"===O&&"placement-"+T),style:Fe,ref:xe,onClick:be},A?A(ee):/*#__PURE__*/e.createElement("div",{className:"btn-fold"},ee?L:S))},[Fe,ee,S,be,A,T,O,L]),ke=l(function(e){void 0===e&&(e=ve.ellipsis);var t=ve.fold;e!==ve.ellipsis&&(U(e),ve.ellipsis=e,null==ve.onEllipsisChange||ve.onEllipsisChange(e),e&&!t&&be(void 0,!0))},[be]),We=l(function(){var e=me.current,t=Ce.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))||Z(!0))}if(re===n||(fe(n),n))if(x)se!==x&&ce(x),ke(ve.contentOffsetHeight>=(x+1)*n-1);else if(ve.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){var i=Math.floor(t.offsetHeight/n);se!==i&&ce(i),ke(!0)}else ke(!1)}},[x,re,ke]);c(function(){ke(),We()},[We,ke]),r(function(){if(Q&&xe.current){var e=xe.current.offsetWidth;e!==ve.foldBtnWidth&&(ve.foldBtnWidth=e,ie(e))}},[Q,L,W]),r(function(){u&&He()},[ee,He]);var Me=l(function(){var e,t=(null==(e=me.current)?void 0:e.textContent)||"";t!==ve.textContent&&(ve.textContent=t,pe(t))},[]),Se=F||H,Be=i(function(){return Q&&ee?"function"==typeof y?y(he):y||he:void 0},[y,Q,ee,he]);return r(function(){ve.inited&&(null==z||z({ellipsis:Q,fold:ee,title:Be}))},[z,ee,Q,Be]),r(function(){ve.inited=!0},[]),/*#__PURE__*/e.createElement("div",{className:s(v("container"),g),style:we,ref:function(e){h(Ce,e),f&&h(f,e)},onMouseEnter:V,onMouseLeave:j,onPointerEnter:D,onPointerLeave:G,onClick:I,onFocus:J},/*#__PURE__*/e.createElement(p,{offset:!0},function(t){var n=t.measureRef,o=(t.contentRect.offset||{}).height;return void 0!==o&&Math.abs(o-ve.contentOffsetHeight)>1&&We(),/*#__PURE__*/e.createElement("div",{style:{whiteSpace:q},className:"offset-height-computer",ref:function(e){h(n,e),h(me,e),Me()}},Se)}),/*#__PURE__*/e.createElement("div",{className:"text-ellipsis-inner",title:b?Be:void 0,style:Ee,ref:ge},Q&&W&&ye,Se))});export{g as TextEllipsis,v as c};
2
2
  //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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","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","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","finalContent","hoverTitle","title","console","log","r","assignRef","Measure","offset","_ref2","measureRef","contentRect","abs"],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\n * @default true\n */\n fold?: boolean;\n /**\n * 显示展开控制按钮\n * @default true\n */\n showFoldControl?: boolean;\n /**\n * 展开按钮位置 uiType='bottom'时有效\n * @default center\n */\n controlPlacement?: 'left' | 'center' | 'right';\n /**\n * 展开按钮文字\n * @default 收起\n */\n foldText?: string;\n /**\n * 展开按钮文字\n * @default 展开\n */\n unfoldText?: string;\n /**\n * 折叠状态下是否显示title属性\n * @default false\n */\n showTitleWhenFold?: boolean;\n /**\n * 折叠状态自定义title属性内容\n */\n titleWhenFold?: string | ((title: string) => string);\n /**\n * 是否保留换行\n */\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /**\n * 自定义渲染展开按钮\n */\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /**\n * @param fold 折叠状态，true 折叠，false 展开\n */\n onFoldChange?: (fold: boolean) => void;\n /**\n * @param ellipsis 是否截断，true 截断，false 未截断\n */\n onEllipsisChange?: (ellipsis: boolean) => void;\n /**\n * 关键状态变更触发\n * @param status\n */\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n // 是否截断\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 whiteSpace,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" || !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起 按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis) => {\n 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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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 style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/* <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> */}\n {/* 主文本显示 */}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/* {finalContent} */}\n {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","_props$lineHeight","lineHeight","lines","_props$maskBgColor","maskBgColor","content","children","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$controlPlaceme","controlPlacement","whiteSpace","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","_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","boxSizing","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","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.js CHANGED
@@ -1,2 +1,2 @@
1
- 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,p=i.children,v=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,T=i.onMouseLeave,B=i.onPointerEnter,L=i.onPointerLeave,P=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%")}))},[]),pe=e.useCallback(function(e,t){void 0===t&&(t=!le.fold),le.fold=t,I(t)},[]),ve=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:pe},y?y(G):/*#__PURE__*/o.default.createElement("div",{className:"btn-fold"},G?w:x))},[ce,G,x,pe,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&&pe(void 0,!0))},[pe]),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),n))if(u)ee!==u&&te(u),ge(le.contentOffsetHeight>=(u+1)*n-1);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||p,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},[]),console.log("[render TextEllipsis]: ellipsis fold runtime.inited: ",A,G,le.inited),/*#__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:T,onPointerEnter:B,onPointerLeave:L,onClick:P,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:v?xe:void 0,style:de,ref:se},A&&C&&ve,Ee))});exports.TextEllipsis=s,exports.c=l;
1
+ 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,p=i.children,v=i.showTitleWhenFold,g=i.titleWhenFold,m=i.showFoldControl,C=void 0===m||m,x=i.foldText,E=void 0===x?"收起":x,b=i.unfoldText,w=void 0===b?"展开":b,S=i.uiType,k=void 0===S?"right":S,y=i.controlPlacement,F=void 0===y?"center":y,H=i.whiteSpace,M=i.renderFoldButton,R=i.onEllipsisChange,N=i.onFoldChange,W=i.onStatusChange,B=i.onMouseEnter,L=i.onMouseLeave,P=i.onPointerEnter,T=i.onPointerLeave,q=i.onClick,O=i.onFocus,A=e.useState(!1),_=A[0],j=A[1],z=e.useState(!1),V=z[0],D=z[1],G=t.useSyncPropsState(i,"fold",{defaultValue:!0,onChange:N}),I=G[0],J=G[1],K=e.useState(1),Q=K[0],U=K[1],X=e.useState("string"==typeof r&&r.endsWith("px")?parseFloat(r):0),Y=X[0],Z=X[1],$=e.useState(u),ee=$[0],te=void 0===ee?0:ee,ne=$[1],ie=e.useState(""),oe=ie[0],le=ie[1],se=t.useRuntime({inited:!1,contentOffsetHeight:0,ellipsis:_,fold:I,foldBtnWidth:Q,textContent:oe,onEllipsisChange:R,onFoldChange:N},["onEllipsisChange","fold","onFoldChange"])[0],ae=e.useRef(null),fe=e.useRef(null),re=e.useRef(null),ue=e.useRef(null),de=e.useMemo(function(){return{lineHeight:V?"1.4":r||void 0}},[r,V]),ce=e.useMemo(function(){if(_&&te&&Y)return{whiteSpace:H,minHeight:I?(te-.2)*Y+"px":void 0,WebkitLineClamp:I?te:void 0,paddingBottom:"bottom"!==k&&I?void 0:Y+"px"}},[te,Y,_,I,k,H]),he=e.useMemo(function(){if(I){var e=Y,t="right"===k?Math.min(e/Q*100,80):60;return{boxSizing:"content-box",height:Y+"px",lineHeight:Y+"px",paddingTop:"bottom"===k?e+"px":void 0,paddingLeft:"right"===k?e+"px":void 0,background:"linear-gradient(to "+k+", "+c+(4===c.length?"0":"00")+", "+c+" "+t+"%, "+c+" 100%)"}}},[Y,c,I,k,Q]),pe=e.useCallback(function(){ae.current&&(ae.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){ae.current&&(ae.current.style.width="100%")}))},[]),ve=e.useCallback(function(e,t){void 0===t&&(t=!se.fold),se.fold=t,J(t)},[]),ge=e.useMemo(function(){/*#__PURE__*/return o.default.createElement("div",{className:t.classNames("btn-fold-wrapper","btn-fold-wrapper-"+k,"bottom"===k&&"placement-"+F),style:he,ref:ue,onClick:ve},M?M(I):/*#__PURE__*/o.default.createElement("div",{className:"btn-fold"},I?w:E))},[he,I,E,ve,M,F,k,w]),me=e.useCallback(function(e){void 0===e&&(e=se.ellipsis);var t=se.fold;e!==se.ellipsis&&(j(e),se.ellipsis=e,null==se.onEllipsisChange||se.onEllipsisChange(e),e&&!t&&ve(void 0,!0))},[ve]),Ce=e.useCallback(function(){var e=fe.current,t=re.current;if(e&&t){se.contentOffsetHeight=e.offsetHeight;var n=0;if(!n&&e){var i=((null==window.getComputedStyle?void 0:window.getComputedStyle(e))||{}).lineHeight;i&&((n=parseFloat(i))||D(!0))}if(Y===n||(Z(n),n))if(u)te!==u&&ne(u),me(se.contentOffsetHeight>=(u+1)*n-1);else if(se.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){var o=Math.floor(t.offsetHeight/n);te!==o&&ne(o),me(!0)}else me(!1)}},[u,Y,me]);t.useCompatibleEffect(function(){me(),Ce()},[Ce,me]),e.useEffect(function(){if(_&&ue.current){var e=ue.current.offsetWidth;e!==se.foldBtnWidth&&(se.foldBtnWidth=e,U(e))}},[_,w,C]),e.useEffect(function(){t.isSafari&&pe()},[I,pe]);var xe=e.useCallback(function(){var e,t=(null==(e=fe.current)?void 0:e.textContent)||"";t!==se.textContent&&(se.textContent=t,le(t))},[]),Ee=h||p,be=e.useMemo(function(){return _&&I?"function"==typeof g?g(oe):g||oe:void 0},[g,_,I,oe]);return e.useEffect(function(){se.inited&&(null==W||W({ellipsis:_,fold:I,title:be}))},[W,I,_,be]),e.useEffect(function(){se.inited=!0},[]),/*#__PURE__*/o.default.createElement("div",{className:t.classNames(l("container"),a),style:de,ref:function(e){t.assignRef(re,e),s&&t.assignRef(s,e)},onMouseEnter:B,onMouseLeave:L,onPointerEnter:P,onPointerLeave:T,onClick:q,onFocus:O},/*#__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-se.contentOffsetHeight)>1&&Ce(),/*#__PURE__*/o.default.createElement("div",{style:{whiteSpace:H},className:"offset-height-computer",ref:function(e){t.assignRef(n,e),t.assignRef(fe,e),xe()}},Ee)}),/*#__PURE__*/o.default.createElement("div",{className:"text-ellipsis-inner",title:v?be:void 0,style:ce,ref:ae},_&&C&&ge,Ee))});exports.TextEllipsis=s,exports.c=l;
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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","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","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","finalContent","hoverTitle","title","console","log","classNames","r","assignRef","Measure","offset","_ref2","measureRef","contentRect","abs"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\n * @default true\n */\n fold?: boolean;\n /**\n * 显示展开控制按钮\n * @default true\n */\n showFoldControl?: boolean;\n /**\n * 展开按钮位置 uiType='bottom'时有效\n * @default center\n */\n controlPlacement?: 'left' | 'center' | 'right';\n /**\n * 展开按钮文字\n * @default 收起\n */\n foldText?: string;\n /**\n * 展开按钮文字\n * @default 展开\n */\n unfoldText?: string;\n /**\n * 折叠状态下是否显示title属性\n * @default false\n */\n showTitleWhenFold?: boolean;\n /**\n * 折叠状态自定义title属性内容\n */\n titleWhenFold?: string | ((title: string) => string);\n /**\n * 是否保留换行\n */\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /**\n * 自定义渲染展开按钮\n */\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /**\n * @param fold 折叠状态，true 折叠，false 展开\n */\n onFoldChange?: (fold: boolean) => void;\n /**\n * @param ellipsis 是否截断，true 截断，false 未截断\n */\n onEllipsisChange?: (ellipsis: boolean) => void;\n /**\n * 关键状态变更触发\n * @param status\n */\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n // 是否截断\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 whiteSpace,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" || !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起 按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis) => {\n 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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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 style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/* <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> */}\n {/* 主文本显示 */}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/* {finalContent} */}\n {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","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","whiteSpace","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","boxSizing","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","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 CHANGED
@@ -1,2 +1,2 @@
1
- import e,{forwardRef as t,useState as n,useRef as o,useMemo as i,useCallback as l,useEffect as s}from"react";import{prefixClassname as r,useSyncPropsState as d,useRuntime as f,classNames as a,useCompatibleEffect as c,isSafari as h,assignRef as u}from"@ohkit/utils";import{Measure as p}from"@ohkit/measure";const g=r("ohkit-text-ellipsis__"),m=t((t,r)=>{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:T,onMouseLeave:O,onPointerEnter:P,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]=f({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]),se=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]),re=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)},[]),fe=i(()=>/*#__PURE__*/e.createElement("div",{className:a("btn-fold-wrapper",`btn-fold-wrapper-${k}`,"bottom"===k&&`placement-${W}`),style:se,ref:oe,onClick:de},M?M(z):/*#__PURE__*/e.createElement("div",{className:"btn-fold"},z?b:y)),[se,z,y,de,M,W,k,b]),ae=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),n))if(C)Q!==C&&U(C),ae(Z.contentOffsetHeight>=(C+1)*n-1);else if(Z.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){const e=Math.floor(t.offsetHeight/n);Q!==e&&U(e),ae(!0)}else ae(!1)},[C,J,ae]);c(()=>{ae(),ce()},[ce,ae]),s(()=>{if(R&&oe.current){const{offsetWidth:e}=oe.current;e!==Z.foldBtnWidth&&(Z.foldBtnWidth=e,I(e))}},[R,b,$]),s(()=>{h&&re()},[z,re]);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 s(()=>{Z.inited&&(null==N||N({ellipsis:R,fold:z,title:pe}))},[N,z,R,pe]),s(()=>{Z.inited=!0},[]),console.log("[render TextEllipsis]: ellipsis fold runtime.inited: ",R,z,Z.inited),/*#__PURE__*/e.createElement("div",{className:a(g("container"),m),style:ie,ref:e=>{u(ne,e),r&&u(r,e)},onMouseEnter:T,onMouseLeave:O,onPointerEnter:P,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&&$&&fe,ue))});export{m as TextEllipsis,g as c};
1
+ import e,{forwardRef as t,useState as n,useRef as o,useMemo as i,useCallback as l,useEffect as s}from"react";import{prefixClassname as r,useSyncPropsState as a,useRuntime as d,classNames as f,useCompatibleEffect as c,isSafari as h,assignRef as u}from"@ohkit/utils";import{Measure as p}from"@ohkit/measure";const g=r("ohkit-text-ellipsis__"),m=t((t,r)=>{const{className:m,lineHeight:v="",lines:C,maskBgColor:x="#fff",content:w,children:E,showTitleWhenFold:F,titleWhenFold:H,showFoldControl:$=!0,foldText:b="收起",unfoldText:y="展开",uiType:k="right",controlPlacement:W="center",whiteSpace:M,renderFoldButton:S,onEllipsisChange:B,onFoldChange:L,onStatusChange:N,onMouseEnter:O,onMouseLeave:P,onPointerEnter:T,onPointerLeave:q,onClick:A,onFocus:R}=t,[_,z]=n(!1),[V,j]=n(!1),[D,G]=a(t,"fold",{defaultValue:!0,onChange:L}),[I,J]=n(1),[K,Q]=n("string"==typeof v&&v.endsWith("px")?parseFloat(v):0),[U=0,X]=n(C),[Y,Z]=n(""),[ee]=d({inited:!1,contentOffsetHeight:0,ellipsis:_,fold:D,foldBtnWidth:I,textContent:Y,onEllipsisChange:B,onFoldChange:L},["onEllipsisChange","fold","onFoldChange"]),te=o(null),ne=o(null),oe=o(null),ie=o(null),le=i(()=>({lineHeight:V?"1.4":v||void 0}),[v,V]),se=i(()=>{if(_&&U&&K)return{whiteSpace:M,minHeight:D?(U-.2)*K+"px":void 0,WebkitLineClamp:D?U:void 0,paddingBottom:"bottom"!==k&&D?void 0:`${K}px`}},[U,K,_,D,k,M]),re=i(()=>{if(!D)return;const e=K,t="right"===k?Math.min(e/I*100,80):60;return{boxSizing:"content-box",height:`${K}px`,lineHeight:`${K}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%)`}},[K,x,D,k,I]),ae=l(()=>{te.current&&(te.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(()=>{te.current&&(te.current.style.width="100%")}))},[]),de=l((e,t=!ee.fold)=>{ee.fold=t,G(t)},[]),fe=i(()=>/*#__PURE__*/e.createElement("div",{className:f("btn-fold-wrapper",`btn-fold-wrapper-${k}`,"bottom"===k&&`placement-${W}`),style:re,ref:ie,onClick:de},S?S(D):/*#__PURE__*/e.createElement("div",{className:"btn-fold"},D?y:b)),[re,D,b,de,S,W,k,y]),ce=l((e=ee.ellipsis)=>{const{ellipsis:t,fold:n}=ee;e!==t&&(z(e),ee.ellipsis=e,null==ee.onEllipsisChange||ee.onEllipsisChange(e),e&&!n&&de(void 0,!0))},[de]),he=l(()=>{const e=ne.current,t=oe.current;if(!e||!t)return;ee.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(K===n||(Q(n),n))if(C)U!==C&&X(C),ce(ee.contentOffsetHeight>=(C+1)*n-1);else if(ee.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){const e=Math.floor(t.offsetHeight/n);U!==e&&X(e),ce(!0)}else ce(!1)},[C,K,ce]);c(()=>{ce(),he()},[he,ce]),s(()=>{if(_&&ie.current){const{offsetWidth:e}=ie.current;e!==ee.foldBtnWidth&&(ee.foldBtnWidth=e,J(e))}},[_,y,$]),s(()=>{h&&ae()},[D,ae]);const ue=l(()=>{var e;const t=(null==(e=ne.current)?void 0:e.textContent)||"";t!==ee.textContent&&(ee.textContent=t,Z(t))},[]),pe=w||E,ge=i(()=>_&&D?"function"==typeof H?H(Y):H||Y:void 0,[H,_,D,Y]);return s(()=>{ee.inited&&(null==N||N({ellipsis:_,fold:D,title:ge}))},[N,D,_,ge]),s(()=>{ee.inited=!0},[]),/*#__PURE__*/e.createElement("div",{className:f(g("container"),m),style:le,ref:e=>{u(oe,e),r&&u(r,e)},onMouseEnter:O,onMouseLeave:P,onPointerEnter:T,onPointerLeave:q,onClick:A,onFocus:R},/*#__PURE__*/e.createElement(p,{offset:!0},({measureRef:t,contentRect:n})=>{const{height:o}=n.offset||{};return void 0!==o&&Math.abs(o-ee.contentOffsetHeight)>1&&he(),/*#__PURE__*/e.createElement("div",{style:{whiteSpace:M},className:"offset-height-computer",ref:e=>{u(t,e),u(ne,e),ue()}},pe)}),/*#__PURE__*/e.createElement("div",{className:"text-ellipsis-inner",title:F?ge:void 0,style:se,ref:te},_&&$&&fe,pe))});export{m as TextEllipsis,g as c};
2
2
  //# sourceMappingURL=index.modern.mjs.map
package/dist/index.modern.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.modern.mjs","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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","console","log","r","assignRef","Measure","offset","measureRef","contentRect","abs"],"mappings":"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"}
1
+ {"version":3,"file":"index.modern.mjs","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\n * @default true\n */\n fold?: boolean;\n /**\n * 显示展开控制按钮\n * @default true\n */\n showFoldControl?: boolean;\n /**\n * 展开按钮位置 uiType='bottom'时有效\n * @default center\n */\n controlPlacement?: 'left' | 'center' | 'right';\n /**\n * 展开按钮文字\n * @default 收起\n */\n foldText?: string;\n /**\n * 展开按钮文字\n * @default 展开\n */\n unfoldText?: string;\n /**\n * 折叠状态下是否显示title属性\n * @default false\n */\n showTitleWhenFold?: boolean;\n /**\n * 折叠状态自定义title属性内容\n */\n titleWhenFold?: string | ((title: string) => string);\n /**\n * 是否保留换行\n */\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /**\n * 自定义渲染展开按钮\n */\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /**\n * @param fold 折叠状态，true 折叠，false 展开\n */\n onFoldChange?: (fold: boolean) => void;\n /**\n * @param ellipsis 是否截断，true 截断，false 未截断\n */\n onEllipsisChange?: (ellipsis: boolean) => void;\n /**\n * 关键状态变更触发\n * @param status\n */\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n // 是否截断\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 whiteSpace,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" || !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起 按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis) => {\n 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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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 style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/* <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> */}\n {/* 主文本显示 */}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/* {finalContent} */}\n {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","TextEllipsis","forwardRef","props","ref","className","lineHeight","lines","maskBgColor","content","children","showTitleWhenFold","titleWhenFold","showFoldControl","foldText","unfoldText","uiType","controlPlacement","whiteSpace","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","boxSizing","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 CHANGED
@@ -1,2 +1,2 @@
1
- !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,T=e.onStatusChange,N=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),n))if(r)ee!==r&&te(r),me(le.contentOffsetHeight>=(r+1)*n-1);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==T||T({ellipsis:j,fold:G,title:xe}))},[T,G,j,xe]),t.useEffect(function(){le.inited=!0},[]),console.log("[render TextEllipsis]: ellipsis fold runtime.inited: ",j,G,le.inited),/*#__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:N,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});
1
+ !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,x=e.foldText,E=void 0===x?"收起":x,b=e.unfoldText,w=void 0===b?"展开":b,y=e.uiType,k=void 0===y?"right":y,S=e.controlPlacement,F=void 0===S?"center":S,H=e.whiteSpace,M=e.renderFoldButton,R=e.onEllipsisChange,N=e.onFoldChange,T=e.onStatusChange,W=e.onMouseEnter,B=e.onMouseLeave,L=e.onPointerEnter,P=e.onPointerLeave,q=e.onClick,O=e.onFocus,j=t.useState(!1),A=j[0],_=j[1],z=t.useState(!1),V=z[0],D=z[1],G=n.useSyncPropsState(e,"fold",{defaultValue:!0,onChange:N}),I=G[0],J=G[1],K=t.useState(1),Q=K[0],U=K[1],X=t.useState("string"==typeof u&&u.endsWith("px")?parseFloat(u):0),Y=X[0],Z=X[1],$=t.useState(r),ee=$[0],te=void 0===ee?0:ee,ne=$[1],ie=t.useState(""),oe=ie[0],le=ie[1],se=n.useRuntime({inited:!1,contentOffsetHeight:0,ellipsis:A,fold:I,foldBtnWidth:Q,textContent:oe,onEllipsisChange:R,onFoldChange:N},["onEllipsisChange","fold","onFoldChange"])[0],fe=t.useRef(null),ae=t.useRef(null),ue=t.useRef(null),re=t.useRef(null),de=t.useMemo(function(){return{lineHeight:V?"1.4":u||void 0}},[u,V]),ce=t.useMemo(function(){if(A&&te&&Y)return{whiteSpace:H,minHeight:I?(te-.2)*Y+"px":void 0,WebkitLineClamp:I?te:void 0,paddingBottom:"bottom"!==k&&I?void 0:Y+"px"}},[te,Y,A,I,k,H]),he=t.useMemo(function(){if(I){var e=Y,t="right"===k?Math.min(e/Q*100,80):60;return{boxSizing:"content-box",height:Y+"px",lineHeight:Y+"px",paddingTop:"bottom"===k?e+"px":void 0,paddingLeft:"right"===k?e+"px":void 0,background:"linear-gradient(to "+k+", "+c+(4===c.length?"0":"00")+", "+c+" "+t+"%, "+c+" 100%)"}}},[Y,c,I,k,Q]),pe=t.useCallback(function(){fe.current&&(fe.current.style.width="99.999%",null==window.requestAnimationFrame||window.requestAnimationFrame(function(){fe.current&&(fe.current.style.width="100%")}))},[]),ge=t.useCallback(function(e,t){void 0===t&&(t=!se.fold),se.fold=t,J(t)},[]),me=t.useMemo(function(){/*#__PURE__*/return l.default.createElement("div",{className:n.classNames("btn-fold-wrapper","btn-fold-wrapper-"+k,"bottom"===k&&"placement-"+F),style:he,ref:re,onClick:ge},M?M(I):/*#__PURE__*/l.default.createElement("div",{className:"btn-fold"},I?w:E))},[he,I,E,ge,M,F,k,w]),ve=t.useCallback(function(e){void 0===e&&(e=se.ellipsis);var t=se.fold;e!==se.ellipsis&&(_(e),se.ellipsis=e,null==se.onEllipsisChange||se.onEllipsisChange(e),e&&!t&&ge(void 0,!0))},[ge]),Ce=t.useCallback(function(){var e=ae.current,t=ue.current;if(e&&t){se.contentOffsetHeight=e.offsetHeight;var n=0;if(!n&&e){var i=((null==window.getComputedStyle?void 0:window.getComputedStyle(e))||{}).lineHeight;i&&((n=parseFloat(i))||D(!0))}if(Y===n||(Z(n),n))if(r)te!==r&&ne(r),ve(se.contentOffsetHeight>=(r+1)*n-1);else if(se.contentOffsetHeight>(null==t?void 0:t.offsetHeight)){var o=Math.floor(t.offsetHeight/n);te!==o&&ne(o),ve(!0)}else ve(!1)}},[r,Y,ve]);n.useCompatibleEffect(function(){ve(),Ce()},[Ce,ve]),t.useEffect(function(){if(A&&re.current){var e=re.current.offsetWidth;e!==se.foldBtnWidth&&(se.foldBtnWidth=e,U(e))}},[A,w,C]),t.useEffect(function(){n.isSafari&&pe()},[I,pe]);var xe=t.useCallback(function(){var e,t=(null==(e=ae.current)?void 0:e.textContent)||"";t!==se.textContent&&(se.textContent=t,le(t))},[]),Ee=h||p,be=t.useMemo(function(){return A&&I?"function"==typeof m?m(oe):m||oe:void 0},[m,A,I,oe]);return t.useEffect(function(){se.inited&&(null==T||T({ellipsis:A,fold:I,title:be}))},[T,I,A,be]),t.useEffect(function(){se.inited=!0},[]),/*#__PURE__*/l.default.createElement("div",{className:n.classNames(s("container"),f),style:de,ref:function(e){n.assignRef(ue,e),o&&n.assignRef(o,e)},onMouseEnter:W,onMouseLeave:B,onPointerEnter:L,onPointerLeave:P,onClick:q,onFocus:O},/*#__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-se.contentOffsetHeight)>1&&Ce(),/*#__PURE__*/l.default.createElement("div",{style:{whiteSpace:H},className:"offset-height-computer",ref:function(e){n.assignRef(t,e),n.assignRef(ae,e),xe()}},Ee)}),/*#__PURE__*/l.default.createElement("div",{className:"text-ellipsis-inner",title:g?be:void 0,style:ce,ref:fe},A&&C&&me,Ee))});e.TextEllipsis=f,e.c=s});
2
2
  //# sourceMappingURL=index.umd.js.map
package/dist/index.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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","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","offsetWidth","isSafari","updateTextContent","_wrapperRef$current","newTextContent","finalContent","hoverTitle","title","console","log","classNames","r","assignRef","Measure","offset","_ref2","measureRef","contentRect","abs"],"mappings":"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"}
1
+ {"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n forwardRef,\n useState,\n useMemo,\n useEffect,\n useCallback,\n useRef,\n PropsWithChildren,\n MouseEvent,\n} from \"react\";\nimport \"./style.scss\";\nimport {\n isSafari,\n prefixClassname as p,\n classNames as cx,\n assignRef,\n useRuntime,\n useCompatibleEffect,\n useSyncPropsState,\n} from \"@ohkit/utils\";\nimport { Measure } from \"@ohkit/measure\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n extends Pick<\n React.DOMAttributes<HTMLDivElement>,\n | \"onMouseEnter\"\n | \"onMouseLeave\"\n | \"onPointerEnter\"\n | \"onPointerLeave\"\n | \"onFocus\"\n | \"onClick\"\n > {\n /**\n * right | bottom 展开按钮在右下侧还是底部\n * @default right\n */\n uiType?: \"right\" | \"bottom\";\n /**\n * 自定义样式类名，会附加到根元素上\n */\n className?: string;\n /**\n * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n */\n lineHeight?: React.CSSProperties[\"lineHeight\"];\n /**\n * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n */\n lines?: number;\n /**\n * 展开按钮蒙层背景色(仅支持16进制表示)\n * @default #fff\n */\n maskBgColor?: string;\n /**\n * text｜ReactNode 与children任传一个\n */\n content?: React.ReactNode;\n /**\n * 折叠状态\n * @default true\n */\n fold?: boolean;\n /**\n * 显示展开控制按钮\n * @default true\n */\n showFoldControl?: boolean;\n /**\n * 展开按钮位置 uiType='bottom'时有效\n * @default center\n */\n controlPlacement?: 'left' | 'center' | 'right';\n /**\n * 展开按钮文字\n * @default 收起\n */\n foldText?: string;\n /**\n * 展开按钮文字\n * @default 展开\n */\n unfoldText?: string;\n /**\n * 折叠状态下是否显示title属性\n * @default false\n */\n showTitleWhenFold?: boolean;\n /**\n * 折叠状态自定义title属性内容\n */\n titleWhenFold?: string | ((title: string) => string);\n /**\n * 是否保留换行\n */\n whiteSpace?: React.CSSProperties['whiteSpace'];\n /**\n * 自定义渲染展开按钮\n */\n renderFoldButton?: (fold: boolean) => React.ReactNode;\n /**\n * @param fold 折叠状态，true 折叠，false 展开\n */\n onFoldChange?: (fold: boolean) => void;\n /**\n * @param ellipsis 是否截断，true 截断，false 未截断\n */\n onEllipsisChange?: (ellipsis: boolean) => void;\n /**\n * 关键状态变更触发\n * @param status\n */\n onStatusChange?: (status: {\n fold: boolean;\n ellipsis: boolean;\n title?: string;\n }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props, ref) => {\n const {\n className,\n lineHeight = \"\",\n lines,\n maskBgColor = \"#fff\",\n content,\n children,\n showTitleWhenFold,\n titleWhenFold,\n showFoldControl = true,\n foldText = \"收起\",\n unfoldText = \"展开\",\n uiType = \"right\",\n controlPlacement = 'center',\n whiteSpace,\n renderFoldButton,\n onEllipsisChange,\n onFoldChange,\n onStatusChange,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onClick,\n onFocus,\n } = props;\n // 是否截断\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 whiteSpace,\n // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n minHeight: fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,\n WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案\n // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案\n // maxHeight: isSafari && ellipsis && fold ? lines * innerLineHeight : undefined,\n paddingBottom:\n uiType === \"bottom\" || !fold ? `${innerLineHeight}px` : undefined,\n };\n }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);\n\n // 展开｜收起 按钮样式\n const btnStyle = useMemo(() => {\n if (!fold) {\n return;\n }\n // 按钮padding，取行高\n const padding = innerLineHeight;\n // 蒙层透明度所占比例\n const ratio = uiType === \"right\" ? Math.min((padding / foldBtnWidth) * 100, 80) : 60;\n // 16进制透明色(考虑简写方式), 不直接使用css的transparent是因为safari的表现是灰色\n const transparent = `${maskBgColor}${\n maskBgColor.length === 4 ? \"0\" : \"00\"\n }`;\n return {\n boxSizing: 'content-box' as const,\n height: `${innerLineHeight}px`,\n lineHeight: `${innerLineHeight}px`,\n paddingTop: uiType === \"bottom\" ? `${padding}px` : undefined,\n paddingLeft: uiType === \"right\" ? `${padding}px` : undefined,\n // 渐变蒙层\n background: `linear-gradient(to ${uiType}, ${transparent}, ${maskBgColor} ${ratio}%, ${maskBgColor} 100%)`,\n };\n }, [innerLineHeight, maskBgColor, fold, uiType, foldBtnWidth]);\n\n const reorganizeDom = useCallback(() => {\n // safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n if (contentRef.current) {\n contentRef.current.style.width = \"99.999%\";\n window.requestAnimationFrame?.(() => {\n if (contentRef.current) {\n contentRef.current.style.width = \"100%\";\n }\n });\n }\n }, []);\n\n const handleFoldChange = useCallback(\n (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n runtime.fold = fold;\n setFold(fold);\n }, []);\n\n const ButtonComp = useMemo(() => {\n return (\n <div\n className={cx(\n \"btn-fold-wrapper\",\n `btn-fold-wrapper-${uiType}`,\n uiType === \"bottom\" && `placement-${controlPlacement}`\n )}\n style={btnStyle}\n ref={btnWrapperRef}\n onClick={handleFoldChange}\n >\n {renderFoldButton ? (\n renderFoldButton(fold)\n ) : (\n <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n )}\n </div>\n );\n }, [\n btnStyle,\n fold,\n foldText,\n handleFoldChange,\n renderFoldButton,\n controlPlacement,\n uiType,\n unfoldText,\n ]);\n\n // 重置状态\n const resetState = useCallback((newEllipsis = runtime.ellipsis) => {\n 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 if (!realLineHeight) {\n return;\n }\n }\n if (!lines) {\n if (runtime.contentOffsetHeight > containerDom?.offsetHeight) {\n const adjustLines = Math.floor(containerDom.offsetHeight / realLineHeight);\n if (innerLines !== adjustLines) {\n setInnerLines(adjustLines);\n }\n resetState(true);\n } else {\n resetState(false);\n }\n } else {\n if (innerLines !== lines) {\n setInnerLines(lines);\n }\n // 允许误差1px（行高为小数时）\n if (runtime.contentOffsetHeight >= (lines + 1) * realLineHeight - 1) {\n resetState(true);\n } else {\n resetState(false);\n }\n }\n }, [lines, innerLineHeight, resetState]);\n\n // 监听内容高度，是否需要折叠\n // 用useLayoutEffect方式闪屏显示\n useCompatibleEffect(() => {\n resetState();\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 style={{whiteSpace}} className={\"offset-height-computer\"} ref={(r) => {\n assignRef(measureRef, r);\n assignRef(wrapperRef, r);\n updateTextContent();\n }}>\n {finalContent}\n </div>\n }}\n </Measure>\n {/* <div className={\"offset-height-computer\"} ref={wrapperRef}>\n {finalContent}\n </div> */}\n {/* 主文本显示 */}\n <div\n className={\"text-ellipsis-inner\"}\n title={showTitleWhenFold ? hoverTitle : undefined}\n style={wrapStyle}\n ref={contentRef}\n >\n {/* {finalContent} */}\n {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n {ellipsis && showFoldControl && ButtonComp}\n {finalContent}\n </div>\n </div>\n );\n});\n"],"names":["c","p","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","whiteSpace","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","boxSizing","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","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/types/index.d.ts CHANGED
@@ -68,6 +68,10 @@ interface ITextEllipsis extends Pick<React.DOMAttributes<HTMLDivElement>, "onMou
68
68
  * 折叠状态自定义title属性内容
69
69
  */
70
70
  titleWhenFold?: string | ((title: string) => string);
71
+ /**
72
+ * 是否保留换行
73
+ */
74
+ whiteSpace?: React.CSSProperties['whiteSpace'];
71
75
  /**
72
76
  * 自定义渲染展开按钮
73
77
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohkit/text-ellipsis",
3
- "version": "0.0.3-alpha.0",
3
+ "version": "0.0.3-alpha.1",
4
4
  "description": "text ellipsis for react",
5
5
  "keywords": [
6
6
  "text ellipsis"
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@ohkit/measure": "0.0.3-alpha.0",
36
- "@ohkit/utils": "0.0.3-alpha.0"
36
+ "@ohkit/utils": "0.0.3-alpha.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "react": "^18.3.1",
@@ -43,5 +43,5 @@
43
43
  "react": ">=16.8.0",
44
44
  "react-dom": ">=16.8.0"
45
45
  },
46
- "gitHead": "4692f37e1227a748d08f70bf6f5fb7bb8bfc1ecc"
46
+ "gitHead": "b99b9c045114435c96547ad13c30f21e6a49f4c0"
47
47
  }
package/src/index.tsx CHANGED
@@ -98,6 +98,10 @@ interface ITextEllipsis
98
98
  * 折叠状态自定义title属性内容
99
99
  */
100
100
  titleWhenFold?: string | ((title: string) => string);
101
+ /**
102
+ * 是否保留换行
103
+ */
104
+ whiteSpace?: React.CSSProperties['whiteSpace'];
101
105
  /**
102
106
  * 自定义渲染展开按钮
103
107
  */
@@ -138,6 +142,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
138
142
  unfoldText = "展开",
139
143
  uiType = "right",
140
144
  controlPlacement = 'center',
145
+ whiteSpace,
141
146
  renderFoldButton,
142
147
  onEllipsisChange,
143
148
  onFoldChange,
@@ -195,8 +200,9 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
195
200
  return;
196
201
  }
197
202
  return {
203
+ whiteSpace,
198
204
  // HACK: 兼容safari 15+ 富文本折叠高度丢失问题
199
- minHeight: fold ? `${(lines - 0.5) * innerLineHeight}px` : undefined,
205
+ minHeight: fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,
200
206
  WebkitLineClamp: fold ? lines : undefined, // 利用-webkit-line-clamp截断方案
201
207
  // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案
202
208
  // WebkitLineClamp: isSafari ? undefined : ellipsis && fold && lines, // 利用-webkit-line-clamp截断方案
@@ -204,7 +210,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
204
210
  paddingBottom:
205
211
  uiType === "bottom" || !fold ? `${innerLineHeight}px` : undefined,
206
212
  };
207
- }, [innerLines, innerLineHeight, ellipsis, fold, uiType]);
213
+ }, [innerLines, innerLineHeight, ellipsis, fold, uiType, whiteSpace]);
208
214
 
209
215
  // 展开｜收起 按钮样式
210
216
  const btnStyle = useMemo(() => {
@@ -220,6 +226,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
220
226
  maskBgColor.length === 4 ? "0" : "00"
221
227
  }`;
222
228
  return {
229
+ boxSizing: 'content-box' as const,
223
230
  height: `${innerLineHeight}px`,
224
231
  lineHeight: `${innerLineHeight}px`,
225
232
  paddingTop: uiType === "bottom" ? `${padding}px` : undefined,
@@ -391,7 +398,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
391
398
  useEffect(() => {
392
399
  runtime.inited = true;
393
400
  }, []);
394
- console.log('[render TextEllipsis]: ellipsis fold runtime.inited: ', ellipsis, fold, runtime.inited);
401
+ // console.log('[render TextEllipsis]: ellipsis fold runtime.inited: ', ellipsis, fold, runtime.inited);
395
402
  return (
396
403
  <div
397
404
  className={cx(c("container"), className)}
@@ -415,7 +422,7 @@ export const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>((props
415
422
  if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {
416
423
  calcEllipsis();
417
424
  }
418
- return <div className={"offset-height-computer"} ref={(r) => {
425
+ return <div style={{whiteSpace}} className={"offset-height-computer"} ref={(r) => {
419
426
  assignRef(measureRef, r);
420
427
  assignRef(wrapperRef, r);
421
428
  updateTextContent();