@momo-kits/calculator-keyboard 0.77.22 → 0.77.23

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 (3) hide show
  1. package/components/KeyButton.tsx +63 -61
  2. package/index.tsx +240 -239
  3. package/package.json +1 -1
package/components/KeyButton.tsx CHANGED
@@ -1,74 +1,76 @@
1
1
  import React from 'react';
2
- import { View, TouchableOpacity, StyleSheet, Text, ImageSourcePropType } from 'react-native';
3
- import { Colors as ColorCore, Image as FastImage } from '@momo-kits/foundation';
4
- import { Source } from 'react-native-fast-image';
2
+ import {
3
+ View,
4
+ TouchableOpacity,
5
+ StyleSheet,
6
+ Text,
7
+ ImageSourcePropType,
8
+ } from 'react-native';
9
+ import {Colors as ColorCore, Image as FastImage} from '@momo-kits/foundation';
10
+ import {Source} from 'react-native-fast-image';
5
11
 
6
12
  interface KeyButtonProps {
7
- text: string;
8
- icon?: number | Source;
9
- size?: {
10
- width: number;
11
- height: number;
12
- tintColor?: string;
13
- };
14
- backgroundColor?: string;
15
- onLongPress?: (text: string) => void;
13
+ text: string;
14
+ icon?: number | Source;
15
+ size?: {
16
16
  width: number;
17
- onPressOut?: () => void;
18
- onPressIn?: (text: string) => void;
19
- textStyle?: object;
17
+ height: number;
18
+ tintColor?: string;
19
+ };
20
+ backgroundColor?: string;
21
+ onLongPress?: (text: string) => void;
22
+ width: number;
23
+ onPressOut?: () => void;
24
+ onPressIn?: (text: string) => void;
25
+ textStyle?: object;
20
26
  }
21
27
 
22
28
  const styles = StyleSheet.create({
23
- container: {
24
- marginVertical: 1.5,
25
- marginHorizontal: 1.5,
26
- borderRadius: 8,
27
- },
28
- button: {
29
- alignItems: 'center',
30
- justifyContent: 'center',
31
- flex: 1,
32
- borderRadius: 5,
33
- },
29
+ container: {
30
+ marginVertical: 1.5,
31
+ marginHorizontal: 1.5,
32
+ borderRadius: 8,
33
+ },
34
+ button: {
35
+ alignItems: 'center',
36
+ justifyContent: 'center',
37
+ flex: 1,
38
+ borderRadius: 5,
39
+ },
34
40
  });
35
41
 
36
42
  const KeyButton: React.FC<KeyButtonProps> = ({
37
- text,
38
- icon,
39
- size,
40
- backgroundColor = ColorCore.black_01,
41
- onLongPress = () => {},
42
- width,
43
- onPressOut = () => {},
44
- onPressIn = () => {},
45
- textStyle = {},
43
+ text,
44
+ icon,
45
+ size,
46
+ backgroundColor = ColorCore.black_01,
47
+ onLongPress = () => {},
48
+ width,
49
+ onPressOut = () => {},
50
+ onPressIn = () => {},
51
+ textStyle = {},
46
52
  }) => {
47
- let content = null;
48
- if (icon) {
49
- content = (
50
- <FastImage resizeMode="contain" source={icon} style={size} />
51
- );
52
- } else {
53
- content = <Text style={textStyle}>{text}</Text>;
54
- }
55
-
56
- const buttonLongPress = () => onLongPress(text);
57
- const buttonOnPressIn = () => onPressIn(text);
58
-
59
- return (
60
- <View
61
- key={text}
62
- style={[styles.container, { backgroundColor, width }]}>
63
- <TouchableOpacity
64
- onPressIn={buttonOnPressIn}
65
- onPressOut={onPressOut}
66
- onLongPress={buttonLongPress}
67
- style={styles.button}>
68
- {content}
69
- </TouchableOpacity>
70
- </View>
71
- );
53
+ let content = null;
54
+ if (icon) {
55
+ content = <FastImage source={icon} style={size} />;
56
+ } else {
57
+ content = <Text style={textStyle}>{text}</Text>;
58
+ }
59
+
60
+ const buttonLongPress = () => onLongPress(text);
61
+ const buttonOnPressIn = () => onPressIn(text);
62
+
63
+ return (
64
+ <View key={text} style={[styles.container, {backgroundColor, width}]}>
65
+ <TouchableOpacity
66
+ onPressIn={buttonOnPressIn}
67
+ onPressOut={onPressOut}
68
+ onLongPress={buttonLongPress}
69
+ style={styles.button}>
70
+ {content}
71
+ </TouchableOpacity>
72
+ </View>
73
+ );
72
74
  };
