bit_platformui/src/components/isEllipsis/index.js

/*
 * @Author: honghaitao_v
 * @Date:   2021-08-25 15:21:43
 * @Last Modified by:   洪海涛
 * @Last Modified time: 2021-08-25 15:49:02
 */
import React, { useState, useRef, useLayoutEffect } from "react"
import { Tooltip } from "antd"
/**
 * name
 * width
 **/
export default function IsEllipsis(props) {
  const { name = "", width = 50, placement = "topLeft" } = props
  const nameEl = useRef(null)
  const [showTooltip, setShowTooltip] = useState(false)
  useLayoutEffect(() => {
    setShowTooltip(nameEl.current.scrollWidth > width)
  }, [name])

  return (
    <div className="ellipsis" ref={nameEl} style={{ maxWidth: `${width}px` }}>
      {showTooltip ? (
        <Tooltip placement={placement} title={name}>
          {name}
        </Tooltip>
      ) : (
        name
      )}
    </div>
  )
}