@momo-kits/calculator-keyboard 0.150.1-rn80.8 → 0.150.2-beta-sp.1

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

@@ -1,46 +1,71 @@
 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")
   fun setValue(view: ReactEditText, value: String?) {
-//    view.setText(value)
+    UiThreadUtil.runOnUiThread {
+      val e = view.editableText ?: run { view.setText(value ?: ""); return@runOnUiThread }
+      val newText = value ?: ""
+      if (e.toString() == newText) return@runOnUiThread
+
+      val wasFocused = view.hasFocus()
+      val atEnd = wasFocused && view.selectionStart == e.length && view.selectionEnd == e.length
+      e.replace(0, e.length, newText)
+      if (!wasFocused || atEnd) view.setSelection(newText.length)
+    }
+  }
+
+  @ReactProp(name = "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")
@@ -50,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 {
@@ -59,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)
           }
         }
       }
@@ -80,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

@@ -53,6 +53,11 @@ RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
 RCT_EXPORT_SHADOW_PROPERTY(text, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(placeholder, NSString)
 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)
 {
@@ -71,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

@@ -6,34 +6,87 @@ class RCTInputCalculator: RCTBaseTextInputViewManager {
   override func view() -> UIView! {
     return InputCalculator(bridge: bridge)
   }
-  
+
   override static func requiresMainQueueSetup() -> Bool {
     return true
   }
-  
+
 }
 
 class InputCalculator: RCTSinglelineTextInputView {
   var bridge: RCTBridge?
   var keyboardView: CalculatorKeyboardView?
+
+  @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 value: 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?([:])  }
+
+  @objc var value: String = "" {
+    didSet {
+        guard let tf = backedTextInputView as? UITextField else { return }
+        let old = tf.text ?? ""
+        if old == value { return }
+
+        let isFirstResponder = tf.isFirstResponder
+        let atEnd = isFirstResponder && tf.offset(from: tf.beginningOfDocument, to: tf.selectedTextRange?.start ?? tf.endOfDocument) == old.count
+        tf.text = value
+        if !isFirstResponder || atEnd,
+           let end = tf.position(from: tf.beginningOfDocument, offset: value.count) {
+            tf.selectedTextRange = tf.textRange(from: end, to: end)
+        }
+    }
+  }
+
   @objc var keyboardColor: UIColor = UIColor(hex: "#d9d9d9") {
     didSet {
       self.keyboardView?.setKeyboardColor(keyboardColor)
     }
   }
-  
+
+
   override init(bridge: RCTBridge) {
     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
     backedTextInputView.inputView?.reloadInputViews()
+
+    NotificationCenter.default.addObserver(
+        self,
+        selector: #selector(beginEditingInput(_:)),
+        name: UITextField.textDidBeginEditingNotification,
+        object: backedTextInputView
+    )
+    NotificationCenter.default.addObserver(
+        self,
+        selector: #selector(endEditingInput(_:)),
+        name: UITextField.textDidEndEditingNotification,
+        object: backedTextInputView
+    )
+
   }
     func getbottomInset() -> CGFloat {
       let window = UIApplication.shared.windows.first?.rootViewController?.view
@@ -44,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 {
@@ -72,23 +118,24 @@ class InputCalculator: RCTSinglelineTextInputView {
       bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "back", eventCount: 1)
     }
   }
-  
+
   func calculateResult() {
     guard let textField = backedTextInputView as? UITextField,
           let text = textField.text?.replacingOccurrences(of: "×", with: "*").replacingOccurrences(of: "÷", with: "/")
     else {
       return
     }
-    
+
     let pattern = "^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$"
     let regex = try? NSRegularExpression(pattern: pattern)
     let range = NSRange(location: 0, length: text.utf16.count)
-    
+
     if regex?.firstMatch(in: text, options: [], range: range) != nil {
       let expression = NSExpression(format: text)
       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)
         }
@@ -99,5 +146,13 @@ class InputCalculator: RCTSinglelineTextInputView {
     }
   }
   
+  func emitCustomKey() {
+    onCustomKeyEvent?([:])
+  }
+  
+  func emitKeyPress(_ key: String) {
+    onKeyPress?(["key": key])
+  }
+
 }