/*
 * @Author: your name
 * @Date: 2021-11-24 11:34:19
 * @LastEditTime: 2021-11-24 14:16:40
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /MedicalWisdomCheckSys/src/components/MccsFileTree/components/NodeTextArea/index.tsx
 */


import React,{useRef,useState} from 'react';
import { Tooltip } from 'antd';


const NodeTextArea = ({text,className}: {text: string,className?: string}) => {

    const theTextRef = useRef<HTMLSpanElement>(null);
    const textWrapRef = useRef<HTMLDivElement>(null);
    const [visible,setVisible] = useState(false);
    const onVisibleChangeHandle = (visible: boolean)=>{

         if(visible){
             if(textWrapRef.current&&theTextRef.current){
                // 文案长度大于容器长度时触发
                if(textWrapRef.current.offsetWidth > theTextRef.current.offsetWidth ){
                    setVisible(false);  
                }else{
                    setVisible(true);
                }
             }else{
                setVisible(false);
             }
         }else {
            setVisible(false);
         }
    }


    return (
        <Tooltip title={text} visible={visible} onVisibleChange = {onVisibleChangeHandle} >
             <div className={className} ref={textWrapRef} >
                 <span ref={theTextRef}>{text}</span>
             </div>
        </Tooltip>
    )
}

export default NodeTextArea;