@momo-kits/calculator-keyboard 0.77.22

package/Keys.ts

@@ -0,0 +1,8 @@
+export const Keys = {
+    CALCULATOR_TEXT_INPUT_FOCUSED: 'CALCULATOR_TEXT_INPUT_FOCUSED',
+    CALCULATOR_TEXT_INPUT_UNFOCUSED: 'CALCULATOR_TEXT_INPUT_UNFOCUSED',
+    CALCULATOR_DISMISS: 'CALCULATOR_DISMISS',
+    CALCULATOR_CALCULATE: 'CALCULATOR_CALCULATE',
+    CALCULATOR_HEIGHT_UPDATED: 'CALCULATOR_HEIGHT_UPDATED',
+    CALULATOR_PUSH_KEY: 'CALULATOR_PUSH_KEY'
+};

package/components/KeyButton.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, Text, ImageSourcePropType } from 'react-native';
+import { Colors as ColorCore, Image as FastImage } from '@momo-kits/foundation';
+import { Source } from 'react-native-fast-image';
+
+interface KeyButtonProps {
+    text: string;
+    icon?: number | Source;
+    size?: {
+        width: number;
+        height: number;
+        tintColor?: string;
+    };
+    backgroundColor?: string;
+    onLongPress?: (text: string) => void;
+    width: number;
+    onPressOut?: () => void;
+    onPressIn?: (text: string) => void;
+    textStyle?: object;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 1.5,
+        marginHorizontal: 1.5,
+        borderRadius: 8,
+    },
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        borderRadius: 5,
+    },
+});
+
+const KeyButton: React.FC<KeyButtonProps> = ({
+    text,
+    icon,
+    size,
+    backgroundColor = ColorCore.black_01,
+    onLongPress = () => {},
+    width,
+    onPressOut = () => {},
+    onPressIn = () => {},
+    textStyle = {},
+}) => {
+    let content = null;
+    if (icon) {
+        content = (
+            <FastImage resizeMode="contain" source={icon} style={size} />
+        );
+    } else {
+        content = <Text style={textStyle}>{text}</Text>;
+    }
+    
+    const buttonLongPress = () => onLongPress(text);
+    const buttonOnPressIn = () => onPressIn(text);
+    
+    return (
+        <View
+            key={text}
+            style={[styles.container, { backgroundColor, width }]}>
+            <TouchableOpacity
+                onPressIn={buttonOnPressIn}
+                onPressOut={onPressOut}
+                onLongPress={buttonLongPress}
+                style={styles.button}>
+                {content}
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+export default KeyButton;

package/components/Row.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+interface RowProps {
+    children?: React.ReactNode;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        flex: 1
+    }
+});
+
+const Row: React.FC<RowProps> = ({ children }) => {
+    return (
+        <View style={styles.container}>
+            {children}
+        </View>
+    );
+};
+
+export default Row;

package/index.tsx

