@momo-kits/calculator-keyboard 0.150.2-phuc.15 → 0.151.1-beta.2

package/android/src/main/java/com/calculatorkeyboard/{RCTInputCalculator.kt → InputCalculatorViewManager.kt}

@@ -3,20 +3,36 @@ 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.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 com.facebook.react.bridge.ReadableArray
+import com.calculatorkeyboard.CustomKeyboardView.Companion.calculateResult
+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.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
+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
 
-class RCTInputCalculator : 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
@@ -27,15 +43,14 @@ class RCTInputCalculator : ReactTextInputManager() {
   private var backListenerAttached = false
   private var overlayShowing = false
 
-  override fun getName() = REACT_CLASS
 
   companion object {
-    const val REACT_CLASS = "RCTInputCalculator"
+    const val REACT_CLASS = "NativeInputCalculator"
     val calculatorHeight: Int = 240.dpToPx().toInt()
   }
 
   @ReactProp(name = "value")
-  fun setValue(view: ReactEditText, value: String?) {
+  override fun setValue(view: ReactEditText, value: String?) {
     UiThreadUtil.runOnUiThread {
       val e = view.editableText ?: run { view.setText(value ?: ""); return@runOnUiThread }
       val newText = value ?: ""
@@ -45,32 +60,84 @@ class RCTInputCalculator : ReactTextInputManager() {
       val atEnd = wasFocused && view.selectionStart == e.length && view.selectionEnd == e.length
       e.replace(0, e.length, newText)
       if (!wasFocused || atEnd) view.setSelection(newText.length)
+      keyboardView?.reformatAndKeepSelection(editText)
     }
   }
 
+  override fun setTextAttributes(view: ReactEditText?, value: ReadableMap?) {
+    val fontWeightStr = value?.getString("fontWeight")
+    val fontSize = value?.getDouble("fontSize")
+    val placeHolder = value?.getString("placeholder")
+    val placeHolderTextColor = value?.getString("placeholderTextColor")
+
+    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()
+    }
+    placeHolder?.let {
+      view?.setPlaceholder(placeHolder)
+    }
+    placeHolderTextColor?.let {
+      view?.setHintTextColor(it.toColorInt())
+    }
+  }
+
+
+  @ReactProp(name = "mode")
+  override fun setMode(view: ReactEditText, mode: String?) {
+    keyboardView?.setMode(mode ?: "NumDefault")
+  }
+
   @ReactProp(name = "customKeyText")
-  fun setCustomKeyText(view: ReactEditText, text: String?) {
-    keyboardView?.setCustomKeyText(text ?: "Xong")
+  override fun setCustomKeyText(view: ReactEditText, text: String?) {
+    keyboardView?.setCustomKeyText(text ?: "Tiếp")
   }
 
   @ReactProp(name = "customKeyBackground")
-  fun setCustomKeyBackground(view: ReactEditText, background: String?) {
+  override fun setCustomKeyBackground(view: ReactEditText, background: String?) {
     keyboardView?.setCustomKeyBackground((background ?: "#d8d8d8").toColorInt())
   }
 
   @ReactProp(name = "customKeyTextColor")
-  fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
+  override fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
     keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
   }
 
   @ReactProp(name = "customKeyState")
-  fun setCustomKeyState(view: ReactEditText, state: String?) {
+  override fun setCustomKeyState(view: ReactEditText, state: String?) {
     keyboardView?.setCustomKeyState(state ?: "default")
   }
 
-  @ReactProp(name = "keyboardColor")
-  fun setKeyboardColor(view: ReactEditText, color: String) {
-    keyboardView?.updateButtonColors(color.toColorInt())
+  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")
@@ -80,6 +147,8 @@ class RCTInputCalculator : ReactTextInputManager() {
     editText = CalculatorEditText(context).apply {
       showSoftInputOnFocus = false
       isFocusableInTouchMode = true
+      isSingleLine = true
+
       setOnTouchListener { v, event ->
         if (event.action == android.view.MotionEvent.ACTION_DOWN) {
           showSoftInputOnFocus = false
@@ -101,6 +170,21 @@ class RCTInputCalculator : ReactTextInputManager() {
         }
         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?) {
+          Event.emitOnChange(context, editText.id, s.toString())
+          Event.emitOnResult(context, editText.id, editText.calculateResult())
+        }
+
+      })
+
+      setOnFocusChangeListener { view, hasFocus ->
+        Event.emitOnBlurFocus(context, editText.id, hasFocus)
+      }
     }
 
     keyboardView = CustomKeyboardView(context, editText).apply {
@@ -155,7 +239,7 @@ class RCTInputCalculator : ReactTextInputManager() {
 
   private fun disableSystemImeFor(v: ReactEditText) {
     v.showSoftInputOnFocus = false
-    if (android.os.Build.VERSION.SDK_INT >= 30) {
+    if (Build.VERSION.SDK_INT >= 30) {
       ViewCompat.getWindowInsetsController(v)?.hide(WindowInsetsCompat.Type.ime())
     }
     imm.hideSoftInputFromWindow(v.windowToken, 0)
@@ -165,33 +249,21 @@ class RCTInputCalculator : ReactTextInputManager() {
     v.showSoftInputOnFocus = true
   }
 
-  override fun getCommandsMap(): Map<String, Int> = mapOf("blur" to 1, "focus" to 2)
-
-  override fun receiveCommand(reactEditText: ReactEditText, commandId: Int, args: ReadableArray?) {
-    when (commandId) {
-      1 -> blur()
-      2 -> focus()
-    }
-  }
-
   override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
-    val base = super.getExportedCustomBubblingEventTypeConstants().toMutableMap()
+    val base = super.getExportedCustomBubblingEventTypeConstants()?.toMutableMap() ?: mutableMapOf()
     base["onKeyPress"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onKeyPress"))
+    base["onChange"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onChange"))
+    base["onResult"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onResult"))
     return base
   }
 
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
-    val base = super.getExportedCustomDirectEventTypeConstants().toMutableMap()
+    val base = super.getExportedCustomDirectEventTypeConstants()?.toMutableMap() ?: mutableMapOf()
+    base["onBlur"] = mapOf("registrationName" to "onBlur")
+    base["onFocus"] = mapOf("registrationName" to "onFocus")
     base["onCustomKeyEvent"] = mapOf("registrationName" to "onCustomKeyEvent")
     return base
   }
 
-  private fun focus() {
-    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
-  }
-
-  private fun blur() {
-    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
-  }
 }
 

package/ios/CalculatorKeyboardView.h

@@ -0,0 +1,32 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@protocol CalculatorKeyboardInput <NSObject>
+
+- (void)keyDidPress:(NSString *)key;
+- (void)clearText;
+- (NSString *)getText;
+- (void)onBackSpace;
+- (NSString *)calculate;
+- (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
+

package/ios/CalculatorKeyboardView.mm

@@ -0,0 +1,274 @@
+#import "CalculatorKeyboardView.h"
+#import "Utils.h"
+
+@interface CalculatorKeyboardView ()
+@property (nonatomic, strong) NSArray<NSArray<NSString *> *> *numWithCTAKeys;
+@property (nonatomic, strong) NSArray<NSArray<NSString *> *> *defaultKeys;
+@property (nonatomic, strong) NSSet<NSString *> *specialKeys;
+@property (nonatomic, weak) UIButton *customKeyButton;
+@end
+
+@implementation CalculatorKeyboardView {
+  CGFloat _separatorWidth;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    _separatorWidth = 4.0;
+    
+    _numWithCTAKeys = @[
+      @[@"1", @"2", @"3", @"÷", @"back"],
+      @[@"4", @"5", @"6", @"×", @"="],
+      @[@"7", @"8", @"9", @"-", @"Tiếp"],
+      @[@"000", @"0", @"+"]
+    ];
+    
+    _defaultKeys = @[
+      @[@"1", @"2", @"3", @"÷", @"AC"],
+      @[@"4", @"5", @"6", @"×", @"back"],
+      @[@"7", @"8", @"9", @"-", @"="],
+      @[@"000", @"0", @"+"]
+    ];
+    
+    _specialKeys = [NSSet setWithArray:@[@"=", @"-", @"×", @"÷", @"back", @"+", @"AC"]];
+    
+    [self setup];
+  }
+  return self;
+}
+
+- (void)setKeyboardMode:(NSString *)keyboardMode
+{
+  if ([_keyboardMode isEqualToString:keyboardMode]) {
+    return;
+  }
+  _keyboardMode = keyboardMode;
+  [self setup];
+}
+
+- (void)setCustomKeyText:(NSString *)customKeyText
+{
+  _customKeyText = customKeyText;
+  [self updateCustomKeyTitle];
+}
+
+- (void)setCustomKeyBackground:(NSString *)customKeyBackground
+{
+  _customKeyBackground = customKeyBackground;
+  [self updateCustomKeyBackground];
+}
+
+- (void)setCustomKeyTextColor:(NSString *)customKeyTextColor
+{
+  _customKeyTextColor = customKeyTextColor;
+  [self updateCustomKeyBackground];
+}
+
+- (void)setCustomKeyState:(NSString *)customKeyState
+{
+  _customKeyState = customKeyState;
+  [self updateCustomKeyBackground];
+}
+
+- (void)setKeyboardColor:(UIColor *)color
+{
+  [self setup];
+}
+
+- (void)setup
+{
+  // Remove all subviews
+  for (UIView *subview in self.subviews) {
+    [subview removeFromSuperview];
+  }
+  
+  self.backgroundColor = [Utils colorFromHex:@"#f2f2f6"];
+  
+  CGFloat buttonWidth = (UIScreen.mainScreen.bounds.size.width - _separatorWidth * 2 - 4 * _separatorWidth) / 5;
+  CGFloat buttonHeight = (240 - _separatorWidth * 2 - 3 * _separatorWidth) / 4;
+  
+  // Create content view
+  UIView *contentView = [[UIView alloc] init];
+  contentView.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:contentView];
+  
+  // Set contentView constraints
+  [NSLayoutConstraint activateConstraints:@[
+    [contentView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:_separatorWidth],
+    [contentView.trailingAnchor constraintEqualToAnchor:self.trailingAnchor constant:-_separatorWidth],
+    [contentView.topAnchor constraintEqualToAnchor:self.topAnchor constant:_separatorWidth],
+    [contentView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-_separatorWidth]
+  ]];
+  
+  CGFloat yOffset = 0;
+  NSArray<NSArray<NSString *> *> *keys = [_keyboardMode isEqualToString:@"NumDefault"] ? _defaultKeys : _numWithCTAKeys;
+  
+  for (NSInteger rowIndex = 0; rowIndex < keys.count; rowIndex++) {
+    NSArray<NSString *> *row = keys[rowIndex];
+    CGFloat xOffset = 0;
+    
+    for (NSInteger colIndex = 0; colIndex < row.count; colIndex++) {
+      NSString *key = row[colIndex];
+      BOOL isMainKey = (colIndex == 4 && rowIndex == 2);
+      BOOL isMainCTAKey = isMainKey && [_keyboardMode isEqualToString:@"NumWithCTA"];
+      
+      UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
+      button.backgroundColor = UIColor.whiteColor;
+      button.layer.cornerRadius = 8;
+      
+      NSString *title = isMainCTAKey ? (_customKeyText ?: key) : key;
+      [button setTitle:title forState:UIControlStateNormal];
+      [button setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
+      button.titleLabel.font = [UIFont systemFontOfSize:isMainCTAKey ? 18 : 24 weight:UIFontWeightMedium];
+      button.accessibilityIdentifier = key;
+      button.tag = isMainCTAKey ? 1 : 0;
+      
+      CGRect buttonFrame = CGRectMake(xOffset, yOffset, buttonWidth, buttonHeight);
+      if (isMainKey) {
+        buttonFrame.size.height = buttonHeight * 2 + _separatorWidth;
+      }
+      if ([key isEqualToString:@"000"]) {
+        buttonFrame.size.width = buttonWidth * 2 + _separatorWidth;
+      }
+      
+      button.frame = buttonFrame;
+      
+      if ([key isEqualToString:@"back"]) {
+        [button setTitle:@"" forState:UIControlStateNormal];
+        UIImageSymbolConfiguration *config = [UIImageSymbolConfiguration configurationWithWeight:UIImageSymbolWeightBold];
+        UIImage *image = [UIImage systemImageNamed:@"delete.backward" withConfiguration:config];
+        [button setImage:image forState:UIControlStateNormal];
+        button.tintColor = UIColor.blackColor;
+      }
+      
+      if ([_specialKeys containsObject:key] || isMainKey) {
+        [button setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
+        button.backgroundColor = [Utils colorFromHex:@"#d8d8d8"];
+      }
+      
+      if (isMainKey) {
+        self.customKeyButton = button;
+      }
+      
+      [button addTarget:self action:@selector(keyPressed:) forControlEvents:UIControlEventTouchUpInside];
+      [contentView addSubview:button];
+      
+      xOffset += buttonFrame.size.width + _separatorWidth;
+    }
+    
+    yOffset += buttonHeight + _separatorWidth;
+  }
+}
+
+- (void)updateCustomKeyTitle
+{
+  if (!self.customKeyButton || !_customKeyText) {
+    return;
+  }
+  [self.customKeyButton setTitle:_customKeyText forState:UIControlStateNormal];
+  [self.customKeyButton setImage:nil forState:UIControlStateNormal];
+}
+
+- (void)updateCustomKeyBackground
+{
+  if (!self.customKeyButton || !_keyboardMode || !_customKeyBackground || !_customKeyTextColor || !_customKeyState) {
+    return;
+  }
+  
+  if ([_keyboardMode isEqualToString:@"numWithCTA"]) {
+    self.customKeyButton.enabled = ![_customKeyState isEqualToString:@"disable"];
+  } else {
+    self.customKeyButton.enabled = YES;
+  }
+  
+  self.customKeyButton.backgroundColor = [Utils colorFromHex:_customKeyBackground];
+  [self.customKeyButton setTitleColor:[Utils colorFromHex:_customKeyTextColor] forState:UIControlStateNormal];
+}
+
+- (void)keyPressed:(UIButton *)sender
+{
+  NSString *key = sender.accessibilityIdentifier;
+  if (!key) return;
+
+  if (sender.tag == 1) {
+    [self.input emitCustomKey];
+    return;
+  }
+  
+  [self.input emitKeyPress:key];
+
+  NSString *text = self.input.getText ?: @"";
+  BOOL isEmpty = (text.length == 0);
+  BOOL isJustZero = [text isEqualToString:@"0"];
+
+  BOOL endsWithPlus  = [text hasSuffix:@" + "];
+  BOOL endsWithMinus = [text hasSuffix:@" - "];
+  BOOL endsWithMul   = [text hasSuffix:@" × "];
+  BOOL endsWithDiv   = [text hasSuffix:@" ÷ "];
+  BOOL endsWithOperator = (endsWithPlus || endsWithMinus || endsWithMul || endsWithDiv);
+
+  BOOL endsWithSingleZeroAfterOp = [text hasSuffix:@" 0"];
+
+  BOOL (^isOpKey)(NSString *) = ^BOOL(NSString *k) {
+    return [k isEqualToString:@"+"] || [k isEqualToString:@"-"] ||
+           [k isEqualToString:@"×"] || [k isEqualToString:@"÷"];
+  };
+  void (^insert)(NSString *) = ^(NSString *s) { [self.input keyDidPress:s]; };
+  void (^replaceTrailingZeroWith)(NSString *) = ^(NSString *s) {
+    [self.input onBackSpace];
+    [self.input keyDidPress:s];
+  };
+  void (^replaceAllWith)(NSString *) = ^(NSString *s) {
+    [self.input clearText];
+    [self.input keyDidPress:s];
+  };
+
+  if ([key isEqualToString:@"AC"]) {
+    [self.input clearText];
+    return;
+  }
+
+  if ([key isEqualToString:@"back"]) {
+    [self.input onBackSpace];
+    return;
+  }
+
+  if ([key isEqualToString:@"="]) {
+    [self.input calculateResult];
+    return;
+  }
+
+  if (isOpKey(key)) {
+    if (!isEmpty) {
+      insert([NSString stringWithFormat:@" %@ ", key]);
+    }
+    return;
+  }
+
+  if ([key isEqualToString:@"0"] || [key isEqualToString:@"000"]) {
+    if (isEmpty) return;
+
+    if ([key isEqualToString:@"000"] && endsWithOperator) {
+      insert(@"0");
+      return;
+    }
+
+    if (endsWithSingleZeroAfterOp || isJustZero) return;
+
+    insert(key);
+    return;
+  }
+
+  if (isJustZero) {
+    replaceAllWith(key);
+  } else if (endsWithSingleZeroAfterOp) {
+    replaceTrailingZeroWith(key);
+  } else {
+    insert(key);
+  }
+}
+
+
+@end
+

package/ios/NativeInputCalculator.h

@@ -0,0 +1,11 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeInputCalculator : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END
+