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

package/README.md

@@ -10,15 +10,57 @@ npm install react-native-calculator-keyboard
 
 ## Usage
 
-
 ```js
-import { CalculatorKeyboardView } from "react-native-calculator-keyboard";
+import InputCalculator from '@momo-kits/calculator-keyboard';
 
 // ...
 
-<CalculatorKeyboardView color="tomato" />
+<InputCalculator
+  mode="NumDefault"
+  customKeyText="Next"
+  onCustomKeyEvent={() => console.log('Custom key pressed')}
+/>;
+```
+
+## Requirements
+
+**React Native 0.80+** with **Fabric (New Architecture) enabled**.
+
+This library is **pure Fabric** implementation with:
+
+- ✅ Zero RCTBridge dependencies
+- ✅ Native C++ ComponentView on iOS
+- ✅ Fabric ViewManager with codegen delegates on Android
+- ✅ All Props, Events, Commands auto-generated by codegen
+- ❌ No Paper (old architecture) support
+
+### Android Setup
+
+Add to your `gradle.properties`:
+
+```properties
+newArchEnabled=true
+```
+
+Then rebuild:
+
+```bash
+cd android && ./gradlew clean && cd ..
+npx react-native run-android
+```
+
+### iOS Setup
+
+**Required**: Set the environment variable before installing pods:
+
+```bash
+cd ios
+RCT_NEW_ARCH_ENABLED=1 pod install
+cd ..
+npx react-native run-ios
 ```
 
+**Note**: This library uses Fabric ComponentView (`.mm` files) and will not work without `RCT_NEW_ARCH_ENABLED=1`.
 
 ## Contributing
 

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

@@ -12,6 +12,6 @@ class CalculatorKeyboardPackage : ReactPackage {
   }
 
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-    return listOf(RCTInputCalculator())
+    return listOf(InputCalculatorViewManager())
   }
 }

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

@@ -1,61 +1,80 @@
 package com.calculatorkeyboard
 
 import android.annotation.SuppressLint
+import android.content.Context
 import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
 import android.view.Gravity
 import android.widget.Button
 import android.widget.ImageButton
-import androidx.appcompat.app.AppCompatActivity
 import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.core.graphics.ColorUtils
 import com.facebook.react.uimanager.ThemedReactContext
 import org.mariuszgromada.math.mxparser.Expression
 import androidx.core.graphics.toColorInt
