62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
import _ from 'lodash';
|
|
|
|
import styles from './styles';
|
|
import { themes } from '../../../constants/colors';
|
|
|
|
const SIZE_EMPTY = 8;
|
|
const SIZE_FULL = 12;
|
|
|
|
const Dots = ({
|
|
passcode,
|
|
showError,
|
|
changeScreen,
|
|
attemptFailed,
|
|
theme,
|
|
length
|
|
}) => (
|
|
<View style={[styles.topViewCirclePasscode]}>
|
|
{_.range(length).map((val) => {
|
|
const lengthSup = ((passcode.length >= val + 1 && !changeScreen) || showError) && !attemptFailed;
|
|
const opacity = lengthSup ? 1 : 0.5;
|
|
const height = lengthSup ? SIZE_FULL : SIZE_EMPTY;
|
|
const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
|
|
let color = '';
|
|
if (showError) {
|
|
color = themes[theme].dangerColor;
|
|
} else if (lengthSup && passcode.length > 0) {
|
|
color = themes[theme].titleText;
|
|
} else {
|
|
color = themes[theme].bodyText;
|
|
}
|
|
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.viewCircles}>
|
|
<View
|
|
style={[{
|
|
opacity,
|
|
height,
|
|
width,
|
|
borderRadius,
|
|
backgroundColor: color,
|
|
marginRight,
|
|
marginLeft
|
|
}]}
|
|
/>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
|
|
export default Dots;
|