|
@@ -0,0 +1,33 @@
|
|
|
+/*
|
|
|
+ * @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, 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={{ width: `${width}px` }}>
|
|
|
+ {showTooltip ? (
|
|
|
+ <Tooltip placement={placement} title={name}>
|
|
|
+ {name}
|
|
|
+ </Tooltip>
|
|
|
+ ) : (
|
|
|
+ name
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|