@ohkit/text-ellipsis 0.0.17 → 0.1.1

package/dist/index.css

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

package/dist/index.css.map

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

package/dist/index.es.js.map

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

package/dist/index.js.map

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

package/dist/index.modern.mjs.map

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

package/dist/index.umd.js.map

@@ -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 {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {\n  assignRef,\n  useRuntime,\n  useCompatibleEffect,\n  useSyncPropsState,\n} from \"@ohkit/react-helper\";\nimport {isSafari} from \"@ohkit/platform\";\nimport {rgbaToObj, findEffectiveBgColor} from \"@ohkit/dom-helper\";\nimport {Measure, MeasureProps} from \"@ohkit/measure\";\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n  extends Pick<\n    React.DOMAttributes<HTMLDivElement>,\n    | \"onMouseEnter\"\n    | \"onMouseLeave\"\n    | \"onPointerEnter\"\n    | \"onPointerLeave\"\n    | \"onFocus\"\n    | \"onClick\"\n  > {\n  /**\n   * 自定义样式类名，会附加到根元素上\n   */\n  className?: string;\n  /**\n   * 自定义样式\n   */\n  style?: React.CSSProperties;\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   * @default right\n   */\n  uiType?: \"right\" | \"bottom\";\n  /**\n   * 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)\n   * @default line\n   */\n  truncateMode?: \"line\" | \"height\";\n  /**\n   * truncateMode === \"height\" 时生效\n   * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效 自动截断到容器的最大高度\n   * 单位: px\n   */\n  maxHeight?: number;\n  /**\n   * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n   */\n  lineHeight?: React.CSSProperties[\"lineHeight\"];\n  /**\n   * truncateMode === \"line\" 时生效\n   * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n   */\n  lines?: number;\n  /**\n   * 展开按钮蒙层背景色(仅支持16进制表示)\n   * @default #fff\n   */\n  maskBgColor?: string;\n  /**\n   * text｜ReactNode  与children任传一个\n   */\n  content?: React.ReactNode;\n  /**\n   * 当 content or children or ellipsis 变化时，重置 fold 状态 \n   * @default false\n   */\n  resetFoldWhenChildrenOrEllipsisChange?: boolean;\n  /**\n   * 折叠状态\n   * @default true\n   */\n  fold?: boolean;\n  /**\n   * 显示展开控制按钮\n   * @default true\n   */\n  showFoldControl?: boolean;\n  /**\n   * 展开按钮位置 uiType='bottom'时有效\n   * @default center\n   */\n  controlPlacement?: 'left' | 'center' | 'right';\n  /**\n   * 折叠按钮文字\n   * @default 收起\n   */\n  foldText?: string;\n  /**\n   * 展开按钮文字\n   * @default 展开\n   */\n  unfoldText?: string;\n  /**\n   * 折叠状态下是否显示title属性\n   * @default false\n   */\n  showTitleWhenFold?: boolean;\n  /**\n   * 折叠状态自定义title属性内容\n   */\n  titleWhenFold?: string | ((title: string) => string);\n  /**\n   * 是否保留换行\n   */\n  whiteSpace?: React.CSSProperties['whiteSpace'];\n  /**\n   * 容器宽度（默认自适应内容）\n   * 应用场景：whiteSpace='pre*' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定\n   */\n  width?: React.CSSProperties['width'];\n  /**\n   * 自定义渲染展开按钮\n   */\n  renderFoldButton?: (fold: boolean) => React.ReactNode;\n  /**\n   * @param fold 折叠状态，true 折叠，false 展开\n   */\n  onFoldChange?: (fold: boolean) => void;\n  /**\n   * @param ellipsis 是否截断，true 截断，false 未截断\n   */\n  onEllipsisChange?: (ellipsis: boolean) => void;\n  /**\n   * 关键状态变更触发\n   * @param status\n   */\n  onStatusChange?: (status: {\n    fold: boolean;\n    ellipsis: boolean;\n    title?: string;\n  }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>(function TextEllipsis(props, ref) {\n  const {\n    className,\n    style,\n    lineHeight = \"\",\n    lines,\n    maskBgColor,\n    content,\n    children,\n    resetFoldWhenChildrenOrEllipsisChange = false,\n    showTitleWhenFold,\n    titleWhenFold,\n    showFoldControl = true,\n    foldText = \"收起\",\n    unfoldText = \"展开\",\n    uiType = \"right\",\n    truncateMode = \"line\",\n    maxHeight,\n    controlPlacement = 'center',\n    whiteSpace,\n    width,\n    renderFoldButton,\n    onEllipsisChange,\n    onFoldChange,\n    onStatusChange,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onClick,\n    onFocus,\n  } = props;\n  const finalContent = content || children;\n  // 是否截断\n  const [ellipsis, setEllipsis] = useState(false);\n  const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n  // 折叠状态\n  const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n  const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n  const [innerLineHeight, setInnerLineHeight] = useState(\n    typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n      ? parseFloat(lineHeight)\n      : 0\n  );\n  const [innerLines = 0, setInnerLines] = useState(lines);\n  // children提取的纯文本\n  const [textContent, setTextContent] = useState('');\n\n  const [runtime] = useRuntime({\n    inited: false, // mounted\n    contentOffsetHeight: 0, // 内容节点offsetHeight\n    containerContentHeight: 0, // 容器内容高度 = 容器高 - 上下padding\n    ellipsis,\n    defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n    fold,\n    foldBtnWidth,\n    textContent,\n    onEllipsisChange,\n    onFoldChange,\n    onStatusChange,\n  }, ['fold', 'onEllipsisChange', 'onFoldChange', 'onStatusChange']);\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n  const containerStyle = useMemo(() => {\n    return {\n      lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n        ? \"1.4\" // more brower normal default lineHeight\n        : lineHeight ? lineHeight : undefined,\n      ...style,\n    };\n  }, [style, lineHeight, getLineHeightFail]);\n\n  const commonWrapStyle = useMemo(() => {\n    return {\n      whiteSpace,\n      width,\n    };\n  }, [whiteSpace, width]);\n  // 容器样式\n  const wrapStyle = useMemo(() => {\n    const lines = innerLines;\n    const isHeightMode = truncateMode === 'height';\n    if (!ellipsis || !isHeightMode && (!lines || !innerLineHeight)) {\n      return commonWrapStyle;\n    }\n    const paddingBottom = showFoldControl && (uiType === \"bottom\" && !fold) ? `${innerLineHeight}px` : undefined;\n    return {\n      ...commonWrapStyle,\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: !isHeightMode && fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,\n      // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案？目前先交给用户去判断，自行选择truncateMode\n      // WebkitLineClamp: isSafari ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n      // maxHeight: isSafari && fold ? lines * innerLineHeight : undefined,\n      WebkitLineClamp: isHeightMode ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n      maxHeight: isHeightMode && fold ? (maxHeight || lines * innerLineHeight || runtime.containerContentHeight || 0) : undefined,\n      paddingBottom,\n      boxSizing: paddingBottom ? 'border-box' as const : undefined,\n    };\n  }, [innerLines, innerLineHeight, ellipsis, fold, showFoldControl, uiType, truncateMode, maxHeight, commonWrapStyle]);\n\n  // 计算折叠按钮蒙层的渐变颜色\n  const validMaskBgColor = useMemo(() => {\n    if (!showFoldControl || !ellipsis) {\n      return null;\n    }\n    const {r, g, b} = rgbaToObj(maskBgColor || '') || findEffectiveBgColor(containerRef.current);\n    return {\n      startColor: `rgba(${r}, ${g}, ${b}, 0.2)`,\n      endColor: `rgba(${r}, ${g}, ${b}, 1)`,\n    };\n  }, [maskBgColor, ellipsis, showFoldControl]);\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    const {startColor = 'rgba(255,255,255,0.2)', endColor = 'rgba(255,255,255,1)'} = validMaskBgColor || {};\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}, ${startColor}, ${endColor} ${ratio}%, ${endColor} 100%)`,\n    };\n  }, [innerLineHeight, fold, uiType, foldBtnWidth, validMaskBgColor]);\n\n  const reorganizeDom = useCallback(() => {\n    // Note: safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n    if (contentRef.current) {\n      const orginStyleWidth = contentRef.current.style.width;\n      const orginWidth = window.getComputedStyle(contentRef.current).width;\n      // console.log('orginWidth, orginStyleWidth:', orginWidth, orginStyleWidth);\n      contentRef.current.style.width = `${parseFloat(orginWidth) - 0.1}px`;\n      window.requestAnimationFrame?.(() => {\n        if (contentRef.current) {\n          contentRef.current.style.width = orginStyleWidth;\n        }\n      });\n    }\n  }, []);\n\n  const handleFoldChange = useCallback(\n    (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n      runtime.fold = fold;\n      setFold(fold);\n  }, []);\n\n  const ButtonComp = useMemo(() => {\n    return (\n      <div\n        className={cx(\n          \"btn-fold-wrapper\",\n          `btn-fold-wrapper-${uiType}`,\n          uiType === \"bottom\" && `placement-${controlPlacement}`\n        )}\n        style={btnStyle}\n        ref={btnWrapperRef}\n        onClick={handleFoldChange}\n      >\n        {renderFoldButton ? (\n          renderFoldButton(fold)\n        ) : (\n          <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n        )}\n      </div>\n    );\n  }, [\n    btnStyle,\n    fold,\n    foldText,\n    handleFoldChange,\n    renderFoldButton,\n    controlPlacement,\n    uiType,\n    unfoldText,\n  ]);\n\n  // 占位按钮\n  const ButtonShadowDom = useMemo(() => {\n    if (!ellipsis || !showFoldControl || uiType !== 'right' || fold) {\n      return null;\n    }\n    return <span style={btnStyle} className=\"btn-fold-right-shadow\">\n      {renderFoldButton ? renderFoldButton(fold) : foldText}\n    </span>;\n  }, [ellipsis, uiType, showFoldControl, fold, btnStyle, foldText, renderFoldButton]);\n\n  // 重置状态\n  const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n    forceResetFold = false, // 强制重置fold 比如child变化时\n  } = {}) => {\n    const {ellipsis, fold: preFold, defaultFold} = runtime;\n    if (newEllipsis !== ellipsis) {\n      setEllipsis(newEllipsis);\n      runtime.ellipsis = newEllipsis;\n      runtime.onEllipsisChange?.(newEllipsis);\n    }\n    // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n    if (\n      resetFoldWhenChildrenOrEllipsisChange\n      && (forceResetFold  || !ellipsis && newEllipsis)\n      && preFold !== defaultFold\n    ) {\n      handleFoldChange(undefined, defaultFold);\n    }\n  }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n  const calcEllipsis = useCallback(() => {\n    const wrapDom = wrapperRef.current;\n    const containerDom = containerRef.current;\n    if (!wrapDom || !containerDom) {\n      return;\n    }\n    runtime.contentOffsetHeight = wrapDom.offsetHeight;\n    const containerStyle = window.getComputedStyle(containerDom);\n    const paddingTop = parseFloat(containerStyle.paddingTop);\n    const paddingBottom = parseFloat(containerStyle.paddingBottom);\n    const containerContentHeight = runtime.containerContentHeight = containerDom.clientHeight - paddingTop - paddingBottom;\n\n    // 计算真实行高\n    let realLineHeight = 0;\n    // 若外部未传入, 尝试读取当前文本的行高。\n    if (!realLineHeight && wrapDom) {\n      const {lineHeight} = containerStyle || {};\n      if (lineHeight) {\n        // 未设置行高的为 normal\n        realLineHeight = parseFloat(lineHeight);\n        if (!realLineHeight) {\n          setGetLineHeightFail(true);\n        }\n      }\n    }\n    // lineHeight同步到innerLineHeight\n    if (innerLineHeight !== realLineHeight) {\n      setInnerLineHeight(realLineHeight);\n      if (!realLineHeight) {\n        return;\n      }\n    }\n\n    const isHeightMode = truncateMode === 'height';\n    // 高度截断模式，比较简单 直接判断是否超出容器高度\n    if (isHeightMode) {\n      resetState(runtime.contentOffsetHeight > (maxHeight || containerContentHeight));\n      return;\n    }\n\n    // 行数截断模式，需要利用行高计算是否超出容器高度\n    if (!lines) {\n      if (runtime.contentOffsetHeight > containerContentHeight) {\n          const adjustLines = Math.floor(containerContentHeight / realLineHeight) || 1;\n          if (innerLines !== adjustLines) {\n            setInnerLines(adjustLines);\n          }\n          resetState(true);\n      } else {\n        resetState(false);\n      }\n    } else {\n      if (innerLines !== lines) {\n        setInnerLines(lines);\n      }\n      // console.log('contentOffsetHeight, realLineHeight', runtime.contentOffsetHeight, realLineHeight);\n      // 允许误差1px（行高为小数时, safari计算行高*行数和实践总高有差异，故将行高向下取整兼容）\n        resetState(runtime.contentOffsetHeight >= (lines + 1) * Math.floor(realLineHeight) - 1);\n    }\n  }, [lines, innerLineHeight, truncateMode, maxHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState(runtime.ellipsis, {\n      forceResetFold: true,\n    });\n    calcEllipsis();\n  }, [calcEllipsis, resetState]);\n\n  // 监听\"展开\"按钮宽度变化\n  useEffect(() => {\n    if (ellipsis && btnWrapperRef.current) {\n      const {offsetWidth} = btnWrapperRef.current;\n      if (offsetWidth !== runtime.foldBtnWidth) {\n        runtime.foldBtnWidth = offsetWidth;\n        setFoldBtnWidth(offsetWidth);\n      }\n    }\n  }, [ellipsis, unfoldText, showFoldControl]);\n  useEffect(() => {\n    if (isSafari) {\n      reorganizeDom();\n    }\n  }, [fold, reorganizeDom]);\n  const updateTextContent = useCallback(() => {\n    if (!wrapperRef.current) {\n      return;\n    }\n    const newTextContent = wrapperRef.current.textContent || '';\n    if (newTextContent !== runtime.textContent) {\n      runtime.textContent = newTextContent;\n      setTextContent(newTextContent);\n    }\n  }, []);\n  const handleResize = useCallback<NonNullable<MeasureProps['onResize']>>((rect) => {\n    // console.log('[handleResize] rect: ', rect, runtime.contentOffsetHeight);\n    const {height} = rect.offset || {};\n    if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n      calcEllipsis();\n    }\n  }, [calcEllipsis]);\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      runtime.onStatusChange?.({\n          ellipsis,\n          fold,\n          title: hoverTitle\n      });\n    }\n  }, [fold, ellipsis, hoverTitle]);\n  useEffect(() => {\n    runtime.inited = true;\n  }, []);\n  // 高度自适应，容器高度变化时重新计算高度(容器也需要包装Measure，TODO: 待开发 hooks -> useMeasure, 使得观测dom尺寸的方式更简洁)\n  // if (!maxHeight && !lines) {\n  //    calcEllipsis();\n  // }\n  // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n  return (\n    <div\n      className={cx(c(\"container\"), className)}\n      style={containerStyle}\n      ref={(r) => {\n        assignRef(containerRef, r);\n        if (ref) {\n          assignRef(ref, r);\n        }\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 throttleMs={100} onResize={handleResize} triggerResizeInit={false}>\n        {({measureRef, /* contentRect */}) => {\n          // console.log('contentRect:', contentRect, contentRect.offset?.height, runtime.contentOffsetHeight);\n          // const {height} = contentRect.offset || {};\n          // if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n          //   calcEllipsis();\n          // }\n          return <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={(r) => {\n            assignRef(measureRef, r);\n            assignRef(wrapperRef, r);\n            updateTextContent();\n          }}>\n            {finalContent}\n          </div>\n        }}\n      </Measure>\n      {/* <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={wrapperRef}>\n          {finalContent}\n      </div> */}\n      {/* 主文本显示 */}\n      <div\n        className={\"text-ellipsis-inner\"}\n        title={showTitleWhenFold ? hoverTitle : undefined}\n        style={wrapStyle}\n        ref={contentRef}\n      >\n        {/* {finalContent} */}\n        {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n        {ellipsis && showFoldControl && ButtonComp}\n        {finalContent}\n        {ButtonShadowDom}\n      </div>\n    </div>\n  );\n});\n"],"names":["c","p","prefixClassname","TextEllipsis","forwardRef","props","ref","className","style","_props$lineHeight","lineHeight","lines","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$truncateMode","truncateMode","maxHeight","_props$controlPlaceme","controlPlacement","whiteSpace","width","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","containerContentHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","_extends","undefined","commonWrapStyle","wrapStyle","isHeightMode","paddingBottom","minHeight","WebkitLineClamp","boxSizing","validMaskBgColor","_ref","rgbaToObj","findEffectiveBgColor","current","r","g","b","startColor","endColor","btnStyle","padding","ratio","Math","min","_ref2","_ref2$startColor","_ref2$endColor","height","paddingTop","paddingLeft","background","reorganizeDom","useCallback","orginStyleWidth","orginWidth","window","getComputedStyle","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","classNames","ButtonShadowDom","resetState","newEllipsis","_temp","_ref3$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","clientHeight","realLineHeight","floor","adjustLines","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","newTextContent","handleResize","rect","offset","abs","hoverTitle","title","assignRef","Measure","throttleMs","onResize","triggerResizeInit","_ref6","measureRef"],"mappings":"u4BA+Ba,IAAAA,EAAIC,EAACC,gBAAC,yBA+HNC,EAAeC,EAAAA,WAA8C,SAAsBC,EAAOC,GACrG,IACEC,EA6BEF,EA7BFE,UACAC,EA4BEH,EA5BFG,MAAKC,EA4BHJ,EA3BFK,WAAAA,OAAU,IAAAD,EAAG,GAAEA,EACfE,EA0BEN,EA1BFM,MACAC,EAyBEP,EAzBFO,YAEQC,EAuBNR,EAtBFS,sCAAAA,OAAwC,IAAHD,GAAQA,EAC7CE,EAqBEV,EArBFU,kBACAC,EAoBEX,EApBFW,cAAaC,EAoBXZ,EAnBFa,gBAAAA,OAAkB,IAAHD,GAAOA,EAAAE,EAmBpBd,EAlBFe,SAAAA,OAAQ,IAAAD,EAAG,KAAIA,EAAAE,EAkBbhB,EAjBFiB,WAAAA,WAAUD,EAAG,KAAIA,EAAAE,EAiBflB,EAhBFmB,OAAAA,OAAM,IAAAD,EAAG,QAAOA,EAAAE,EAgBdpB,EAfFqB,aAAAA,OAAY,IAAAD,EAAG,OAAMA,EACrBE,EAcEtB,EAdFsB,UAASC,EAcPvB,EAbFwB,iBAAAA,OAAmB,IAAHD,EAAG,SAAQA,EAC3BE,EAYEzB,EAZFyB,WACAC,EAWE1B,EAXF0B,MACAC,EAUE3B,EAVF2B,iBACAC,EASE5B,EATF4B,iBACAC,EAQE7B,EARF6B,aACAC,EAOE9B,EAPF8B,eACAC,EAME/B,EANF+B,aACAC,EAKEhC,EALFgC,aACAC,EAIEjC,EAJFiC,eACAC,EAGElC,EAHFkC,eACAC,EAEEnC,EAFFmC,QACAC,EACEpC,EADFoC,QAEIC,EADFrC,EAxBFsC,SAwBEtC,EAvBFuC,SA0BFC,EAAgCC,EAAAA,UAAS,GAAlCC,EAAQF,EAAEG,GAAAA,EAAWH,EAC5B,GAAAI,EAAkDH,EAAQA,UAAC,GAApDI,EAAiBD,EAAA,GAAEE,EAAoBF,EAAA,GAE9CG,EAAwBC,EAAiBA,kBAAChD,EAAO,OAAQ,CAACiD,cAAc,EAAMC,SAAUrB,IAAjFsB,GAAIJ,EAAEK,GAAAA,GAAOL,EAAA,GACpBM,GAAwCZ,EAAAA,SAAS,GAA1Ca,GAAYD,GAAEE,GAAAA,GAAeF,MACpCG,GAA8Cf,EAAAA,SACtB,iBAAfpC,GAA2BA,EAAWoD,SAAS,MAClDC,WAAWrD,GACX,GAHCsD,GAAeH,GAAEI,GAAAA,GAAkBJ,MAK1CK,GAAwCpB,EAAQA,SAACnC,GAAMwD,GAAAD,GAAA,GAAhDE,QAAU,IAAAD,GAAG,EAACA,GAAEE,GAAaH,GAEpC,GAAAI,GAAsCxB,WAAS,IAAxCyB,GAAWD,GAAEE,GAAAA,GAAcF,GAElC,GAAOG,GAAWC,EAAAA,WAAW,CAC3BC,QAAQ,EACRC,oBAAqB,EACrBC,uBAAwB,EACxB9B,SAAAA,EACA+B,YAAatB,GACbA,KAAAA,GACAG,aAAAA,GACAY,YAAAA,GACAtC,iBAAAA,EACAC,aAAAA,EACAC,eAAAA,GACC,CAAC,OAAQ,mBAAoB,eAAgB,mBAEhD,GAAM4C,GAAaC,EAAAA,OAAuB,MACpCC,GAAaD,EAAMA,OAAiB,MACpCE,GAAeF,EAAMA,OAAiB,MACtCG,GAAgBH,SAAuB,MAEvCI,GAAiBC,EAAAA,QAAQ,WAC7B,OAAAC,EAAA,CACE5E,WAAYwC,EACR,MACAxC,QAA0B6E,GAC3B/E,EAEP,EAAG,CAACA,EAAOE,EAAYwC,IAEjBsC,GAAkBH,UAAQ,WAC9B,MAAO,CACLvD,WAAAA,EACAC,MAAAA,EAEJ,EAAG,CAACD,EAAYC,IAEV0D,GAAYJ,UAAQ,WACxB,IACMK,EAAgC,WAAjBhE,EACrB,IAAKqB,KAAa2C,GAFJtB,IAEgCJ,IAC5C,OAAOwB,GAET,IAAMG,EAAgBzE,GAA+B,WAAXM,IAAwBgC,GAAWQ,GAAsBuB,UAAAA,EACnG,OAAAD,EAAA,CAAA,EACKE,GAAe,CAElBI,WAAYF,GAAgBlC,IAThBY,GASmC,IAAOJ,GAAsBuB,UAAAA,EAI5EM,gBAAiBH,OAAeH,EAAY/B,GAbhCY,QAa+CmB,EAC3D5D,UAAW+D,GAAgBlC,GAAQ7B,GAdvByC,GAc4CJ,IAAmBS,GAAQI,wBAA0B,OAAKU,EAClHI,cAAAA,EACAG,UAAWH,EAAgB,kBAAwBJ,GAEvD,EAAG,CAACnB,GAAYJ,GAAiBjB,EAAUS,GAAMtC,EAAiBM,EAAQE,EAAcC,EAAW6D,KAG7FO,GAAmBV,EAAOA,QAAC,WAC/B,IAAKnE,IAAoB6B,EACvB,OACD,KACD,IAAAiD,EAAkBC,EAASA,UAACrF,GAAe,KAAOsF,EAAoBA,qBAAChB,GAAaiB,SAA7EC,EAACJ,EAADI,EAAGC,EAACL,EAADK,EAAGC,EAACN,EAADM,EACb,MAAO,CACLC,WAAU,QAAUH,EAAC,KAAKC,EAAC,KAAKC,EAAC,SACjCE,SAAQ,QAAUJ,EAAC,KAAKC,EAAC,KAAKC,EAAC,OAEnC,EAAG,CAAC1F,EAAamC,EAAU7B,IAGrBuF,GAAWpB,EAAOA,QAAC,WACvB,GAAK7B,GAAL,CAIA,IAAMkD,EAAU1C,GAEV2C,EAAmB,UAAXnF,EAAqBoF,KAAKC,IAAKH,EAAU/C,GAAgB,IAAK,IAAM,GAClFmD,EAAiFf,IAAoB,CAAA,EAAEgB,EAAAD,EAAhGP,WAAoCS,EAAAF,EAAEN,SAAAA,OAAW,IAAHQ,EAAG,sBAAqBA,EAC7E,MAAO,CACLlB,UAAW,cACXmB,OAAWjD,GAAe,KAC1BtD,WAAesD,GAAmB,KAClCkD,WAAuB,WAAX1F,EAAyBkF,EAAcnB,UAAAA,EACnD4B,YAAwB,UAAX3F,EAAwBkF,EAAcnB,UAAAA,EAEnD6B,iCAAkC5F,EAAM,WARtB,IAAHuF,EAAG,wBAAuBA,GAQc,KAAKP,EAAQ,IAAIG,EAAK,MAAMH,EAAQ,SAb5F,CAeH,EAAG,CAACxC,GAAiBR,GAAMhC,EAAQmC,GAAcoC,KAE3CsB,GAAgBC,EAAWA,YAAC,WAEhC,GAAIvC,GAAWoB,QAAS,CACtB,IAAMoB,EAAkBxC,GAAWoB,QAAQ3F,MAAMuB,MAC3CyF,EAAaC,OAAOC,iBAAiB3C,GAAWoB,SAASpE,MAE/DgD,GAAWoB,QAAQ3F,MAAMuB,MAAWgC,WAAWyD,GAAc,GAAG,WAChEC,OAAOE,uBAAPF,OAAOE,sBAAwB,WACzB5C,GAAWoB,UACbpB,GAAWoB,QAAQ3F,MAAMuB,MAAQwF,EAErC,EACD,CACH,EAAG,IAEGK,GAAmBN,EAAAA,YACvB,SAACO,EAAkCrE,QAAAA,IAAAA,IAAAA,GAAQiB,GAAQjB,MACjDiB,GAAQjB,KAAOA,EACfC,GAAQD,EACZ,EAAG,IAEGsE,GAAazC,UAAQ,wBACzB,OACE0C,EAAA,QAAAC,cACEzH,MAAAA,CAAAA,UAAW0H,EAAEC,WACX,mBACoB1G,oBAAAA,EACT,WAAXA,GAAmB,aAAiBK,GAEtCrB,MAAOiG,GACPnG,IAAK6E,GACL3C,QAASoF,IAER5F,EACCA,EAAiBwB,iBAEjBuE,EAAA,QAAAC,cAAKzH,MAAAA,CAAAA,UAAW,YAAaiD,GAAOlC,EAAaF,GAIzD,EAAG,CACDqF,GACAjD,GACApC,EACAwG,GACA5F,EACAH,EACAL,EACAF,IAII6G,GAAkB9C,EAAAA,QAAQ,WAC9B,OAAKtC,GAAa7B,GAA8B,UAAXM,IAAsBgC,gBAGpDuE,EAAA,QAAAC,cAAA,OAAA,CAAMxH,MAAOiG,GAAUlG,UAAU,yBACrCyB,EAAmBA,EAAiBwB,IAAQpC,OAEjD,EAAG,CAAC2B,EAAUvB,EAAQN,EAAiBsC,GAAMiD,GAAUrF,EAAUY,IAG3DoG,GAAad,EAAAA,YAAY,SAACe,EAAWC,QAAA,IAAXD,IAAAA,EAAc5D,GAAQ1B,UAAQ,IAExDwF,QAFwD,IAAAD,EAE1D,CAAA,EAAEA,GADJE,eAAAA,OAAiB,IAAHD,GAAQA,EAEfxF,EAAwC0B,GAAxC1B,SAAgB0F,EAAwBhE,GAA9BjB,KAAesB,EAAeL,GAAfK,YAC5BuD,IAAgBtF,IAClBC,EAAYqF,GACZ5D,GAAQ1B,SAAWsF,EACK,MAAxB5D,GAAQxC,kBAARwC,GAAQxC,iBAAmBoG,IAI3BvH,IACI0H,IAAoBzF,GAAYsF,IACjCI,IAAY3D,GAEf8C,QAAiBrC,EAAWT,EAEhC,EAAG,CAAC8C,GAAkBlF,EAAc5B,IAE9B4H,GAAepB,EAAAA,YAAY,WAC/B,IAAMqB,EAAU1D,GAAWkB,QACrByC,EAAe1D,GAAaiB,QAClC,GAAKwC,GAAYC,EAAjB,CAGAnE,GAAQG,oBAAsB+D,EAAQE,aACtC,IAAMzD,EAAiBqC,OAAOC,iBAAiBkB,GACzC1B,EAAanD,WAAWqB,EAAe8B,YACvCvB,EAAgB5B,WAAWqB,EAAeO,eAC1Cd,EAAyBJ,GAAQI,uBAAyB+D,EAAaE,aAAe5B,EAAavB,EAGrGoD,EAAiB,EAErB,IAAKA,GAAkBJ,EAAS,CAC9B,IAAOjI,GAAc0E,GAAkB,CAAE,GAAlC1E,WACHA,KAEFqI,EAAiBhF,WAAWrD,KAE1ByC,GAAqB,GAG1B,CAED,GAAIa,KAAoB+E,IACtB9E,GAAmB8E,GACdA,GAOP,GAFsC,WAAjBrH,EAGnB0G,GAAW3D,GAAQG,qBAAuBjD,GAAakD,SAKzD,GAAKlE,EAWCyD,KAAezD,GACjB0D,GAAc1D,GAIdyH,GAAW3D,GAAQG,sBAAwBjE,EAAQ,GAAKiG,KAAKoC,MAAMD,GAAkB,QAfvF,GAAItE,GAAQG,oBAAsBC,EAAwB,CACtD,IAAMoE,EAAcrC,KAAKoC,MAAMnE,EAAyBkE,IAAmB,EACvE3E,KAAe6E,GACjB5E,GAAc4E,GAEhBb,IAAW,EACd,MACCA,IAAW,EA5Cd,CAsDH,EAAG,CAACzH,EAAOqD,GAAiBtC,EAAcC,EAAWyG,KAIrDc,EAAAA,oBAAoB,WAClBd,GAAW3D,GAAQ1B,SAAU,CAC3ByF,gBAAgB,IAElBE,IACF,EAAG,CAACA,GAAcN,KAGlBe,EAAAA,UAAU,WACR,GAAIpG,GAAYoC,GAAcgB,QAAS,CACrC,IAAOiD,EAAejE,GAAcgB,QAA7BiD,YACHA,IAAgB3E,GAAQd,eAC1Bc,GAAQd,aAAeyF,EACvBxF,GAAgBwF,GAEnB,CACH,EAAG,CAACrG,EAAUzB,EAAYJ,IAC1BiI,EAAAA,UAAU,WACJE,EAAQA,UACVhC,IAEJ,EAAG,CAAC7D,GAAM6D,KACV,IAAMiC,GAAoBhC,EAAWA,YAAC,WACpC,GAAKrC,GAAWkB,QAAhB,CAGA,IAAMoD,EAAiBtE,GAAWkB,QAAQ5B,aAAe,GACrDgF,IAAmB9E,GAAQF,cAC7BE,GAAQF,YAAcgF,EACtB/E,GAAe+E,GAJhB,CAMH,EAAG,IACGC,GAAelC,EAAWA,YAAwC,SAACmC,GAEvE,IAAOxC,GAAUwC,EAAKC,QAAU,CAAE,GAA3BzC,YACQ1B,IAAX0B,GAAwBL,KAAK+C,IAAI1C,EAASxC,GAAQG,qBAAuB,GAC3E8D,IAEJ,EAAG,CAACA,KACEkB,GAAavE,EAAOA,QAAC,WACvB,OAAOtC,GAAYS,GACW,mBAAlBxC,EACNA,EAAcuD,IACdvD,GAAiBuD,QACnBgB,CACR,EAAG,CAACvE,EAAe+B,EAAUS,GAAMe,KAkBnC,OAjBA4E,YAAU,WACJ1E,GAAQE,SACVF,MAAAA,GAAQtC,gBAARsC,GAAQtC,eAAiB,CACrBY,SAAAA,EACAS,KAAAA,GACAqG,MAAOD,KAGf,EAAG,CAACpG,GAAMT,EAAU6G,KACpBT,EAASA,UAAC,WACR1E,GAAQE,QAAS,CACnB,EAAG,iBAODoD,EAAAA,QAAAC,cACEzH,MAAAA,CAAAA,UAAW0H,EAAAA,WAAGjI,EAAE,aAAcO,GAC9BC,MAAO4E,GACP9E,IAAK,SAAC8F,GACJ0D,EAASA,UAAC5E,GAAckB,GACpB9F,GACFwJ,EAASA,UAACxJ,EAAK8F,EAEnB,EACAhE,aAAcA,EACdC,aAAcA,EACdC,eAAgBA,EAChBC,eAAgBA,EAChBC,QAASA,EACTC,QAASA,gBAGTsF,EAAAA,QAAAC,cAAC+B,EAAAA,QAAQL,CAAAA,UAAOM,WAAY,IAAKC,SAAUT,GAAcU,mBAAmB,GACzE,SAAAC,GAAoC,IAAlCC,EAAUD,EAAVC,wBAMD,OAAOrC,EAAAA,QAAAC,cAAA,MAAA,CAAKxH,MAAOgF,GAAiBjF,UAAW,qBAAsBD,IAAK,SAAC8F,GACzE0D,EAASA,UAACM,EAAYhE,GACtB0D,EAAAA,UAAU7E,GAAYmB,GACtBkD,IACF,GACG5G,EAEL,gBAMFqF,EAAA,QAAAC,cACEzH,MAAAA,CAAAA,UAAW,sBACXsJ,MAAO9I,EAAoB6I,QAAarE,EACxC/E,MAAOiF,GACPnF,IAAKyE,IAIJhC,GAAY7B,GAAmB4G,GAC/BpF,EACAyF,IAIT"}
+{"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["/**\n * @file 文本截断显示组件\n * @description 基于React封装一个文本截断显示组件，富文本（仅文字样式，图片和表格效果不一定好）同普通文本处理一致\n * @author <wuqiuyang305@126.com>\n */\n\nimport React, {\n  forwardRef,\n  useState,\n  useMemo,\n  useEffect,\n  useCallback,\n  useRef,\n  PropsWithChildren,\n  MouseEvent,\n} from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {\n  assignRef,\n  useRuntime,\n  useCompatibleEffect,\n  useSyncPropsState,\n} from \"@ohkit/react-helper\";\nimport {isSafari} from \"@ohkit/platform\";\nimport {rgbaToObj, findEffectiveBgColor} from \"@ohkit/dom-helper\";\nimport {Measure, MeasureProps} from \"@ohkit/measure\";\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-text-ellipsis__\");\n\ninterface ITextEllipsis\n  extends Pick<\n    React.DOMAttributes<HTMLDivElement>,\n    | \"onMouseEnter\"\n    | \"onMouseLeave\"\n    | \"onPointerEnter\"\n    | \"onPointerLeave\"\n    | \"onFocus\"\n    | \"onClick\"\n  > {\n  /**\n   * 自定义样式类名，会附加到根元素上\n   */\n  className?: string;\n  /**\n   * 自定义样式\n   */\n  style?: React.CSSProperties;\n  /**\n   * right | bottom 展开按钮在右下侧还是底部\n   * @default right\n   */\n  uiType?: \"right\" | \"bottom\";\n  /**\n   * 截断模式 (若某些浏览器不支持 webkitLineClamp，可降级切换为 height 模式)\n   * @default line\n   */\n  truncateMode?: \"line\" | \"height\";\n  /**\n   * truncateMode === \"height\" 时生效\n   * 最大高度(number > 0)，没传或者传入无效值不限制，尝试取 lines * lineHeight，若仍无效 自动截断到容器的最大高度\n   * 单位: px\n   */\n  maxHeight?: number;\n  /**\n   * （单位:px）未传入或无效（0也视为无效）则自动取当前文本的行高\n   */\n  lineHeight?: React.CSSProperties[\"lineHeight\"];\n  /**\n   * truncateMode === \"line\" 时生效\n   * 超过几行折叠(number > 0), 没传或者传入无效值不限制，自动截断到容器的最大高度\n   */\n  lines?: number;\n  /**\n   * 展开按钮蒙层背景色(仅支持16进制表示)\n   * @default #fff\n   */\n  maskBgColor?: string;\n  /**\n   * text｜ReactNode  与children任传一个\n   */\n  content?: React.ReactNode;\n  /**\n   * 当 content or children or ellipsis 变化时，重置 fold 状态 \n   * @default false\n   */\n  resetFoldWhenChildrenOrEllipsisChange?: boolean;\n  /**\n   * 折叠状态(可传入作为默认值，但不会受控)\n   * @default true\n   */\n  fold?: boolean;\n  /**\n   * 显示展开控制按钮\n   * @default true\n   */\n  showFoldControl?: boolean;\n  /**\n   * 展开按钮位置 uiType='bottom'时有效\n   * @default center\n   */\n  controlPlacement?: 'left' | 'center' | 'right';\n  /**\n   * 折叠按钮文字\n   * @default 收起\n   */\n  foldText?: string;\n  /**\n   * 展开按钮文字\n   * @default 展开\n   */\n  unfoldText?: string;\n  /**\n   * 折叠状态下是否显示title属性\n   * @default false\n   */\n  showTitleWhenFold?: boolean;\n  /**\n   * 折叠状态自定义title属性内容\n   */\n  titleWhenFold?: string | ((title: string) => string);\n  /**\n   * 是否保留换行\n   */\n  whiteSpace?: React.CSSProperties['whiteSpace'];\n  /**\n   * 容器宽度（默认自适应内容）\n   * 应用场景：whiteSpace='pre*' 时，支持展示换行符，自适应内容可能导致控制按钮位置不确定\n   */\n  width?: React.CSSProperties['width'];\n  /**\n   * 自定义渲染展开按钮\n   */\n  renderFoldButton?: (fold: boolean) => React.ReactNode;\n  /**\n   * @param fold 折叠状态，true 折叠，false 展开\n   */\n  onFoldChange?: (fold: boolean) => void;\n  /**\n   * @param ellipsis 是否截断，true 截断，false 未截断\n   */\n  onEllipsisChange?: (ellipsis: boolean) => void;\n  /**\n   * 关键状态变更触发\n   * @param status\n   */\n  onStatusChange?: (status: {\n    fold: boolean;\n    ellipsis: boolean;\n    title?: string;\n  }) => void;\n}\n\nexport type TextEllipsisProps = PropsWithChildren<ITextEllipsis>;\n\nexport const TextEllipsis = forwardRef<HTMLDivElement, TextEllipsisProps>(function TextEllipsis(props, ref) {\n  const {\n    className,\n    style,\n    lineHeight = \"\",\n    lines,\n    maskBgColor,\n    content,\n    children,\n    resetFoldWhenChildrenOrEllipsisChange = false,\n    showTitleWhenFold,\n    titleWhenFold,\n    showFoldControl = true,\n    foldText = \"收起\",\n    unfoldText = \"展开\",\n    uiType = \"right\",\n    truncateMode = \"line\",\n    maxHeight,\n    controlPlacement = 'center',\n    whiteSpace,\n    width,\n    renderFoldButton,\n    onEllipsisChange,\n    onFoldChange,\n    onStatusChange,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onClick,\n    onFocus,\n  } = props;\n  const finalContent = content || children;\n  // 是否截断\n  const [ellipsis, setEllipsis] = useState(false);\n  const [getLineHeightFail, setGetLineHeightFail] = useState(false);\n  // 折叠状态\n  const [fold, setFold] = useSyncPropsState(props, 'fold', {defaultValue: true, onChange: onFoldChange});\n  const [foldBtnWidth, setFoldBtnWidth] = useState(1);\n  const [innerLineHeight, setInnerLineHeight] = useState(\n    typeof lineHeight === \"string\" && lineHeight.endsWith(\"px\")\n      ? parseFloat(lineHeight)\n      : 0\n  );\n  const [innerLines = 0, setInnerLines] = useState(lines);\n  // children提取的纯文本\n  const [textContent, setTextContent] = useState('');\n\n  const [runtime] = useRuntime({\n    inited: false, // mounted\n    contentOffsetHeight: 0, // 内容节点offsetHeight\n    containerContentHeight: 0, // 容器内容高度 = 容器高 - 上下padding\n    ellipsis,\n    defaultFold: fold, // 记录一下默认的折叠状态，用于 reset fold\n    fold,\n    foldBtnWidth,\n    textContent,\n    onEllipsisChange,\n    onFoldChange,\n    onStatusChange,\n  }, ['fold', 'onEllipsisChange', 'onFoldChange', 'onStatusChange']);\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const btnWrapperRef = useRef<HTMLDivElement>(null);\n\n  const containerStyle = useMemo(() => {\n    return {\n      lineHeight: getLineHeightFail // 未传入且获取 lineHeight(px) 失败，则设置 default lineHeight: 1.4(em)\n        ? \"1.4\" // more brower normal default lineHeight\n        : lineHeight ? lineHeight : undefined,\n      ...style,\n    };\n  }, [style, lineHeight, getLineHeightFail]);\n\n  const commonWrapStyle = useMemo(() => {\n    return {\n      whiteSpace,\n      width,\n    };\n  }, [whiteSpace, width]);\n  // 容器样式\n  const wrapStyle = useMemo(() => {\n    const lines = innerLines;\n    const isHeightMode = truncateMode === 'height';\n    if (!ellipsis || !isHeightMode && (!lines || !innerLineHeight)) {\n      return commonWrapStyle;\n    }\n    const paddingBottom = showFoldControl && (uiType === \"bottom\" && !fold) ? `${innerLineHeight}px` : undefined;\n    return {\n      ...commonWrapStyle,\n      // HACK: 兼容safari 15+ 富文本折叠高度丢失问题\n      minHeight: !isHeightMode && fold ? `${(lines - 0.2) * innerLineHeight}px` : undefined,\n      // Note: safari 对WebkitLineClamp支持太差劲 判断浏览器优雅降级为高度截断方案？目前先交给用户去判断，自行选择truncateMode\n      // WebkitLineClamp: isSafari ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n      // maxHeight: isSafari && fold ? lines * innerLineHeight : undefined,\n      WebkitLineClamp: isHeightMode ? undefined : fold ? lines : undefined, // 利用-webkit-line-clamp截断方案\n      maxHeight: isHeightMode && fold ? (maxHeight || lines * innerLineHeight || runtime.containerContentHeight || 0) : undefined,\n      paddingBottom,\n      boxSizing: paddingBottom ? 'border-box' as const : undefined,\n    };\n  }, [innerLines, innerLineHeight, ellipsis, fold, showFoldControl, uiType, truncateMode, maxHeight, commonWrapStyle]);\n\n  // 计算折叠按钮蒙层的渐变颜色\n  const validMaskBgColor = useMemo(() => {\n    if (!showFoldControl || !ellipsis) {\n      return null;\n    }\n    const {r, g, b} = rgbaToObj(maskBgColor || '') || findEffectiveBgColor(containerRef.current);\n    return {\n      startColor: `rgba(${r}, ${g}, ${b}, 0.2)`,\n      endColor: `rgba(${r}, ${g}, ${b}, 1)`,\n    };\n  }, [maskBgColor, ellipsis, showFoldControl]);\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    const {startColor = 'rgba(255,255,255,0.2)', endColor = 'rgba(255,255,255,1)'} = validMaskBgColor || {};\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}, ${startColor}, ${endColor} ${ratio}%, ${endColor} 100%)`,\n    };\n  }, [innerLineHeight, fold, uiType, foldBtnWidth, validMaskBgColor]);\n\n  const reorganizeDom = useCallback(() => {\n    // Note: safari 中仅改变 WebkitLineClamp 没触发重排，调整微小宽度以触发\n    if (contentRef.current) {\n      const orginStyleWidth = contentRef.current.style.width;\n      const orginWidth = window.getComputedStyle(contentRef.current).width;\n      // console.log('orginWidth, orginStyleWidth:', orginWidth, orginStyleWidth);\n      contentRef.current.style.width = `${parseFloat(orginWidth) - 0.1}px`;\n      window.requestAnimationFrame?.(() => {\n        if (contentRef.current) {\n          contentRef.current.style.width = orginStyleWidth;\n        }\n      });\n    }\n  }, []);\n\n  const handleFoldChange = useCallback(\n    (evt?: MouseEvent<HTMLDivElement>, fold = !runtime.fold) => {\n      runtime.fold = fold;\n      setFold(fold);\n  }, []);\n\n  const ButtonComp = useMemo(() => {\n    return (\n      <div\n        className={cx(\n          \"btn-fold-wrapper\",\n          `btn-fold-wrapper-${uiType}`,\n          uiType === \"bottom\" && `placement-${controlPlacement}`\n        )}\n        style={btnStyle}\n        ref={btnWrapperRef}\n        onClick={handleFoldChange}\n      >\n        {renderFoldButton ? (\n          renderFoldButton(fold)\n        ) : (\n          <div className={\"btn-fold\"}>{fold ? unfoldText : foldText}</div>\n        )}\n      </div>\n    );\n  }, [\n    btnStyle,\n    fold,\n    foldText,\n    handleFoldChange,\n    renderFoldButton,\n    controlPlacement,\n    uiType,\n    unfoldText,\n  ]);\n\n  // 占位按钮\n  const ButtonShadowDom = useMemo(() => {\n    if (!ellipsis || !showFoldControl || uiType !== 'right' || fold) {\n      return null;\n    }\n    return <span style={btnStyle} className=\"btn-fold-right-shadow\">\n      {renderFoldButton ? renderFoldButton(fold) : foldText}\n    </span>;\n  }, [ellipsis, uiType, showFoldControl, fold, btnStyle, foldText, renderFoldButton]);\n\n  // 重置状态\n  const resetState = useCallback((newEllipsis = runtime.ellipsis, {\n    forceResetFold = false, // 强制重置fold 比如child变化时\n  } = {}) => {\n    const {ellipsis, fold: preFold, defaultFold} = runtime;\n    if (newEllipsis !== ellipsis) {\n      setEllipsis(newEllipsis);\n      runtime.ellipsis = newEllipsis;\n      runtime.onEllipsisChange?.(newEllipsis);\n    }\n    // 从未截断状态切换为截断状态时，自动折叠（即：出现展开按钮）\n    if (\n      resetFoldWhenChildrenOrEllipsisChange\n      && (forceResetFold  || !ellipsis && newEllipsis)\n      && preFold !== defaultFold\n    ) {\n      handleFoldChange(undefined, defaultFold);\n    }\n  }, [handleFoldChange, finalContent, resetFoldWhenChildrenOrEllipsisChange]);\n\n  const calcEllipsis = useCallback(() => {\n    const wrapDom = wrapperRef.current;\n    const containerDom = containerRef.current;\n    if (!wrapDom || !containerDom) {\n      return;\n    }\n    runtime.contentOffsetHeight = wrapDom.offsetHeight;\n    const containerStyle = window.getComputedStyle(containerDom);\n    const paddingTop = parseFloat(containerStyle.paddingTop);\n    const paddingBottom = parseFloat(containerStyle.paddingBottom);\n    const containerContentHeight = runtime.containerContentHeight = containerDom.clientHeight - paddingTop - paddingBottom;\n\n    // 计算真实行高\n    let realLineHeight = 0;\n    // 若外部未传入, 尝试读取当前文本的行高。\n    if (!realLineHeight && wrapDom) {\n      const {lineHeight} = containerStyle || {};\n      if (lineHeight) {\n        // 未设置行高的为 normal\n        realLineHeight = parseFloat(lineHeight);\n        if (!realLineHeight) {\n          setGetLineHeightFail(true);\n        }\n      }\n    }\n    // lineHeight同步到innerLineHeight\n    if (innerLineHeight !== realLineHeight) {\n      setInnerLineHeight(realLineHeight);\n      if (!realLineHeight) {\n        return;\n      }\n    }\n\n    const isHeightMode = truncateMode === 'height';\n    // 高度截断模式，比较简单 直接判断是否超出容器高度\n    if (isHeightMode) {\n      resetState(runtime.contentOffsetHeight > (maxHeight || containerContentHeight));\n      return;\n    }\n\n    // 行数截断模式，需要利用行高计算是否超出容器高度\n    if (!lines) {\n      if (runtime.contentOffsetHeight > containerContentHeight) {\n          const adjustLines = Math.floor(containerContentHeight / realLineHeight) || 1;\n          if (innerLines !== adjustLines) {\n            setInnerLines(adjustLines);\n          }\n          resetState(true);\n      } else {\n        resetState(false);\n      }\n    } else {\n      if (innerLines !== lines) {\n        setInnerLines(lines);\n      }\n      // console.log('contentOffsetHeight, realLineHeight', runtime.contentOffsetHeight, realLineHeight);\n      // 允许误差1px（行高为小数时, safari计算行高*行数和实践总高有差异，故将行高向下取整兼容）\n        resetState(runtime.contentOffsetHeight >= (lines + 1) * Math.floor(realLineHeight) - 1);\n    }\n  }, [lines, innerLineHeight, truncateMode, maxHeight, resetState]);\n\n  // 监听内容高度，是否需要折叠\n  // 用useLayoutEffect方式闪屏显示\n  useCompatibleEffect(() => {\n    resetState(runtime.ellipsis, {\n      forceResetFold: true,\n    });\n    calcEllipsis();\n  }, [calcEllipsis, resetState]);\n\n  // 监听\"展开\"按钮宽度变化\n  useEffect(() => {\n    if (ellipsis && btnWrapperRef.current) {\n      const {offsetWidth} = btnWrapperRef.current;\n      if (offsetWidth !== runtime.foldBtnWidth) {\n        runtime.foldBtnWidth = offsetWidth;\n        setFoldBtnWidth(offsetWidth);\n      }\n    }\n  }, [ellipsis, unfoldText, showFoldControl]);\n  useEffect(() => {\n    if (isSafari) {\n      reorganizeDom();\n    }\n  }, [fold, reorganizeDom]);\n  const updateTextContent = useCallback(() => {\n    if (!wrapperRef.current) {\n      return;\n    }\n    const newTextContent = wrapperRef.current.textContent || '';\n    if (newTextContent !== runtime.textContent) {\n      runtime.textContent = newTextContent;\n      setTextContent(newTextContent);\n    }\n  }, []);\n  const handleResize = useCallback<NonNullable<MeasureProps['onResize']>>((rect) => {\n    // console.log('[handleResize] rect: ', rect, runtime.contentOffsetHeight);\n    const {height} = rect.offset || {};\n    if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n      calcEllipsis();\n    }\n  }, [calcEllipsis]);\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      runtime.onStatusChange?.({\n          ellipsis,\n          fold,\n          title: hoverTitle\n      });\n    }\n  }, [fold, ellipsis, hoverTitle]);\n  useEffect(() => {\n    runtime.inited = true;\n  }, []);\n  // 高度自适应，容器高度变化时重新计算高度(容器也需要包装Measure，TODO: 待开发 hooks -> useMeasure, 使得观测dom尺寸的方式更简洁)\n  // if (!maxHeight && !lines) {\n  //    calcEllipsis();\n  // }\n  // console.log('[render TextEllipsis]: ellipsis fold wrapStyle: ', ellipsis, fold, wrapStyle);\n  return (\n    <div\n      className={cx(c(\"container\"), className)}\n      style={containerStyle}\n      ref={(r) => {\n        assignRef(containerRef, r);\n        if (ref) {\n          assignRef(ref, r);\n        }\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 throttleMs={100} onResize={handleResize} triggerResizeInit={false}>\n        {({measureRef, /* contentRect */}) => {\n          // console.log('contentRect:', contentRect, contentRect.offset?.height, runtime.contentOffsetHeight);\n          // const {height} = contentRect.offset || {};\n          // if (height !== undefined && Math.abs(height - runtime.contentOffsetHeight) > 1) {\n          //   calcEllipsis();\n          // }\n          return <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={(r) => {\n            assignRef(measureRef, r);\n            assignRef(wrapperRef, r);\n            updateTextContent();\n          }}>\n            {finalContent}\n          </div>\n        }}\n      </Measure>\n      {/* <div style={commonWrapStyle} className={\"content-shadow-dom\"} ref={wrapperRef}>\n          {finalContent}\n      </div> */}\n      {/* 主文本显示 */}\n      <div\n        className={\"text-ellipsis-inner\"}\n        title={showTitleWhenFold ? hoverTitle : undefined}\n        style={wrapStyle}\n        ref={contentRef}\n      >\n        {/* {finalContent} */}\n        {/* firefox >= 133 绝对定位的按钮放文本后面也会被截断隐藏！！ , 放文本前面可解决 */}\n        {ellipsis && showFoldControl && ButtonComp}\n        {finalContent}\n        {ButtonShadowDom}\n      </div>\n    </div>\n  );\n});\n"],"names":["c","p","prefixClassname","TextEllipsis","forwardRef","props","ref","className","style","_props$lineHeight","lineHeight","lines","maskBgColor","_props$resetFoldWhenC","resetFoldWhenChildrenOrEllipsisChange","showTitleWhenFold","titleWhenFold","_props$showFoldContro","showFoldControl","_props$foldText","foldText","_props$unfoldText","unfoldText","_props$uiType","uiType","_props$truncateMode","truncateMode","maxHeight","_props$controlPlaceme","controlPlacement","whiteSpace","width","renderFoldButton","onEllipsisChange","onFoldChange","onStatusChange","onMouseEnter","onMouseLeave","onPointerEnter","onPointerLeave","onClick","onFocus","finalContent","content","children","_useState","useState","ellipsis","setEllipsis","_useState2","getLineHeightFail","setGetLineHeightFail","_useSyncPropsState","useSyncPropsState","defaultValue","onChange","fold","setFold","_useState3","foldBtnWidth","setFoldBtnWidth","_useState4","endsWith","parseFloat","innerLineHeight","setInnerLineHeight","_useState5","_useState5$","innerLines","setInnerLines","_useState6","textContent","setTextContent","runtime","useRuntime","inited","contentOffsetHeight","containerContentHeight","defaultFold","contentRef","useRef","wrapperRef","containerRef","btnWrapperRef","containerStyle","useMemo","_extends","undefined","commonWrapStyle","wrapStyle","isHeightMode","paddingBottom","minHeight","WebkitLineClamp","boxSizing","validMaskBgColor","_ref","rgbaToObj","findEffectiveBgColor","current","r","g","b","startColor","endColor","btnStyle","padding","ratio","Math","min","_ref2","_ref2$startColor","_ref2$endColor","height","paddingTop","paddingLeft","background","reorganizeDom","useCallback","orginStyleWidth","orginWidth","window","getComputedStyle","requestAnimationFrame","handleFoldChange","evt","ButtonComp","React","createElement","cx","classNames","ButtonShadowDom","resetState","newEllipsis","_temp","_ref3$forceResetFold","forceResetFold","preFold","calcEllipsis","wrapDom","containerDom","offsetHeight","clientHeight","realLineHeight","floor","adjustLines","useCompatibleEffect","useEffect","offsetWidth","isSafari","updateTextContent","newTextContent","handleResize","rect","offset","abs","hoverTitle","title","assignRef","Measure","throttleMs","onResize","triggerResizeInit","_ref6","measureRef"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -56,7 +56,7 @@ interface ITextEllipsis extends Pick<React.DOMAttributes<HTMLDivElement>, "onMou
      */
     resetFoldWhenChildrenOrEllipsisChange?: boolean;
     /**
-     * 折叠状态
+     * 折叠状态(可传入作为默认值，但不会受控)
      * @default true
      */
     fold?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohkit/text-ellipsis",
-  "version": "0.0.17",
+  "version": "0.1.1",
   "description": "text ellipsis for react",
   "keywords": [
     "text ellipsis"
@@ -32,11 +32,11 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@ohkit/dom-helper": "0.0.6",
+    "@ohkit/dom-helper": "0.0.7",
     "@ohkit/measure": "0.0.6",
     "@ohkit/platform": "0.0.3",
     "@ohkit/prefix-classname": "0.0.3",
-    "@ohkit/react-helper": "0.0.6"
+    "@ohkit/react-helper": "0.0.7"
   },
   "devDependencies": {
     "react": "^18.3.1",
@@ -46,5 +46,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "f6aca250c73c8a72c20fdcbeb86b8d9032367927"
+  "gitHead": "0c377936f3902c76576a1850bdbbf6437d989637"
 }

package/src/index.tsx

@@ -89,7 +89,7 @@ interface ITextEllipsis
    */
   resetFoldWhenChildrenOrEllipsisChange?: boolean;
   /**
-   * 折叠状态
+   * 折叠状态(可传入作为默认值，但不会受控)
    * @default true
    */
   fold?: boolean;

package/src/style.scss

@@ -13,6 +13,7 @@ $btn-fold-color: #4c84ff; // #727a8b;
     align-items: flex-start; // 配合flex食用，否则内部 display: -webkit-box 截断不生效
     overflow: hidden; // 避免 .content-shadow-dom 溢出父容器导致外部滚动条视觉展示异常
     position: relative;
+    white-space: initial; // 防止继承父级
 
     // 保留dom用于计算高度, 不影响视图
     .content-shadow-dom {

package/LICENSE.md

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