@momo-kits/calculator-keyboard 0.150.2-beta.2 → 0.150.2-beta.20-sp.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/README.md +45 -3
- package/android/src/main/java/com/calculatorkeyboard/CalculatorKeyboardPackage.kt +1 -1
- package/android/src/main/java/com/calculatorkeyboard/CustomKeyboardView.kt +117 -46
- package/android/src/main/java/com/calculatorkeyboard/KeyboardOverplayHost.kt +232 -0
- package/android/src/main/java/com/calculatorkeyboard/RCTInputCalculator.kt +115 -104
- package/ios/CalculatorKeyboardView.h +30 -0
- package/ios/CalculatorKeyboardView.mm +231 -0
- package/ios/NativeInputCalculator.h +11 -0
- package/ios/NativeInputCalculator.mm +200 -0
- package/package.json +75 -183
- package/react-native-calculator-keyboard.podspec +4 -3
- package/src/NativeInputCalculatorNativeComponent.ts +56 -0
- package/src/index.tsx +71 -35
- package/ios/CalculatorKeyboardView.swift +0 -115
- package/ios/InputCalculator-Bridging-Header.h +0 -23
- package/ios/InputCalculator.m +0 -79
- package/ios/InputCalculator.swift +0 -138
- package/ios/extension.swift +0 -23
- package/lib/commonjs/index.js +0 -48
- package/lib/commonjs/index.js.map +0 -1
- package/lib/module/index.js +0 -44
- package/lib/module/index.js.map +0 -1
- package/lib/typescript/commonjs/package.json +0 -1
- package/lib/typescript/commonjs/src/index.d.ts +0 -13
- package/lib/typescript/commonjs/src/index.d.ts.map +0 -1
- package/lib/typescript/module/package.json +0 -1
- package/lib/typescript/module/src/index.d.ts +0 -13
- package/lib/typescript/module/src/index.d.ts.map +0 -1
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
#import "NativeInputCalculator.h"
|
|
2
|
+
#import "CalculatorKeyboardView.h"
|
|
3
|
+
|
|
4
|
+
#import <React/RCTConversions.h>
|
|
5
|
+
#import <React/RCTFabricComponentsPlugins.h>
|
|
6
|
+
#import <react/renderer/components/CalculatorKeyboardSpecs/ComponentDescriptors.h>
|
|
7
|
+
#import <react/renderer/components/CalculatorKeyboardSpecs/EventEmitters.h>
|
|
8
|
+
#import <react/renderer/components/CalculatorKeyboardSpecs/Props.h>
|
|
9
|
+
#import <react/renderer/components/CalculatorKeyboardSpecs/RCTComponentViewHelpers.h>
|
|
10
|
+
|
|
11
|
+
using namespace facebook::react;
|
|
12
|
+
|
|
13
|
+
@interface NativeInputCalculator () <RCTNativeInputCalculatorViewProtocol>
|
|
14
|
+
@end
|
|
15
|
+
|
|
16
|
+
@implementation NativeInputCalculator {
|
|
17
|
+
UITextField *_textField;
|
|
18
|
+
CalculatorKeyboardView *_keyboardView;
|
|
19
|
+
NSString *_lastValue;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
- (instancetype)initWithFrame:(CGRect)frame
|
|
23
|
+
{
|
|
24
|
+
if (self = [super initWithFrame:frame]) {
|
|
25
|
+
static const auto defaultProps = std::make_shared<const NativeInputCalculatorProps>();
|
|
26
|
+
_props = defaultProps;
|
|
27
|
+
|
|
28
|
+
// Create text field
|
|
29
|
+
_textField = [[UITextField alloc] initWithFrame:self.bounds];
|
|
30
|
+
_textField.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
|
|
31
|
+
_textField.delegate = (id<UITextFieldDelegate>)self;
|
|
32
|
+
|
|
33
|
+
// Create keyboard view
|
|
34
|
+
CGFloat bottomInset = [self getBottomInset];
|
|
35
|
+
CGRect keyboardFrame = CGRectMake(0, 0, UIScreen.mainScreen.bounds.size.width, 240 + bottomInset);
|
|
36
|
+
_keyboardView = [[CalculatorKeyboardView alloc] initWithFrame:keyboardFrame];
|
|
37
|
+
_keyboardView.input = (id)self; // Bridge pattern
|
|
38
|
+
|
|
39
|
+
// Set custom keyboard
|
|
40
|
+
_textField.inputView = _keyboardView;
|
|
41
|
+
|
|
42
|
+
[self addSubview:_textField];
|
|
43
|
+
}
|
|
44
|
+
return self;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
- (CGFloat)getBottomInset
|
|
48
|
+
{
|
|
49
|
+
UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
|
|
50
|
+
CGFloat bottom = window.safeAreaInsets.bottom > 0 ? 21 : 0;
|
|
51
|
+
return bottom;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
#pragma mark - RCTComponentViewProtocol
|
|
55
|
+
|
|
56
|
+
+ (ComponentDescriptorProvider)componentDescriptorProvider
|
|
57
|
+
{
|
|
58
|
+
return concreteComponentDescriptorProvider<NativeInputCalculatorComponentDescriptor>();
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
|
|
62
|
+
{
|
|
63
|
+
const auto &oldViewProps = *std::static_pointer_cast<const NativeInputCalculatorProps>(_props);
|
|
64
|
+
const auto &newViewProps = *std::static_pointer_cast<const NativeInputCalculatorProps>(props);
|
|
65
|
+
|
|
66
|
+
// Update value
|
|
67
|
+
if (oldViewProps.value != newViewProps.value) {
|
|
68
|
+
NSString *newValue = RCTNSStringFromString(newViewProps.value);
|
|
69
|
+
if (![_lastValue isEqualToString:newValue]) {
|
|
70
|
+
_textField.text = newValue;
|
|
71
|
+
_lastValue = newValue;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Update mode
|
|
76
|
+
if (oldViewProps.mode != newViewProps.mode) {
|
|
77
|
+
_keyboardView.keyboardMode = RCTNSStringFromString(newViewProps.mode);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Update customKeyText
|
|
81
|
+
if (oldViewProps.customKeyText != newViewProps.customKeyText) {
|
|
82
|
+
_keyboardView.customKeyText = RCTNSStringFromString(newViewProps.customKeyText);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Update customKeyBackground
|
|
86
|
+
if (oldViewProps.customKeyBackground != newViewProps.customKeyBackground) {
|
|
87
|
+
_keyboardView.customKeyBackground = RCTNSStringFromString(newViewProps.customKeyBackground);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Update customKeyTextColor
|
|
91
|
+
if (oldViewProps.customKeyTextColor != newViewProps.customKeyTextColor) {
|
|
92
|
+
_keyboardView.customKeyTextColor = RCTNSStringFromString(newViewProps.customKeyTextColor);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Update customKeyState
|
|
96
|
+
if (oldViewProps.customKeyState != newViewProps.customKeyState) {
|
|
97
|
+
_keyboardView.customKeyState = RCTNSStringFromString(newViewProps.customKeyState);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
[super updateProps:props oldProps:oldProps];
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
|
|
104
|
+
{
|
|
105
|
+
RCTNativeInputCalculatorHandleCommand(self, commandName, args);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
#pragma mark - RCTNativeInputCalculatorViewProtocol
|
|
109
|
+
|
|
110
|
+
- (void)focus
|
|
111
|
+
{
|
|
112
|
+
[_textField becomeFirstResponder];
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
- (void)blur
|
|
116
|
+
{
|
|
117
|
+
[_textField resignFirstResponder];
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
#pragma mark - Keyboard callbacks (called by CalculatorKeyboardView)
|
|
121
|
+
|
|
122
|
+
- (void)keyDidPress:(NSString *)key
|
|
123
|
+
{
|
|
124
|
+
[_textField insertText:key];
|
|
125
|
+
[self notifyTextChange];
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
- (void)clearText
|
|
129
|
+
{
|
|
130
|
+
_textField.text = @"";
|
|
131
|
+
[self notifyTextChange];
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
- (void)onBackSpace
|
|
135
|
+
{
|
|
136
|
+
if (_textField.text.length > 0) {
|
|
137
|
+
_textField.text = [_textField.text substringToIndex:_textField.text.length - 1];
|
|
138
|
+
[self notifyTextChange];
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
- (void)calculateResult
|
|
143
|
+
{
|
|
144
|
+
NSString *text = [_textField.text stringByReplacingOccurrencesOfString:@"×" withString:@"*"];
|
|
145
|
+
text = [text stringByReplacingOccurrencesOfString:@"÷" withString:@"/"];
|
|
146
|
+
|
|
147
|
+
NSString *pattern = @"^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$";
|
|
148
|
+
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:pattern options:0 error:nil];
|
|
149
|
+
NSRange range = NSMakeRange(0, text.length);
|
|
150
|
+
|
|
151
|
+
if ([regex firstMatchInString:text options:0 range:range]) {
|
|
152
|
+
NSExpression *expression = [NSExpression expressionWithFormat:text];
|
|
153
|
+
id result = [expression expressionValueWithObject:nil context:nil];
|
|
154
|
+
if ([result isKindOfClass:[NSNumber class]]) {
|
|
155
|
+
_textField.text = [result stringValue];
|
|
156
|
+
[self notifyTextChange];
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
- (void)emitCustomKey
|
|
162
|
+
{
|
|
163
|
+
if (_eventEmitter) {
|
|
164
|
+
auto emitter = std::static_pointer_cast<const NativeInputCalculatorEventEmitter>(_eventEmitter);
|
|
165
|
+
NativeInputCalculatorEventEmitter::OnCustomKeyEvent event{};
|
|
166
|
+
emitter->onCustomKeyEvent(event);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
- (void)emitKeyPress:(NSString *)key
|
|
171
|
+
{
|
|
172
|
+
if (_eventEmitter) {
|
|
173
|
+
auto emitter = std::static_pointer_cast<const NativeInputCalculatorEventEmitter>(_eventEmitter);
|
|
174
|
+
NativeInputCalculatorEventEmitter::OnKeyPress event{
|
|
175
|
+
.key = std::string([key UTF8String])
|
|
176
|
+
};
|
|
177
|
+
emitter->onKeyPress(event);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
- (void)notifyTextChange
|
|
182
|
+
{
|
|
183
|
+
_lastValue = _textField.text;
|
|
184
|
+
|
|
185
|
+
if (_eventEmitter) {
|
|
186
|
+
auto emitter = std::static_pointer_cast<const NativeInputCalculatorEventEmitter>(_eventEmitter);
|
|
187
|
+
NativeInputCalculatorEventEmitter::OnChange event{
|
|
188
|
+
.text = std::string([_textField.text UTF8String])
|
|
189
|
+
};
|
|
190
|
+
emitter->onChange(event);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@end
|
|
195
|
+
|
|
196
|
+
Class<RCTNativeInputCalculatorViewProtocol> NativeInputCalculatorCls(void)
|
|
197
|
+
{
|
|
198
|
+
return NativeInputCalculator.class;
|
|
199
|
+
}
|
|
200
|
+
|
package/package.json
CHANGED
|
@@ -1,185 +1,77 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
2
|
+
"name": "@momo-kits/calculator-keyboard",
|
|
3
|
+
"version": "0.150.2-beta.20-sp.1",
|
|
4
|
+
"description": "react native calculator keyboard",
|
|
5
|
+
"main": "./src/index.tsx",
|
|
6
|
+
"files": [
|
|
7
|
+
"src",
|
|
8
|
+
"lib",
|
|
9
|
+
"android",
|
|
10
|
+
"ios",
|
|
11
|
+
"cpp",
|
|
12
|
+
"*.podspec",
|
|
13
|
+
"react-native.config.js",
|
|
14
|
+
"!ios/build",
|
|
15
|
+
"!android/build",
|
|
16
|
+
"!android/gradle",
|
|
17
|
+
"!android/gradlew",
|
|
18
|
+
"!android/gradlew.bat",
|
|
19
|
+
"!android/local.properties",
|
|
20
|
+
"!**/__tests__",
|
|
21
|
+
"!**/__fixtures__",
|
|
22
|
+
"!**/__mocks__",
|
|
23
|
+
"!**/.*"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"test": "jest",
|
|
27
|
+
"typecheck": "tsc",
|
|
28
|
+
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
29
|
+
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
|
|
30
|
+
"build": "bob build",
|
|
31
|
+
"release": "release-it"
|
|
32
|
+
},
|
|
33
|
+
"keywords": [
|
|
34
|
+
"react-native",
|
|
35
|
+
"ios",
|
|
36
|
+
"android"
|
|
37
|
+
],
|
|
38
|
+
"repository": {
|
|
39
|
+
"type": "git",
|
|
40
|
+
"url": "git+https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git"
|
|
41
|
+
},
|
|
42
|
+
"author": "Dũng (Wem) <huynh.developer@gmail.com> (https://github.com/wem2017/react-native-calculator-keyboard.git)",
|
|
43
|
+
"license": "MIT",
|
|
44
|
+
"bugs": {
|
|
45
|
+
"url": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard/issues"
|
|
46
|
+
},
|
|
47
|
+
"homepage": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard#readme",
|
|
48
|
+
"publishConfig": {
|
|
49
|
+
"registry": "https://registry.npmjs.org/"
|
|
50
|
+
},
|
|
51
|
+
"codegenConfig": {
|
|
52
|
+
"name": "CalculatorKeyboardSpecs",
|
|
53
|
+
"type": "components",
|
|
54
|
+
"jsSrcsDir": "src",
|
|
55
|
+
"android": {
|
|
56
|
+
"javaPackageName": "com.calculatorkeyboard"
|
|
19
57
|
},
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"test": "jest",
|
|
41
|
-
"typecheck": "tsc",
|
|
42
|
-
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
43
|
-
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
|
|
44
|
-
"build": "bob build",
|
|
45
|
-
"release": "release-it"
|
|
46
|
-
},
|
|
47
|
-
"keywords": [
|
|
48
|
-
"react-native",
|
|
49
|
-
"ios",
|
|
50
|
-
"android"
|
|
51
|
-
],
|
|
52
|
-
"repository": {
|
|
53
|
-
"type": "git",
|
|
54
|
-
"url": "git+https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git"
|
|
55
|
-
},
|
|
56
|
-
"author": "Dũng (Wem) <huynh.developer@gmail.com> (https://github.com/wem2017/react-native-calculator-keyboard.git)",
|
|
57
|
-
"license": "MIT",
|
|
58
|
-
"bugs": {
|
|
59
|
-
"url": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard/issues"
|
|
60
|
-
},
|
|
61
|
-
"homepage": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard#readme",
|
|
62
|
-
"publishConfig": {
|
|
63
|
-
"registry": "https://registry.npmjs.org/"
|
|
64
|
-
},
|
|
65
|
-
"devDependencies": {
|
|
66
|
-
"@commitlint/config-conventional": "^17.0.2",
|
|
67
|
-
"@evilmartians/lefthook": "^1.5.0",
|
|
68
|
-
"@react-native-community/cli": "15.0.1",
|
|
69
|
-
"@react-native/eslint-config": "^0.73.1",
|
|
70
|
-
"@release-it/conventional-changelog": "^9.0.2",
|
|
71
|
-
"@types/jest": "^29.5.5",
|
|
72
|
-
"@types/react": "^18.2.44",
|
|
73
|
-
"commitlint": "^17.0.2",
|
|
74
|
-
"del-cli": "^5.1.0",
|
|
75
|
-
"eslint": "^8.51.0",
|
|
76
|
-
"eslint-config-prettier": "^9.0.0",
|
|
77
|
-
"eslint-plugin-prettier": "^5.0.1",
|
|
78
|
-
"jest": "^29.7.0",
|
|
79
|
-
"prettier": "^3.0.3",
|
|
80
|
-
"react": "18.3.1",
|
|
81
|
-
"react-native": "0.76.5",
|
|
82
|
-
"react-native-builder-bob": "^0.32.0",
|
|
83
|
-
"release-it": "^17.10.0",
|
|
84
|
-
"turbo": "^1.10.7",
|
|
85
|
-
"typescript": "^5.2.2"
|
|
86
|
-
},
|
|
87
|
-
"resolutions": {
|
|
88
|
-
"@types/react": "^18.2.44"
|
|
89
|
-
},
|
|
90
|
-
"peerDependencies": {
|
|
91
|
-
"react": "*",
|
|
92
|
-
"react-native": "*"
|
|
93
|
-
},
|
|
94
|
-
"jest": {
|
|
95
|
-
"preset": "react-native",
|
|
96
|
-
"modulePathIgnorePatterns": [
|
|
97
|
-
"<rootDir>/example/node_modules",
|
|
98
|
-
"<rootDir>/lib/"
|
|
99
|
-
]
|
|
100
|
-
},
|
|
101
|
-
"commitlint": {
|
|
102
|
-
"extends": [
|
|
103
|
-
"@commitlint/config-conventional"
|
|
104
|
-
]
|
|
105
|
-
},
|
|
106
|
-
"release-it": {
|
|
107
|
-
"git": {
|
|
108
|
-
"commitMessage": "chore: release ${version}",
|
|
109
|
-
"tagName": "v${version}"
|
|
110
|
-
},
|
|
111
|
-
"npm": {
|
|
112
|
-
"publish": true
|
|
113
|
-
},
|
|
114
|
-
"github": {
|
|
115
|
-
"release": true
|
|
116
|
-
},
|
|
117
|
-
"plugins": {
|
|
118
|
-
"@release-it/conventional-changelog": {
|
|
119
|
-
"preset": "angular"
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
"eslintConfig": {
|
|
124
|
-
"root": true,
|
|
125
|
-
"extends": [
|
|
126
|
-
"@react-native",
|
|
127
|
-
"prettier"
|
|
128
|
-
],
|
|
129
|
-
"rules": {
|
|
130
|
-
"react/react-in-jsx-scope": "off",
|
|
131
|
-
"prettier/prettier": [
|
|
132
|
-
"error",
|
|
133
|
-
{
|
|
134
|
-
"quoteProps": "consistent",
|
|
135
|
-
"singleQuote": true,
|
|
136
|
-
"tabWidth": 2,
|
|
137
|
-
"trailingComma": "es5",
|
|
138
|
-
"useTabs": false
|
|
139
|
-
}
|
|
140
|
-
]
|
|
141
|
-
}
|
|
142
|
-
},
|
|
143
|
-
"eslintIgnore": [
|
|
144
|
-
"node_modules/",
|
|
145
|
-
"lib/"
|
|
146
|
-
],
|
|
147
|
-
"prettier": {
|
|
148
|
-
"quoteProps": "consistent",
|
|
149
|
-
"singleQuote": true,
|
|
150
|
-
"tabWidth": 2,
|
|
151
|
-
"trailingComma": "es5",
|
|
152
|
-
"useTabs": false
|
|
153
|
-
},
|
|
154
|
-
"react-native-builder-bob": {
|
|
155
|
-
"source": "src",
|
|
156
|
-
"output": "lib",
|
|
157
|
-
"targets": [
|
|
158
|
-
[
|
|
159
|
-
"commonjs",
|
|
160
|
-
{
|
|
161
|
-
"esm": true
|
|
162
|
-
}
|
|
163
|
-
],
|
|
164
|
-
[
|
|
165
|
-
"module",
|
|
166
|
-
{
|
|
167
|
-
"esm": true
|
|
168
|
-
}
|
|
169
|
-
],
|
|
170
|
-
[
|
|
171
|
-
"typescript",
|
|
172
|
-
{
|
|
173
|
-
"project": "tsconfig.build.json",
|
|
174
|
-
"esm": true
|
|
175
|
-
}
|
|
176
|
-
]
|
|
177
|
-
]
|
|
178
|
-
},
|
|
179
|
-
"create-react-native-library": {
|
|
180
|
-
"type": "legacy-view",
|
|
181
|
-
"languages": "kotlin-swift",
|
|
182
|
-
"version": "0.45.5"
|
|
183
|
-
},
|
|
184
|
-
"dependencies": {}
|
|
185
|
-
}
|
|
58
|
+
"ios": {
|
|
59
|
+
"componentProvider": {
|
|
60
|
+
"NativeInputCalculator": "NativeInputCalculator"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
"devDependencies": {
|
|
65
|
+
"react": "*",
|
|
66
|
+
"react-native": "*"
|
|
67
|
+
},
|
|
68
|
+
"peerDependencies": {
|
|
69
|
+
"react": "*",
|
|
70
|
+
"react-native": "*",
|
|
71
|
+
"@momo-kits/foundation": "latest"
|
|
72
|
+
},
|
|
73
|
+
"engines": {
|
|
74
|
+
"node": ">=18.0.0"
|
|
75
|
+
},
|
|
76
|
+
"dependencies": {}
|
|
77
|
+
}
|
|
@@ -14,9 +14,10 @@ Pod::Spec.new do |s|
|
|
|
14
14
|
s.platforms = { :ios => min_ios_version_supported }
|
|
15
15
|
s.source = { :git => "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git", :tag => "#{s.version}" }
|
|
16
16
|
|
|
17
|
-
s.source_files = "ios/**/*.{h,m,mm
|
|
18
|
-
s.
|
|
19
|
-
|
|
17
|
+
s.source_files = "ios/**/*.{h,m,mm}"
|
|
18
|
+
# s.public_header_files = "ios/CalculatorKeyboardView.h"
|
|
19
|
+
# s.private_header_files = "ios/NativeInputCalculator.h"
|
|
20
|
+
|
|
20
21
|
# Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
|
|
21
22
|
# See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
|
|
22
23
|
if respond_to?(:install_modules_dependencies, true)
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
import type { HostComponent, ViewProps } from 'react-native';
|
|
3
|
+
import {
|
|
4
|
+
CodegenTypes,
|
|
5
|
+
codegenNativeComponent,
|
|
6
|
+
codegenNativeCommands,
|
|
7
|
+
} from 'react-native';
|
|
8
|
+
|
|
9
|
+
export type CustomKeyBackground = 'primary' | 'default' | string;
|
|
10
|
+
|
|
11
|
+
export enum CustomKeyState {
|
|
12
|
+
Default = 'default',
|
|
13
|
+
Disable = 'disable',
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export enum Mode {
|
|
17
|
+
NumDefault = 'NumDefault',
|
|
18
|
+
NumWithCTA = 'NumWithCTA',
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export type OnKeyPressEvent = Readonly<{
|
|
22
|
+
key: string;
|
|
23
|
+
}>;
|
|
24
|
+
|
|
25
|
+
export type OnChangeEvent = Readonly<{
|
|
26
|
+
text: string;
|
|
27
|
+
}>;
|
|
28
|
+
|
|
29
|
+
export interface NativeInputCalculatorProps extends ViewProps {
|
|
30
|
+
value?: string;
|
|
31
|
+
mode?: string;
|
|
32
|
+
customKeyText?: string;
|
|
33
|
+
customKeyBackground?: string;
|
|
34
|
+
customKeyTextColor?: string;
|
|
35
|
+
customKeyState?: string;
|
|
36
|
+
onChange?: CodegenTypes.DirectEventHandler<OnChangeEvent>;
|
|
37
|
+
onKeyPress?: CodegenTypes.DirectEventHandler<OnKeyPressEvent>;
|
|
38
|
+
onCustomKeyEvent?: CodegenTypes.DirectEventHandler<{}>;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export interface NativeInputCalculatorCommands {
|
|
42
|
+
focus(
|
|
43
|
+
viewRef: React.ElementRef<HostComponent<NativeInputCalculatorProps>>,
|
|
44
|
+
): void;
|
|
45
|
+
blur(
|
|
46
|
+
viewRef: React.ElementRef<HostComponent<NativeInputCalculatorProps>>,
|
|
47
|
+
): void;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export const Commands = codegenNativeCommands<NativeInputCalculatorCommands>({
|
|
51
|
+
supportedCommands: ['focus', 'blur'],
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
export default codegenNativeComponent<NativeInputCalculatorProps>(
|
|
55
|
+
'NativeInputCalculator',
|
|
56
|
+
);
|
package/src/index.tsx
CHANGED
|
@@ -1,21 +1,34 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
processColor,
|
|
8
|
-
UIManager,
|
|
9
|
-
findNodeHandle,
|
|
10
|
-
} from 'react-native';
|
|
11
|
-
import { requireNativeComponent } from 'react-native';
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useContext } from 'react';
|
|
3
|
+
import { ApplicationContext, Colors } from '@momo-kits/foundation';
|
|
4
|
+
import { type NativeSyntheticEvent, type TextInputProps } from 'react-native';
|
|
5
|
+
import NativeInputCalculator from './NativeInputCalculatorNativeComponent';
|
|
6
|
+
import { Commands } from './NativeInputCalculatorNativeComponent';
|
|
12
7
|
|
|
13
|
-
const
|
|
14
|
-
|
|
8
|
+
const NativeInput = NativeInputCalculator;
|
|
9
|
+
|
|
10
|
+
type KeyPressEvent = { nativeEvent: { key: string } };
|
|
15
11
|
|
|
16
12
|
interface InputCalculatorProps extends TextInputProps {
|
|
17
13
|
text?: string | undefined;
|
|
18
|
-
|
|
14
|
+
mode?: Mode;
|
|
15
|
+
onKeyPress?: (e: KeyPressEvent) => void;
|
|
16
|
+
customKeyText?: string | undefined;
|
|
17
|
+
customKeyBackground?: CustomKeyBackground;
|
|
18
|
+
customKeyState?: CustomKeyState;
|
|
19
|
+
onCustomKeyEvent?: () => void;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export type CustomKeyBackground = 'primary' | 'default' | string;
|
|
23
|
+
|
|
24
|
+
export enum CustomKeyState {
|
|
25
|
+
Default = 'default',
|
|
26
|
+
Disable = 'disable',
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export enum Mode {
|
|
30
|
+
NumDefault = 'NumDefault',
|
|
31
|
+
NumWithCTA = 'NumWithCTA',
|
|
19
32
|
}
|
|
20
33
|
|
|
21
34
|
export type InputCalculatorRef = {
|
|
@@ -23,36 +36,53 @@ export type InputCalculatorRef = {
|
|
|
23
36
|
blur: () => void;
|
|
24
37
|
};
|
|
25
38
|
|
|
26
|
-
const InputCalculator = React.forwardRef<
|
|
27
|
-
|
|
39
|
+
const InputCalculator = React.forwardRef<
|
|
40
|
+
InputCalculatorRef,
|
|
41
|
+
InputCalculatorProps
|
|
42
|
+
>(
|
|
43
|
+
(
|
|
44
|
+
{
|
|
45
|
+
customKeyBackground = 'default',
|
|
46
|
+
mode = Mode.NumDefault,
|
|
47
|
+
customKeyText,
|
|
48
|
+
onKeyPress,
|
|
49
|
+
customKeyState = CustomKeyState.Default,
|
|
50
|
+
onCustomKeyEvent,
|
|
51
|
+
...props
|
|
52
|
+
},
|
|
53
|
+
ref,
|
|
54
|
+
) => {
|
|
55
|
+
const { theme } = useContext(ApplicationContext);
|
|
28
56
|
const nativeRef = React.useRef<any>(null);
|
|
29
57
|
|
|
30
|
-
const _onChange = (
|
|
31
|
-
event: NativeSyntheticEvent<TextInputChangeEventData>
|
|
32
|
-
) => {
|
|
58
|
+
const _onChange = (event: NativeSyntheticEvent<any>) => {
|
|
33
59
|
const currentText = event.nativeEvent.text;
|
|
34
|
-
props.onChange
|
|
35
|
-
props.onChangeText
|
|
60
|
+
props.onChange?.(event);
|
|
61
|
+
props.onChangeText?.(currentText);
|
|
36
62
|
};
|
|
37
63
|
|
|
38
64
|
const text = props.text ?? props.defaultValue ?? '';
|
|
65
|
+
let keyBackground = Colors.black_06;
|
|
66
|
+
let textKeyColor = Colors.black_20;
|
|
67
|
+
|
|
68
|
+
if (mode === Mode.NumWithCTA) {
|
|
69
|
+
if (customKeyBackground === 'primary') {
|
|
70
|
+
keyBackground = theme.colors.primary;
|
|
71
|
+
textKeyColor = Colors.black_01;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (customKeyState === CustomKeyState.Disable) {
|
|
75
|
+
keyBackground = theme.colors.background.disable;
|
|
76
|
+
textKeyColor = Colors.black_01;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
39
79
|
|
|
40
80
|
React.useImperativeHandle(ref, () => ({
|
|
41
81
|
focus() {
|
|
42
|
-
|
|
43
|
-
if (!node) return;
|
|
44
|
-
const config = UIManager.getViewManagerConfig(NAME);
|
|
45
|
-
if (config?.Commands?.focus != null) {
|
|
46
|
-
UIManager.dispatchViewManagerCommand(node, config.Commands.focus, []);
|
|
47
|
-
}
|
|
82
|
+
if (nativeRef.current) Commands.focus(nativeRef.current);
|
|
48
83
|
},
|
|
49
84
|
blur() {
|
|
50
|
-
|
|
51
|
-
if (!node) return;
|
|
52
|
-
const config = UIManager.getViewManagerConfig(NAME);
|
|
53
|
-
if (config?.Commands?.blur != null) {
|
|
54
|
-
UIManager.dispatchViewManagerCommand(node, config.Commands.blur, []);
|
|
55
|
-
}
|
|
85
|
+
if (nativeRef.current) Commands.blur(nativeRef.current);
|
|
56
86
|
},
|
|
57
87
|
}));
|
|
58
88
|
|
|
@@ -61,11 +91,17 @@ const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProp
|
|
|
61
91
|
{...props}
|
|
62
92
|
ref={nativeRef}
|
|
63
93
|
onChange={_onChange}
|
|
94
|
+
onKeyPress={onKeyPress}
|
|
64
95
|
value={text}
|
|
65
|
-
|
|
96
|
+
mode={mode}
|
|
97
|
+
customKeyText={customKeyText}
|
|
98
|
+
customKeyBackground={keyBackground}
|
|
99
|
+
customKeyTextColor={textKeyColor}
|
|
100
|
+
customKeyState={customKeyState}
|
|
101
|
+
onCustomKeyEvent={onCustomKeyEvent}
|
|
66
102
|
/>
|
|
67
103
|
);
|
|
68
|
-
}
|
|
104
|
+
},
|
|
69
105
|
);
|
|
70
106
|
|
|
71
107
|
export default InputCalculator;
|