-import com.facebook.react.uimanager.PixelUtil.dpToPx
-
+import com.calculatorkeyboard.InputCalculatorViewManager.Companion.calculatorHeight
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.RCTEventEmitter
 
 @SuppressLint("SetTextI18n", "ViewConstructor")
 class CustomKeyboardView(
   context: ThemedReactContext,
   private val editText: CalculatorEditText
 ) : ConstraintLayout(context) {
-  private val keys = listOf(
-    listOf("AC", "÷", "×", "back"),
-    listOf("7", "8", "9", "-"),
-    listOf("4", "5", "6", "+"),
-    listOf("1", "2", "3", "="),
-    listOf("000", "0")
+  private val numWithCTAKeys = listOf(
+    listOf("1", "2", "3", "÷", "back"),
+    listOf("4", "5", "6", "×", "="),
+    listOf("7", "8", "9", "-", "Tiếp"),
+    listOf("000", "0", "+")
+  )
+  private val defaultKeys = listOf(
+    listOf("1", "2", "3", "÷", "AC"),
+    listOf("4", "5", "6", "×", "back"),
+    listOf("7", "8", "9", "-", "="),
+    listOf("000", "0", "+")
   )
-  private val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
+  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+", "AC")
   private val separatorWidth = 8f
   private var specialButtonColor: Int = "#D8D8D8".toColorInt()
 
-  init {
-    val activity = context.currentActivity as? AppCompatActivity
-    if (activity != null) {
-      val displayMetrics = resources.displayMetrics
-      val widthButton = (displayMetrics.widthPixels - separatorWidth * 2 - 3 * separatorWidth) / 4f
-      val heightButton = (290.dpToPx() - separatorWidth * 2 - 4 * separatorWidth) / 5
+  private var keyboardMode: String = "NumDefault"
 
-      renderUI(widthButton, heightButton)
-    }
+  private var customKeyButton: Button? = null
+  private var customKeyButtonBackground: Int = "#D8D8D8".toColorInt()
+  private var customKeyButtonTextColor: Int = Color.BLACK
+  private var customKeyButtonState: String = "default"
 
+  init {
+      isClickable = false
+      isFocusable = false
+      isFocusableInTouchMode = false
+      clipToPadding = false
+      clipChildren = false
   }
 
-  private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
+  private fun renderUI() {
+    val displayMetrics = resources.displayMetrics
+    val buttonWidth = (displayMetrics.widthPixels - separatorWidth * 2 - 4 * separatorWidth) / 5f
+    val buttonHeight = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
+
     var yOffset = separatorWidth
-    for ((_, row) in keys.withIndex()) {
+    val keys = if (keyboardMode == "NumWithCTA") numWithCTAKeys else defaultKeys
+    for ((rowIndex, row) in keys.withIndex()) {
       var xOffset = separatorWidth
-      for ((_, key) in row.withIndex()) {
+      for ((colIndex, key) in row.withIndex()) {
+        val isMainKey = rowIndex == 2 && colIndex == 4
+        val isMainCTAKey = isMainKey && keyboardMode == "NumWithCTA"
         val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
-        val height = if (key == "=") buttonWidth + separatorWidth else buttonHeight
+        val height = if (isMainKey) buttonHeight * 2 + separatorWidth else buttonHeight
 
         val button = if (key == "back") {
           createImageButton(key, xOffset, yOffset, buttonWidth.toInt(), buttonHeight.toInt())
         } else {
-          createButton(key, xOffset, yOffset, width.toInt(), height.toInt())
+          createButton(key, xOffset, yOffset, width.toInt(), height.toInt(), isMainKey, isMainCTAKey).also { b ->
+            if (isMainCTAKey) customKeyButton = b
+          }
         }
 
         addView(button)
@@ -72,8 +91,9 @@ class CustomKeyboardView(
     yOffset: Float,
     buttonWidth: Int,
     buttonHeight: Int,
+    isMainKey: Boolean,
+    isMainCTAKey: Boolean
   ): Button {
-    val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
     return Button(context).apply {
       val shapeInit = GradientDrawable().apply {
         shape = GradientDrawable.RECTANGLE
@@ -85,9 +105,11 @@ class CustomKeyboardView(
       background = shapeInit
       text = key
       setTypeface(typeface)
-      textSize = 24.toFloat()
+      textSize = (if (isMainCTAKey) 18 else 24).toFloat()
       setTextColor(Color.BLACK)
       stateListAnimator = null
+      maxLines = 1
+      isAllCaps = false
       layoutParams = LayoutParams(
         buttonWidth,
         buttonHeight
@@ -95,7 +117,7 @@ class CustomKeyboardView(
         constrainedWidth = false
       }
 
-      if (specialKeys.contains(key)) {
+      if (specialKeys.contains(key) || isMainKey) {
         background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
@@ -104,10 +126,13 @@ class CustomKeyboardView(
         setTextColor(Color.BLACK)
       }
 
+      isClickable = true
+      isFocusable = false
+      isFocusableInTouchMode = false
 
       translationX = xOffset.toInt().toFloat()
       translationY = yOffset.toInt().toFloat()
-      setOnClickListener { onKeyPress(key) }
+      setOnClickListener { onKeyPress(key, isMainCTAKey) }
     }
   }
 
@@ -132,66 +157,35 @@ class CustomKeyboardView(
       ).apply {
         constrainedWidth = false
       }
+
+      isClickable = true
+      isFocusable = false
+      isFocusableInTouchMode = false
+
       translationX = xOffset
       translationY = yOffset
       setImageResource(android.R.drawable.ic_input_delete)
       setImageTintList(ColorStateList.valueOf(Color.BLACK))
-      setOnClickListener { onKeyPress(key) }
+      setOnClickListener { onKeyPress(key, false) }
     }
   }
 
-  fun updateButtonColors(color: Int) {
-    specialButtonColor = color
-    for (i in 0 until childCount) {
-      val child = getChildAt(i)
-      if (child is Button) {
-        val key = child.text.toString()
-        if (specialKeys.contains(key)) {
-          if (key == "=") {
-            child.background = GradientDrawable().apply {
-              shape = GradientDrawable.RECTANGLE
-              cornerRadius = 24f
-              setColor(specialButtonColor)
-            }
-          } else {
-            child.background = GradientDrawable().apply {
-              shape = GradientDrawable.RECTANGLE
-              cornerRadius = 24f
-              setColor(specialButtonColor)
-            }
-          }
-          child.setTextColor(Color.BLACK)
-        }
-      } else if (child is ImageButton) {
-        child.background = GradientDrawable().apply {
-          shape = GradientDrawable.RECTANGLE
-          cornerRadius = 24f
-          setColor(specialButtonColor)
-        }
-      }
+  private fun onKeyPress(key: String, isMainCTAKey: Boolean) {
+    if (isMainCTAKey) {
+      emitCustomKey(context)
+      return
     }
-  }
 
-  private fun onKeyPress(key: String) {
+    emitKeyPress(context, key)
     when (key) {
-      "AC" -> {
-        clearText()
-      }
-
-      "back" -> {
-        onBackSpace()
-      }
-
-      "=" -> {
-        calculateResult()
-      }
-
+      "AC" -> clearText()
+      "back" -> onBackSpace()
+      "=" -> calculateResult()
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
-
-      else -> {
-        editText.text?.insert(editText.selectionStart, key)
-      }
+      else -> editText.text?.insert(editText.selectionStart, key)
     }
+
+    reformatAndKeepSelection(editText)
   }
 
   private fun keyDidPress(key: String) {
@@ -204,26 +198,39 @@ class CustomKeyboardView(
   }
 
   private fun onBackSpace() {
-    val start = editText.selectionStart
-    val end = editText.selectionEnd
-    if (start > 0) {
-      val newText = end.let { editText.text?.replaceRange(start - 1, it, "") }
-      editText.setText(newText)
-      editText.setSelection(start - 1)
+    val formatted = editText.text?.toString().orEmpty()
+    val caretFmt  = editText.selectionStart.coerceAtLeast(0)
+
+    val rawBefore = stripGroupDots(formatted)
+    val caretRaw  = formattedCaretToRaw(formatted, caretFmt)
+
+    if (caretRaw <= 0) return
+
+    val rawAfter = buildString(rawBefore.length - 1) {
+      append(rawBefore, 0, caretRaw - 1)
+      append(rawBefore, caretRaw, rawBefore.length)
     }
+
+    val formattedAfter = formatNumberGroups(rawAfter)
+    editText.setText(formattedAfter)
+    val newCaretFmt = rawCaretToFormatted(caretRaw - 1, formattedAfter)
+    editText.setSelection(newCaretFmt.coerceIn(0, formattedAfter.length))
   }
 
+
   private fun calculateResult() {
-    val text = editText?.text.toString().replace("×", "*").replace("÷", "/")
+    val raw = editText.text?.toString().orEmpty()
+    val normalized = raw.replace(".", "")
+      .replace("×", "*")
+      .replace("÷", "/")
+
     val pattern = "^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$"
-    val regex = Regex(pattern)
-    if (regex.matches(text)) {
+    if (Regex(pattern).matches(normalized)) {
       try {
-        val result = eval(text).toString()
-        editText.setTextKeepState(result)
-      } catch (e: Exception) {
-        e.printStackTrace()
-      }
+        val result = eval(normalized)?.toString() ?: return
+        editText.setTextKeepState(formatNumberGroups(result))
+        editText.setSelection(editText.text?.length ?: 0)
+      } catch (_: Exception) { /* ignore */ }
     } else {
       println("Invalid expression")
     }
@@ -239,4 +246,132 @@ class CustomKeyboardView(
     }
   }
 
+  private fun emitKeyPress(context: Context, key: String) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, editText.id)
+    val payload =
+      Arguments.createMap().apply {
+        putString("key", key)
+      }
+    val event = OnKeyPressEvent(surfaceId, editText.id, payload)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  private fun emitCustomKey(context: Context) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, editText.id)
+
+    val event = OnCustomKeyPressEvent(surfaceId, editText.id)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  fun setCustomKeyText(text: String) {
+    customKeyButton?.text = text
+  }
+
+  fun setMode(mode: String) {
+    keyboardMode = mode
+    renderUI()
+  }
+
+  fun setCustomKeyBackground(background: Int) {
+    customKeyButtonBackground = background
+    updateCustomKeyUI(background, customKeyButtonTextColor)
+  }
+
+  fun setCustomKeyTextColor(textColor: Int) {
+    customKeyButtonTextColor = textColor
+    updateCustomKeyUI(customKeyButtonBackground, textColor)
+  }
+
+
+  fun setCustomKeyState(state: String) {
+    customKeyButtonState = state
+    customKeyButton?.isEnabled = state != "disable"
+    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor)
+  }
+
+  private fun updateCustomKeyUI(background: Int, textColor: Int){
+    customKeyButton?.background = GradientDrawable().apply {
+      shape = GradientDrawable.RECTANGLE
+      cornerRadius = 24f
+      setColor(background)
+    }
+    customKeyButton?.setTextColor(textColor)
+  }
+
+  private fun reformatAndKeepSelection(editText: CalculatorEditText) {
+    val formattedBefore = editText.text?.toString() ?: return
+    val caretFmtBefore = editText.selectionStart.coerceAtLeast(0)
+
+    val caretRaw = formattedCaretToRaw(formattedBefore, caretFmtBefore)
+
+    val formattedAfter = formatNumberGroups(formattedBefore)
+
+    if (formattedAfter != formattedBefore) {
+      editText.setText(formattedAfter)
+    }
+
+    val caretFmtAfter = rawCaretToFormatted(caretRaw, formattedAfter)
+    editText.setSelection(caretFmtAfter.coerceIn(0, formattedAfter.length))
+  }
+  private fun stripGroupDots(input: String): String {
+    val out = StringBuilder(input.length)
+    for (i in input.indices) {
+      val c = input[i]
+      if (c == '.' && isGroupDotAt(input, i)) {
+      } else {
+        out.append(c)
+      }
+    }
+    return out.toString()
+  }
+
+  private fun formatNumberGroups(input: String): String {
+    val noSep = stripGroupDots(input)
+    return Regex("\\d+").replace(noSep) { m ->
+      val s = m.value
+      val rev = s.reversed().chunked(3).joinToString(".")
+      rev.reversed()
+    }
+  }
+
+  private fun isGroupDotAt(s: String, i: Int): Boolean {
+    if (i < 0 || i >= s.length) return false
+    if (s[i] != '.') return false
+    val leftIsDigit  = i - 1 >= 0 && s[i - 1].isDigit()
+    val rightIsDigit = i + 1 < s.length && s[i + 1].isDigit()
+    return leftIsDigit && rightIsDigit
+  }
+
+  private fun formattedCaretToRaw(formatted: String, caretFmt: Int): Int {
+    var rawIdx = 0
+    var i = 0
+    while (i < caretFmt && i < formatted.length) {
+      val c = formatted[i]
+      if (!(c == '.' && isGroupDotAt(formatted, i))) {
+        rawIdx++
+      }
+      i++
+    }
+    return rawIdx
+  }
+
+  private fun rawCaretToFormatted(rawCaret: Int, formatted: String): Int {
+    var rawSeen = 0
+    var i = 0
+    while (i < formatted.length) {
+      val c = formatted[i]
+      if (!(c == '.' && isGroupDotAt(formatted, i))) {
+        if (rawSeen == rawCaret) return i
+        rawSeen++
+      }
+      i++
+    }
+    return formatted.length
+  }
 }

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

@@ -0,0 +1,36 @@
+package com.calculatorkeyboard
+
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnChangeEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: WritableMap
+) : Event<OnChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onChange"
+
+  override fun getEventData() = payload
+}
+
+class OnKeyPressEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: WritableMap
+) : Event<OnChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onKeyPress"
+
+  override fun getEventData() = payload
+}
+
+class OnCustomKeyPressEvent(
+  surfaceId: Int,
+  viewId: Int
+) : Event<OnChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onCustomKeyEvent"
+
+  override fun getEventData() = null
+}
+
+
+