@material-ui/icons#Settings JavaScript Examples
The following examples show how to use
@material-ui/icons#Settings.
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: GlobalSettingsButton.js From voicemail-for-amazon-connect with Apache License 2.0 | 5 votes |
|
render() {
return (
<IconButton color="inherit" onClick={this.handleButtonClick}>
<Settings/>
</IconButton>
)
}
Example #2
| Source File: HistorySection.js From Quizzie with MIT License | 4 votes |
|
function HistorySection(props) {
const [userType, setUserType] = useState(props.type);
const [profile, setProfile] = useState(props.profile);
const [quizzes, setQuizzes] = useState([]);
const [loading, setLoading] = useState(true);
const getCols = () => {
if (isWidthUp('md', props.width)) {
return 3;
}
return 2;
}
const getQuizzes = async () => {
let token = localStorage.getItem("authToken");
let url = null;
if(userType === "admin") url = "https://quizzie-api.herokuapp.com/admin/created";
else url = "https://quizzie-api.herokuapp.com/user/quizzesGiven";
try {
await axios.get(url, {
headers: {
"auth-token": token
}
}).then(res => {
let quizL = res.data.result.sort(function(a,b) {return a.scheduledFor - b.scheduledFor});
setQuizzes(quizL);
setLoading(false);
})
} catch (error) {
console.log(error);
setLoading(false);
}
}
useEffect(() => {
getQuizzes();
}, [])
if (loading) {
return (
<QuizLoading />
)
}
else if (userType === "admin") {
return (
<div className="history-section">
{quizzes.length === 0 ?
<p style={{ textAlign: 'center' }}>You have not created any quizzes yet!</p>
:
<GridList cols={getCols()} className="grid-list">
{quizzes.map((quiz) => (
<GridListTile key={quiz._id} className="quiz-tile">
<img src="../CC LOGO-01.svg" />
<GridListTileBar
title={quiz.quizName}
subtitle={`By: You`}
actionIcon={
<Tooltip title="Settings">
<IconButton aria-label={`edit ${quiz.quizName}`}
component={Link} to={`/editQuiz/${quiz._id}`}>
<Settings className="enroll-icon" />
</IconButton>
</Tooltip>
}
/>
</GridListTile>
))}
</GridList>
}
</div>
)
}
else {
return (
<div className="history-section">
{profile.quizzesGiven.length === 0 ?
<p style={{ textAlign: 'center' }}>You have not given any quizzes yet!</p>
: <List aria-label="quiz display" className="owner-quiz-list">
{quizzes.map(quiz => (
quiz.quizId !== null?
(<ListItem button className="owner-quiz-item" component={Link} key={quiz._id} to={`/results/${quiz.quizId._id}`}>
<ListItemText primary={quiz.quizId.quizName} secondary={`Scored: ${quiz.marks}`} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="details" component={Link} to={`/results/${quiz.quizId._id}`}>
<ArrowForwardIos />
</IconButton>
</ListItemSecondaryAction>
</ListItem>): null
))}
</List>}
</div>
)
}
}
Example #3
| Source File: Sidebar.jsx From Edlib with GNU General Public License v3.0 | 4 votes |
|
Sidebar = () => {
const classes = useStyles();
const history = useHistory();
const location = useLocation();
const [currentlyExpandedName, setCurrentlyExpandedName] =
React.useState(null);
React.useEffect(() => {
setCurrentlyExpandedName(null);
}, [location]);
const links = [
{ name: 'Dashboard', to: '/dashboard', icon: <Dashboard /> },
{ name: 'Content Author', to: '/content-author', icon: <Settings /> },
{
name: 'Settings',
to: '/settings',
icon: <Settings />,
subLinks: [
{
name: 'External applications',
to: '/external-applications',
},
],
},
{
name: 'Monitoring',
to: '/monitoring',
icon: <LocalOffer />,
subLinks: [{ name: 'Status of services', to: '/system-status' }],
},
{
name: 'Jobs',
to: '/jobs',
icon: <LocalOffer />,
subLinks: [
{ name: 'Resources', to: '/resources' },
{ name: 'Auth migration', to: '/auth-migration' },
],
},
{
name: 'Analytics',
to: '/analytics',
icon: <Assessment />,
subLinks: [{ name: 'Dashboard', to: '/dashboard' }],
},
];
return (
<List dense>
{links.map(({ name, icon, to, subLinks }) => {
const isInPath = !!matchPath(location.pathname, {
path: to,
strict: false,
});
const isExpanded = isInPath || currentlyExpandedName === name;
if (subLinks) {
return (
<React.Fragment key={name}>
<ListItem
button
selected={isInPath}
onClick={() => {
setCurrentlyExpandedName(
currentlyExpandedName === name
? null
: name
);
}}
>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText
primary={name}
primaryTypographyProps={{
className: classes.parentItem,
}}
inset={!icon}
/>
{isExpanded ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse
in={isExpanded}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding dense>
{subLinks.map((subLink) => {
const subTo = to + subLink.to;
const isInSubPath = !!matchPath(
location.pathname,
{
path: subTo,
strict: false,
}
);
return (
<ListItem
key={subLink.name}
button
onClick={() =>
history.push(subTo)
}
selected={isInSubPath}
>
<ListItemText
primary={subLink.name}
inset
/>
</ListItem>
);
})}
</List>
</Collapse>
</React.Fragment>
);
}
return (
<ListItem
key={name}
button
selected={isInPath}
onClick={() => history.push(to)}
>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText
primary={name}
primaryTypographyProps={{
className: classes.parentItem,
}}
inset={!icon}
/>
</ListItem>
);
})}
</List>
);
}
Example #4
| Source File: header-profile.js From horondi_client_fe with MIT License | 4 votes |
|
HeaderProfile = ({ fromSideBar, setIsMenuOpen }) => {
const { userData } = useSelector(({ User }) => ({
userData: User.userData
}));
const [, setLightMode] = useContext(ThemeContext);
const [anchorEl, setAnchorEl] = useState(null);
const { t } = useTranslation();
const dispatch = useDispatch();
const styles = useStyles({ fromSideBar });
const history = useHistory();
const configsUser = {
currency: getFromLocalStorage('currency'),
language: i18n.language,
theme: getFromLocalStorage('theme')
};
const { firstName, lastName, email } = userData || {};
const [saveConfigs] = useMutation(saveUserConfigs, {
variables: {
user: {
firstName,
lastName,
email,
configs: configsUser
},
id: userData?._id
}
});
const handleKeyDown = (e) => {
e.persist();
return !(e.type === 'keydown' && e.key !== 'Enter');
};
const handleClick = (e) => {
handleKeyDown(e) && setAnchorEl(e.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
useEffect(() => {
if (userData && userData.configs) {
const { theme, language, currency } = userData.configs;
setLightMode(theme === 'light');
setToLocalStorage('theme', theme);
i18n.changeLanguage(language);
setToLocalStorage(LANGUAGE, language);
setToLocalStorage('currency', currency);
dispatch(changeCurrency(currency));
}
}, [userData]);
const handleLogIn = () => {
setIsMenuOpen(false);
const pathName = history.location.pathname;
const returnPath =
(pathName === pathToRegister || pathName === pathToLogin ? pathToMain : pathName) +
history.location.search;
sessionStorage.setItem(RETURN_PAGE, returnPath);
handleRedirect(pathToLogin);
};
const handleLogout = async () => {
setAnchorEl(null);
await saveConfigs();
dispatch(logoutUser());
};
const handleRedirect = (link) => {
dispatch(push(link));
setAnchorEl(null);
};
const PROFILE_DATA = [
{
value: t('headerProfile.profile'),
icon: <Settings />,
clickHandler: () => {
setIsMenuOpen(false);
return handleRedirect(pathToProfile);
}
},
{
value: t('headerProfile.orderHistory'),
icon: <History />,
clickHandler: () => {
setIsMenuOpen(false);
return handleRedirect(pathToOrderHistory);
}
},
{
value: t('headerProfile.myCertificates'),
icon: <GiftCertificatesIcon viewBox='0 -3 24 24' />,
clickHandler: () => {
setIsMenuOpen(false);
return handleRedirect(pathToMyCertificates);
}
},
{
value: t('common.logOut'),
icon: <ExitToAppIcon />,
clickHandler: () => {
setIsMenuOpen(false);
return handleLogout();
}
}
];
const mappedProfileList = PROFILE_DATA.map(({ value, icon, clickHandler }) => (
<MenuItem key={value} onClick={clickHandler} disableGutters data-testid='menuItem'>
{icon}
{value}
</MenuItem>
));
return (
<div className={styles.profile} data-cy='profile'>
{userData ? (
<Person onClick={handleClick} onKeyDown={handleClick} tabIndex={0} data-testid='iconIn' />
) : (
<PersonOutlineOutlined
onClick={handleLogIn}
onKeyDown={handleLogIn}
tabIndex={0}
data-cy='iconOut'
/>
)}
<Menu
data-testid='menu'
className={styles.list}
anchorEl={anchorEl}
keepMounted
elevation={0}
getContentAnchorEl={null}
anchorOrigin={{
horizontal: 'right',
vertical: 'bottom'
}}
transformOrigin={{
horizontal: 'left',
vertical: 'top'
}}
open={Boolean(anchorEl)}
onClose={handleClose}
>
{mappedProfileList}
</Menu>
</div>
);
}
Example #5
| 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>
</>
);
}
