From d9307b15d597c7046d7eefb0e8ce999b7f579f9c Mon Sep 17 00:00:00 2001 From: Ben Groves Date: Sat, 26 Oct 2019 13:08:29 +0200 Subject: [PATCH 1/3] using the stopwatch timer module for timer functionality --- App.js | 172 ++++++++++++++++++++++++--------------------------- package.json | 2 + 2 files changed, 84 insertions(+), 90 deletions(-) diff --git a/App.js b/App.js index e5e799e..456335c 100644 --- a/App.js +++ b/App.js @@ -1,170 +1,162 @@ -import React from 'react'; -import { StyleSheet, Text, View, Button, TouchableHighlight, ListView } from 'react-native'; - -let laps = [ - { name: 'Lap 1', value: '00.00.01'}, - { name: 'Lap 2', value: '00.00.02'}, - { name: 'Lap 3', value: '00.00.03'}, - { name: 'Lap 4', value: '00.00.04'}, - { name: 'Lap 5', value: '00.00.05'}, -]; - -let ds = new ListView.DataSource({ - rowHasChanged: (row1, row2) => row1 !== row2, -}); +import React, { Component } from 'react'; +import { StyleSheet,Text,View, TouchableHighlight, TextInput } from 'react-native'; +import { Timer } from 'react-native-stopwatch-timer'; -class Stopwatch extends React.Component { +export default class HfitTimer extends Component { constructor(props) { super(props); - this.state = { - dataSource: ds.cloneWithRows(laps) - } - } - } + isTimerStart: false, + timerDuration: 6000, + resetTimer: false, + }; + this.startStopTimer = this.startStopTimer.bind(this); + this.resetTimer = this.resetTimer.bind(this); + } + startStopTimer() { + this.setState({isTimerStart: !this.state.isTimerStart, resetTimer: false}); + } + resetTimer() { + this.setState({isTimerStart: false, resetTimer: true}); + } + getFormattedTime(time) { + this.currentTime = time; + } + + _renderTimeInput() { + return( + + Time: + this.setState({timerDuration})} /> + + ) + } -export default class App extends React.Component { _renderTitle() { return ( - Stopwatch - + HFIT + ) } - - _renderTimers() { + + _renderTimer() { return ( 00:00.95 - 00:02.95 + ) } - + _renderButtons() { return ( - - Lap + + + {!this.state.isTimerStart ? "START" : "STOP"} + - - Start + + RESET ) } - - _renderLaps() { - return ( - - ( - - {rowData.name} - {rowData.value} - - )} - /> - - ) - } - + render() { return ( - {this._renderTitle()} - {this._renderTimers()} + {this._renderTitle()} + {this._renderTimer()} - {this._renderButtons()} + {this._renderButtons()} - ) + ); } } -// let laps = [ -// { name: 'Lap 1', value: '00.00.01'}, -// { name: 'Lap 2', value: '00.00.02'}, -// { name: 'Lap 3', value: '00.00.03'}, -// { name: 'Lap 4', value: '00.00.04'}, -// { name: 'Lap 5', value: '00.00.05'}, -// ]; - -// let ds = new ListView.DataSource({ -// rowHasChanged: (row1, row2) => row1 !== row2, -// }); - -// class Stopwatch extends React.Component { -// constructor(props) { -// super(props); - -// this.state = { -// dataSource: ds.cloneWithRows(laps) -// } -// } -// } +const handleTimerComplete = () => alert("Custom Completion Function"); +const options = { + text: { + fontSize: 60, + fontWeight: '100', + alignSelf: 'flex-end', + } +}; const styles = StyleSheet.create({ container: { flex: 1, }, - + header: { - borderBottomWidth: 0.5, - paddingTop: 20, + paddingTop: 30, paddingBottom: 10, backgroundColor: '#F9F9F9' }, - + title: { alignSelf: 'center', fontWeight: '600', }, - + top: { flex: 1, }, - + bottom: { flex: 2, backgroundColor: '#F0EFF5' }, - + timerWrapper: { backgroundColor: '#FFFFFF', justifyContent: 'center', flex: 100, }, - + timerWrapperInner: { - borderWidth: 0.5, alignSelf: 'center', }, - + mainTimer: { fontSize: 60, fontWeight: '100', alignSelf: 'flex-end' }, - + lapTimer: { fontSize: 18, alignSelf: 'flex-end' }, - + buttonWrapper: { flexDirection: 'row', justifyContent: 'space-around', paddingTop: 15, paddingBottom: 30, }, - + button: { height: 80, width: 80, @@ -173,7 +165,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center' }, - + lapRow: { flexDirection: 'row', justifyContent: 'space-around', @@ -182,12 +174,12 @@ const styles = StyleSheet.create({ borderBottomWidth: 0.5, borderBottomColor: '#ddd' }, - + lapNumber: { fontSize: 16, color: '#777' }, - + lapTime: { color: '#000', fontSize: 20, diff --git a/package.json b/package.json index 54ebe78..f6d6a56 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "dependencies": { "expo": "^35.0.0", "react": "16.8.3", + "react-clock": "^2.4.0", "react-dom": "16.8.3", "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", + "react-native-stopwatch-timer": "0.0.21", "react-native-web": "^0.11.7" }, "devDependencies": { From 7b4f71a562a31748ce1d96d5ebd378480579316c Mon Sep 17 00:00:00 2001 From: Ben Groves Date: Sun, 27 Oct 2019 12:01:17 +0100 Subject: [PATCH 2/3] adding componenets for user input --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index f6d6a56..134cf7a 100644 --- a/package.json +++ b/package.json @@ -9,12 +9,15 @@ }, "dependencies": { "expo": "^35.0.0", + "hh-mm-ss": "^1.2.0", "react": "16.8.3", "react-clock": "^2.4.0", "react-dom": "16.8.3", "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", + "react-native-numeric-input": "^1.8.3", "react-native-stopwatch-timer": "0.0.21", - "react-native-web": "^0.11.7" + "react-native-web": "^0.11.7", + "styled-components": "^4.4.0" }, "devDependencies": { "babel-preset-expo": "^7.1.0" From 95795e6940a4d7608a155b52961f22dbb8b69376 Mon Sep 17 00:00:00 2001 From: Ben Groves Date: Sun, 27 Oct 2019 12:02:01 +0100 Subject: [PATCH 3/3] Rendering input form and adding function to set time on timer --- App.js | 115 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 100 insertions(+), 15 deletions(-) diff --git a/App.js b/App.js index 456335c..3ecdf11 100644 --- a/App.js +++ b/App.js @@ -1,17 +1,22 @@ import React, { Component } from 'react'; -import { StyleSheet,Text,View, TouchableHighlight, TextInput } from 'react-native'; +import { StyleSheet,Text,View, TouchableHighlight, TextInput, Button, Alert } from 'react-native'; import { Timer } from 'react-native-stopwatch-timer'; +import TimeFormat from 'hh-mm-ss'; +import NumericInput from 'react-native-numeric-input' export default class HfitTimer extends Component { constructor(props) { super(props); this.state = { isTimerStart: false, - timerDuration: 6000, + timerDuration: 0, resetTimer: false, + timerMins: 0, + timerSecs: 0, }; this.startStopTimer = this.startStopTimer.bind(this); this.resetTimer = this.resetTimer.bind(this); + this.setTimer = this.setTimer.bind(this); } startStopTimer() { this.setState({isTimerStart: !this.state.isTimerStart, resetTimer: false}); @@ -22,15 +27,68 @@ export default class HfitTimer extends Component { getFormattedTime(time) { this.currentTime = time; } + setTimer() { + let mins = this.state.timerMins > 9 ? "" + this.state.timerMins: "0" + this.state.timerMins + let secs = this.state.timerSecs > 9 ? "" + this.state.timerSecs: "0" + this.state.timerSecs + let time = TimeFormat.toMs(mins + ":" + secs, 'mm:ss') + this.setState({timerDuration: time}) + this.resetTimer() + } _renderTimeInput() { + let selectorMinVal = 0, + selectorMaxVal = 60 + + return( + + + Intervals + console.log({value})} + type='up-down' + minValue={selectorMinVal} + rounded + /> + + + Minutes: + this.setState({timerMins: value})} + type='up-down' + minValue={selectorMinVal} + maxValue={selectorMaxVal} + rounded + /> + + + Seconds: + this.setState({timerSecs: value})} + type='up-down' + minValue={selectorMinVal} + maxValue={selectorMaxVal} + rounded + /> + + + ) + } + + toNumber(string) { + let charRemove = string.replace(/[^0-9]/g, '') + let newNumber = Number(charRemove) + return newNumber + } + + _renderSetButton() { return( - Time: - this.setState({timerDuration})} /> +