@react-native-ohos/react-native-credit-card-input 1.0.1-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -0
- package/README.OpenSource +11 -0
- package/README.md +9 -0
- package/lib/commonjs/CreditCardInput.js +138 -0
- package/lib/commonjs/CreditCardInput.js.map +1 -0
- package/lib/commonjs/CreditCardView.js +175 -0
- package/lib/commonjs/CreditCardView.js.map +1 -0
- package/lib/commonjs/Icons.js +17 -0
- package/lib/commonjs/Icons.js.map +1 -0
- package/lib/commonjs/LiteCreditCardInput.js +189 -0
- package/lib/commonjs/LiteCreditCardInput.js.map +1 -0
- package/lib/commonjs/index.js +35 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/package.json +1 -0
- package/lib/commonjs/useCreditCardForm.js +95 -0
- package/lib/commonjs/useCreditCardForm.js.map +1 -0
- package/lib/module/CreditCardInput.js +134 -0
- package/lib/module/CreditCardInput.js.map +1 -0
- package/lib/module/CreditCardView.js +170 -0
- package/lib/module/CreditCardView.js.map +1 -0
- package/lib/module/Icons.js +13 -0
- package/lib/module/Icons.js.map +1 -0
- package/lib/module/LiteCreditCardInput.js +184 -0
- package/lib/module/LiteCreditCardInput.js.map +1 -0
- package/lib/module/index.js +7 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/package.json +1 -0
- package/lib/module/useCreditCardForm.js +89 -0
- package/lib/module/useCreditCardForm.js.map +1 -0
- package/lib/typescript/commonjs/jest.setup.d.ts +2 -0
- package/lib/typescript/commonjs/jest.setup.d.ts.map +1 -0
- package/lib/typescript/commonjs/package.json +1 -0
- package/lib/typescript/commonjs/src/CreditCardInput.d.ts +25 -0
- package/lib/typescript/commonjs/src/CreditCardInput.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/CreditCardView.d.ts +23 -0
- package/lib/typescript/commonjs/src/CreditCardView.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/Icons.d.ts +11 -0
- package/lib/typescript/commonjs/src/Icons.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/LiteCreditCardInput.d.ts +19 -0
- package/lib/typescript/commonjs/src/LiteCreditCardInput.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/index.d.ts +5 -0
- package/lib/typescript/commonjs/src/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/useCreditCardForm.d.ts +25 -0
- package/lib/typescript/commonjs/src/useCreditCardForm.d.ts.map +1 -0
- package/lib/typescript/module/jest.setup.d.ts +2 -0
- package/lib/typescript/module/jest.setup.d.ts.map +1 -0
- package/lib/typescript/module/package.json +1 -0
- package/lib/typescript/module/src/CreditCardInput.d.ts +25 -0
- package/lib/typescript/module/src/CreditCardInput.d.ts.map +1 -0
- package/lib/typescript/module/src/CreditCardView.d.ts +23 -0
- package/lib/typescript/module/src/CreditCardView.d.ts.map +1 -0
- package/lib/typescript/module/src/Icons.d.ts +11 -0
- package/lib/typescript/module/src/Icons.d.ts.map +1 -0
- package/lib/typescript/module/src/LiteCreditCardInput.d.ts +19 -0
- package/lib/typescript/module/src/LiteCreditCardInput.d.ts.map +1 -0
- package/lib/typescript/module/src/index.d.ts +5 -0
- package/lib/typescript/module/src/index.d.ts.map +1 -0
- package/lib/typescript/module/src/useCreditCardForm.d.ts +25 -0
- package/lib/typescript/module/src/useCreditCardForm.d.ts.map +1 -0
- package/package.json +145 -0
- package/src/CreditCardInput.tsx +163 -0
- package/src/CreditCardView.tsx +248 -0
- package/src/Icons.ts +18 -0
- package/src/LiteCreditCardInput.tsx +226 -0
- package/src/index.tsx +12 -0
- package/src/useCreditCardForm.tsx +161 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 sbycrosz
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
6
|
+
in the Software without restriction, including without limitation the rights
|
|
7
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
8
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
9
|
+
furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12
|
+
copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
15
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
16
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
17
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
18
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
19
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
|
+
SOFTWARE.
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"Name": "@react-native-ohos/react-native-credit-card-input",
|
|
4
|
+
"License": "MIT License",
|
|
5
|
+
"License File": " LICENSE ",
|
|
6
|
+
"Version Number": "1.0.1-rc.1",
|
|
7
|
+
"Owner" : "xiafeng@huawei.com",
|
|
8
|
+
"Upstream URL": "https://github.com/react-native-oh-library/react-native-credit-card-input",
|
|
9
|
+
"Description": "React native credit card input component"
|
|
10
|
+
}
|
|
11
|
+
]
|
package/README.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# @react-native-ohos/react-native-credit-card-input
|
|
2
|
+
This project is based on [react-native-credit-card-input](https://github.com/sbycrosz/react-native-credit-card-input/tree/v1.0.0)
|
|
3
|
+
## Documentation
|
|
4
|
+
[中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-credit-card-input.md)
|
|
5
|
+
|
|
6
|
+
[English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-credit-card-input.md)
|
|
7
|
+
|
|
8
|
+
## License
|
|
9
|
+
This library is licensed under [The MIT License (MIT)](https://github.com/sbycrosz/react-native-credit-card-input/blob/v1.0.0/LICENSE).
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _useCreditCardForm = require("./useCreditCardForm.js");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
const s = _reactNative.StyleSheet.create({
|
|
12
|
+
container: {
|
|
13
|
+
paddingVertical: 15,
|
|
14
|
+
paddingHorizontal: 15
|
|
15
|
+
},
|
|
16
|
+
icon: {
|
|
17
|
+
width: 48,
|
|
18
|
+
height: 40,
|
|
19
|
+
resizeMode: 'contain'
|
|
20
|
+
},
|
|
21
|
+
numberInput: {},
|
|
22
|
+
extraContainer: {
|
|
23
|
+
flexDirection: 'row',
|
|
24
|
+
marginTop: 15
|
|
25
|
+
},
|
|
26
|
+
expiryInputContainer: {
|
|
27
|
+
flex: 1,
|
|
28
|
+
marginRight: 5
|
|
29
|
+
},
|
|
30
|
+
cvcInputContainer: {
|
|
31
|
+
flex: 1,
|
|
32
|
+
marginLeft: 5
|
|
33
|
+
},
|
|
34
|
+
input: {
|
|
35
|
+
height: 40,
|
|
36
|
+
fontSize: 16,
|
|
37
|
+
borderBottomColor: 'darkgray',
|
|
38
|
+
borderBottomWidth: 1,
|
|
39
|
+
// // @ts-expect-error outlineWidth is used to hide the text-input outline on react-native-web
|
|
40
|
+
outlineWidth: 0
|
|
41
|
+
},
|
|
42
|
+
inputLabel: {
|
|
43
|
+
fontSize: 14,
|
|
44
|
+
fontWeight: 600
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
const CreditCardInput = props => {
|
|
48
|
+
const {
|
|
49
|
+
autoFocus,
|
|
50
|
+
style,
|
|
51
|
+
labelStyle,
|
|
52
|
+
inputStyle,
|
|
53
|
+
placeholderColor = 'darkgray',
|
|
54
|
+
labels = {
|
|
55
|
+
number: 'CARD NUMBER',
|
|
56
|
+
expiry: 'EXPIRY',
|
|
57
|
+
cvc: 'CVC/CVV'
|
|
58
|
+
},
|
|
59
|
+
placeholders = {
|
|
60
|
+
number: '1234 5678 1234 5678',
|
|
61
|
+
expiry: 'MM/YY',
|
|
62
|
+
cvc: 'CVC'
|
|
63
|
+
},
|
|
64
|
+
onChange = () => {},
|
|
65
|
+
onFocusField = () => {},
|
|
66
|
+
testID
|
|
67
|
+
} = props;
|
|
68
|
+
const {
|
|
69
|
+
values,
|
|
70
|
+
onChangeValue
|
|
71
|
+
} = (0, _useCreditCardForm.useCreditCardForm)(onChange);
|
|
72
|
+
const numberInput = (0, _react.useRef)(null);
|
|
73
|
+
(0, _react.useEffect)(() => {
|
|
74
|
+
if (autoFocus) numberInput.current?.focus();
|
|
75
|
+
}, [autoFocus]);
|
|
76
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
77
|
+
style: [s.container, style],
|
|
78
|
+
testID: testID,
|
|
79
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
80
|
+
style: [s.numberInput],
|
|
81
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
82
|
+
style: [s.inputLabel, labelStyle],
|
|
83
|
+
children: labels.number
|
|
84
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
85
|
+
ref: numberInput,
|
|
86
|
+
keyboardType: "default",
|
|
87
|
+
style: [s.input, inputStyle],
|
|
88
|
+
placeholderTextColor: placeholderColor,
|
|
89
|
+
placeholder: placeholders.number,
|
|
90
|
+
value: values.number,
|
|
91
|
+
onChangeText: v => onChangeValue('number', v),
|
|
92
|
+
onFocus: () => onFocusField('number'),
|
|
93
|
+
autoCorrect: false,
|
|
94
|
+
underlineColorAndroid: 'transparent',
|
|
95
|
+
testID: "CC_NUMBER"
|
|
96
|
+
})]
|
|
97
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
98
|
+
style: [s.extraContainer],
|
|
99
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
100
|
+
style: s.expiryInputContainer,
|
|
101
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
102
|
+
style: [s.inputLabel, labelStyle],
|
|
103
|
+
children: labels.expiry
|
|
104
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
105
|
+
keyboardType: "default",
|
|
106
|
+
style: [s.input, inputStyle],
|
|
107
|
+
placeholderTextColor: placeholderColor,
|
|
108
|
+
placeholder: placeholders.expiry,
|
|
109
|
+
value: values.expiry,
|
|
110
|
+
onChangeText: v => onChangeValue('expiry', v),
|
|
111
|
+
onFocus: () => onFocusField('expiry'),
|
|
112
|
+
autoCorrect: false,
|
|
113
|
+
underlineColorAndroid: 'transparent',
|
|
114
|
+
testID: "CC_EXPIRY"
|
|
115
|
+
})]
|
|
116
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
117
|
+
style: s.cvcInputContainer,
|
|
118
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
119
|
+
style: [s.inputLabel, labelStyle],
|
|
120
|
+
children: labels.cvc
|
|
121
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
122
|
+
keyboardType: "default",
|
|
123
|
+
style: [s.input, inputStyle],
|
|
124
|
+
placeholderTextColor: placeholderColor,
|
|
125
|
+
placeholder: placeholders.cvc,
|
|
126
|
+
value: values.cvc,
|
|
127
|
+
onChangeText: v => onChangeValue('cvc', v),
|
|
128
|
+
onFocus: () => onFocusField('cvc'),
|
|
129
|
+
autoCorrect: false,
|
|
130
|
+
underlineColorAndroid: 'transparent',
|
|
131
|
+
testID: "CC_CVC"
|
|
132
|
+
})]
|
|
133
|
+
})]
|
|
134
|
+
})]
|
|
135
|
+
});
|
|
136
|
+
};
|
|
137
|
+
var _default = exports.default = CreditCardInput;
|
|
138
|
+
//# sourceMappingURL=CreditCardInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_useCreditCardForm","_jsxRuntime","s","StyleSheet","create","container","paddingVertical","paddingHorizontal","icon","width","height","resizeMode","numberInput","extraContainer","flexDirection","marginTop","expiryInputContainer","flex","marginRight","cvcInputContainer","marginLeft","input","fontSize","borderBottomColor","borderBottomWidth","outlineWidth","inputLabel","fontWeight","CreditCardInput","props","autoFocus","style","labelStyle","inputStyle","placeholderColor","labels","number","expiry","cvc","placeholders","onChange","onFocusField","testID","values","onChangeValue","useCreditCardForm","useRef","useEffect","current","focus","jsxs","View","children","jsx","Text","TextInput","ref","keyboardType","placeholderTextColor","placeholder","value","onChangeText","v","onFocus","autoCorrect","underlineColorAndroid","_default","exports","default"],"sourceRoot":"..\\..\\src","sources":["CreditCardInput.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
8
|
+
var _reactNativeFlipCard = _interopRequireDefault(require("react-native-flip-card"));
|
|
9
|
+
var _Icons = _interopRequireDefault(require("./Icons.js"));
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
const CARD_SIZE = {
|
|
14
|
+
width: 300,
|
|
15
|
+
height: 190
|
|
16
|
+
};
|
|
17
|
+
const s = _reactNative.StyleSheet.create({
|
|
18
|
+
cardContainer: {},
|
|
19
|
+
cardFace: {
|
|
20
|
+
backgroundColor: '#444',
|
|
21
|
+
borderRadius: 10
|
|
22
|
+
},
|
|
23
|
+
cardMagneticStripe: {
|
|
24
|
+
position: 'absolute',
|
|
25
|
+
left: 0,
|
|
26
|
+
right: 0,
|
|
27
|
+
top: 30,
|
|
28
|
+
height: 40,
|
|
29
|
+
backgroundColor: '#000'
|
|
30
|
+
},
|
|
31
|
+
icon: {
|
|
32
|
+
position: 'absolute',
|
|
33
|
+
top: 15,
|
|
34
|
+
right: 15,
|
|
35
|
+
width: 60,
|
|
36
|
+
height: 40,
|
|
37
|
+
resizeMode: 'contain'
|
|
38
|
+
},
|
|
39
|
+
baseText: {
|
|
40
|
+
color: 'rgba(255, 255, 255, 0.5)',
|
|
41
|
+
backgroundColor: 'transparent'
|
|
42
|
+
},
|
|
43
|
+
placeholder: {
|
|
44
|
+
color: 'rgba(255, 255, 255, 0.5)'
|
|
45
|
+
},
|
|
46
|
+
focusedField: {
|
|
47
|
+
fontWeight: 'bold',
|
|
48
|
+
color: 'rgba(255, 255, 255, 1)'
|
|
49
|
+
},
|
|
50
|
+
number: {
|
|
51
|
+
fontSize: 21,
|
|
52
|
+
position: 'absolute',
|
|
53
|
+
top: 95,
|
|
54
|
+
left: 28
|
|
55
|
+
},
|
|
56
|
+
name: {
|
|
57
|
+
fontSize: 16,
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
bottom: 20,
|
|
60
|
+
left: 25,
|
|
61
|
+
right: 100
|
|
62
|
+
},
|
|
63
|
+
expiryLabel: {
|
|
64
|
+
fontSize: 9,
|
|
65
|
+
position: 'absolute',
|
|
66
|
+
bottom: 40,
|
|
67
|
+
left: 218
|
|
68
|
+
},
|
|
69
|
+
expiry: {
|
|
70
|
+
fontSize: 16,
|
|
71
|
+
position: 'absolute',
|
|
72
|
+
bottom: 20,
|
|
73
|
+
left: 220
|
|
74
|
+
},
|
|
75
|
+
amexCVC: {
|
|
76
|
+
fontSize: 16,
|
|
77
|
+
position: 'absolute',
|
|
78
|
+
top: 73,
|
|
79
|
+
right: 30
|
|
80
|
+
},
|
|
81
|
+
cvc: {
|
|
82
|
+
fontSize: 16,
|
|
83
|
+
position: 'absolute',
|
|
84
|
+
top: 80,
|
|
85
|
+
right: 30
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
const CreditCardView = props => {
|
|
89
|
+
const {
|
|
90
|
+
focusedField,
|
|
91
|
+
type,
|
|
92
|
+
name,
|
|
93
|
+
number,
|
|
94
|
+
expiry,
|
|
95
|
+
cvc,
|
|
96
|
+
placeholders = {
|
|
97
|
+
number: '•••• •••• •••• ••••',
|
|
98
|
+
name: '',
|
|
99
|
+
expiry: '••/••',
|
|
100
|
+
cvc: '•••'
|
|
101
|
+
},
|
|
102
|
+
imageFront,
|
|
103
|
+
imageBack,
|
|
104
|
+
fontFamily = _reactNative.Platform.select({
|
|
105
|
+
ios: 'Courier',
|
|
106
|
+
android: 'monospace',
|
|
107
|
+
web: 'monospace'
|
|
108
|
+
}),
|
|
109
|
+
style
|
|
110
|
+
} = props;
|
|
111
|
+
const isAmex = type === 'american-express';
|
|
112
|
+
const shouldShowCardBack = !isAmex && focusedField === 'cvc';
|
|
113
|
+
const cardIcon = (0, _react.useMemo)(() => {
|
|
114
|
+
if (type && _Icons.default[type]) return _Icons.default[type];
|
|
115
|
+
return null;
|
|
116
|
+
}, [type]);
|
|
117
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
118
|
+
style: [s.cardContainer, CARD_SIZE, style],
|
|
119
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeFlipCard.default, {
|
|
120
|
+
flipHorizontal: true,
|
|
121
|
+
flipVertical: false,
|
|
122
|
+
friction: 10,
|
|
123
|
+
perspective: 2000,
|
|
124
|
+
clickable: false,
|
|
125
|
+
flip: shouldShowCardBack,
|
|
126
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ImageBackground, {
|
|
127
|
+
style: [CARD_SIZE, s.cardFace],
|
|
128
|
+
source: imageFront,
|
|
129
|
+
children: [!!cardIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
|
|
130
|
+
style: [s.icon],
|
|
131
|
+
source: {
|
|
132
|
+
uri: cardIcon
|
|
133
|
+
}
|
|
134
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
135
|
+
style: [s.baseText, {
|
|
136
|
+
fontFamily
|
|
137
|
+
}, s.number, !number && s.placeholder, focusedField === 'number' && s.focusedField],
|
|
138
|
+
children: !number ? placeholders.number : number
|
|
139
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
140
|
+
style: [s.baseText, {
|
|
141
|
+
fontFamily
|
|
142
|
+
}, s.name, !name && s.placeholder, focusedField === 'name' && s.focusedField],
|
|
143
|
+
numberOfLines: 1,
|
|
144
|
+
children: !name ? placeholders.name : name.toUpperCase()
|
|
145
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
146
|
+
style: [s.baseText, {
|
|
147
|
+
fontFamily
|
|
148
|
+
}, s.expiryLabel, s.placeholder, focusedField === 'expiry' && s.focusedField],
|
|
149
|
+
children: "MONTH/YEAR"
|
|
150
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
151
|
+
style: [s.baseText, {
|
|
152
|
+
fontFamily
|
|
153
|
+
}, s.expiry, !expiry && s.placeholder, focusedField === 'expiry' && s.focusedField],
|
|
154
|
+
children: !expiry ? placeholders.expiry : expiry
|
|
155
|
+
}), isAmex && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
156
|
+
style: [s.baseText, {
|
|
157
|
+
fontFamily
|
|
158
|
+
}, s.amexCVC, !cvc && s.placeholder, focusedField === 'cvc' && s.focusedField],
|
|
159
|
+
children: !cvc ? placeholders.cvc : cvc
|
|
160
|
+
})]
|
|
161
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ImageBackground, {
|
|
162
|
+
style: [CARD_SIZE, s.cardFace],
|
|
163
|
+
source: imageBack,
|
|
164
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
165
|
+
style: s.cardMagneticStripe
|
|
166
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
167
|
+
style: [s.baseText, s.cvc, !cvc && s.placeholder, focusedField === 'cvc' && s.focusedField],
|
|
168
|
+
children: !cvc ? placeholders.cvc : cvc
|
|
169
|
+
})]
|
|
170
|
+
})]
|
|
171
|
+
})
|
|
172
|
+
});
|
|
173
|
+
};
|
|
174
|
+
var _default = exports.default = CreditCardView;
|
|
175
|
+
//# sourceMappingURL=CreditCardView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativeFlipCard","_interopRequireDefault","_Icons","_react","_jsxRuntime","e","__esModule","default","CARD_SIZE","width","height","s","StyleSheet","create","cardContainer","cardFace","backgroundColor","borderRadius","cardMagneticStripe","position","left","right","top","icon","resizeMode","baseText","color","placeholder","focusedField","fontWeight","number","fontSize","name","bottom","expiryLabel","expiry","amexCVC","cvc","CreditCardView","props","type","placeholders","imageFront","imageBack","fontFamily","Platform","select","ios","android","web","style","isAmex","shouldShowCardBack","cardIcon","useMemo","Icons","jsx","View","children","jsxs","flipHorizontal","flipVertical","friction","perspective","clickable","flip","ImageBackground","source","Image","uri","Text","numberOfLines","toUpperCase","_default","exports"],"sourceRoot":"..\\..\\src","sources":["CreditCardView.tsx"],"mappings":"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","ignoreList":[]}
|