@momo-kits/calculator-keyboard 0.167.1-test.2 → 0.168.1-beta.2

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

@@ -3,9 +3,12 @@ package com.momokits.calculatorkeyboard.native
 import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.ColorStateList
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
 import android.text.Editable
+import android.util.DisplayMetrics
 import android.view.Gravity
 import android.view.MotionEvent
 import android.widget.Button
@@ -17,6 +20,8 @@ import androidx.core.graphics.toColorInt
 import com.momokits.calculatorkeyboard.native.utils.CalculatorEngine
 import com.momokits.calculatorkeyboard.native.utils.CalculatorFormatter
 import com.momokits.calculatorkeyboard.R
+import java.net.URL
+import kotlin.concurrent.thread
 
 @SuppressLint("SetTextI18n", "ViewConstructor")
 class CustomKeyboardView(
@@ -181,6 +186,26 @@ class CustomKeyboardView(
             setImageTintList(ColorStateList.valueOf(Color.BLACK))
             setOnClickListener { onKeyPress(key, false) }
             applyImagePressedOpacity()
+            loadBackIcon()
+        }
+    }
+
+    // Swap the bundled fallback icon for the design-system icon once it's downloaded
+    private fun ImageButton.loadBackIcon() {
+        backIconCache?.let { return setImageBitmap(it) }
+
+        thread {
+            val bitmap = runCatching {
+                URL(BACK_ICON_URL).openConnection().apply {
+                    connectTimeout = BACK_ICON_TIMEOUT_MS
+                    readTimeout = BACK_ICON_TIMEOUT_MS
+                }.getInputStream().use(BitmapFactory::decodeStream)
+            }.getOrNull() ?: return@thread
+
+            // Density makes the drawable render at BACK_ICON_SIZE_DP without resampling the bitmap
+            bitmap.density = bitmap.width * DisplayMetrics.DENSITY_DEFAULT / BACK_ICON_SIZE_DP
+            backIconCache = bitmap
+            post { setImageBitmap(bitmap) }
         }
     }
 
@@ -400,4 +425,13 @@ class CustomKeyboardView(
         }
         customKeyButton?.setTextColor(textColor)
     }
+
+    companion object {
+        private const val BACK_ICON_URL = "https://img.mservice.com.vn/app/img/kits/chat_back_space.png"
+        private const val BACK_ICON_SIZE_DP = 24
+        private const val BACK_ICON_TIMEOUT_MS = 10_000
+
+        @Volatile
+        private var backIconCache: Bitmap? = null
+    }
 }

package/ios/CalculatorKeyboardView.mm

@@ -1,6 +1,10 @@
 #import "CalculatorKeyboardView.h"
 #import "Utils.h"
 
+static NSString *const kBackIconURL = @"https://img.mservice.com.vn/app/img/kits/chat_back_space.png";
+static const CGFloat kBackIconSize = 24;
+static UIImage *sBackIcon;
+
 @interface CalculatorKeyboardView ()
 @property (nonatomic, strong) NSArray<NSArray<NSString *> *> *numWithCTAKeys;
 @property (nonatomic, strong) NSArray<NSArray<NSString *> *> *defaultKeys;
@@ -10,6 +14,8 @@
 
 @implementation CalculatorKeyboardView {
   CGFloat _separatorWidth;
+  UIView *_contentView;
+  NSArray<NSArray<UIButton *> *> *_buttonRows;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -85,28 +91,26 @@
   
   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];
+  _contentView = contentView;
   
-  // Set contentView constraints
+  // Set contentView constraints, keeping clear of the side safe area (landscape, iPhone Duo)
   [NSLayoutConstraint activateConstraints:@[
-    [contentView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:_separatorWidth],
-    [contentView.trailingAnchor constraintEqualToAnchor:self.trailingAnchor constant:-_separatorWidth],
+    [contentView.leadingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.leadingAnchor constant:_separatorWidth],
+    [contentView.trailingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.trailingAnchor constant:-_separatorWidth],
     [contentView.topAnchor constraintEqualToAnchor:self.topAnchor constant:_separatorWidth],
     [contentView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-_separatorWidth]
   ]];
   
-  CGFloat yOffset = 0;
+  NSMutableArray<NSArray<UIButton *> *> *buttonRows = [NSMutableArray array];
   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;
+    NSMutableArray<UIButton *> *buttonRow = [NSMutableArray array];
     
     for (NSInteger colIndex = 0; colIndex < row.count; colIndex++) {
       NSString *key = row[colIndex];
@@ -124,22 +128,13 @@
       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 configurationWithPointSize:24 weight:UIImageSymbolWeightBold];
         UIImage *image = [UIImage systemImageNamed:@"delete.backward" withConfiguration:config];
         [button setImage:image forState:UIControlStateNormal];
         button.tintColor = UIColor.blackColor;
