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

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
+    }
+}