# All files / components/Callout Callout.js

0% Statements 0/8
0% Branches 0/2
0% Functions 0/5
0% Lines 0/8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76

     import React from 'react';
    import PropTypes from 'prop-types';
    import CalloutTag from './styles/CalloutTag';

    class Callout extends React.Component {
      static propTypes = {
        /**
         * Miliseconds to wait before showing the callout.
         */
        delay: PropTypes.number,
        /**
         * Elements to render which will activate the callout on hover.
         */
        children: PropTypes.node.isRequired,
        /**
         * Content to render inside the callout itself.
         */
        content: PropTypes.node.isRequired,
        /**
         * A class name to pass to the callout activation area container.
         */
        className: PropTypes.string,
        /**
         * An id to pass to the callout activation area container.
         */
        id: PropTypes.string,
        /**
         * A component to render the flyout tag
         */
        Tag: PropTypes.func,
      };

      static defaultProps = {
        delay: 200,
        className: null,
        id: null,
        Tag: CalloutTag,
      };

      constructor(props) {
        super(props);
        this.state = { show: false };
      }

      trigger = () => {
        this._timer = setTimeout(this.show, this.props.delay);
      };

      show = () => {
        this.setState({ show: true });
      };

      cancel = () => {
        this.setState({ show: false });
        clearTimeout(this._timer);
      };

      render() {
        const { className, id, Tag } = this.props;
        return (
          <div
            onMouseEnter={this.trigger}
            onMouseLeave={this.cancel}
            className={className}
            id={id}
            style={{ position: 'relative' }}
          >
            {this.props.children}
            {this.state.show ? <Tag>{this.props.content}</Tag> : null}
          </div>
        );
      }
    }

    export default Callout;