Regressive timer updates and does not accept new value to start counting

0

Countdown timer when clicking start returns the value that is set in the parameters. If you add minutes to the counter before starting when you click the start it will return to the value set and not to the new value entered.

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';

export default class Cronometro extends React.Component {
  constructor(props) {
    super(props);
    this.iniciarCronometro = this.iniciarCronometro.bind(this);

    this.pararCronometro = this.pararCronometro.bind(this);
    this.tempoFormatado = this.tempoFormatado.bind(this);
    this.somarUmSegundo = this.somarUmSegundo.bind(this);
    this.state = {
      contadorSegundo: 0,
      contadorMinuto: 1,

      iniciarHabilitado: true,
      pararHabilitado: false,
      somarHabilitado: false,
    };
  }

  iniciarCronometro() {
    var intervalId = setInterval(this.somarUmSegundo, 1000);
    this.setState({
      intervalId: intervalId,
      contadorMinuto: 1,
      iniciarHabilitado: false,
      pararHabilitado: true,
      somarHabilitado: true,
    });
  }

  pararCronometro() {
    clearInterval(this.state.intervalId);
    this.setState({
      contadorSegundo: 0,
      contadorMinuto: 1,
      iniciarHabilitado: true,
      pararHabilitado: false,
      somarHabilitado: true,
    });
  }

  somarUmMinuto() {
    this.setState({
      contadorMinuto: this.state.contadorMinuto + 1,
    });
  }

  somarUmSegundo() {
    let segundos = this.state.contadorSegundo;
    let minutos = this.state.contadorMinuto;

    if (minutos > 0 || segundos > 0) {
      if (segundos == 0) {
        segundos = 59;
        minutos = minutos - 1;
      } else {
        segundos = segundos - 1;
      }
    }
    this.setState({
      contadorSegundo: segundos,
      contadorMinuto: minutos,
    });
    this.voltarCronometro();
  }

  voltarCronometro() {
    let segundos = this.state.contadorSegundo;
    let minutos = this.state.contadorMinuto;
    if (minutos == 0 && segundos == 0) {
      clearInterval(this.state.intervalId);
      this.setState({
        iniciarHabilitado: true,
        pararHabilitado: false,
        somarHabilitado: true,
      });
    }
  }
  tempoFormatado() {
    let formato = '';

    if (this.state.contadorMinuto > 9) {
      formato = formato + this.state.contadorMinuto + ':';
    } else {
      formato = formato + '0' + this.state.contadorMinuto + ':';
    }
    if (this.state.contadorSegundo > 9) {
      formato = formato + this.state.contadorSegundo;
    } else {
      formato = formato + '0' + this.state.contadorSegundo;
    }

    return <Text style={estilo.textoCronometro}>{formato}</Text>;
  }
  render() {
    return (
      <View style={estilo.viewExterna}>
        <View style={estilo.viewInterna}>{this.tempoFormatado()}</View>
        <View style={estilo.viewInterna}>
          <View style={{ height: 50 }} />
          <Button
            onPress={this.iniciarCronometro}
            title="Iniciar"
            color="#007FFF"
            accessibilityLabel="Iniciar o Cronômetro"
            disabled={!this.state.iniciarHabilitado}
          />
          <View style={{ height: 40 }} />
          <Button
            onPress={this.pararCronometro}
            title="Parar"
            color="#007FFF"
            accessibilityLabel="Parar cronometro "
            disabled={!this.state.pararHabilitado}
          />

          <View style={{ height: 40 }} />
          <Button
            onPress={this.somarUmMinuto.bind(this)}
            title="Somar 1 minuto"
            color="#007FFF"
            accessibilityLabel="Somar 1 minuto"
            disabled={!this.state.somarHabilitado}
          />
        </View>
      </View>
    );
  }
}
const estilo = {
  viewExterna: {
    marginTop: 100,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10,
    backgroundColor: '#CDCDCD',
  },
  viewInterna: {
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 30,
  },

  textoCronometro: {
    textAlign: 'center',
    marginTop: 30,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10,
    fontSize: 50,
    color: 'red',
    fontWeight: 'bold',
  },
};
    
asked by anonymous 28.10.2018 / 21:19

0 answers