@arcblock/ux 2.12.34 → 2.12.36

package/lib/PhoneInput/country-select.js

@@ -59,7 +59,7 @@ const CountrySelectInner = /*#__PURE__*/forwardRef(({
       sx: {
         lineHeight: 1.5
       },
-      children: hideDialCode ? value : `+${countryDetail?.dialCode}`
+      children: hideDialCode ? countryDetail?.name : `+${countryDetail?.dialCode}`
     })]
   });
   if (preview) {

package/lib/PhoneInput/index.d.ts

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

package/lib/PhoneInput/index.js

@@ -6,7 +6,22 @@ import isMobilePhone from 'validator/lib/isMobilePhone';
 import CountrySelect from './country-select';
 import { mergeSx } from '../Util/style';
 export function validatePhoneNumber(phone) {
-  return isMobilePhone(phone.replace(/[\s\-()]+/g, ''), 'any', {
+  // 如果没有输入电话号码，返回false
+  if (!phone) return false;
+
+  // 检查是否只有国家区号
+  // 电话号码格式通常为 +区号 后跟电话号码
+  // 如果去除所有格式化字符后，只剩下区号，则认为只有区号
+  const cleanedPhone = phone.replace(/[\s\-()]+/g, '');
+
+  // 使用正则表达式匹配：以+开头，后面全是数字，但长度不超过5（大多数国家区号在1-4位）
+  // 这表示电话号码只有区号部分
+  if (/^\+\d{1,5}$/.test(cleanedPhone)) {
+    return true; // 如果只有区号，则视为有效
+  }
+
+  // 否则使用validator进行完整校验
+  return isMobilePhone(cleanedPhone, 'any', {
     strictMode: true
   });
 }
@@ -17,12 +32,12 @@ function extractPhoneWithoutCode(phone, dialCode) {
   // 先去除区号
   const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
   // 去除非数字字符，但保留括号
-  return phoneWithoutCode.replace(/[^\d()]/g, '');
+  return phoneWithoutCode.replace(/[^\d]/g, '');
 }
 
 // 添加区号到纯号码
 function addCountryCodeToPhone(phone, dialCode) {
-  if (!phone) return '';
+  if (!phone) return `+${dialCode}`;
   return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
 }
 
@@ -30,6 +45,28 @@ function addCountryCodeToPhone(phone, dialCode) {
 function getDialCodeWithoutPlus(dialCode) {
   return dialCode.replace(/^\+/, '');
 }
+
+// 根据ISO2国家代码获取国家信息
+function getCountryInfoByIso2(iso2, property) {
+  // 查找对应的国家数据
+  const countryItem = defaultCountries.find(country => parseCountry(country).iso2 === iso2);
+  if (!countryItem) {
+    return undefined;
+  }
+
+  // 解析国家信息并返回请求的属性
+  return parseCountry(countryItem)[property];
+}
+
+// 根据ISO2国家代码获取区号
+export function getDialCodeByCountry(iso2) {
+  return getCountryInfoByIso2(iso2, 'dialCode') || '';
+}
+
+// 根据ISO2国家代码获取国家名称
+export function getCountryNameByCountry(iso2) {
+  return getCountryInfoByIso2(iso2, 'name') || '';
+}
 export default function PhoneInput({
   value = {
     country: 'us',
@@ -55,7 +92,6 @@ export default function PhoneInput({
   // 使用 react-international-phone 的 hook
   const {
     phone,
-    inputRef,
     country
   } = usePhoneInput({
     defaultCountry: value.country,
@@ -158,7 +194,6 @@ export default function PhoneInput({
       onChange: onPhoneChange,
       placeholder: placeholder,
       className: "phone-input",
-      inputRef: inputRef,
       sx: mergeSx({
         '& .MuiInputBase-input': {
           padding: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.34",
+  "version": "2.12.36",
   "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": "6a16f801fc0fcbbe88888c5854023c647e0012d9",
+  "gitHead": "9cb69f5c89649426b7e204ed9c8697359abfec68",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.34",
-    "@arcblock/nft-display": "^2.12.34",
-    "@arcblock/react-hooks": "^2.12.34",
+    "@arcblock/icons": "^2.12.36",
+    "@arcblock/nft-display": "^2.12.36",
+    "@arcblock/react-hooks": "^2.12.36",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -81,7 +81,7 @@
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
-    "@iconify/react": "^4.1.1",
+    "@iconify/react": "^5.2.0",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "@testing-library/react": "^14.0.0",
     "@types/dompurify": "^3.2.0",

package/src/PhoneInput/country-select.tsx

@@ -71,7 +71,7 @@ const CountrySelectInner = forwardRef(
         sx={{ cursor: preview ? 'default' : 'pointer' }}>
         {hideFlag ? null : <FlagEmoji iso2={value} style={{ display: 'flex', width: 24, color: 'inherit' }} />}
         <Typography component="span" sx={{ lineHeight: 1.5 }}>
-          {hideDialCode ? value : `+${countryDetail?.dialCode}`}
+          {hideDialCode ? countryDetail?.name : `+${countryDetail?.dialCode}`}
         </Typography>
       </Box>
     );

package/src/PhoneInput/index.tsx

@@ -19,7 +19,22 @@ export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChang
 }
 
 export function validatePhoneNumber(phone: string): boolean {
-  return isMobilePhone(phone.replace(/[\s\-()]+/g, ''), 'any', { strictMode: true });
+  // 如果没有输入电话号码，返回false
+  if (!phone) return false;
+
+  // 检查是否只有国家区号
+  // 电话号码格式通常为 +区号 后跟电话号码
+  // 如果去除所有格式化字符后，只剩下区号，则认为只有区号
+  const cleanedPhone = phone.replace(/[\s\-()]+/g, '');
+
+  // 使用正则表达式匹配：以+开头，后面全是数字，但长度不超过5（大多数国家区号在1-4位）
+  // 这表示电话号码只有区号部分
+  if (/^\+\d{1,5}$/.test(cleanedPhone)) {
+    return true; // 如果只有区号，则视为有效
+  }
+
+  // 否则使用validator进行完整校验
+  return isMobilePhone(cleanedPhone, 'any', { strictMode: true });
 }
 
 // 从带区号的电话号码中提取纯号码部分
@@ -28,12 +43,12 @@ function extractPhoneWithoutCode(phone: string, dialCode: string): string {
   // 先去除区号
   const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
   // 去除非数字字符，但保留括号
-  return phoneWithoutCode.replace(/[^\d()]/g, '');
+  return phoneWithoutCode.replace(/[^\d]/g, '');
 }
 
 // 添加区号到纯号码
 function addCountryCodeToPhone(phone: string, dialCode: string): string {
-  if (!phone) return '';
+  if (!phone) return `+${dialCode}`;
   return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
 }
 
@@ -42,6 +57,32 @@ function getDialCodeWithoutPlus(dialCode: string): string {
   return dialCode.replace(/^\+/, '');
 }
 
+// 根据ISO2国家代码获取国家信息
+function getCountryInfoByIso2<T extends keyof ReturnType<typeof parseCountry>>(
+  iso2: CountryIso2,
+  property: T
+): ReturnType<typeof parseCountry>[T] | undefined {
+  // 查找对应的国家数据
+  const countryItem = defaultCountries.find((country) => parseCountry(country).iso2 === iso2);
+
+  if (!countryItem) {
+    return undefined;
+  }
+
+  // 解析国家信息并返回请求的属性
+  return parseCountry(countryItem)[property];
+}
+
+// 根据ISO2国家代码获取区号
+export function getDialCodeByCountry(iso2: CountryIso2): string {
+  return getCountryInfoByIso2(iso2, 'dialCode') || '';
+}
+
+// 根据ISO2国家代码获取国家名称
+export function getCountryNameByCountry(iso2: CountryIso2): string {
+  return getCountryInfoByIso2(iso2, 'name') || '';
+}
+
 export default function PhoneInput({
   value = { country: 'us', phone: '' },
   onChange,
@@ -62,7 +103,7 @@ export default function PhoneInput({
   }, []);
 
   // 使用 react-international-phone 的 hook
-  const { phone, inputRef, country } = usePhoneInput({
+  const { phone, country } = usePhoneInput({
     defaultCountry: value.country,
     value: value.phone,
     countries: defaultCountries,
@@ -158,7 +199,6 @@ export default function PhoneInput({
         onChange={onPhoneChange}
         placeholder={placeholder}
         className="phone-input"
-        inputRef={inputRef}
         sx={mergeSx(
           {
             '& .MuiInputBase-input': {