@arcblock/ux 2.12.41 → 2.12.43

package/lib/PhoneInput/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Box, TextField, Typography } from '@mui/material';
 import { defaultCountries, usePhoneInput, parseCountry } from 'react-international-phone';
 import isMobilePhone from 'validator/lib/isMobilePhone';
@@ -88,60 +88,55 @@ export default function PhoneInput({
     });
     return map;
   }, []);
+  const [previewValue, setPreviewValue] = useState(value);
+  const handleValueChange = useCallback(data => {
+    if (!preview && onChange) {
+      const newValue = {
+        ...value,
+        ...data
+      };
+      const countryData = countryMap.get(newValue.country);
+      if (countryData) {
+        newValue.phone = addCountryCodeToPhone(newValue.phone, getDialCodeWithoutPlus(countryData.dialCode));
+      }
+      onChange(newValue);
+    }
+  }, [onChange, preview, value, countryMap]);
+
+  // 获取当前国家的区号（不带+号）
+  const currentDialCode = useMemo(() => {
+    const countryData = countryMap.get(value.country);
+    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
+  }, [value.country, countryMap]);
 
   // 使用 react-international-phone 的 hook
   const {
     phone,
-    country
+    country,
+    handlePhoneValueChange,
+    setCountry
   } = usePhoneInput({
     defaultCountry: value.country,
-    value: value.phone,
+    value: extractPhoneWithoutCode(value.phone, currentDialCode),
     countries: defaultCountries,
+    disableDialCodeAndPrefix: true,
     onChange: data => {
-      if (!preview && onChange) {
-        onChange({
-          country: data.country,
-          phone: data.phone
-        });
-      }
+      const newData = {
+        ...data,
+        phone: previewValue.country !== data.country && !data.phone ? extractPhoneWithoutCode(value.phone, currentDialCode) : data.phone
+      };
+      setPreviewValue(newData);
+      handleValueChange(newData);
     }
   });
 
-  // 获取当前国家的区号（不带+号）
-  const currentDialCode = useMemo(() => {
-    const countryData = countryMap.get(country);
-    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
-  }, [country, countryMap]);
-
   // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
-  const displayPhone = useMemo(() => extractPhoneWithoutCode(phone, currentDialCode), [phone, currentDialCode]);
-
-  // 创建更新后的 PhoneValue 对象
-  const createUpdatedPhoneValue = (countryIso2, phoneWithoutCode) => {
-    const countryData = countryMap.get(countryIso2);
-    if (!countryData) return {
-      country: countryIso2,
-      phone: ''
-    };
-    const dialCode = getDialCodeWithoutPlus(countryData.dialCode);
-    return {
-      country: countryIso2,
-      phone: addCountryCodeToPhone(phoneWithoutCode, dialCode)
-    };
-  };
-
-  // 处理电话号码变更
-  const onPhoneChange = e => {
-    if (preview) return;
-    // 去除用户输入中的非数字字符，但保留括号
-    const cleanedValue = e.target.value.replace(/[^\d()]/g, '');
-    onChange?.(createUpdatedPhoneValue(country, cleanedValue));
-  };
+  const displayPhone = useMemo(() => phone ? phone.replace(/[^\d]/g, '') : extractPhoneWithoutCode(value.phone, currentDialCode), [phone, value.phone, currentDialCode]);
 
   // 处理国家变更
   const onCountryChange = newCountry => {
     if (preview) return;
-    onChange?.(createUpdatedPhoneValue(newCountry, displayPhone));
+    setCountry(newCountry);
   };
 
   // 预览模式
