React cmp: expose instance ref and input ref to parent

jackocnr · May 17, 2024 · c658f37 · c658f37
1 parent d363453
commit c658f37
Show file tree

Hide file tree

Showing 12 changed files with 968 additions and 1,340 deletions.
diff --git a/grunt/watch.js b/grunt/watch.js
@@ -10,7 +10,7 @@ module.exports = function(grunt) {
     },
     react: {
       files: ["react/src/intl-tel-input/react.tsx", "react/demo/ValidationApp.tsx", "react/demo/SimpleApp.tsx"],
-      tasks: "shell:buildReact"
+      tasks: "react"
     },
     pluginCss: {
       files: ["src/css/flags.scss", "src/css/intlTelInput.scss"],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,8 +56,8 @@
     "jquery": "^3.1.1",
     "load-grunt-config": "^4.0.1",
     "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "region-flags": "https://github.com/fonttools/region-flags/archive/refs/tags/1.2.1.tar.gz",
     "sass": "^1.74.1",
     "time-grunt": "^2.0.0",

diff --git a/react/build/IntlTelInput.cjs b/react/build/IntlTelInput.cjs
@@ -2780,7 +2780,7 @@ var intl_tel_input_default = intlTelInput;
 
 // react/src/intl-tel-input/react.tsx
 var import_react = __toESM(require("react"));
-var IntlTelInput = ({
+var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
   initialValue = "",
   onChangeNumber = () => {
   },
@@ -2793,9 +2793,13 @@ var IntlTelInput = ({
   usePreciseValidation = false,
   initOptions = {},
   inputProps = {}
-}) => {
+}, ref) {
   const inputRef = (0, import_react.useRef)(null);
   const itiRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    getInstance: () => itiRef.current,
+    getInput: () => inputRef.current
+  }));
   const update = () => {
     const num = itiRef.current?.getNumber() || "";
     const countryIso = itiRef.current?.getSelectedCountryData().iso2 || "";
@@ -2837,5 +2841,5 @@ var IntlTelInput = ({
       ...inputProps
     }
   );
-};
+});
 var react_default = IntlTelInput;
diff --git a/react/build/IntlTelInput.d.ts b/react/build/IntlTelInput.d.ts
@@ -976,7 +976,7 @@ declare module "intl-tel-input" {
 declare module "intl-tel-input/react" {
     import { SomeOptions } from "intl-tel-input";
     import React from "react";
-    const IntlTelInput: ({ initialValue, onChangeNumber, onChangeCountry, onChangeValidity, onChangeErrorCode, usePreciseValidation, initOptions, inputProps, }: {
+    type ItiProps = {
         initialValue?: string;
         onChangeNumber?: (number: string) => void;
         onChangeCountry?: (country: string) => void;
@@ -985,7 +985,8 @@ declare module "intl-tel-input/react" {
         usePreciseValidation?: boolean;
         initOptions?: SomeOptions;
         inputProps?: object;
-    }) => React.JSX.Element;
+    };
+    const IntlTelInput: React.ForwardRefExoticComponent<ItiProps & React.RefAttributes<unknown>>;
     export default IntlTelInput;
 }
 declare module "intl-tel-input/utils-compiled" {
@@ -999,7 +1000,7 @@ declare module "intl-tel-input/intlTelInputWithUtils" {
 declare module "intl-tel-input/reactWithUtils" {
     import { SomeOptions } from "intl-tel-input";
     import React from "react";
-    const IntlTelInput: ({ initialValue, onChangeNumber, onChangeCountry, onChangeValidity, onChangeErrorCode, usePreciseValidation, initOptions, inputProps, }: {
+    type ItiProps = {
         initialValue?: string;
         onChangeNumber?: (number: string) => void;
         onChangeCountry?: (country: string) => void;
@@ -1008,6 +1009,7 @@ declare module "intl-tel-input/reactWithUtils" {
         usePreciseValidation?: boolean;
         initOptions?: SomeOptions;
         inputProps?: object;
-    }) => React.JSX.Element;
+    };
+    const IntlTelInput: React.ForwardRefExoticComponent<ItiProps & React.RefAttributes<unknown>>;
     export default IntlTelInput;
 }
diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -2744,8 +2744,8 @@ var intlTelInput = Object.assign(
 var intl_tel_input_default = intlTelInput;
 
 // react/src/intl-tel-input/react.tsx
-import React, { useRef, useEffect } from "react";
-var IntlTelInput = ({
+import React, { useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+var IntlTelInput = forwardRef(function IntlTelInput2({
   initialValue = "",
   onChangeNumber = () => {
   },
@@ -2758,9 +2758,13 @@ var IntlTelInput = ({
   usePreciseValidation = false,
   initOptions = {},
   inputProps = {}
-}) => {
+}, ref) {
   const inputRef = useRef(null);
   const itiRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    getInstance: () => itiRef.current,
+    getInput: () => inputRef.current
+  }));
   const update = () => {
     const num = itiRef.current?.getNumber() || "";
     const countryIso = itiRef.current?.getSelectedCountryData().iso2 || "";
@@ -2802,7 +2806,7 @@ var IntlTelInput = ({
       ...inputProps
     }
   );
-};
+});
 var react_default = IntlTelInput;
 export {
   react_default as default