@mui/material#ListItemButton JavaScript Examples
The following examples show how to use
@mui/material#ListItemButton.
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: SideBarItem.component.jsx From Stackoverflow-Clone-Frontend with MIT License | 6 votes |
|
HomeItem = ({ link, text }) => (
<NavLink
exact
activeClassName='active'
className='home-link nav-link'
to={link}
>
<ListItem disablePadding>
<ListItemButton style={{ paddingLeft: '8px' }}>
<ListItemText className='menu-list-text' primary={text} />
</ListItemButton>
</ListItem>
</NavLink>
)
Example #2
| Source File: SideBarItem.component.jsx From Stackoverflow-Clone-Frontend with MIT License | 6 votes |
|
DefaultItem = ({ link, icon, text }) => (
<NavLink
activeClassName='active'
className='icon-link nav-link'
to={link}
>
<ListItem disablePadding>
<ListItemButton className='menu-list-btn'>
<ListItemIcon className='menu-list-icon'>
{icon}
</ListItemIcon>
<ListItemText className='menu-list-text' primary={text}/>
</ListItemButton>
</ListItem>
</NavLink>
)
Example #3
| Source File: NavSection.js From Django-REST-Framework-React-BoilerPlate with MIT License | 5 votes |
|
ListItemStyle = styled((props) => <ListItemButton disableGutters {...props} />)(({ theme }) => ({
...theme.typography.body2,
height: 48,
position: 'relative',
textTransform: 'capitalize',
color: theme.palette.text.secondary,
borderRadius: theme.shape.borderRadius,
}))
Example #4
| Source File: FolderPermissions.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, open, onCancel, owners, domain, folderID } = this.props;
const { permissions, selected, adding, deleting } = this.state;
return (
<Dialog
onClose={onCancel}
open={open}
maxWidth="sm"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}
>
<DialogTitle>{t('Permissions')}</DialogTitle>
<DialogContent style={{ minWidth: 400 }}>
{owners.length > 0 ? <List className={classes.list}>
{owners.map((user, idx) => <Fragment key={idx}>
<ListItem disablePadding>
<ListItemButton
selected={user.memberID === selected?.memberID}
component="a"
onClick={this.handleUserSelect(user)}
>
<ListItemText primary={user.username}/>
</ListItemButton>
</ListItem>
<Divider />
</Fragment>)}
</List> : <div className={classes.noOwnersContainer}>
<em>{t('No owners')}</em>
</div>}
<div className={classes.addUserRow}>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
style={{ marginRight: 8 }}
>
{t('Add')}
</Button>
<Button
onClick={this.handleDelete}
color="secondary"
>
{t('Remove')}
</Button>
</div>
<FormControl fullWidth style={{ marginBottom: 4 }}>
<InputLabel>{t('Profile')}</InputLabel>
<Select
labelId="demo-simple-select-label"
value={permissionProfiles.findIndex(profile => profile.value === permissions) === -1 ? "" : permissions}
label={t('Profile')}
onChange={this.handleProfileSelect}
>
{permissionProfiles.map((profile, idx) =>
<MenuItem key={idx} value={profile.value}>
{profile.name}
</MenuItem>
)}
</Select>
</FormControl>
<Grid container>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Read</FormLabel>
<RadioGroup defaultValue={0} value={permissions & 1} onChange={this.handlePermissions}>
<FormControlLabel
value={0x0}
control={<Radio size="small" className={classes.radio}/>}
label="None"
/>
<FormControlLabel
value={0x1}
control={<Radio size="small" className={classes.radio}/>}
label="Full Details"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Write</FormLabel>
<FormControlLabel
control={
<Checkbox
value={0x2}
checked={Boolean(permissions & 0x2)}
onChange={this.handlePermissions}
className={classes.radio}
color="primary"
/>
}
label={t('Create items')}
/>
<FormControlLabel
control={
<Checkbox
value={0x80}
checked={Boolean(permissions & 0x80)}
className={classes.radio}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Create subfolders')}
/>
<FormControlLabel
control={
<Checkbox
checked={Boolean(permissions & 0x8)}
value={0x8}
className={classes.radio}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Edit own')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x20)}
value={0x20}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Edit all')}
/>
</FormControl>
</Grid>
</Grid>
<Grid container style={{ marginTop: 16 }}>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Delete items</FormLabel>
<RadioGroup
value={(permissions & 0x50) || true /* This is a bit janky */}
defaultValue={true}
onChange={this.handleRadioPermissions}
>
<FormControlLabel
value={(permissions & 0x50) === 0} // Has explicit handling
control={<Radio size="small" className={classes.radio}/>}
label="None" />
<FormControlLabel
value={0x10}
control={<Radio size="small" className={classes.radio}/>}
label="Own"
/>
<FormControlLabel
value={0x50}
control={<Radio size="small" className={classes.radio}/>}
label="All"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Other</FormLabel>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x100)}
value={0x100}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Folder owner')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x200)}
onChange={this.handlePermissions}
color="primary"
value={0x200}
/>
}
label={t('Folder contact')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x400)}
onChange={this.handlePermissions}
color="primary"
value={0x400}
/>
}
label={t('Folder visible')}
/>
</FormControl>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button
onClick={onCancel}
color="secondary"
>
{t('Close')}
</Button>
<Button
onClick={this.handleSave}
variant="contained"
color="primary"
disabled={owners.length === 0 || !selected}
>
{t('Save')}
</Button>
</DialogActions>
<AddOwner
open={adding}
onSuccess={this.handleAddingSuccess}
onError={this.handleAddingError}
onCancel={this.handleAddingCancel}
domain={domain}
folderID={folderID}
/>
{selected && <RemoveOwner
open={deleting}
onSuccess={this.handleDeleteSuccess}
onError={this.handleDeleteError}
onClose={this.handleDeleteClose}
ownerName={selected.username}
domainID={domain.ID}
folderID={folderID}
memberID={selected.memberID}
/>}
</Dialog>
);
}
Example #5
| Source File: License.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, license, Domains } = this.props;
const { snackbar, expandedDomainIdxs, domainUsers, domainsExpanded, counts } = this.state;
return (
<TableViewContainer
headline={t("License")}
subtitle={t('license_sub')}
href="https://docs.grommunio.com/admin/administration.html#license"
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<Paper className={classes.paper} elevation={1}>
<Grid container alignItems="center">
<Grid item className={classes.gridItem}>
<Button
variant="contained"
color="primary"
onClick={this.handleUpload}
size="small"
>
{t('Upload')}
</Button>
</Grid>
<Typography variant="body2">{t("Don't have a license?")}</Typography>
<Button
className={classes.buyNow}
variant="contained"
color="primary"
href="https://grommunio.com/product/"
target="_blank"
size="small"
>
{t('Buy now')}
</Button>
</Grid>
<Grid container direction="column" className={classes.licenseContainer}>
<Typography className={classes.data}>
<span className={classes.description}>{t('Product')}:</span>
{license.product}
</Typography>
<Typography className={classes.data}>
<span className={classes.description}>{t('Created')}:</span>
{license.notBefore}
</Typography>
<Typography className={classes.data}>
<span className={classes.description}>{t('Expires')}:</span>
{license.notAfter}
</Typography>
<Typography className={classes.data}>
<span className={classes.description}>{t('Users')}:</span>
{license.currentUsers}
<IconButton onClick={this.toggleDomainExpansion} size="small">
{domainsExpanded ? <ExpandLess /> : <ExpandMore />}
</IconButton>
</Typography>
<Collapse in={domainsExpanded} unmountOnExit>
<List>
{Domains.map(({ ID, domainname }, idx) => <React.Fragment key={idx}>
<ListItemButton onClick={this.handleExpansion(ID, idx)}>
<ListItemText
primary={`${domainname} (${counts[domainname] || 0})`}
/>
{expandedDomainIdxs.includes(idx) ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={expandedDomainIdxs.includes(idx)} unmountOnExit>
<List component="div" disablePadding>
{domainUsers[ID] ? domainUsers[ID].map((user, idx) =>
<ListItem key={idx} sx={{ pl: 4 }}>
<ListItemText primary={user.username}/>
</ListItem>
) : <div className={classes.progressContainer}>
<CircularProgress/>
</div>}
<ListItemButton onClick={this.handleNavigation(ID)} sx={{ pl: 4 }}>
<ListItemText primary={t('View all') + "..."}/>
</ListItemButton>
</List>
</Collapse>
</React.Fragment>)}
</List>
</Collapse>
<Typography className={classes.data}>
<span className={classes.description}>{t('Max users')}:</span>
{license.maxUsers}
</Typography>
</Grid>
<input
accept=".crt,.pem"
style={{ display: 'none' }}
id="license-upload-input"
type="file"
ref={r => (this.imageInputRef = r)}
onChange={this.handleUploadConfirm}
/>
</Paper>
</TableViewContainer>
);
}
