configured input phone

packages/components/input-phone/index.js

@@ -1,16 +1,35 @@
-import PhoneInput from "react-phone-input-2";
+import { useState } from "react";
+import ReactPhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/style.css";
 
 export const InputPhone = () => {
+  const [phoneValue, setPhoneValue] = useState("");
+
   return (
-    <PhoneInput
-      inputExtraProps={{
+    <ReactPhoneInput
+      inputProps={{
         name: "phone",
         required: true,
         autoFocus: true,
       }}
+      value={phoneValue}
+      onChange={(phone) => setPhoneValue(phone)}
+      country="ru"
+      buttonStyle={{ background: "#fff", width: "50px" }}
+      inputStyle={{
+        width: "320px",
+        height: "44px",
+        marginLeft: "10px",
+        borderRadius: "3px",
+        fontSize: "16px",
+      }}
+      searchPlaceholder="Search"
+      containerStyle={{ marginTop: "15px" }}
+      searchStyle={{ margin: "0", width: "97%", height: "30px" }}
+      enableSearch
+      disableSearchIcon
       placeholder="XXX XXX-XX-XX"
-      defaultCountry="ru"
+      defaultErrorMessage="Сountry code is invalid"
     />
   );
 };

packages/components/input-phone/input-phone.stories.js

@@ -1,15 +1,20 @@
 import { InputPhone } from ".";
+import { deviceType } from "react-device-detect";
 
 export default {
-  title: "InputPhone",
+  title: "Components/InputPhone",
   component: InputPhone,
 };
 
-const Template = (args) => <InputPhone {...args} />;
+const Template = (args) => (
+  <div style={{ height: "500px" }}>
+    <InputPhone {...args} />
+  </div>
+);
 
 export const Default = Template.bind({});
 
 Default.args = {
-  defaultCountry: "ru",
-  placeholder: "XXX XXX-XX-XX",
+  country: "ru",
+  enableSearch: true,
 };

packages/components/phone-input/index.js

@@ -10,8 +10,6 @@ import { options, countryCodes } from "./options";
 const PhoneInput = memo((props) => {
   const [country, setCountry] = useState(props.locale);
 
-  console.log(country);
-
   const onChangeCountry = useCallback((country) => setCountry(country), [
     country,
   ]);
@@ -23,7 +21,7 @@ const PhoneInput = memo((props) => {
 
   const getPlaceholder = (locale) =>
     options.find((o) => o.code === locale).mask === null
-      ? "XXX XXX-XX-XX"
+      ? "Enter phone number"
       : options
           .find((o) => o.code === locale)
           .mask.join("")
@@ -51,9 +49,9 @@ const PhoneInput = memo((props) => {
         />
       </Box>
       <Box displayProp="flex">
-        {/* <Box paddingProp={"11px 0 11px 16px"}>
+        <Box paddingProp={"11px 0 11px 16px"}>
           <Text fontSize={"16px"}>{getLocaleCode(country)}</Text>
-        </Box> */}
+        </Box>
         <div>
           <StyledPhoneInput
             mask={getMask(country)}

packages/components/phone-input/phone-input.stories.js

@@ -20,5 +20,3 @@ export const basic = Template.bind({});
 basic.args = {
   locale: "GB",
 };
-
-

packages/components/phone-input/styled-phone-input.js

@@ -9,13 +9,6 @@ const StyledPhoneInput = styled(TextInput)`
   padding: 11px 0px 11px 5px;
 `;
 
-const StyledCodeInput = styled(TextInput)`
-  border: 0;
-  font-size: 16px;
-  padding: 11px 0px 11px 5px;
-  width: 20px;
-`;
-
 const StyledTriangle = styled.div`
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
@@ -38,7 +31,6 @@ const StyledDropDown = styled.div`
 `;
 
 const StyledCountryItem = styled(Box)`
-  margin: 10px 0;
   cursor: pointer;
   &:hover {
     background-color: ${(props) => props.theme.phoneInput.itemHoverColor};
@@ -67,7 +59,7 @@ const StyledSearchPanel = styled.div`
 
 const StyledInputBox = styled(Box)`
   display: flex;
-  border-radius: 3px;
+  border-radius: 3px 3px 3px 3px;
   border: 1px solid #d0d5da;
   width: ${(props) => props.theme.phoneInput.width};
   height: ${(props) => props.theme.phoneInput.height};
@@ -77,7 +69,6 @@ StyledDropDown.defaultProps = { theme: Base };
 StyledCountryItem.defaultProps = { theme: Base };
 StyledSearchPanel.defaultProps = { theme: Base };
 StyledInputBox.defaultProps = { theme: Base };
-StyledCodeInput.defaultProps = { theme: Base };
 
 export {
   StyledPhoneInput,
@@ -88,5 +79,4 @@ export {
   StyledSearchPanel,
   StyledInputBox,
   StyledDropDownWrapper,
-  StyledCodeInput,
 };