From d6d8b6459d41ae73d31235dd2ed02c6d22ce6465 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Tue, 2 Jul 2024 17:34:06 +0400 Subject: [PATCH 1/4] GH-88: Implement an arrow next to the flag --- src/index.tsx | 16 ++++++++++++++-- src/types.ts | 2 ++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 261e350..2b3b51d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -40,6 +40,7 @@ const PhoneInput = forwardRef(({ value: initialValue = "", country = getDefaultISO2Code(), disabled = false, + enableArrow = false, enableSearch = false, disableDropdown = false, disableParentheses = false, @@ -227,7 +228,18 @@ const PhoneInput = forwardRef(({ } + label={<> +
+ {enableArrow && ( + + + + + + )} + } children={
{countries[name]} {displayFormat(mask)} @@ -236,7 +248,7 @@ const PhoneInput = forwardRef(({ ) })} - ), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder]) + ), [selectValue, query, enableArrow, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder]) return (
country?: string; + enableArrow?: boolean; + enableSearch?: boolean; searchNotFound?: string; From 30730c11bb38415bf4bc8e59387c3df2670d8b68 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Tue, 2 Jul 2024 22:57:12 +0400 Subject: [PATCH 2/4] GH-88: Add a switch for `enableArrow` option --- examples/antd4.x/src/Demo.tsx | 28 +++++++++++++++++++--------- examples/antd5.x/src/Demo.tsx | 28 +++++++++++++++++++--------- 2 files changed, 38 insertions(+), 18 deletions(-) diff --git a/examples/antd4.x/src/Demo.tsx b/examples/antd4.x/src/Demo.tsx index f6dbf98..31b3fe1 100644 --- a/examples/antd4.x/src/Demo.tsx +++ b/examples/antd4.x/src/Demo.tsx @@ -19,6 +19,7 @@ import CheckOutlined from "@ant-design/icons/CheckOutlined"; const Demo = () => { const [form] = useForm(); const [value, setValue] = useState(null); + const [arrow, setArrow] = useState(false); const [strict, setStrict] = useState(false); const [search, setSearch] = useState(false); const [copied, setCopied] = useState(false); @@ -34,13 +35,14 @@ const Demo = () => { const code = useMemo(() => { let code = " { const pathname = window.location.pathname.replace(/\/$/, ''); @@ -97,30 +99,37 @@ const Demo = () => {
- + setSearch(!search)} + onChange={() => setDropdown(!dropdown)} /> - + setDropdown(!dropdown)} + onChange={() => setParentheses(!parentheses)} />
- + setParentheses(!parentheses)} + onChange={() => setSearch(!search)} + /> + + + setArrow(!arrow)} />
@@ -150,6 +159,7 @@ const Demo = () => { { const [form] = useForm(); const [value, setValue] = useState(null); + const [arrow, setArrow] = useState(false); const [strict, setStrict] = useState(false); const [search, setSearch] = useState(false); const [copied, setCopied] = useState(false); @@ -39,13 +40,14 @@ const Demo = () => { const code = useMemo(() => { let code = " { if (algorithm === "defaultAlgorithm") { @@ -102,30 +104,37 @@ const Demo = () => {
- + setSearch(!search)} + onChange={() => setDropdown(!dropdown)} /> - + setDropdown(!dropdown)} + onChange={() => setParentheses(!parentheses)} />
- + + setSearch(!search)} + /> + + setParentheses(!parentheses)} + onChange={() => setArrow(!arrow)} />
@@ -155,6 +164,7 @@ const Demo = () => { Date: Tue, 2 Jul 2024 22:57:33 +0400 Subject: [PATCH 3/4] GH-88: Update the docs - add `enableArrow` option --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 895a0e1..cc17ea5 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ Apart from the phone-specific properties described below, all [Input](https://an |--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------| | 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 | | country | Country code to be selected by default. By default, it will show the flag of the user's country. | string | +| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean | | enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean | | searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string | | searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string | From cddf0dd666d68dd94e1814bb78b0bef8df7c786f Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 3 Jul 2024 00:32:28 +0400 Subject: [PATCH 4/4] GH-88: Upgrade the dependency version --- examples/antd4.x/package.json | 2 +- examples/antd5.x/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/antd4.x/package.json b/examples/antd4.x/package.json index f9a06b9..edb1899 100644 --- a/examples/antd4.x/package.json +++ b/examples/antd4.x/package.json @@ -7,7 +7,7 @@ "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "antd": "^4.24.8", - "antd-phone-input": "^0.3.8", + "antd-phone-input": "^0.3.9", "craco-less": "^2.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/antd5.x/package.json b/examples/antd5.x/package.json index 31f3ab9..da72667 100644 --- a/examples/antd5.x/package.json +++ b/examples/antd5.x/package.json @@ -6,7 +6,7 @@ "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "antd": "^5.8.3", - "antd-phone-input": "^0.3.8", + "antd-phone-input": "^0.3.9", "copy-to-clipboard": "^3.3.3", "react": "^18.2.0", "react-dom": "^18.2.0",