@momo-kits/calculator-keyboard 0.167.1-beta.88 → 0.167.1-duo.12

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

@@ -3,12 +3,9 @@ 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
@@ -20,8 +17,6 @@ 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(
@@ -186,26 +181,6 @@ 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) }
         }
     }
 
@@ -425,13 +400,4 @@ 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,10 +1,6 @@
 #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;
@@ -14,6 +10,8 @@ static UIImage *sBackIcon;
 
 @implementation CalculatorKeyboardView {
   CGFloat _separatorWidth;
+  UIView *_contentView;
+  NSArray<NSArray<UIButton *> *> *_buttonRows;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -89,28 +87,26 @@ static UIImage *sBackIcon;
   
   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];
@@ -128,23 +124,12 @@ static UIImage *sBackIcon;
       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) {
@@ -158,38 +143,49 @@ static UIImage *sBackIcon;
       
       [button addTarget:self action:@selector(keyPressed:) forControlEvents:UIControlEventTouchUpInside];
       [contentView addSubview:button];
-      
-      xOffset += buttonFrame.size.width + _separatorWidth;
+      [buttonRow addObject:button];
     }
     
-    yOffset += buttonHeight + _separatorWidth;
+    [buttonRows addObject:buttonRow];
   }
+  
+  _buttonRows = buttonRows;
+  [self setNeedsLayout];
 }
 
-- (void)loadBackIconForButton:(UIButton *)button
+// 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
 {
-  if (sBackIcon) {
-    [button setImage:sBackIcon forState:UIControlStateNormal];
-    return;
+  [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;
+    }
+    
+    yOffset += buttonHeight + _separatorWidth;
   }
-
-  __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

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-beta.88",
+    "version": "0.167.1-duo.12",
     "description": "react native calculator keyboard",
     "main": "./src/index.tsx",
     "files": [