react-native-transformer-text-input 0.2.0 → 0.4.0

package/lib/typescript/src/formatters/phone-number.d.ts

@@ -12,13 +12,29 @@ export type PhoneNumberTransformerOptions = {
      * @default true
      */
     includeCallingCode?: boolean;
+    /**
+     * International mode: the calling code is part of the editable text and the
+     * country is detected from it as you type (e.g. typing "+44" switches
+     * formatting to the UK). `country` is ignored in this mode. Use
+     * {@link detectCountry} to drive a flag/country indicator from the value.
+     * @default false
+     */
+    international?: boolean;
     /**
      * Enable debug logging for transformer operations.
      * @default false
      */
     debug?: boolean;
 };
+/**
+ * Detect the ISO 3166-1 alpha-2 country for a phone value by its leading
+ * international calling code. Returns the primary country for the code (e.g.
+ * "US" for "+1"), or undefined if no calling code is recognized yet. Runs on
+ * the JS thread — use it to drive a flag/country indicator alongside an
+ * `international` PhoneNumberTransformer.
+ */
+export declare function detectCountry(value: string): string | undefined;
 export declare class PhoneNumberTransformer extends Transformer {
-    constructor({ country, includeCallingCode, debug, }?: PhoneNumberTransformerOptions);
+    constructor({ country, includeCallingCode, international, debug, }?: PhoneNumberTransformerOptions);
 }
 //# sourceMappingURL=phone-number.d.ts.map

