-
Notifications
You must be signed in to change notification settings - Fork 1
/
CaptureButton.js
85 lines (78 loc) · 2.38 KB
/
CaptureButton.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, {useState, useEffect, useRef} from "react";
import {View, TouchableWithoutFeedback} from "react-native";
import CircleProgress from "./CircleProgress";
export default (
{
onTakePicture = () => {},
onRecordingStart = () => {},
onRecordingEnd = () => {},
delayLongPress = 1200,
radiusOuter = 80,
radiusOuterRecording = 120,
radiusInner = 60,
radiusInnerRecording = 30,
duration = 10000,
interval = 100,
disableRecording = false,
disableTakingPicture = false
}
) => {
const [state, setState] = useState({circleRadius: radiusInner, pressing: false});
const setCircleRadius = (circleRadius) => {
setState({
...state,
circleRadius
});
};
const setPressing = (pressing) => {
setState({
...state,
pressing
});
};
const {circleRadius, pressing} = state;
useEffect(() => {
if (pressing) {
onRecordingStart();
} else {
onRecordingEnd();
}
}, [pressing]);
const outerCircleRadius = pressing ? radiusOuterRecording : radiusOuter;
return (
<TouchableWithoutFeedback
onPress={() => {
if (!disableTakingPicture) {
onTakePicture();
}
}}
onLongPress={() => {
if (!disableRecording) {
setCircleRadius(radiusInnerRecording);
setPressing(true);
}
}}
onPressOut={() => {
if (!disableTakingPicture) {
setCircleRadius(radiusInner);
setPressing(false);
}
}}
delayLongPress={delayLongPress}
>
<View style={{width: outerCircleRadius, height: outerCircleRadius}}>
<CircleProgress
duration={duration}
interval={interval}
radiusOuter={outerCircleRadius}
radiusInner={circleRadius}
recording={pressing}
onComplete={() => {
setCircleRadius(radiusInner);
setPressing(false);
}}
/>
</View>
</TouchableWithoutFeedback>
);
}