@arcblock/ux 2.12.45 → 2.12.47

package/lib/Layout/dashboard/index.js

@@ -143,6 +143,7 @@ function Dashboard({
         })
       }), /*#__PURE__*/_jsxs(Box, {
         className: "dashboard-main",
+        id: "arc__dashboard-main",
         children: [showToggleButton && /*#__PURE__*/_jsx(Box, {
           sx: {
             position: 'absolute',
@@ -170,6 +171,7 @@ function Dashboard({
           })
         }), /*#__PURE__*/_jsx(Container, {
           className: "dashboard-content",
+          id: "arc__dashboard-content",
           ...(fullWidth && {
             maxWidth: false
           }),

package/lib/PhoneInput/index.d.ts

@@ -12,7 +12,8 @@ export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChang
     preview?: boolean;
     allowDial?: boolean;
 }
-export declare function validatePhoneNumber(phone: string): boolean;
+export declare function validatePhoneNumber(phone: string, iso2: CountryIso2, dialCode?: string): boolean;
 export declare function getDialCodeByCountry(iso2: CountryIso2): string;
 export declare function getCountryNameByCountry(iso2: CountryIso2): string;
+export declare function detectCountryFromPhone(phoneNumber?: string): CountryIso2 | undefined;
 export default function PhoneInput({ value, onChange, placeholder, countryDisplayOptions, preview, allowDial, ...props }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/PhoneInput/index.js

@@ -1,29 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { Box, TextField, Typography } from '@mui/material';
+import { parsePhoneNumber } from 'awesome-phonenumber';
 import { defaultCountries, usePhoneInput, parseCountry } from 'react-international-phone';
-import isMobilePhone from 'validator/lib/isMobilePhone';
 import CountrySelect from './country-select';
 import { mergeSx } from '../Util/style';
-export function validatePhoneNumber(phone) {
+export function validatePhoneNumber(phone, iso2, dialCode = '') {
   // 如果没有输入电话号码，返回false
   if (!phone) return false;
 
-  // 检查是否只有国家区号
-  // 电话号码格式通常为 +区号 后跟电话号码
   // 如果去除所有格式化字符后，只剩下区号，则认为只有区号
   const cleanedPhone = phone.replace(/[\s\-()]+/g, '');
-
-  // 使用正则表达式匹配：以+开头，后面全是数字，但长度不超过5（大多数国家区号在1-4位）
+  const phoneDialCode = dialCode || getDialCodeByCountry(iso2);
   // 这表示电话号码只有区号部分
-  if (/^\+\d{1,5}$/.test(cleanedPhone)) {
+  if (getDialCodeWithoutPlus(phoneDialCode) === getDialCodeWithoutPlus(cleanedPhone)) {
     return true; // 如果只有区号，则视为有效
   }
 
   // 否则使用validator进行完整校验
-  return isMobilePhone(cleanedPhone, 'any', {
-    strictMode: true
+  const pn = parsePhoneNumber(phone, {
+    regionCode: iso2
   });
+  const cleanedParsedPhone = pn.number?.input.replace(/[\s\-()]+/g, '');
+  return pn.valid && (pn.type === 'mobile' || pn.type === 'fixed-line-or-mobile') && cleanedParsedPhone === pn.number?.e164;
 }
 
 // 从带区号的电话号码中提取纯号码部分
@@ -32,7 +31,7 @@ function extractPhoneWithoutCode(phone, dialCode) {
   // 先去除区号
   const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
   // 去除非数字字符，但保留括号
-  return phoneWithoutCode.replace(/[^\d]/g, '');
+  return phoneWithoutCode;
 }
 
 // 添加区号到纯号码
@@ -67,6 +66,44 @@ export function getDialCodeByCountry(iso2) {
 export function getCountryNameByCountry(iso2) {
   return getCountryInfoByIso2(iso2, 'name') || '';
 }
+
+// 根据手机号识别国家，返回国家的 iso2 码
+// 如果手机号带有区号，通过 parsePhoneNumber 识别
+// 如果手机号不带区号，通过碰撞识别
+export function detectCountryFromPhone(phoneNumber) {
+  try {
+    if (!phoneNumber) return undefined;
+
+    // 如果已经带了+号，尝试从前缀匹配
+    if (phoneNumber.startsWith('+')) {
+      const parsedPhone = parsePhoneNumber(phoneNumber);
+      if (parsedPhone.valid) {
+        return parsedPhone.regionCode.toLowerCase();
+      }
+      for (const country of defaultCountries) {
+        const parsed = parseCountry(country);
+        if (phoneNumber.startsWith(`+${parsed.dialCode}`)) {
+          const phoneWithCode = phoneNumber;
+          // 验证该号码是否有效
+          if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
+            return parsed.iso2;
+          }
+        }
+      }
+    } else {
+      for (const country of defaultCountries) {
+        const parsed = parseCountry(country);
+        const phoneWithCode = `+${parsed.dialCode}${phoneNumber}`;
+        if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
+          return parsed.iso2;
+        }
+      }
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}
 export default function PhoneInput({
   value = {
     country: 'us',
@@ -131,7 +168,7 @@ export default function PhoneInput({
   });
 
   // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
-  const displayPhone = useMemo(() => phone ? phone.replace(/[^\d]/g, '') : extractPhoneWithoutCode(value.phone, currentDialCode), [phone, value.phone, currentDialCode]);
+  const displayPhone = useMemo(() => phone || extractPhoneWithoutCode(value.phone, currentDialCode), [phone, value.phone, currentDialCode]);
 
   // 处理国家变更
   const onCountryChange = newCountry => {
@@ -141,7 +178,7 @@ export default function PhoneInput({
 
   // 预览模式
   if (preview) {
-    const isValid = phone && validatePhoneNumber(phone);
+    const isValid = phone && validatePhoneNumber(phone, country);
     const canDial = allowDial && isValid;
     return /*#__PURE__*/_jsxs(Box, {
       display: "flex",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.45",
+  "version": "2.12.47",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "dba0f3cdf67f80855a492dc43a7485724a2d7940",
+  "gitHead": "f8b62d37754f4254c8f2961eb778ca2ce71264ee",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.45",
-    "@arcblock/nft-display": "^2.12.45",
-    "@arcblock/react-hooks": "^2.12.45",
+    "@arcblock/icons": "^2.12.47",
+    "@arcblock/nft-display": "^2.12.47",
+    "@arcblock/react-hooks": "^2.12.47",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -87,6 +87,7 @@
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",
     "ahooks": "^3.7.10",
+    "awesome-phonenumber": "^7.4.0",
     "axios": "^1.7.5",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.3.2",

package/src/Layout/dashboard/index.tsx

@@ -136,7 +136,7 @@ function Dashboard({
             </Box>
           )}
         </Hidden>
-        <Box className="dashboard-main">
+        <Box className="dashboard-main" id="arc__dashboard-main">
           {showToggleButton && (
             <Box
               sx={{
@@ -161,7 +161,7 @@ function Dashboard({
               )}
             </Box>
           )}
-          <Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
+          <Container className="dashboard-content" id="arc__dashboard-content" {...(fullWidth && { maxWidth: false })}>
             {children}
           </Container>
           {footerVisible && <Footer {...footerProps} />}

package/src/PhoneInput/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Box, TextField, TextFieldProps, Typography } from '@mui/material';
+import { parsePhoneNumber } from 'awesome-phonenumber';
 import { defaultCountries, CountryIso2, usePhoneInput, parseCountry } from 'react-international-phone';
-import isMobilePhone from 'validator/lib/isMobilePhone';
 import CountrySelect, { CountryDisplayOptions } from './country-select';
 import { mergeSx } from '../Util/style';
 
@@ -18,23 +18,25 @@ export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChang
   allowDial?: boolean; // 是否允许拨号, 只在 preview 为 true 时有效
 }
 
-export function validatePhoneNumber(phone: string): boolean {
+export function validatePhoneNumber(phone: string, iso2: CountryIso2, dialCode: string = ''): boolean {
   // 如果没有输入电话号码，返回false
   if (!phone) return false;
 
-  // 检查是否只有国家区号
-  // 电话号码格式通常为 +区号 后跟电话号码
   // 如果去除所有格式化字符后，只剩下区号，则认为只有区号
   const cleanedPhone = phone.replace(/[\s\-()]+/g, '');
 
-  // 使用正则表达式匹配：以+开头，后面全是数字，但长度不超过5（大多数国家区号在1-4位）
+  const phoneDialCode = dialCode || getDialCodeByCountry(iso2);
   // 这表示电话号码只有区号部分
-  if (/^\+\d{1,5}$/.test(cleanedPhone)) {
+  if (getDialCodeWithoutPlus(phoneDialCode) === getDialCodeWithoutPlus(cleanedPhone)) {
     return true; // 如果只有区号，则视为有效
   }
 
   // 否则使用validator进行完整校验
-  return isMobilePhone(cleanedPhone, 'any', { strictMode: true });
+  const pn = parsePhoneNumber(phone, { regionCode: iso2 });
+  const cleanedParsedPhone = pn.number?.input.replace(/[\s\-()]+/g, '');
+  return (
+    pn.valid && (pn.type === 'mobile' || pn.type === 'fixed-line-or-mobile') && cleanedParsedPhone === pn.number?.e164
+  );
 }
 
 // 从带区号的电话号码中提取纯号码部分
@@ -43,7 +45,7 @@ function extractPhoneWithoutCode(phone: string, dialCode: string): string {
   // 先去除区号
   const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
   // 去除非数字字符，但保留括号
-  return phoneWithoutCode.replace(/[^\d]/g, '');
+  return phoneWithoutCode;
 }
 
 // 添加区号到纯号码
@@ -83,6 +85,44 @@ export function getCountryNameByCountry(iso2: CountryIso2): string {
   return getCountryInfoByIso2(iso2, 'name') || '';
 }
 
+// 根据手机号识别国家，返回国家的 iso2 码
+// 如果手机号带有区号，通过 parsePhoneNumber 识别
+// 如果手机号不带区号，通过碰撞识别
+export function detectCountryFromPhone(phoneNumber?: string): CountryIso2 | undefined {
+  try {
+    if (!phoneNumber) return undefined;
+
+    // 如果已经带了+号，尝试从前缀匹配
+    if (phoneNumber.startsWith('+')) {
+      const parsedPhone = parsePhoneNumber(phoneNumber);
+      if (parsedPhone.valid) {
+        return parsedPhone.regionCode.toLowerCase() as CountryIso2;
+      }
+      for (const country of defaultCountries) {
+        const parsed = parseCountry(country);
+        if (phoneNumber.startsWith(`+${parsed.dialCode}`)) {
+          const phoneWithCode = phoneNumber;
+          // 验证该号码是否有效
+          if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
+            return parsed.iso2;
+          }
+        }
+      }
+    } else {
+      for (const country of defaultCountries) {
+        const parsed = parseCountry(country);
+        const phoneWithCode = `+${parsed.dialCode}${phoneNumber}`;
+        if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
+          return parsed.iso2;
+        }
+      }
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 export default function PhoneInput({
   value = { country: 'us', phone: '' },
   onChange,
@@ -148,7 +188,7 @@ export default function PhoneInput({
 
   // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
   const displayPhone = useMemo(
-    () => (phone ? phone.replace(/[^\d]/g, '') : extractPhoneWithoutCode(value.phone, currentDialCode)),
+    () => phone || extractPhoneWithoutCode(value.phone, currentDialCode),
     [phone, value.phone, currentDialCode]
   );
 
@@ -160,7 +200,7 @@ export default function PhoneInput({
 
   // 预览模式
   if (preview) {
-    const isValid = phone && validatePhoneNumber(phone);
+    const isValid = phone && validatePhoneNumber(phone, country);
     const canDial = allowDial && isValid;
 
     return (