@momo-kits/calculator-keyboard 0.167.1-beta.7 → 0.167.1-beta.8

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;
@@ -140,6 +144,7 @@
         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) {
@@ -161,6 +166,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/package.json

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