Skip to content

Commit 07d5dd9

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement an enableArrow option (GH-19)
2 parents 337c380 + ac49174 commit 07d5dd9

File tree

9 files changed

+70
-13
lines changed

9 files changed

+70
-13
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ Apart from the phone-specific properties described below, all [Input](https://mu
9999
|--------------------|-------------------------------------------------------------------------------------------------------------------------------|---------------------------|
100100
| value | An object containing a parsed phone number or the raw number. | [object](#value) / string |
101101
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
102+
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
102103
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
103104
| searchVariant | Accepts an Input variant, and values depend on the chosen Material distribution. | TextFieldVariants |
104105
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |

‎examples/material/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@types/react": "^18.2.0",
1111
"@types/react-dom": "^18.2.0",
1212
"copy-to-clipboard": "^3.3.3",
13-
"mui-phone-input": "^0.1.2",
13+
"mui-phone-input": "^0.1.3",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
1616
"react-hook-form": "^7.51.4",

‎examples/material/src/Demo.tsx

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const Demo = () => {
2323
const [value, setValue] = useState<any>(null);
2424
const [mode, setMode] = useState<string>("light");
2525
const [show, setShow] = useState<boolean>(true);
26+
const [arrow, setArrow] = useState<boolean>(false);
2627
const [strict, setStrict] = useState<boolean>(false);
2728
const [search, setSearch] = useState<boolean>(false);
2829
const [copied, setCopied] = useState<boolean>(false);
@@ -50,13 +51,14 @@ const Demo = () => {
5051
const code = useMemo(() => {
5152
let code = "<PhoneInput\n";
5253
if (disabled) code += " disabled\n";
54+
if (arrow) code += " enableArrow\n";
5355
if (search && dropdown) code += " enableSearch\n";
5456
if (!dropdown) code += " disableDropdown\n";
5557
if (!parentheses) code += " disableParentheses\n";
5658
if (code === "<PhoneInput\n") code = "<PhoneInput />";
5759
else code += "/>";
5860
return code;
59-
}, [disabled, search, dropdown, parentheses])
61+
}, [disabled, arrow, search, dropdown, parentheses])
6062

6163
return (
6264
<ThemeProvider theme={theme}>
@@ -113,33 +115,44 @@ const Demo = () => {
113115
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
114116
<FormControlLabel
115117
control={<Switch
118+
defaultChecked
116119
color="primary"
117-
disabled={!dropdown}
118-
onChange={() => setSearch(!search)}
120+
onChange={() => setDropdown(!dropdown)}
119121
/>}
120122
labelPlacement="start"
121123
style={{margin: 0}}
122-
label="Search"
124+
label="Dropdown"
123125
/>
124126
<FormControlLabel
125127
control={<Switch
126128
defaultChecked
127129
color="primary"
128-
onChange={() => setDropdown(!dropdown)}
130+
onChange={() => setParentheses(!parentheses)}
129131
/>}
130132
labelPlacement="start"
131133
style={{margin: 0}}
132-
label="Dropdown"
134+
label="Parentheses"
133135
/>
136+
</div>
137+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
134138
<FormControlLabel
135139
control={<Switch
136-
defaultChecked
137140
color="primary"
138-
onChange={() => setParentheses(!parentheses)}
141+
disabled={!dropdown}
142+
onChange={() => setSearch(!search)}
139143
/>}
140144
labelPlacement="start"
141145
style={{margin: 0}}
142-
label="Parentheses"
146+
label="Search"
147+
/>
148+
<FormControlLabel
149+
control={<Switch
150+
color="primary"
151+
onChange={() => setArrow(!arrow)}
152+
/>}
153+
labelPlacement="start"
154+
style={{margin: 0}}
155+
label="Arrow"
143156
/>
144157
</div>
145158
<Divider textAlign="left" style={{margin: "16px 0"}}>Code</Divider>
@@ -172,6 +185,7 @@ const Demo = () => {
172185
error={error}
173186
disabled={disabled}
174187
onChange={onChange}
188+
enableArrow={arrow}
175189
enableSearch={search}
176190
style={{width: "100%"}}
177191
disableDropdown={!dropdown}

‎src/core/index.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const PhoneInput = forwardRef(({
2929
searchVariant = undefined,
3030
country = getDefaultISO2Code(),
3131
disabled = false,
32+
enableArrow = false,
3233
enableSearch = false,
3334
disableDropdown = false,
3435
disableParentheses = false,
@@ -206,10 +207,21 @@ const PhoneInput = forwardRef(({
206207
startAdornment: (
207208
<InputAdornment position="start">
208209
<span
209-
style={{cursor: "pointer"}}
210+
style={{
211+
display: "flex",
212+
cursor: "pointer",
213+
alignItems: "center",
214+
justifyContent: "center",
215+
}}
210216
onClick={() => setOpen(!open)}
211217
>
212218
<div className={`flag ${countryCode}`}/>
219+
{enableArrow && (
220+
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
221+
style={{paddingLeft: 4}} width="22" height="20">
222+
<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
223+
</svg>
224+
)}
213225
</span>
214226
</InputAdornment>
215227
)

‎src/core/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<TextFieldProps, "onChange"> {
1313

1414
country?: string;
1515

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

1820
searchNotFound?: string;

‎src/index.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const PhoneInput = forwardRef(({
2828
searchVariant = undefined,
2929
country = getDefaultISO2Code(),
3030
disabled = false,
31+
enableArrow = false,
3132
enableSearch = false,
3233
disableDropdown = false,
3334
disableParentheses = false,
@@ -201,10 +202,21 @@ const PhoneInput = forwardRef(({
201202
startAdornment: (
202203
<InputAdornment position="start">
203204
<span
204-
style={{cursor: "pointer"}}
205+
style={{
206+
display: "flex",
207+
cursor: "pointer",
208+
alignItems: "center",
209+
justifyContent: "center",
210+
}}
205211
onClick={() => setOpen(!open)}
206212
>
207213
<div className={`flag ${countryCode}`}/>
214+
{enableArrow && (
215+
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
216+
style={{paddingLeft: 4}} width="22" height="20">
217+
<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
218+
</svg>
219+
)}
208220
</span>
209221
</InputAdornment>
210222
)

‎src/joy/index.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const PhoneInput = forwardRef(({
2828
searchVariant = undefined,
2929
country = getDefaultISO2Code(),
3030
disabled = false,
31+
enableArrow = false,
3132
enableSearch = false,
3233
disableDropdown = false,
3334
disableParentheses = false,
@@ -196,10 +197,21 @@ const PhoneInput = forwardRef(({
196197
onKeyDown={onKeyDown}
197198
startDecorator={(
198199
<span
199-
style={{cursor: "pointer"}}
200+
style={{
201+
display: "flex",
202+
cursor: "pointer",
203+
alignItems: "center",
204+
justifyContent: "center",
205+
}}
200206
onClick={() => setOpen(!open)}
201207
>
202208
<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+
)}
203215
</span>
204216
)}
205217
{...(muiInputProps as any)}

‎src/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;

‎src/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<TextFieldProps, "onChange"> {
1313

1414
country?: string;
1515

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

1820
searchNotFound?: string;

0 commit comments

Comments
 (0)