@hexar/biometric-identity-sdk-react-native 1.0.32 → 1.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqGhE,CAAC;AAqDF,eAAe,kBAAkB,CAAC"}
|
|
@@ -42,17 +42,69 @@ const react_1 = __importStar(require("react"));
|
|
|
42
42
|
const react_native_1 = require("react-native");
|
|
43
43
|
const biometric_identity_sdk_core_1 = require("@hexar/biometric-identity-sdk-core");
|
|
44
44
|
const ValidationProgress = ({ progress, theme, language = 'en', }) => {
|
|
45
|
+
const animatedProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
|
|
46
|
+
const [displayProgress, setDisplayProgress] = (0, react_1.useState)(0);
|
|
47
|
+
const animationRef = (0, react_1.useRef)(null);
|
|
48
|
+
const hasStartedAnimation = (0, react_1.useRef)(false);
|
|
45
49
|
(0, react_1.useEffect)(() => {
|
|
46
50
|
if (language) {
|
|
47
51
|
(0, biometric_identity_sdk_core_1.setLanguage)(language);
|
|
48
52
|
}
|
|
49
53
|
}, [language]);
|
|
54
|
+
(0, react_1.useEffect)(() => {
|
|
55
|
+
// Start animation from 0 to 90% over 60 seconds (1 minute) - only once
|
|
56
|
+
if (!hasStartedAnimation.current) {
|
|
57
|
+
hasStartedAnimation.current = true;
|
|
58
|
+
// Start animation to 90% over 60 seconds, regardless of backend progress
|
|
59
|
+
animationRef.current = react_native_1.Animated.timing(animatedProgress, {
|
|
60
|
+
toValue: 90,
|
|
61
|
+
duration: 60000, // 60 seconds
|
|
62
|
+
useNativeDriver: false,
|
|
63
|
+
});
|
|
64
|
+
animationRef.current.start();
|
|
65
|
+
}
|
|
66
|
+
// Only update to actual progress if it's 90% or more (validation complete)
|
|
67
|
+
if (progress >= 90) {
|
|
68
|
+
if (animationRef.current) {
|
|
69
|
+
animationRef.current.stop();
|
|
70
|
+
}
|
|
71
|
+
react_native_1.Animated.timing(animatedProgress, {
|
|
72
|
+
toValue: progress,
|
|
73
|
+
duration: 500,
|
|
74
|
+
useNativeDriver: false,
|
|
75
|
+
}).start();
|
|
76
|
+
}
|
|
77
|
+
// Update display value
|
|
78
|
+
const listener = animatedProgress.addListener(({ value }) => {
|
|
79
|
+
setDisplayProgress(Math.round(value));
|
|
80
|
+
});
|
|
81
|
+
return () => {
|
|
82
|
+
animatedProgress.removeListener(listener);
|
|
83
|
+
};
|
|
84
|
+
}, [progress, animatedProgress]);
|
|
50
85
|
const strings = (0, biometric_identity_sdk_core_1.getStrings)();
|
|
86
|
+
const progressWidth = animatedProgress.interpolate({
|
|
87
|
+
inputRange: [0, 100],
|
|
88
|
+
outputRange: ['0%', '100%'],
|
|
89
|
+
extrapolate: 'clamp',
|
|
90
|
+
});
|
|
51
91
|
return (react_1.default.createElement(react_native_1.View, { style: styles.container },
|
|
52
92
|
react_1.default.createElement(react_native_1.View, { style: styles.content },
|
|
53
93
|
react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#6366F1' }),
|
|
54
94
|
react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: theme?.textColor || '#000000' }] }, strings.validation.title || 'Validating Identity'),
|
|
55
95
|
react_1.default.createElement(react_native_1.Text, { style: [styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }] }, strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'),
|
|
96
|
+
react_1.default.createElement(react_native_1.View, { style: styles.progressBarContainer },
|
|
97
|
+
react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
|
|
98
|
+
react_1.default.createElement(react_native_1.Animated.View, { style: [
|
|
99
|
+
styles.progressFill,
|
|
100
|
+
{
|
|
101
|
+
width: progressWidth,
|
|
102
|
+
backgroundColor: theme?.primaryColor || '#6366F1',
|
|
103
|
+
},
|
|
104
|
+
] })),
|
|
105
|
+
react_1.default.createElement(react_native_1.Text, { style: [styles.progressText, { color: theme?.textColor || '#000000' }] },
|
|
106
|
+
displayProgress,
|
|
107
|
+
"%")),
|
|
56
108
|
react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.validation.almostDone || 'Esto puede tardar unos segundos...'))));
|
|
57
109
|
};
|
|
58
110
|
exports.ValidationProgress = ValidationProgress;
|
|
@@ -78,6 +130,27 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
78
130
|
marginBottom: 32,
|
|
79
131
|
textAlign: 'center',
|
|
80
132
|
},
|
|
133
|
+
progressBarContainer: {
|
|
134
|
+
width: '100%',
|
|
135
|
+
marginBottom: 24,
|
|
136
|
+
},
|
|
137
|
+
progressBar: {
|
|
138
|
+
width: '100%',
|
|
139
|
+
height: 8,
|
|
140
|
+
backgroundColor: '#E5E7EB',
|
|
141
|
+
borderRadius: 4,
|
|
142
|
+
overflow: 'hidden',
|
|
143
|
+
marginBottom: 8,
|
|
144
|
+
},
|
|
145
|
+
progressFill: {
|
|
146
|
+
height: '100%',
|
|
147
|
+
borderRadius: 4,
|
|
148
|
+
},
|
|
149
|
+
progressText: {
|
|
150
|
+
fontSize: 14,
|
|
151
|
+
fontWeight: '600',
|
|
152
|
+
textAlign: 'center',
|
|
153
|
+
},
|
|
81
154
|
bottomText: {
|
|
82
155
|
fontSize: 14,
|
|
83
156
|
color: '#9CA3AF',
|
package/package.json
CHANGED
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
* Shows AI validation progress
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import React, { useEffect } from 'react';
|
|
6
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
7
7
|
import {
|
|
8
8
|
View,
|
|
9
9
|
Text,
|
|
10
10
|
StyleSheet,
|
|
11
11
|
ActivityIndicator,
|
|
12
|
+
Animated,
|
|
12
13
|
} from 'react-native';
|
|
13
14
|
import { ThemeConfig, SupportedLanguage, getStrings, setLanguage } from '@hexar/biometric-identity-sdk-core';
|
|
14
15
|
|
|
@@ -23,14 +24,62 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
|
|
|
23
24
|
theme,
|
|
24
25
|
language = 'en',
|
|
25
26
|
}) => {
|
|
27
|
+
const animatedProgress = useRef(new Animated.Value(0)).current;
|
|
28
|
+
const [displayProgress, setDisplayProgress] = useState(0);
|
|
29
|
+
const animationRef = useRef<Animated.CompositeAnimation | null>(null);
|
|
30
|
+
const hasStartedAnimation = useRef(false);
|
|
31
|
+
|
|
26
32
|
useEffect(() => {
|
|
27
33
|
if (language) {
|
|
28
34
|
setLanguage(language);
|
|
29
35
|
}
|
|
30
36
|
}, [language]);
|
|
31
37
|
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
// Start animation from 0 to 90% over 60 seconds (1 minute) - only once
|
|
40
|
+
if (!hasStartedAnimation.current) {
|
|
41
|
+
hasStartedAnimation.current = true;
|
|
42
|
+
|
|
43
|
+
// Start animation to 90% over 60 seconds, regardless of backend progress
|
|
44
|
+
animationRef.current = Animated.timing(animatedProgress, {
|
|
45
|
+
toValue: 90,
|
|
46
|
+
duration: 60000, // 60 seconds
|
|
47
|
+
useNativeDriver: false,
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
animationRef.current.start();
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Only update to actual progress if it's 90% or more (validation complete)
|
|
54
|
+
if (progress >= 90) {
|
|
55
|
+
if (animationRef.current) {
|
|
56
|
+
animationRef.current.stop();
|
|
57
|
+
}
|
|
58
|
+
Animated.timing(animatedProgress, {
|
|
59
|
+
toValue: progress,
|
|
60
|
+
duration: 500,
|
|
61
|
+
useNativeDriver: false,
|
|
62
|
+
}).start();
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Update display value
|
|
66
|
+
const listener = animatedProgress.addListener(({ value }) => {
|
|
67
|
+
setDisplayProgress(Math.round(value));
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
return () => {
|
|
71
|
+
animatedProgress.removeListener(listener);
|
|
72
|
+
};
|
|
73
|
+
}, [progress, animatedProgress]);
|
|
74
|
+
|
|
32
75
|
const strings = getStrings();
|
|
33
76
|
|
|
77
|
+
const progressWidth = animatedProgress.interpolate({
|
|
78
|
+
inputRange: [0, 100],
|
|
79
|
+
outputRange: ['0%', '100%'],
|
|
80
|
+
extrapolate: 'clamp',
|
|
81
|
+
});
|
|
82
|
+
|
|
34
83
|
return (
|
|
35
84
|
<View style={styles.container}>
|
|
36
85
|
<View style={styles.content}>
|
|
@@ -47,6 +96,24 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
|
|
|
47
96
|
{strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'}
|
|
48
97
|
</Text>
|
|
49
98
|
|
|
99
|
+
{/* Progress Bar */}
|
|
100
|
+
<View style={styles.progressBarContainer}>
|
|
101
|
+
<View style={styles.progressBar}>
|
|
102
|
+
<Animated.View
|
|
103
|
+
style={[
|
|
104
|
+
styles.progressFill,
|
|
105
|
+
{
|
|
106
|
+
width: progressWidth,
|
|
107
|
+
backgroundColor: theme?.primaryColor || '#6366F1',
|
|
108
|
+
},
|
|
109
|
+
]}
|
|
110
|
+
/>
|
|
111
|
+
</View>
|
|
112
|
+
<Text style={[styles.progressText, { color: theme?.textColor || '#000000' }]}>
|
|
113
|
+
{displayProgress}%
|
|
114
|
+
</Text>
|
|
115
|
+
</View>
|
|
116
|
+
|
|
50
117
|
<Text style={styles.bottomText}>
|
|
51
118
|
{strings.validation.almostDone || 'Esto puede tardar unos segundos...'}
|
|
52
119
|
</Text>
|
|
@@ -77,6 +144,27 @@ const styles = StyleSheet.create({
|
|
|
77
144
|
marginBottom: 32,
|
|
78
145
|
textAlign: 'center',
|
|
79
146
|
},
|
|
147
|
+
progressBarContainer: {
|
|
148
|
+
width: '100%',
|
|
149
|
+
marginBottom: 24,
|
|
150
|
+
},
|
|
151
|
+
progressBar: {
|
|
152
|
+
width: '100%',
|
|
153
|
+
height: 8,
|
|
154
|
+
backgroundColor: '#E5E7EB',
|
|
155
|
+
borderRadius: 4,
|
|
156
|
+
overflow: 'hidden',
|
|
157
|
+
marginBottom: 8,
|
|
158
|
+
},
|
|
159
|
+
progressFill: {
|
|
160
|
+
height: '100%',
|
|
161
|
+
borderRadius: 4,
|
|
162
|
+
},
|
|
163
|
+
progressText: {
|
|
164
|
+
fontSize: 14,
|
|
165
|
+
fontWeight: '600',
|
|
166
|
+
textAlign: 'center',
|
|
167
|
+
},
|
|
80
168
|
bottomText: {
|
|
81
169
|
fontSize: 14,
|
|
82
170
|
color: '#9CA3AF',
|