@momo-kits/calculator-keyboard 0.125.4-rc.7 → 0.150.1-beta.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 Dũng (Wem)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# react-native-calculator-keyboard
+
+react native calculator keyboard
+
+## Installation
+
+```sh
+npm install react-native-calculator-keyboard
+```
+
+## Usage
+
+
+```js
+import { CalculatorKeyboardView } from "react-native-calculator-keyboard";
+
+// ...
+
+<CalculatorKeyboardView color="tomato" />
+```
+
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,101 @@
+buildscript {
+  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["CalculatorKeyboard_kotlinVersion"]
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+  }
+}
+
+def reactNativeArchitectures() {
+  def value = rootProject.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["CalculatorKeyboard_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["CalculatorKeyboard_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.calculatorkeyboard"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
+  implementation("org.mariuszgromada.math:MathParser.org-mXparser:5.2.1")
+}
+

package/android/gradle.properties

@@ -0,0 +1,5 @@
+CalculatorKeyboard_kotlinVersion=1.7.0
+CalculatorKeyboard_minSdkVersion=21
+CalculatorKeyboard_targetSdkVersion=31
+CalculatorKeyboard_compileSdkVersion=31
+CalculatorKeyboard_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.calculatorkeyboard">
+</manifest>

package/android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

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

@@ -0,0 +1,17 @@
+package com.calculatorkeyboard
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+
+class CalculatorKeyboardPackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return emptyList()
+  }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(RCTInputCalculator())
+  }
+}

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

@@ -0,0 +1,28 @@
+package com.calculatorkeyboard
+
+import android.content.Context
+import android.graphics.Rect
+import com.facebook.react.views.textinput.ReactEditText
+
+class CalculatorEditText(context: Context) : ReactEditText(context) {
+  var onFocusListener: OnFocusChangeListener? = null
+
+  override fun requestFocus(direction: Int, previouslyFocusedRect: Rect?): Boolean {
+    if (isFocused) {
+      return true
+    }
+    isFocusable = true
+    isFocusableInTouchMode = true
+    return super.requestFocus(direction, previouslyFocusedRect)
+  }
+
+  override fun onFocusChanged(focused: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
+    super.onFocusChanged(focused, direction, previouslyFocusedRect)
+    onFocusListener?.onFocusChange(this, isFocused)
+  }
+
+
+  interface OnFocusChangeListener {
+    fun onFocusChange(view: CalculatorEditText, hasFocus: Boolean)
+  }
+}

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

@@ -0,0 +1,242 @@
+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
+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
+
+
+@SuppressLint("SetTextI18n", "ViewConstructor")
+class CustomKeyboardView(
+  context: ThemedReactContext,
+  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")
+  )
+  private val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
+  private val separatorWidth = 8f
+  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, heightButton)
+    }
+
+  }
+
+  private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
+    var yOffset = separatorWidth
+    for ((_, row) in keys.withIndex()) {
+      var xOffset = separatorWidth
+      for ((_, key) in row.withIndex()) {
+        val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
+        val height = if (key == "=") buttonWidth + 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())
+        }
+
+        addView(button)
+
+        xOffset += width + separatorWidth
+      }
+      yOffset += buttonHeight + separatorWidth
+    }
+  }
+
+  private fun createButton(
+    key: String,
+    xOffset: Float,
+    yOffset: Float,
+    buttonWidth: Int,
+    buttonHeight: Int,
+  ): Button {
+    val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
+    return Button(context).apply {
+      val shapeInit = GradientDrawable().apply {
+        shape = GradientDrawable.RECTANGLE
+        cornerRadius = 24f
+        setColor(Color.WHITE)
+        setBackgroundColor(Color.WHITE)
+      }
+      gravity = Gravity.CENTER
+      background = shapeInit
+      text = key
+      setTypeface(typeface)
+      textSize = 24.toFloat()
+      setTextColor(Color.BLACK)
+      stateListAnimator = null
+      layoutParams = LayoutParams(
+        buttonWidth,
+        buttonHeight
+      ).apply {
+        constrainedWidth = false
+      }
+
+      if (specialKeys.contains(key)) {
+        background = GradientDrawable().apply {
+          shape = GradientDrawable.RECTANGLE
+          cornerRadius = 24f
+          setColor(specialButtonColor)
+        }
+        setTextColor(Color.BLACK)
+      }
+
+
+      translationX = xOffset.toInt().toFloat()
+      translationY = yOffset.toInt().toFloat()
+      setOnClickListener { onKeyPress(key) }
+    }
+  }
+
+  private fun createImageButton(
+    key: String,
+    xOffset: Float,
+    yOffset: Float,
+    buttonWidth: Int,
+    buttonHeight: Int,
+  ): ImageButton {
+    return ImageButton(context).apply {
+      val shapeInit = GradientDrawable().apply {
+        shape = GradientDrawable.RECTANGLE
+        cornerRadius = 24f
+        setColor(specialButtonColor)
+      }
+      background = shapeInit
+      stateListAnimator = null
+      layoutParams = LayoutParams(
+        buttonWidth,
+        buttonHeight
+      ).apply {
+        constrainedWidth = false
+      }
+      translationX = xOffset
+      translationY = yOffset
+      setImageResource(android.R.drawable.ic_input_delete)
+      setImageTintList(ColorStateList.valueOf(Color.BLACK))
+      setOnClickListener { onKeyPress(key) }
+    }
+  }
+
+  fun updateButtonColors(color: Int) {
+    specialButtonColor = color
+    for (i in 0 until childCount) {
+      val child = getChildAt(i)
+      if (child is Button) {
+        val key = child.text.toString()
+        if (specialKeys.contains(key)) {
+          if (key == "=") {
+            child.background = GradientDrawable().apply {
+              shape = GradientDrawable.RECTANGLE
+              cornerRadius = 24f
+              setColor(specialButtonColor)
+            }
+          } else {
+            child.background = GradientDrawable().apply {
+              shape = GradientDrawable.RECTANGLE
+              cornerRadius = 24f
+              setColor(specialButtonColor)
+            }
+          }
+          child.setTextColor(Color.BLACK)
+        }
+      } else if (child is ImageButton) {
+        child.background = GradientDrawable().apply {
+          shape = GradientDrawable.RECTANGLE
+          cornerRadius = 24f
+          setColor(specialButtonColor)
+        }
+      }
+    }
+  }
+
+  private fun onKeyPress(key: String) {
+    when (key) {
+      "AC" -> {
+        clearText()
+      }
+
+      "back" -> {
+        onBackSpace()
+      }
+
+      "=" -> {
+        calculateResult()
+      }
+
+      "×", "+", "-", "÷" -> keyDidPress(" $key ")
+
+      else -> {
+        editText.text?.insert(editText.selectionStart, key)
+      }
+    }
+  }
+
+  private fun keyDidPress(key: String) {
+    println("Key pressed: $key")
+    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
+    if (start > 0) {
+      val newText = end.let { editText.text?.replaceRange(start - 1, it, "") }
+      editText.setText(newText)
+      editText.setSelection(start - 1)
+    }
+  }
+
+  private fun calculateResult() {
+    val text = editText?.text.toString().replace("×", "*").replace("÷", "/")
+    val pattern = "^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$"
+    val regex = Regex(pattern)
+    if (regex.matches(text)) {
+      try {
+        val result = eval(text).toString()
+        editText.setTextKeepState(result)
+      } catch (e: Exception) {
+        e.printStackTrace()
+      }
+    } else {
+      println("Invalid expression")
+    }
+  }
+
+  private fun eval(str: String): Long? {
+    val e = Expression(str)
+    println("Expression: $e")
+    return if (e.checkSyntax()) {
+      e.calculate().toLong()
+    } else {
+      null
+    }
+  }
+
+}

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

