@momo-kits/calculator-keyboard 0.150.2-beta.3 → 0.150.2-beta.31

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

@@ -0,0 +1,270 @@
+package com.calculatorkeyboard
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.os.Build
+import android.provider.Settings.Global.putString
+import android.text.Editable
+import android.text.TextWatcher
+import android.view.KeyEvent
+import android.view.inputmethod.InputMethodManager
+import androidx.core.graphics.toColorInt
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.widget.addTextChangedListener
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.facebook.react.viewmanagers.NativeInputCalculatorManagerDelegate
+import com.facebook.react.viewmanagers.NativeInputCalculatorManagerInterface
+import com.facebook.react.views.textinput.ReactEditText
+import com.facebook.react.views.textinput.ReactTextInputManager
+
+@ReactModule(name = InputCalculatorViewManager.REACT_CLASS)
+class InputCalculatorViewManager : SimpleViewManager<ReactEditText>(), NativeInputCalculatorManagerInterface<ReactEditText> {
+  private val delegate: NativeInputCalculatorManagerDelegate<ReactEditText, InputCalculatorViewManager> =
+    NativeInputCalculatorManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<ReactEditText> = delegate
+
+  override fun getName() = REACT_CLASS
+
+  private var keyboardView: CustomKeyboardView? = null
+  private lateinit var editText: CalculatorEditText
+  private lateinit var imm: InputMethodManager
+
+  private val overlayHost = KeyboardOverlayHost()
+
+  private var backListenerAttached = false
+  private var overlayShowing = false
+
+
+  companion object {
+    const val REACT_CLASS = "NativeInputCalculator"
+    val calculatorHeight: Int = 240.dpToPx().toInt()
+  }
+
+  @ReactProp(name = "value")
+  override fun setValue(view: ReactEditText, value: String?) {
+    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)
+    }
+  }
+
+  override fun setTextAttributes(view: ReactEditText?, value: ReadableMap?) {
+    val fontWeightStr = value?.getString("fontWeight")
+    val fontSize = value?.getDouble("fontSize")
+
+    fontWeightStr?.let { weightStr ->
+      val weight = when (weightStr) {
+        "100" -> 100
+        "200" -> 200
+        "300" -> 300
+        "400", "normal" -> 400
+        "500" -> 500
+        "600" -> 600
+        "700", "bold" -> 700
+        "800" -> 800
+        "900" -> 900
+        else -> 400
+      }
+
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+        view?.typeface = Typeface.create(view.typeface, weight, false)
+      } else {
+        view?.typeface = if (weight >= 600) {
+          Typeface.create(view.typeface, Typeface.BOLD)
+        } else {
+          Typeface.create(view.typeface, Typeface.NORMAL)
+        }
+      }
+    }
+
+    fontSize?.let {
+      view?.textSize = it.toFloat()
+    }
+  }
+
+
+  @ReactProp(name = "mode")
+  override fun setMode(view: ReactEditText, mode: String?) {
+    keyboardView?.setMode(mode ?: "NumDefault")
+  }
+
+  @ReactProp(name = "customKeyText")
+  override fun setCustomKeyText(view: ReactEditText, text: String?) {
+    keyboardView?.setCustomKeyText(text ?: "Tiếp")
+  }
+
+  @ReactProp(name = "customKeyBackground")
+  override fun setCustomKeyBackground(view: ReactEditText, background: String?) {
+    keyboardView?.setCustomKeyBackground((background ?: "#d8d8d8").toColorInt())
+  }
+
+  @ReactProp(name = "customKeyTextColor")
+  override fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
+    keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
+  }
+
+  @ReactProp(name = "customKeyState")
+  override fun setCustomKeyState(view: ReactEditText, state: String?) {
+    keyboardView?.setCustomKeyState(state ?: "default")
+  }
+
+  override fun focus(view: ReactEditText?) {
+    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
+  }
+
+  override fun blur(view: ReactEditText?) {
+    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
+  }
+
+  @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
+      }
+      addTextChangedListener(object : TextWatcher{
+        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
+
+        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
+
+        override fun afterTextChanged(s: Editable?) {
+          emitOnChange(context, s.toString())
+        }
+
+      })
+    }
+
+    keyboardView = CustomKeyboardView(context, editText).apply {
+      setBackgroundColor("#f2f2f6".toColorInt())
+      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) {
+            disableSystemImeFor(view)
+            if (!overlayShowing) {
+              val kb = keyboardView ?: return@runOnUiThread
+              overlayHost.show(
+                anchorView = view,
+                keyboardView = kb,
+                heightPx = calculatorHeight
+              )
+              overlayShowing = true
+            }
+          } else {
+            overlayHost.hide()
+            overlayShowing = false
+            enableSystemImeFor(view)
+          }
+        }
+      }
+    }
+
+    return editText
+  }
+
+
+  override fun onDropViewInstance(view: ReactEditText) {
+    super.onDropViewInstance(view)
+    overlayHost.hide()
+    overlayHost.detach()
+    overlayShowing = false
+
+  }
+
+  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 enableSystemImeFor(v: ReactEditText) {
+    v.showSoftInputOnFocus = true
+  }
+
+  private fun emitOnChange(context: Context, text: String) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, editText.id)
+    val payload =
+      Arguments.createMap().apply {
+        putString("text", text)
+      }
+    val event = OnChangeEvent(surfaceId, editText.id, payload)
+
+    eventDispatcher?.dispatchEvent(event)
+  }
+
+  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomBubblingEventTypeConstants()?.toMutableMap() ?: mutableMapOf()
+    base["onKeyPress"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onKeyPress"))
+    base["onChange"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onChange"))
+    return base
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomDirectEventTypeConstants()?.toMutableMap() ?: mutableMapOf()
+    base["onCustomKeyEvent"] = mapOf("registrationName" to "onCustomKeyEvent")
+    return base
+  }
+
+}
+

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/ios/CalculatorKeyboardView.h

@@ -0,0 +1,30 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@protocol CalculatorKeyboardInput <NSObject>
+
+- (void)keyDidPress:(NSString *)key;
+- (void)clearText;
+- (void)onBackSpace;
+- (void)calculateResult;
+- (void)emitCustomKey;
+- (void)emitKeyPress:(NSString *)key;
+
+@end
+
+@interface CalculatorKeyboardView : UIView
+
+@property (nonatomic, weak, nullable) id<CalculatorKeyboardInput> input;
+@property (nonatomic, strong, nullable) NSString *keyboardMode;
+@property (nonatomic, strong, nullable) NSString *customKeyText;
+@property (nonatomic, strong, nullable) NSString *customKeyBackground;
+@property (nonatomic, strong, nullable) NSString *customKeyTextColor;
+@property (nonatomic, strong, nullable) NSString *customKeyState;
+
+- (void)setKeyboardColor:(UIColor *)color;
+
+@end
+
+NS_ASSUME_NONNULL_END
+