@momo-kits/calculator-keyboard 0.92.7-rc.25

package/index.tsx

@@ -0,0 +1,135 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {
+  AppState,
+  Platform,
+  requireNativeComponent,
+  TextInput,
+} from 'react-native';
+import {InputCalculatorProps} from './types';
+
+const {State: TextInputState} = TextInput;
+
+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',
+};
+
+const CalculatorKeyboard: React.FC<InputCalculatorProps> = props => {
+  //   const [isFocus, setIsFocus] = useState(false);
+  const [lastNativeText, setLastNativeText] = useState(props.value);
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    const nativeProps = {};
+    if (lastNativeText !== props.value && typeof props.value === 'string') {
+      // @ts-ignore
+      nativeProps.text = props.value;
+    }
+    if (
+      Object.keys(nativeProps).length > 0 &&
+      inputRef.current &&
+      inputRef.current.setNativeProps
+    ) {
+      inputRef.current.setNativeProps(nativeProps);
+    }
+
+    if (props.selectionState && props.selection && props.selection.end) {
+      props.selectionState.update(props.selection.start, props.selection.end);
+    }
+  }, [props.value, props.selection, props.selectionState, lastNativeText]);
+
+  useEffect(() => {
+    AppState.addEventListener('change', handleAppStateChange);
+    return () => {
+      AppState.addEventListener('change', handleAppStateChange);
+    };
+  }, []);
+
+  const handleAppStateChange = (nextAppState: string) => {
+    if (nextAppState === 'background' && Platform.OS === 'android') {
+      blur();
+    }
+  };
+
+  const blur = () => {
+    if (inputRef.current && typeof inputRef.current.blur === 'function') {
+      inputRef.current.blur();
+    }
+  };
+
+  //   const focus = () => {
+  //     if (inputRef.current && typeof inputRef.current.focus === 'function') {
+  //       inputRef.current.focus();
+  //     }
+  //   };
+
+  const getText = () => {
+    if (typeof props.value === 'string') {
+      console.log('props.value', props.value);
+      return props.value;
+    }
+    if (typeof props.defaultValue === 'string') {
+      return props.defaultValue;
+    }
+
+    return '';
+  };
+
+  const onFocus = (event: any) => {
+    // setIsFocus(true);
+    if (props.onFocus) {
+      props.onFocus(event);
+    }
+    if (inputRef.current != null && TextInputState) {
+      TextInputState.focusTextInput(inputRef.current);
+    }
+  };
+
+  const onBlur = (event: any) => {
+    // setIsFocus(false);
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+  };
+
+  const onChange = (event: any) => {
+    if (inputRef.current && inputRef.current.setNativeProps) {
+      inputRef.current.setNativeProps({
+        mostRecentEventCount: event.nativeEvent.eventCount,
+      });
+    }
+
+    const {text} = event.nativeEvent;
+    if (props.onChange) {
+      props.onChange(event);
+    }
+    if (props.onChangeText) {
+      props.onChangeText(text);
+    }
+    if (!inputRef) {
+      return;
+    }
+    setLastNativeText(text);
+  };
+
+  return (
+    <RCTInputCalculator
+      {...props}
+      ref={inputRef}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onChange={onChange}
+      text={getText()}
+    />
+  );
+};
+
+// @ts-ignore
+const RCTInputCalculator =
+  requireNativeComponent<InputCalculatorProps>('RCTInputCalculator');
+
+export default CalculatorKeyboard;

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@momo-kits/calculator-keyboard",
+  "version": "0.92.7-rc.25",
+  "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",
+  "dependencies": {}
+}

package/publish.sh

@@ -0,0 +1,27 @@
+#!/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

package/styles.ts

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  icon: {
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/types.ts

@@ -0,0 +1,7 @@
+import {TextInputProps} from 'react-native';
+import React from 'react';
+
+export interface InputCalculatorProps extends TextInputProps {
+  text?: string;
+  forwardedRef?: React.Ref<any>;
+}