some refactoring
This commit is contained in:
parent
3f74a48aec
commit
cfd84355be
@ -1,46 +1,116 @@
|
||||
import { useState } from "react";
|
||||
import ComboBox from "@docspace/components/combobox";
|
||||
import { options } from "./options";
|
||||
import ComboBox from "@docspace/components/combobox";
|
||||
import Box from "@docspace/components/box";
|
||||
import SearchInput from "./../search-input/index";
|
||||
import SearchInput from "@docspace/components/search-input";
|
||||
import DropDown from "@docspace/components/drop-down";
|
||||
import DropDownItem from "@docspace/components/drop-down-item";
|
||||
import TextInput from "@docspace/components/text-input";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledComboBox = styled(ComboBox)`
|
||||
.combo-button-label {
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.combo-button {
|
||||
height: 44px;
|
||||
border-right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const CountryTitle = styled.h3`
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #33333;
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
line-height: 20px;
|
||||
`;
|
||||
|
||||
const CountryDialCode = styled.p`
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
color: #a3a9ae;
|
||||
`;
|
||||
|
||||
export const InputPhone = () => {
|
||||
const [phoneValue, setPhoneValue] = useState("");
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const handleChange = (e) => {
|
||||
setPhoneValue(e.target.value.replace(/\D/g, ""));
|
||||
};
|
||||
|
||||
const newOptions = [];
|
||||
// const newOptions = [];
|
||||
|
||||
options.map((option) => {
|
||||
newOptions.push({
|
||||
key: option.code,
|
||||
label: option.name,
|
||||
icon: option.flag,
|
||||
});
|
||||
});
|
||||
// options.map((option) => {
|
||||
// newOptions.push({
|
||||
// key: option.code,
|
||||
// icon: option.flag,
|
||||
// label: option.name,
|
||||
// });
|
||||
// });
|
||||
|
||||
return (
|
||||
<Box displayProp="flex" alignItems="center" widthProp="330px">
|
||||
<Box style={{ width: "50px", marginRight: "-10px" }}>
|
||||
<ComboBox
|
||||
onSelect={() => console.log("selected")}
|
||||
options={newOptions}
|
||||
advancedOption={<SearchInput />}
|
||||
<Box
|
||||
displayProp="flex"
|
||||
alignContent="center"
|
||||
widthProp="320px"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<Box>
|
||||
<StyledComboBox
|
||||
onClick={() => setOpen(true)}
|
||||
options={[]}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
selectedOption={newOptions[2]}
|
||||
fillIcon={false}
|
||||
selectedOption={{
|
||||
key: options[0].code,
|
||||
label: options[0].dialCode,
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
</Box>
|
||||
<TextInput
|
||||
type="text"
|
||||
value={phoneValue}
|
||||
onChange={handleChange}
|
||||
style={{ paddingLeft: "15px" }}
|
||||
style={{
|
||||
paddingLeft: "10px",
|
||||
borderTopLeftRadius: "0",
|
||||
borderBottomLeftRadius: "0",
|
||||
}}
|
||||
/>
|
||||
<DropDown
|
||||
open
|
||||
isDefaultMode={false}
|
||||
style={{
|
||||
padding: "12px 16px",
|
||||
width: "320px",
|
||||
height: "165px",
|
||||
boxSizing: "border-box",
|
||||
marginTop: "4px",
|
||||
}}
|
||||
>
|
||||
<SearchInput />
|
||||
{options.map((country) => {
|
||||
return (
|
||||
<DropDownItem
|
||||
style={{
|
||||
padding: "9px 0",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<CountryTitle>{country.name}</CountryTitle>
|
||||
<CountryDialCode>{country.dialCode}</CountryDialCode>
|
||||
</DropDownItem>
|
||||
);
|
||||
})}
|
||||
</DropDown>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
@ -129,46 +129,4 @@ export const options = [
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user