Implement support for localized querying (GH-111)

typesnippet · Nov 14, 2024 · 97d0b56 · 97d0b56
2 parents 0c2ed2b + c0cd71b
commit 97d0b56
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 6 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                targets: {
+                    node: "current",
+                },
+            },
+        ],
+    ],
+};
diff --git a/examples/antd5.x-next/.gitignore b/examples/antd5.x-next/.gitignore
@@ -0,0 +1,12 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+*-lock.json
+*.lock
+
+# next.js
+/.next/
+
+# production
+/build
diff --git a/examples/antd5.x-next/next-env.d.ts b/examples/antd5.x-next/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/antd5.x-next/next.config.mjs b/examples/antd5.x-next/next.config.mjs
@@ -0,0 +1,3 @@
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/examples/antd5.x-next/package.json b/examples/antd5.x-next/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "antd5.x-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "antd": "^5.21.3",
+    "antd-phone-input": "^0.3.10",
+    "next": "^13.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5"
+  }
+}
diff --git a/examples/antd5.x-next/src/app/layout.tsx b/examples/antd5.x-next/src/app/layout.tsx
@@ -0,0 +1,11 @@
+import {ReactNode} from "react";
+
+export default function RootLayout({children}: Readonly<{ children: ReactNode }>) {
+    return (
+        <html lang="en">
+        <body>
+        {children}
+        </body>
+        </html>
+    );
+}
diff --git a/examples/antd5.x-next/src/app/page.tsx b/examples/antd5.x-next/src/app/page.tsx
@@ -0,0 +1,7 @@
+import dynamic from "next/dynamic";
+
+const PhoneInput = dynamic(() => import("antd-phone-input"), {ssr: false});
+
+export default function Home() {
+    return <PhoneInput/>;
+}
diff --git a/examples/antd5.x-next/tsconfig.json b/examples/antd5.x-next/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/jestconfig.json b/jestconfig.json
@@ -1,11 +1,15 @@
 {
   "transform": {
-    "^.+\\.tsx?$": "ts-jest"
+    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.jsx?$": "babel-jest"
   },
   "testRegex": "/tests/.*\\.test\\.(tsx?)$",
   "moduleNameMapper": {
     "^antd/es/(.+)$": "antd/lib/$1"
   },
+  "transformIgnorePatterns": [
+    "/node_modules/(?!(react-phone-hooks)/)"
+  ],
   "modulePathIgnorePatterns": [
     "<rootDir>/examples"
   ],

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.10",
+  "version": "0.3.11",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [
@@ -78,16 +78,21 @@
     "react": ">=16"
   },
   "dependencies": {
-    "react-phone-hooks": "^0.1.11"
+    "react-phone-hooks": "^0.1.12"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.7",
     "@types/react": "^18.2.34",
     "antd": "*",
+    "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "tsx": "^3.12.10",

diff --git a/src/index.tsx b/src/index.tsx
@@ -57,9 +57,8 @@ const PhoneInput = forwardRef(({
                                    ...antInputProps
                                }: PhoneInputProps, forwardedRef: any) => {
     const formInstance = useFormInstance();
-    const {locale = {}} = useContext(ConfigContext);
+    const {locale = {}, getPrefixCls} = useContext(ConfigContext);
     const formContext = useContext(FormContext);
-    const {getPrefixCls} = useContext(ConfigContext);
     const inputRef = useRef<any>(null);
     const searchRef = useRef<any>(null);
     const selectedRef = useRef<boolean>(false);
@@ -69,6 +68,7 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
+        locale: localeIdentifier,
         searchNotFound = defaultSearchNotFound,
         searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
@@ -92,6 +92,7 @@ const PhoneInput = forwardRef(({
         excludeCountries,
         preferredCountries,
         disableParentheses,
+        locale: localeIdentifier,
     });
 
     const {

diff --git a/src/locale.ts b/src/locale.ts
@@ -79,5 +79,8 @@ type Locale = keyof typeof locale;
 
 export default (lang: Locale) => ({
     ...locale[lang],
-    PhoneInput: (phoneLocale as any)[lang],
+    PhoneInput: {
+        ...(phoneLocale as any)[lang],
+        locale: lang,
+    },
 })