+        [self loadBackIconForButton:button];
       }
       
       if ([_specialKeys containsObject:key] || isMainKey) {
@@ -153,7 +148,44 @@
       
       [button addTarget:self action:@selector(keyPressed:) forControlEvents:UIControlEventTouchUpInside];
       [contentView addSubview:button];
+      [buttonRow addObject:button];
+    }
+    
+    [buttonRows addObject:buttonRow];
+  }
+  
+  _buttonRows = buttonRows;
+  [self setNeedsLayout];
+}
+
+// Size the keys from the live keyboard width, which follows the window through
+// rotation, fold and unfold, instead of the screen width at setup
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  
+  CGFloat buttonWidth = (_contentView.bounds.size.width - 4 * _separatorWidth) / 5;
+  CGFloat buttonHeight = (240 - _separatorWidth * 2 - 3 * _separatorWidth) / 4;
+  CGFloat yOffset = 0;
+  
+  for (NSInteger rowIndex = 0; rowIndex < _buttonRows.count; rowIndex++) {
+    NSArray<UIButton *> *row = _buttonRows[rowIndex];
+    CGFloat xOffset = 0;
+    
+    for (NSInteger colIndex = 0; colIndex < row.count; colIndex++) {
+      UIButton *button = row[colIndex];
+      NSString *key = button.accessibilityIdentifier;
+      BOOL isMainKey = (colIndex == 4 && rowIndex == 2);
       
+      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;
       xOffset += buttonFrame.size.width + _separatorWidth;
     }
     
@@ -161,6 +193,32 @@
   }
 }
 
+- (void)loadBackIconForButton:(UIButton *)button
+{
+  if (sBackIcon) {
+    [button setImage:sBackIcon forState:UIControlStateNormal];
+    return;
+  }
+
+  __weak UIButton *weakButton = button;
+  [[NSURLSession.sharedSession dataTaskWithURL:[NSURL URLWithString:kBackIconURL]
+                             completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+    CGImageRef cgImage = [UIImage imageWithData:data].CGImage;
+    if (!cgImage) return;
+
+    // Scale makes the image size kBackIconSize points without redrawing it
+    UIImage *icon = [[UIImage imageWithCGImage:cgImage
+                                         scale:CGImageGetWidth(cgImage) / kBackIconSize
+                                   orientation:UIImageOrientationUp]
+                     imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+
+    dispatch_async(dispatch_get_main_queue(), ^{
+      sBackIcon = icon;
+      [weakButton setImage:icon forState:UIControlStateNormal];
+    });
+  }] resume];
+}
+
 - (void)updateCustomKeyTitle
 {
   if (!self.customKeyButton || !_customKeyText) {

package/ios/InputCalculator.mm

@@ -3,6 +3,7 @@
 
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTUtils.h>
 #import <react/renderer/components/InputCalculatorSpec/InputCalculatorComponentDescriptor.h>
 #import <react/renderer/components/InputCalculatorSpec/EventEmitters.h>
 #import <react/renderer/components/InputCalculatorSpec/Props.h>
@@ -45,9 +46,13 @@ typedef struct {
     _textField.delegate = (id<UITextFieldDelegate>)self;
 
     // Create keyboard view
+    // UIKit sizes the input view to the keyboard width; the keys follow it in layoutSubviews
+    UIWindow *window = RCTKeyWindow();
+    CGFloat keyboardWidth = window ? window.bounds.size.width : UIScreen.mainScreen.bounds.size.width;
     CGFloat bottomInset = [self getBottomInset];
-    CGRect keyboardFrame = CGRectMake(0, 0, UIScreen.mainScreen.bounds.size.width, 240 + bottomInset);
+    CGRect keyboardFrame = CGRectMake(0, 0, keyboardWidth, 240 + bottomInset);
     _keyboardView = [[CalculatorKeyboardView alloc] initWithFrame:keyboardFrame];
+    _keyboardView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
     _keyboardView.input = (id)self; // Bridge pattern
 
     // Set custom keyboard
@@ -94,7 +99,8 @@ typedef struct {
 
 - (CGFloat)getBottomInset
 {
-  UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
+  // key window of the active scene; windows.firstObject is unreliable with the UIScene life cycle
+  UIWindow *window = RCTKeyWindow();
   CGFloat bottom = window.safeAreaInsets.bottom > 0 ? 21 : 0;
   return bottom;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.167.1-test.2",
+    "version": "0.168.1-beta.2",
     "description": "react native calculator keyboard",
     "main": "./src/index.tsx",
     "files": [