diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..8871cf2 --- /dev/null +++ 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 new file mode 100644 index 0000000..2d6f3fa --- /dev/null +++ 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 new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/examples/antd5.x-next/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// 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 new file mode 100644 index 0000000..3b8c1a5 --- /dev/null +++ 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 new file mode 100644 index 0000000..2bc24fa --- /dev/null +++ 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 new file mode 100644 index 0000000..23ffb02 --- /dev/null +++ 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 ( + + + {children} + + + ); +} diff --git a/examples/antd5.x-next/src/app/page.tsx b/examples/antd5.x-next/src/app/page.tsx new file mode 100644 index 0000000..ef9019c --- /dev/null +++ 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 ; +} diff --git a/examples/antd5.x-next/tsconfig.json b/examples/antd5.x-next/tsconfig.json new file mode 100644 index 0000000..85cec1e --- /dev/null +++ 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 index bb4ddb9..479e750 100644 --- 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": [ "/examples" ], diff --git a/package.json b/package.json index f8b6c87..513199e 100644 --- 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 index 678d23a..272b721 100644 --- 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(null); const searchRef = useRef(null); const selectedRef = useRef(false); @@ -69,6 +68,7 @@ const PhoneInput = forwardRef(({ const [countryCode, setCountryCode] = useState(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 index 065320e..117bca3 100644 --- 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, + }, })