1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React from 'react';
import {
RkButton,
RkTextInput,
RkText,
RkStyleSheet,
} from 'react-native-ui-kitten';
import { FontAwesome } from '../assets/icons';
export class CardInput extends React.Component {
state = {
hidden: true,
cardNumber: '',
};
formatCreditNumber = (number, isHidden) => (
isHidden
? number.replace(/\D/g, '')
: number.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()
);
onInputLabelPressed = () => {
this.setState({
hidden: !this.state.hidden,
cardNumber: this.formatCreditNumber(this.state.cardNumber, !this.state.hidden),
});
};
onInputChanged = (text) => {
this.setState({
cardNumber: this.formatCreditNumber(text, this.state.hidden),
});
};
renderInputLabel = () => (
<RkButton
style={styles.button}
rkType='clear'
onPress={this.onInputLabelPressed}>
<RkText style={styles.icon} rkType='awesome secondaryColor'>{FontAwesome.slashEye}</RkText>
</RkButton>
);
render = () => (
<RkTextInput
autoCapitalize='none'
rkType='bordered rounded iconRight'
autoCorrect={false}
label={this.renderInputLabel()}
secureTextEntry={this.state.hidden}
onChangeText={this.onInputChanged}
value={this.state.cardNumber}
keyboardType='numeric'
maxLength={19}
{...this.props}
/>
);
}
let styles = RkStyleSheet.create({
icon: {
fontSize: 24,
},
button: {
right: 17,
},
});
|