@@ -0,0 +1,166 @@
+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.view.KeyEvent
+import android.view.View
+import android.view.WindowInsets
+import android.view.WindowManager
+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 keyboardView: CustomKeyboardView? = null
+  private var calculatorHeight: Int = 290.dpToPx().toInt()
+  private var popup: PopupWindow? = null
+  private val animationDuration = 250L
+
+  private lateinit var editText: CalculatorEditText
+
+  override fun getName() = REACT_CLASS
+
+  companion object {
+    const val REACT_CLASS = "RCTInputCalculator"
+  }
+
+  @ReactProp(name = "value")
+  fun setValue(view: ReactEditText, value: String?) {
+//    view.setText(value)
+  }
+
+  @ReactProp(name = "keyboardColor")
+  fun setKeyboardColor(view: ReactEditText, color: String) {
+    keyboardView?.updateButtonColors(color.toColorInt())
+  }
+
+  @SuppressLint("ClickableViewAccessibility")
+  override fun createViewInstance(context: ThemedReactContext): ReactEditText {
+    editText = CalculatorEditText(context).apply {
+      showSoftInputOnFocus = false
+    }
+
+    keyboardView = CustomKeyboardView(context, editText).apply {
+      setBackgroundColor("#f2f2f6".toColorInt())
+      elevation = 24f
+    }
+
+    editText.onFocusListener = object : CalculatorEditText.OnFocusChangeListener {
+      override fun onFocusChange(view: CalculatorEditText, hasFocus: Boolean) {
+        UiThreadUtil.runOnUiThread {
+          if (hasFocus) {
+            showKeyboardPopup(view)
+          } else {
+            hideKeyboardPopup()
+          }
+          view.setOnKeyListener { v, keyCode, _ ->
+            if (keyCode == KeyEvent.KEYCODE_BACK && hasFocus) {
+              v.clearFocus()
+              true
+            } else false
+          }
+        }
+      }
+    }
+
+    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()
+    }
+  }
+
+  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 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()
+    p.showAtLocation(anchor.rootView, Gravity.BOTTOM or Gravity.START, 0, 0)
+
+    root.animate()
+      ?.translationY(0f)
+      ?.setDuration(animationDuration)
+      ?.start()
+  }
+
+  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()
+
+    popup = null
+  }
+
+  private fun focus() {
+    UiThreadUtil.runOnUiThread {
+      if (!editText.isFocused) editText.requestFocus()
+    }
+  }
+
+  private fun blur() {
+    UiThreadUtil.runOnUiThread {
+      if (editText.isFocused) editText.clearFocus()
+    }
+  }
+}