@momo-kits/calculator-keyboard 0.150.2-phuc.13 → 0.151.1-beta.1

package/package.json

@@ -1,22 +1,8 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-phuc.13",
+    "version": "0.151.1-beta.1",
     "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,62 @@
+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 TextAttributes = Readonly<{
+  fontSize?: CodegenTypes.Float;
+  fontWeight?: string;
+}>;
+
+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>;
+  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,102 +1,144 @@
-import React from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+import { ApplicationContext, Colors } from '@momo-kits/foundation';
 import {
-    type NativeSyntheticEvent,
-    type TextInputChangeEventData,
-    type TextInputProps,
-    type ColorValue,
-    processColor,
-    UIManager,
-    findNodeHandle,
+  type NativeSyntheticEvent,
+  type TextInputProps,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
-import { requireNativeComponent } from 'react-native';
+import NativeInputCalculator, {
+  TextAttributes,
+} from './InputCalculatorNativeComponent';
+import { Commands } from './InputCalculatorNativeComponent';
 
-const NAME = 'RCTInputCalculator';
-const NativeInput = requireNativeComponent<any>(NAME);
+const NativeInput = NativeInputCalculator;
 
 type KeyPressEvent = { nativeEvent: { key: string } };
 
-export enum CustomKeyBackground {
-    Default = 0, Primary = 1
+interface InputCalculatorProps extends TextInputProps {
+  text?: string | undefined;
+  mode?: Mode;
+  onKeyPress?: (e: KeyPressEvent) => void;
+  customKeyText?: string | undefined;
+  customKeyBackground?: CustomKeyBackground;
+  customKeyState?: CustomKeyState;
+  onCustomKeyEvent?: () => void;
+  style?: StyleProp<TextStyle>;
 }
 
+export type CustomKeyBackground = 'primary' | 'default' | string;
+
 export enum CustomKeyState {
-    Default = 0, Disable = 1
+  Default = 'default',
+  Disable = 'disable',
 }
 
-interface InputCalculatorProps extends TextInputProps {
-    text?: string | undefined;
-    keyboardColor?: ColorValue;
-    onKeyPress?: (e: KeyPressEvent) => void;
-    customKeyText?: string | undefined;
-    customKeyBackground?: CustomKeyBackground;
-    customKeyState?: CustomKeyState;
-    onCustomKeyEvent?: () => void;
+export enum Mode {
+  NumDefault = 'NumDefault',
+  NumWithCTA = 'NumWithCTA',
 }
 
 export type InputCalculatorRef = {
-    focus: () => void;
-    blur: () => void;
+  focus: () => void;
+  blur: () => void;
 };
 
-const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProps>(
-    (props, ref) => {
-        const nativeRef = React.useRef<any>(null);
-
-        const _onChange = (
-            event: NativeSyntheticEvent<TextInputChangeEventData>
-        ) => {
-            const currentText = event.nativeEvent.text;
-            props.onChange && props.onChange(event);
-            props.onChangeText && props.onChangeText(currentText);
-        };
-
-        const _onKeyPress = React.useCallback((e: any) => {
-            props.onKeyPress?.(e as KeyPressEvent);
-        }, [props.onKeyPress]);
-
-        const _onCustomKeyEvent = React.useCallback(() => {
-            props.onCustomKeyEvent?.();
-        }, [props.onCustomKeyEvent]);
-
-        const text = props.text ?? props.defaultValue ?? '';
-        const customKeyBackground = props.customKeyBackground == 0 ? "#D8D8D8" : "#EB2F96"
-        const customKeyTextColor = props.customKeyBackground == 0 ? "#FFFFFF" : "#000000"
-
-        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, []);
-                }
-            },
-            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, []);
-                }
-            },
-        }));
-
-        return (
-            <NativeInput
-                {...props}
-                ref={nativeRef}
-                onChange={_onChange}
-                onKeyPress={_onKeyPress}
-                value={text}
-                keybardColor={processColor(props.keyboardColor)}
-                customKeyText={props.customKeyText}
-                customKeyBackground={customKeyBackground}
-                customKeyTextColor={customKeyTextColor}
-                customKeyState={props.customKeyState}
-                onCustomKeyEvent={_onCustomKeyEvent}
-            />
-        );
+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;
+}
+
+export function styleToTextAttributes(
+  style?: StyleProp<TextStyle>,
+): Readonly<TextAttributes> {
+  const s = StyleSheet.flatten(style) ?? {};
+  const attrs: TextAttributes = {
+    fontSize: s.fontSize ?? undefined,
+    fontWeight: (s.fontWeight as TextAttributes['fontWeight']) ?? undefined,
+  };
+  return Object.freeze(omitUndefined(attrs));
+}
+
+const InputCalculator = React.forwardRef<
+  InputCalculatorRef,
+  InputCalculatorProps
+>(
+  (
+    {
+      customKeyBackground = 'default',
+      mode = Mode.NumDefault,
+      customKeyText,
+      onKeyPress,
+      customKeyState = CustomKeyState.Default,
+      onCustomKeyEvent,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useContext(ApplicationContext);
+    const nativeRef = React.useRef<any>(null);
+
+    const _onChange = (event: NativeSyntheticEvent<any>) => {
+      const currentText = event.nativeEvent.text;
+      props.onChange?.(event);
+      props.onChangeText?.(currentText);
+    };
+
+    const text = props.text ?? props.defaultValue ?? '';
+    let keyBackground = Colors.black_06;
+    let textKeyColor = Colors.black_20;
+
+    if (mode === Mode.NumWithCTA) {
+      if (customKeyBackground === 'primary') {
+        keyBackground = theme.colors.primary;
+        textKeyColor = Colors.black_01;
+      }
+
+      if (customKeyState === CustomKeyState.Disable) {
+        keyBackground = theme.colors.background.disable;
+        textKeyColor = Colors.black_01;
+      }
     }
+
+    React.useImperativeHandle(ref, () => ({
+      focus() {
+        if (nativeRef.current) Commands.focus(nativeRef.current);
+      },
+      blur() {
+        if (nativeRef.current) Commands.blur(nativeRef.current);
+      },
+    }));
+
+    const derivedTA = React.useMemo(
+      () => styleToTextAttributes(style),
+      [style],
+    );
+
+    return (
+      <NativeInput
+        {...props}
+        style={style}
+        textAttributes={isEmpty(derivedTA) ? undefined : derivedTA}
+        ref={nativeRef}
+        onChange={_onChange}
+        onKeyPress={onKeyPress}
+        value={text}
+        mode={mode}
+        customKeyText={customKeyText}
+        customKeyBackground={keyBackground}
+        customKeyTextColor={textKeyColor}
+        customKeyState={customKeyState}
+        onCustomKeyEvent={onCustomKeyEvent}
+      />
+    );
+  },
 );
 
 export default InputCalculator;