Skip to content

Commit

Permalink
Merge pull request #1 from BennyG93/timer-module
Browse files Browse the repository at this point in the history 
First real interation - complete overhaul
  • Loading branch information
@BennyG93
BennyG93 authored Oct 27, 2019
2 parents 319575c + 95795e6 commit 843c747
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 97 deletions.
269 changes: 173 additions & 96 deletions App.js
View file
Original file line number Diff line number Diff line change
@@ -1,170 +1,228 @@
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, 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'

class Stopwatch extends React.Component {
export default class HfitTimer extends Component {
constructor(props) {
super(props);

this.state = {
dataSource: ds.cloneWithRows(laps)
}
}
}
isTimerStart: false,
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});
}
resetTimer() {
this.setState({isTimerStart: false, resetTimer: true});
}
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(
<View style={styles.buttonWrapper}>
<View>
<Text>Intervals</Text>
<NumericInput
onChange={value => console.log({value})}
type='up-down'
minValue={selectorMinVal}
rounded
/>
</View>
<View>
<Text>Minutes:</Text>
<NumericInput
value={this.state.timerMins}
onChange={value => this.setState({timerMins: value})}
type='up-down'
minValue={selectorMinVal}
maxValue={selectorMaxVal}
rounded
/>
</View>
<View>
<Text>Seconds:</Text>
<NumericInput
value={this.state.timerSecs}
onChange={value => this.setState({timerSecs: value})}
type='up-down'
minValue={selectorMinVal}
maxValue={selectorMaxVal}
rounded
/>
</View>
</View>
)
}

toNumber(string) {
let charRemove = string.replace(/[^0-9]/g, '')
let newNumber = Number(charRemove)
return newNumber
}

_renderSetButton() {
return(
<View>
<Button
title="Set Intervals"
onPress={this.setTimer}
/>
</View>
)
}

export default class App extends React.Component {
_renderTitle() {
return (
<View style={styles.header}>
<Text style={styles.title}>Stopwatch</Text>
</View>
<Text style={styles.title}>HFIT</Text>
</View>
)
}
_renderTimers() {

_renderTimer() {
return (
<View style={styles.timerWrapper}>
<View style={styles.timerWrapperInner}>
<Text style={styles.lapTimer}>00:00.95</Text>
<Text style={styles.mainTimer}>00:02.95</Text>
<Text style={styles.lapTimer}>00:00.00</Text>
<Timer
totalDuration={this.state.timerDuration} secs
//Time Duration
start={this.state.isTimerStart}
//To start
reset={this.state.resetTimer}
//To reset
options={options}
//options for the styling
handleFinish={handleTimerComplete}
//can call a function On finish of the time
getTime={this.getFormattedTime} />
</View>
</View>
)
}
_renderButtons() {

_renderStopStartButtons() {
return (
<View style={styles.buttonWrapper}>
<TouchableHighlight underlayColor='#777' style={styles.button}>
<Text>Lap</Text>
<TouchableHighlight onPress={this.startStopTimer} underlayColor='#777' style={styles.button}>
<Text>
{this.state.isTimerStart ? "STOP" : "START"}
</Text>
</TouchableHighlight>
<TouchableHighlight underlayColor='#777' style={styles.button}>
<Text>Start</Text>
<TouchableHighlight onPress={this.resetTimer} underlayColor='#777' style={styles.button}>
<Text>RESET</Text>
</TouchableHighlight>
</View>
)
}

_renderLaps() {
return (
<View style={styles.lapsWrapper}>
<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={ (rowData) => (
<View style={styles.lapRow}>
<Text style={style.lapNumber}>{rowData.name}</Text>
<Text style={style.lapTime}>{rowData.value}</Text>
</View>
)}
/>
</View>
)
}


render() {
return (
<View style={styles.container}>
<View style={styles.top}>
{this._renderTitle()}
{this._renderTimers()}
{this._renderTitle()}
{this._renderTimer()}
</View>
<View style={styles.mid}>
{this._renderTimeInput()}
{this._renderSetButton()}
</View>
<View style={styles.bottom}>
{this._renderButtons()}
{this._renderStopStartButtons()}
</View>
</View>
)
);
}
}

// 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,
},


mid: {
flex: 1,
},

bottom: {
flex: 2,
flex: 1,
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',
flexDirection: 'row',
justifyContent: 'space-around',
paddingTop: 15,
paddingBottom: 30,
},
},

button: {
height: 80,
width: 80,
Expand All @@ -173,7 +231,15 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center'
},


startBtn: {
color: '#00cc00'
},

stopBtn: {
color: 'red'
},

lapRow: {
flexDirection: 'row',
justifyContent: 'space-around',
Expand All @@ -182,15 +248,26 @@ const styles = StyleSheet.create({
borderBottomWidth: 0.5,
borderBottomColor: '#ddd'
},

lapNumber: {
fontSize: 16,
color: '#777'
},

lapTime: {
color: '#000',
fontSize: 20,
fontWeight: '300'
}
},

inputWrapper: {
flexDirection: 'row',
justifyContent: 'space-around',
paddingTop: 15,
paddingBottom: 30,
},

inputElementWrapper: {
alignSelf: 'center',
},
});
7 changes: 6 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +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-web": "^0.11.7"
"react-native-numeric-input": "^1.8.3",
"react-native-stopwatch-timer": "0.0.21",
"react-native-web": "^0.11.7",
"styled-components": "^4.4.0"
},
"devDependencies": {
"babel-preset-expo": "^7.1.0"
Expand Down

0 comments on commit 843c747

Please sign in to comment.