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

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

@@ -7,6 +7,7 @@ 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 com.facebook.react.uimanager.ThemedReactContext
 import org.mariuszgromada.math.mxparser.Expression
@@ -20,57 +21,53 @@ class CustomKeyboardView(
   context: ThemedReactContext,
   private val editText: CalculatorEditText
 ) : ConstraintLayout(context) {
-  private val numWithCTAKeys = listOf(
+  private val keys = listOf(
     listOf("1", "2", "3", "÷", "back"),
     listOf("4", "5", "6", "×", "="),
-    listOf("7", "8", "9", "-", "Tiếp"),
+    listOf("7", "8", "9", "-", "Xong"),
     listOf("000", "0", "+")
   )
-  private val defaultKeys = listOf(
-    listOf("1", "2", "3", "÷", "AC"),
-    listOf("4", "5", "6", "×", "back"),
-    listOf("7", "8", "9", "-", "="),
-    listOf("000", "0", "+")
-  )
-  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+", "AC")
+  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+")
   private val separatorWidth = 8f
   private var specialButtonColor: Int = "#D8D8D8".toColorInt()
 
-  private var keyboardMode: String = "NumDefault"
-
   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 - 4 * separatorWidth) / 5f
+      val heightButton = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
+
       isClickable = false
       isFocusable = false
       isFocusableInTouchMode = false
       clipToPadding = false
       clipChildren = false
-  }
 
-  private fun renderUI() {
-    val displayMetrics = resources.displayMetrics
-    val buttonWidth = (displayMetrics.widthPixels - separatorWidth * 2 - 4 * separatorWidth) / 5f
-    val buttonHeight = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
+      renderUI(widthButton, heightButton)
+    }
+
+  }
 
+  private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
     var yOffset = separatorWidth
