cncjs

1
import PropTypes from 'prop-types';
2
import React from 'react';
3
import ReactDOM from 'react-dom';
4

5
class OverflowTooltip extends React.Component {
6
    static propTypes = {
7
      title: PropTypes.string
8
    };
9

10
    state = {
11
      overflow: false
12
    };
13

14
    static getDerivedStateFromProps(nextProps, prevState) {
15
      return {
16
        overflow: false
17
      };
18
    }
19

20
    detectOverflow = () => {
21
      const el = ReactDOM.findDOMNode(this);
22
      const overflow = (el.clientWidth < el.scrollWidth);
23
      if (overflow !== this.state.overflow) {
24
        this.setState({ overflow: overflow });
25
      }
26
    };
27

28
    componentDidMount() {
29
      this.detectOverflow();
30
    }
31

32
    componentDidUpdate() {
33
      this.detectOverflow();
34
    }
35

36
    render() {
37
      const { title, ...props } = this.props;
38

39
      if (this.state.overflow) {
40
        props.title = title;
41
      }
42

43
      return (
44
        <div {...props} />
45
      );
46
    }
47
}
48

49
export default OverflowTooltip;
50