# All files FakeCodeTyping.jsx

83.78% Statements 31/37
45.45% Branches 5/11
55.56% Functions 5/9
83.78% Lines 31/37

    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
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119

    1x

    1x

    1x

    1x
    1x

    1x
    1x

    1x

    1x
    1x

    1x
    1x

    1x

    1x
    1x

    1x

    1x
    1x
    1x

    1x

    1x

    1x
    1x
    1x

    1x

    1x
    1x

    1x

    1x

    1x

    1x

     /* eslint-disable react/no-array-index-key */

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import FakeCodeTypingLine from './FakeCodeTypingLine';
    import { renderToString } from "react-dom/server";

    class FakeCodeTyping extends Component {
      stripHtml(html) {
        // Create a new div element
        const temporalDivElement = document.createElement('div');
        // Set the HTML content with the providen
        temporalDivElement.innerHTML = html;
        // Retrieve the text property of the element (cross-browser support)
        return temporalDivElement.textContent || temporalDivElement.innerText || '';
      }

      fixMultiLineStyle(html) {

      }

      parseStyles(styles) {
        return styles.split(';')
          .filter(style => style.split(':')[0] && style.split(':')[1])
          .map(style => [
            style.split(':')[0].trim().replace(/-./g, c => c.substr(1).toUpperCase()),
            style.split(':')[1].trim()
          ])
          .reduce((styleObj, style) => ({
            ...styleObj,
            [style[0]]: style[1]
          }), {});
      }

      render() {
        const { children, speed } = this.props;
        let { className } = this.props;

        // Split code by lines
        const lines = renderToString(children).split('\n');

        // Remove pre and code tags and get pre style
        const regexOpenTags = /(<pre (style="(.*?)")?.*?>(<code>)?)/;
        const regexCloseTags = /((<\/code>)?<\/pre>)/;

        const openTagsInfo = lines[0].match(regexOpenTags);
        let openTagsStyle = '';

        Iif (typeof openTagsInfo[3] !== 'undefined') {
          openTagsStyle = openTagsInfo[3];
        }

        lines[0] = lines[0].replace(regexOpenTags, '');
        lines[lines.length - 1] = lines[lines.length - 1].replace(regexCloseTags, '');

        className += ' fake-code-typing';

        let delay = 0;
        let duration = 0;
        let style = {};
        let lineInfo2;
        const lineLen = lines.length;

        return (
          <pre style={this.parseStyles(openTagsStyle)}>
            <code>
              <div className={className.trim()}>
                {lines.map((line, i) => {
                  const count = this.stripHtml(line).length;
                  delay += duration;
                  duration = count / speed;

                  Iif (lineInfo2) {
                    style = {};
                  }

                  const lineInfo = line.match(/<span (style="(.*?)")?[^>]*>[^<]*(?!<\/span>)$/);
                  lineInfo2 = line.match(/^[^<]*<\/span>$/);

                  Iif (lineInfo) {
                    style = this.parseStyles(lineInfo[2]);
                  }

                  return (
                    <div key={i} style={style}>
                      <FakeCodeTypingLine
                        keepBorder={lineLen === i + 1}
                        count={count}
                        duration={duration}
                        delay={delay}
                      >{line}</FakeCodeTypingLine>
                      {'\n'}
                    </div>
                  );
                })}
              </div>
            </code>
          </pre>

        );
      }
    }

    FakeCodeTyping.propTypes = {
      children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
      ]).isRequired,
      className: PropTypes.string,
      speed: PropTypes.number
    };

    FakeCodeTyping.defaultProps = {
      speed: 12,
      className: ''
    };

    export default FakeCodeTyping;