Implement enableArrow prototype for phone inputs

Author: ArtyomVancyan

development/src/AntDemo.tsx

@@ -48,7 +48,11 @@ const AntDemo = () => {
                     )}
                     <Form>
                         <FormItem name="phone" rules={[{validator}]}>
-                            <PhoneInput enableSearch onChange={(e) => setValue(e as any)}/>
+                            <PhoneInput
+                                enableArrow
+                                enableSearch
+                                onChange={(e) => setValue(e as any)}
+                            />
                         </FormItem>
                         <FormItem name="test">
                             <Input/>

development/src/MuiDemo.tsx

@@ -32,6 +32,7 @@ const Demo = () => {
                     )}
                     <form noValidate autoComplete="off" onSubmit={e => e.preventDefault()}>
                         <PhoneInput
+                            enableArrow
                             enableSearch
                             error={error}
                             variant="filled"

development/src/ant-phone/index.tsx

@@ -39,6 +39,7 @@ const PhoneInput = forwardRef(({
                                    value: initialValue = "",
                                    country = getDefaultISO2Code(),
                                    disabled = false,
+                                   enableArrow = false,
                                    enableSearch = false,
                                    disableDropdown = false,
                                    disableParentheses = false,
@@ -224,7 +225,18 @@ const PhoneInput = forwardRef(({
                     <Select.Option
                         value={iso + dial}
                         key={`${iso}_${mask}`}
-                        label={<div className={`flag ${iso}`}/>}
+                        label={<>
+                            <div className={`flag ${iso}`}/>
+                            {enableArrow && (
+                                <span role="img" className="anticon" style={{paddingLeft: 8}}>
+                                    <svg className="icon" viewBox="0 0 1024 1024"
+                                         focusable="false" fill="currentColor" width="16" height="18">
+                                        <path
+                                            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"/>
+                                    </svg>
+                                </span>
+                            )}
+                        </>}
                         children={<div className={`${prefixCls}-phone-input-select-item`}>
                             <div className={`flag ${iso}`}/>
                             {countries[name]}&nbsp;{displayFormat(mask)}
@@ -233,7 +245,7 @@ const PhoneInput = forwardRef(({
                 )
             })}
         </Select>
-    ), [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 (
         <div className={`${prefixCls}-phone-input-wrapper`}

development/src/ant-phone/types.ts

@@ -11,6 +11,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
 
     country?: string;
 
+    enableArrow?: boolean;
+
     enableSearch?: boolean;
 
     searchNotFound?: string;

development/src/mui-phone/index.tsx

@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
                                    searchVariant = undefined,
                                    country = getDefaultISO2Code(),
                                    disabled = false,
+                                   enableArrow = false,
                                    enableSearch = false,
                                    disableDropdown = false,
                                    disableParentheses = false,
@@ -198,10 +199,21 @@ const PhoneInput = forwardRef(({
                     startAdornment: (
                         <InputAdornment position="start">
                             <span
-                                style={{cursor: "pointer"}}
+                                style={{
+                                    display: "flex",
+                                    cursor: "pointer",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }}
                                 onClick={() => setOpen(!open)}
                             >
                                 <div className={`flag ${countryCode}`}/>
+                                {enableArrow && (
+                                    <svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
+                                         style={{paddingLeft: 4}} width="22" height="20">
+                                        <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
+                                    </svg>
+                                )}
                             </span>
                         </InputAdornment>
                     )

development/src/mui-phone/types.ts

@@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
 
     country?: string;
 
+    enableArrow?: boolean;
+
     enableSearch?: boolean;
 
     searchNotFound?: string;