Skip to content

Commit 499908a

Browse files
ArtyomVancyanArtyomVancyan
authored
Synchronize development environment (GH-57)
2 parents 34c23dc + fc134ef commit 499908a

File tree

9 files changed

+194
-126
lines changed

9 files changed

+194
-126
lines changed

‎development/src/ant-phone/index.tsx‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
usePhone,
3333
} from "../phone-hooks";
3434

35+
import locale from "./locale";
3536
import {injectMergedStyles} from "./styles";
3637
import {PhoneInputProps, PhoneNumber} from "./types";
3738

@@ -46,6 +47,8 @@ const PhoneInput = forwardRef(({
4647
onlyCountries = [],
4748
excludeCountries = [],
4849
preferredCountries = [],
50+
searchNotFound: defaultSearchNotFound = "No country found",
51+
searchPlaceholder: defaultSearchPlaceholder = "Search country",
4952
dropdownRender = (node) => node,
5053
onMount: handleMount = () => null,
5154
onInput: handleInput = () => null,
@@ -66,8 +69,8 @@ const PhoneInput = forwardRef(({
6669
const [countryCode, setCountryCode] = useState<string>(country);
6770

6871
const {
69-
searchNotFound = "No country found",
70-
searchPlaceholder = "Search country",
72+
searchNotFound = defaultSearchNotFound,
73+
searchPlaceholder = defaultSearchPlaceholder,
7174
countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
7275
} = (locale as any).PhoneInput || {};
7376

@@ -130,6 +133,7 @@ const PhoneInput = forwardRef(({
130133
const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList);
131134
setCountryCode(phoneMetadata.isoCode as any);
132135
setValue(formattedNumber);
136+
setQuery("");
133137
handleChange({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)}, event);
134138
}, [countriesList, handleChange, pattern, setValue])
135139

@@ -180,6 +184,18 @@ const PhoneInput = forwardRef(({
180184
setValue(formattedNumber);
181185
}, [countriesList, metadata, onMount, pattern, setValue, value])
182186

187+
const suffixIcon = useMemo(() => {
188+
return enableArrow && (
189+
<span role="img" className="anticon" style={{paddingLeft: 8}}>
190+
<svg className="icon" viewBox="0 0 1024 1024"
191+
focusable="false" fill="currentColor" width="16" height="18">
192+
<path
193+
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"/>
194+
</svg>
195+
</span>
196+
);
197+
}, [enableArrow])
198+
183199
const countriesSelect = useMemo(() => (
184200
<Select
185201
suffixIcon={null}
@@ -203,7 +219,6 @@ const PhoneInput = forwardRef(({
203219
}}
204220
optionLabelProp="label"
205221
dropdownStyle={{minWidth}}
206-
notFoundContent={searchNotFound}
207222
onDropdownVisibleChange={onDropdownVisibleChange}
208223
dropdownRender={(menu) => (
209224
<div className={`${prefixCls}-phone-input-search-wrapper`}>
@@ -215,10 +230,22 @@ const PhoneInput = forwardRef(({
215230
onInput={({target}: any) => setQuery(target.value)}
216231
/>
217232
)}
218-
{menu}
233+
{countriesList.length ? menu : (
234+
<div className="ant-select-item-empty">{searchNotFound}</div>
235+
)}
219236
</div>
220237
)}
221238
>
239+
<Select.Option
240+
children={null}
241+
value={selectValue}
242+
style={{display: "none"}}
243+
key={`${countryCode}_default`}
244+
label={<>
245+
<div className={`flag ${countryCode}`}/>
246+
{suffixIcon}
247+
</>}
248+
/>
222249
{countriesList.map(([iso, name, dial, pattern]) => {
223250
const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
224251
return (
@@ -227,15 +254,7 @@ const PhoneInput = forwardRef(({
227254
key={`${iso}_${mask}`}
228255
label={<>
229256
<div className={`flag ${iso}`}/>
230-
{enableArrow && (
231-
<span role="img" className="anticon" style={{paddingLeft: 8}}>
232-
<svg className="icon" viewBox="0 0 1024 1024"
233-
focusable="false" fill="currentColor" width="16" height="18">
234-
<path
235-
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"/>
236-
</svg>
237-
</span>
238-
)}
257+
{suffixIcon}
239258
</>}
240259
children={<div className={`${prefixCls}-phone-input-select-item`}>
241260
<div className={`flag ${iso}`}/>
@@ -245,7 +264,7 @@ const PhoneInput = forwardRef(({
245264
)
246265
})}
247266
</Select>
248-
), [selectValue, query, enableArrow, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
267+
), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
249268

250269
return (
251270
<div className={`${prefixCls}-phone-input-wrapper`}
@@ -266,3 +285,4 @@ const PhoneInput = forwardRef(({
266285
})
267286

268287
export default PhoneInput;
288+
export type {PhoneInputProps, PhoneNumber, locale};

‎development/src/mui-phone/base/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,4 @@ const PhoneInput = forwardRef(({
145145
})
146146

147147
export default PhoneInput;
148+
export type {PhoneInputProps, PhoneNumber};

‎development/src/mui-phone/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
usePhone,
1717
} from "../phone-hooks";
1818

19+
import locale from "./locale";
1920
import {injectMergedStyles} from "./styles";
2021
import {PhoneInputProps, PhoneNumber} from "./types";
2122

@@ -34,6 +35,8 @@ const PhoneInput = forwardRef(({
3435
onlyCountries = [],
3536
excludeCountries = [],
3637
preferredCountries = [],
38+
searchNotFound: defaultSearchNotFound = "No country found",
39+
searchPlaceholder: defaultSearchPlaceholder = "Search country",
3740
onMount: handleMount = () => null,
3841
onInput: handleInput = () => null,
3942
onChange: handleChange = () => null,
@@ -50,8 +53,8 @@ const PhoneInput = forwardRef(({
5053
const [countryCode, setCountryCode] = useState<string>(country);
5154

5255
const {
53-
searchNotFound = "No country found",
54-
searchPlaceholder = "Search country",
56+
searchNotFound = defaultSearchNotFound,
57+
searchPlaceholder = defaultSearchPlaceholder,
5558
countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
5659
} = useThemeProps({props: {}, name: "MuiPhoneInput"}) as any;
5760

@@ -225,3 +228,4 @@ const PhoneInput = forwardRef(({
225228
})
226229

227230
export default PhoneInput;
231+
export type {PhoneInputProps, PhoneNumber, locale};

‎development/src/mui-phone/joy/index.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import {ChangeEvent, forwardRef, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
4-
import {Input, Option, Select} from "@mui/joy";
4+
import {Input, Option, Select, useThemeProps} from "@mui/joy";
55

66
import {
77
checkValidity,
@@ -16,6 +16,7 @@ import {
1616
usePhone,
1717
} from "../../phone-hooks";
1818

19+
import locale from "../locale";
1920
import {injectMergedStyles} from "./styles";
2021
import {PhoneInputProps, PhoneNumber} from "./types";
2122

@@ -27,14 +28,15 @@ const PhoneInput = forwardRef(({
2728
searchVariant = undefined,
2829
country = getDefaultISO2Code(),
2930
disabled = false,
31+
enableArrow = false,
3032
enableSearch = false,
3133
disableDropdown = false,
3234
disableParentheses = false,
3335
onlyCountries = [],
3436
excludeCountries = [],
3537
preferredCountries = [],
36-
searchNotFound = "No country found",
37-
searchPlaceholder = "Search country",
38+
searchNotFound: defaultSearchNotFound = "No country found",
39+
searchPlaceholder: defaultSearchPlaceholder = "Search country",
3840
onMount: handleMount = () => null,
3941
onInput: handleInput = () => null,
4042
onChange: handleChange = () => null,
@@ -50,6 +52,12 @@ const PhoneInput = forwardRef(({
5052
const [maxWidth, setMaxWidth] = useState<number>(0);
5153
const [countryCode, setCountryCode] = useState<string>(country);
5254

55+
const {
56+
searchNotFound = defaultSearchNotFound,
57+
searchPlaceholder = defaultSearchPlaceholder,
58+
countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
59+
} = useThemeProps({props: {}, name: "MuiPhoneInput"}) as any;
60+
5361
const {
5462
value,
5563
pattern,
@@ -168,7 +176,7 @@ const PhoneInput = forwardRef(({
168176
children={<div className="mui-phone-input-select-item">
169177
<div className={`flag ${iso}`}/>
170178
<div className="label">
171-
{name}&nbsp;{displayFormat(mask)}
179+
{countries[name]}&nbsp;{displayFormat(mask)}
172180
</div>
173181
</div>}
174182
/>
@@ -189,10 +197,21 @@ const PhoneInput = forwardRef(({
189197
onKeyDown={onKeyDown}
190198
startDecorator={(
191199
<span
192-
style={{cursor: "pointer"}}
200+
style={{
201+
display: "flex",
202+
cursor: "pointer",
203+
alignItems: "center",
204+
justifyContent: "center",
205+
}}
193206
onClick={() => setOpen(!open)}
194207
>
195208
<div className={`flag ${countryCode}`}/>
209+
{enableArrow && (
210+
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
211+
style={{paddingLeft: 4}} width="22" height="20">
212+
<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
213+
</svg>
214+
)}
196215
</span>
197216
)}
198217
{...(muiInputProps as any)}
@@ -202,3 +221,4 @@ const PhoneInput = forwardRef(({
202221
})
203222

204223
export default PhoneInput;
224+
export type {PhoneInputProps, PhoneNumber, locale};

‎development/src/mui-phone/joy/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
1313

1414
country?: string;
1515

16+
enableArrow?: boolean;
17+
1618
enableSearch?: boolean;
1719

1820
searchNotFound?: string;

0 commit comments

Comments
 (0)