@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.
Files changed (66) hide show
  1. package/LICENSE +20 -0
  2. package/README.OpenSource +11 -0
  3. package/README.md +9 -0
  4. package/lib/commonjs/CreditCardInput.js +138 -0
  5. package/lib/commonjs/CreditCardInput.js.map +1 -0
  6. package/lib/commonjs/CreditCardView.js +175 -0
  7. package/lib/commonjs/CreditCardView.js.map +1 -0
  8. package/lib/commonjs/Icons.js +17 -0
  9. package/lib/commonjs/Icons.js.map +1 -0
  10. package/lib/commonjs/LiteCreditCardInput.js +189 -0
  11. package/lib/commonjs/LiteCreditCardInput.js.map +1 -0
  12. package/lib/commonjs/index.js +35 -0
  13. package/lib/commonjs/index.js.map +1 -0
  14. package/lib/commonjs/package.json +1 -0
  15. package/lib/commonjs/useCreditCardForm.js +95 -0
  16. package/lib/commonjs/useCreditCardForm.js.map +1 -0
  17. package/lib/module/CreditCardInput.js +134 -0
  18. package/lib/module/CreditCardInput.js.map +1 -0
  19. package/lib/module/CreditCardView.js +170 -0
  20. package/lib/module/CreditCardView.js.map +1 -0
  21. package/lib/module/Icons.js +13 -0
  22. package/lib/module/Icons.js.map +1 -0
  23. package/lib/module/LiteCreditCardInput.js +184 -0
  24. package/lib/module/LiteCreditCardInput.js.map +1 -0
  25. package/lib/module/index.js +7 -0
  26. package/lib/module/index.js.map +1 -0
  27. package/lib/module/package.json +1 -0
  28. package/lib/module/useCreditCardForm.js +89 -0
  29. package/lib/module/useCreditCardForm.js.map +1 -0
  30. package/lib/typescript/commonjs/jest.setup.d.ts +2 -0
  31. package/lib/typescript/commonjs/jest.setup.d.ts.map +1 -0
  32. package/lib/typescript/commonjs/package.json +1 -0
  33. package/lib/typescript/commonjs/src/CreditCardInput.d.ts +25 -0
  34. package/lib/typescript/commonjs/src/CreditCardInput.d.ts.map +1 -0
  35. package/lib/typescript/commonjs/src/CreditCardView.d.ts +23 -0
  36. package/lib/typescript/commonjs/src/CreditCardView.d.ts.map +1 -0
  37. package/lib/typescript/commonjs/src/Icons.d.ts +11 -0
  38. package/lib/typescript/commonjs/src/Icons.d.ts.map +1 -0
  39. package/lib/typescript/commonjs/src/LiteCreditCardInput.d.ts +19 -0
  40. package/lib/typescript/commonjs/src/LiteCreditCardInput.d.ts.map +1 -0
  41. package/lib/typescript/commonjs/src/index.d.ts +5 -0
  42. package/lib/typescript/commonjs/src/index.d.ts.map +1 -0
  43. package/lib/typescript/commonjs/src/useCreditCardForm.d.ts +25 -0
  44. package/lib/typescript/commonjs/src/useCreditCardForm.d.ts.map +1 -0
  45. package/lib/typescript/module/jest.setup.d.ts +2 -0
  46. package/lib/typescript/module/jest.setup.d.ts.map +1 -0
  47. package/lib/typescript/module/package.json +1 -0
  48. package/lib/typescript/module/src/CreditCardInput.d.ts +25 -0
  49. package/lib/typescript/module/src/CreditCardInput.d.ts.map +1 -0
  50. package/lib/typescript/module/src/CreditCardView.d.ts +23 -0
  51. package/lib/typescript/module/src/CreditCardView.d.ts.map +1 -0
  52. package/lib/typescript/module/src/Icons.d.ts +11 -0
  53. package/lib/typescript/module/src/Icons.d.ts.map +1 -0
  54. package/lib/typescript/module/src/LiteCreditCardInput.d.ts +19 -0
  55. package/lib/typescript/module/src/LiteCreditCardInput.d.ts.map +1 -0
  56. package/lib/typescript/module/src/index.d.ts +5 -0
  57. package/lib/typescript/module/src/index.d.ts.map +1 -0
  58. package/lib/typescript/module/src/useCreditCardForm.d.ts +25 -0
  59. package/lib/typescript/module/src/useCreditCardForm.d.ts.map +1 -0
  60. package/package.json +145 -0
  61. package/src/CreditCardInput.tsx +163 -0
  62. package/src/CreditCardView.tsx +248 -0
  63. package/src/Icons.ts +18 -0
  64. package/src/LiteCreditCardInput.tsx +226 -0
  65. package/src/index.tsx +12 -0
  66. 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":[]}