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

package/package.json

@@ -1,22 +1,8 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-phuc.15",
+    "version": "0.151.1-beta.2",
     "description": "react native calculator keyboard",
-    "source": "./src/index.tsx",
-    "main": "./lib/commonjs/index.js",
-    "module": "./lib/module/index.js",
-    "exports": {
-        ".": {
-            "import": {
-                "types": "./lib/typescript/module/src/index.d.ts",
-                "default": "./lib/module/index.js"
-            },
-            "require": {
-                "types": "./lib/typescript/commonjs/src/index.d.ts",
-                "default": "./lib/commonjs/index.js"
-            }
-        }
-    },
+    "main": "./src/index.tsx",
     "files": [
         "src",
         "lib",
@@ -40,9 +26,7 @@
         "test": "jest",
         "typecheck": "tsc",
         "lint": "eslint \"**/*.{js,ts,tsx}\"",
-        "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
-        "build": "bob build",
-        "release": "release-it"
+        "build": "echo"
     },
     "keywords": [
         "react-native",
@@ -62,124 +46,30 @@
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
     },
-    "devDependencies": {
-        "@commitlint/config-conventional": "^17.0.2",
-        "@evilmartians/lefthook": "^1.5.0",
-        "@react-native-community/cli": "15.0.1",
-        "@react-native/eslint-config": "^0.73.1",
-        "@release-it/conventional-changelog": "^9.0.2",
-        "@types/jest": "^29.5.5",
-        "@types/react": "^18.2.44",
-        "commitlint": "^17.0.2",
-        "del-cli": "^5.1.0",
-        "eslint": "^8.51.0",
-        "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "jest": "^29.7.0",
-        "prettier": "^3.0.3",
-        "react": "18.3.1",
-        "react-native": "0.76.5",
-        "react-native-builder-bob": "^0.32.0",
-        "release-it": "^17.10.0",
-        "turbo": "^1.10.7",
-        "typescript": "^5.2.2"
-    },
-    "resolutions": {
-        "@types/react": "^18.2.44"
-    },
-    "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-    },
-    "jest": {
-        "preset": "react-native",
-        "modulePathIgnorePatterns": [
-            "<rootDir>/example/node_modules",
-            "<rootDir>/lib/"
-        ]
-    },
-    "commitlint": {
-        "extends": [
-            "@commitlint/config-conventional"
-        ]
-    },
-    "release-it": {
-        "git": {
-            "commitMessage": "chore: release ${version}",
-            "tagName": "v${version}"
-        },
-        "npm": {
-            "publish": true
-        },
-        "github": {
-            "release": true
+    "codegenConfig": {
+        "name": "CalculatorKeyboardSpecs",
+        "type": "components",
+        "jsSrcsDir": "src",
+        "android": {
+            "javaPackageName": "com.calculatorkeyboard"
         },
-        "plugins": {
-            "@release-it/conventional-changelog": {
-                "preset": "angular"
+        "ios": {
+            "componentProvider": {
+                "NativeInputCalculator": "NativeInputCalculator"
             }
         }
     },
-    "eslintConfig": {
-        "root": true,
-        "extends": [
-            "@react-native",
-            "prettier"
-        ],
-        "rules": {
-            "react/react-in-jsx-scope": "off",
-            "prettier/prettier": [
-                "error",
-                {
-                    "quoteProps": "consistent",
-                    "singleQuote": true,
-                    "tabWidth": 2,
-                    "trailingComma": "es5",
-                    "useTabs": false
-                }
-            ]
-        }
-    },
-    "eslintIgnore": [
-        "node_modules/",
-        "lib/"
-    ],
-    "prettier": {
-        "quoteProps": "consistent",
-        "singleQuote": true,
-        "tabWidth": 2,
-        "trailingComma": "es5",
-        "useTabs": false
+    "devDependencies": {
+        "react": "19.0.0",
+        "react-native": "0.80.1"
     },
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "lib",
-        "targets": [
-            [
-                "commonjs",
-                {
-                    "esm": true
-                }
-            ],
-            [
-                "module",
-                {
-                    "esm": true
-                }
-            ],
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json",
-                    "esm": true
-                }
-            ]
-        ]
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "@momo-kits/foundation": "latest"
     },
-    "create-react-native-library": {
-        "type": "legacy-view",
-        "languages": "kotlin-swift",
-        "version": "0.45.5"
+    "engines": {
+        "node": ">=18.0.0"
     },
     "dependencies": {}
 }

package/react-native-calculator-keyboard.podspec

@@ -5,7 +5,7 @@ folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1
 
 Pod::Spec.new do |s|
   s.name         = "react-native-calculator-keyboard"
-  s.version      = "0.0.1"
+  s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]
   s.license      = package["license"]
@@ -14,9 +14,10 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
-  s.resources = "**/Assets/**/*.{json}"
-
+  s.source_files = "ios/**/*.{h,m,mm}"
+  # s.public_header_files = "ios/CalculatorKeyboardView.h"
+  # s.private_header_files = "ios/NativeInputCalculator.h"
+  
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
   if respond_to?(:install_modules_dependencies, true)

package/src/InputCalculatorNativeComponent.ts

@@ -0,0 +1,71 @@
+import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
+import {
+  CodegenTypes,
+  codegenNativeComponent,
+  codegenNativeCommands,
+} from 'react-native';
+
+export type CustomKeyBackground = 'primary' | 'default' | string;
+
+export enum CustomKeyState {
+  Default = 'default',
+  Disable = 'disable',
+}
+
+export enum Mode {
+  NumDefault = 'NumDefault',
+  NumWithCTA = 'NumWithCTA',
+}
+
+export type OnKeyPressEvent = Readonly<{
+  key: string;
+}>;
+
+export type OnChangeEvent = Readonly<{
+  text: string;
+}>;
+
+export type OnResultEvent = Readonly<{
+  result: string;
+}>;
+
+export type TextAttributes = Readonly<{
+  fontSize?: CodegenTypes.Float | undefined;
+  fontWeight?: string | undefined;
+  placeholder?: string | undefined;
+  placeholderTextColor?: string | undefined;
+}>;
+
+export interface NativeInputCalculatorProps extends ViewProps {
+  value?: string;
+  textAttributes?: TextAttributes;
+  mode?: string;
+  customKeyText?: string;
+  customKeyBackground?: string;
+  customKeyTextColor?: string;
+  customKeyState?: string;
+  onChange?: CodegenTypes.BubblingEventHandler<OnChangeEvent>;
+  onKeyPress?: CodegenTypes.BubblingEventHandler<OnKeyPressEvent>;
+  onResult?: CodegenTypes.BubblingEventHandler<OnResultEvent>;
+  onBlur?: CodegenTypes.BubblingEventHandler<{}>;
+  onFocus?: CodegenTypes.BubblingEventHandler<{}>;
+  onCustomKeyEvent?: CodegenTypes.DirectEventHandler<{}>;
+}
+
+export interface NativeInputCalculatorCommands {
+  focus(
+    viewRef: React.ElementRef<HostComponent<NativeInputCalculatorProps>>,
+  ): void;
+  blur(
+    viewRef: React.ElementRef<HostComponent<NativeInputCalculatorProps>>,
+  ): void;
+}
+
+export const Commands = codegenNativeCommands<NativeInputCalculatorCommands>({
+  supportedCommands: ['focus', 'blur'],
+});
+
+export default codegenNativeComponent<NativeInputCalculatorProps>(
+  'NativeInputCalculator',
+);

package/src/index.tsx

@@ -1,28 +1,49 @@
-import React from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+import { ApplicationContext, Colors } from '@momo-kits/foundation';
 import {
-  type ColorValue,
-  findNodeHandle,
   type NativeSyntheticEvent,
-  processColor,
-  requireNativeComponent,
-  type TextInputChangeEventData,
   type TextInputProps,
-  UIManager,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
+import NativeInputCalculator, {
+  OnResultEvent,
+  TextAttributes,
+} from './InputCalculatorNativeComponent';
+import { Commands } from './InputCalculatorNativeComponent';
 
-const NAME = 'RCTInputCalculator';
-const NativeInput = requireNativeComponent<any>(NAME);
+const NativeInput = NativeInputCalculator;
 
 type KeyPressEvent = { nativeEvent: { key: string } };
 
 interface InputCalculatorProps extends TextInputProps {
   text?: string | undefined;
-  keyboardColor?: ColorValue;
+  mode?: Mode;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  onResult?: (e: OnResultEvent) => void;
   onKeyPress?: (e: KeyPressEvent) => void;
   customKeyText?: string | undefined;
-  customKeyBackground?: string | undefined;
-  customKeyState?: string | undefined;
+  customKeyBackground?: CustomKeyBackground;
+  customKeyState?: CustomKeyState;
   onCustomKeyEvent?: () => void;
+  style?: StyleProp<TextStyle>;
+  placeholder?: string | undefined;
+  placeholderTextColor?: string | undefined;
+}
+
+export type CustomKeyBackground = 'primary' | 'default' | string;
+
+export enum CustomKeyState {
+  Default = 'default',
+  Disable = 'disable',
+}
+
+export enum Mode {
+  NumDefault = 'NumDefault',
+  NumWithCTA = 'NumWithCTA',
 }
 
 export type InputCalculatorRef = {
@@ -30,6 +51,30 @@ export type InputCalculatorRef = {
   blur: () => void;
 };
 
+const omitUndefined = <T extends object>(obj: T): T =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([, v]) => v !== undefined),
+  ) as T;
+
+function isEmpty(obj: object | undefined | null) {
+  return !obj || Object.keys(obj).length === 0;
+}
+
+function styleToTextAttributes(
+  style?: StyleProp<TextStyle>,
+  placeholder?: string,
+  placeholderTextColor?: string,
+): Readonly<TextAttributes> {
+  const s = StyleSheet.flatten(style) ?? {};
+  const attrs: TextAttributes = {
+    fontSize: s.fontSize ?? undefined,
+    fontWeight: (s.fontWeight as TextAttributes['fontWeight']) ?? undefined,
+    placeholder,
+    placeholderTextColor,
+  };
+  return Object.freeze(omitUndefined(attrs));
+}
+
 const InputCalculator = React.forwardRef<
   InputCalculatorRef,
   InputCalculatorProps
@@ -37,66 +82,71 @@ const InputCalculator = React.forwardRef<
   (
     {
       customKeyBackground = 'default',
-      keyboardColor = '',
+      mode = Mode.NumDefault,
       customKeyText,
+      onBlur,
+      onFocus,
+      onResult,
       onKeyPress,
-      customKeyState = 'default',
+      customKeyState = CustomKeyState.Default,
       onCustomKeyEvent,
+      style,
       ...props
     },
-    ref
+    ref,
   ) => {
+    const { theme } = useContext(ApplicationContext);
     const nativeRef = React.useRef<any>(null);
 
-    const _onChange = (
-      event: NativeSyntheticEvent<TextInputChangeEventData>
-    ) => {
+    const _onChange = (event: NativeSyntheticEvent<any>) => {
       const currentText = event.nativeEvent.text;
-      props.onChange && props.onChange(event);
-      props.onChangeText && props.onChangeText(currentText);
+      props.onChange?.(event);
+      props.onChangeText?.(currentText);
     };
 
     const text = props.text ?? props.defaultValue ?? '';
-    let keyBackground = '#D8D8D8';
-    let textKeyColor = '#000000';
+    let keyBackground = Colors.black_06;
+    let textKeyColor = Colors.black_20;
 
-    if (customKeyBackground === 'primary') {
-      keyBackground = '#EB2F96';
-      textKeyColor = '#FFFFFF';
-    }
+    if (mode === Mode.NumWithCTA) {
+      if (customKeyBackground === 'primary') {
+        keyBackground = theme.colors.primary;
+        textKeyColor = Colors.black_01;
+      }
 
-    if (customKeyState === 'disable') {
-      keyBackground = '#EBEBF2';
-      textKeyColor = '#FFFFFF';
+      if (customKeyState === CustomKeyState.Disable) {
+        keyBackground = theme.colors.background.disable;
+        textKeyColor = Colors.black_01;
+      }
     }
 
     React.useImperativeHandle(ref, () => ({
       focus() {
-        const node = findNodeHandle(nativeRef.current);
-        if (!node) return;
-        const config = UIManager.getViewManagerConfig(NAME);
-        if (config?.Commands?.focus != null) {
-          UIManager.dispatchViewManagerCommand(node, config.Commands.focus, []);
-        }
+        if (nativeRef.current) Commands.focus(nativeRef.current);
       },
       blur() {
-        const node = findNodeHandle(nativeRef.current);
-        if (!node) return;
-        const config = UIManager.getViewManagerConfig(NAME);
-        if (config?.Commands?.blur != null) {
-          UIManager.dispatchViewManagerCommand(node, config.Commands.blur, []);
-        }
+        if (nativeRef.current) Commands.blur(nativeRef.current);
       },
     }));
 
+    const derivedTA = React.useMemo(
+      () => styleToTextAttributes(style, props.placeholder, props.placeholderTextColor),
+      [style, props.placeholder, props.placeholderTextColor],
+    );
+
     return (
       <NativeInput
         {...props}
+        style={style}
+        textAttributes={isEmpty(derivedTA) ? undefined : derivedTA}
         ref={nativeRef}
         onChange={_onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onResult={onResult}
         onKeyPress={onKeyPress}
         value={text}
-        keybardColor={processColor(keyboardColor)}
+        mode={mode}
         customKeyText={customKeyText}
         customKeyBackground={keyBackground}
         customKeyTextColor={textKeyColor}
@@ -104,7 +154,7 @@ const InputCalculator = React.forwardRef<
         onCustomKeyEvent={onCustomKeyEvent}
       />
     );
-  }
+  },
 );
 
 export default InputCalculator;

package/ios/CalculatorKeyboardView.swift

@@ -1,153 +0,0 @@
-import UIKit
-import Foundation
-
-import UIKit
-import Foundation
-
-class CalculatorKeyboardView: UIView {
-  weak var input: InputCalculator?
-  
-  private let keys: [[String]] = [
-    ["1", "2", "3", "÷", "back"],
-    ["4", "5", "6", "×", "="],
-    ["7", "8", "9", "-", "Xong"],
-    ["000", "0", "+"],
-  ]
-  private let SEPARATOR_WIDTH: CGFloat = 4
-  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "back", "+"]
-  
-  var customKeyText: String? { didSet { updateCustomKeyTitle() } }
-  var customKeyBackground: String? { didSet { updateCustomKeyBackground() } }
-  var customKeyTextColor: String? { didSet { updateCustomKeyBackground() } }
-  var customKeyState: String? { didSet { updateCustomKeyBackground() } }
-  private weak var customKeyButton: UIButton?
-
-  
-  override init(frame: CGRect) {
-    super.init(frame: frame)
-    setup()
-  }
-  
-  required init?(coder aDecoder: NSCoder) {
-    fatalError("init(coder:) has not been implemented")
-  }
-  
-  public func setKeyboardColor(_ color: UIColor) {
-    self.setup(color)
-  }
-  
-  private func setup(_ color: UIColor = UIColor(hex: "#d8d8d8")) {
-    self.subviews.forEach { $0.removeFromSuperview() }
-    
-    backgroundColor = UIColor(hex: "#f2f2f6")
-    let buttonWidth = (UIScreen.main.bounds.width - SEPARATOR_WIDTH * 2 - 4 * SEPARATOR_WIDTH) / 5
-    let buttonHeight: CGFloat = (240 - SEPARATOR_WIDTH * 2 - 3 * SEPARATOR_WIDTH) / 4
-    
-    // Create a wrapper view
-    let contentView = UIView()
-    contentView.translatesAutoresizingMaskIntoConstraints = false
-    addSubview(contentView)
-    
-    // Set contentView constraints
-    NSLayoutConstraint.activate([
-      contentView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: SEPARATOR_WIDTH),
-      contentView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -SEPARATOR_WIDTH),
-      contentView.topAnchor.constraint(equalTo: topAnchor, constant: SEPARATOR_WIDTH),
-      contentView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -SEPARATOR_WIDTH)
-    ])
-    
-    // Add buttons to the wrapper view
-    var yOffset: CGFloat = 0
-    for (rowIndex, row) in keys.enumerated() {
-      var xOffset: CGFloat = 0
-      for (colIndex, key) in row.enumerated() {
-        let isCustomKey = colIndex == 4 && rowIndex == 2
-        let button = UIButton(type: .system)
-        button.backgroundColor = UIColor.white
-        button.layer.cornerRadius = 8
-        let title = isCustomKey ? (customKeyText ?? key) : key
-        button.setTitle(title, for: .normal)
-        button.setTitleColor(.black, for: .normal)
-        button.titleLabel?.font = UIFont.systemFont(ofSize: isCustomKey ? 18 : 24, weight: .medium)
-        button.nativeID = key
-        button.tag = isCustomKey ? 1 : 0
-        
-        var buttonFrame = CGRect(x: xOffset, y: yOffset, width: buttonWidth, height: buttonHeight)
-        if isCustomKey {
-          buttonFrame.size.height = buttonHeight * 2 + SEPARATOR_WIDTH
-        }
-        if key == "000" {
-          buttonFrame.size.width = buttonWidth * 2 + SEPARATOR_WIDTH
-        }
-        
-        button.frame = buttonFrame
-        
-        if key == "back" {
-          button.setTitle("", for: .normal)
-          let image = UIImage(systemName: "delete.backward", withConfiguration: UIImage.SymbolConfiguration(weight: .bold))
-          button.setImage(image, for: .normal)
-          button.tintColor = .black
-        }
-        
-        if specialKeys.contains(key) {
-          button.setTitleColor(.black, for: .normal)
-          button.backgroundColor = color
-        }
-        
-        if isCustomKey {
-          self.customKeyButton = button
-        }
-        
-        button.addTarget(self, action: #selector(keyPressed(_:)), for: .touchUpInside)
-        contentView.addSubview(button)
-        
-        // Adjust xOffset for the next button in the row
-        xOffset += buttonFrame.width + SEPARATOR_WIDTH
-      }
-      // Adjust yOffset for the next row
-      yOffset += buttonHeight + SEPARATOR_WIDTH
-    }
-  }
-  
-  private func updateCustomKeyTitle() {
-      guard let btn = customKeyButton, let title = customKeyText else { return }
-      btn.setTitle(title, for: .normal)
-      btn.setImage(nil, for: .normal)
-    }
-  
-  private func updateCustomKeyBackground() {
-    guard let btn = customKeyButton,
-            let background = customKeyBackground,
-            let textColor = customKeyTextColor,
-            let state = customKeyState else { return }
-    
-   
-    
-    btn.isEnabled = state != "disable"
-    btn.backgroundColor =  UIColor(hex: background)
-    btn.setTitleColor(UIColor(hex: textColor), for: .normal)
-
-  }
-
-  
-  @objc private func keyPressed(_ sender: UIButton) {
-    guard let key = sender.nativeID else { return }
-    let isCustomKey = sender.tag == 1
-    if (isCustomKey) {
-      input?.emitCustomKey()
-      return
-    }
-    
-    input?.emitKeyPress(key)
-    switch key {
-    case "back":
-      input?.onBackSpace()
-    case "=":
-      input?.calculateResult()
-    case "+", "-", "÷", "×":
-      input?.keyDidPress(" \(key) ")
-    default:
-      input?.keyDidPress(key)
-    }
-  }
-}

package/ios/InputCalculator-Bridging-Header.h

@@ -1,23 +0,0 @@
-#import <React/RCTBridgeModule.h>
-#import <React/RCTViewManager.h>
-#import <React/RCTBaseTextInputViewManager.h>
-#import <React/RCTSinglelineTextInputView.h>
-#import <React/RCTUITextField.h>
-#import <React/RCTBaseTextInputViewManager.h>
-
-#import <React/RCTBridge.h>
-#import <React/RCTConvert.h>
-#import <React/RCTFont.h>
-#import <React/RCTShadowView+Layout.h>
-#import <React/RCTShadowView.h>
-#import <React/RCTUIManager.h>
-#import <React/RCTUIManagerObserverCoordinator.h>
-#import <React/RCTUIManagerUtils.h>
-
-#import <React/RCTBaseTextInputShadowView.h>
-#import <React/RCTBaseTextInputView.h>
-#import <React/RCTConvert+Text.h>
-
-@interface Calculator : NSObject <RCTBridgeModule>
-
-@end