added selection by dialCode

packages/components/input-phone/index.js

@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { options } from "./options";
+// import { FixedSizeList as List } from 'react-window';
 import ComboBox from "@docspace/components/combobox";
 import Box from "@docspace/components/box";
-import SearchInput from "@docspace/components/search-input";
+import InputBlock from "@docspace/components/input-block";
 import DropDown from "@docspace/components/drop-down";
 import DropDownItem from "@docspace/components/drop-down-item";
 import TextInput from "@docspace/components/text-input";
@@ -12,15 +13,35 @@ const StyledComboBox = styled(ComboBox)`
   .combo-button-label {
     font-weight: 400;
     line-height: 22px;
+    padding: 10px;
+    text-align: center;
+    margin: 0;
   }
   .combo-button {
     height: 44px;
     border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    cursor: pointer;
+    padding-left: 0;
+    &:focus-within {
+      border-color: red;
+    }
   }
 `;
 
+const StyledInput = styled(TextInput)`
+  padding-left: 10px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+`;
+
+const CountryFlag = styled.div`
+  border: 1px solid #aeaeae;
+  margin-right: 10px;
+  padding: 0 5px;
+`;
+
 const CountryTitle = styled.h3`
   font-size: 13px;
   font-weight: 400;
@@ -39,77 +60,92 @@ const CountryDialCode = styled.p`
 `;
 
 export const InputPhone = () => {
-  const [phoneValue, setPhoneValue] = useState("");
-  const [open, setOpen] = useState(false);
+  const [phoneValue, setPhoneValue] = useState("+");
+  const [searchValue, setSearchValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleChange = (e) => {
-    setPhoneValue(e.target.value.replace(/\D/g, ""));
+    if (e.target.value === "") {
+      setPhoneValue("+");
+    } else {
+      setPhoneValue(e.target.value);
+    }
   };
 
-  // const newOptions = [];
-
-  // options.map((option) => {
-  //   newOptions.push({
-  //     key: option.code,
-  //     icon: option.flag,
-  //     label: option.name,
-  //   });
-  // });
-
   return (
     <Box
       displayProp="flex"
       alignContent="center"
-      widthProp="320px"
-      style={{ position: "relative" }}
+      style={{ position: "relative", maxWidth: "320px" }}
     >
-      <Box>
+      <Box style={{ cursor: "pointer" }}>
         <StyledComboBox
-          onClick={() => setOpen(true)}
+          onClick={() => setIsOpen(!isOpen)}
           options={[]}
           scaled={true}
           selectedOption={{
             key: options[0].code,
-            label: options[0].dialCode,
+            label: "Flag",
           }}
-          style={{ cursor: "pointer" }}
         />
       </Box>
-      <TextInput
+      <StyledInput
+        onKeyPress={(e) => {
+          if (!/[0-9]/.test(e.key)) {
+            e.preventDefault();
+          }
+        }}
         type="text"
+        maxLength={15}
         value={phoneValue}
         onChange={handleChange}
-        style={{
-          paddingLeft: "10px",
-          borderTopLeftRadius: "0",
-          borderBottomLeftRadius: "0",
-        }}
+        className="phone-input"
       />
+
       <DropDown
-        open
+        // isDropdown
+        open={isOpen}
+        clickOutsideAction={() => setIsOpen(!isOpen)}
         isDefaultMode={false}
+        // maxHeight={200}
+        manualWidth="100%"
         style={{
           padding: "12px 16px",
-          width: "320px",
-          height: "165px",
           boxSizing: "border-box",
           marginTop: "4px",
         }}
       >
-        <SearchInput />
-        {options.map((country) => {
-          return (
+        <InputBlock
+          type="text"
+          iconName="static/images/search.react.svg"
+          placeholder="Search"
+          value={searchValue}
+          scale={true}
+          onChange={(e) => setSearchValue(e.target.value)}
+          style={{ height: "32px" }}
+        />
+
+        {options
+          .filter((val) => val.name.toLowerCase().includes(searchValue))
+          .map((country) => (
             <DropDownItem
+              // noHover
+              onClick={() => {
+                setPhoneValue(country.dialCode), setIsOpen(!isOpen);
+              }}
+              key={country.code}
               style={{
                 padding: "9px 0",
                 boxSizing: "border-box",
+                display: "flex",
+                alignItems: "center",
               }}
             >
+              <CountryFlag>Flag</CountryFlag>
               <CountryTitle>{country.name}</CountryTitle>
               <CountryDialCode>{country.dialCode}</CountryDialCode>
             </DropDownItem>
-          );
-        })}
+          ))}
       </DropDown>
     </Box>
   );

packages/components/input-phone/options.js

@@ -1,132 +1,91 @@
 import { default as AF } from "./flags/afghanistan.react.svg";
 import { default as AX } from "./flags/alandIslands.react.svg";
 import { default as AL } from "./flags/albania.react.svg";
+import { default as DZ } from "./flags/algeria.react.svg";
+import { default as AS } from "./flags/americanSamoa.react.svg";
+import { default as AD } from "./flags/andorra.react.svg";
+import { default as AO } from "./flags/angola.react.svg";
+import { default as AI } from "./flags/anguilla.react.svg";
+import { default as AG } from "./flags/antiguaAndBarbuda.react.svg";
+import { default as AR } from "./flags/argentina.react.svg";
+import { default as AM } from "./flags/armenia.react.svg";
 
 export const options = [
   {
-    name: "Afghanistan (‫افغانستان‬‎)",
+    name: "Afghanistan",
     dialCode: "+93",
     code: "AF",
     mask: null,
     flag: "./flags/albania.react.svg",
   },
   {
-    name: "Åland Islands (Ahvenanmaa)",
+    name: "Åland Islands",
     dialCode: "+358",
     code: "AX",
     mask: null,
     flag: "./flags/albania.react.svg",
   },
   {
-    name: "Albania (Shqipëria)",
+    name: "Albania",
     dialCode: "+355",
     code: "AL",
     mask: null,
     flag: "./flags/albania.react.svg",
   },
   {
-    name: "Afghanistan (‫افغانستان‬‎)",
-    dialCode: "+93",
-    code: "AF",
+    name: "Algeria",
+    dialCode: "+213",
+    code: "DZ",
     mask: null,
-    flag: "./flags/albania.react.svg",
+    flag: "./flags/algeria.react.svg",
   },
   {
-    name: "Åland Islands (Ahvenanmaa)",
-    dialCode: "+358",
-    code: "AX",
+    name: "American Samoa",
+    dialCode: "+1684",
+    code: "AS",
     mask: null,
-    flag: "./flags/albania.react.svg",
+    flag: "./flags/americanSamoa.react.svg",
   },
   {
-    name: "Albania (Shqipëria)",
-    dialCode: "+355",
-    code: "AL",
+    name: "Andorra",
+    dialCode: "+376",
+    code: "AD",
     mask: null,
-    flag: "./flags/albania.react.svg",
+    flag: "./flags/andorra.react.svg",
   },
   {
-    name: "Afghanistan (‫افغانستان‬‎)",
-    dialCode: "+93",
-    code: "AF",
+    name: "Angola",
+    dialCode: "+244",
+    code: "AO",
     mask: null,
-    flag: "./flags/albania.react.svg",
+    flag: "./flags/angola.react.svg",
   },
   {
-    name: "Åland Islands (Ahvenanmaa)",
-    dialCode: "+358",
-    code: "AX",
+    name: "Anguilla",
+    dialCode: "+1264",
+    code: "AI",
     mask: null,
-    flag: "./flags/albania.react.svg",
+    flag: "./flags/anguilla.react.svg",
   },
   {
-    name: "Albania (Shqipëria)",
-    dialCode: "+355",
-    code: "AL",
+    name: "Antigua and Barbuda",
+    dialCode: "+1268",
+    code: "AG",
     mask: null,
-    flag: "./flags/albania.react.svg",
+    flag: "./flags/antiguaAndBarbuda.react.svg",
   },
   {
-    name: "Afghanistan (‫افغانستان‬‎)",
-    dialCode: "+93",
-    code: "AF",
-    mask: null,
-    flag: "./flags/albania.react.svg",
+    name: "Argentina",
+    dialCode: "+54",
+    code: "AR",
+    mask: [/\d/, /\d/, " ", /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/],
+    flag: "./flags/argentina.react",
   },
   {
-    name: "Åland Islands (Ahvenanmaa)",
-    dialCode: "+358",
-    code: "AX",
+    name: "Armenia",
+    dialCode: "+374",
+    code: "AM",
     mask: null,
-    flag: "./flags/albania.react.svg",
-  },
-  {
-    name: "Albania (Shqipëria)",
-    dialCode: "+355",
-    code: "AL",
-    mask: null,
-    flag: "./flags/albania.react.svg",
-  },
-  {
-    name: "Afghanistan (‫افغانستان‬‎)",
-    dialCode: "+93",
-    code: "AF",
-    mask: null,
-    flag: "./flags/albania.react.svg",
-  },
-  {
-    name: "Åland Islands (Ahvenanmaa)",
-    dialCode: "+358",
-    code: "AX",
-    mask: null,
-    flag: "./flags/albania.react.svg",
-  },
-  {
-    name: "Albania (Shqipëria)",
-    dialCode: "+355",
-    code: "AL",
-    mask: null,
-    flag: "./flags/albania.react.svg",
-  },
-  {
-    name: "Afghanistan (‫افغانستان‬‎)",
-    dialCode: "+93",
-    code: "AF",
-    mask: null,
-    flag: "./flags/albania.react.svg",
-  },
-  {
-    name: "Åland Islands (Ahvenanmaa)",
-    dialCode: "+358",
-    code: "AX",
-    mask: null,
-    flag: "./flags/albania.react.svg",
-  },
-  {
-    name: "Albania (Shqipëria)",
-    dialCode: "+355",
-    code: "AL",
-    mask: null,
-    flag: "./flags/albania.react.svg",
+    flag: "./flags/armenia.react.svg",
   },
 ];