@momo-kits/calculator-keyboard 0.112.1-rn76.76 → 0.112.1-rn80.1

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

@@ -1,6 +1,7 @@
 package com.calculatorkeyboard
 
 import android.annotation.SuppressLint
+import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
 import android.view.Gravity
@@ -11,11 +12,15 @@ 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
 
 
 @SuppressLint("SetTextI18n", "ViewConstructor")
-class CustomKeyboardView(context: ThemedReactContext, private val editText: CalculatorEditText) :
-  ConstraintLayout(context) {
+class CustomKeyboardView(
+  context: ThemedReactContext,
+  private val editText: CalculatorEditText
+) : ConstraintLayout(context) {
   private val keys = listOf(
     listOf("AC", "÷", "×", "back"),
     listOf("7", "8", "9", "-"),
@@ -25,21 +30,21 @@ class CustomKeyboardView(context: ThemedReactContext, private val editText: Calc
   )
   private val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
   private val separatorWidth = 8f
-  private var keyboardColor: Int = Color.parseColor("#F7ACD5")
+  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
 
-      renderUI(widthButton)
+      renderUI(widthButton, heightButton)
     }
 
   }
 
-  private fun renderUI(buttonWidth: Float) {
-    val buttonHeight = buttonWidth / 2
+  private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
     var yOffset = separatorWidth
     for ((_, row) in keys.withIndex()) {
       var xOffset = separatorWidth
@@ -91,19 +96,12 @@ class CustomKeyboardView(context: ThemedReactContext, private val editText: Calc
       }
 
       if (specialKeys.contains(key)) {
-        if (key == "=") {
-          background = GradientDrawable().apply {
-            shape = GradientDrawable.RECTANGLE
-            cornerRadius = 24f
-            setColor(Color.parseColor("#EB2F96"))
-          }
-        }
         background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
-          setColor(Color.parseColor("#F7ACD5"))
+          setColor(specialButtonColor)
         }
-        setTextColor(Color.WHITE)
+        setTextColor(Color.BLACK)
       }
 
 
@@ -124,7 +122,7 @@ class CustomKeyboardView(context: ThemedReactContext, private val editText: Calc
       val shapeInit = GradientDrawable().apply {
         shape = GradientDrawable.RECTANGLE
         cornerRadius = 24f
-        setColor(Color.parseColor("#F7ACD5"))
+        setColor(specialButtonColor)
       }
       background = shapeInit
       stateListAnimator = null
@@ -137,12 +135,13 @@ class CustomKeyboardView(context: ThemedReactContext, private val editText: Calc
       translationX = xOffset
       translationY = yOffset
       setImageResource(android.R.drawable.ic_input_delete)
+      setImageTintList(ColorStateList.valueOf(Color.BLACK))
       setOnClickListener { onKeyPress(key) }
     }
   }
 
   fun updateButtonColors(color: Int) {
-    keyboardColor = color
+    specialButtonColor = color
     for (i in 0 until childCount) {
       val child = getChildAt(i)
       if (child is Button) {
@@ -152,22 +151,22 @@ class CustomKeyboardView(context: ThemedReactContext, private val editText: Calc
             child.background = GradientDrawable().apply {
               shape = GradientDrawable.RECTANGLE
               cornerRadius = 24f
-              setColor(keyboardColor)
+              setColor(specialButtonColor)
             }
           } else {
             child.background = GradientDrawable().apply {
               shape = GradientDrawable.RECTANGLE
               cornerRadius = 24f
-              setColor(ColorUtils.setAlphaComponent(keyboardColor, 128))
+              setColor(specialButtonColor)
             }
           }
-          child.setTextColor(Color.WHITE)
+          child.setTextColor(Color.BLACK)
         }
       } else if (child is ImageButton) {
         child.background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
-          setColor(ColorUtils.setAlphaComponent(keyboardColor, 128))
+          setColor(specialButtonColor)
         }
       }
     }
@@ -188,6 +187,7 @@ class CustomKeyboardView(context: ThemedReactContext, private val editText: Calc
       }
 
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
+
       else -> {
         editText.text?.insert(editText.selectionStart, key)
       }

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

@@ -2,30 +2,35 @@ package com.calculatorkeyboard
 
 import android.annotation.SuppressLint
 import android.app.Activity
-import android.graphics.Color
 import android.graphics.PixelFormat
+import android.graphics.drawable.ColorDrawable
 import android.view.Gravity
 import android.view.KeyEvent
 import android.view.View
-import android.view.ViewGroup
+import android.view.WindowInsets
 import android.view.WindowManager
-import android.view.inputmethod.InputMethodManager
+import android.widget.PopupWindow
 import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.graphics.toColorInt
+import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.UiThreadUtil
 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 layout: ConstraintLayout? = null
   private var keyboardView: CustomKeyboardView? = null
-  private var calculatorHeight: Int = 0
-  private var addedWithWM = false
-  private val ANIM_DURATION = 250L
+  private var calculatorHeight: Int = 290.dpToPx().toInt()
+  private var popup: PopupWindow? = null
+  private val animationDuration = 250L
 
-  private var outsideOverlay: View? = null
+  private lateinit var editText: CalculatorEditText
 
   override fun getName() = REACT_CLASS
 
@@ -35,42 +40,32 @@ class RCTInputCalculator : ReactTextInputManager() {
 
   @ReactProp(name = "value")
   fun setValue(view: ReactEditText, value: String?) {
-    view.setText(value)
+//    view.setText(value)
   }
 
   @ReactProp(name = "keyboardColor")
   fun setKeyboardColor(view: ReactEditText, color: String) {
-    keyboardView?.updateButtonColors(Color.parseColor(color))
+    keyboardView?.updateButtonColors(color.toColorInt())
   }
 
   @SuppressLint("ClickableViewAccessibility")
   override fun createViewInstance(context: ThemedReactContext): ReactEditText {
-    val editText = CalculatorEditText(context)
-    editText.showSoftInputOnFocus = false
+    editText = CalculatorEditText(context).apply {
+      showSoftInputOnFocus = false
+    }
 
-    layout = ConstraintLayout(context)
     keyboardView = CustomKeyboardView(context, editText).apply {
-      setBackgroundColor(Color.parseColor("#f2f2f6"))
+      setBackgroundColor("#f2f2f6".toColorInt())
       elevation = 24f
     }
 
-    val dm = context.currentActivity!!.resources.displayMetrics
-    calculatorHeight = (dm.widthPixels * 0.675f).toInt()
-
-    editText.setOnClickListener { v: View ->
-      UiThreadUtil.runOnUiThread {
-        hideIme(context, v)
-        if (!editText.isFocused) editText.requestFocusFromJS()
-      }
-    }
-
     editText.onFocusListener = object : CalculatorEditText.OnFocusChangeListener {
       override fun onFocusChange(view: CalculatorEditText, hasFocus: Boolean) {
         UiThreadUtil.runOnUiThread {
           if (hasFocus) {
-            addContentViewForDialog(context, view)
+            showKeyboardPopup(view)
           } else {
-            removeContentViewForDialog(context)
+            hideKeyboardPopup()
           }
           view.setOnKeyListener { v, keyCode, _ ->
             if (keyCode == KeyEvent.KEYCODE_BACK && hasFocus) {
@@ -85,83 +80,87 @@ class RCTInputCalculator : ReactTextInputManager() {
     return editText
   }
 
-  private fun ensureOverlay(context: ThemedReactContext, anchor: View) {
-    if (outsideOverlay != null) return
-    outsideOverlay = View(context).apply {
-      layoutParams = ViewGroup.LayoutParams(
-        ViewGroup.LayoutParams.MATCH_PARENT,
-        ViewGroup.LayoutParams.MATCH_PARENT
-      )
-      setBackgroundColor(Color.TRANSPARENT)
-      isClickable = true
-      isFocusable = true
-      setOnClickListener {
-        anchor.clearFocus()
-      }
-    }
+  override fun getCommandsMap(): Map<String, Int> {
+    return mapOf(
+      "blur" to 1,
+      "focus" to 2
+    )
   }
 
-  private fun addContentViewForDialog(context: ThemedReactContext, anchor: View) {
-    val root = layout ?: return
-    if (addedWithWM || root.parent != null) return
-
-    ensureOverlay(context, anchor)
-
-    if (outsideOverlay?.parent == null) {
-      root.addView(outsideOverlay)
-    }
-
-    if (keyboardView?.parent == null) {
-      val lp = ConstraintLayout.LayoutParams(
-        ConstraintLayout.LayoutParams.MATCH_PARENT,
-        calculatorHeight
-      ).apply {
-        bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID
-      }
-      root.addView(keyboardView, lp)
+  override fun receiveCommand(reactEditText: ReactEditText, commandId: Int, args: ReadableArray?) {
+    when (commandId) {
+      1 -> blur()
+      2 -> focus()
     }
+  }
 
-    val wm = context.getSystemService(android.content.Context.WINDOW_SERVICE) as WindowManager
+  private fun ensurePopup() {
+    if (popup != null) return
+    val content = keyboardView ?: return
 
-    val lp = WindowManager.LayoutParams(
+    popup = PopupWindow(
+      content,
       WindowManager.LayoutParams.MATCH_PARENT,
-      WindowManager.LayoutParams.MATCH_PARENT,
-      WindowManager.LayoutParams.TYPE_APPLICATION_PANEL,
-      WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN or
-              WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
-      PixelFormat.TRANSLUCENT
+      calculatorHeight + bottomInsetFrom(editText.rootView),
+      false
     ).apply {
-      gravity = Gravity.BOTTOM
-      token = anchor.applicationWindowToken
+      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 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 showKeyboardPopup(anchor: View) {
+    ensurePopup()
+    val p = popup ?: return
+    if (p.isShowing) return
+
+    val root = keyboardView ?: return
 
     root.translationY = calculatorHeight.toFloat()
-    wm.addView(root, lp)
-    addedWithWM = true
+    p.showAtLocation(anchor.rootView, Gravity.BOTTOM or Gravity.START, 0, 0)
 
-    root.animate().translationY(0f).setDuration(ANIM_DURATION).start()
+    root.animate()
+      ?.translationY(0f)
+      ?.setDuration(animationDuration)
+      ?.start()
   }
 
-  private fun removeContentViewForDialog(context: ThemedReactContext) {
-    if (!addedWithWM) return
-    val wm = context.getSystemService(android.content.Context.WINDOW_SERVICE) as WindowManager
-    val root = layout ?: return
+  private fun hideKeyboardPopup() {
+    val p = popup ?: return
+    if (!p.isShowing) return
+    val root = keyboardView ?: return
 
     root.animate()
       .translationY(calculatorHeight.toFloat())
-      .setDuration(ANIM_DURATION)
+      .setDuration(animationDuration)
       .withEndAction {
         try {
-          wm.removeViewImmediate(root)
-        } catch (_: Throwable) {}
-        addedWithWM = false
+          if (p.isShowing) p.dismiss()
+        } catch (_: Throwable) { }
       }
       .start()
+
+    popup = null
+  }
+
+  private fun focus() {
+    UiThreadUtil.runOnUiThread {
+      if (!editText.isFocused) editText.requestFocus()
+    }
   }
 
-  private fun hideIme(context: ThemedReactContext, v: View) {
-    val imm = context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
-    imm.hideSoftInputFromWindow(v.windowToken, 0)
+  private fun blur() {
+    UiThreadUtil.runOnUiThread {
+      if (editText.isFocused) editText.clearFocus()
+    }
   }
-}
+}

package/ios/CalculatorKeyboardView.swift

@@ -30,7 +30,7 @@ class CalculatorKeyboardView: UIView {
     self.setup(color)
   }
   
-  private func setup(_ color: UIColor = UIColor(hex: "#d9d9d9")) {
+  private func setup(_ color: UIColor = UIColor(hex: "#d8d8d8")) {
     self.subviews.forEach { $0.removeFromSuperview() }
     
     backgroundColor = UIColor(hex: "#f2f2f6")
@@ -77,15 +77,12 @@ class CalculatorKeyboardView: UIView {
           button.setTitle("", for: .normal)
           let image = UIImage(systemName: "delete.backward", withConfiguration: UIImage.SymbolConfiguration(weight: .bold))
           button.setImage(image, for: .normal)
-          button.tintColor = .white
+          button.tintColor = .black
         }
         
         if specialKeys.contains(key) {
-          button.setTitleColor(.white, for: .normal)
-          button.backgroundColor = color.withAlphaComponent(0.5)
-          if key == "=" {
-            button.backgroundColor = color
-          }
+          button.setTitleColor(.black, for: .normal)
+          button.backgroundColor = color
         }
         
         button.addTarget(self, action: #selector(keyPressed(_:)), for: .touchUpInside)

package/ios/InputCalculator.swift

@@ -29,14 +29,18 @@ 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)
+    self.keyboardView!.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 290 + getbottomInset())
     self.keyboardView!.input = self
     
     backedTextInputView.inputView = self.keyboardView
     backedTextInputView.inputView?.reloadInputViews()
   }
-  
-  
+    func getbottomInset() -> CGFloat {
+      let window = UIApplication.shared.windows.first?.rootViewController?.view
+      let bottom = (window?.safeAreaInsets.bottom ?? 0) > 0 ? 21 : 0
+      return CGFloat(bottom)
+    }
+
   func keyDidPress(_ key: String) {
     backedTextInputView.insertText(key)
     value += key
@@ -87,7 +91,6 @@ class InputCalculator: RCTSinglelineTextInputView {
         value = result.stringValue
         if let bridge = bridge {
           bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "=", eventCount: 1)
-          textField.reactBlur()
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.112.1-rn76.76",
+    "version": "0.112.1-rn80.1",
     "description": "react native calculator keyboard",
     "source": "./src/index.tsx",
     "main": "./lib/commonjs/index.js",