@arcblock/ux 2.12.27 → 2.12.29

package/lib/PhoneInput/country-select.d.ts

@@ -1,13 +1,19 @@
 import { SelectProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
+import { ParsedCountry } from 'react-international-phone/build/types';
 export interface CountryDisplayOptions {
     hideFlag?: boolean;
+    hideDialCode?: boolean;
 }
-export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
-    value: CountryIso2;
-    onChange?: (value: CountryIso2) => void;
+export interface CountrySelectProps<T extends keyof ParsedCountry = 'iso2'> extends Omit<SelectProps, 'value' | 'onChange'> {
+    value: T extends 'iso2' ? CountryIso2 : string;
+    onChange?: (value: T extends 'iso2' ? CountryIso2 : string) => void;
     selectCountryProps?: CountryDisplayOptions;
     preview?: boolean;
+    valueField?: T;
 }
-declare const CountrySelect: import("react").ForwardRefExoticComponent<Omit<CountrySelectProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type CountrySelectComponent = <T extends keyof ParsedCountry = 'iso2'>(props: CountrySelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
+declare const CountrySelect: CountrySelectComponent;
 export default CountrySelect;

package/lib/PhoneInput/country-select.js

@@ -4,15 +4,23 @@ import { Box, MenuItem, Select, Typography, TextField } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 import { temp as colors } from '../Colors';
-const CountrySelect = /*#__PURE__*/forwardRef(({
+import { mergeSx } from '../Util/style';
+
+// 定义组件类型
+
+// 实现组件
+const CountrySelectInner = /*#__PURE__*/forwardRef(({
   value,
   onChange,
   sx = {},
   selectCountryProps,
-  preview = false
+  preview = false,
+  valueField = 'iso2',
+  ...rest
 }, ref) => {
   const {
-    hideFlag = true
+    hideFlag = true,
+    hideDialCode = false
   } = selectCountryProps || {};
   const [searchQuery, setSearchQuery] = useState('');
   const countryDetail = useMemo(() => {
@@ -46,18 +54,19 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
         width: 24,
         color: 'inherit'
       }
-    }), /*#__PURE__*/_jsxs(Typography, {
+    }), /*#__PURE__*/_jsx(Typography, {
       component: "span",
       sx: {
         lineHeight: 1.5
       },
-      children: ["+", countryDetail?.dialCode]
+      children: hideDialCode ? value : `+${countryDetail?.dialCode}`
     })]
   });
   if (preview) {
     return renderCountryContent;
   }
   return /*#__PURE__*/_jsxs(Select, {
+    ...rest,
     ref: ref,
     MenuProps: {
       style: {
@@ -73,7 +82,7 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
         horizontal: 'left'
       }
     },
-    sx: {
+    sx: mergeSx({
       '&.Mui-focused:has(div[aria-expanded="false"])': {
         fieldset: {
           display: 'block'
@@ -97,9 +106,8 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
       },
       '.MuiMenuItem-root': {
         justifyContent: 'flex-start'
-      },
-      ...sx
-    },
+      }
+    }, sx),
     value: value,
     onChange: e => onChange?.(e.target.value)
     // eslint-disable-next-line react/no-unstable-nested-components
@@ -130,7 +138,7 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
     }), filteredCountries.map(c => {
       const parsed = parseCountry(c);
       return /*#__PURE__*/_jsxs(MenuItem, {
-        value: parsed.iso2,
+        value: parsed[valueField],
         children: [hideFlag ? null : /*#__PURE__*/_jsx(FlagEmoji, {
           iso2: parsed.iso2,
           style: {
@@ -140,7 +148,7 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
         }), /*#__PURE__*/_jsx(Typography, {
           marginRight: 1,
           children: parsed.name
-        }), /*#__PURE__*/_jsxs(Typography, {
+        }), hideDialCode ? null : /*#__PURE__*/_jsxs(Typography, {
           color: "gray",
           children: ["(+", parsed.dialCode, ")"]
         })]
@@ -148,4 +156,7 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
     })]
   });
 });
+
+// 正确导出泛型组件
+const CountrySelect = CountrySelectInner;
 export default CountrySelect;

package/package.json

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

package/src/PhoneInput/country-select.tsx

@@ -1,24 +1,46 @@
 import { useMemo, forwardRef, useState } from 'react';
-import { Box, MenuItem, Select, Typography, SelectProps, TextField } from '@mui/material';
+import { Box, MenuItem, Select, Typography, SelectProps, TextField, SxProps } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import type { CountryIso2 } from 'react-international-phone';
+import { ParsedCountry } from 'react-international-phone/build/types';
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 import { temp as colors } from '../Colors';
+import { mergeSx } from '../Util/style';
 
 export interface CountryDisplayOptions {
   hideFlag?: boolean;
+  hideDialCode?: boolean;
 }
 
-export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
-  value: CountryIso2;
-  onChange?: (value: CountryIso2) => void;
+export interface CountrySelectProps<T extends keyof ParsedCountry = 'iso2'>
+  extends Omit<SelectProps, 'value' | 'onChange'> {
+  value: T extends 'iso2' ? CountryIso2 : string;
+  onChange?: (value: T extends 'iso2' ? CountryIso2 : string) => void;
   selectCountryProps?: CountryDisplayOptions;
   preview?: boolean;
+  valueField?: T;
 }
 
-const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
-  ({ value, onChange, sx = {}, selectCountryProps, preview = false }, ref) => {
-    const { hideFlag = true } = selectCountryProps || {};
+// 定义组件类型
+type CountrySelectComponent = <T extends keyof ParsedCountry = 'iso2'>(
+  props: CountrySelectProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
+) => React.ReactElement;
+
+// 实现组件
+const CountrySelectInner = forwardRef(
+  <T extends keyof ParsedCountry = 'iso2'>(
+    {
+      value,
+      onChange,
+      sx = {},
+      selectCountryProps,
+      preview = false,
+      valueField = 'iso2' as T,
+      ...rest
+    }: CountrySelectProps<T>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const { hideFlag = true, hideDialCode = false } = selectCountryProps || {};
     const [searchQuery, setSearchQuery] = useState('');
 
     const countryDetail = useMemo(() => {
@@ -49,7 +71,7 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
         sx={{ cursor: preview ? 'default' : 'pointer' }}>
         {hideFlag ? null : <FlagEmoji iso2={value} style={{ display: 'flex', width: 24, color: 'inherit' }} />}
         <Typography component="span" sx={{ lineHeight: 1.5 }}>
-          +{countryDetail?.dialCode}
+          {hideDialCode ? value : `+${countryDetail?.dialCode}`}
         </Typography>
       </Box>
     );
@@ -60,29 +82,32 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
 
     return (
       <Select
+        {...rest}
         ref={ref}
         MenuProps={{
           style: { maxHeight: 400, top: 2 },
           anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
           transformOrigin: { vertical: 'top', horizontal: 'left' },
         }}
-        sx={{
-          '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: 'block' } },
-          '.MuiSelect-select': { padding: 1, paddingRight: '24px !important' },
-          svg: { right: 4, top: 10 },
-          '&:hover': {
+        sx={mergeSx(
+          {
+            '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: 'block' } },
+            '.MuiSelect-select': { padding: 1, paddingRight: '24px !important' },
+            svg: { right: 4, top: 10 },
+            '&:hover': {
+              'fieldset.MuiOutlinedInput-notchedOutline': {
+                borderColor: colors.dividerColor,
+              },
+            },
             'fieldset.MuiOutlinedInput-notchedOutline': {
               borderColor: colors.dividerColor,
             },
+            '.MuiMenuItem-root': { justifyContent: 'flex-start' },
           },
-          'fieldset.MuiOutlinedInput-notchedOutline': {
-            borderColor: colors.dividerColor,
-          },
-          '.MuiMenuItem-root': { justifyContent: 'flex-start' },
-          ...sx,
-        }}
+          sx as SxProps
+        )}
         value={value}
-        onChange={(e) => onChange?.(e.target.value as CountryIso2)}
+        onChange={(e) => onChange?.(e.target.value as T extends 'iso2' ? CountryIso2 : string)}
         // eslint-disable-next-line react/no-unstable-nested-components
         IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
         renderValue={() => renderCountryContent}>
@@ -101,10 +126,10 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
         {filteredCountries.map((c) => {
           const parsed = parseCountry(c);
           return (
-            <MenuItem key={parsed.iso2} value={parsed.iso2}>
+            <MenuItem key={parsed.iso2} value={parsed[valueField]}>
               {hideFlag ? null : <FlagEmoji iso2={parsed.iso2} style={{ marginRight: 8, width: 24 }} />}
               <Typography marginRight={1}>{parsed.name}</Typography>
-              <Typography color="gray">(+{parsed.dialCode})</Typography>
+              {hideDialCode ? null : <Typography color="gray">(+{parsed.dialCode})</Typography>}
             </MenuItem>
           );
         })}
@@ -113,4 +138,7 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
   }
 );
 
+// 正确导出泛型组件
+const CountrySelect = CountrySelectInner as CountrySelectComponent;
+
 export default CountrySelect;