) => {
+ onInputMaskHandler(event);
handleInput(event);
- format(event);
- }, [format, handleInput])
+ }, [onInputMaskHandler, handleInput])
const onMount = useCallback((value: PhoneNumber) => {
setFieldValue(value);
handleMount(value);
}, [handleMount, setFieldValue])
+ const ref = useCallback((node: any) => {
+ [forwardedRef, inputRef].forEach((ref) => {
+ if (typeof ref === "function") ref(node);
+ else if (ref != null) ref.current = node;
+ })
+ }, [forwardedRef])
+
useEffect(() => {
if (initiatedRef.current) return;
initiatedRef.current = true;
@@ -224,12 +136,12 @@ const PhoneInput = forwardRef(({
if (!initialValue.startsWith(metadata?.[2] as string)) {
initialValue = metadata?.[2] as string;
}
- const formattedNumber = displayFormat(clean(initialValue).join(""));
+ const formattedNumber = getFormattedNumber(initialValue, pattern);
const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList);
onMount({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)});
- setCountryCode(phoneMetadata.isoCode as keyof typeof validations);
+ setCountryCode(phoneMetadata.isoCode as any);
setValue(formattedNumber);
- }, [clean, countriesList, metadata, onMount, value])
+ }, [countriesList, metadata, onMount, pattern, setValue, value])
const countriesSelect = useMemo(() => (
))}
- ), [selectValue, disableDropdown, minWidth, searchNotFound, countriesList, setFieldValue, enableSearch, searchPlaceholder])
+ ), [selectValue, disableDropdown, minWidth, searchNotFound, countriesList, setFieldValue, setValue, enableSearch, searchPlaceholder])
return (
{
- /** Inject the given `cssText` in the document head */
- const style = document.createElement("style");
- style.setAttribute("type", "text/css");
+import {injectStyles, jsonToCss} from "react-phone-hooks/styles";
+import commonStyles from "react-phone-hooks/stylesheet.json";
- if ((style as any).styleSheet) {
- (style as any).styleSheet.cssText = cssText;
- } else {
- style.appendChild(document.createTextNode(cssText));
- }
+import customStyles from "./resources/stylesheet.json";
- document.head.appendChild(style);
-}
+export const injectMergedStyles = () => injectStyles(jsonToCss(Object.assign(commonStyles, customStyles)));
diff --git a/src/types.ts b/src/types.ts
index 6db2c5d..eb0807b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,14 +1,8 @@
import {ChangeEvent, KeyboardEvent} from "react";
-import {InputProps} from "antd/lib/input";
+import types from "react-phone-hooks/types";
+import {InputProps} from "antd/es/input";
-export interface PhoneNumber {
- countryCode?: number | null;
- areaCode?: string | null;
- phoneNumber?: string | null;
- isoCode?: string;
-
- valid?(strict?: boolean): boolean;
-}
+export type PhoneNumber = types.PhoneNumber;
export interface PhoneInputProps extends Omit {
value?: PhoneNumber | string;
diff --git a/tsconfig.json b/tsconfig.json
index 53fb28b..5c792b7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,6 @@
},
"exclude": [
"node_modules",
- "resources",
"examples",
"scripts",
"tests"