Add progress circle to TimerPage
This commit is contained in:
parent
aaca9240a2
commit
9c808ce84b
|
@ -1,11 +1,20 @@
|
|||
import React, {useEffect, useState} from 'react'
|
||||
import {NativeEventEmitter, NativeModules, StyleSheet, View} from 'react-native'
|
||||
import React, {useEffect, useMemo, useState} from 'react'
|
||||
import {
|
||||
Dimensions,
|
||||
NativeEventEmitter,
|
||||
NativeModules,
|
||||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {Button, Text} from 'react-native-paper'
|
||||
import {ProgressCircle} from 'react-native-svg-charts'
|
||||
import {MARGIN, PADDING} from './constants'
|
||||
import {settingsRepo} from './db'
|
||||
import DrawerHeader from './DrawerHeader'
|
||||
import MassiveFab from './MassiveFab'
|
||||
import Settings from './settings'
|
||||
import {useTheme} from './use-theme'
|
||||
import {useTheme as usePaperTheme} from 'react-native-paper'
|
||||
|
||||
interface TickEvent {
|
||||
minutes: string
|
||||
|
@ -16,6 +25,8 @@ export default function TimerPage() {
|
|||
const [minutes, setMinutes] = useState('00')
|
||||
const [seconds, setSeconds] = useState('00')
|
||||
const [settings, setSettings] = useState<Settings>()
|
||||
const {color} = useTheme()
|
||||
const {colors} = usePaperTheme()
|
||||
|
||||
useEffect(() => {
|
||||
settingsRepo.findOne({where: {}}).then(setSettings)
|
||||
|
@ -37,6 +48,18 @@ export default function TimerPage() {
|
|||
NativeModules.AlarmModule.add(...params)
|
||||
}
|
||||
|
||||
const progress = useMemo(() => {
|
||||
return (Number(minutes) * 60 + Number(seconds)) / 210
|
||||
}, [minutes, seconds])
|
||||
|
||||
const left = useMemo(() => {
|
||||
return Dimensions.get('screen').width * 0.5 - 85
|
||||
}, [])
|
||||
|
||||
const top = useMemo(() => {
|
||||
return Dimensions.get('screen').height * 0.5 - 45
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<DrawerHeader name="Timer" />
|
||||
|
@ -47,21 +70,26 @@ export default function TimerPage() {
|
|||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Text style={styles.text}>Remaining</Text>
|
||||
<Text style={styles.text}>
|
||||
{minutes}:{seconds}
|
||||
</Text>
|
||||
<Button onPress={add}>Add 1 min</Button>
|
||||
<View>
|
||||
<Text style={{fontSize: 70, top: 150}}>
|
||||
{minutes}:{seconds}
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressCircle
|
||||
style={{height: 300, width: 500, marginBottom: MARGIN, top: -50}}
|
||||
progress={progress}
|
||||
progressColor={color}
|
||||
backgroundColor={colors.placeholder}
|
||||
strokeWidth={10}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Button
|
||||
onPress={add}
|
||||
style={{position: 'absolute', top: '85%', left: left + 25}}>
|
||||
Add 1 min
|
||||
</Button>
|
||||
<MassiveFab icon="stop" onPress={stop} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
text: {
|
||||
fontSize: 32,
|
||||
marginBottom: MARGIN,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue
Block a user