verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

use state

This commit is contained in:
Diego Mello 2020-04-23 13:38:27 -03:00
parent 7f61529f9e
commit 738fabf11d
4 changed files with 66 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/containers/Passcode/ButtonNumber.js → app/containers/Passcode/Button.js
View File

@ -2,21 +2,25 @@ import React from 'react';
import { TouchableHighlight, Text } from 'react-native';
import styles from './styles';
import { themes } from '../../constants/colors';
const ButtonNumber = ({ text }) => (
const ButtonNumber = ({
text, disabled, theme, onPress
}) => (
<TouchableHighlight
style={[
styles.buttonCircle,
// { backgroundColor: this.props.colorCircleButtons },
{ backgroundColor: themes[theme].backgroundColor },
// this.props.styleButtonCircle,
]}
// underlayColor={this.props.numbersButtonOverlayColor}
// disabled={disabled}
disabled={disabled}
// onShowUnderlay={() => this.setState({ textButtonSelected: text })}
// onHideUnderlay={() => this.setState({ textButtonSelected: "" })}
// onPress={() => {
// this.onPressButtonNumber(text);
// }}
onPress={() => onPress && onPress(text)}
// accessible
// accessibilityLabel={text}
>

18
app/containers/Passcode/PasscodeDots.js → app/containers/Passcode/Dots.js
View File

@ -5,28 +5,28 @@ import _ from 'lodash';
import styles from './styles';
import { themes } from '../../constants/colors';
const PASSWORD_LENGTH = 6;
const SIZE_EMPTY = 8;
const SIZE_FULL = 12;
const PasscodeDots = ({
password,
const Dots = ({
passcode,
moveData,
showError,
changeScreen,
attemptFailed,
theme
theme,
length
}) => (
<View style={[styles.topViewCirclePassword]}>
{_.range(PASSWORD_LENGTH).map((val) => {
const lengthSup = ((password.length >= val + 1 && !changeScreen) || showError) && !attemptFailed;
<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 && password.length > 0) {
} else if (lengthSup && passcode.length > 0) {
color = themes[theme].titleText;
} else {
color = themes[theme].bodyText;
@ -59,4 +59,4 @@ const PasscodeDots = ({
</View>
);
export default PasscodeDots;
export default Dots;

129
app/containers/Passcode/index.js
View File

@ -1,112 +1,79 @@
import React from 'react';
import React, { useState } from 'react';
import { View } from 'react-native';
import { Col, Row, Grid } from 'react-native-easy-grid';
import _ from 'lodash';
import styles from './styles';
import ButtonNumber from './ButtonNumber';
import PasscodeDots from './PasscodeDots';
import Button from './Button';
import Dots from './Dots';
import Title from './Title';
import Subtitle from './Subtitle';
const PASSCODE_LENGTH = 6;
const Passcode = ({ theme }) => {
const [passcode, setPasscode] = useState('');
const handleEnd = () => {
alert('END')
};
const onPressNumber = text => setPasscode((p) => {
const newPasscode = p + text;
if (newPasscode?.length === PASSCODE_LENGTH) {
handleEnd();
return '';
}
return newPasscode;
});
const onPressDelete = () => setPasscode((p) => {
if (p?.length > 0) {
const newPasscode = p.slice(0, -1);
return newPasscode;
}
return '';
});
return (
<View
style={[
styles.container,
// this.props.styleContainer
]}
>
<View
style={[
styles.container,
// this.props.styleContainer
]}
>
<View
style={[
styles.viewTitle,
// { opacity: opacity }
]}
>
<View style={styles.container}>
<View style={styles.container}>
<View style={styles.viewTitle}>
<Title theme={theme} />
<Subtitle theme={theme} />
</View>
<View style={styles.flexCirclePassword}>
<PasscodeDots password='123' theme={theme} />
<View style={styles.flexCirclePasscode}>
<Dots passcode={passcode} theme={theme} length={PASSCODE_LENGTH} />
</View>
<Grid style={styles.grid}>
<Row
style={[
styles.row
]}
>
<Row style={styles.row}>
{_.range(1, 4).map(i => (
<Col
key={i}
style={[
styles.colButtonCircle
]}
>
<ButtonNumber text={i} />
<Col key={i} style={styles.colButtonCircle}>
<Button text={i} theme={theme} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row
style={[
styles.row
]}
>
<Row style={styles.row}>
{_.range(4, 7).map(i => (
<Col
key={i}
style={[
styles.colButtonCircle
]}
>
<ButtonNumber text={i} />
<Col key={i} style={styles.colButtonCircle}>
<Button text={i} theme={theme} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row
style={[
styles.row
]}
>
<Row style={styles.row}>
{_.range(7, 10).map(i => (
<Col
key={i}
style={[
styles.colButtonCircle
]}
>
<ButtonNumber text={i} />
<Col key={i} style={styles.colButtonCircle}>
<Button text={i} theme={theme} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row
style={[
styles.row
]}
>
<Col
style={[
styles.colButtonCircle
]}
/>
<Col
style={[
styles.colButtonCircle
]}
>
<ButtonNumber text='0' />
<Row style={styles.row}>
<Col style={styles.colButtonCircle} />
<Col style={styles.colButtonCircle}>
<Button text='0' theme={theme} onPress={onPressNumber} />
</Col>
<Col
style={[
styles.colButtonCircle
]}
>
<ButtonNumber text='X' />
<Col style={styles.colButtonCircle}>
<Button text='X' theme={theme} onPress={onPressDelete} />
</Col>
</Row>
</Grid>

4
app/containers/Passcode/styles.js
View File

@ -68,12 +68,12 @@ export default StyleSheet.create({
fontWeight: '200',
textAlign: 'center'
},
flexCirclePassword: {
flexCirclePasscode: {
flex: 2,
justifyContent: 'center',
alignItems: 'center'
},
topViewCirclePassword: {
topViewCirclePasscode: {
flexDirection: 'row',
height: 'auto',
justifyContent: 'center',