@material-ui/icons#ExitToApp JavaScript Examples
The following examples show how to use
@material-ui/icons#ExitToApp.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: header.js From Queen with MIT License | 5 votes |
|
Header = ({ title, hierarchy }) => {
const { page, standalone, queenBindings, quit, setPage, currentPage } = useContext(
OrchestratorContext
);
const classes = useStyles({ standalone });
const setToFirstPage = useCallback(() => setPage('1'), [setPage]);
const quitButtonRef = useRef();
const utilInfo = type => {
return {
...SIMPLE_CLICK_EVENT,
idParadataObject: `${type}-button`,
page: currentPage,
};
};
const { sequence, subSequence } = hierarchy || {};
const sequenceBinded = {
...sequence,
label: lunatic.interpret(['VTL'])(queenBindings)(sequence?.label),
};
const subSequenceBinded = subSequence
? {
...subSequence,
label: lunatic.interpret(['VTL'])(queenBindings)(subSequence?.label),
}
: null;
const quitShortCut = () => {
if (quitButtonRef && quitButtonRef.current) quitButtonRef.current.focus();
quit();
};
return (
<div className={classes.root}>
<Navigation className={classes.headerItemNavigation} title={title} />
<div className="header-item">
<ButtonBase
focusRipple
onClick={setToFirstPage}
aria-label={D.backToBeginning}
title={D.backToBeginning}
>
<img id="logo" src={insee} alt="Logo de L'Insee" className={classes.headerLogo} />
</ButtonBase>
</div>
<div className={classes.headerTitle}>
<span className={classes.questionnaireTitle}>{title}</span>
{sequence && (
<BreadcrumbQueen
sequence={sequenceBinded}
subsequence={subSequenceBinded}
currentPage={page}
/>
)}
</div>
{!standalone && (
<>
<div className={classes.headerClose}>
<IconButton
ref={quitButtonRef}
title={D.simpleQuit}
className={classes.closeIcon}
onClick={paradataHandler(quit)(utilInfo('end-survey'))}
>
<ExitToApp htmlColor={'#000000'} />
</IconButton>
</div>
<KeyboardEventHandler
handleKeys={['alt+q']}
onKeyEvent={paradataHandler(quitShortCut)(utilInfo('end-survey'))}
handleFocusableElements
/>
</>
)}
</div>
);
}
Example #2
| Source File: NavigationBar.js From voicemail-for-amazon-connect with Apache License 2.0 | 5 votes |
|
render() {
let {classes} = this.props;
return (
<MuiThemeProvider theme={theme}>
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Grid container direction="row" justify="space-between" alignContent="center"
alignItems="center">
<Grid item>
<Grid container direction="row" alignItems="center" alignContent="center">
<Grid item>
<img alt="Amazon Connect Logo" className={classes.logo}
src={process.env.PUBLIC_URL + '/images/logo80_2x.png'}/>
</Grid>
<Grid item>
<Typography variant="h5">
Amazon Connect Voicemail Management Portal
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="row">
<Grid item className={classes.userInfo}>
<Grid container direction="column" alignContent="center"
alignItems="flex-end">
<Grid item><p className={classes.role}>{this.props.userRole}</p></Grid>
<Grid item><p className={classes.email}>{this.props.userEmail}</p>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container direction="row" alignItems={"center"}>
<Grid item>
<GlobalSettingsButton/>
</Grid>
<Grid item>
<IconButton color="inherit" onClick={this.handleOnLogout}>
<ExitToApp/>
</IconButton>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</div>
</MuiThemeProvider>
);
}
Example #3
| Source File: Sidebar.js From quizdom with MIT License | 5 votes |
|
function Sidebar() {
const [signOut, setSignOut] = useState(false)
const SidedbarData = [
{
title: 'Dashboard',
path: '/dashboard',
icon: <Dashboard />,
CName: 'nav-text',
},
{
title: 'Join Quiz',
path: '/join-quiz',
icon: <MeetingRoom />,
CName: 'nav-text',
},
{
title: 'Create Quiz',
path: '/create-quiz',
icon: <CreateNewFolder />,
CName: 'nav-text',
},
]
const [sidebar, setSidebar] = useState(false)
const showSidebar = () => setSidebar(!sidebar)
if (signOut) return <Redirect to='/' />
return (
<div>
<Icon className='menu-bars' onClick={showSidebar}>
<MenuRounded />
</Icon>
{/* <FaIcons.FaBars onClick={} /> */}
<nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
<ul className='nav-menu-items' onClick={showSidebar}>
<li className='navbar-toggle'>
<Icon>
<MenuOpenRounded fontSize='large' />
</Icon>
</li>
{SidedbarData.map((item, index) => {
return (
<li key={index} className='nav-text'>
<Link to={item.path}>
<Icon>{item.icon}</Icon>
<span className='nav-item-title'>{item.title}</span>
</Link>
</li>
)
})}
{/* Sign Out Button */}
<li className='nav-text sign-out'>
<button
onClick={() => {
console.log('clicked')
// setUser({})
firebase.auth().signOut()
setSignOut(true)
}}
>
<Icon>
<ExitToApp />
</Icon>
<span className='nav-item-title'>{'SignOut'}</span>
</button>
</li>
</ul>
</nav>
</div>
)
}
Example #4
| Source File: OftadehAvatarMenu.jsx From oftadeh-react-admin with MIT License | 4 votes |
|
OftadehAvatarMenu = props => {
const classes = useStyles(props);
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleToggle = () => {
setOpen(prevOpen => !prevOpen);
};
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
return (
<>
<ListItem
button
ref={anchorRef}
aria-controls={open ? "menu-list-grow" : undefined}
aria-haspopup="true"
onClick={handleToggle}
alignItems="flex-start"
className={classes.paddingRightZero}
>
<ListItemAvatar>
<OftadehAvatarBadge
overlap="circle"
anchorOrigin={{
vertical: "bottom",
horizontal: "right"
}}
variant="dot"
>
<Avatar
alt="Mohammad Oftadeh"
src="https://lh5.googleusercontent.com/-WqhFe4eMggE/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdFUa5CK9Wi6g5qd8ZUt6apKFYSwA/photo.jpg?sz=328"
/>
</OftadehAvatarBadge>
</ListItemAvatar>
<Hidden implementation="css" smDown>
<ListItemText
primary={
<React.Fragment>
<Typography component="span" variant="subtitle2">
Mohammad Oftadeh
</Typography>
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography
component="span"
variant="caption"
className={classes.inline}
color="textPrimary"
>
Admin
</Typography>
</React.Fragment>
}
/>
</Hidden>
</ListItem>
<Popper
open={open}
anchorEl={anchorRef.current}
role={undefined}
transition
disablePortal
>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:
placement === "bottom" ? "center top" : "center bottom"
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow">
<MenuItem onClick={handleClose}>
<ListItemIcon className={classes.menuIcon}>
<AccountCircle fontSize="small" />
</ListItemIcon>
Profile
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon className={classes.menuIcon}>
<Settings fontSize="small" />
</ListItemIcon>
settings
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon className={classes.menuIcon}>
<ExitToApp fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</>
);
}
