{"size": 1748, "ext": "js", "max_stars_repo_path": "components/RotateText/RotateText.js", "max_stars_repo_name": "gautiselvaraj/compare-movies-next", "max_stars_repo_stars_event_min_datetime": "2020-05-27T09:27:31.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-14T11:54:46.000Z", "max_issues_repo_path": "components/RotateText/RotateText.js", "max_issues_repo_name": "gautiselvaraj/compare-movies-next", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/RotateText/RotateText.js", "max_forks_repo_name": "gautiselvaraj/compare-movies-next", "max_forks_repo_forks_event_min_datetime": "2020-10-14T11:54:53.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-14T11:54:53.000Z"}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 23.0, "max_line_length": 67, "alphanum_fraction": 0.578375286}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Typist from 'react-typist';
import './RotateText.scss';

class RotateText extends Component {
  constructor(props) {
    super(props);
    const { resetTimeOut, delay, backspaceDelay } = props;
    this.state = {
      typing: true,
      resetTimeOutState: resetTimeOut || 10,
      delayState: delay || 1500,
      backspaceDelayState: backspaceDelay || 300
    };
    this.done = this.done.bind(this);
  }

  componentWillMount() {
    this.timeouts = [];
  }

  componentWillUnmount() {
    this.timeouts.forEach(clearTimeout);
  }

  done() {
    this.setState({ typing: false }, () => {
      this.timeouts.push(
        setTimeout(
          () => this.setState({ typing: true }),
          this.state.resetTimeOutState
        )
      );
    });
  }

  render() {
    const {
      children,
      resetTimeOut,
      delay,
      backspaceDelay,
      ...restProps
    } = this.props;
    const { typing, delayState, backspaceDelayState } = this.state;

    return typing ? (
      <Typist {...restProps} onTypingDone={this.done}>
        {children.map((child, i) => (
          <span key={i}>
            <span>{child}</span>
            <Typist.Delay ms={delayState} />
            <Typist.Backspace
              count={child.length}
              delay={backspaceDelayState}
            />
            <Typist.Delay ms={delayState} />
          </span>
        ))}
      </Typist>
    ) : (
      <div className="Typist" />
    );
  }
}

RotateText.propTypes = {
  children: PropTypes.arrayOf(PropTypes.string).isRequired,
  resetTimeOut: PropTypes.number,
  delay: PropTypes.number,
  backspaceDelay: PropTypes.number
};

export default RotateText;