73
75
 
74
- export default KeyButton;
76
+ export default KeyButton;
package/index.tsx CHANGED
@@ -1,276 +1,277 @@
1
- import React, { useState, useEffect, useRef } from 'react';
1
+ import React, {useState, useEffect, useRef} from 'react';
2
2
  import {
3
- DeviceEventEmitter,
4
- Dimensions,
5
- Keyboard,
6
- NativeModules,
7
- StyleSheet,
8
- View,
9
- Platform,
3
+ DeviceEventEmitter,
4
+ Dimensions,
5
+ Keyboard,
6
+ NativeModules,
7
+ StyleSheet,
8
+ View,
9
+ Platform,
10
10
  } from 'react-native';
11
- import { Keys } from './Keys';
11
+ import {Keys} from './Keys';
12
12
  import Row from './components/Row';
13
13
  import KeyButton from './components/KeyButton';
14
- import { Colors as ColorCore, scaleSize } from '@momo-kits/foundation';
14
+ import {Colors as ColorCore, scaleSize} from '@momo-kits/foundation';
15
15
 
16
16
  const SEPERATOR_WIDTH = 3;
17
17
  const NUMBER_COLUMN = 4;
18
- const { width, height } = Dimensions.get('window');
18
+ const {width, height} = Dimensions.get('window');
19
19
  const BUTTON_WIDTH =
20
- ((width > 0 ? width : 375) - (NUMBER_COLUMN + 1) * SEPERATOR_WIDTH) /
21
- NUMBER_COLUMN;
20
+ ((width > 0 ? width : 375) - (NUMBER_COLUMN + 1) * SEPERATOR_WIDTH) /
21
+ NUMBER_COLUMN;
22
22
 
23
23
  const isIphoneX = (): boolean =>
24
- Platform.OS === 'ios' &&
25
- !Platform.isPad &&
26
- !Platform.isTVOS &&
27
- (height === 812 ||
28
- width === 812 ||
29
- height === 896 ||
30
- width === 896 ||
31
- width === 844 ||
32
- height === 844);
24
+ Platform.OS === 'ios' &&
25
+ !Platform.isPad &&
26
+ !Platform.isTVOS &&
27
+ (height === 812 ||
28
+ width === 812 ||
29
+ height === 896 ||
30
+ width === 896 ||
31
+ width === 844 ||
32
+ height === 844);
33
33
 
34
34
  const styles = StyleSheet.create({
35
- eqBtnWrapper: {
36
- backgroundColor: '#ad076b',
37
- },
38
- specialBtnWrapper: {
39
- backgroundColor: '#FFF',
40
- },
41
- normalBtnWrapper: {
42
- backgroundColor: ColorCore.black_01,
43
- },
44
- container: { flex: 1, backgroundColor: ColorCore.black_02 },
45
- keyboardView: {
46
- flexDirection: 'row',
47
- flex: 1,
48
- paddingTop: 2,
49
- paddingBottom: isIphoneX() ? 36 : 5,
50
- paddingHorizontal: 1.5,
51
- },
52
- textNormal: {
53
- color: ColorCore.black_17,
54
- fontSize: scaleSize(24),
55
- fontWeight: '500',
56
- },
57
- textPink: {
58
- color: ColorCore.black_01,
59
- fontSize: scaleSize(24),
60
- fontWeight: 'bold',
61
- },
62
- textEqual: {
63
- color: ColorCore.black_01,
64
- fontSize: scaleSize(24),
65
- fontWeight: '600',
66
- },
35
+ eqBtnWrapper: {
36
+ backgroundColor: '#ad076b',
37
+ },
38
+ specialBtnWrapper: {
39
+ backgroundColor: '#FFF',
40
+ },
41
+ normalBtnWrapper: {
42
+ backgroundColor: ColorCore.black_01,
43
+ },
44
+ container: {flex: 1, backgroundColor: ColorCore.black_02},
45
+ keyboardView: {
46
+ flexDirection: 'row',
47
+ flex: 1,
48
+ paddingTop: 2,
49
+ paddingBottom: isIphoneX() ? 36 : 5,
50
+ paddingHorizontal: 1.5,
51
+ },
52
+ textNormal: {
53
+ color: ColorCore.black_17,
54
+ fontSize: scaleSize(24),
55
+ fontWeight: '500',
56
+ },
57
+ textPink: {
58
+ color: ColorCore.black_01,
59
+ fontSize: scaleSize(24),
60
+ fontWeight: 'bold',
61
+ },
62
+ textEqual: {
63
+ color: ColorCore.black_01,
64
+ fontSize: scaleSize(24),
65
+ fontWeight: '600',
66
+ },
67
67
  });
