From c2af561dd7f43ed4ebecf01dd0aed3a9c9622380 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 3 Jul 2024 00:16:43 +0400 Subject: [PATCH 1/3] GH-18: Implement `enableArrow` option --- src/core/index.tsx | 14 +++++++++++++- src/core/types.ts | 2 ++ src/index.tsx | 14 +++++++++++++- src/joy/index.tsx | 14 +++++++++++++- src/joy/types.ts | 2 ++ src/types.ts | 2 ++ 6 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/core/index.tsx b/src/core/index.tsx index c297456..07f2e04 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -29,6 +29,7 @@ const PhoneInput = forwardRef(({ searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, + enableArrow = false, enableSearch = false, disableDropdown = false, disableParentheses = false, @@ -206,10 +207,21 @@ const PhoneInput = forwardRef(({ startAdornment: ( setOpen(!open)} >
+ {enableArrow && ( + + + + )} ) diff --git a/src/core/types.ts b/src/core/types.ts index 81ce5be..28b17df 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit { country?: string; + enableArrow?: boolean; + enableSearch?: boolean; searchNotFound?: string; diff --git a/src/index.tsx b/src/index.tsx index 032eadf..71fe113 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -28,6 +28,7 @@ const PhoneInput = forwardRef(({ searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, + enableArrow = false, enableSearch = false, disableDropdown = false, disableParentheses = false, @@ -201,10 +202,21 @@ const PhoneInput = forwardRef(({ startAdornment: ( setOpen(!open)} >
+ {enableArrow && ( + + + + )} ) diff --git a/src/joy/index.tsx b/src/joy/index.tsx index 4538d36..557c663 100644 --- a/src/joy/index.tsx +++ b/src/joy/index.tsx @@ -28,6 +28,7 @@ const PhoneInput = forwardRef(({ searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, + enableArrow = false, enableSearch = false, disableDropdown = false, disableParentheses = false, @@ -196,10 +197,21 @@ const PhoneInput = forwardRef(({ onKeyDown={onKeyDown} startDecorator={( setOpen(!open)} >
+ {enableArrow && ( + + + + )} )} {...(muiInputProps as any)} diff --git a/src/joy/types.ts b/src/joy/types.ts index 915d123..5326e7e 100644 --- a/src/joy/types.ts +++ b/src/joy/types.ts @@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit country?: string; + enableArrow?: boolean; + enableSearch?: boolean; searchNotFound?: string; diff --git a/src/types.ts b/src/types.ts index f264409..c48c3a4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit { country?: string; + enableArrow?: boolean; + enableSearch?: boolean; searchNotFound?: string; From 7539b1b8db3dff3f16ee228ad326634d799e8d97 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 3 Jul 2024 00:16:57 +0400 Subject: [PATCH 2/3] GH-18: Document the `enableArrow` option --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9c319d8..fbf0a6f 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ Apart from the phone-specific properties described below, all [Input](https://mu |--------------------|-------------------------------------------------------------------------------------------------------------------------------|---------------------------| | value | An object containing a parsed phone number or the raw number. | [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 | | searchVariant | Accepts an Input variant, and values depend on the chosen Material distribution. | TextFieldVariants | | searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string | From ac49174175cdcbbcb2ebc77bc3117fcaee7965af Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Wed, 3 Jul 2024 00:30:09 +0400 Subject: [PATCH 3/3] GH-18: Add the `enableArrow` option to playground --- examples/material/package.json | 2 +- examples/material/src/Demo.tsx | 32 +++++++++++++++++++++++--------- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/examples/material/package.json b/examples/material/package.json index 9c3ea75..b9c7cf5 100644 --- a/examples/material/package.json +++ b/examples/material/package.json @@ -10,7 +10,7 @@ "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "copy-to-clipboard": "^3.3.3", - "mui-phone-input": "^0.1.2", + "mui-phone-input": "^0.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.51.4", diff --git a/examples/material/src/Demo.tsx b/examples/material/src/Demo.tsx index 792d0e3..33101ab 100644 --- a/examples/material/src/Demo.tsx +++ b/examples/material/src/Demo.tsx @@ -23,6 +23,7 @@ const Demo = () => { const [value, setValue] = useState(null); const [mode, setMode] = useState("light"); const [show, setShow] = useState(true); + const [arrow, setArrow] = useState(false); const [strict, setStrict] = useState(false); const [search, setSearch] = useState(false); const [copied, setCopied] = useState(false); @@ -50,13 +51,14 @@ const Demo = () => { const code = useMemo(() => { let code = " @@ -113,33 +115,44 @@ const Demo = () => {
setSearch(!search)} + onChange={() => setDropdown(!dropdown)} />} labelPlacement="start" style={{margin: 0}} - label="Search" + label="Dropdown" /> setDropdown(!dropdown)} + onChange={() => setParentheses(!parentheses)} />} labelPlacement="start" style={{margin: 0}} - label="Dropdown" + label="Parentheses" /> +
+
setParentheses(!parentheses)} + disabled={!dropdown} + onChange={() => setSearch(!search)} />} labelPlacement="start" style={{margin: 0}} - label="Parentheses" + label="Search" + /> + setArrow(!arrow)} + />} + labelPlacement="start" + style={{margin: 0}} + label="Arrow" />
Code @@ -172,6 +185,7 @@ const Demo = () => { error={error} disabled={disabled} onChange={onChange} + enableArrow={arrow} enableSearch={search} style={{width: "100%"}} disableDropdown={!dropdown}