Synchronize development environment (GH-57)

typesnippet · Oct 7, 2024 · 499908a · 499908a
2 parents 34c23dc + fc134ef
commit 499908a
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 126 deletions.
diff --git a/development/src/ant-phone/index.tsx b/development/src/ant-phone/index.tsx
@@ -32,6 +32,7 @@ import {
     usePhone,
 } from "../phone-hooks";
 
+import locale from "./locale";
 import {injectMergedStyles} from "./styles";
 import {PhoneInputProps, PhoneNumber} from "./types";
 
@@ -46,6 +47,8 @@ const PhoneInput = forwardRef(({
                                    onlyCountries = [],
                                    excludeCountries = [],
                                    preferredCountries = [],
+                                   searchNotFound: defaultSearchNotFound = "No country found",
+                                   searchPlaceholder: defaultSearchPlaceholder = "Search country",
                                    dropdownRender = (node) => node,
                                    onMount: handleMount = () => null,
                                    onInput: handleInput = () => null,
@@ -66,8 +69,8 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
-        searchNotFound = "No country found",
-        searchPlaceholder = "Search country",
+        searchNotFound = defaultSearchNotFound,
+        searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
     } = (locale as any).PhoneInput || {};
 
@@ -130,6 +133,7 @@ const PhoneInput = forwardRef(({
         const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList);
         setCountryCode(phoneMetadata.isoCode as any);
         setValue(formattedNumber);
+        setQuery("");
         handleChange({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)}, event);
     }, [countriesList, handleChange, pattern, setValue])
 
@@ -180,6 +184,18 @@ const PhoneInput = forwardRef(({
         setValue(formattedNumber);
     }, [countriesList, metadata, onMount, pattern, setValue, value])
 
+    const suffixIcon = useMemo(() => {
+        return enableArrow && (
+            <span role="img" className="anticon" style={{paddingLeft: 8}}>
+                <svg className="icon" viewBox="0 0 1024 1024"
+                     focusable="false" fill="currentColor" width="16" height="18">
+                    <path
+                        d="M848 368a48 48 0 0 0-81.312-34.544l-0.016-0.016-254.784 254.784-251.488-251.488a48 48 0 1 0-71.04 64.464l-0.128 0.128 288 288 0.016-0.016a47.84 47.84 0 0 0 34.544 14.688h0.224a47.84 47.84 0 0 0 34.544-14.688l0.016 0.016 288-288-0.016-0.016c8.32-8.624 13.44-20.368 13.44-33.312z"/>
+                </svg>
+            </span>
+        );
+    }, [enableArrow])
+
     const countriesSelect = useMemo(() => (
         <Select
             suffixIcon={null}
@@ -203,7 +219,6 @@ const PhoneInput = forwardRef(({
             }}
             optionLabelProp="label"
             dropdownStyle={{minWidth}}
-            notFoundContent={searchNotFound}
             onDropdownVisibleChange={onDropdownVisibleChange}
             dropdownRender={(menu) => (
                 <div className={`${prefixCls}-phone-input-search-wrapper`}>
@@ -215,10 +230,22 @@ const PhoneInput = forwardRef(({
                             onInput={({target}: any) => setQuery(target.value)}
                         />
                     )}
-                    {menu}
+                    {countriesList.length ? menu : (
+                        <div className="ant-select-item-empty">{searchNotFound}</div>
+                    )}
                 </div>
             )}
         >
+            <Select.Option
+                children={null}
+                value={selectValue}
+                style={{display: "none"}}
+                key={`${countryCode}_default`}
+                label={<>
+                    <div className={`flag ${countryCode}`}/>
+                    {suffixIcon}
+                </>}
+            />
             {countriesList.map(([iso, name, dial, pattern]) => {
                 const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
                 return (
@@ -227,15 +254,7 @@ const PhoneInput = forwardRef(({
                         key={`${iso}_${mask}`}
                         label={<>
                             <div className={`flag ${iso}`}/>
-                            {enableArrow && (
-                                <span role="img" className="anticon" style={{paddingLeft: 8}}>
-                                    <svg className="icon" viewBox="0 0 1024 1024"
-                                         focusable="false" fill="currentColor" width="16" height="18">
-                                        <path
-                                            d="M848 368a48 48 0 0 0-81.312-34.544l-0.016-0.016-254.784 254.784-251.488-251.488a48 48 0 1 0-71.04 64.464l-0.128 0.128 288 288 0.016-0.016a47.84 47.84 0 0 0 34.544 14.688h0.224a47.84 47.84 0 0 0 34.544-14.688l0.016 0.016 288-288-0.016-0.016c8.32-8.624 13.44-20.368 13.44-33.312z"/>
-                                    </svg>
-                                </span>
-                            )}
+                            {suffixIcon}
                         </>}
                         children={<div className={`${prefixCls}-phone-input-select-item`}>
                             <div className={`flag ${iso}`}/>
@@ -245,7 +264,7 @@ const PhoneInput = forwardRef(({
                 )
             })}
         </Select>
-    ), [selectValue, query, enableArrow, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
+    ), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
 
     return (
         <div className={`${prefixCls}-phone-input-wrapper`}
@@ -266,3 +285,4 @@ const PhoneInput = forwardRef(({
 })
 
 export default PhoneInput;
+export type {PhoneInputProps, PhoneNumber, locale};
diff --git a/development/src/mui-phone/base/index.tsx b/development/src/mui-phone/base/index.tsx
@@ -145,3 +145,4 @@ const PhoneInput = forwardRef(({
 })
 
 export default PhoneInput;
+export type {PhoneInputProps, PhoneNumber};
diff --git a/development/src/mui-phone/index.tsx b/development/src/mui-phone/index.tsx
@@ -16,6 +16,7 @@ import {
     usePhone,
 } from "../phone-hooks";
 
+import locale from "./locale";
 import {injectMergedStyles} from "./styles";
 import {PhoneInputProps, PhoneNumber} from "./types";
 
@@ -34,6 +35,8 @@ const PhoneInput = forwardRef(({
                                    onlyCountries = [],
                                    excludeCountries = [],
                                    preferredCountries = [],
+                                   searchNotFound: defaultSearchNotFound = "No country found",
+                                   searchPlaceholder: defaultSearchPlaceholder = "Search country",
                                    onMount: handleMount = () => null,
                                    onInput: handleInput = () => null,
                                    onChange: handleChange = () => null,
@@ -50,8 +53,8 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
-        searchNotFound = "No country found",
-        searchPlaceholder = "Search country",
+        searchNotFound = defaultSearchNotFound,
+        searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
     } = useThemeProps({props: {}, name: "MuiPhoneInput"}) as any;
 
@@ -225,3 +228,4 @@ const PhoneInput = forwardRef(({
 })
 
 export default PhoneInput;
+export type {PhoneInputProps, PhoneNumber, locale};
diff --git a/development/src/mui-phone/joy/index.tsx b/development/src/mui-phone/joy/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {ChangeEvent, forwardRef, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
-import {Input, Option, Select} from "@mui/joy";
+import {Input, Option, Select, useThemeProps} from "@mui/joy";
 
 import {
     checkValidity,
@@ -16,6 +16,7 @@ import {
     usePhone,
 } from "../../phone-hooks";
 
+import locale from "../locale";
 import {injectMergedStyles} from "./styles";
 import {PhoneInputProps, PhoneNumber} from "./types";
 
@@ -27,14 +28,15 @@ const PhoneInput = forwardRef(({
                                    searchVariant = undefined,
                                    country = getDefaultISO2Code(),
                                    disabled = false,
+                                   enableArrow = false,
                                    enableSearch = false,
                                    disableDropdown = false,
                                    disableParentheses = false,
                                    onlyCountries = [],
                                    excludeCountries = [],
                                    preferredCountries = [],
-                                   searchNotFound = "No country found",
-                                   searchPlaceholder = "Search country",
+                                   searchNotFound: defaultSearchNotFound = "No country found",
+                                   searchPlaceholder: defaultSearchPlaceholder = "Search country",
                                    onMount: handleMount = () => null,
                                    onInput: handleInput = () => null,
                                    onChange: handleChange = () => null,
@@ -50,6 +52,12 @@ const PhoneInput = forwardRef(({
     const [maxWidth, setMaxWidth] = useState<number>(0);
     const [countryCode, setCountryCode] = useState<string>(country);
 
+    const {
+        searchNotFound = defaultSearchNotFound,
+        searchPlaceholder = defaultSearchPlaceholder,
+        countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
+    } = useThemeProps({props: {}, name: "MuiPhoneInput"}) as any;
+
     const {
         value,
         pattern,
@@ -168,7 +176,7 @@ const PhoneInput = forwardRef(({
                                         children={<div className="mui-phone-input-select-item">
                                             <div className={`flag ${iso}`}/>
                                             <div className="label">
-                                                {name}&nbsp;{displayFormat(mask)}
+                                                {countries[name]}&nbsp;{displayFormat(mask)}
                                             </div>
                                         </div>}
                                     />
@@ -189,10 +197,21 @@ const PhoneInput = forwardRef(({
                 onKeyDown={onKeyDown}
                 startDecorator={(
                     <span
-                        style={{cursor: "pointer"}}
+                        style={{
+                            display: "flex",
+                            cursor: "pointer",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }}
                         onClick={() => setOpen(!open)}
                     >
                         <div className={`flag ${countryCode}`}/>
+                        {enableArrow && (
+                            <svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
+                                 style={{paddingLeft: 4}} width="22" height="20">
+                                <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
+                            </svg>
+                        )}
                     </span>
                 )}
                 {...(muiInputProps as any)}
@@ -202,3 +221,4 @@ const PhoneInput = forwardRef(({
 })
 
 export default PhoneInput;
+export type {PhoneInputProps, PhoneNumber, locale};
diff --git a/development/src/mui-phone/joy/types.ts b/development/src/mui-phone/joy/types.ts
@@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
 
     country?: string;
 
+    enableArrow?: boolean;
+
     enableSearch?: boolean;
 
     searchNotFound?: string;