68
68
 
69
- const { CalculatorKeyboardModule } = NativeModules;
69
+ const {CalculatorKeyboardModule} = NativeModules;
70
70
 
71
- const REMOVE_ICON =
72
- 'https://cdn.mservice.com.vn/app/icon/kits/chat_back_space.png';
71
+ const REMOVE_ICON = {
72
+ uri: 'https://cdn.mservice.com.vn/app/icon/kits/chat_back_space.png',
73
+ };
73
74
 
74
75
  const CALCULATOR_BUTTONS = [
75
- [
76
- {
77
- text: 'AC',
78
- icon: null,
79
- backgroundColor: ColorCore.pink_08,
80
- textWeight: 'bold',
81
- textStyle: {
82
- color: ColorCore.black_01,
83
- fontSize: scaleSize(20),
84
- fontWeight: 'bold',
85
- },
86
- },
87
- {
88
- text: '÷',
89
- size: { width: 18, height: 18 },
90
- backgroundColor: ColorCore.pink_08,
91
- textStyle: styles.textPink,
92
- },
93
- {
94
- text: '×',
95
- size: { width: 14, height: 14 },
96
- backgroundColor: ColorCore.pink_08,
97
- textStyle: styles.textPink,
98
- },
99
- ],
100
- [
101
- { text: '7', icon: null, textStyle: styles.textNormal },
102
- { text: '8', icon: null, textStyle: styles.textNormal },
103
- { text: '9', icon: null, textStyle: styles.textNormal },
104
- ],
105
- [
106
- { text: '4', icon: null, textStyle: styles.textNormal },
107
- { text: '5', icon: null, textStyle: styles.textNormal },
108
- { text: '6', icon: null, textStyle: styles.textNormal },
109
- ],
110
- [
111
- { text: '1', icon: null, textStyle: styles.textNormal },
112
- { text: '2', icon: null, textStyle: styles.textNormal },
113
- { text: '3', icon: null, textStyle: styles.textNormal },
114
- ],
76
+ [
77
+ {
78
+ text: 'AC',
79
+ icon: null,
80
+ backgroundColor: ColorCore.pink_08,
81
+ textWeight: 'bold',
82
+ textStyle: {
83
+ color: ColorCore.black_01,
84
+ fontSize: scaleSize(20),
85
+ fontWeight: 'bold',
86
+ },
87
+ },
88
+ {
89
+ text: '÷',
90
+ size: {width: 18, height: 18},
91
+ backgroundColor: ColorCore.pink_08,
92
+ textStyle: styles.textPink,
93
+ },
94
+ {
95
+ text: '×',
96
+ size: {width: 14, height: 14},
97
+ backgroundColor: ColorCore.pink_08,
98
+ textStyle: styles.textPink,
99
+ },
100
+ ],
101
+ [
102
+ {text: '7', icon: null, textStyle: styles.textNormal},
103
+ {text: '8', icon: null, textStyle: styles.textNormal},
104
+ {text: '9', icon: null, textStyle: styles.textNormal},
105
+ ],
106
+ [
107
+ {text: '4', icon: null, textStyle: styles.textNormal},
108
+ {text: '5', icon: null, textStyle: styles.textNormal},
109
+ {text: '6', icon: null, textStyle: styles.textNormal},
110
+ ],
111
+ [
112
+ {text: '1', icon: null, textStyle: styles.textNormal},
113
+ {text: '2', icon: null, textStyle: styles.textNormal},
114
+ {text: '3', icon: null, textStyle: styles.textNormal},
115
+ ],
115
116
  ];
