@momo-kits/calculator-keyboard 0.150.2-beta.2 → 0.150.2-beta.20-sp.1

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(InputCalculatorManager())
   }
 }

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

@@ -7,55 +7,71 @@ 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.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(
-    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 +88,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 +102,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 +114,7 @@ class CustomKeyboardView(
         constrainedWidth = false
       }
 
-      if (specialKeys.contains(key)) {
+      if (specialKeys.contains(key) || isMainKey) {
         background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
@@ -104,10 +123,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,11 +154,16 @@ 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) }
     }
   }
 
@@ -172,25 +199,19 @@ class CustomKeyboardView(
     }
   }
 
-  private fun onKeyPress(key: String) {
-    when (key) {
-      "AC" -> {
-        clearText()
-      }
-
-      "back" -> {
-        onBackSpace()
-      }
-
-      "=" -> {
-        calculateResult()
-      }
+  private fun onKeyPress(key: String, isMainCTAKey: Boolean) {
+    if (isMainCTAKey) {
+      emitCustomKey()
+      return
+    }
 
+    emitKeyPress(key)
+    when (key) {
+      "AC" -> clearText()
+      "back" -> onBackSpace()
+      "=" -> calculateResult()
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
-
-      else -> {
-        editText.text?.insert(editText.selectionStart, key)
-      }
+      else -> editText.text?.insert(editText.selectionStart, key)
     }
   }
 
@@ -239,4 +260,54 @@ class CustomKeyboardView(
     }
   }
 
+  private fun emitKeyPress(key: String) {
+    val reactContext = context as ThemedReactContext
+    val params = Arguments.createMap().apply {
+      putString("key", key)
+    }
+    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 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)
+  }
+
 }

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

