Skip to content

Instantly share code, notes, and snippets.

@ljack

ljack/react-startbutton.jsx

Last active April 9, 2016 06:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ljack/6cc7a222f62dd7aba1a3a4b5ea6db7cd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ljack/6cc7a222f62dd7aba1a3a4b5ea6db7cd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ljack revised this gist Apr 9, 2016. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions react-startbutton.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,8 @@ import React from "react";
    // React button component to simulate start/stop failure scenario
    export default const StartButton = React.createClass({

    forward() {
    forward() {
    const baseDelay = 4*1000;
    switch (this.state.status) {
    case 'recovering':

    @@ -15,7 +16,7 @@ export default const StartButton = React.createClass({
    this.setState({
    status: Math.random() < 0.5 ? "stopped" : "started"
    });
    }, 30 * 1000 * Math.random());
    }, baseDelay * Math.random());

    break;
    case 'failedToStop':
    @@ -26,7 +27,7 @@ export default const StartButton = React.createClass({
    this.setState({
    status: Math.random() < 0.5 ? "stopped" : "started"
    });
    }, 30 * 1000 * Math.random());
    }, baseDelay * Math.random());

    break;
    case 'stopped':
    @@ -38,7 +39,7 @@ export default const StartButton = React.createClass({
    this.setState({
    status: Math.random() < 0.5 ? "started" : "failedToStart"
    });
    }, 30 * 1000 * Math.random());
    }, baseDelay * Math.random());

    break;

    @@ -53,7 +54,7 @@ export default const StartButton = React.createClass({
    status: Math.random() < 0.5 ? "stopped" : "failedToStop"
    });

    }, 30 * 1000 * Math.random());
    }, baseDelay * Math.random());
    break;
    case 'stopping':

    @@ -73,7 +74,7 @@ export default const StartButton = React.createClass({
    stopped: "fa fa-border fa-play fa-lg",
    failedToStop: "fa fa-border fa-exclamation-triangle fa-lg",
    failedToStart: "fa fa-border fa-exclamation-triangle fa-lg",
    recovering: "fa fa-border fa-lg fa-cog fa-spin"
    recovering: "fa fa-lg fa-cog fa-spin"
    }
    },
    toggle(evt) {
  2. ljack revised this gist Apr 8, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-startbutton.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    import React from "react";
    // React button component to simulate start/stop failure scenario
    const StartButton = React.createClass({
    export default const StartButton = React.createClass({

    forward() {
    switch (this.state.status) {
  3. ljack created this gist Apr 8, 2016.
    95 changes: 95 additions & 0 deletions react-startbutton.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    import React from "react";
    // React button component to simulate start/stop failure scenario
    const StartButton = React.createClass({

    forward() {
    switch (this.state.status) {
    case 'recovering':

    break;
    case 'failedToStart':
    this.setState({
    status: "recovering"
    });
    setTimeout(() => {
    this.setState({
    status: Math.random() < 0.5 ? "stopped" : "started"
    });
    }, 30 * 1000 * Math.random());

    break;
    case 'failedToStop':
    this.setState({
    status: "recovering"
    });
    setTimeout(() => {
    this.setState({
    status: Math.random() < 0.5 ? "stopped" : "started"
    });
    }, 30 * 1000 * Math.random());

    break;
    case 'stopped':
    this.setState({
    status: "starting"
    });

    setTimeout(() => {
    this.setState({
    status: Math.random() < 0.5 ? "started" : "failedToStart"
    });
    }, 30 * 1000 * Math.random());

    break;

    case 'starting':
    break;
    case 'started':
    this.setState({
    status: "stopping"
    });
    setTimeout(() => {
    this.setState({
    status: Math.random() < 0.5 ? "stopped" : "failedToStop"
    });

    }, 30 * 1000 * Math.random());
    break;
    case 'stopping':

    break;
    default:
    this.setState({
    status: "unknown"
    });
    }
    },
    getInitialState() {
    return {
    status: "stopped",
    started: "fa fa-border fa-stop-circle fa-lg",
    starting: "fa fa-hourglass-start fa-spin fa-lg",
    stopping: "fa fa-refresh fa-spin fa-lg",
    stopped: "fa fa-border fa-play fa-lg",
    failedToStop: "fa fa-border fa-exclamation-triangle fa-lg",
    failedToStart: "fa fa-border fa-exclamation-triangle fa-lg",
    recovering: "fa fa-border fa-lg fa-cog fa-spin"
    }
    },
    toggle(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.forward();
    },
    render: function() {
    const paddingStyle = {
    leftPadding: "5px"
    };

    return (
    <span>
    <span id="start-button" onClick={this.toggle} title={this.state.status}><i className={this.state[this.state.status]} /> {this.state.status}</span>
    </span>
    );
    }
    });