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;