package/lib/typescript/src/formatters/phone-number.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number.d.ts","sourceRoot":"","sources":["../../../../src/formatters/phone-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,MAAM,gBAAgB,CAAC;AAG7D,MAAM,MAAM,6BAA6B,GAAG;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAuOF,qBAAa,sBAAuB,SAAQ,WAAW;gBACzC,EACV,OAAc,EACd,kBAAyB,EACzB,KAAa,GACd,GAAE,6BAAkC;CAyKtC"}
+{"version":3,"file":"phone-number.d.ts","sourceRoot":"","sources":["../../../../src/formatters/phone-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,MAAM,gBAAgB,CAAC;AAO7D,MAAM,MAAM,6BAA6B,GAAG;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAmBF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAI/D;AAuOD,qBAAa,sBAAuB,SAAQ,WAAW;gBACzC,EACV,OAAc,EACd,kBAAyB,EACzB,aAAqB,EACrB,KAAa,GACd,GAAE,6BAAkC;CAqStC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-transformer-text-input",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "TextInput component that allows transforming text synchronously with a worklet",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -57,7 +57,7 @@
     "prepare": "bob build",
     "generate:phone-data": "tsx scripts/generate-phone-data.ts",
     "test": "jest",
-    "lint": "yarn lint:eslint && yarn lint:ts && yarn lint:android",
+    "lint": "yarn lint:eslint && yarn lint:ts",
     "lint:ts": "tsc",
     "lint:eslint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:android": "cd example/android && RNTTI_WARNINGS_AS_ERRORS=true ./gradlew :react-native-transformer-text-input:lint --rerun-tasks",

package/src/TransformerTextInput.tsx

@@ -7,57 +7,24 @@ import {
   type ElementRef,
   type Ref,
 } from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  type HostInstance,
-  type TextInputProps,
-} from 'react-native';
-import { type Selection, type Transformer } from './Transformer';
+import { StyleSheet, TextInput, type HostInstance } from 'react-native';
+import { type Selection } from './Transformer';
 import TransformerTextInputDecoratorViewNativeComponent, {
   Commands,
 } from './TransformerTextInputDecoratorViewNativeComponent';
 import { registerTransformer, unregisterTransformer } from './registry';
 import useMergeRefs from './utils/useMergeRefs';
 import { validateSelection } from './selection';
+import {
+  type TransformerTextInputInstance,
+  type TransformerTextInputInstanceMethods,
+  type TransformerTextInputProps,
+} from './TransformerTextInput.types';
 
-type TransformerTextInputInstanceMethods = {
-  /**
-   * Get the current text value.
-   */
-  getValue: () => string;
-  /**
-   * Update the value and/or selection, optionally running the transformer.
-   */
-  update: (options: {
-    /**
-     * New value to apply.
-     */
-    value?: string | null;
-    /**
-     * Optional selection to apply alongside the value.
-     */
-    selection?: { start: number; end: number };
-    /**
-     * Whether to run the transformer on update. Defaults to true.
-     */
-    transform?: boolean;
-  }) => void;
-  /**
-   * Clear the input value without running the transformer.
-   */
-  clear: () => void;
-};
-
-export type TransformerTextInputInstance = HostInstance &
-  TransformerTextInputInstanceMethods;
-
-export type TransformerTextInputProps = Omit<TextInputProps, 'value'> & {
-  /**
-   * Transformer instance used to sync text changes on the UI thread.
-   */
-  transformer: Transformer;
-};
+export type {
+  TransformerTextInputInstance,
+  TransformerTextInputProps,
+} from './TransformerTextInput.types';
 
 export const TransformerTextInput = forwardRef(
   (

package/src/TransformerTextInput.types.ts

@@ -0,0 +1,40 @@
+import { type HostInstance, type TextInputProps } from 'react-native';
+import { type Transformer } from './Transformer';
+
+export type TransformerTextInputInstanceMethods = {
+  /**
+   * Get the current text value.
+   */
+  getValue: () => string;
+  /**
+   * Update the value and/or selection, optionally running the transformer.
+   */
+  update: (options: {
+    /**
+     * New value to apply.
+     */
+    value?: string | null;
+    /**
+     * Optional selection to apply alongside the value.
+     */
+    selection?: { start: number; end: number };
+    /**
+     * Whether to run the transformer on update. Defaults to true.
+     */
+    transform?: boolean;
+  }) => void;
+  /**
+   * Clear the input value without running the transformer.
+   */
+  clear: () => void;
+};
+
+export type TransformerTextInputInstance = HostInstance &
+  TransformerTextInputInstanceMethods;
+
+export type TransformerTextInputProps = Omit<TextInputProps, 'value'> & {
+  /**
+   * Transformer instance used to sync text changes on the UI thread.
+   */
+  transformer: Transformer;
+};

package/src/TransformerTextInput.web.tsx

@@ -0,0 +1,161 @@
+import { forwardRef, useCallback, useMemo, useRef, type Ref } from 'react';
+import { TextInput } from 'react-native';
+import { type Selection } from './Transformer';
+import { computeUncontrolledSelection, validateSelection } from './selection';
+import useMergeRefs from './utils/useMergeRefs';
+import {
+  type TransformerTextInputInstance,
+  type TransformerTextInputInstanceMethods,
+  type TransformerTextInputProps,
+} from './TransformerTextInput.types';
+
+export type {
+  TransformerTextInputInstance,
+  TransformerTextInputProps,
+} from './TransformerTextInput.types';
+
+// The web host node is a DOM input; type only the bits we use so the library's
+// tsconfig doesn't need the `dom` lib.
+type WebInputNode = {
+  value: string;
+  selectionStart: number | null;
+  selectionEnd: number | null;
+  setSelectionRange: (start: number, end: number) => void;
+};
+
+// Web implementation. There is no UI thread, so instead of the native decorator
+// running the transformer worklet on the UI runtime, we run the same transformer
+// synchronously in JS on every change. The input is uncontrolled: the formatted
+// value and caret are written straight to the DOM node in the change handler
+// (mirroring the native side's imperative update), so there's no React
+// re-render and no intermediate paint where the caret jumps to the end. Web is
+// single-threaded, so value and selection land together in one step.
+export const TransformerTextInput = forwardRef(
+  (
+    {
+      transformer,
+      onChangeText,
+      defaultValue,
+      ...others
+    }: TransformerTextInputProps,
+    forwardedRef: Ref<TransformerTextInputInstance>,
+  ) => {
+    const transformedDefaultValue = useMemo(() => {
+      if (defaultValue == null) {
+        return '';
+      }
+      const result = transformer.worklet({
+        value: defaultValue,
+        previousValue: defaultValue,
+        selection: { start: defaultValue.length, end: defaultValue.length },
+        previousSelection: { start: 0, end: 0 },
+      });
+      return result?.value ?? defaultValue;
+    }, [defaultValue, transformer]);
+
+    const valueRef = useRef(transformedDefaultValue);
+    const previousRef = useRef<{ value: string; selection: Selection }>({
+      value: transformedDefaultValue,
+      selection: {
+        start: transformedDefaultValue.length,
+        end: transformedDefaultValue.length,
+      },
+    });
+    const nodeRef = useRef<WebInputNode | null>(null);
+
+    const applyTransform = useCallback(
+      (
+        rawValue: string,
+        rawSelection: Selection,
+        transform: boolean,
+      ): string => {
+        const prev = previousRef.current;
+        const result = transform
+          ? transformer.worklet({
+              value: rawValue,
+              previousValue: prev.value,
+              selection: rawSelection,
+              previousSelection: prev.selection,
+            })
+          : null;
+        const newValue = result?.value ?? rawValue;
+        let newSelection: Selection;
+        if (result?.selection != null) {
+          newSelection = result.selection;
+          validateSelection(newSelection, newValue.length);
+        } else {
+          newSelection = computeUncontrolledSelection(
+            rawValue,
+            newValue,
+            rawSelection.start,
+            rawSelection.end,
+          );
+        }
+        previousRef.current = { value: newValue, selection: newSelection };
+        valueRef.current = newValue;
+        // Write straight to the DOM node — uncontrolled, no React re-render.
+        const node = nodeRef.current;
+        if (node != null) {
+          node.value = newValue;
+          if (typeof node.setSelectionRange === 'function') {
+            node.setSelectionRange(newSelection.start, newSelection.end);
+          }
+        }
+        return newValue;
+      },
+      [transformer],
+    );
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        // On web the DOM caret sits right after the edit when onChangeText
+        // fires; read it so the transformer can map it like the native side.
+        const node = nodeRef.current;
+        const rawSelection: Selection =
+          node != null && typeof node.selectionStart === 'number'
+            ? {
+                start: node.selectionStart,
+                end: node.selectionEnd ?? node.selectionStart,
+              }
+            : { start: text.length, end: text.length };
+        const newValue = applyTransform(text, rawSelection, true);
+        onChangeText?.(newValue);
+      },
+      [applyTransform, onChangeText],
+    );
+
+    const setInputRef = useCallback(
+      (instance: TransformerTextInputInstance | null) => {
+        nodeRef.current = instance as unknown as WebInputNode | null;
+        if (instance != null) {
+          Object.assign(instance, {
+            getValue() {
+              return valueRef.current;
+            },
+            update({ value: nextValue, selection, transform }) {
+              const base = nextValue ?? valueRef.current;
+              const sel = selection ?? { start: base.length, end: base.length };
+              applyTransform(base, sel, transform ?? true);
+            },
+            clear() {
+              this.update({ value: '', transform: false });
+            },
+          } satisfies TransformerTextInputInstanceMethods);
+        }
+      },
+      [applyTransform],
+    );
+
+    const inputRef = useMergeRefs(setInputRef, forwardedRef);
+
+    return (
+      <TextInput
+        // @ts-expect-error web host node carries the instance methods
+        ref={inputRef}
+        defaultValue={transformedDefaultValue}
+        onChangeText={handleChangeText}
+        {...others}
+      />
+    );
+  },
+);

package/src/formatters/phone-data.ts

@@ -5793,3 +5793,238 @@ export const COUNTRY_LIST: CountryPhoneData[] = [
   COUNTRY_PHONE_DATA['ZM']!,
   COUNTRY_PHONE_DATA['ZW']!,
 ];
+
+export const COUNTRY_CALLING_CODES: Record<string, string[]> = {
+  '1': [
+    'US',
+    'AG',
+    'AI',
+    'AS',
+    'BB',
+    'BM',
+    'BS',
+    'CA',
+    'DM',
+    'DO',
+    'GD',
+    'GU',
+    'JM',
+    'KN',
+    'KY',
+    'LC',
+    'MP',
+    'MS',
+    'PR',
+    'SX',
+    'TC',
+    'TT',
+    'VC',
+    'VG',
+    'VI',
+  ],
+  '7': ['RU', 'KZ'],
+  '20': ['EG'],
+  '27': ['ZA'],
+  '30': ['GR'],
+  '31': ['NL'],
+  '32': ['BE'],
+  '33': ['FR'],
+  '34': ['ES'],
+  '36': ['HU'],
+  '39': ['IT', 'VA'],
+  '40': ['RO'],
+  '41': ['CH'],
+  '43': ['AT'],
+  '44': ['GB', 'GG', 'IM', 'JE'],
+  '45': ['DK'],
+  '46': ['SE'],
+  '47': ['NO', 'SJ'],
+  '48': ['PL'],
+  '49': ['DE'],
+  '51': ['PE'],
+  '52': ['MX'],
+  '53': ['CU'],
+  '54': ['AR'],
+  '55': ['BR'],
+  '56': ['CL'],
+  '57': ['CO'],
+  '58': ['VE'],
+  '60': ['MY'],
+  '61': ['AU', 'CC', 'CX'],
+  '62': ['ID'],
+  '63': ['PH'],
+  '64': ['NZ'],
+  '65': ['SG'],
+  '66': ['TH'],
+  '81': ['JP'],
+  '82': ['KR'],
+  '84': ['VN'],
+  '86': ['CN'],
+  '90': ['TR'],
+  '91': ['IN'],
+  '92': ['PK'],
+  '93': ['AF'],
+  '94': ['LK'],
+  '95': ['MM'],
+  '98': ['IR'],
+  '211': ['SS'],
+  '212': ['MA', 'EH'],
+  '213': ['DZ'],
+  '216': ['TN'],
+  '218': ['LY'],
+  '220': ['GM'],
+  '221': ['SN'],
+  '222': ['MR'],
+  '223': ['ML'],
+  '224': ['GN'],
+  '225': ['CI'],
+  '226': ['BF'],
+  '227': ['NE'],
+  '228': ['TG'],
+  '229': ['BJ'],
+  '230': ['MU'],
+  '231': ['LR'],
+  '232': ['SL'],
+  '233': ['GH'],
+  '234': ['NG'],
+  '235': ['TD'],
+  '236': ['CF'],
+  '237': ['CM'],
+  '238': ['CV'],
+  '239': ['ST'],
+  '240': ['GQ'],
+  '241': ['GA'],
+  '242': ['CG'],
+  '243': ['CD'],
+  '244': ['AO'],
+  '245': ['GW'],
+  '246': ['IO'],
+  '247': ['AC'],
+  '248': ['SC'],
+  '249': ['SD'],
+  '250': ['RW'],
+  '251': ['ET'],
+  '252': ['SO'],
+  '253': ['DJ'],
+  '254': ['KE'],
+  '255': ['TZ'],
+  '256': ['UG'],
+  '257': ['BI'],
+  '258': ['MZ'],
+  '260': ['ZM'],
+  '261': ['MG'],
+  '262': ['RE', 'YT'],
+  '263': ['ZW'],
+  '264': ['NA'],
+  '265': ['MW'],
+  '266': ['LS'],
+  '267': ['BW'],
+  '268': ['SZ'],
+  '269': ['KM'],
+  '290': ['SH', 'TA'],
+  '291': ['ER'],
+  '297': ['AW'],
+  '298': ['FO'],
+  '299': ['GL'],
+  '350': ['GI'],
+  '351': ['PT'],
+  '352': ['LU'],
+  '353': ['IE'],
+  '354': ['IS'],
+  '355': ['AL'],
+  '356': ['MT'],
+  '357': ['CY'],
+  '358': ['FI', 'AX'],
+  '359': ['BG'],
+  '370': ['LT'],
+  '371': ['LV'],
+  '372': ['EE'],
+  '373': ['MD'],
+  '374': ['AM'],
+  '375': ['BY'],
+  '376': ['AD'],
+  '377': ['MC'],
+  '378': ['SM'],
+  '380': ['UA'],
+  '381': ['RS'],
+  '382': ['ME'],
+  '383': ['XK'],
+  '385': ['HR'],
+  '386': ['SI'],
+  '387': ['BA'],
+  '389': ['MK'],
+  '420': ['CZ'],
+  '421': ['SK'],
+  '423': ['LI'],
+  '500': ['FK'],
+  '501': ['BZ'],
+  '502': ['GT'],
+  '503': ['SV'],
+  '504': ['HN'],
+  '505': ['NI'],
+  '506': ['CR'],
+  '507': ['PA'],
+  '508': ['PM'],
+  '509': ['HT'],
+  '590': ['GP', 'BL', 'MF'],
+  '591': ['BO'],
+  '592': ['GY'],
+  '593': ['EC'],
+  '594': ['GF'],
+  '595': ['PY'],
+  '596': ['MQ'],
+  '597': ['SR'],
+  '598': ['UY'],
+  '599': ['CW', 'BQ'],
+  '670': ['TL'],
+  '672': ['NF'],
+  '673': ['BN'],
+  '674': ['NR'],
+  '675': ['PG'],
+  '676': ['TO'],
+  '677': ['SB'],
+  '678': ['VU'],
+  '679': ['FJ'],
+  '680': ['PW'],
+  '681': ['WF'],
+  '682': ['CK'],
+  '683': ['NU'],
+  '685': ['WS'],
+  '686': ['KI'],
+  '687': ['NC'],
+  '688': ['TV'],
+  '689': ['PF'],
+  '690': ['TK'],
+  '691': ['FM'],
+  '692': ['MH'],
+  '850': ['KP'],
+  '852': ['HK'],
+  '853': ['MO'],
+  '855': ['KH'],
+  '856': ['LA'],
+  '880': ['BD'],
+  '886': ['TW'],
+  '960': ['MV'],
+  '961': ['LB'],
+  '962': ['JO'],
+  '963': ['SY'],
+  '964': ['IQ'],
+  '965': ['KW'],
+  '966': ['SA'],
+  '967': ['YE'],
+  '968': ['OM'],
+  '970': ['PS'],
+  '971': ['AE'],
+  '972': ['IL'],
+  '973': ['BH'],
+  '974': ['QA'],
+  '975': ['BT'],
+  '976': ['MN'],
+  '977': ['NP'],
+  '992': ['TJ'],
+  '993': ['TM'],
+  '994': ['AZ'],
+  '995': ['GE'],
+  '996': ['KG'],
+  '998': ['UZ'],
+};