@momo-kits/calculator-keyboard 0.150.2-beta.2 → 0.150.2-beta.20-sp.1

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

@@ -1,45 +1,45 @@
 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.content.Context
+import android.graphics.Color
 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 android.view.inputmethod.InputMethodManager
 import androidx.core.graphics.toColorInt
-import com.facebook.react.bridge.ReadableArray
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.PixelUtil.dpToPx
 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
+import com.facebook.react.viewmanagers.NativeInputCalculatorManagerDelegate
+import com.facebook.react.viewmanagers.NativeInputCalculatorManagerInterface
+import com.facebook.react.uimanager.ViewManagerDelegate
+import androidx.annotation.Nullable
 
-class RCTInputCalculator : ReactTextInputManager() {
+// Fabric-only manager with codegen name `NativeInputCalculator`
+class InputCalculatorManager : ReactTextInputManager(), NativeInputCalculatorManagerInterface<ReactEditText> {
 
-  private var keyboardView: CustomKeyboardView? = null
-  private var calculatorHeight: Int = 290.dpToPx().toInt()
-  private var popup: PopupWindow? = null
-  private val animationDuration = 250L
+  private val mDelegate: ViewManagerDelegate<ReactEditText> = NativeInputCalculatorManagerDelegate(this)
 
+  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
 
   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, @Nullable value: String?) {
     UiThreadUtil.runOnUiThread {
       val e = view.editableText ?: run { view.setText(value ?: ""); return@runOnUiThread }
       val newText = value ?: ""
@@ -47,24 +47,63 @@ class RCTInputCalculator : ReactTextInputManager() {
 
       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)
-      }
+      if (!wasFocused || atEnd) view.setSelection(newText.length)
     }
   }
 
-  @ReactProp(name = "keyboardColor")
-  fun setKeyboardColor(view: ReactEditText, color: String) {
-    keyboardView?.updateButtonColors(color.toColorInt())
+  override fun setMode(view: ReactEditText, @Nullable mode: String?) {
+    keyboardView?.setMode(mode ?: "NumDefault")
+  }
+
+  override fun setCustomKeyText(view: ReactEditText, @Nullable text: String?) {
+    keyboardView?.setCustomKeyText(text ?: "Tiếp")
+  }
+
+  override fun setCustomKeyBackground(view: ReactEditText, @Nullable background: String?) {
+    keyboardView?.setCustomKeyBackground((background ?: "#d8d8d8").toColorInt())
+  }
+
+  override fun setCustomKeyTextColor(view: ReactEditText, @Nullable textColor: String?) {
+    keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
+  }
+
+  override fun setCustomKeyState(view: ReactEditText, @Nullable state: String?) {
+    keyboardView?.setCustomKeyState(state ?: "default")
+  }
+
+  override fun setKeyboardColor(view: ReactEditText, @Nullable color: Int?) {
+    color?.let { keyboardView?.updateButtonColors(it) }
   }
 
   @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
+      }
     }
 
     keyboardView = CustomKeyboardView(context, editText).apply {
@@ -72,19 +111,34 @@ class RCTInputCalculator : ReactTextInputManager() {
       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) {
-            showKeyboardPopup(view)
+            disableSystemImeFor(view)
+            if (!overlayShowing) {
+              val kb = keyboardView ?: return@runOnUiThread
+              overlayHost.show(
+                anchorView = view,
+                keyboardView = kb,
+                heightPx = calculatorHeight
+              )
+              overlayShowing = true
+            }
           } else {
-            hideKeyboardPopup()
-          }
-          view.setOnKeyListener { v, keyCode, _ ->
-            if (keyCode == KeyEvent.KEYCODE_BACK && hasFocus) {
-              v.clearFocus()
-              true
-            } else false
+            overlayHost.hide()
+            overlayShowing = false
+            enableSystemImeFor(view)
           }
         }
       }
@@ -93,87 +147,44 @@ class RCTInputCalculator : ReactTextInputManager() {
     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()
-    }
+  override fun onDropViewInstance(view: ReactEditText) {
+    super.onDropViewInstance(view)
+    overlayHost.hide()
+    overlayHost.detach()
+    overlayShowing = false
+
   }
 
-  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 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 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 enableSystemImeFor(v: ReactEditText) {
+    v.showSoftInputOnFocus = true
   }
 
-  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)
+  override fun getDelegate(): ViewManagerDelegate<ReactEditText> = mDelegate
 
-    root.animate()
-      ?.translationY(0f)
-      ?.setDuration(animationDuration)
-      ?.start()
+  override fun focus(view: ReactEditText) {
+    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
   }
 
-  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
+  override fun blur(view: ReactEditText) {
+    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
   }
 
+  // Events are emitted from CustomKeyboardView using RCTEventEmitter.
+
   private fun focus() {
-    UiThreadUtil.runOnUiThread {
-      if (!editText.isFocused) editText.requestFocus()
-    }
+    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
   }
 
   private fun blur() {
-    UiThreadUtil.runOnUiThread {
-      if (editText.isFocused) editText.clearFocus()
-    }
+    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
   }
 }

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
+

package/ios/CalculatorKeyboardView.mm

@@ -0,0 +1,231 @@
+#import "CalculatorKeyboardView.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 = [self 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 = [self 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 = [self colorFromHex:_customKeyBackground];
+  [self.customKeyButton setTitleColor:[self colorFromHex:_customKeyTextColor] forState:UIControlStateNormal];
+}
+
+- (void)keyPressed:(UIButton *)sender
+{
+  NSString *key = sender.accessibilityIdentifier;
+  if (!key) {
+    return;
+  }
+  
+  BOOL isCustomKeyCTA = (sender.tag == 1);
+  if (isCustomKeyCTA) {
+    [self.input emitCustomKey];
+    return;
+  }
+  
+  [self.input emitKeyPress:key];
+  
+  if ([key isEqualToString:@"AC"]) {
+    [self.input clearText];
+  } else if ([key isEqualToString:@"back"]) {
+    [self.input onBackSpace];
+  } else if ([key isEqualToString:@"="]) {
+    [self.input calculateResult];
+  } else if ([key isEqualToString:@"+"] || [key isEqualToString:@"-"] || 
+             [key isEqualToString:@"÷"] || [key isEqualToString:@"×"]) {
+    [self.input keyDidPress:[NSString stringWithFormat:@" %@ ", key]];
+  } else {
+    [self.input keyDidPress:key];
+  }
+}
+
+- (UIColor *)colorFromHex:(NSString *)hexString
+{
+  unsigned rgbValue = 0;
+  NSString *cleanHex = [hexString stringByReplacingOccurrencesOfString:@"#" withString:@""];
+  NSScanner *scanner = [NSScanner scannerWithString:cleanHex];
+  [scanner scanHexInt:&rgbValue];
+  
+  return [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16) / 255.0
+                         green:((rgbValue & 0x00FF00) >> 8) / 255.0
+                          blue:(rgbValue & 0x0000FF) / 255.0
+                         alpha:1.0];
+}
+
+@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
+