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

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

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

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

@@ -48,9 +48,14 @@ 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 ?: "Xong")
+    keyboardView?.setCustomKeyText(text ?: "Tiếp")
   }
 
   @ReactProp(name = "customKeyBackground")

package/ios/CalculatorKeyboardView.swift

@@ -7,14 +7,29 @@ import Foundation
 class CalculatorKeyboardView: UIView {
   weak var input: InputCalculator?
   
-  private let keys: [[String]] = [
+  private let numWithCTAKeys: [[String]] = [
     ["1", "2", "3", "÷", "back"],
     ["4", "5", "6", "×", "="],
-    ["7", "8", "9", "-", "Xong"],
+    ["7", "8", "9", "-", "Tiếp"],
     ["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", "+"]
+  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "back", "+", "AC"]
+  
+  var keyboardMode: String? {
+      didSet {
+        guard oldValue != keyboardMode else { return }
+        setup()
+      }
+    }
   
   var customKeyText: String? { didSet { updateCustomKeyTitle() } }
   var customKeyBackground: String? { didSet { updateCustomKeyBackground() } }
@@ -33,10 +48,10 @@ class CalculatorKeyboardView: UIView {
   }
   
   public func setKeyboardColor(_ color: UIColor) {
-    self.setup(color)
+    self.setup()
   }
   
-  private func setup(_ color: UIColor = UIColor(hex: "#d8d8d8")) {
+  private func setup() {
     self.subviews.forEach { $0.removeFromSuperview() }
     
     backgroundColor = UIColor(hex: "#f2f2f6")
@@ -58,22 +73,26 @@ 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 isCustomKey = colIndex == 4 && rowIndex == 2
+        let isMainKey = colIndex == 4 && rowIndex == 2
+        let isMainCTAKey = isMainKey && keyboardMode == "NumWithCTA"
         let button = UIButton(type: .system)
         button.backgroundColor = UIColor.white
         button.layer.cornerRadius = 8
-        let title = isCustomKey ? (customKeyText ?? key) : key
+        let title = isMainCTAKey ? (customKeyText ?? key) : key
         button.setTitle(title, for: .normal)
         button.setTitleColor(.black, for: .normal)
-        button.titleLabel?.font = UIFont.systemFont(ofSize: isCustomKey ? 18 : 24, weight: .medium)
+        button.titleLabel?.font = UIFont.systemFont(ofSize: isMainCTAKey ? 18 : 24, weight: .medium)
         button.nativeID = key
-        button.tag = isCustomKey ? 1 : 0
+        button.tag = isMainCTAKey ? 1 : 0
         
         var buttonFrame = CGRect(x: xOffset, y: yOffset, width: buttonWidth, height: buttonHeight)
-        if isCustomKey {
+        if isMainKey {
           buttonFrame.size.height = buttonHeight * 2 + SEPARATOR_WIDTH
         }
         if key == "000" {
@@ -89,12 +108,12 @@ class CalculatorKeyboardView: UIView {
           button.tintColor = .black
         }
         
-        if specialKeys.contains(key) {
+        if specialKeys.contains(key) || isMainKey {
           button.setTitleColor(.black, for: .normal)
-          button.backgroundColor = color
+          button.backgroundColor = UIColor(hex: "#d8d8d8")
         }
         
-        if isCustomKey {
+        if isMainKey {
           self.customKeyButton = button
         }
         
@@ -117,29 +136,33 @@ class CalculatorKeyboardView: UIView {
   
   private func updateCustomKeyBackground() {
     guard let btn = customKeyButton,
+          let mode = keyboardMode,
             let background = customKeyBackground,
             let textColor = customKeyTextColor,
             let state = customKeyState else { return }
     
-   
-    
-    btn.isEnabled = state != "disable"
+    if (mode == "numWithCTA") {
+      btn.isEnabled = state != "disable"
+    } else {
+      btn.isEnabled = true
+    }
     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 isCustomKey = sender.tag == 1
-    if (isCustomKey) {
+    let isCustomKeyCTA = sender.tag == 1
+    if (isCustomKeyCTA) {
       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,6 +75,7 @@ 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,18 +22,22 @@ class InputCalculator: RCTSinglelineTextInputView {
   @objc var onKeyPress: RCTBubblingEventBlock?
   @objc var onCustomKeyEvent: RCTDirectEventBlock?
 
-  @objc var customKeyText: String? {
-    didSet { keyboardView?.customKeyText = customKeyText as String? }
+  @objc var mode: String? {
+    didSet { keyboardView?.keyboardMode = mode }
   }
   
+  @objc var customKeyText: String? {
+    didSet { keyboardView?.customKeyText = customKeyText }
+  }
+
   @objc var customKeyBackground: String? {
     didSet { keyboardView?.customKeyBackground = customKeyBackground }
   }
-  
+
   @objc var customKeyTextColor: String? {
     didSet { keyboardView?.customKeyTextColor = customKeyTextColor }
   }
-  
+
   @objc var customKeyState: String? {
     didSet { keyboardView?.customKeyState = customKeyState }
   }
@@ -97,23 +101,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)
     }
@@ -135,7 +139,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)
         }
@@ -145,11 +149,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.17",
+    "version": "0.150.2-beta.19",
     "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 step'",
+        "build": "echo",
         "release": "release-it"
     },
     "keywords": [

package/src/index.tsx

@@ -18,6 +18,7 @@ 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;
@@ -32,6 +33,11 @@ export enum CustomKeyState {
   Disable = 'disable',
 }
 
+export enum Mode {
+  NumDefault = 'NumDefault',
+  NumWithCTA = 'NumWithCTA',
+}
+
 export type InputCalculatorRef = {
   focus: () => void;
   blur: () => void;
@@ -45,6 +51,7 @@ const InputCalculator = React.forwardRef<
     {
       customKeyBackground = 'default',
       keyboardColor = '',
+      mode = Mode.NumDefault,
       customKeyText,
       onKeyPress,
       customKeyState = CustomKeyState.Default,
@@ -66,14 +73,16 @@ const InputCalculator = React.forwardRef<
     let keyBackground = Colors.black_06;
     let textKeyColor = Colors.black_20;
 
-    if (customKeyBackground === 'primary') {
-      keyBackground = theme.colors.primary;
-      textKeyColor = Colors.black_01;
-    }
+    if (mode === Mode.NumWithCTA) {
+      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, () => ({
@@ -102,6 +111,7 @@ const InputCalculator = React.forwardRef<
         onChange={_onChange}
         onKeyPress={onKeyPress}
         value={text}
+        mode={mode}
         keybardColor={processColor(keyboardColor)}
         customKeyText={customKeyText}
         customKeyBackground={keyBackground}