Skip to content

Commit ef789a6

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement support for using SVG icons (GH-98)
2 parents c1fd2e2 + c444978 commit ef789a6

File tree

13 files changed

+1891
-488
lines changed

13 files changed

+1891
-488
lines changed

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import useFormInstance from "antd/es/form/hooks/useFormInstance";
1515
import {ConfigContext} from "antd/es/config-provider";
1616
import {FormContext} from "antd/es/form/context";
1717
import {useWatch} from "antd/es/form/Form";
18+
import version from "antd/es/version";
1819
import Select from "antd/es/select";
1920
import Input from "antd/es/input";
2021

@@ -36,9 +37,14 @@ import locale from "./locale";
3637
import {injectMergedStyles} from "./styles";
3738
import {PhoneInputProps, PhoneNumber} from "./types";
3839

40+
const [major, minor, _] = version.split(".").map(Number);
41+
const isV5x = major === 5;
42+
const isV5x25 = isV5x && minor >= 25;
43+
3944
const PhoneInput = forwardRef(({
4045
value: initialValue = "",
4146
country = getDefaultISO2Code(),
47+
useSVG = false,
4248
distinct = false,
4349
disabled = false,
4450
enableArrow = false,
@@ -221,9 +227,9 @@ const PhoneInput = forwardRef(({
221227
inputRef.current.input.focus();
222228
}}
223229
optionLabelProp="label"
224-
dropdownStyle={{minWidth}}
225-
onDropdownVisibleChange={onDropdownVisibleChange}
226-
dropdownRender={(menu) => (
230+
{...(isV5x ? {onOpenChange: onDropdownVisibleChange} : {onDropdownVisibleChange})}
231+
{...(isV5x25 ? {styles: {popup: {root: {minWidth}}}} : {dropdownStyle: {minWidth}})}
232+
{...({[isV5x ? "popupRender" : "dropdownRender"]: (menu: any) => (
227233
<div className={`${prefixCls}-phone-input-search-wrapper`}>
228234
{enableSearch && (
229235
<Input
@@ -237,15 +243,15 @@ const PhoneInput = forwardRef(({
237243
<div className="ant-select-item-empty">{searchNotFound}</div>
238244
)}
239245
</div>
240-
)}
246+
)})}
241247
>
242248
<Select.Option
243249
children={null}
244250
value={selectValue}
245251
style={{display: "none"}}
246252
key={`${countryCode}_default`}
247253
label={<div style={{display: "flex"}}>
248-
<div className={`flag ${countryCode}`}/>
254+
<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>
249255
{suffixIcon}
250256
</div>}
251257
/>
@@ -256,18 +262,18 @@ const PhoneInput = forwardRef(({
256262
value={iso + dial}
257263
key={`${iso}_${mask}`}
258264
label={<div style={{display: "flex"}}>
259-
<div className={`flag ${iso}`}/>
265+
<div className={`flag ${iso} ${useSVG ? "svg" : ""}`}/>
260266
{suffixIcon}
261267
</div>}
262268
children={<div className={`${prefixCls}-phone-input-select-item`}>
263-
<div className={`flag ${iso}`}/>
269+
<div className={`flag ${iso} ${useSVG ? "svg" : ""}`}/>
264270
{countries[name]}&nbsp;{displayFormat(mask)}
265271
</div>}
266272
/>
267273
)
268274
})}
269275
</Select>
270-
), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
276+
), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder, useSVG])
271277

272278
return (
273279
<div className={`${prefixCls}-phone-input-wrapper`}

‎development/src/ant-phone/styles.ts‎

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

3-
import {injectStyles, jsonToCss} from "react-phone-hooks/styles";
4-
import commonStyles from "react-phone-hooks/stylesheet.json";
3+
import {injectStyles, jsonToCss} from "../phone-hooks/styles";
4+
import commonStyles from "../phone-hooks/resources/stylesheet.json";
55
import {defaultPrefixCls} from "antd/es/config-provider";
66

77
import customStyles from "./resources/stylesheet.json";

‎development/src/ant-phone/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export type PhoneNumber = types.PhoneNumber;
99
export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange"> {
1010
value?: PhoneNumber | string;
1111

12+
useSVG?: boolean;
13+
1214
country?: string;
1315

1416
distinct?: boolean;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(({slotProps, ...props}, r
6060
const PhoneInput = forwardRef(({
6161
value: initialValue = "",
6262
country = getDefaultISO2Code(),
63+
useSVG = false,
6364
disableParentheses = false,
6465
onlyCountries = [],
6566
excludeCountries = [],
@@ -138,7 +139,7 @@ const PhoneInput = forwardRef(({
138139
onInput={onInput}
139140
onChange={onChange}
140141
onKeyDown={onKeyDown}
141-
startAdornment={<div className={`flag ${countryCode}`}/>}
142+
startAdornment={<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>}
142143
{...(muiInputProps as any)}
143144
/>
144145
)

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export type PhoneNumber = types.PhoneNumber;
99
export interface PhoneInputProps extends Omit<InputProps, "onChange"> {
1010
value?: PhoneNumber | string;
1111

12+
useSVG?: boolean;
13+
1214
country?: string;
1315

1416
disableParentheses?: boolean;

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
2727
variant = undefined,
2828
searchVariant = undefined,
2929
country = getDefaultISO2Code(),
30+
useSVG = false,
3031
distinct = false,
3132
disabled = false,
3233
enableArrow = false,
@@ -181,7 +182,7 @@ const PhoneInput = forwardRef(({
181182
setTimeout(() => input.focus(), 100);
182183
}}
183184
children={<div className="mui-phone-input-select-item">
184-
<div className={`flag ${iso}`}/>
185+
<div className={`flag ${iso} ${useSVG ? "svg" : ""}`}/>
185186
<div className="label">
186187
{countries[name]}&nbsp;{displayFormat(mask)}
187188
</div>
@@ -214,7 +215,7 @@ const PhoneInput = forwardRef(({
214215
}}
215216
onClick={() => setOpen(!open)}
216217
>
217-
<div className={`flag ${countryCode}`}/>
218+
<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>
218219
{enableArrow && (
219220
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
220221
style={{paddingLeft: 4}} width="22" height="20">

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
2727
variant = undefined,
2828
searchVariant = undefined,
2929
country = getDefaultISO2Code(),
30+
useSVG = false,
3031
distinct = false,
3132
disabled = false,
3233
enableArrow = false,
@@ -178,7 +179,7 @@ const PhoneInput = forwardRef(({
178179
setTimeout(() => input.focus(), 100);
179180
}}
180181
children={<div className="mui-phone-input-select-item">
181-
<div className={`flag ${iso}`}/>
182+
<div className={`flag ${iso} ${useSVG ? "svg" : ""}`}/>
182183
<div className="label">
183184
{countries[name]}&nbsp;{displayFormat(mask)}
184185
</div>
@@ -209,7 +210,7 @@ const PhoneInput = forwardRef(({
209210
}}
210211
onClick={() => setOpen(!open)}
211212
>
212-
<div className={`flag ${countryCode}`}/>
213+
<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>
213214
{enableArrow && (
214215
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
215216
style={{paddingLeft: 4}} width="22" height="20">

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export type PhoneNumber = types.PhoneNumber;
99
export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange"> {
1010
value?: PhoneNumber | string;
1111

12+
useSVG?: boolean;
13+
1214
searchVariant?: InputProps["variant"];
1315

1416
country?: string;

‎development/src/mui-phone/styles.ts‎

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

3-
import {injectStyles, jsonToCss} from "react-phone-hooks/styles";
4-
import commonStyles from "react-phone-hooks/stylesheet.json";
3+
import {injectStyles, jsonToCss} from "../phone-hooks/styles";
4+
import commonStyles from "../phone-hooks/resources/stylesheet.json";
55

66
import customStyles from "./resources/stylesheet.json";
77

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export type PhoneNumber = types.PhoneNumber;
99
export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
1010
value?: PhoneNumber | string;
1111

12+
useSVG?: boolean;
13+
1214
searchVariant?: TextFieldProps["variant"];
1315

1416
country?: string;

0 commit comments

Comments
 (0)