Web: PhoneInput: bugfix with prefix
This commit is contained in:
parent
2faed80c67
commit
2c2419d983
@ -7,6 +7,7 @@ import PropTypes from "prop-types";
|
||||
import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
|
||||
import Box from "@docspace/components/box";
|
||||
import ComboBox from "@docspace/components/combobox";
|
||||
import Label from "@docspace/components/label";
|
||||
import TextInput from "@docspace/components/text-input";
|
||||
import SearchInput from "@docspace/components/search-input";
|
||||
import DropDown from "@docspace/components/drop-down";
|
||||
@ -26,13 +27,12 @@ const InputPhone = (props) => {
|
||||
const el = options.find((option) => option.dialCode === str);
|
||||
|
||||
if (e.target.value === "") {
|
||||
setPhoneValue("+");
|
||||
setIsValid(false);
|
||||
setCountry((prev) => ({ ...prev, icon: InvalidFlag }));
|
||||
} else {
|
||||
setPhoneValue(e.target.value);
|
||||
}
|
||||
|
||||
setPhoneValue(e.target.value);
|
||||
|
||||
if (el) {
|
||||
setIsValid(true);
|
||||
setCountry({
|
||||
@ -99,7 +99,7 @@ const InputPhone = (props) => {
|
||||
onClick={onCountryClick}
|
||||
>
|
||||
<Text className="country-name">{country.name}</Text>
|
||||
<Text className="country-dialcode">{country.dialCode}</Text>
|
||||
<Text className="country-dialcode">{`+${country.dialCode}`}</Text>
|
||||
</DropDownItem>
|
||||
);
|
||||
};
|
||||
@ -114,7 +114,7 @@ const InputPhone = (props) => {
|
||||
className="country-box"
|
||||
selectedOption={country}
|
||||
/>
|
||||
|
||||
<Label text="+" className="prefix" />
|
||||
<TextInput
|
||||
type="tel"
|
||||
className="input-phone"
|
||||
@ -125,7 +125,6 @@ const InputPhone = (props) => {
|
||||
value={phoneValue}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
|
||||
<DropDown
|
||||
open={isOpen}
|
||||
clickOutsideAction={handleClick}
|
||||
|
@ -34,7 +34,7 @@ Default.args = {
|
||||
mask: options[182].mask, // default dialCode +7
|
||||
icon: options[182].flag, // default flag Russia
|
||||
},
|
||||
phonePlaceholderText: "+7 XXX XXX-XX-XX",
|
||||
phonePlaceholderText: "7 XXX XXX-XX-XX",
|
||||
searchPlaceholderText: "Search",
|
||||
searchEmptyMessage: "Nothing found",
|
||||
errorMessage: "Сountry code is invalid",
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,7 @@ import Base from "../themes/base";
|
||||
export const StyledBox = styled(Box)`
|
||||
position: relative;
|
||||
max-width: ${(props) => props.theme.inputPhone.width};
|
||||
border: 1px solid ${(props) =>
|
||||
outline: 1px solid ${(props) =>
|
||||
props.hasError
|
||||
? props.theme.inputPhone.errorBorderColor
|
||||
: props.theme.inputPhone.inactiveBorderColor};
|
||||
@ -25,7 +25,8 @@ export const StyledBox = styled(Box)`
|
||||
|
||||
.input-phone {
|
||||
height: ${(props) => props.theme.inputPhone.height};
|
||||
padding-left: 10px;
|
||||
padding-left: 20px;
|
||||
margin-left: -8px;
|
||||
border-left: 1px solid ${(props) =>
|
||||
props.theme.inputPhone.inactiveBorderColor} !important;
|
||||
border-top-left-radius: 0;
|
||||
@ -33,6 +34,14 @@ export const StyledBox = styled(Box)`
|
||||
background: ${(props) => props.theme.inputPhone.backgroundColor};
|
||||
}
|
||||
|
||||
.prefix {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.combo-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
Loading…
Reference in New Issue
Block a user