status-im/keycard-exit
2
0
Fork 0
mirror of https://github.com/status-im/keycard-exit.git synced 2025-02-12 10:48:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

added pin interface

Browse Source
This commit is contained in:
Ksenia Lebedeva 2024-09-13 16:18:01 +02:00
parent b5d00c8d69
commit 628187e68d
4 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/CustomDialpad.tsx
View File

@ -27,6 +27,9 @@ const CustomDialpad: FC<CustomDialpadProps> = props => {
if (item === "X") { if (item === "X") {
setCode((prev) => prev.slice(0, -1)); setCode((prev) => prev.slice(0, -1));
} else { } else {
if (code.length === pinLength) {
return;
}
setCode((prev) => [...prev, item]); setCode((prev) => [...prev, item]);
} }
} }
@ -37,11 +40,11 @@ const CustomDialpad: FC<CustomDialpadProps> = props => {
<Text style={styles.pinText}>Create PIN</Text> <Text style={styles.pinText}>Create PIN</Text>
<Text style={styles.pinSubText}>Enter your secure six-digit code</Text> <Text style={styles.pinSubText}>Enter your secure six-digit code</Text>
<DialpadPin pinLength={pinLength} pinSize={pinSize} code={code} dialPadContent={dialPadContent} /> <DialpadPin pinLength={pinLength} pinSize={pinSize} code={code} dialPadContent={dialPadContent} />
<DialpadKeypad dialPadContent={dialPadContent} pinLength={pinLength} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/> <DialpadKeypad dialPadContent={dialPadContent} dialPadSize={dialPadSize} dialPadTextSize={dialPadTextSize} updateCodeFunc={updateCode} code={code}/>
</View> </View>
<View style={styles.btnContainer}> <View style={styles.btnContainer}>
<Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button> <Button label="Cancel" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
<Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={onNextFunc} btnJustifyContent='center'></Button> <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="50%" onChangeFunc={() => onNextFunc(code.toString())} btnJustifyContent='center'></Button>
</View> </View>
</SafeAreaView> </SafeAreaView>
)}; )};

3
src/components/DialpadKeypad.tsx
View File

@ -4,7 +4,6 @@ import Icon from 'react-native-vector-icons/Feather';
type DialpadKeypadProps = { type DialpadKeypadProps = {
dialPadContent: any[]; dialPadContent: any[];
pinLength: number;
dialPadSize: number; dialPadSize: number;
dialPadTextSize: number; dialPadTextSize: number;
code: number[]; code: number[];
@ -12,7 +11,7 @@ type DialpadKeypadProps = {
}; };
const DialpadKeypad: FC<DialpadKeypadProps> = props => { const DialpadKeypad: FC<DialpadKeypadProps> = props => {
const {dialPadContent, pinLength, dialPadSize, dialPadTextSize, code, updateCodeFunc} = props; const {dialPadContent, dialPadSize, dialPadTextSize, code, updateCodeFunc} = props;
return ( return (
<FlatList data={dialPadContent} numColumns={3} keyExtractor={(_, index) => index.toString()} renderItem={({ item }) => { <FlatList data={dialPadContent} numColumns={3} keyExtractor={(_, index) => index.toString()} renderItem={({ item }) => {

52
src/components/DialpadPin.tsx
View File

@ -1,6 +1,5 @@
import {FC } from "react"; import {FC, useEffect, useRef } from "react";
import { StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native"; import { StyleSheet, View, Animated } from "react-native";
import Icon from 'react-native-vector-icons/Feather';
type DialpadPinProps = { type DialpadPinProps = {
pinSize: number; pinSize: number;
@ -11,6 +10,27 @@ type DialpadPinProps = {
const DialpadPin: FC<DialpadPinProps> = props => { const DialpadPin: FC<DialpadPinProps> = props => {
const {dialPadContent, pinLength, code, pinSize} = props; const {dialPadContent, pinLength, code, pinSize} = props;
const animatedValue = useRef(new Animated.Value(0)).current;
const animatedStyle = {
transform: [
{
scale: animatedValue.interpolate({
inputRange: [0, 3],
outputRange: [1, 1.3],
extrapolate: "clamp",
}),
},
],
};
useEffect(() => {
Animated.timing(animatedValue, {
toValue: code.length,
duration: 300,
useNativeDriver: true,
}).start();
}, [code]);
return ( return (
<View style={styles.dialPadPinContainer}> <View style={styles.dialPadPinContainer}>
@ -18,8 +38,7 @@ const DialpadPin: FC<DialpadPinProps> = props => {
.fill(undefined) .fill(undefined)
.map((_, index) => { .map((_, index) => {
const item = dialPadContent[index]; const item = dialPadContent[index];
const isSelected = const isSelected = typeof item === "number" && code[index] !== undefined;
typeof item === "number" && code[index] !== undefined;
return ( return (
<View <View
key={index} key={index}
@ -40,18 +59,17 @@ const DialpadPin: FC<DialpadPinProps> = props => {
styles.pinContentContainer, styles.pinContentContainer,
]} ]}
> >
{isSelected && ( {isSelected && (<Animated.View style={[
<View {
style={[ width: pinSize * 0.5,
{ height: pinSize * 0.5,
width: pinSize * 0.5, borderRadius: pinSize * 0.35,
height: pinSize * 0.5, },
borderRadius: pinSize * 0.35, animatedStyle,
}, styles.pinContent,
styles.pinContent, ]}
]} />
/> )}
)}
</View> </View>
</View> </View>
); );

2
src/components/steps/InitializationScreen.tsx
View File

@ -26,7 +26,7 @@ const InitializationScreen: FC<InitializationScreenProps> = props => {
return ( return (
<View> <View>
<CustomDialpad onCancelFunc={() => {}} onNextFunc={() => {}}></CustomDialpad> <CustomDialpad onCancelFunc={() => {}} onNextFunc={(code: string | undefined) => {console.log(code)}}></CustomDialpad>
{ step == PinSteps.InsertPin && { step == PinSteps.InsertPin &&
<View> <View>
<Text style={styles.heading}> Insert pin</Text> <Text style={styles.heading}> Insert pin</Text>