IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: PhoneInput: bugfix with prefix

Browse Source
This commit is contained in:
Elyor Djalilov 2022-10-05 16:36:34 +05:00
parent 2faed80c67
commit 2c2419d983
4 changed files with 511 additions and 503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/components/input-phone/index.js
View File

@ -7,6 +7,7 @@ import PropTypes from "prop-types";
import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
import Box from "@docspace/components/box"; import Box from "@docspace/components/box";
import ComboBox from "@docspace/components/combobox"; import ComboBox from "@docspace/components/combobox";
import Label from "@docspace/components/label";
import TextInput from "@docspace/components/text-input"; import TextInput from "@docspace/components/text-input";
import SearchInput from "@docspace/components/search-input"; import SearchInput from "@docspace/components/search-input";
import DropDown from "@docspace/components/drop-down"; import DropDown from "@docspace/components/drop-down";
@ -26,13 +27,12 @@ const InputPhone = (props) => {
const el = options.find((option) => option.dialCode === str); const el = options.find((option) => option.dialCode === str);
if (e.target.value === "") { if (e.target.value === "") {
setPhoneValue("+");
setIsValid(false); setIsValid(false);
setCountry((prev) => ({ ...prev, icon: InvalidFlag })); setCountry((prev) => ({ ...prev, icon: InvalidFlag }));
} else {
setPhoneValue(e.target.value);
} }
setPhoneValue(e.target.value);
if (el) { if (el) {
setIsValid(true); setIsValid(true);
setCountry({ setCountry({
@ -99,7 +99,7 @@ const InputPhone = (props) => {
onClick={onCountryClick} onClick={onCountryClick}
> >
<Text className="country-name">{country.name}</Text> <Text className="country-name">{country.name}</Text>
<Text className="country-dialcode">{country.dialCode}</Text> <Text className="country-dialcode">{`+${country.dialCode}`}</Text>
</DropDownItem> </DropDownItem>
); );
}; };
@ -114,7 +114,7 @@ const InputPhone = (props) => {
className="country-box" className="country-box"
selectedOption={country} selectedOption={country}
/> />
<Label text="+" className="prefix" />
<TextInput <TextInput
type="tel" type="tel"
className="input-phone" className="input-phone"
@ -125,7 +125,6 @@ const InputPhone = (props) => {
value={phoneValue} value={phoneValue}
onChange={onInputChange} onChange={onInputChange}
/> />
<DropDown <DropDown
open={isOpen} open={isOpen}
clickOutsideAction={handleClick} clickOutsideAction={handleClick}

2
packages/components/input-phone/input-phone.stories.js
View File

@ -34,7 +34,7 @@ Default.args = {
mask: options[182].mask, // default dialCode +7 mask: options[182].mask, // default dialCode +7
icon: options[182].flag, // default flag Russia icon: options[182].flag, // default flag Russia
}, },
phonePlaceholderText: "+7 XXX XXX-XX-XX", phonePlaceholderText: "7 XXX XXX-XX-XX",
searchPlaceholderText: "Search", searchPlaceholderText: "Search",
searchEmptyMessage: "Nothing found", searchEmptyMessage: "Nothing found",
errorMessage: "Сountry code is invalid", errorMessage: "Сountry code is invalid",

988
packages/components/input-phone/options.js
View File

File diff suppressed because it is too large Load Diff

13
packages/components/input-phone/styled-input-phone.js
View File

@ -5,7 +5,7 @@ import Base from "../themes/base";
export const StyledBox = styled(Box)` export const StyledBox = styled(Box)`
position: relative; position: relative;
max-width: ${(props) => props.theme.inputPhone.width}; max-width: ${(props) => props.theme.inputPhone.width};
border: 1px solid ${(props) => outline: 1px solid ${(props) =>
props.hasError props.hasError
? props.theme.inputPhone.errorBorderColor ? props.theme.inputPhone.errorBorderColor
: props.theme.inputPhone.inactiveBorderColor}; : props.theme.inputPhone.inactiveBorderColor};
@ -25,7 +25,8 @@ export const StyledBox = styled(Box)`
.input-phone { .input-phone {
height: ${(props) => props.theme.inputPhone.height}; height: ${(props) => props.theme.inputPhone.height};
padding-left: 10px; padding-left: 20px;
margin-left: -8px;
border-left: 1px solid ${(props) => border-left: 1px solid ${(props) =>
props.theme.inputPhone.inactiveBorderColor} !important; props.theme.inputPhone.inactiveBorderColor} !important;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -33,6 +34,14 @@ export const StyledBox = styled(Box)`
background: ${(props) => props.theme.inputPhone.backgroundColor}; background: ${(props) => props.theme.inputPhone.backgroundColor};
} }
.prefix {
position: relative;
top: 0;
left: 12px;
font-size: 14px;
font-weight: 400;
}
.combo-button { .combo-button {
width: 100%; width: 100%;
height: 100%; height: 100%;