Timer with pause

"use strict";

import React from "react";
import Czas from 'absolvent/React/Czas'

function padNumbers(number) {
  return String(100 + number).substr(1, 2);
}

export default class Timer extends React.Component {
  static propTypes = {
    additionalTime: React.PropTypes.number.isRequired,
    countdown: React.PropTypes.number.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {
      timeLeft: props.countdown,
      additionalTime: props.additionalTime,
      pause: false,
      buttonName: "Pauza"
    };

    this.myBind("handleClickButton", "handleAdditionalTime");
  }

  componentDidMount() {
    this.setDecrementCountdownInterval();
  }

  componentWillUnmount() {
    this.clearCountdownInterval();
  }

  // ES6 - manualnie przekazuje `this` do metody
  // rest parameter - tablica wartosci od 0 do methods.length (ES6)
  myBind(...methods) {
    methods.forEach((method) => this[method] = this[method].bind(this));
  }

  setDecrementCountdownInterval() {
    this.decrementCountdownInterval = setInterval(() => {
      return this.decrementCountdown();
    }, 1000);
  }

  clearCountdownInterval() {
    clearInterval(this.decrementCountdownInterval);
  }

  decrementCountdown() {
    if (this.state.timeLeft < 1) {
      this.clearCountdownInterval();
    } else {
      this.setState({
        timeLeft: this.state.timeLeft - 1
      });
    }
  }

  handleClickButton() {
    if (this.state.pause === false) {
      this.setState({
        pause: true,
        buttonName: "Wznów"
      });
      this.clearCountdownInterval();
    } else {
      this.setState({
        pause: false,
        buttonName: "Pauza"
      });
      this.setDecrementCountdownInterval();
    }
  }

  handleAdditionalTime() {
    this.setState({
      timeLeft: this.state.timeLeft + this.state.additionalTime
    });
  }

  render() {
    if (this.state.timeLeft < 1) {
      return (
          <div style={{
                    backgroundColor: "#f55",
                    color: "#fff"
                }}>
            time is up
          </div>
      );
    }

    return (
        <div>
          <p>
            {padNumbers(this.state.timeLeft / 3600)}:
            {padNumbers(this.state.timeLeft / 60)}:
            {padNumbers(this.state.timeLeft % 60)}
          </p>
          <Czas start={this.state.timeLeft} />
          <ul style={{
                    padding: 0,
                    marginTop: "10px",
                    listStyleType: "none"
                }}>
            <li style={{
                        display: "inline-block"
                    }}>
              <button onClick={this.handleClickButton}>{this.state.buttonName}</button>
            </li>
            <li style={{
                        display: "inline-block",
                        marginLeft: "10px"
                    }}>
              <button onClick={this.handleAdditionalTime}>{`Dodaj ${this.state.additionalTime} sekund`}</button>
            </li>
          </ul>
        </div>
    );
  }
}