@momo-kits/calculator-keyboard 0.150.2-phuc.15 → 0.151.1-beta.2

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

@@ -4,70 +4,73 @@ import android.annotation.SuppressLint
 import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
+import android.text.Editable
 import android.view.Gravity
 import android.widget.Button
+import android.widget.EditText
 import android.widget.ImageButton
-import androidx.appcompat.app.AppCompatActivity
 import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.graphics.toColorInt
+import com.calculatorkeyboard.InputCalculatorViewManager.Companion.calculatorHeight
 import com.facebook.react.uimanager.ThemedReactContext
 import org.mariuszgromada.math.mxparser.Expression
-import androidx.core.graphics.toColorInt
-import com.calculatorkeyboard.RCTInputCalculator.Companion.calculatorHeight
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.uimanager.events.RCTEventEmitter
 
 @SuppressLint("SetTextI18n", "ViewConstructor")
 class CustomKeyboardView(
   context: ThemedReactContext,
   private val editText: CalculatorEditText
 ) : ConstraintLayout(context) {
-  private val keys = listOf(
+  private val numWithCTAKeys = listOf(
     listOf("1", "2", "3", "÷", "back"),
     listOf("4", "5", "6", "×", "="),
-    listOf("7", "8", "9", "-", "Xong"),
+    listOf("7", "8", "9", "-", "Tiếp"),
     listOf("000", "0", "+")
   )
-  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+")
+  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("=", "-", "×", "÷", "back", "+", "AC")
   private val separatorWidth = 8f
   private var specialButtonColor: Int = "#D8D8D8".toColorInt()
 
+  private var keyboardMode: String = "NumDefault"
+
   private var customKeyButton: Button? = null
   private var customKeyButtonBackground: Int = "#D8D8D8".toColorInt()
   private var customKeyButtonTextColor: Int = Color.BLACK
   private var customKeyButtonState: String = "default"
 
   init {
-    val activity = context.currentActivity as? AppCompatActivity
-    if (activity != null) {
-      val displayMetrics = resources.displayMetrics
-      val widthButton = (displayMetrics.widthPixels - separatorWidth * 2 - 4 * separatorWidth) / 5f
-      val heightButton = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
-
       isClickable = false
       isFocusable = false
       isFocusableInTouchMode = false
       clipToPadding = false
       clipChildren = false
-
-      renderUI(widthButton, heightButton)
-    }
-
   }
 
-  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
+    val keys = if (keyboardMode == "NumWithCTA") numWithCTAKeys else defaultKeys
     for ((rowIndex, row) in keys.withIndex()) {
       var xOffset = separatorWidth
       for ((colIndex, key) in row.withIndex()) {
-        val isCustomKey = rowIndex == 2 && colIndex == 4
+        val isMainKey = rowIndex == 2 && colIndex == 4
+        val isMainCTAKey = isMainKey && keyboardMode == "NumWithCTA"
         val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
-        val height = if (isCustomKey) buttonHeight * 2 + 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(), isCustomKey).also { b ->
-            if (isCustomKey) customKeyButton = b
+          createButton(key, xOffset, yOffset, width.toInt(), height.toInt(), isMainKey, isMainCTAKey).also { b ->
+            if (isMainCTAKey) customKeyButton = b
           }
         }
 
@@ -85,7 +88,8 @@ class CustomKeyboardView(
     yOffset: Float,
     buttonWidth: Int,
     buttonHeight: Int,
-    isCustomKey: Boolean
+    isMainKey: Boolean,
+    isMainCTAKey: Boolean
   ): Button {
     return Button(context).apply {
       val shapeInit = GradientDrawable().apply {
@@ -98,7 +102,7 @@ class CustomKeyboardView(
       background = shapeInit
       text = key
       setTypeface(typeface)
-      textSize = (if (isCustomKey) 18 else 24).toFloat()
+      textSize = (if (isMainCTAKey) 18 else 24).toFloat()
       setTextColor(Color.BLACK)
       stateListAnimator = null
       maxLines = 1
@@ -110,7 +114,7 @@ class CustomKeyboardView(
         constrainedWidth = false
       }
 
-      if (specialKeys.contains(key)) {
+      if (specialKeys.contains(key) || isMainKey) {
         background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
@@ -125,7 +129,7 @@ class CustomKeyboardView(
 
       translationX = xOffset.toInt().toFloat()
       translationY = yOffset.toInt().toFloat()
-      setOnClickListener { onKeyPress(key, isCustomKey) }
+      setOnClickListener { onKeyPress(key, isMainCTAKey) }
     }
   }
 
@@ -163,132 +167,192 @@ class CustomKeyboardView(
     }
   }
 
-  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 String.endsWithAny(vararg tails: String): Boolean =
+    tails.any { endsWith(it) }
+
+  private fun Editable.insertAtCaret(editText: EditText, s: String) {
+    insert(editText.selectionStart.coerceAtLeast(0), s)
   }
 
-  private fun onKeyPress(key: String, isCustomKey: Boolean) {
-    if (isCustomKey) {
-      emitCustomKey()
+  private fun onKeyPress(key: String, isMainCTAKey: Boolean) {
+    if (isMainCTAKey) {
+      Event.emitCustomKey(context, editText.id)
       return
     }
 
-    emitKeyPress(key)
+    Event.emitKeyPress(context, editText.id, key)
+
+    val text = editText.text ?: return
+    val plain = text.toString()
+    val isEmpty = plain.isEmpty()
+    val isJustZero = plain == "0"
+    val endsWithOperator = plain.endsWithAny(" + ", " - ", " × ", " ÷ ")
+    val endsWithSingleZeroAfterOp = plain.endsWith(" 0")
+
     when (key) {
+      "AC" -> clearText()
       "back" -> onBackSpace()
       "=" -> calculateResult()
-      "×", "+", "-", "÷" -> keyDidPress(" $key ")
-      else -> editText.text?.insert(editText.selectionStart, key)
+      "×", "+", "-", "÷" -> if (!text.isEmpty()) keyDidPress(" $key ")
+      "0", "000" -> {
+        when {
+          isEmpty -> {}
+          key == "000" && endsWithOperator -> text.insertAtCaret(editText, "0")
+          endsWithSingleZeroAfterOp || isJustZero -> {}
+          else -> text.insertAtCaret(editText, key)
+        }
+      }
+      else -> {
+        when {
+          isJustZero -> {
+            text.replace(0, 1, key)
+          }
+          endsWithSingleZeroAfterOp -> {
+            val i = text.length - 1
+            text.replace(i, i + 1, key)
+          }
+          else -> text.insertAtCaret(editText, key)
+        }
+      }
     }
+
+    reformatAndKeepSelection(editText)
   }
 
   private fun keyDidPress(key: String) {
-    println("Key pressed: $key")
-    editText.text?.replace(editText.selectionStart, editText.selectionEnd, key)
+    val editable = editText.text ?: return
+    val selStart = editText.selectionStart.coerceAtLeast(0)
+    val selEnd = editText.selectionEnd.coerceAtLeast(selStart)
+
+    if (selStart != selEnd) {
+      editable.replace(selStart, selEnd, key)
+      return
+    }
+
+    val s = editable.toString()
+    val ops3 = setOf(" + ", " - ", " × ", " ÷ ")
+
+    if (selStart >= 3 && ops3.contains(s.substring(selStart - 3, selStart))) {
+      editable.replace(selStart - 3, selStart, key)
+      return
+    }
+
+    editable.replace(selStart, selEnd, key)
+  }
+
+  private fun clearText() {
+    editText.text?.clear()
   }
 
   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 ops = setOf(" + ", " - ", " × ", " ÷ ")
+    val len = rawBefore.length
+
+    var delStart = (caretRaw - 1).coerceAtLeast(0)
+    var delEnd   = caretRaw
+
+    fun matches(start: Int, end: Int): Boolean {
+      if (start < 0 || end > len) return false
+      if (end - start != 3) return false
+      return ops.contains(rawBefore.substring(start, end))
     }
-  }
 
-  private fun calculateResult() {
-    val text = editText?.text.toString().replace("×", "*").replace("÷", "/")
-    val pattern = "^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$"
-    val regex = Regex(pattern)
-    if (regex.matches(text)) {
-      try {
-        val result = eval(text).toString()
-        editText.setTextKeepState(result)
-      } catch (e: Exception) {
-        e.printStackTrace()
-      }
-    } else {
-      println("Invalid expression")
+    if (matches(caretRaw - 3, caretRaw)) {
+      delStart = caretRaw - 3
+      delEnd   = caretRaw
+    }
+    else if (matches(caretRaw - 2, caretRaw + 1)) {
+      delStart = caretRaw - 2
+      delEnd   = caretRaw + 1
+    }
+    else if (matches(caretRaw - 1, caretRaw + 2)) {
+      delStart = caretRaw - 1
+      delEnd   = caretRaw + 2
     }
-  }
 
-  private fun eval(str: String): Long? {
-    val e = Expression(str)
-    println("Expression: $e")
-    return if (e.checkSyntax()) {
-      e.calculate().toLong()
-    } else {
-      null
+    val rawAfter = buildString(len - (delEnd - delStart)) {
+      append(rawBefore, 0, delStart)
+      append(rawBefore, delEnd, len)
     }
+
+    val formattedAfter = formatNumberGroups(rawAfter)
+    editText.setText(formattedAfter)
+
+    val newCaretFmt = rawCaretToFormatted(delStart, formattedAfter)
+    editText.setSelection(newCaretFmt.coerceIn(0, formattedAfter.length))
+  }
+
+  private fun calculateResult(){
+    val result = editText.calculate()
+    if (result == "invalid") return
+    editText.setTextKeepState(formatNumberGroups(result))
+    editText.setSelection(editText.text?.length ?: 0)
   }
 
-  private fun emitKeyPress(key: String) {
-    val reactContext = context as ThemedReactContext
-    val params = Arguments.createMap().apply {
-      putString("key", key)
+  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()
     }
-    reactContext.getJSModule(RCTEventEmitter::class.java)
-      .receiveEvent(editText.id, "onKeyPress", params)
   }
 
-  private fun emitCustomKey() {
-    val reactContext = context as ThemedReactContext
-    reactContext.getJSModule(RCTEventEmitter::class.java)
-      .receiveEvent(editText.id, "onCustomKeyEvent", null)
+
+  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 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
   }
 
   fun setCustomKeyText(text: String) {
     customKeyButton?.text = text
   }
 
+  fun setMode(mode: String) {
+    keyboardMode = mode
+    renderUI()
+  }
+
   fun setCustomKeyBackground(background: Int) {
     customKeyButtonBackground = background
-    updateCustomKeyUI(background, customKeyButtonTextColor, customKeyButtonState)
+    updateCustomKeyUI(background, customKeyButtonTextColor)
   }
 
   fun setCustomKeyTextColor(textColor: Int) {
     customKeyButtonTextColor = textColor
-    updateCustomKeyUI(customKeyButtonBackground, textColor, customKeyButtonState)
+    updateCustomKeyUI(customKeyButtonBackground, textColor)
   }
 
 
   fun setCustomKeyState(state: String) {
     customKeyButtonState = state
     customKeyButton?.isEnabled = state != "disable"
-    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor, state)
+    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor)
   }
 
-  private fun updateCustomKeyUI(background: Int, textColor: Int, state: String){
-
+  private fun updateCustomKeyUI(background: Int, textColor: Int){
     customKeyButton?.background = GradientDrawable().apply {
       shape = GradientDrawable.RECTANGLE
       cornerRadius = 24f
@@ -297,5 +361,75 @@ class CustomKeyboardView(
     customKeyButton?.setTextColor(textColor)
   }
 
+  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 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
+  }
+
+  companion object {
+    fun CalculatorEditText.calculate() : String {
+      val invalid = "invalid"
+      val raw = this.text?.toString().orEmpty()
+      val normalized = raw.replace(".", "")
+        .replace("×", "*")
+        .replace("÷", "/")
+
+      val pattern = "^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$"
+      if (Regex(pattern).matches(normalized)) {
+        try {
+          val result = eval(normalized)?.toString() ?: return invalid
+          return result
+        } catch (_: Exception) { return invalid }
+      } else {
+        return invalid
+      }
+    }
+    private fun eval(str: String): Long? {
+      val e = Expression(str)
+      println("Expression: $e")
+      return if (e.checkSyntax()) {
+        e.calculate().toLong()
+      } else {
+        null
+      }
+    }
+  }
 }

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

@@ -0,0 +1,129 @@
+package com.calculatorkeyboard
+
+import android.content.Context
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.UIManagerHelper
+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<OnKeyPressEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onKeyPress"
+
+  override fun getEventData() = payload
+}
+
+class OnResultEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: WritableMap
+) : Event<OnResultEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onResult"
+
+  override fun getEventData() = payload
+}
+
+class OnFocusEvent(
+  surfaceId: Int,
+  viewId: Int
+) : Event<OnFocusEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onFocus"
+
+  override fun getEventData() = null
+}
+
+class OnBlurEvent(
+  surfaceId: Int,
+  viewId: Int
+) : Event<OnBlurEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onBlur"
+
+  override fun getEventData() = null
+}
+
+class OnCustomKeyPressEvent(
+  surfaceId: Int,
+  viewId: Int
+) : Event<OnCustomKeyPressEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onCustomKeyEvent"
+
+  override fun getEventData() = null
+}
+
+object Event {
+  fun emitKeyPress(context: Context, tag: Int, key: String) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, tag)
+    val payload =
+      Arguments.createMap().apply {
+        putString("key", key)
+      }
+    val event = OnKeyPressEvent(surfaceId, tag, payload)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  fun emitCustomKey(context: Context, tag: Int) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, tag)
+
+    val event = OnCustomKeyPressEvent(surfaceId, tag)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  fun emitOnChange(context: Context, tag: Int, text: String) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, tag)
+    val payload =
+      Arguments.createMap().apply {
+        putString("text", text)
+      }
+    val event = OnChangeEvent(surfaceId, tag, payload)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  fun emitOnBlurFocus(context: Context, tag: Int, isFocus: Boolean) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, tag)
+
+    val event = if (isFocus) OnFocusEvent(surfaceId, tag) else OnBlurEvent(surfaceId, tag)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  fun emitOnResult(context: Context, tag: Int, result: String) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, tag)
+    val payload =
+      Arguments.createMap().apply {
+        putString("result", result)
+      }
+    val event = OnResultEvent(surfaceId, tag, payload)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+}
+
+
+