@@ -0,0 +1,276 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+    DeviceEventEmitter,
+    Dimensions,
+    Keyboard,
+    NativeModules,
+    StyleSheet,
+    View,
+    Platform,
+} from 'react-native';
+import { Keys } from './Keys';
+import Row from './components/Row';
+import KeyButton from './components/KeyButton';
+import { Colors as ColorCore, scaleSize } from '@momo-kits/foundation';
+
+const SEPERATOR_WIDTH = 3;
+const NUMBER_COLUMN = 4;
+const { width, height } = Dimensions.get('window');
+const BUTTON_WIDTH =
+    ((width > 0 ? width : 375) - (NUMBER_COLUMN + 1) * SEPERATOR_WIDTH) /
+    NUMBER_COLUMN;
+
+const isIphoneX = (): boolean =>
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    !Platform.isTVOS &&
+    (height === 812 ||
+        width === 812 ||
+        height === 896 ||
+        width === 896 ||
+        width === 844 ||
+        height === 844);
+
+const styles = StyleSheet.create({
+    eqBtnWrapper: {
+        backgroundColor: '#ad076b',
+    },
+    specialBtnWrapper: {
+        backgroundColor: '#FFF',
+    },
+    normalBtnWrapper: {
+        backgroundColor: ColorCore.black_01,
+    },
+    container: { flex: 1, backgroundColor: ColorCore.black_02 },
+    keyboardView: {
+        flexDirection: 'row',
+        flex: 1,
+        paddingTop: 2,
+        paddingBottom: isIphoneX() ? 36 : 5,
+        paddingHorizontal: 1.5,
+    },
+    textNormal: {
+        color: ColorCore.black_17,
+        fontSize: scaleSize(24),
+        fontWeight: '500',
+    },
+    textPink: {
+        color: ColorCore.black_01,
+        fontSize: scaleSize(24),
+        fontWeight: 'bold',
+    },
+    textEqual: {
+        color: ColorCore.black_01,
+        fontSize: scaleSize(24),
+        fontWeight: '600',
+    },
+});
+
+const { CalculatorKeyboardModule } = NativeModules;
+
+const REMOVE_ICON =
+    'https://cdn.mservice.com.vn/app/icon/kits/chat_back_space.png';
+
+const CALCULATOR_BUTTONS = [
+    [
+        {
+            text: 'AC',
+            icon: null,
+            backgroundColor: ColorCore.pink_08,
+            textWeight: 'bold',
+            textStyle: {
+                color: ColorCore.black_01,
+                fontSize: scaleSize(20),
+                fontWeight: 'bold',
+            },
+        },
+        {
+            text: '÷',
+            size: { width: 18, height: 18 },
+            backgroundColor: ColorCore.pink_08,
+            textStyle: styles.textPink,
+        },
+        {
+            text: '×',
+            size: { width: 14, height: 14 },
+            backgroundColor: ColorCore.pink_08,
+            textStyle: styles.textPink,
+        },
+    ],
+    [
+        { text: '7', icon: null, textStyle: styles.textNormal },
+        { text: '8', icon: null, textStyle: styles.textNormal },
+        { text: '9', icon: null, textStyle: styles.textNormal },
+    ],
+    [
+        { text: '4', icon: null, textStyle: styles.textNormal },
+        { text: '5', icon: null, textStyle: styles.textNormal },
+        { text: '6', icon: null, textStyle: styles.textNormal },
+    ],
+    [
+        { text: '1', icon: null, textStyle: styles.textNormal },
+        { text: '2', icon: null, textStyle: styles.textNormal },
+        { text: '3', icon: null, textStyle: styles.textNormal },
+    ],
+];
+
+interface KeyboardCalculatorProps {
+    onPress?: (key: string) => void;
+}
+
+const KeyboardCalculator: React.FC<KeyboardCalculatorProps> = ({ onPress }) => {
+    const [isOnkeyboardIn, setIsOnkeyboardIn] = useState<boolean>(true);
+    const keyboardDidShowListener = useRef<any>(null);
+    const keyboardDidHideListener = useRef<any>(null);
+
+    useEffect(() => {
+        keyboardDidShowListener.current = Keyboard.addListener(
+            'keyboardDidShow',
+            _keyboardDidShow,
+        );
+        keyboardDidHideListener.current = Keyboard.addListener(
+            'keyboardDidHide',
+            _keyboardDidHide,
+        );
+
+        return () => {
+            keyboardDidShowListener.current?.remove();
+            keyboardDidHideListener.current?.remove();
+        };
+    }, []);
+
+    const _keyboardDidHide = () => {};
+
+    const _keyboardDidShow = () => {};
+
+    const onLongPressKeyboardBtn = (keyType: string) => {
+        if (keyType === 'REMOVE') {
+            autoBackSpace(keyType);
+        } else {
+            if (typeof onPress === 'function') {
+                onPress(keyType);
+            }
+        }
+    };
+
+    const autoBackSpace = (keyType: string) => {
+        if (isOnkeyboardIn) {
+            onPressIn(keyType);
+            setTimeout(() => {
+                autoBackSpace(keyType);
+            }, 200);
+        }
+    };
+
+    const onPressIn = (txt: string) => {
+        setIsOnkeyboardIn(true);
+
+        if (
+            txt === '+' ||
+            txt === '-' ||
+            txt === '×' ||
+            txt === '÷' ||
+            txt === 'REMOVE' ||
+            txt === 'AC' ||
+            txt === '='
+        )
+            DeviceEventEmitter.emit(Keys.CALULATOR_PUSH_KEY, txt);
+        
+        if (txt === 'REMOVE') {
+            CalculatorKeyboardModule.backSpace();
+        } else if (txt === 'AC') {
+            CalculatorKeyboardModule.doDelete();
+        } else if (txt === 'CLOSE') {
+            DeviceEventEmitter.emit(Keys.CALCULATOR_DISMISS);
+        } else if (txt === '=') {
+            DeviceEventEmitter.emit(Keys.CALCULATOR_CALCULATE);
+        } else {
+            CalculatorKeyboardModule.insertText(txt);
+        }
+    };
+
+    const onPressOut = () => {
+        setIsOnkeyboardIn(false);
+    };
+
+    const renderBtn = (params: any) => (
+        <KeyButton
+            key={params.text}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            onLongPress={onLongPressKeyboardBtn}
+            width={BUTTON_WIDTH}
+            {...params}
+        />
+    );
+
+    const renderContent = () => (
+        <View style={styles.keyboardView}>
+            <View style={{ width: BUTTON_WIDTH * 3 + 2 * SEPERATOR_WIDTH }}>
+                <Row>{CALCULATOR_BUTTONS[0].map(renderBtn)}</Row>
+                <Row>{CALCULATOR_BUTTONS[1].map(renderBtn)}</Row>
+                <Row>{CALCULATOR_BUTTONS[2].map(renderBtn)}</Row>
+                <Row>{CALCULATOR_BUTTONS[3].map(renderBtn)}</Row>
+                <Row>
+                    {renderBtn({
+                        width: BUTTON_WIDTH * 2 + 3,
+                        text: '000',
+                        textStyle: styles.textNormal,
+                    })}
+                    {renderBtn({
+                        width: BUTTON_WIDTH,
+                        text: '0',
+                        textStyle: styles.textNormal,
+                    })}
+                </Row>
+            </View>
+            <View style={{ width: BUTTON_WIDTH, marginLeft: 3 }}>
+                <View style={{ flex: 0.6 }}>
+                    <Row>
+                        {renderBtn({
+                            width: BUTTON_WIDTH,
+                            text: 'REMOVE',
+                            backgroundColor: ColorCore.pink_08,
+                            icon: REMOVE_ICON,
+                            size: {
+                                width: 24,
+                                height: 24,
+                                tintColor: ColorCore.black_01,
+                            },
+                        })}
+                    </Row>
+                    <Row>
+                        {renderBtn({
+                            width: BUTTON_WIDTH,
+                            text: '-',
+                            backgroundColor: ColorCore.pink_08,
+                            textStyle: styles.textPink,
+                        })}
+                    </Row>
+                    <Row>
+                        {renderBtn({
+                            width: BUTTON_WIDTH,
+                            text: '+',
+                            backgroundColor: ColorCore.pink_08,
+                            textStyle: styles.textPink,
+                        })}
+                    </Row>
+                </View>
+                <View style={{ flex: 0.4 }}>
+                    <Row>
+                        {renderBtn({
+                            width: BUTTON_WIDTH,
+                            text: '=',
+                            backgroundColor: ColorCore.pink_03,
+                            textStyle: styles.textEqual,
+                        })}
+                    </Row>
+                </View>
+            </View>
+        </View>
+    );
+
+    return <View style={styles.container}>{renderContent()}</View>;
+};
+
+export default KeyboardCalculator;

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@momo-kits/calculator-keyboard",
+  "version": "0.77.22",
+  "private": false,
+  "main": "index.tsx",
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "react": "16.9.0",
+    "react-native": ">=0.55",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11"
+  },
+  "license": "MoMo",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {}
+}

package/publish.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+# Prepare dist files
+rm -rf dist
+mkdir dist
+rsync -r --exclude=/dist ./* dist
+cd dist
+
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm publish --tag latest --access=public
+else
+  npm version $(npm view @momo-kits/avatar@beta version)
+  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
+cd ..
+rm -rf dist