116
117
 
117
118
  interface KeyboardCalculatorProps {
118
- onPress?: (key: string) => void;
119
+ onPress?: (key: string) => void;
119
120
  }
120
121
 
121
- const KeyboardCalculator: React.FC<KeyboardCalculatorProps> = ({ onPress }) => {
122
- const [isOnkeyboardIn, setIsOnkeyboardIn] = useState<boolean>(true);
123
- const keyboardDidShowListener = useRef<any>(null);
124
- const keyboardDidHideListener = useRef<any>(null);
122
+ const KeyboardCalculator: React.FC<KeyboardCalculatorProps> = ({onPress}) => {
123
+ const [isOnkeyboardIn, setIsOnkeyboardIn] = useState<boolean>(true);
124
+ const keyboardDidShowListener = useRef<any>(null);
125
+ const keyboardDidHideListener = useRef<any>(null);
125
126
 
126
- useEffect(() => {
127
- keyboardDidShowListener.current = Keyboard.addListener(
128
- 'keyboardDidShow',
129
- _keyboardDidShow,
130
- );
131
- keyboardDidHideListener.current = Keyboard.addListener(
132
- 'keyboardDidHide',
133
- _keyboardDidHide,
134
- );
127
+ useEffect(() => {
128
+ keyboardDidShowListener.current = Keyboard.addListener(
129
+ 'keyboardDidShow',
130
+ _keyboardDidShow
131
+ );
132
+ keyboardDidHideListener.current = Keyboard.addListener(
133
+ 'keyboardDidHide',
134
+ _keyboardDidHide
135
+ );
135
136
 
136
- return () => {
137
- keyboardDidShowListener.current?.remove();
138
- keyboardDidHideListener.current?.remove();
139
- };
140
- }, []);
137
+ return () => {
138
+ keyboardDidShowListener.current?.remove();
139
+ keyboardDidHideListener.current?.remove();
140
+ };
141
+ }, []);
141
142
 
142
- const _keyboardDidHide = () => {};
143
+ const _keyboardDidHide = () => {};
143
144
 
144
- const _keyboardDidShow = () => {};
145
+ const _keyboardDidShow = () => {};
145
146
 
146
- const onLongPressKeyboardBtn = (keyType: string) => {
147
- if (keyType === 'REMOVE') {
148
- autoBackSpace(keyType);
149
- } else {
150
- if (typeof onPress === 'function') {
151
- onPress(keyType);
152
- }
153
- }
154
- };
147
+ const onLongPressKeyboardBtn = (keyType: string) => {
148
+ if (keyType === 'REMOVE') {
149
+ autoBackSpace(keyType);
150
+ } else {
151
+ if (typeof onPress === 'function') {
152
+ onPress(keyType);
153
+ }
154
+ }
155
+ };
155
156
 
156
- const autoBackSpace = (keyType: string) => {
157
- if (isOnkeyboardIn) {
158
- onPressIn(keyType);
159
- setTimeout(() => {
160
- autoBackSpace(keyType);
161
- }, 200);
162
- }
163
- };
157
+ const autoBackSpace = (keyType: string) => {
158
+ if (isOnkeyboardIn) {
159
+ onPressIn(keyType);
160
+ setTimeout(() => {
161
+ autoBackSpace(keyType);
162
+ }, 200);
163
+ }
164
+ };
164
165
 
165
- const onPressIn = (txt: string) => {
166
- setIsOnkeyboardIn(true);
166
+ const onPressIn = (txt: string) => {
167
+ setIsOnkeyboardIn(true);
167
168
 
168
- if (
169
- txt === '+' ||
170
- txt === '-' ||
171
- txt === '×' ||
172
- txt === '÷' ||
173
- txt === 'REMOVE' ||
174
- txt === 'AC' ||
175
- txt === '='
176
- )
177
- DeviceEventEmitter.emit(Keys.CALULATOR_PUSH_KEY, txt);
178
-
179
- if (txt === 'REMOVE') {
180
- CalculatorKeyboardModule.backSpace();
181
- } else if (txt === 'AC') {
182
- CalculatorKeyboardModule.doDelete();
183
- } else if (txt === 'CLOSE') {
184
- DeviceEventEmitter.emit(Keys.CALCULATOR_DISMISS);
185
- } else if (txt === '=') {
186
- DeviceEventEmitter.emit(Keys.CALCULATOR_CALCULATE);
187
- } else {
188
- CalculatorKeyboardModule.insertText(txt);
189
- }
190
- };
169
+ if (
170
+ txt === '+' ||
171
+ txt === '-' ||
172
+ txt === '×' ||
173
+ txt === '÷' ||
174
+ txt === 'REMOVE' ||
175
+ txt === 'AC' ||
176
+ txt === '='
177
+ )
178
+ DeviceEventEmitter.emit(Keys.CALULATOR_PUSH_KEY, txt);
191
179
 
192
- const onPressOut = () => {
193
- setIsOnkeyboardIn(false);
194
- };
180
+ if (txt === 'REMOVE') {
181
+ CalculatorKeyboardModule.backSpace();
182
+ } else if (txt === 'AC') {
183
+ CalculatorKeyboardModule.doDelete();
184
+ } else if (txt === 'CLOSE') {
185
+ DeviceEventEmitter.emit(Keys.CALCULATOR_DISMISS);
186
+ } else if (txt === '=') {
187
+ DeviceEventEmitter.emit(Keys.CALCULATOR_CALCULATE);
188
+ } else {
189
+ CalculatorKeyboardModule.insertText(txt);
190
+ }
191
+ };
195
192
 
196
- const renderBtn = (params: any) => (
197
- <KeyButton
198
- key={params.text}
199
- onPressIn={onPressIn}
200
- onPressOut={onPressOut}
201
- onLongPress={onLongPressKeyboardBtn}
202
- width={BUTTON_WIDTH}
203
- {...params}
204
- />
205
- );
193
+ const onPressOut = () => {
194
+ setIsOnkeyboardIn(false);
195
+ };
206
196
 
207
- const renderContent = () => (
208
- <View style={styles.keyboardView}>
209
- <View style={{ width: BUTTON_WIDTH * 3 + 2 * SEPERATOR_WIDTH }}>
210
- <Row>{CALCULATOR_BUTTONS[0].map(renderBtn)}</Row>
211
- <Row>{CALCULATOR_BUTTONS[1].map(renderBtn)}</Row>
212
- <Row>{CALCULATOR_BUTTONS[2].map(renderBtn)}</Row>
213
- <Row>{CALCULATOR_BUTTONS[3].map(renderBtn)}</Row>
214
- <Row>
215
- {renderBtn({
216
- width: BUTTON_WIDTH * 2 + 3,
217
- text: '000',
218
- textStyle: styles.textNormal,
219
- })}
220
- {renderBtn({
221
- width: BUTTON_WIDTH,
222
- text: '0',
223
- textStyle: styles.textNormal,
224
- })}
225
- </Row>
226
- </View>
227
- <View style={{ width: BUTTON_WIDTH, marginLeft: 3 }}>
228
- <View style={{ flex: 0.6 }}>
229
- <Row>
230
- {renderBtn({
231
- width: BUTTON_WIDTH,
232
- text: 'REMOVE',
233
- backgroundColor: ColorCore.pink_08,
234
- icon: REMOVE_ICON,
235
- size: {
236
- width: 24,
237
- height: 24,
238
- tintColor: ColorCore.black_01,
239
- },
240
- })}
241
- </Row>
242
- <Row>
243
- {renderBtn({
244
- width: BUTTON_WIDTH,
245
- text: '-',
246
- backgroundColor: ColorCore.pink_08,
247
- textStyle: styles.textPink,
248
- })}
249
- </Row>
250
- <Row>
251
- {renderBtn({
252
- width: BUTTON_WIDTH,
253
- text: '+',
254
- backgroundColor: ColorCore.pink_08,
255
- textStyle: styles.textPink,
256
- })}
257
- </Row>
258
- </View>
259
- <View style={{ flex: 0.4 }}>
260
- <Row>
261
- {renderBtn({
262
- width: BUTTON_WIDTH,
263
- text: '=',
264
- backgroundColor: ColorCore.pink_03,
265
- textStyle: styles.textEqual,
266
- })}
267
- </Row>
268
- </View>
269
- </View>
197
+ const renderBtn = (params: any) => (
198
+ <KeyButton
199
+ key={params.text}
200
+ onPressIn={onPressIn}
201
+ onPressOut={onPressOut}
202
+ onLongPress={onLongPressKeyboardBtn}
203
+ width={BUTTON_WIDTH}
204
+ {...params}
205
+ />
206
+ );
207
+
208
+ const renderContent = () => (
209
+ <View style={styles.keyboardView}>
210
+ <View style={{width: BUTTON_WIDTH * 3 + 2 * SEPERATOR_WIDTH}}>
211
+ <Row>{CALCULATOR_BUTTONS[0].map(renderBtn)}</Row>
212
+ <Row>{CALCULATOR_BUTTONS[1].map(renderBtn)}</Row>
213
+ <Row>{CALCULATOR_BUTTONS[2].map(renderBtn)}</Row>
214
+ <Row>{CALCULATOR_BUTTONS[3].map(renderBtn)}</Row>
215
+ <Row>
216
+ {renderBtn({
217
+ width: BUTTON_WIDTH * 2 + 3,
218
+ text: '000',
219
+ textStyle: styles.textNormal,
220
+ })}
221
+ {renderBtn({
222
+ width: BUTTON_WIDTH,
223
+ text: '0',
224
+ textStyle: styles.textNormal,
225
+ })}
226
+ </Row>
227
+ </View>
228
+ <View style={{width: BUTTON_WIDTH, marginLeft: 3}}>
229
+ <View style={{flex: 0.6}}>
230
+ <Row>
231
+ {renderBtn({
232
+ width: BUTTON_WIDTH,
233
+ text: 'REMOVE',
234
+ backgroundColor: ColorCore.pink_08,
235
+ icon: REMOVE_ICON,
236
+ size: {
237
+ width: 24,
238
+ height: 24,
239
+ tintColor: ColorCore.black_01,
240
+ },
241
+ })}
242
+ </Row>
243
+ <Row>
244
+ {renderBtn({
245
+ width: BUTTON_WIDTH,
246
+ text: '-',
247
+ backgroundColor: ColorCore.pink_08,
248
+ textStyle: styles.textPink,
249
+ })}
250
+ </Row>
251
+ <Row>
252
+ {renderBtn({
253
+ width: BUTTON_WIDTH,
254
+ text: '+',
255
+ backgroundColor: ColorCore.pink_08,
256
+ textStyle: styles.textPink,
257
+ })}
258
+ </Row>
270
259
  </View>
271
- );
260
+ <View style={{flex: 0.4}}>
261
+ <Row>
262
+ {renderBtn({
263
+ width: BUTTON_WIDTH,
264
+ text: '=',
265
+ backgroundColor: ColorCore.pink_03,
266
+ textStyle: styles.textEqual,
267
+ })}
268
+ </Row>
269
+ </View>
270
+ </View>
271
+ </View>
272
+ );
272
273
 
273
- return <View style={styles.container}>{renderContent()}</View>;
274
+ return <View style={styles.container}>{renderContent()}</View>;
274
275
  };
275
276
 
276
- export default KeyboardCalculator;
277
+ export default KeyboardCalculator;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/calculator-keyboard",
3
- "version": "0.77.22",
3
+ "version": "0.77.23",
4
4
  "private": false,
5
5
  "main": "index.tsx",
6
6
  "peerDependencies": {