Skip to content

Commit b9a34ec

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement an enableArrow option (GH-100)
2 parents 32c7e2d + cddf0dd commit b9a34ec

File tree

7 files changed

+57
-22
lines changed

7 files changed

+57
-22
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ Apart from the phone-specific properties described below, all [Input](https://an
7979
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|
8080
| value | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
8181
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
82+
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
8283
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
8384
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
8485
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |

‎examples/antd4.x/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"@types/react": "^18.2.0",
88
"@types/react-dom": "^18.2.0",
99
"antd": "^4.24.8",
10-
"antd-phone-input": "^0.3.8",
10+
"antd-phone-input": "^0.3.9",
1111
"craco-less": "^2.0.0",
1212
"react": "^18.2.0",
1313
"react-dom": "^18.2.0",

‎examples/antd4.x/src/Demo.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import CheckOutlined from "@ant-design/icons/CheckOutlined";
1919
const Demo = () => {
2020
const [form] = useForm();
2121
const [value, setValue] = useState(null);
22+
const [arrow, setArrow] = useState(false);
2223
const [strict, setStrict] = useState(false);
2324
const [search, setSearch] = useState(false);
2425
const [copied, setCopied] = useState(false);
@@ -34,13 +35,14 @@ const Demo = () => {
3435
const code = useMemo(() => {
3536
let code = "<PhoneInput\n";
3637
if (disabled) code += " disabled\n";
38+
if (arrow) code += " enableArrow\n";
3739
if (search && dropdown) code += " enableSearch\n";
3840
if (!dropdown) code += " disableDropdown\n";
3941
if (!parentheses) code += " disableParentheses\n";
4042
if (code === "<PhoneInput\n") code = "<PhoneInput />";
4143
else code += "/>";
4244
return code;
43-
}, [disabled, search, dropdown, parentheses])
45+
}, [disabled, arrow, search, dropdown, parentheses])
4446

4547
const changeTheme = () => {
4648
const pathname = window.location.pathname.replace(/\/$/, '');
@@ -97,30 +99,37 @@ const Demo = () => {
9799
</Form.Item>
98100
</div>
99101
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
100-
<Form.Item label="Search">
102+
<Form.Item label="Dropdown">
101103
<Switch
102-
disabled={!dropdown}
104+
defaultChecked
103105
checkedChildren="enabled"
104106
unCheckedChildren="disabled"
105-
onChange={() => setSearch(!search)}
107+
onChange={() => setDropdown(!dropdown)}
106108
/>
107109
</Form.Item>
108-
<Form.Item label="Dropdown">
110+
<Form.Item label="Parentheses">
109111
<Switch
110112
defaultChecked
111113
checkedChildren="enabled"
112114
unCheckedChildren="disabled"
113-
onChange={() => setDropdown(!dropdown)}
115+
onChange={() => setParentheses(!parentheses)}
114116
/>
115117
</Form.Item>
116118
</div>
117119
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
118-
<Form.Item label="Parentheses" style={{margin: 0}}>
120+
<Form.Item label="Search" style={{margin: 0}}>
119121
<Switch
120-
defaultChecked
122+
disabled={!dropdown}
121123
checkedChildren="enabled"
122124
unCheckedChildren="disabled"
123-
onChange={() => setParentheses(!parentheses)}
125+
onChange={() => setSearch(!search)}
126+
/>
127+
</Form.Item>
128+
<Form.Item label="Arrow" style={{margin: 0}}>
129+
<Switch
130+
checkedChildren="enabled"
131+
unCheckedChildren="disabled"
132+
onChange={() => setArrow(!arrow)}
124133
/>
125134
</Form.Item>
126135
</div>
@@ -150,6 +159,7 @@ const Demo = () => {
150159
<FormItem name="phone" rules={[{validator}]}>
151160
<PhoneInput
152161
disabled={disabled}
162+
enableArrow={arrow}
153163
enableSearch={search}
154164
disableDropdown={!dropdown}
155165
disableParentheses={!parentheses}

‎examples/antd5.x/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@types/react": "^18.2.0",
77
"@types/react-dom": "^18.2.0",
88
"antd": "^5.8.3",
9-
"antd-phone-input": "^0.3.8",
9+
"antd-phone-input": "^0.3.9",
1010
"copy-to-clipboard": "^3.3.3",
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0",

‎examples/antd5.x/src/Demo.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import "antd/dist/reset.css";
2323
const Demo = () => {
2424
const [form] = useForm();
2525
const [value, setValue] = useState(null);
26+
const [arrow, setArrow] = useState(false);
2627
const [strict, setStrict] = useState(false);
2728
const [search, setSearch] = useState(false);
2829
const [copied, setCopied] = useState(false);
@@ -39,13 +40,14 @@ const Demo = () => {
3940
const code = useMemo(() => {
4041
let code = "<PhoneInput\n";
4142
if (disabled) code += " disabled\n";
43+
if (arrow) code += " enableArrow\n";
4244
if (search && dropdown) code += " enableSearch\n";
4345
if (!dropdown) code += " disableDropdown\n";
4446
if (!parentheses) code += " disableParentheses\n";
4547
if (code === "<PhoneInput\n") code = "<PhoneInput />";
4648
else code += "/>";
4749
return code;
48-
}, [disabled, search, dropdown, parentheses])
50+
}, [disabled, arrow, search, dropdown, parentheses])
4951

5052
const changeTheme = () => {
5153
if (algorithm === "defaultAlgorithm") {
@@ -102,30 +104,37 @@ const Demo = () => {
102104
</Form.Item>
103105
</div>
104106
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
105-
<Form.Item label="Search">
107+
<Form.Item label="Dropdown">
106108
<Switch
107-
disabled={!dropdown}
109+
defaultChecked
108110
checkedChildren="enabled"
109111
unCheckedChildren="disabled"
110-
onChange={() => setSearch(!search)}
112+
onChange={() => setDropdown(!dropdown)}
111113
/>
112114
</Form.Item>
113-
<Form.Item label="Dropdown">
115+
<Form.Item label="Parentheses">
114116
<Switch
115117
defaultChecked
116118
checkedChildren="enabled"
117119
unCheckedChildren="disabled"
118-
onChange={() => setDropdown(!dropdown)}
120+
onChange={() => setParentheses(!parentheses)}
119121
/>
120122
</Form.Item>
121123
</div>
122124
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
123-
<Form.Item label="Parentheses" style={{margin: 0}}>
125+
<Form.Item label="Search" style={{margin: 0}}>
126+
<Switch
127+
disabled={!dropdown}
128+
checkedChildren="enabled"
129+
unCheckedChildren="disabled"
130+
onChange={() => setSearch(!search)}
131+
/>
132+
</Form.Item>
133+
<Form.Item label="Arrow" style={{margin: 0}}>
124134
<Switch
125-
defaultChecked
126135
checkedChildren="enabled"
127136
unCheckedChildren="disabled"
128-
onChange={() => setParentheses(!parentheses)}
137+
onChange={() => setArrow(!arrow)}
129138
/>
130139
</Form.Item>
131140
</div>
@@ -155,6 +164,7 @@ const Demo = () => {
155164
<FormItem name="phone" rules={[{validator}]}>
156165
<PhoneInput
157166
disabled={disabled}
167+
enableArrow={arrow}
158168
enableSearch={search}
159169
disableDropdown={!dropdown}
160170
disableParentheses={!parentheses}

‎src/index.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const PhoneInput = forwardRef(({
4040
value: initialValue = "",
4141
country = getDefaultISO2Code(),
4242
disabled = false,
43+
enableArrow = false,
4344
enableSearch = false,
4445
disableDropdown = false,
4546
disableParentheses = false,
@@ -227,7 +228,18 @@ const PhoneInput = forwardRef(({
227228
<Select.Option
228229
value={iso + dial}
229230
key={`${iso}_${mask}`}
230-
label={<div className={`flag ${iso}`}/>}
231+
label={<>
232+
<div className={`flag ${iso}`}/>
233+
{enableArrow && (
234+
<span role="img" className="anticon" style={{paddingLeft: 8}}>
235+
<svg className="icon" viewBox="0 0 1024 1024"
236+
focusable="false" fill="currentColor" width="16" height="18">
237+
<path
238+
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"/>
239+
</svg>
240+
</span>
241+
)}
242+
</>}
231243
children={<div className={`${prefixCls}-phone-input-select-item`}>
232244
<div className={`flag ${iso}`}/>
233245
{countries[name]}&nbsp;{displayFormat(mask)}
@@ -236,7 +248,7 @@ const PhoneInput = forwardRef(({
236248
)
237249
})}
238250
</Select>
239-
), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
251+
), [selectValue, query, enableArrow, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
240252

241253
return (
242254
<div className={`${prefixCls}-phone-input-wrapper`}

‎src/types.ts‎

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

1212
country?: string;
1313

14+
enableArrow?: boolean;
15+
1416
enableSearch?: boolean;
1517

1618
searchNotFound?: string;

0 commit comments

Comments
 (0)