application/components/common/delete-button.js

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import LinearProgress from 'material-ui/LinearProgress';
import FontIcon from 'material-ui/FontIcon';
import BaseView from './../base-view';
import {language} from '../../lang/en/delete-button';

/**
 * Hold to delete button. Eschews traditional "Are you sure" box
 * by forcing the user to hold the button for about 10 seconds before deleteing.
 *
 * Parent component should provide onDelete property to handle when deletion is confirmed
 */
class DeleteButton extends BaseView {

    constructor(props) {
        super(props);

        this.state = {
            'active': false,
            'progress': 0,
            'interval': false,
            'counter': 0
        };

        this.handleDown = this.handleDown.bind(this);
        this.handleUp = this.handleUp.bind(this);
        this.handleInterval = this.handleInterval.bind(this);
    }

    componentWillMount() {
        this.setState({'label': this.props.label ? this.props.label : language.rest()});
    }

    handleInterval() {
        let counter = this.state.counter;
        counter++;

        this.setState({'progress': counter*4});

        if (counter === 30) {
            this.handleComplete();
        }

        this.setState({'counter': counter});
    }

    handleComplete() {

        clearInterval(this.state.interval);
        this.setState({'label': language.complete(), 'active': false, 'progress': 100, 'interval': false});

        const handler = (() => this.setState({'label': this.props.label ? this.props.label : language.rest(), 'counter': 0, 'progress': 0, 'active': false})).bind(this);
        setTimeout(() => {
            this.props.onDelete(handler);
        }, 1000);
    }

    handleDown(e) {

        if (this.props.disabled) {
            return;
        }

        this.setState({'label': language.active(), 'active': true});

        let interval = setInterval(this.handleInterval, 100)
        this.setState({'interval': interval});
    }

    handleUp(e) {
        if (!this.state.active) {
            return;
        }

        this.setState({'active': false, 'label': this.props.label ? this.props.label : language.rest()});

        clearInterval(this.state.interval);
        this.setState({'interval': false, 'counter': 0, 'progress': 0});
    }

    render() {
        return (
            <div className={'delete-button-root ' + this.props.className}>
                <RaisedButton
                    className='delete-button'
                    fullWidth={this.props.fullWidth}
                    onMouseDown={this.handleDown}
                    onMouseOut={this.handleUp}
                    onMouseUp={this.handleUp}
                    disabled={this.props.disabled}
                    backgroundColor='#B71C1C'
                    labelColor='#fff'
                    label={this.state.label ? this.state.label : language.rest()}
                    icon={this.props.icon ? <FontIcon className='mui-icons'>delete</FontIcon> : false}
                    />
                {this.props.disabled ? '' : <LinearProgress mode="determinate" value={this.state.progress} /> }
            </div>
        );
    }

}

export default DeleteButton;