@momo-kits/calculator-keyboard 0.150.2-beta.3 → 0.150.2-beta.30

package/package.json

@@ -1,22 +1,8 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-beta.3",
+    "version": "0.150.2-beta.30",
     "description": "react native calculator keyboard",
-    "source": "./src/index.tsx",
-    "main": "./lib/commonjs/index.js",
-    "module": "./lib/module/index.js",
-    "exports": {
-        ".": {
-            "import": {
-                "types": "./lib/typescript/module/src/index.d.ts",
-                "default": "./lib/module/index.js"
-            },
-            "require": {
-                "types": "./lib/typescript/commonjs/src/index.d.ts",
-                "default": "./lib/commonjs/index.js"
-            }
-        }
-    },
+    "main": "./src/index.tsx",
     "files": [
         "src",
         "lib",
@@ -40,9 +26,7 @@
         "test": "jest",
         "typecheck": "tsc",
         "lint": "eslint \"**/*.{js,ts,tsx}\"",
-        "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
-        "build": "bob build",
-        "release": "release-it"
+        "build": "echo"
     },
     "keywords": [
         "react-native",
@@ -62,124 +46,30 @@
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
     },
-    "devDependencies": {
-        "@commitlint/config-conventional": "^17.0.2",
-        "@evilmartians/lefthook": "^1.5.0",
-        "@react-native-community/cli": "15.0.1",
-        "@react-native/eslint-config": "^0.73.1",
-        "@release-it/conventional-changelog": "^9.0.2",
-        "@types/jest": "^29.5.5",
-        "@types/react": "^18.2.44",
-        "commitlint": "^17.0.2",
-        "del-cli": "^5.1.0",
-        "eslint": "^8.51.0",
-        "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "jest": "^29.7.0",
-        "prettier": "^3.0.3",
-        "react": "18.3.1",
-        "react-native": "0.76.5",
-        "react-native-builder-bob": "^0.32.0",
-        "release-it": "^17.10.0",
-        "turbo": "^1.10.7",
-        "typescript": "^5.2.2"
-    },
-    "resolutions": {
-        "@types/react": "^18.2.44"
-    },
-    "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-    },
-    "jest": {
-        "preset": "react-native",
-        "modulePathIgnorePatterns": [
-            "<rootDir>/example/node_modules",
-            "<rootDir>/lib/"
-        ]
-    },
-    "commitlint": {
-        "extends": [
-            "@commitlint/config-conventional"
-        ]
-    },
-    "release-it": {
-        "git": {
-            "commitMessage": "chore: release ${version}",
-            "tagName": "v${version}"
-        },
-        "npm": {
-            "publish": true
-        },
-        "github": {
-            "release": true
+    "codegenConfig": {
+        "name": "CalculatorKeyboardSpecs",
+        "type": "components",
+        "jsSrcsDir": "src",
+        "android": {
+            "javaPackageName": "com.calculatorkeyboard"
         },
-        "plugins": {
-            "@release-it/conventional-changelog": {
-                "preset": "angular"
+        "ios": {
+            "componentProvider": {
+                "NativeInputCalculator": "NativeInputCalculator"
             }
         }
     },
-    "eslintConfig": {
-        "root": true,
-        "extends": [
-            "@react-native",
-            "prettier"
-        ],
-        "rules": {
-            "react/react-in-jsx-scope": "off",
-            "prettier/prettier": [
-                "error",
-                {
-                    "quoteProps": "consistent",
-                    "singleQuote": true,
-                    "tabWidth": 2,
-                    "trailingComma": "es5",
-                    "useTabs": false
-                }
-            ]
-        }
-    },
-    "eslintIgnore": [
-        "node_modules/",
-        "lib/"
-    ],
-    "prettier": {
-        "quoteProps": "consistent",
-        "singleQuote": true,
-        "tabWidth": 2,
-        "trailingComma": "es5",
-        "useTabs": false
+    "devDependencies": {
+        "react": "19.0.0",
+        "react-native": "0.80.1"
     },
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "lib",
-        "targets": [
-            [
-                "commonjs",
-                {
-                    "esm": true
-                }
-            ],
-            [
-                "module",
-                {
-                    "esm": true
-                }
-            ],
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json",
-                    "esm": true
-                }
-            ]
-        ]
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "@momo-kits/foundation": "latest"
     },
-    "create-react-native-library": {
-        "type": "legacy-view",
-        "languages": "kotlin-swift",
-        "version": "0.45.5"
+    "engines": {
+        "node": ">=18.0.0"
     },
     "dependencies": {}
 }

package/react-native-calculator-keyboard.podspec

@@ -5,7 +5,7 @@ folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1
 
 Pod::Spec.new do |s|
   s.name         = "react-native-calculator-keyboard"
-  s.version      = "0.0.1"
+  s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]
   s.license      = package["license"]
@@ -14,9 +14,10 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
-  s.resources = "**/Assets/**/*.{json}"
-
+  s.source_files = "ios/**/*.{h,m,mm}"
+  # s.public_header_files = "ios/CalculatorKeyboardView.h"
+  # s.private_header_files = "ios/NativeInputCalculator.h"
+  
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
   if respond_to?(:install_modules_dependencies, true)

package/src/InputCalculatorNativeComponent.ts

@@ -0,0 +1,62 @@
+import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
+import {
+  CodegenTypes,
+  codegenNativeComponent,
+  codegenNativeCommands,
+} from 'react-native';
+
+export type CustomKeyBackground = 'primary' | 'default' | string;
+
+export enum CustomKeyState {
+  Default = 'default',
+  Disable = 'disable',
+}
+
+export enum Mode {
+  NumDefault = 'NumDefault',
+  NumWithCTA = 'NumWithCTA',
+}
+
+export type OnKeyPressEvent = Readonly<{
+  key: string;
+}>;
+
+export type OnChangeEvent = Readonly<{
+  text: string;
+}>;
+
+export type TextAttributes = Readonly<{
+  fontSize?: CodegenTypes.Float;
+  fontWeight?: string;
+}>;
+
+export interface NativeInputCalculatorProps extends ViewProps {
+  value?: string;
+  textAttributes?: TextAttributes;
+  mode?: string;
+  customKeyText?: string;
+  customKeyBackground?: string;
+  customKeyTextColor?: string;
+  customKeyState?: string;
+  onChange?: CodegenTypes.BubblingEventHandler<OnChangeEvent>;
+  onKeyPress?: CodegenTypes.BubblingEventHandler<OnKeyPressEvent>;
+  onCustomKeyEvent?: CodegenTypes.DirectEventHandler<{}>;
+}
+
+export interface NativeInputCalculatorCommands {
+  focus(
+    viewRef: React.ElementRef<HostComponent<NativeInputCalculatorProps>>,
+  ): void;
+  blur(
+    viewRef: React.ElementRef<HostComponent<NativeInputCalculatorProps>>,
+  ): void;
+}
+
+export const Commands = codegenNativeCommands<NativeInputCalculatorCommands>({
+  supportedCommands: ['focus', 'blur'],
+});
+
+export default codegenNativeComponent<NativeInputCalculatorProps>(
+  'NativeInputCalculator',
+);

package/src/index.tsx

@@ -1,21 +1,43 @@
-import React from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+import { ApplicationContext, Colors } from '@momo-kits/foundation';
 import {
   type NativeSyntheticEvent,
-  type TextInputChangeEventData,
   type TextInputProps,
-  type ColorValue,
-  processColor,
-  UIManager,
-  findNodeHandle,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
-import { requireNativeComponent } from 'react-native';
+import NativeInputCalculator, {
+  TextAttributes,
+} from './InputCalculatorNativeComponent';
+import { Commands } from './InputCalculatorNativeComponent';
 
-const NAME = 'RCTInputCalculator';
-const NativeInput = requireNativeComponent<any>(NAME);
+const NativeInput = NativeInputCalculator;
+
+type KeyPressEvent = { nativeEvent: { key: string } };
 
 interface InputCalculatorProps extends TextInputProps {
   text?: string | undefined;
-  keyboardColor?: ColorValue;
+  mode?: Mode;
+  onKeyPress?: (e: KeyPressEvent) => void;
+  customKeyText?: string | undefined;
+  customKeyBackground?: CustomKeyBackground;
+  customKeyState?: CustomKeyState;
+  onCustomKeyEvent?: () => void;
+  style?: StyleProp<TextStyle>;
+}
+
+export type CustomKeyBackground = 'primary' | 'default' | string;
+
+export enum CustomKeyState {
+  Default = 'default',
+  Disable = 'disable',
+}
+
+export enum Mode {
+  NumDefault = 'NumDefault',
+  NumWithCTA = 'NumWithCTA',
 }
 
 export type InputCalculatorRef = {
@@ -23,49 +45,100 @@ export type InputCalculatorRef = {
   blur: () => void;
 };
 
-const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProps>(
-  (props, ref) => {
+const omitUndefined = <T extends object>(obj: T): T =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([, v]) => v !== undefined),
+  ) as T;
+
+function isEmpty(obj: object | undefined | null) {
+  return !obj || Object.keys(obj).length === 0;
+}
+
+export function styleToTextAttributes(
+  style?: StyleProp<TextStyle>,
+): Readonly<TextAttributes> {
+  const s = StyleSheet.flatten(style) ?? {};
+  const attrs: TextAttributes = {
+    fontSize: s.fontSize ?? undefined,
+    fontWeight: (s.fontWeight as TextAttributes['fontWeight']) ?? undefined,
+  };
+  return Object.freeze(omitUndefined(attrs));
+}
+
+const InputCalculator = React.forwardRef<
+  InputCalculatorRef,
+  InputCalculatorProps
+>(
+  (
+    {
+      customKeyBackground = 'default',
+      mode = Mode.NumDefault,
+      customKeyText,
+      onKeyPress,
+      customKeyState = CustomKeyState.Default,
+      onCustomKeyEvent,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useContext(ApplicationContext);
     const nativeRef = React.useRef<any>(null);
 
-    const _onChange = (
-      event: NativeSyntheticEvent<TextInputChangeEventData>
-    ) => {
+    const _onChange = (event: NativeSyntheticEvent<any>) => {
       const currentText = event.nativeEvent.text;
-      props.onChange && props.onChange(event);
-      props.onChangeText && props.onChangeText(currentText);
+      props.onChange?.(event);
+      props.onChangeText?.(currentText);
     };
 
     const text = props.text ?? props.defaultValue ?? '';
+    let keyBackground = Colors.black_06;
+    let textKeyColor = Colors.black_20;
+
+    if (mode === Mode.NumWithCTA) {
+      if (customKeyBackground === 'primary') {
+        keyBackground = theme.colors.primary;
+        textKeyColor = Colors.black_01;
+      }
+
+      if (customKeyState === CustomKeyState.Disable) {
+        keyBackground = theme.colors.background.disable;
+        textKeyColor = Colors.black_01;
+      }
+    }
 
     React.useImperativeHandle(ref, () => ({
       focus() {
-        const node = findNodeHandle(nativeRef.current);
-        if (!node) return;
-        const config = UIManager.getViewManagerConfig(NAME);
-        if (config?.Commands?.focus != null) {
-          UIManager.dispatchViewManagerCommand(node, config.Commands.focus, []);
-        }
+        if (nativeRef.current) Commands.focus(nativeRef.current);
       },
       blur() {
-        const node = findNodeHandle(nativeRef.current);
-        if (!node) return;
-        const config = UIManager.getViewManagerConfig(NAME);
-        if (config?.Commands?.blur != null) {
-          UIManager.dispatchViewManagerCommand(node, config.Commands.blur, []);
-        }
+        if (nativeRef.current) Commands.blur(nativeRef.current);
       },
     }));
 
+    const derivedTA = React.useMemo(
+      () => styleToTextAttributes(style),
+      [style],
+    );
+
     return (
       <NativeInput
         {...props}
+        style={style}
+        textAttributes={isEmpty(derivedTA) ? undefined : derivedTA}
         ref={nativeRef}
         onChange={_onChange}
+        onKeyPress={onKeyPress}
         value={text}
-        keybardColor={processColor(props.keyboardColor)}
+        mode={mode}
+        customKeyText={customKeyText}
+        customKeyBackground={keyBackground}
+        customKeyTextColor={textKeyColor}
+        customKeyState={customKeyState}
+        onCustomKeyEvent={onCustomKeyEvent}
       />
     );
-  }
+  },
 );
 
 export default InputCalculator;

package/android/src/main/java/com/calculatorkeyboard/RCTInputCalculator.kt

@@ -1,179 +0,0 @@
-package com.calculatorkeyboard
-
-import android.annotation.SuppressLint
-import android.app.Activity
-import android.graphics.PixelFormat
-import android.graphics.drawable.ColorDrawable
-import android.view.Gravity
-import android.view.KeyEvent
-import android.view.View
-import android.view.WindowInsets
-import android.view.WindowManager
-import android.widget.PopupWindow
-import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.core.graphics.toColorInt
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.bridge.UiThreadUtil
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.views.textinput.ReactEditText
-import com.facebook.react.views.textinput.ReactTextInputManager
-import androidx.core.graphics.drawable.toDrawable
-import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsCompat
-import com.facebook.react.uimanager.PixelUtil.dpToPx
-
-class RCTInputCalculator : ReactTextInputManager() {
-
-  private var keyboardView: CustomKeyboardView? = null
-  private var calculatorHeight: Int = 290.dpToPx().toInt()
-  private var popup: PopupWindow? = null
-  private val animationDuration = 250L
-
-  private lateinit var editText: CalculatorEditText
-
-  override fun getName() = REACT_CLASS
-
-  companion object {
-    const val REACT_CLASS = "RCTInputCalculator"
-  }
-
-  @ReactProp(name = "value")
-  fun setValue(view: ReactEditText, value: String?) {
-    UiThreadUtil.runOnUiThread {
-      val e = view.editableText ?: run { view.setText(value ?: ""); return@runOnUiThread }
-      val newText = value ?: ""
-      if (e.toString() == newText) return@runOnUiThread
-
-      val wasFocused = view.hasFocus()
-      val atEnd = wasFocused && view.selectionStart == e.length && view.selectionEnd == e.length
-
-      e.replace(0, e.length, newText)
-
-      if (!wasFocused || atEnd) {
-        view.setSelection(newText.length)
-      }
-    }
-  }
-
-  @ReactProp(name = "keyboardColor")
-  fun setKeyboardColor(view: ReactEditText, color: String) {
-    keyboardView?.updateButtonColors(color.toColorInt())
-  }
-
-  @SuppressLint("ClickableViewAccessibility")
-  override fun createViewInstance(context: ThemedReactContext): ReactEditText {
-    editText = CalculatorEditText(context).apply {
-      showSoftInputOnFocus = false
-    }
-
-    keyboardView = CustomKeyboardView(context, editText).apply {
-      setBackgroundColor("#f2f2f6".toColorInt())
-      elevation = 24f
-    }
-
-    editText.onFocusListener = object : CalculatorEditText.OnFocusChangeListener {
-      override fun onFocusChange(view: CalculatorEditText, hasFocus: Boolean) {
-        UiThreadUtil.runOnUiThread {
-          if (hasFocus) {
-            showKeyboardPopup(view)
-          } else {
-            hideKeyboardPopup()
-          }
-          view.setOnKeyListener { v, keyCode, _ ->
-            if (keyCode == KeyEvent.KEYCODE_BACK && hasFocus) {
-              v.clearFocus()
-              true
-            } else false
-          }
-        }
-      }
-    }
-
-    return editText
-  }
-
-  override fun getCommandsMap(): Map<String, Int> {
-    return mapOf(
-      "blur" to 1,
-      "focus" to 2
-    )
-  }
-
-  override fun receiveCommand(reactEditText: ReactEditText, commandId: Int, args: ReadableArray?) {
-    when (commandId) {
-      1 -> blur()
-      2 -> focus()
-    }
-  }
-
-  private fun ensurePopup() {
-    if (popup != null) return
-    val content = keyboardView ?: return
-
-    popup = PopupWindow(
-      content,
-      WindowManager.LayoutParams.MATCH_PARENT,
-      calculatorHeight + bottomInsetFrom(editText.rootView),
-      false
-    ).apply {
-      setBackgroundDrawable(android.graphics.Color.TRANSPARENT.toDrawable())
-      isOutsideTouchable = false
-      isClippingEnabled = false
-      softInputMode = WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING
-      inputMethodMode = PopupWindow.INPUT_METHOD_NOT_NEEDED
-    }
-  }
-
-  private fun bottomInsetFrom(view: View): Int {
-    val insets = ViewCompat.getRootWindowInsets(view) ?: return 0
-    val mask = WindowInsetsCompat.Type.navigationBars() or WindowInsetsCompat.Type.displayCutout()
-    return insets.getInsets(mask).bottom
-  }
-
-  private fun showKeyboardPopup(anchor: View) {
-    ensurePopup()
-    val p = popup ?: return
-    if (p.isShowing) return
-
-    val root = keyboardView ?: return
-
-    root.translationY = calculatorHeight.toFloat()
-    p.showAtLocation(anchor.rootView, Gravity.BOTTOM or Gravity.START, 0, 0)
-
-    root.animate()
-      ?.translationY(0f)
-      ?.setDuration(animationDuration)
-      ?.start()
-  }
-
-  private fun hideKeyboardPopup() {
-    val p = popup ?: return
-    if (!p.isShowing) return
-    val root = keyboardView ?: return
-
-    root.animate()
-      .translationY(calculatorHeight.toFloat())
-      .setDuration(animationDuration)
-      .withEndAction {
-        try {
-          if (p.isShowing) p.dismiss()
-        } catch (_: Throwable) { }
-      }
-      .start()
-
-    popup = null
-  }
-
-  private fun focus() {
-    UiThreadUtil.runOnUiThread {
-      if (!editText.isFocused) editText.requestFocus()
-    }
-  }
-
-  private fun blur() {
-    UiThreadUtil.runOnUiThread {
-      if (editText.isFocused) editText.clearFocus()
-    }
-  }
-}