mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix phone input and link input (#2679)

Browse Source 
* wip

* phone picker is appearing

* fixing picker placement

* set phone picker width

* fix link input
This commit is contained in:
bosiraphael
2023-11-23 16:38:13 +01:00
committed by GitHub
parent c795db33b2
commit 4f55243b30
9 changed files with 92 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
View File

@ -140,7 +140,8 @@ export const CountryPickerDropdownButton = ({
onChange={handleChange}
/>
}
dropdownOffset={{ x: -60, y: -34 }}
dropdownPlacement="bottom-start"
dropdownOffset={{ x: 0, y: 4 }}
/>
</DropdownScope>
);

87
front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx
View File

@ -27,13 +27,6 @@ const StyledIconContainer = styled.div`
}
`;
const StyledDropdownMenuContainer = styled.ul`
left: 6px;
padding: 0;
position: absolute;
top: 26px;
`;
export const CountryPickerDropdownSelect = ({
countries,
selectedCountry,
@ -56,54 +49,50 @@ export const CountryPickerDropdownSelect = ({
);
return (
<>
<StyledDropdownMenuContainer data-select-disable>
<DropdownMenu width="240px" disableBlur>
<DropdownMenuSearchInput
value={searchFilter}
onChange={(event) => setSearchFilter(event.currentTarget.value)}
autoFocus
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{filteredCountries?.length === 0 ? (
<MenuItem text="No result" />
) : (
<>
{selectedCountry && (
<DropdownMenu width="200px" disableBlur>
<DropdownMenuSearchInput
value={searchFilter}
onChange={(event) => setSearchFilter(event.currentTarget.value)}
autoFocus
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{filteredCountries?.length === 0 ? (
<MenuItem text="No result" />
) : (
<>
{selectedCountry && (
<MenuItemSelectAvatar
key={selectedCountry.countryCode}
selected={true}
onClick={() => onChange(selectedCountry.countryCode)}
text={`${selectedCountry.countryName} (+${selectedCountry.callingCode})`}
avatar={
<StyledIconContainer>
<selectedCountry.Flag />
</StyledIconContainer>
}
/>
)}
{filteredCountries.map(
({ countryCode, countryName, callingCode, Flag }) =>
selectedCountry?.countryCode === countryCode ? null : (
<MenuItemSelectAvatar
key={selectedCountry.countryCode}
selected={true}
onClick={() => onChange(selectedCountry.countryCode)}
text={`${selectedCountry.countryName} (+${selectedCountry.callingCode})`}
key={countryCode}
selected={selectedCountry?.countryCode === countryCode}
onClick={() => onChange(countryCode)}
text={`${countryName} (+${callingCode})`}
avatar={
<StyledIconContainer>
<selectedCountry.Flag />
<Flag />
</StyledIconContainer>
}
/>
)}
{filteredCountries.map(
({ countryCode, countryName, callingCode, Flag }) =>
selectedCountry?.countryCode === countryCode ? null : (
<MenuItemSelectAvatar
key={countryCode}
selected={selectedCountry?.countryCode === countryCode}
onClick={() => onChange(countryCode)}
text={`${countryName} (+${callingCode})`}
avatar={
<StyledIconContainer>
<Flag />
</StyledIconContainer>
}
/>
),
)}
</>
),
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
</StyledDropdownMenuContainer>
</>
</>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
);
};