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