2022-10-18 19:26:49 +00:00
|
|
|
import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
|
2021-10-01 18:12:19 +00:00
|
|
|
import { Col, Grid, Row } from 'react-native-easy-grid';
|
|
|
|
import range from 'lodash/range';
|
2022-03-29 18:53:27 +00:00
|
|
|
import { View } from 'react-native';
|
2021-10-01 18:12:19 +00:00
|
|
|
import * as Animatable from 'react-native-animatable';
|
|
|
|
import * as Haptics from 'expo-haptics';
|
2022-10-18 19:26:49 +00:00
|
|
|
import Orientation from 'react-native-orientation-locker';
|
2021-10-01 18:12:19 +00:00
|
|
|
|
|
|
|
import styles from './styles';
|
|
|
|
import Button from './Button';
|
|
|
|
import Dots from './Dots';
|
|
|
|
import { TYPE } from '../constants';
|
2022-04-28 18:44:40 +00:00
|
|
|
import { PASSCODE_LENGTH, themes } from '../../../lib/constants';
|
2022-03-29 18:53:27 +00:00
|
|
|
import { useTheme } from '../../../theme';
|
2021-10-01 18:12:19 +00:00
|
|
|
import LockIcon from './LockIcon';
|
|
|
|
import Title from './Title';
|
|
|
|
import Subtitle from './Subtitle';
|
2022-10-18 19:26:49 +00:00
|
|
|
import { useDimensions } from '../../../dimensions';
|
|
|
|
import { isTablet } from '../../../lib/methods/helpers';
|
2021-10-01 18:12:19 +00:00
|
|
|
|
|
|
|
interface IPasscodeBase {
|
|
|
|
type: string;
|
|
|
|
previousPasscode?: string;
|
|
|
|
title: string;
|
2022-04-28 18:44:40 +00:00
|
|
|
subtitle?: string | null;
|
2021-12-24 13:12:49 +00:00
|
|
|
showBiometry?: boolean;
|
2021-10-01 18:12:19 +00:00
|
|
|
onEndProcess: Function;
|
|
|
|
onError?: Function;
|
|
|
|
onBiometryPress?(): void;
|
|
|
|
}
|
|
|
|
|
2022-03-29 18:53:27 +00:00
|
|
|
export interface IBase {
|
|
|
|
clearPasscode: () => void;
|
|
|
|
wrongPasscode: () => void;
|
|
|
|
animate: (animation: Animatable.Animation, duration?: number) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const Base = forwardRef<IBase, IPasscodeBase>(
|
|
|
|
({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
|
2022-10-18 19:26:49 +00:00
|
|
|
useLayoutEffect(() => {
|
|
|
|
if (!isTablet) {
|
|
|
|
Orientation.lockToPortrait();
|
|
|
|
}
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
if (!isTablet) {
|
|
|
|
Orientation.unlockAllOrientations();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
2022-03-29 18:53:27 +00:00
|
|
|
const { theme } = useTheme();
|
2022-10-18 19:26:49 +00:00
|
|
|
const { height } = useDimensions();
|
|
|
|
|
|
|
|
// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
|
|
|
|
// 56 is a fixed number to decrease the height of button numbers.
|
|
|
|
const dinamicHeight = (height - 206 - 56) / 4;
|
|
|
|
const heightButtonRow = { height: dinamicHeight > 102 ? 102 : dinamicHeight };
|
2022-03-29 18:53:27 +00:00
|
|
|
|
|
|
|
const rootRef = useRef<Animatable.View & View>(null);
|
|
|
|
const dotsRef = useRef<Animatable.View & View>(null);
|
2021-10-01 18:12:19 +00:00
|
|
|
const [passcode, setPasscode] = useState('');
|
|
|
|
|
|
|
|
const clearPasscode = () => setPasscode('');
|
|
|
|
|
|
|
|
const wrongPasscode = () => {
|
|
|
|
clearPasscode();
|
2022-03-29 18:53:27 +00:00
|
|
|
dotsRef?.current?.shake?.(500);
|
2021-10-01 18:12:19 +00:00
|
|
|
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
|
|
|
|
};
|
|
|
|
|
2022-03-29 18:53:27 +00:00
|
|
|
const animate = (animation: Animatable.Animation, duration = 500) => {
|
|
|
|
rootRef?.current?.[animation]?.(duration);
|
2021-10-01 18:12:19 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onPressNumber = (text: string) =>
|
|
|
|
setPasscode(p => {
|
|
|
|
const currentPasscode = p + text;
|
|
|
|
if (currentPasscode?.length === PASSCODE_LENGTH) {
|
|
|
|
switch (type) {
|
|
|
|
case TYPE.CHOOSE:
|
|
|
|
onEndProcess(currentPasscode);
|
|
|
|
break;
|
|
|
|
case TYPE.CONFIRM:
|
|
|
|
if (currentPasscode !== previousPasscode) {
|
|
|
|
onError?.();
|
|
|
|
} else {
|
|
|
|
onEndProcess(currentPasscode);
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case TYPE.ENTER:
|
|
|
|
onEndProcess(currentPasscode);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return currentPasscode;
|
|
|
|
});
|
|
|
|
|
|
|
|
const onPressDelete = () =>
|
|
|
|
setPasscode(p => {
|
|
|
|
if (p?.length > 0) {
|
|
|
|
const newPasscode = p.slice(0, -1);
|
|
|
|
return newPasscode;
|
|
|
|
}
|
|
|
|
return '';
|
|
|
|
});
|
|
|
|
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
|
|
wrongPasscode,
|
|
|
|
animate,
|
|
|
|
clearPasscode
|
|
|
|
}));
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Animatable.View ref={rootRef} style={styles.container}>
|
|
|
|
<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
|
2022-03-29 18:53:27 +00:00
|
|
|
<LockIcon />
|
|
|
|
<Title text={title} />
|
|
|
|
{subtitle ? <Subtitle text={subtitle} /> : null}
|
2021-10-01 18:12:19 +00:00
|
|
|
<Row style={styles.row}>
|
|
|
|
<Animatable.View ref={dotsRef}>
|
2022-03-29 18:53:27 +00:00
|
|
|
<Dots passcode={passcode} length={PASSCODE_LENGTH} />
|
2021-10-01 18:12:19 +00:00
|
|
|
</Animatable.View>
|
|
|
|
</Row>
|
2022-10-18 19:26:49 +00:00
|
|
|
<Row style={[styles.row, heightButtonRow]}>
|
2022-03-29 18:53:27 +00:00
|
|
|
{range(1, 4).map(i => (
|
2022-10-18 19:26:49 +00:00
|
|
|
<Col key={i} style={[styles.colButton, heightButtonRow]}>
|
|
|
|
<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
|
2021-10-01 18:12:19 +00:00
|
|
|
</Col>
|
|
|
|
))}
|
|
|
|
</Row>
|
2022-10-18 19:26:49 +00:00
|
|
|
<Row style={[styles.row, heightButtonRow]}>
|
2022-03-29 18:53:27 +00:00
|
|
|
{range(4, 7).map(i => (
|
2022-10-18 19:26:49 +00:00
|
|
|
<Col key={i} style={[styles.colButton, heightButtonRow]}>
|
|
|
|
<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
|
2021-10-01 18:12:19 +00:00
|
|
|
</Col>
|
|
|
|
))}
|
|
|
|
</Row>
|
2022-10-18 19:26:49 +00:00
|
|
|
<Row style={[styles.row, heightButtonRow]}>
|
2022-03-29 18:53:27 +00:00
|
|
|
{range(7, 10).map(i => (
|
2022-10-18 19:26:49 +00:00
|
|
|
<Col key={i} style={[styles.colButton, heightButtonRow]}>
|
|
|
|
<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
|
2021-10-01 18:12:19 +00:00
|
|
|
</Col>
|
|
|
|
))}
|
|
|
|
</Row>
|
2022-10-18 19:26:49 +00:00
|
|
|
<Row style={[styles.row, heightButtonRow]}>
|
2021-10-01 18:12:19 +00:00
|
|
|
{showBiometry ? (
|
2022-10-18 19:26:49 +00:00
|
|
|
<Col style={[styles.colButton, heightButtonRow]}>
|
|
|
|
<Button style={heightButtonRow} icon='fingerprint' onPress={onBiometryPress} />
|
2021-10-01 18:12:19 +00:00
|
|
|
</Col>
|
|
|
|
) : (
|
2022-10-18 19:26:49 +00:00
|
|
|
<Col style={[styles.colButton, heightButtonRow]} />
|
2021-10-01 18:12:19 +00:00
|
|
|
)}
|
2022-10-18 19:26:49 +00:00
|
|
|
<Col style={[styles.colButton, heightButtonRow]}>
|
|
|
|
<Button style={heightButtonRow} text='0' onPress={onPressNumber} />
|
2021-10-01 18:12:19 +00:00
|
|
|
</Col>
|
2022-10-18 19:26:49 +00:00
|
|
|
<Col style={[styles.colButton, heightButtonRow]}>
|
|
|
|
<Button style={heightButtonRow} icon='backspace' onPress={onPressDelete} />
|
2021-10-01 18:12:19 +00:00
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Grid>
|
|
|
|
</Animatable.View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
|
|
|
export default Base;
|