@momo-kits/calculator-keyboard 0.150.2-beta80.1 → 0.150.2-phuc.15

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

@@ -9,12 +9,12 @@ 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(
@@ -22,22 +22,32 @@ class CustomKeyboardView(
   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")
+    listOf("1", "2", "3", "÷", "back"),
+    listOf("4", "5", "6", "×", "="),
+    listOf("7", "8", "9", "-", "Xong"),
+    listOf("000", "0", "+")
   )
-  private val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
+  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+")
   private val separatorWidth = 8f
   private var specialButtonColor: Int = "#D8D8D8".toColorInt()
 
+  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 - 3 * separatorWidth) / 4f
-      val heightButton = (290.dpToPx() - separatorWidth * 2 - 4 * separatorWidth) / 5
+      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)
     }
@@ -46,16 +56,19 @@ class CustomKeyboardView(
 
   private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
     var yOffset = separatorWidth
-    for ((_, row) in keys.withIndex()) {
+    for ((rowIndex, row) in keys.withIndex()) {
       var xOffset = separatorWidth
-      for ((_, key) in row.withIndex()) {
+      for ((colIndex, key) in row.withIndex()) {
+        val isCustomKey = rowIndex == 2 && colIndex == 4
         val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
-        val height = if (key == "=") buttonWidth + separatorWidth else buttonHeight
+        val height = if (isCustomKey) 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(), isCustomKey).also { b ->
+            if (isCustomKey) customKeyButton = b
+          }
         }
 
         addView(button)
@@ -72,8 +85,8 @@ class CustomKeyboardView(
     yOffset: Float,
     buttonWidth: Int,
     buttonHeight: Int,
+    isCustomKey: Boolean
   ): Button {
-    val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
     return Button(context).apply {
       val shapeInit = GradientDrawable().apply {
         shape = GradientDrawable.RECTANGLE
@@ -85,9 +98,11 @@ class CustomKeyboardView(
       background = shapeInit
       text = key
       setTypeface(typeface)
-      textSize = 24.toFloat()
+      textSize = (if (isCustomKey) 18 else 24).toFloat()
       setTextColor(Color.BLACK)
       stateListAnimator = null
+      maxLines = 1
+      isAllCaps = false
       layoutParams = LayoutParams(
         buttonWidth,
         buttonHeight
@@ -104,10 +119,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, isCustomKey) }
     }
   }
 
@@ -132,11 +150,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 +195,18 @@ class CustomKeyboardView(
     }
   }
 
-  private fun onKeyPress(key: String) {
-    when (key) {
-      "AC" -> {
-        clearText()
-      }
-
-      "back" -> {
-        onBackSpace()
-      }
-
-      "=" -> {
-        calculateResult()
-      }
+  private fun onKeyPress(key: String, isCustomKey: Boolean) {
+    if (isCustomKey) {
+      emitCustomKey()
+      return
+    }
 
+    emitKeyPress(key)
+    when (key) {
+      "back" -> onBackSpace()
+      "=" -> calculateResult()
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
-
-      else -> {
-        editText.text?.insert(editText.selectionStart, key)
-      }
+      else -> editText.text?.insert(editText.selectionStart, key)
     }
   }
 
@@ -199,10 +215,6 @@ class CustomKeyboardView(
     editText.text?.replace(editText.selectionStart, editText.selectionEnd, key)
   }
 
-  private fun clearText() {
-    editText.text?.clear()
-  }
-
   private fun onBackSpace() {
     val start = editText.selectionStart
     val end = editText.selectionEnd
@@ -239,4 +251,51 @@ 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 setCustomKeyBackground(background: Int) {
+    customKeyButtonBackground = background
+    updateCustomKeyUI(background, customKeyButtonTextColor, customKeyButtonState)
+  }
+
+  fun setCustomKeyTextColor(textColor: Int) {
+    customKeyButtonTextColor = textColor
+    updateCustomKeyUI(customKeyButtonBackground, textColor, customKeyButtonState)
+  }
+
+
+  fun setCustomKeyState(state: String) {
+    customKeyButtonState = state
+    customKeyButton?.isEnabled = state != "disable"
+    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor, state)
+  }
+
+  private fun updateCustomKeyUI(background: Int, textColor: Int, state: String){
+
+    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
+    }
+}

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

@@ -1,41 +1,37 @@
 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.content.Context
+import android.graphics.Color
 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 android.view.inputmethod.InputMethodManager
 import androidx.core.graphics.toColorInt
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.PixelUtil.dpToPx
 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
+  private lateinit var imm: InputMethodManager
+
+  private val overlayHost = KeyboardOverlayHost()
+
+  private var backListenerAttached = false
+  private var overlayShowing = false
 
   override fun getName() = REACT_CLASS
 
   companion object {
     const val REACT_CLASS = "RCTInputCalculator"
+    val calculatorHeight: Int = 240.dpToPx().toInt()
   }
 
   @ReactProp(name = "value")
@@ -47,15 +43,31 @@ class RCTInputCalculator : ReactTextInputManager() {
 
       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)
-      }
+      if (!wasFocused || atEnd) view.setSelection(newText.length)
     }
   }
 
+  @ReactProp(name = "customKeyText")
+  fun setCustomKeyText(view: ReactEditText, text: String?) {
+    keyboardView?.setCustomKeyText(text ?: "Xong")
+  }
+
+  @ReactProp(name = "customKeyBackground")
+  fun setCustomKeyBackground(view: ReactEditText, background: String?) {
+    keyboardView?.setCustomKeyBackground((background ?: "#d8d8d8").toColorInt())
+  }
+
+  @ReactProp(name = "customKeyTextColor")
+  fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
+    keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
+  }
+
+  @ReactProp(name = "customKeyState")
+  fun setCustomKeyState(view: ReactEditText, state: String?) {
+    keyboardView?.setCustomKeyState(state ?: "default")
+  }
+
   @ReactProp(name = "keyboardColor")
   fun setKeyboardColor(view: ReactEditText, color: String) {
     keyboardView?.updateButtonColors(color.toColorInt())
@@ -63,8 +75,32 @@ class RCTInputCalculator : ReactTextInputManager() {
 
   @SuppressLint("ClickableViewAccessibility")
   override fun createViewInstance(context: ThemedReactContext): ReactEditText {
+    imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+
     editText = CalculatorEditText(context).apply {
       showSoftInputOnFocus = false
+      isFocusableInTouchMode = true
+      setOnTouchListener { v, event ->
+        if (event.action == android.view.MotionEvent.ACTION_DOWN) {
+          showSoftInputOnFocus = false
+          ViewCompat.getWindowInsetsController(this)?.hide(WindowInsetsCompat.Type.ime())
+          imm.hideSoftInputFromWindow(windowToken, 0)
+
+          if (!isFocused) requestFocus()
+
+          val kb = keyboardView
+          if (kb != null && !overlayShowing) {
+            overlayHost.show(
+              anchorView = this,
+              keyboardView = kb,
+              heightPx = calculatorHeight
+            )
+            overlayShowing = true
+          }
+          return@setOnTouchListener true
+        }
+        false
+      }
     }
 
     keyboardView = CustomKeyboardView(context, editText).apply {
@@ -72,19 +108,34 @@ class RCTInputCalculator : ReactTextInputManager() {
       elevation = 24f
     }
 
+    if (!backListenerAttached) {
+      editText.setOnKeyListener { v, keyCode, event ->
+        if (keyCode == KeyEvent.KEYCODE_BACK && event.action == KeyEvent.ACTION_UP && v.hasFocus()) {
+          v.clearFocus()
+          true
+        } else false
+      }
+      backListenerAttached = true
+    }
+
     editText.onFocusListener = object : CalculatorEditText.OnFocusChangeListener {
       override fun onFocusChange(view: CalculatorEditText, hasFocus: Boolean) {
         UiThreadUtil.runOnUiThread {
           if (hasFocus) {
-            showKeyboardPopup(view)
+            disableSystemImeFor(view)
+            if (!overlayShowing) {
+              val kb = keyboardView ?: return@runOnUiThread
+              overlayHost.show(
+                anchorView = view,
+                keyboardView = kb,
+                heightPx = calculatorHeight
+              )
+              overlayShowing = true
+            }
           } else {
-            hideKeyboardPopup()
-          }
-          view.setOnKeyListener { v, keyCode, _ ->
-            if (keyCode == KeyEvent.KEYCODE_BACK && hasFocus) {
-              v.clearFocus()
-              true
-            } else false
+            overlayHost.hide()
+            overlayShowing = false
+            enableSystemImeFor(view)
           }
         }
       }
@@ -93,87 +144,54 @@ class RCTInputCalculator : ReactTextInputManager() {
     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()
-    }
+  override fun onDropViewInstance(view: ReactEditText) {
+    super.onDropViewInstance(view)
+    overlayHost.hide()
+    overlayHost.detach()
+    overlayShowing = false
+
   }
 
-  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 disableSystemImeFor(v: ReactEditText) {
+    v.showSoftInputOnFocus = false
+    if (android.os.Build.VERSION.SDK_INT >= 30) {
+      ViewCompat.getWindowInsetsController(v)?.hide(WindowInsetsCompat.Type.ime())
     }
+    imm.hideSoftInputFromWindow(v.windowToken, 0)
   }
 
-  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 enableSystemImeFor(v: ReactEditText) {
+    v.showSoftInputOnFocus = true
   }
 
-  private fun showKeyboardPopup(anchor: View) {
-    ensurePopup()
-    val p = popup ?: return
-    if (p.isShowing) return
+  override fun getCommandsMap(): Map<String, Int> = mapOf("blur" to 1, "focus" to 2)
 
-    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()
+  override fun receiveCommand(reactEditText: ReactEditText, commandId: Int, args: ReadableArray?) {
+    when (commandId) {
+      1 -> blur()
+      2 -> focus()
+    }
   }
 
-  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()
+  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomBubblingEventTypeConstants().toMutableMap()
+    base["onKeyPress"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onKeyPress"))
+    return base
+  }
 
-    popup = null
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomDirectEventTypeConstants().toMutableMap()
+    base["onCustomKeyEvent"] = mapOf("registrationName" to "onCustomKeyEvent")
+    return base
   }
 
   private fun focus() {
-    UiThreadUtil.runOnUiThread {
-      if (!editText.isFocused) editText.requestFocus()
-    }
+    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
   }
 
   private fun blur() {
-    UiThreadUtil.runOnUiThread {
-      if (editText.isFocused) editText.clearFocus()
-    }
+    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
   }
 }
+

package/ios/CalculatorKeyboardView.swift

@@ -8,14 +8,20 @@ class CalculatorKeyboardView: UIView {
   weak var input: InputCalculator?
   
   private let keys: [[String]] = [
-    ["AC", "÷", "×", "back"],
-    ["7", "8", "9", "-"],
-    ["4", "5", "6", "+"],
-    ["1", "2", "3", "="],
-    ["000", "0"]
+    ["1", "2", "3", "÷", "back"],
+    ["4", "5", "6", "×", "="],
+    ["7", "8", "9", "-", "Xong"],
+    ["000", "0", "+"],
   ]
   private let SEPARATOR_WIDTH: CGFloat = 4
-  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "AC", "back", "+"]
+  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "back", "+"]
+  
+  var customKeyText: String? { didSet { updateCustomKeyTitle() } }
+  var customKeyBackground: String? { didSet { updateCustomKeyBackground() } }
+  var customKeyTextColor: String? { didSet { updateCustomKeyBackground() } }
+  var customKeyState: String? { didSet { updateCustomKeyBackground() } }
+  private weak var customKeyButton: UIButton?
+
   
   override init(frame: CGRect) {
     super.init(frame: frame)
@@ -34,8 +40,8 @@ class CalculatorKeyboardView: UIView {
     self.subviews.forEach { $0.removeFromSuperview() }
     
     backgroundColor = UIColor(hex: "#f2f2f6")
-    let buttonWidth = (UIScreen.main.bounds.width - SEPARATOR_WIDTH * 2 - 3 * SEPARATOR_WIDTH) / 4
-    let buttonHeight: CGFloat = (290 - SEPARATOR_WIDTH * 2 - 4 * SEPARATOR_WIDTH) / 5
+    let buttonWidth = (UIScreen.main.bounds.width - SEPARATOR_WIDTH * 2 - 4 * SEPARATOR_WIDTH) / 5
+    let buttonHeight: CGFloat = (240 - SEPARATOR_WIDTH * 2 - 3 * SEPARATOR_WIDTH) / 4
     
     // Create a wrapper view
     let contentView = UIView()
@@ -52,19 +58,22 @@ class CalculatorKeyboardView: UIView {
     
     // Add buttons to the wrapper view
     var yOffset: CGFloat = 0
-    for row in keys {
+    for (rowIndex, row) in keys.enumerated() {
       var xOffset: CGFloat = 0
-      for key in row {
+      for (colIndex, key) in row.enumerated() {
+        let isCustomKey = colIndex == 4 && rowIndex == 2
         let button = UIButton(type: .system)
         button.backgroundColor = UIColor.white
         button.layer.cornerRadius = 8
-        button.setTitle(key, for: .normal)
+        let title = isCustomKey ? (customKeyText ?? key) : key
+        button.setTitle(title, for: .normal)
         button.setTitleColor(.black, for: .normal)
-        button.titleLabel?.font = UIFont.systemFont(ofSize: 24, weight: .medium)
+        button.titleLabel?.font = UIFont.systemFont(ofSize: isCustomKey ? 18 : 24, weight: .medium)
         button.nativeID = key
+        button.tag = isCustomKey ? 1 : 0
         
         var buttonFrame = CGRect(x: xOffset, y: yOffset, width: buttonWidth, height: buttonHeight)
-        if key == "=" {
+        if isCustomKey {
           buttonFrame.size.height = buttonHeight * 2 + SEPARATOR_WIDTH
         }
         if key == "000" {
@@ -85,6 +94,10 @@ class CalculatorKeyboardView: UIView {
           button.backgroundColor = color
         }
         
+        if isCustomKey {
+          self.customKeyButton = button
+        }
+        
         button.addTarget(self, action: #selector(keyPressed(_:)), for: .touchUpInside)
         contentView.addSubview(button)
         
@@ -96,12 +109,37 @@ class CalculatorKeyboardView: UIView {
     }
   }
   
+  private func updateCustomKeyTitle() {
+      guard let btn = customKeyButton, let title = customKeyText else { return }
+      btn.setTitle(title, for: .normal)
+      btn.setImage(nil, for: .normal)
+    }
+  
+  private func updateCustomKeyBackground() {
+    guard let btn = customKeyButton,
+            let background = customKeyBackground,
+            let textColor = customKeyTextColor,
+            let state = customKeyState else { return }
+    
+   
+    
+    btn.isEnabled = state != "disable"
+    btn.backgroundColor =  UIColor(hex: background)
+    btn.setTitleColor(UIColor(hex: textColor), for: .normal)
+
+  }
+
   
   @objc private func keyPressed(_ sender: UIButton) {
     guard let key = sender.nativeID else { return }
+    let isCustomKey = sender.tag == 1
+    if (isCustomKey) {
+      input?.emitCustomKey()
+      return
+    }
+    
+    input?.emitKeyPress(key)
     switch key {
-    case "AC":
-      input?.clearText()
     case "back":
       input?.onBackSpace()
     case "=":

package/ios/InputCalculator.m

@@ -56,6 +56,8 @@ RCT_EXPORT_SHADOW_PROPERTY(onContentSizeChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(value, NSString)
 RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKeyPress, RCTBubblingEventBlock) 
+RCT_EXPORT_VIEW_PROPERTY(onCustomKeyEvent, RCTDirectEventBlock)
 
 RCT_EXPORT_METHOD(focus : (nonnull NSNumber *)viewTag)
 {
@@ -74,6 +76,10 @@ RCT_EXPORT_METHOD(blur : (nonnull NSNumber *)viewTag)
 }
 
 RCT_EXPORT_VIEW_PROPERTY(keyboardColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(customKeyText, NSString)
+RCT_EXPORT_VIEW_PROPERTY(customKeyBackground, NSString)
+RCT_EXPORT_VIEW_PROPERTY(customKeyTextColor, NSString)
+RCT_EXPORT_VIEW_PROPERTY(customKeyState, NSString)
 
 @end
 

package/ios/InputCalculator.swift

@@ -19,6 +19,24 @@ class InputCalculator: RCTSinglelineTextInputView {
 
   @objc var onFocus: RCTBubblingEventBlock?
   @objc var onBlur:  RCTBubblingEventBlock?
+  @objc var onKeyPress: RCTBubblingEventBlock?
+  @objc var onCustomKeyEvent: RCTDirectEventBlock?
+
+  @objc var customKeyText: String? {
+    didSet { keyboardView?.customKeyText = customKeyText as String? }
+  }
+  
+  @objc var customKeyBackground: String? {
+    didSet { keyboardView?.customKeyBackground = customKeyBackground }
+  }
+  
+  @objc var customKeyTextColor: String? {
+    didSet { keyboardView?.customKeyTextColor = customKeyTextColor }
+  }
+  
+  @objc var customKeyState: String? {
+    didSet { keyboardView?.customKeyState = customKeyState }
+  }
 
   @objc func beginEditingInput(_ note: Notification) { onFocus?([:]) }
   @objc func endEditingInput(_ note: Notification)   { onBlur?([:])  }
@@ -50,7 +68,7 @@ class InputCalculator: RCTSinglelineTextInputView {
     super.init(bridge: bridge)
     self.bridge = bridge
     self.keyboardView = CalculatorKeyboardView()
-    self.keyboardView!.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 290 + getbottomInset())
+    self.keyboardView!.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 240 + getbottomInset())
     self.keyboardView!.input = self
 
     backedTextInputView.inputView = self.keyboardView
@@ -79,19 +97,12 @@ class InputCalculator: RCTSinglelineTextInputView {
   func keyDidPress(_ key: String) {
     backedTextInputView.insertText(key)
     value += key
+        
     if let bridge = bridge {
       bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "\(key)", eventCount: 1)
     }
   }
 
-  func clearText() {
-    value = ""
-    (backedTextInputView as? UITextField)?.text = ""
-    if let bridge = bridge {
-      bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "clear", eventCount: 1)
-    }
-  }
-
   func onBackSpace() {
     value = value.dropLast().description
     DispatchQueue.main.async {
@@ -102,7 +113,7 @@ class InputCalculator: RCTSinglelineTextInputView {
         self.backedTextInputView.replace(newRange, withText: "")
       }
     }
-
+    
     if let bridge = bridge {
       bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "back", eventCount: 1)
     }
@@ -124,6 +135,7 @@ class InputCalculator: RCTSinglelineTextInputView {
       if let result = expression.expressionValue(with: nil, context: nil) as? NSNumber {
         textField.text = result.stringValue
         value = result.stringValue
+                
         if let bridge = bridge {
           bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "=", eventCount: 1)
         }
@@ -133,6 +145,14 @@ class InputCalculator: RCTSinglelineTextInputView {
       print("Invalid expression")
     }
   }
+  
+  func emitCustomKey() {
+    onCustomKeyEvent?([:])
+  }
+  
+  func emitKeyPress(_ key: String) {
+    onKeyPress?(["key": key])
+  }
 
 }
 

package/lib/commonjs/index.js

@@ -10,7 +10,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NAME = 'RCTInputCalculator';
 const NativeInput = (0, _reactNative.requireNativeComponent)(NAME);
-const InputCalculator = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const InputCalculator = /*#__PURE__*/_react.default.forwardRef(({
+  customKeyBackground = 'default',
+  keyboardColor = '',
+  customKeyText,
+  onKeyPress,
+  customKeyState = 'default',
+  onCustomKeyEvent,
+  ...props
+}, ref) => {
   const nativeRef = _react.default.useRef(null);
   const _onChange = event => {
     const currentText = event.nativeEvent.text;
@@ -18,6 +26,16 @@ const InputCalculator = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     props.onChangeText && props.onChangeText(currentText);
   };
   const text = props.text ?? props.defaultValue ?? '';
+  let keyBackground = '#D8D8D8';
+  let textKeyColor = '#000000';
+  if (customKeyBackground === 'primary') {
+    keyBackground = '#EB2F96';
+    textKeyColor = '#FFFFFF';
+  }
+  if (customKeyState === 'disable') {
+    keyBackground = '#EBEBF2';
+    textKeyColor = '#FFFFFF';
+  }
   _react.default.useImperativeHandle(ref, () => ({
     focus() {
       const node = (0, _reactNative.findNodeHandle)(nativeRef.current);
@@ -40,8 +58,14 @@ const InputCalculator = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ...props,
     ref: nativeRef,
     onChange: _onChange,
+    onKeyPress: onKeyPress,
     value: text,
-    keybardColor: (0, _reactNative.processColor)(props.keyboardColor)
+    keybardColor: (0, _reactNative.processColor)(keyboardColor),
+    customKeyText: customKeyText,
+    customKeyBackground: keyBackground,
+    customKeyTextColor: textKeyColor,
+    customKeyState: customKeyState,
+    onCustomKeyEvent: onCustomKeyEvent
   });
 });
 var _default = exports.default = InputCalculator;

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_jsxRuntime","e","__esModule","default","NAME","NativeInput","requireNativeComponent","InputCalculator","React","forwardRef","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","useImperativeHandle","focus","node","findNodeHandle","current","config","UIManager","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","jsx","value","keybardColor","processColor","keyboardColor","_default","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAQsB,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGtB,MAAMG,IAAI,GAAG,oBAAoB;AACjC,MAAMC,WAAW,GAAG,IAAAC,mCAAsB,EAAMF,IAAI,CAAC;AAYrD,MAAMG,eAAe,gBAAGC,cAAK,CAACC,UAAU,CACtC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAMC,SAAS,GAAGJ,cAAK,CAACK,MAAM,CAAM,IAAI,CAAC;EAEzC,MAAMC,SAAS,GACbC,KAAqD,IAClD;IACH,MAAMC,WAAW,GAAGD,KAAK,CAACE,WAAW,CAACC,IAAI;IAC1CR,KAAK,CAACS,QAAQ,IAAIT,KAAK,CAACS,QAAQ,CAACJ,KAAK,CAAC;IACvCL,KAAK,CAACU,YAAY,IAAIV,KAAK,CAACU,YAAY,CAACJ,WAAW,CAAC;EACvD,CAAC;EAED,MAAME,IAAI,GAAGR,KAAK,CAACQ,IAAI,IAAIR,KAAK,CAACW,YAAY,IAAI,EAAE;EAEnDb,cAAK,CAACc,mBAAmB,CAACX,GAAG,EAAE,OAAO;IACpCY,KAAKA,CAAA,EAAG;MACN,MAAMC,IAAI,GAAG,IAAAC,2BAAc,EAACb,SAAS,CAACc,OAAO,CAAC;MAC9C,IAAI,CAACF,IAAI,EAAE;MACX,MAAMG,MAAM,GAAGC,sBAAS,CAACC,oBAAoB,CAACzB,IAAI,CAAC;MACnD,IAAIuB,MAAM,EAAEG,QAAQ,EAAEP,KAAK,IAAI,IAAI,EAAE;QACnCK,sBAAS,CAACG,0BAA0B,CAACP,IAAI,EAAEG,MAAM,CAACG,QAAQ,CAACP,KAAK,EAAE,EAAE,CAAC;MACvE;IACF,CAAC;IACDS,IAAIA,CAAA,EAAG;MACL,MAAMR,IAAI,GAAG,IAAAC,2BAAc,EAACb,SAAS,CAACc,OAAO,CAAC;MAC9C,IAAI,CAACF,IAAI,EAAE;MACX,MAAMG,MAAM,GAAGC,sBAAS,CAACC,oBAAoB,CAACzB,IAAI,CAAC;MACnD,IAAIuB,MAAM,EAAEG,QAAQ,EAAEE,IAAI,IAAI,IAAI,EAAE;QAClCJ,sBAAS,CAACG,0BAA0B,CAACP,IAAI,EAAEG,MAAM,CAACG,QAAQ,CAACE,IAAI,EAAE,EAAE,CAAC;MACtE;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACE,IAAAhC,WAAA,CAAAiC,GAAA,EAAC5B,WAAW;IAAA,GACNK,KAAK;IACTC,GAAG,EAAEC,SAAU;IACfO,QAAQ,EAAEL,SAAU;IACpBoB,KAAK,EAAEhB,IAAK;IACZiB,YAAY,EAAE,IAAAC,yBAAY,EAAC1B,KAAK,CAAC2B,aAAa;EAAE,CACjD,CAAC;AAEN,CACF,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEaI,eAAe","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_jsxRuntime","e","__esModule","default","NAME","NativeInput","requireNativeComponent","InputCalculator","React","forwardRef","customKeyBackground","keyboardColor","customKeyText","onKeyPress","customKeyState","onCustomKeyEvent","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","keyBackground","textKeyColor","useImperativeHandle","focus","node","findNodeHandle","current","config","UIManager","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","jsx","value","keybardColor","processColor","customKeyTextColor","_default","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASsB,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtB,MAAMG,IAAI,GAAG,oBAAoB;AACjC,MAAMC,WAAW,GAAG,IAAAC,mCAAsB,EAAMF,IAAI,CAAC;AAmBrD,MAAMG,eAAe,gBAAGC,cAAK,CAACC,UAAU,CAItC,CACE;EACEC,mBAAmB,GAAG,SAAS;EAC/BC,aAAa,GAAG,EAAE;EAClBC,aAAa;EACbC,UAAU;EACVC,cAAc,GAAG,SAAS;EAC1BC,gBAAgB;EAChB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,SAAS,GAAGV,cAAK,CAACW,MAAM,CAAM,IAAI,CAAC;EAEzC,MAAMC,SAAS,GACbC,KAAqD,IAClD;IACH,MAAMC,WAAW,GAAGD,KAAK,CAACE,WAAW,CAACC,IAAI;IAC1CR,KAAK,CAACS,QAAQ,IAAIT,KAAK,CAACS,QAAQ,CAACJ,KAAK,CAAC;IACvCL,KAAK,CAACU,YAAY,IAAIV,KAAK,CAACU,YAAY,CAACJ,WAAW,CAAC;EACvD,CAAC;EAED,MAAME,IAAI,GAAGR,KAAK,CAACQ,IAAI,IAAIR,KAAK,CAACW,YAAY,IAAI,EAAE;EACnD,IAAIC,aAAa,GAAG,SAAS;EAC7B,IAAIC,YAAY,GAAG,SAAS;EAE5B,IAAInB,mBAAmB,KAAK,SAAS,EAAE;IACrCkB,aAAa,GAAG,SAAS;IACzBC,YAAY,GAAG,SAAS;EAC1B;EAEA,IAAIf,cAAc,KAAK,SAAS,EAAE;IAChCc,aAAa,GAAG,SAAS;IACzBC,YAAY,GAAG,SAAS;EAC1B;EAEArB,cAAK,CAACsB,mBAAmB,CAACb,GAAG,EAAE,OAAO;IACpCc,KAAKA,CAAA,EAAG;MACN,MAAMC,IAAI,GAAG,IAAAC,2BAAc,EAACf,SAAS,CAACgB,OAAO,CAAC;MAC9C,IAAI,CAACF,IAAI,EAAE;MACX,MAAMG,MAAM,GAAGC,sBAAS,CAACC,oBAAoB,CAACjC,IAAI,CAAC;MACnD,IAAI+B,MAAM,EAAEG,QAAQ,EAAEP,KAAK,IAAI,IAAI,EAAE;QACnCK,sBAAS,CAACG,0BAA0B,CAACP,IAAI,EAAEG,MAAM,CAACG,QAAQ,CAACP,KAAK,EAAE,EAAE,CAAC;MACvE;IACF,CAAC;IACDS,IAAIA,CAAA,EAAG;MACL,MAAMR,IAAI,GAAG,IAAAC,2BAAc,EAACf,SAAS,CAACgB,OAAO,CAAC;MAC9C,IAAI,CAACF,IAAI,EAAE;MACX,MAAMG,MAAM,GAAGC,sBAAS,CAACC,oBAAoB,CAACjC,IAAI,CAAC;MACnD,IAAI+B,MAAM,EAAEG,QAAQ,EAAEE,IAAI,IAAI,IAAI,EAAE;QAClCJ,sBAAS,CAACG,0BAA0B,CAACP,IAAI,EAAEG,MAAM,CAACG,QAAQ,CAACE,IAAI,EAAE,EAAE,CAAC;MACtE;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACE,IAAAxC,WAAA,CAAAyC,GAAA,EAACpC,WAAW;IAAA,GACNW,KAAK;IACTC,GAAG,EAAEC,SAAU;IACfO,QAAQ,EAAEL,SAAU;IACpBP,UAAU,EAAEA,UAAW;IACvB6B,KAAK,EAAElB,IAAK;IACZmB,YAAY,EAAE,IAAAC,yBAAY,EAACjC,aAAa,CAAE;IAC1CC,aAAa,EAAEA,aAAc;IAC7BF,mBAAmB,EAAEkB,aAAc;IACnCiB,kBAAkB,EAAEhB,YAAa;IACjCf,cAAc,EAAEA,cAAe;IAC/BC,gBAAgB,EAAEA;EAAiB,CACpC,CAAC;AAEN,CACF,CAAC;AAAC,IAAA+B,QAAA,GAAAC,OAAA,CAAA5C,OAAA,GAEaI,eAAe","ignoreList":[]}

package/lib/module/index.js

@@ -1,12 +1,19 @@
 "use strict";
 
 import React from 'react';
-import { processColor, UIManager, findNodeHandle } from 'react-native';
-import { requireNativeComponent } from 'react-native';
+import { findNodeHandle, processColor, requireNativeComponent, UIManager } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NAME = 'RCTInputCalculator';
 const NativeInput = requireNativeComponent(NAME);
-const InputCalculator = /*#__PURE__*/React.forwardRef((props, ref) => {
+const InputCalculator = /*#__PURE__*/React.forwardRef(({
+  customKeyBackground = 'default',
+  keyboardColor = '',
+  customKeyText,
+  onKeyPress,
+  customKeyState = 'default',
+  onCustomKeyEvent,
+  ...props
+}, ref) => {
   const nativeRef = React.useRef(null);
   const _onChange = event => {
     const currentText = event.nativeEvent.text;
@@ -14,6 +21,16 @@ const InputCalculator = /*#__PURE__*/React.forwardRef((props, ref) => {
     props.onChangeText && props.onChangeText(currentText);
   };
   const text = props.text ?? props.defaultValue ?? '';
+  let keyBackground = '#D8D8D8';
+  let textKeyColor = '#000000';
+  if (customKeyBackground === 'primary') {
+    keyBackground = '#EB2F96';
+    textKeyColor = '#FFFFFF';
+  }
+  if (customKeyState === 'disable') {
+    keyBackground = '#EBEBF2';
+    textKeyColor = '#FFFFFF';
+  }
   React.useImperativeHandle(ref, () => ({
     focus() {
       const node = findNodeHandle(nativeRef.current);
@@ -36,8 +53,14 @@ const InputCalculator = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...props,
     ref: nativeRef,
     onChange: _onChange,
+    onKeyPress: onKeyPress,
     value: text,
-    keybardColor: processColor(props.keyboardColor)
+    keybardColor: processColor(keyboardColor),
+    customKeyText: customKeyText,
+    customKeyBackground: keyBackground,
+    customKeyTextColor: textKeyColor,
+    customKeyState: customKeyState,
+    onCustomKeyEvent: onCustomKeyEvent
   });
 });
 export default InputCalculator;

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","processColor","UIManager","findNodeHandle","requireNativeComponent","jsx","_jsx","NAME","NativeInput","InputCalculator","forwardRef","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","useImperativeHandle","focus","node","current","config","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","value","keybardColor","keyboardColor"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAKEC,YAAY,EACZC,SAAS,EACTC,cAAc,QACT,cAAc;AACrB,SAASC,sBAAsB,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtD,MAAMC,IAAI,GAAG,oBAAoB;AACjC,MAAMC,WAAW,GAAGJ,sBAAsB,CAAMG,IAAI,CAAC;AAYrD,MAAME,eAAe,gBAAGT,KAAK,CAACU,UAAU,CACtC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAMC,SAAS,GAAGb,KAAK,CAACc,MAAM,CAAM,IAAI,CAAC;EAEzC,MAAMC,SAAS,GACbC,KAAqD,IAClD;IACH,MAAMC,WAAW,GAAGD,KAAK,CAACE,WAAW,CAACC,IAAI;IAC1CR,KAAK,CAACS,QAAQ,IAAIT,KAAK,CAACS,QAAQ,CAACJ,KAAK,CAAC;IACvCL,KAAK,CAACU,YAAY,IAAIV,KAAK,CAACU,YAAY,CAACJ,WAAW,CAAC;EACvD,CAAC;EAED,MAAME,IAAI,GAAGR,KAAK,CAACQ,IAAI,IAAIR,KAAK,CAACW,YAAY,IAAI,EAAE;EAEnDtB,KAAK,CAACuB,mBAAmB,CAACX,GAAG,EAAE,OAAO;IACpCY,KAAKA,CAAA,EAAG;MACN,MAAMC,IAAI,GAAGtB,cAAc,CAACU,SAAS,CAACa,OAAO,CAAC;MAC9C,IAAI,CAACD,IAAI,EAAE;MACX,MAAME,MAAM,GAAGzB,SAAS,CAAC0B,oBAAoB,CAACrB,IAAI,CAAC;MACnD,IAAIoB,MAAM,EAAEE,QAAQ,EAAEL,KAAK,IAAI,IAAI,EAAE;QACnCtB,SAAS,CAAC4B,0BAA0B,CAACL,IAAI,EAAEE,MAAM,CAACE,QAAQ,CAACL,KAAK,EAAE,EAAE,CAAC;MACvE;IACF,CAAC;IACDO,IAAIA,CAAA,EAAG;MACL,MAAMN,IAAI,GAAGtB,cAAc,CAACU,SAAS,CAACa,OAAO,CAAC;MAC9C,IAAI,CAACD,IAAI,EAAE;MACX,MAAME,MAAM,GAAGzB,SAAS,CAAC0B,oBAAoB,CAACrB,IAAI,CAAC;MACnD,IAAIoB,MAAM,EAAEE,QAAQ,EAAEE,IAAI,IAAI,IAAI,EAAE;QAClC7B,SAAS,CAAC4B,0BAA0B,CAACL,IAAI,EAAEE,MAAM,CAACE,QAAQ,CAACE,IAAI,EAAE,EAAE,CAAC;MACtE;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACEzB,IAAA,CAACE,WAAW;IAAA,GACNG,KAAK;IACTC,GAAG,EAAEC,SAAU;IACfO,QAAQ,EAAEL,SAAU;IACpBiB,KAAK,EAAEb,IAAK;IACZc,YAAY,EAAEhC,YAAY,CAACU,KAAK,CAACuB,aAAa;EAAE,CACjD,CAAC;AAEN,CACF,CAAC;AAED,eAAezB,eAAe","ignoreList":[]}
+{"version":3,"names":["React","findNodeHandle","processColor","requireNativeComponent","UIManager","jsx","_jsx","NAME","NativeInput","InputCalculator","forwardRef","customKeyBackground","keyboardColor","customKeyText","onKeyPress","customKeyState","onCustomKeyEvent","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","keyBackground","textKeyColor","useImperativeHandle","focus","node","current","config","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","value","keybardColor","customKeyTextColor"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAEEC,cAAc,EAEdC,YAAY,EACZC,sBAAsB,EAGtBC,SAAS,QACJ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtB,MAAMC,IAAI,GAAG,oBAAoB;AACjC,MAAMC,WAAW,GAAGL,sBAAsB,CAAMI,IAAI,CAAC;AAmBrD,MAAME,eAAe,gBAAGT,KAAK,CAACU,UAAU,CAItC,CACE;EACEC,mBAAmB,GAAG,SAAS;EAC/BC,aAAa,GAAG,EAAE;EAClBC,aAAa;EACbC,UAAU;EACVC,cAAc,GAAG,SAAS;EAC1BC,gBAAgB;EAChB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,SAAS,GAAGnB,KAAK,CAACoB,MAAM,CAAM,IAAI,CAAC;EAEzC,MAAMC,SAAS,GACbC,KAAqD,IAClD;IACH,MAAMC,WAAW,GAAGD,KAAK,CAACE,WAAW,CAACC,IAAI;IAC1CR,KAAK,CAACS,QAAQ,IAAIT,KAAK,CAACS,QAAQ,CAACJ,KAAK,CAAC;IACvCL,KAAK,CAACU,YAAY,IAAIV,KAAK,CAACU,YAAY,CAACJ,WAAW,CAAC;EACvD,CAAC;EAED,MAAME,IAAI,GAAGR,KAAK,CAACQ,IAAI,IAAIR,KAAK,CAACW,YAAY,IAAI,EAAE;EACnD,IAAIC,aAAa,GAAG,SAAS;EAC7B,IAAIC,YAAY,GAAG,SAAS;EAE5B,IAAInB,mBAAmB,KAAK,SAAS,EAAE;IACrCkB,aAAa,GAAG,SAAS;IACzBC,YAAY,GAAG,SAAS;EAC1B;EAEA,IAAIf,cAAc,KAAK,SAAS,EAAE;IAChCc,aAAa,GAAG,SAAS;IACzBC,YAAY,GAAG,SAAS;EAC1B;EAEA9B,KAAK,CAAC+B,mBAAmB,CAACb,GAAG,EAAE,OAAO;IACpCc,KAAKA,CAAA,EAAG;MACN,MAAMC,IAAI,GAAGhC,cAAc,CAACkB,SAAS,CAACe,OAAO,CAAC;MAC9C,IAAI,CAACD,IAAI,EAAE;MACX,MAAME,MAAM,GAAG/B,SAAS,CAACgC,oBAAoB,CAAC7B,IAAI,CAAC;MACnD,IAAI4B,MAAM,EAAEE,QAAQ,EAAEL,KAAK,IAAI,IAAI,EAAE;QACnC5B,SAAS,CAACkC,0BAA0B,CAACL,IAAI,EAAEE,MAAM,CAACE,QAAQ,CAACL,KAAK,EAAE,EAAE,CAAC;MACvE;IACF,CAAC;IACDO,IAAIA,CAAA,EAAG;MACL,MAAMN,IAAI,GAAGhC,cAAc,CAACkB,SAAS,CAACe,OAAO,CAAC;MAC9C,IAAI,CAACD,IAAI,EAAE;MACX,MAAME,MAAM,GAAG/B,SAAS,CAACgC,oBAAoB,CAAC7B,IAAI,CAAC;MACnD,IAAI4B,MAAM,EAAEE,QAAQ,EAAEE,IAAI,IAAI,IAAI,EAAE;QAClCnC,SAAS,CAACkC,0BAA0B,CAACL,IAAI,EAAEE,MAAM,CAACE,QAAQ,CAACE,IAAI,EAAE,EAAE,CAAC;MACtE;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACEjC,IAAA,CAACE,WAAW;IAAA,GACNS,KAAK;IACTC,GAAG,EAAEC,SAAU;IACfO,QAAQ,EAAEL,SAAU;IACpBP,UAAU,EAAEA,UAAW;IACvB0B,KAAK,EAAEf,IAAK;IACZgB,YAAY,EAAEvC,YAAY,CAACU,aAAa,CAAE;IAC1CC,aAAa,EAAEA,aAAc;IAC7BF,mBAAmB,EAAEkB,aAAc;IACnCa,kBAAkB,EAAEZ,YAAa;IACjCf,cAAc,EAAEA,cAAe;IAC/BC,gBAAgB,EAAEA;EAAiB,CACpC,CAAC;AAEN,CACF,CAAC;AAED,eAAeP,eAAe","ignoreList":[]}

package/lib/typescript/commonjs/src/index.d.ts

@@ -1,8 +1,18 @@
 import React from 'react';
-import { type TextInputProps, type ColorValue } from 'react-native';
+import { type ColorValue, type TextInputProps } from 'react-native';
+type KeyPressEvent = {
+    nativeEvent: {
+        key: string;
+    };
+};
 interface InputCalculatorProps extends TextInputProps {
     text?: string | undefined;
     keyboardColor?: ColorValue;
+    onKeyPress?: (e: KeyPressEvent) => void;
+    customKeyText?: string | undefined;
+    customKeyBackground?: string | undefined;
+    customKeyState?: string | undefined;
+    onCustomKeyEvent?: () => void;
 }
 export type InputCalculatorRef = {
     focus: () => void;

package/lib/typescript/commonjs/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,UAAU,EAIhB,MAAM,cAAc,CAAC;AAMtB,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGA2CpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,UAAU,EAMf,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,KAAK,aAAa,GAAG;IAAE,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAEtD,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGA2EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/module/src/index.d.ts

@@ -1,8 +1,18 @@
 import React from 'react';
-import { type TextInputProps, type ColorValue } from 'react-native';
+import { type ColorValue, type TextInputProps } from 'react-native';
+type KeyPressEvent = {
+    nativeEvent: {
+        key: string;
+    };
+};
 interface InputCalculatorProps extends TextInputProps {
     text?: string | undefined;
     keyboardColor?: ColorValue;
+    onKeyPress?: (e: KeyPressEvent) => void;
+    customKeyText?: string | undefined;
+    customKeyBackground?: string | undefined;
+    customKeyState?: string | undefined;
+    onCustomKeyEvent?: () => void;
 }
 export type InputCalculatorRef = {
     focus: () => void;

package/lib/typescript/module/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,UAAU,EAIhB,MAAM,cAAc,CAAC;AAMtB,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGA2CpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,UAAU,EAMf,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,KAAK,aAAa,GAAG;IAAE,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAEtD,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGA2EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-beta80.1",
+    "version": "0.150.2-phuc.15",
     "description": "react native calculator keyboard",
     "source": "./src/index.tsx",
     "main": "./lib/commonjs/index.js",

package/src/index.tsx

@@ -1,21 +1,28 @@
 import React from 'react';
 import {
+  type ColorValue,
+  findNodeHandle,
   type NativeSyntheticEvent,
+  processColor,
+  requireNativeComponent,
   type TextInputChangeEventData,
   type TextInputProps,
-  type ColorValue,
-  processColor,
   UIManager,
-  findNodeHandle,
 } from 'react-native';
-import { requireNativeComponent } from 'react-native';
 
 const NAME = 'RCTInputCalculator';
 const NativeInput = requireNativeComponent<any>(NAME);
 
+type KeyPressEvent = { nativeEvent: { key: string } };
+
 interface InputCalculatorProps extends TextInputProps {
   text?: string | undefined;
   keyboardColor?: ColorValue;
+  onKeyPress?: (e: KeyPressEvent) => void;
+  customKeyText?: string | undefined;
+  customKeyBackground?: string | undefined;
+  customKeyState?: string | undefined;
+  onCustomKeyEvent?: () => void;
 }
 
 export type InputCalculatorRef = {
@@ -23,8 +30,22 @@ export type InputCalculatorRef = {
   blur: () => void;
 };
 
-const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProps>(
-  (props, ref) => {
+const InputCalculator = React.forwardRef<
+  InputCalculatorRef,
+  InputCalculatorProps
+>(
+  (
+    {
+      customKeyBackground = 'default',
+      keyboardColor = '',
+      customKeyText,
+      onKeyPress,
+      customKeyState = 'default',
+      onCustomKeyEvent,
+      ...props
+    },
+    ref
+  ) => {
     const nativeRef = React.useRef<any>(null);
 
     const _onChange = (
@@ -36,6 +57,18 @@ const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProp
     };
 
     const text = props.text ?? props.defaultValue ?? '';
+    let keyBackground = '#D8D8D8';
+    let textKeyColor = '#000000';
+
+    if (customKeyBackground === 'primary') {
+      keyBackground = '#EB2F96';
+      textKeyColor = '#FFFFFF';
+    }
+
+    if (customKeyState === 'disable') {
+      keyBackground = '#EBEBF2';
+      textKeyColor = '#FFFFFF';
+    }
 
     React.useImperativeHandle(ref, () => ({
       focus() {
@@ -61,8 +94,14 @@ const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProp
         {...props}
         ref={nativeRef}
         onChange={_onChange}
+        onKeyPress={onKeyPress}
         value={text}
-        keybardColor={processColor(props.keyboardColor)}
+        keybardColor={processColor(keyboardColor)}
+        customKeyText={customKeyText}
+        customKeyBackground={keyBackground}
+        customKeyTextColor={textKeyColor}
+        customKeyState={customKeyState}
+        onCustomKeyEvent={onCustomKeyEvent}
       />
     );
   }