@@ -191,7 +186,7 @@ export default function PhoneInput({
     }), /*#__PURE__*/_jsx(TextField, {
       ...props,
       value: displayPhone,
-      onChange: onPhoneChange,
+      onChange: handlePhoneValueChange,
       placeholder: placeholder,
       className: "phone-input",
       sx: mergeSx({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.41",
+  "version": "2.12.43",
   "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": "7330c7db64e3ff07abfc8360b8ee1e396ab0c8c2",
+  "gitHead": "dfe5344490260529ec3b7a997d9925ee25c9613f",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.41",
-    "@arcblock/nft-display": "^2.12.41",
-    "@arcblock/react-hooks": "^2.12.41",
+    "@arcblock/icons": "^2.12.43",
+    "@arcblock/nft-display": "^2.12.43",
+    "@arcblock/react-hooks": "^2.12.43",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/PhoneInput/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Box, TextField, TextFieldProps, Typography } from '@mui/material';
 import { defaultCountries, CountryIso2, usePhoneInput, parseCountry } from 'react-international-phone';
 import isMobilePhone from 'validator/lib/isMobilePhone';
@@ -102,54 +102,60 @@ export default function PhoneInput({
     return map;
   }, []);
 
-  // 使用 react-international-phone 的 hook
-  const { phone, country } = usePhoneInput({
-    defaultCountry: value.country,
-    value: value.phone,
-    countries: defaultCountries,
-    onChange: (data) => {
+  const [previewValue, setPreviewValue] = useState(value);
+
+  const handleValueChange = useCallback(
+    (data: PhoneValue) => {
       if (!preview && onChange) {
-        onChange({
-          country: data.country,
-          phone: data.phone,
-        });
+        const newValue = {
+          ...value,
+          ...data,
+        };
+        const countryData = countryMap.get(newValue.country);
+        if (countryData) {
+          newValue.phone = addCountryCodeToPhone(newValue.phone, getDialCodeWithoutPlus(countryData.dialCode));
+        }
+        onChange(newValue);
       }
     },
-  });
+    [onChange, preview, value, countryMap]
+  );
 
   // 获取当前国家的区号（不带+号）
   const currentDialCode = useMemo(() => {
-    const countryData = countryMap.get(country);
+    const countryData = countryMap.get(value.country);
     return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
-  }, [country, countryMap]);
+  }, [value.country, countryMap]);
 
-  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
-  const displayPhone = useMemo(() => extractPhoneWithoutCode(phone, currentDialCode), [phone, currentDialCode]);
-
-  // 创建更新后的 PhoneValue 对象
-  const createUpdatedPhoneValue = (countryIso2: CountryIso2, phoneWithoutCode: string): PhoneValue => {
-    const countryData = countryMap.get(countryIso2);
-    if (!countryData) return { country: countryIso2, phone: '' };
-
-    const dialCode = getDialCodeWithoutPlus(countryData.dialCode);
-    return {
-      country: countryIso2,
-      phone: addCountryCodeToPhone(phoneWithoutCode, dialCode),
-    };
-  };
+  // 使用 react-international-phone 的 hook
+  const { phone, country, handlePhoneValueChange, setCountry } = usePhoneInput({
+    defaultCountry: value.country,
+    value: extractPhoneWithoutCode(value.phone, currentDialCode),
+    countries: defaultCountries,
+    disableDialCodeAndPrefix: true,
+    onChange: (data) => {
+      const newData = {
+        ...data,
+        phone:
+          previewValue.country !== data.country && !data.phone
+            ? extractPhoneWithoutCode(value.phone, currentDialCode)
+            : data.phone,
+      };
+      setPreviewValue(newData);
+      handleValueChange(newData);
+    },
+  });
 
-  // 处理电话号码变更
-  const onPhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (preview) return;
-    // 去除用户输入中的非数字字符，但保留括号
-    const cleanedValue = e.target.value.replace(/[^\d()]/g, '');
-    onChange?.(createUpdatedPhoneValue(country, cleanedValue));
-  };
+  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
+  const displayPhone = useMemo(
+    () => (phone ? phone.replace(/[^\d]/g, '') : extractPhoneWithoutCode(value.phone, currentDialCode)),
+    [phone, value.phone, currentDialCode]
+  );
 
   // 处理国家变更
   const onCountryChange = (newCountry: CountryIso2) => {
     if (preview) return;
-    onChange?.(createUpdatedPhoneValue(newCountry, displayPhone));
+    setCountry(newCountry);
   };
 
   // 预览模式
@@ -196,7 +202,7 @@ export default function PhoneInput({
       <TextField
         {...props}
         value={displayPhone}
-        onChange={onPhoneChange}
+        onChange={handlePhoneValueChange}
         placeholder={placeholder}
         className="phone-input"
         sx={mergeSx(