55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
import range from 'lodash/range';
|
|
|
|
import styles from './styles';
|
|
import { themes } from '../../../constants/colors';
|
|
import { useTheme } from '../../../theme';
|
|
|
|
const SIZE_EMPTY = 12;
|
|
const SIZE_FULL = 16;
|
|
|
|
interface IPasscodeDots {
|
|
passcode: string;
|
|
length: number;
|
|
}
|
|
|
|
const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<View style={styles.dotsContainer}>
|
|
{range(length).map(val => {
|
|
const lengthSup = passcode.length >= val + 1;
|
|
const height = lengthSup ? SIZE_FULL : SIZE_EMPTY;
|
|
const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
|
|
let backgroundColor = '';
|
|
if (lengthSup && passcode.length > 0) {
|
|
backgroundColor = themes[theme].passcodeDotFull;
|
|
} else {
|
|
backgroundColor = themes[theme].passcodeDotEmpty;
|
|
}
|
|
const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
|
|
const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
|
|
const marginLeft = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
|
|
return (
|
|
<View style={styles.dotsView}>
|
|
<View
|
|
style={{
|
|
height,
|
|
width,
|
|
borderRadius,
|
|
backgroundColor,
|
|
marginRight,
|
|
marginLeft
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
});
|
|
|
|
export default Dots;
|