# All files FakeCodeTypingLine.jsx

75% Statements 12/16
100% Branches 2/2
50% Functions 3/6
80% Lines 12/15

    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

    2x

    2x

    2x
    2x
    2x

    2x
    2x

    2x
    2x

    2x

    2x

    2x

     import React, { Component } from 'react';
    import PropTypes from 'prop-types';

    class FakeCodeTypingLine extends Component {
      constructor(props) {
        super(props);

        this.state = {
          opacity: false,
          border: true
        };
      }

      componentDidMount() {
        const { duration, delay } = this.props;
        this.opacityTimeout = setTimeout(() => this.setState({ opacity: 1 }), delay * 1000);
        this.borderTimeout = setTimeout(() => {
          this.setState({ border: 0 });
        }, (duration + delay) * 1000);
      }

      componentWillUnmount() {
        clearTimeout(this.opacityTimeout);
        clearTimeout(this.borderTimeout);
      }

      render() {
        const { duration, count, delay, keepBorder, children } = this.props;
        const { opacity } = this.state;

        let borderRight = this.state.border;
        borderRight = keepBorder ? true : borderRight;

        const animations = {
          opacity,
          borderRight,
          WebkitAnimation: `typing ${duration}s steps(${count}, end) forwards, blink 1s step-end 1s infinite`,
          MozAnimation: `typing ${duration}s steps(${count}, end) forwards, blink 1s step-end 1s infinite`,
          animationDelay: `${delay}s`
        };
        return (
          <div className="fake-code-typing-line">
            <div style={animations} dangerouslySetInnerHTML={{ __html: children }} />
          </div>
        );
      }
    }

    FakeCodeTypingLine.propTypes = {
      duration: PropTypes.number.isRequired,
      count: PropTypes.number.isRequired,
      delay: PropTypes.number.isRequired,
      keepBorder: PropTypes.bool.isRequired,
      children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
      ]).isRequired
    };

    export default FakeCodeTypingLine;