* Add emails validation to share dialog

* Add selected style to active filter in maps page


Approved-by: Paulo Veiga
This commit is contained in:
Matias Arriola 2022-02-23 14:11:43 +00:00 committed by Paulo Veiga
parent 59de3c7cf5
commit 5c8390b415
2 changed files with 29 additions and 4 deletions

View File

@ -113,6 +113,9 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
return perm.name ? `${perm.name}<${perm.email}>` : perm.email; return perm.name ? `${perm.name}<${perm.email}>` : perm.email;
}; };
// very basic email validation, just make sure the basic syntax is fine
const isValid = model.emails.split(',').every(str => /\S+@\S+\.\S+/.test((str || '').trim()));
return ( return (
<div> <div>
<BaseDialog <BaseDialog
@ -183,6 +186,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
variant="contained" variant="contained"
disableElevation={true} disableElevation={true}
onClick={handleOnAddClick} onClick={handleOnAddClick}
disabled={!isValid}
> >
<FormattedMessage id="share.add-button" defaultMessage="Add" /> <FormattedMessage id="share.add-button" defaultMessage="Add" />
</Button> </Button>

View File

@ -20,7 +20,6 @@ import LanguageMenu from './language-menu';
import AppI18n, { Locales } from '../../classes/app-i18n'; import AppI18n, { Locales } from '../../classes/app-i18n';
import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import ListItem from '@mui/material/ListItem';
import AddCircleTwoTone from '@mui/icons-material/AddCircleTwoTone'; import AddCircleTwoTone from '@mui/icons-material/AddCircleTwoTone';
import CloudUploadTwoTone from '@mui/icons-material/CloudUploadTwoTone'; import CloudUploadTwoTone from '@mui/icons-material/CloudUploadTwoTone';
@ -34,6 +33,7 @@ import StarTwoTone from '@mui/icons-material/StarTwoTone';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
@ -41,6 +41,7 @@ import logoIcon from './logo-small.svg';
import poweredByIcon from './pwrdby-white.svg'; import poweredByIcon from './pwrdby-white.svg';
import LabelDeleteConfirm from './maps-list/label-delete-confirm'; import LabelDeleteConfirm from './maps-list/label-delete-confirm';
import ReactGA from 'react-ga'; import ReactGA from 'react-ga';
import { withStyles } from '@mui/styles';
export type Filter = GenericFilter | LabelFilter; export type Filter = GenericFilter | LabelFilter;
@ -283,6 +284,27 @@ interface ListItemProps {
onDelete?: (id: number) => void; onDelete?: (id: number) => void;
} }
// https://stackoverflow.com/questions/61486061/how-to-set-selected-and-hover-color-of-listitem-in-mui
const CustomListItem = withStyles({
root: {
"&$selected": {
backgroundColor: "rgb(210, 140, 5)",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
},
"&$selected:hover": {
backgroundColor: "rgb(210, 140, 5)",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
},
},
selected: {}
})(ListItemButton);
const StyleListItem = (props: ListItemProps) => { const StyleListItem = (props: ListItemProps) => {
const icon = props.icon; const icon = props.icon;
const label = props.label; const label = props.label;
@ -295,7 +317,6 @@ const StyleListItem = (props: ListItemProps) => {
activeFilter.type == filter.type && activeFilter.type == filter.type &&
(activeFilter.type != 'label' || (activeFilter.type != 'label' ||
(activeFilter as LabelFilter).label == (filter as LabelFilter).label); (activeFilter as LabelFilter).label == (filter as LabelFilter).label);
const handleOnClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, filter: Filter) => { const handleOnClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, filter: Filter) => {
event.stopPropagation(); event.stopPropagation();
onClick(filter); onClick(filter);
@ -313,7 +334,7 @@ const StyleListItem = (props: ListItemProps) => {
}; };
return ( return (
<ListItem button selected={isSelected} onClick={(e) => handleOnClick(e, filter)}> <CustomListItem selected={isSelected} onClick={(e) => handleOnClick(e, filter)}>
<ListItemIcon>{icon}</ListItemIcon> <ListItemIcon>{icon}</ListItemIcon>
<ListItemText style={{ color: 'white' }} primary={label} /> <ListItemText style={{ color: 'white' }} primary={label} />
{filter.type == 'label' && ( {filter.type == 'label' && (
@ -327,7 +348,7 @@ const StyleListItem = (props: ListItemProps) => {
</IconButton> </IconButton>
</ListItemSecondaryAction> </ListItemSecondaryAction>
)} )}
</ListItem> </CustomListItem>
); );
}; };