@hexar/biometric-identity-sdk-react-native 1.0.32 → 1.0.33
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,CA8GhE,CAAC;AAqDF,eAAe,kBAAkB,CAAC"}
|
|
@@ -42,17 +42,81 @@ 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);
|
|
45
48
|
(0, react_1.useEffect)(() => {
|
|
46
49
|
if (language) {
|
|
47
50
|
(0, biometric_identity_sdk_core_1.setLanguage)(language);
|
|
48
51
|
}
|
|
49
52
|
}, [language]);
|
|
53
|
+
(0, react_1.useEffect)(() => {
|
|
54
|
+
// Start animation from 0 to 90% over 60 seconds (1 minute)
|
|
55
|
+
if (progress < 90) {
|
|
56
|
+
// If we have real progress from backend, use it; otherwise animate to 90% over 60s
|
|
57
|
+
if (progress > 0 && progress < 90) {
|
|
58
|
+
// Use actual progress
|
|
59
|
+
react_native_1.Animated.timing(animatedProgress, {
|
|
60
|
+
toValue: progress,
|
|
61
|
+
duration: 500,
|
|
62
|
+
useNativeDriver: false,
|
|
63
|
+
}).start();
|
|
64
|
+
}
|
|
65
|
+
else if (progress === 0) {
|
|
66
|
+
// Start animation to 90% over 60 seconds
|
|
67
|
+
if (animationRef.current) {
|
|
68
|
+
animationRef.current.stop();
|
|
69
|
+
}
|
|
70
|
+
animationRef.current = react_native_1.Animated.timing(animatedProgress, {
|
|
71
|
+
toValue: 90,
|
|
72
|
+
duration: 60000, // 60 seconds
|
|
73
|
+
useNativeDriver: false,
|
|
74
|
+
});
|
|
75
|
+
animationRef.current.start();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
// If progress is 90% or more, animate to actual progress
|
|
80
|
+
react_native_1.Animated.timing(animatedProgress, {
|
|
81
|
+
toValue: progress,
|
|
82
|
+
duration: 500,
|
|
83
|
+
useNativeDriver: false,
|
|
84
|
+
}).start();
|
|
85
|
+
}
|
|
86
|
+
// Update display value
|
|
87
|
+
const listener = animatedProgress.addListener(({ value }) => {
|
|
88
|
+
setDisplayProgress(Math.round(value));
|
|
89
|
+
});
|
|
90
|
+
return () => {
|
|
91
|
+
animatedProgress.removeListener(listener);
|
|
92
|
+
if (animationRef.current) {
|
|
93
|
+
animationRef.current.stop();
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
}, [progress, animatedProgress]);
|
|
50
97
|
const strings = (0, biometric_identity_sdk_core_1.getStrings)();
|
|
98
|
+
const progressWidth = animatedProgress.interpolate({
|
|
99
|
+
inputRange: [0, 100],
|
|
100
|
+
outputRange: ['0%', '100%'],
|
|
101
|
+
extrapolate: 'clamp',
|
|
102
|
+
});
|
|
51
103
|
return (react_1.default.createElement(react_native_1.View, { style: styles.container },
|
|
52
104
|
react_1.default.createElement(react_native_1.View, { style: styles.content },
|
|
53
105
|
react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#6366F1' }),
|
|
54
106
|
react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: theme?.textColor || '#000000' }] }, strings.validation.title || 'Validating Identity'),
|
|
55
107
|
react_1.default.createElement(react_native_1.Text, { style: [styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }] }, strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'),
|
|
108
|
+
react_1.default.createElement(react_native_1.View, { style: styles.progressBarContainer },
|
|
109
|
+
react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
|
|
110
|
+
react_1.default.createElement(react_native_1.Animated.View, { style: [
|
|
111
|
+
styles.progressFill,
|
|
112
|
+
{
|
|
113
|
+
width: progressWidth,
|
|
114
|
+
backgroundColor: theme?.primaryColor || '#6366F1',
|
|
115
|
+
},
|
|
116
|
+
] })),
|
|
117
|
+
react_1.default.createElement(react_native_1.Text, { style: [styles.progressText, { color: theme?.textColor || '#000000' }] },
|
|
118
|
+
displayProgress,
|
|
119
|
+
"%")),
|
|
56
120
|
react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.validation.almostDone || 'Esto puede tardar unos segundos...'))));
|
|
57
121
|
};
|
|
58
122
|
exports.ValidationProgress = ValidationProgress;
|
|
@@ -78,6 +142,27 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
78
142
|
marginBottom: 32,
|
|
79
143
|
textAlign: 'center',
|
|
80
144
|
},
|
|
145
|
+
progressBarContainer: {
|
|
146
|
+
width: '100%',
|
|
147
|
+
marginBottom: 24,
|
|
148
|
+
},
|
|
149
|
+
progressBar: {
|
|
150
|
+
width: '100%',
|
|
151
|
+
height: 8,
|
|
152
|
+
backgroundColor: '#E5E7EB',
|
|
153
|
+
borderRadius: 4,
|
|
154
|
+
overflow: 'hidden',
|
|
155
|
+
marginBottom: 8,
|
|
156
|
+
},
|
|
157
|
+
progressFill: {
|
|
158
|
+
height: '100%',
|
|
159
|
+
borderRadius: 4,
|
|
160
|
+
},
|
|
161
|
+
progressText: {
|
|
162
|
+
fontSize: 14,
|
|
163
|
+
fontWeight: '600',
|
|
164
|
+
textAlign: 'center',
|
|
165
|
+
},
|
|
81
166
|
bottomText: {
|
|
82
167
|
fontSize: 14,
|
|
83
168
|
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,71 @@ 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
|
+
|
|
26
31
|
useEffect(() => {
|
|
27
32
|
if (language) {
|
|
28
33
|
setLanguage(language);
|
|
29
34
|
}
|
|
30
35
|
}, [language]);
|
|
31
36
|
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
// Start animation from 0 to 90% over 60 seconds (1 minute)
|
|
39
|
+
if (progress < 90) {
|
|
40
|
+
// If we have real progress from backend, use it; otherwise animate to 90% over 60s
|
|
41
|
+
if (progress > 0 && progress < 90) {
|
|
42
|
+
// Use actual progress
|
|
43
|
+
Animated.timing(animatedProgress, {
|
|
44
|
+
toValue: progress,
|
|
45
|
+
duration: 500,
|
|
46
|
+
useNativeDriver: false,
|
|
47
|
+
}).start();
|
|
48
|
+
} else if (progress === 0) {
|
|
49
|
+
// Start animation to 90% over 60 seconds
|
|
50
|
+
if (animationRef.current) {
|
|
51
|
+
animationRef.current.stop();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
animationRef.current = Animated.timing(animatedProgress, {
|
|
55
|
+
toValue: 90,
|
|
56
|
+
duration: 60000, // 60 seconds
|
|
57
|
+
useNativeDriver: false,
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
animationRef.current.start();
|
|
61
|
+
}
|
|
62
|
+
} else {
|
|
63
|
+
// If progress is 90% or more, animate to actual progress
|
|
64
|
+
Animated.timing(animatedProgress, {
|
|
65
|
+
toValue: progress,
|
|
66
|
+
duration: 500,
|
|
67
|
+
useNativeDriver: false,
|
|
68
|
+
}).start();
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Update display value
|
|
72
|
+
const listener = animatedProgress.addListener(({ value }) => {
|
|
73
|
+
setDisplayProgress(Math.round(value));
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
return () => {
|
|
77
|
+
animatedProgress.removeListener(listener);
|
|
78
|
+
if (animationRef.current) {
|
|
79
|
+
animationRef.current.stop();
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
}, [progress, animatedProgress]);
|
|
83
|
+
|
|
32
84
|
const strings = getStrings();
|
|
33
85
|
|
|
86
|
+
const progressWidth = animatedProgress.interpolate({
|
|
87
|
+
inputRange: [0, 100],
|
|
88
|
+
outputRange: ['0%', '100%'],
|
|
89
|
+
extrapolate: 'clamp',
|
|
90
|
+
});
|
|
91
|
+
|
|
34
92
|
return (
|
|
35
93
|
<View style={styles.container}>
|
|
36
94
|
<View style={styles.content}>
|
|
@@ -47,6 +105,24 @@ export const ValidationProgress: React.FC<ValidationProgressProps> = ({
|
|
|
47
105
|
{strings.validation.validatingDocumentAndFace || 'Validando documento y rostro...'}
|
|
48
106
|
</Text>
|
|
49
107
|
|
|
108
|
+
{/* Progress Bar */}
|
|
109
|
+
<View style={styles.progressBarContainer}>
|
|
110
|
+
<View style={styles.progressBar}>
|
|
111
|
+
<Animated.View
|
|
112
|
+
style={[
|
|
113
|
+
styles.progressFill,
|
|
114
|
+
{
|
|
115
|
+
width: progressWidth,
|
|
116
|
+
backgroundColor: theme?.primaryColor || '#6366F1',
|
|
117
|
+
},
|
|
118
|
+
]}
|
|
119
|
+
/>
|
|
120
|
+
</View>
|
|
121
|
+
<Text style={[styles.progressText, { color: theme?.textColor || '#000000' }]}>
|
|
122
|
+
{displayProgress}%
|
|
123
|
+
</Text>
|
|
124
|
+
</View>
|
|
125
|
+
|
|
50
126
|
<Text style={styles.bottomText}>
|
|
51
127
|
{strings.validation.almostDone || 'Esto puede tardar unos segundos...'}
|
|
52
128
|
</Text>
|
|
@@ -77,6 +153,27 @@ const styles = StyleSheet.create({
|
|
|
77
153
|
marginBottom: 32,
|
|
78
154
|
textAlign: 'center',
|
|
79
155
|
},
|
|
156
|
+
progressBarContainer: {
|
|
157
|
+
width: '100%',
|
|
158
|
+
marginBottom: 24,
|
|
159
|
+
},
|
|
160
|
+
progressBar: {
|
|
161
|
+
width: '100%',
|
|
162
|
+
height: 8,
|
|
163
|
+
backgroundColor: '#E5E7EB',
|
|
164
|
+
borderRadius: 4,
|
|
165
|
+
overflow: 'hidden',
|
|
166
|
+
marginBottom: 8,
|
|
167
|
+
},
|
|
168
|
+
progressFill: {
|
|
169
|
+
height: '100%',
|
|
170
|
+
borderRadius: 4,
|
|
171
|
+
},
|
|
172
|
+
progressText: {
|
|
173
|
+
fontSize: 14,
|
|
174
|
+
fontWeight: '600',
|
|
175
|
+
textAlign: 'center',
|
|
176
|
+
},
|
|
80
177
|
bottomText: {
|
|
81
178
|
fontSize: 14,
|
|
82
179
|
color: '#9CA3AF',
|