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

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

@@ -3,6 +3,8 @@ package com.calculatorkeyboard
 import android.annotation.SuppressLint
 import android.app.Activity
 import android.graphics.Color
+import android.graphics.PixelFormat
+import android.view.Gravity
 import android.view.KeyEvent
 import android.view.View
 import android.view.ViewGroup
@@ -15,11 +17,15 @@ import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.views.textinput.ReactEditText
 import com.facebook.react.views.textinput.ReactTextInputManager
 
-
 class RCTInputCalculator : ReactTextInputManager() {
+
   private var layout: ConstraintLayout? = null
   private var keyboardView: CustomKeyboardView? = null
-  private var calculatorHeight = 0
+  private var calculatorHeight: Int = 0
+  private var addedWithWM = false
+  private val ANIM_DURATION = 250L
+
+  private var outsideOverlay: View? = null
 
   override fun getName() = REACT_CLASS
 
@@ -37,38 +43,24 @@ class RCTInputCalculator : ReactTextInputManager() {
     keyboardView?.updateButtonColors(Color.parseColor(color))
   }
 
+  @SuppressLint("ClickableViewAccessibility")
   override fun createViewInstance(context: ThemedReactContext): ReactEditText {
     val editText = CalculatorEditText(context)
-    layout = ConstraintLayout(context)
-    keyboardView = CustomKeyboardView(context, editText)
-    keyboardView?.setBackgroundColor(Color.parseColor("#f2f2f6"))
+    editText.showSoftInputOnFocus = false
 
-    val displayMetrics = context.currentActivity!!.resources.displayMetrics
-    val screenHeight = displayMetrics.heightPixels
-    calculatorHeight = (displayMetrics.widthPixels * 0.675).toInt()
-
-    val lParams = ConstraintLayout.LayoutParams(
-      ConstraintLayout.LayoutParams.MATCH_PARENT,
-      ConstraintLayout.LayoutParams.WRAP_CONTENT
-    ).apply {
-      height = calculatorHeight
-      bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID
-      setMargins(0, screenHeight - calculatorHeight, 0, 0)
-    }
-    if (context.currentActivity != null) {
-      (layout as ConstraintLayout).addView(keyboardView, lParams)
+    layout = ConstraintLayout(context)
+    keyboardView = CustomKeyboardView(context, editText).apply {
+      setBackgroundColor(Color.parseColor("#f2f2f6"))
+      elevation = 24f
     }
 
+    val dm = context.currentActivity!!.resources.displayMetrics
+    calculatorHeight = (dm.widthPixels * 0.675f).toInt()
+
     editText.setOnClickListener { v: View ->
       UiThreadUtil.runOnUiThread {
-        (context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager).hideSoftInputFromWindow(
-          v.windowToken,
-          0
-        )
-        editText.setShowSoftInputOnFocus(false)
-        if (!editText.isFocused) {
-          editText.requestFocusFromJS()
-        }
+        hideIme(context, v)
+        if (!editText.isFocused) editText.requestFocusFromJS()
       }
     }
 
@@ -76,17 +68,15 @@ class RCTInputCalculator : ReactTextInputManager() {
       override fun onFocusChange(view: CalculatorEditText, hasFocus: Boolean) {
         UiThreadUtil.runOnUiThread {
           if (hasFocus) {
-            addContentView(context)
+            addContentViewForDialog(context, view)
           } else {
-            removeContentView(context)
+            removeContentViewForDialog(context)
           }
-          view.setOnKeyListener { view, keyCode, _ ->
+          view.setOnKeyListener { v, keyCode, _ ->
             if (keyCode == KeyEvent.KEYCODE_BACK && hasFocus) {
-              view.isFocusable = false
-              view.clearFocus()
-              return@setOnKeyListener true
-            }
-            false
+              v.clearFocus()
+              true
+            } else false
           }
         }
       }
@@ -95,34 +85,83 @@ class RCTInputCalculator : ReactTextInputManager() {
     return editText
   }
 
-  private fun addContentView(context: ThemedReactContext) {
-    if (layout!!.parent == null) {
-      context.currentActivity!!.window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN)
-      layout!!.y = calculatorHeight.toFloat()
-
-      context.currentActivity!!.addContentView(
-        layout,
-        ViewGroup.LayoutParams(
-          ViewGroup.LayoutParams.MATCH_PARENT,
-          ViewGroup.LayoutParams.MATCH_PARENT
-        )
+  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
       )
-      layout!!.animate().translationY(0f).setDuration(250)
+      setBackgroundColor(Color.TRANSPARENT)
+      isClickable = true
+      isFocusable = true
+      setOnClickListener {
+        anchor.clearFocus()
+      }
     }
   }
 
-  private fun removeContentView(context: ThemedReactContext) {
-    if (layout!!.parent != null) {
-      layout!!.y = 0f
-      layout!!.animate().translationY(calculatorHeight.toFloat()).setDuration(250).withEndAction {
-        context.currentActivity!!.window
-          .setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
-        if (layout!!.parent != null) {
-          (layout!!.parent as ViewGroup).removeView(layout)
-        }
+  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)
+    }
+
+    val wm = context.getSystemService(android.content.Context.WINDOW_SERVICE) as WindowManager
+
+    val lp = WindowManager.LayoutParams(
+      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
+    ).apply {
+      gravity = Gravity.BOTTOM
+      token = anchor.applicationWindowToken
+      softInputMode = WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING
     }
+
+    root.translationY = calculatorHeight.toFloat()
+    wm.addView(root, lp)
+    addedWithWM = true
+
+    root.animate().translationY(0f).setDuration(ANIM_DURATION).start()
   }
 
-}
+  private fun removeContentViewForDialog(context: ThemedReactContext) {
+    if (!addedWithWM) return
+    val wm = context.getSystemService(android.content.Context.WINDOW_SERVICE) as WindowManager
+    val root = layout ?: return
+
+    root.animate()
+      .translationY(calculatorHeight.toFloat())
+      .setDuration(ANIM_DURATION)
+      .withEndAction {
+        try {
+          wm.removeViewImmediate(root)
+        } catch (_: Throwable) {}
+        addedWithWM = false
+      }
+      .start()
+  }
 
+  private fun hideIme(context: ThemedReactContext, v: View) {
+    val imm = context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
+    imm.hideSoftInputFromWindow(v.windowToken, 0)
+  }
+}

package/package.json

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