@@ -0,0 +1,232 @@
+package com.calculatorkeyboard
+
+import android.annotation.SuppressLint
+import android.app.Activity
+import android.content.Context
+import android.content.ContextWrapper
+import android.util.Log
+import android.view.Gravity
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.doOnLayout
+import androidx.core.view.updatePadding
+import java.lang.ref.WeakReference
+import androidx.core.view.isNotEmpty
+
+internal class KeyboardOverlayHost {
+
+    private val tag = "KeyboardOverlayHost"
+
+    private var localRootRef: WeakReference<ViewGroup>? = null
+    private var containerRef: WeakReference<FrameLayout>? = null
+    private var paddingTargetRef: WeakReference<View>? = null
+
+    private var originalBottomPadding: Int = 0
+    private var isShowing = false
+
+    private class OverlayContainer(ctx: Context) : FrameLayout(ctx) {
+        override fun onInterceptTouchEvent(ev: MotionEvent): Boolean = false
+    }
+
+    fun show(anchorView: View, keyboardView: View, heightPx: Int) {
+        val localRoot = findLocalRoot(anchorView) ?: run {
+            Log.w(tag, "show: cannot find local root from anchorView")
+            return
+        }
+        val container = ensureContainer(localRoot, anchorView.context) ?: return
+
+        val paddingTarget = findPaddingTargetWithin(anchorView, localRoot)
+        paddingTargetRef = WeakReference(paddingTarget)
+        localRootRef = WeakReference(localRoot)
+
+        val bottomInset = (ViewCompat.getRootWindowInsets(container)
+            ?.getInsets(WindowInsetsCompat.Type.systemBars())?.bottom) ?: 0
+
+        val lp = FrameLayout.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            heightPx + bottomInset
+        ).apply { gravity = Gravity.BOTTOM }
+
+        if (keyboardView.parent !== container) {
+            container.removeAllViews()
+            container.addView(keyboardView, lp)
+        } else {
+            keyboardView.layoutParams = lp
+        }
+
+        keyboardView.isClickable = true
+        keyboardView.isFocusable = false
+        keyboardView.isFocusableInTouchMode = false
+        keyboardView.visibility = View.VISIBLE
+
+        if (!isShowing) originalBottomPadding = paddingTarget.paddingBottom
+        paddingTarget.updatePadding(bottom = heightPx)
+
+        container.visibility = View.VISIBLE
+        container.bringToFront()
+        container.translationZ = 10000f
+        container.elevation = 10000f
+        localRoot.post { container.bringToFront() }
+
+        keyboardView.animate().cancel()
+        keyboardView.post {
+            container.bringToFront()
+            keyboardView.doOnLayout { child ->
+                val h = child.height.takeIf { it > 0 } ?: heightPx
+                child.translationY = h.toFloat()
+                child.animate()
+                    .translationY(0f)
+                    .setDuration(250L)
+                    .withStartAction {
+                        isShowing = true
+                        child.setLayerType(View.LAYER_TYPE_HARDWARE, null)
+                        container.bringToFront()
+                    }
+                    .withEndAction {
+                        child.setLayerType(View.LAYER_TYPE_NONE, null)
+                    }
+                    .start()
+            }
+        }
+    }
+
+    fun hide() {
+        val container = containerRef?.get() ?: return
+        val localRoot = localRootRef?.get() ?: return
+        val paddingTarget = paddingTargetRef?.get() ?: localRoot
+
+        val child = if (container.isNotEmpty())
+            container.getChildAt(container.childCount - 1) else null
+
+        if (child == null) {
+            paddingTarget.updatePadding(bottom = originalBottomPadding)
+            isShowing = false
+            return
+        }
+
+        child.animate().cancel()
+        val h = child.height.takeIf { it > 0 } ?: (child.measuredHeight.takeIf { it > 0 } ?: 0)
+        if (h == 0) {
+            container.removeAllViews()
+            paddingTarget.updatePadding(bottom = originalBottomPadding)
+            isShowing = false
+            return
+        }
+
+        child.animate()
+            .translationY(h.toFloat())
+            .setDuration(250L)
+            .withEndAction {
+                container.removeAllViews()
+                paddingTarget.updatePadding(bottom = originalBottomPadding)
+                isShowing = false
+            }
+            .start()
+    }
+
+    fun detach() {
+        containerRef?.get()?.let { (it.parent as? ViewGroup)?.removeView(it) }
+        containerRef = null
+        localRootRef = null
+        paddingTargetRef = null
+        isShowing = false
+        originalBottomPadding = 0
+    }
+
+    private fun findLocalRoot(anchor: View): ViewGroup? {
+        var cur: View? = anchor
+
+        while (cur != null) {
+            if (cur is ViewGroup && isReactRoot(cur)) {
+                return cur
+            }
+
+            val parent = cur.parent
+            if (parent is ViewGroup) {
+                val parentName = parent::class.java.simpleName
+                if (parentName.contains("FragmentContainerView")) {
+                    return (cur as? ViewGroup) ?: parent
+                }
+            }
+
+            cur = (cur.parent as? View)
+        }
+
+        return (anchor.rootView as? ViewGroup)
+    }
+
+    private fun isReactRoot(v: View): Boolean {
+        val n = v::class.java.simpleName
+        return n.contains("ReactRootView") ||
+                n.contains("RNGestureHandlerEnabledRootView") ||
+                (n.contains("React") && n.contains("Root"))
+    }
+
+    @SuppressLint("ClickableViewAccessibility")
+    private fun ensureContainer(localRoot: ViewGroup, ctx: Context): FrameLayout? {
+        var container = containerRef?.get()
+
+        if (container == null || container.parent !== localRoot) {
+            container?.let { (it.parent as? ViewGroup)?.removeView(it) }
+
+            container = OverlayContainer(ctx).apply {
+                layoutParams = ViewGroup.LayoutParams(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    ViewGroup.LayoutParams.MATCH_PARENT
+                )
+                isClickable = false
+                isFocusable = false
+                elevation = 10000f
+                translationZ = 10000f
+                visibility = View.VISIBLE
+            }
+
+            localRoot.addView(container)
+            container.bringToFront()
+            localRoot.requestLayout()
+            containerRef = WeakReference(container)
+        }
+
+        return container
+    }
+
+    private fun findPaddingTargetWithin(anchor: View, localRoot: ViewGroup): View {
+        fun dfs(g: ViewGroup): View? {
+            if (isReactRoot(g)) return g
+            for (i in 0 until g.childCount) {
+                val c = g.getChildAt(i)
+                if (c is ViewGroup) {
+                    val hit = dfs(c)
+                    if (hit != null) return hit
+                } else if (isReactRoot(c)) {
+                    return c
+                }
+            }
+            return null
+        }
+
+        dfs(localRoot)?.let { return it }
+
+        var cur: View? = anchor
+        var last: View = anchor
+        while (cur != null && cur !== localRoot) {
+            last = cur
+            cur = (cur.parent as? View)
+        }
+        return last as? ViewGroup ?: localRoot
+    }
+
+    @Suppress("unused")
+    private fun findActivityFrom(view: View): Activity? {
+        var ctx: Context? = view.context
+        while (ctx is ContextWrapper) {
+            if (ctx is Activity) return ctx
+            ctx = ctx.baseContext
+        }
+        return null
+    }
+}