-    val keys = if (keyboardMode == "NumWithCTA") numWithCTAKeys else defaultKeys
     for ((rowIndex, row) in keys.withIndex()) {
       var xOffset = separatorWidth
       for ((colIndex, key) in row.withIndex()) {
-        val isMainKey = rowIndex == 2 && colIndex == 4
-        val isMainCTAKey = isMainKey && keyboardMode == "NumWithCTA"
+        val isCustomKey = rowIndex == 2 && colIndex == 4
         val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
-        val height = if (isMainKey) buttonHeight * 2 + 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(), isMainKey, isMainCTAKey).also { b ->
-            if (isMainCTAKey) customKeyButton = b
+          createButton(key, xOffset, yOffset, width.toInt(), height.toInt(), isCustomKey).also { b ->
+            if (isCustomKey) customKeyButton = b
           }
         }
 
@@ -88,8 +85,7 @@ class CustomKeyboardView(
     yOffset: Float,
     buttonWidth: Int,
     buttonHeight: Int,
-    isMainKey: Boolean,
-    isMainCTAKey: Boolean
+    isCustomKey: Boolean
   ): Button {
     return Button(context).apply {
       val shapeInit = GradientDrawable().apply {
@@ -102,7 +98,7 @@ class CustomKeyboardView(
       background = shapeInit
       text = key
       setTypeface(typeface)
-      textSize = (if (isMainCTAKey) 18 else 24).toFloat()
+      textSize = (if (isCustomKey) 18 else 24).toFloat()
       setTextColor(Color.BLACK)
       stateListAnimator = null
       maxLines = 1
@@ -114,7 +110,7 @@ class CustomKeyboardView(
         constrainedWidth = false
       }
 
-      if (specialKeys.contains(key) || isMainKey) {
+      if (specialKeys.contains(key)) {
         background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
@@ -129,7 +125,7 @@ class CustomKeyboardView(
 
       translationX = xOffset.toInt().toFloat()
       translationY = yOffset.toInt().toFloat()
-      setOnClickListener { onKeyPress(key, isMainCTAKey) }
+      setOnClickListener { onKeyPress(key, isCustomKey) }
     }
   }
 
@@ -199,15 +195,14 @@ class CustomKeyboardView(
     }
   }
 
-  private fun onKeyPress(key: String, isMainCTAKey: Boolean) {
-    if (isMainCTAKey) {
+  private fun onKeyPress(key: String, isCustomKey: Boolean) {
+    if (isCustomKey) {
       emitCustomKey()
       return
     }
 
     emitKeyPress(key)
     when (key) {
-      "AC" -> clearText()
       "back" -> onBackSpace()
       "=" -> calculateResult()
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
@@ -220,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
@@ -279,29 +270,25 @@ class CustomKeyboardView(
     customKeyButton?.text = text
   }
 
-  fun setMode(mode: String) {
-    keyboardMode = mode
-    renderUI()
-  }
-
   fun setCustomKeyBackground(background: Int) {
     customKeyButtonBackground = background
-    updateCustomKeyUI(background, customKeyButtonTextColor)
+    updateCustomKeyUI(background, customKeyButtonTextColor, customKeyButtonState)
   }
 
   fun setCustomKeyTextColor(textColor: Int) {
     customKeyButtonTextColor = textColor
-    updateCustomKeyUI(customKeyButtonBackground, textColor)
+    updateCustomKeyUI(customKeyButtonBackground, textColor, customKeyButtonState)
   }
 
 
   fun setCustomKeyState(state: String) {
     customKeyButtonState = state
     customKeyButton?.isEnabled = state != "disable"
-    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor)
+    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor, state)
   }
 
-  private fun updateCustomKeyUI(background: Int, textColor: Int){
+  private fun updateCustomKeyUI(background: Int, textColor: Int, state: String){
+
     customKeyButton?.background = GradientDrawable().apply {
       shape = GradientDrawable.RECTANGLE
       cornerRadius = 24f
@@ -310,4 +297,5 @@ class CustomKeyboardView(
     customKeyButton?.setTextColor(textColor)
   }
 
+
 }

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

@@ -48,14 +48,9 @@ class RCTInputCalculator : ReactTextInputManager() {
     }
   }
 
-  @ReactProp(name = "mode")
-  fun setMode(view: ReactEditText, mode: String?) {
-    keyboardView?.setMode(mode ?: "NumDefault")
-  }
-
   @ReactProp(name = "customKeyText")
   fun setCustomKeyText(view: ReactEditText, text: String?) {
-    keyboardView?.setCustomKeyText(text ?: "Tiếp")
+    keyboardView?.setCustomKeyText(text ?: "Xong")
   }
 
   @ReactProp(name = "customKeyBackground")

package/ios/CalculatorKeyboardView.swift

@@ -7,29 +7,14 @@ import Foundation
 class CalculatorKeyboardView: UIView {
   weak var input: InputCalculator?
   
-  private let numWithCTAKeys: [[String]] = [
+  private let keys: [[String]] = [
     ["1", "2", "3", "÷", "back"],
     ["4", "5", "6", "×", "="],
-    ["7", "8", "9", "-", "Tiếp"],
+    ["7", "8", "9", "-", "Xong"],
     ["000", "0", "+"],
   ]
-  
-  private let defaultKeys: [[String]] = [
-    ["1", "2", "3", "÷", "AC"],
-    ["4", "5", "6", "×", "back"],
-    ["7", "8", "9", "-", "="],
-    ["000", "0", "+"],
-  ]
-  
   private let SEPARATOR_WIDTH: CGFloat = 4
-  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "back", "+", "AC"]
-  
-  var keyboardMode: String? {
-      didSet {
-        guard oldValue != keyboardMode else { return }
-        setup()
-      }
-    }
+  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "back", "+"]
   
   var customKeyText: String? { didSet { updateCustomKeyTitle() } }
   var customKeyBackground: String? { didSet { updateCustomKeyBackground() } }
@@ -48,10 +33,10 @@ class CalculatorKeyboardView: UIView {
   }
   
   public func setKeyboardColor(_ color: UIColor) {
-    self.setup()
+    self.setup(color)
   }
   
-  private func setup() {
+  private func setup(_ color: UIColor = UIColor(hex: "#d8d8d8")) {
     self.subviews.forEach { $0.removeFromSuperview() }
     
     backgroundColor = UIColor(hex: "#f2f2f6")
@@ -73,26 +58,22 @@ class CalculatorKeyboardView: UIView {
     
     // Add buttons to the wrapper view
     var yOffset: CGFloat = 0
-    
-    let keys = keyboardMode == "NumDefault" ? defaultKeys : numWithCTAKeys
-    
     for (rowIndex, row) in keys.enumerated() {
       var xOffset: CGFloat = 0
       for (colIndex, key) in row.enumerated() {
-        let isMainKey = colIndex == 4 && rowIndex == 2
-        let isMainCTAKey = isMainKey && keyboardMode == "NumWithCTA"
+        let isCustomKey = colIndex == 4 && rowIndex == 2
         let button = UIButton(type: .system)
         button.backgroundColor = UIColor.white
         button.layer.cornerRadius = 8
-        let title = isMainCTAKey ? (customKeyText ?? key) : key
+        let title = isCustomKey ? (customKeyText ?? key) : key
         button.setTitle(title, for: .normal)
         button.setTitleColor(.black, for: .normal)
-        button.titleLabel?.font = UIFont.systemFont(ofSize: isMainCTAKey ? 18 : 24, weight: .medium)
+        button.titleLabel?.font = UIFont.systemFont(ofSize: isCustomKey ? 18 : 24, weight: .medium)
         button.nativeID = key
-        button.tag = isMainCTAKey ? 1 : 0
+        button.tag = isCustomKey ? 1 : 0
         
         var buttonFrame = CGRect(x: xOffset, y: yOffset, width: buttonWidth, height: buttonHeight)
-        if isMainKey {
+        if isCustomKey {
           buttonFrame.size.height = buttonHeight * 2 + SEPARATOR_WIDTH
         }
         if key == "000" {
@@ -108,12 +89,12 @@ class CalculatorKeyboardView: UIView {
           button.tintColor = .black
         }
         
-        if specialKeys.contains(key) || isMainKey {
+        if specialKeys.contains(key) {
           button.setTitleColor(.black, for: .normal)
-          button.backgroundColor = UIColor(hex: "#d8d8d8")
+          button.backgroundColor = color
         }
         
-        if isMainKey {
+        if isCustomKey {
           self.customKeyButton = button
         }
         
@@ -136,33 +117,29 @@ class CalculatorKeyboardView: UIView {
   
   private func updateCustomKeyBackground() {
     guard let btn = customKeyButton,
-          let mode = keyboardMode,
             let background = customKeyBackground,
             let textColor = customKeyTextColor,
             let state = customKeyState else { return }
     
-    if (mode == "numWithCTA") {
-      btn.isEnabled = state != "disable"
-    } else {
-      btn.isEnabled = true
-    }
+   
+    
+    btn.isEnabled = state != "disable"
     btn.backgroundColor =  UIColor(hex: background)
     btn.setTitleColor(UIColor(hex: textColor), for: .normal)
+
   }
 
   
   @objc private func keyPressed(_ sender: UIButton) {
     guard let key = sender.nativeID else { return }
-    let isCustomKeyCTA = sender.tag == 1
-    if (isCustomKeyCTA) {
+    let isCustomKey = sender.tag == 1
+    if (isCustomKey) {
       input?.emitCustomKey()
       return
     }
     
     input?.emitKeyPress(key)
     switch key {
-    case "AC":
-      input?.clearText()
     case "back":
       input?.onBackSpace()
     case "=":

package/ios/InputCalculator.m

@@ -56,7 +56,7 @@ RCT_EXPORT_SHADOW_PROPERTY(onContentSizeChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(value, NSString)
 RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onKeyPress, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKeyPress, RCTBubblingEventBlock) 
 RCT_EXPORT_VIEW_PROPERTY(onCustomKeyEvent, RCTDirectEventBlock)
 
 RCT_EXPORT_METHOD(focus : (nonnull NSNumber *)viewTag)
@@ -75,7 +75,6 @@ RCT_EXPORT_METHOD(blur : (nonnull NSNumber *)viewTag)
   }];
 }
 
-RCT_EXPORT_VIEW_PROPERTY(mode, NSString)
 RCT_EXPORT_VIEW_PROPERTY(keyboardColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(customKeyText, NSString)
 RCT_EXPORT_VIEW_PROPERTY(customKeyBackground, NSString)

package/ios/InputCalculator.swift

@@ -22,22 +22,18 @@ class InputCalculator: RCTSinglelineTextInputView {
   @objc var onKeyPress: RCTBubblingEventBlock?
   @objc var onCustomKeyEvent: RCTDirectEventBlock?
 
-  @objc var mode: String? {
-    didSet { keyboardView?.keyboardMode = mode }
-  }
-  
   @objc var customKeyText: String? {
-    didSet { keyboardView?.customKeyText = customKeyText }
+    didSet { keyboardView?.customKeyText = customKeyText as String? }
   }
-
+  
   @objc var customKeyBackground: String? {
     didSet { keyboardView?.customKeyBackground = customKeyBackground }
   }
-
+  
   @objc var customKeyTextColor: String? {
     didSet { keyboardView?.customKeyTextColor = customKeyTextColor }
   }
-
+  
   @objc var customKeyState: String? {
     didSet { keyboardView?.customKeyState = customKeyState }
   }
@@ -101,23 +97,23 @@ class InputCalculator: RCTSinglelineTextInputView {
   func keyDidPress(_ key: String) {
     backedTextInputView.insertText(key)
     value += key
-
+        
     if let bridge = bridge {
       bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "\(key)", eventCount: 1)
     }
   }
 
-  func clearText() {
-    value = ""
-    (backedTextInputView as? UITextField)?.text = ""
-    if let bridge = bridge {
-      bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "clear", eventCount: 1)
-    }
-  }
-
   func onBackSpace() {
     value = value.dropLast().description
-
+    DispatchQueue.main.async {
+      if let range = self.backedTextInputView.selectedTextRange,
+         let fromRange = self.backedTextInputView.position(from: range.start, offset: -1),
+         let newRange = self.backedTextInputView.textRange(from: fromRange, to: range.start)
+      {
+        self.backedTextInputView.replace(newRange, withText: "")
+      }
+    }
+    
     if let bridge = bridge {
       bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "back", eventCount: 1)
     }
@@ -139,7 +135,7 @@ class InputCalculator: RCTSinglelineTextInputView {
       if let result = expression.expressionValue(with: nil, context: nil) as? NSNumber {
         textField.text = result.stringValue
         value = result.stringValue
-
+                
         if let bridge = bridge {
           bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "=", eventCount: 1)
         }
@@ -149,11 +145,11 @@ class InputCalculator: RCTSinglelineTextInputView {
       print("Invalid expression")
     }
   }
-
+  
   func emitCustomKey() {
     onCustomKeyEvent?([:])
   }
-
+  
   func emitKeyPress(_ key: String) {
     onKeyPress?(["key": key])
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-beta.19",
+    "version": "0.150.2-beta.20",
     "description": "react native calculator keyboard",
     "main": "./src/index.tsx",
     "files": [
@@ -27,7 +27,7 @@
         "typecheck": "tsc",
         "lint": "eslint \"**/*.{js,ts,tsx}\"",
         "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
-        "build": "echo",
+        "build": "echo 'build step'",
         "release": "release-it"
     },
     "keywords": [

package/src/index.tsx

@@ -18,7 +18,6 @@ type KeyPressEvent = { nativeEvent: { key: string } };
 interface InputCalculatorProps extends TextInputProps {
   text?: string | undefined;
   keyboardColor?: ColorValue;
-  mode?: Mode;
   onKeyPress?: (e: KeyPressEvent) => void;
   customKeyText?: string | undefined;
   customKeyBackground?: CustomKeyBackground;
@@ -33,11 +32,6 @@ export enum CustomKeyState {
   Disable = 'disable',
 }
 
-export enum Mode {
-  NumDefault = 'NumDefault',
-  NumWithCTA = 'NumWithCTA',
-}
-
 export type InputCalculatorRef = {
   focus: () => void;
   blur: () => void;
@@ -51,7 +45,6 @@ const InputCalculator = React.forwardRef<
     {
       customKeyBackground = 'default',
       keyboardColor = '',
-      mode = Mode.NumDefault,
       customKeyText,
       onKeyPress,
       customKeyState = CustomKeyState.Default,
@@ -73,16 +66,14 @@ const InputCalculator = React.forwardRef<
     let keyBackground = Colors.black_06;
     let textKeyColor = Colors.black_20;
 
-    if (mode === Mode.NumWithCTA) {
-      if (customKeyBackground === 'primary') {
-        keyBackground = theme.colors.primary;
-        textKeyColor = Colors.black_01;
-      }
+    if (customKeyBackground === 'primary') {
+      keyBackground = theme.colors.primary;
+      textKeyColor = Colors.black_01;
+    }
 
-      if (customKeyState === CustomKeyState.Disable) {
-        keyBackground = theme.colors.background.disable;
-        textKeyColor = Colors.black_01;
-      }
+    if (customKeyState === CustomKeyState.Disable) {
+      keyBackground = theme.colors.background.disable;
+      textKeyColor = Colors.black_01;
     }
 
     React.useImperativeHandle(ref, () => ({
@@ -111,7 +102,6 @@ const InputCalculator = React.forwardRef<
         onChange={_onChange}
         onKeyPress={onKeyPress}
         value={text}
-        mode={mode}
         keybardColor={processColor(keyboardColor)}
         customKeyText={customKeyText}
         customKeyBackground={keyBackground}