@material-ui/icons#ExpandLess JavaScript Examples
The following examples show how to use
@material-ui/icons#ExpandLess.
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: LanguageSelector.js From covid-trials-dashboard with MIT License | 6 votes |
|
LanguageSelector = ({ languages, onSelect }) => {
const { t } = useTranslation('languages')
const [open, setOpen] = useState(false)
const classes = useStyles()
console.log({ languages })
return (
<>
<ListItem button onClick={() => setOpen(!open)}>
<ListItemIcon>
<LanguageOutlined />
</ListItemIcon>
<ListItemText primary={t('selectorTitle')} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout={300} unmountOnExit>
<List component='div' disablePadding>
{languages.map(lan => (
<ListItem
key={lan}
button
className={classes.nested}
onClick={() => onSelect(lan)}
>
<ListItemText primary={t(lan)} />
</ListItem>
))}
</List>
</Collapse>
</>
)
}
Example #2
| Source File: Filter.jsx From covid-trials-dashboard with MIT License | 6 votes |
|
Filter = ({ name, options, selected, onSelect }) => {
const [open, setOpen] = useState(false)
const classes = useStyles()
const handleClick = useCallback(() => setOpen(!open), [open])
return (
<>
<ListItem button onClick={handleClick}>
<ListItemText primary={name} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout={300} unmountOnExit>
<List component='div' disablePadding>
{options.map(opt => (
<ListItem
key={opt}
button
className={classes.nested}
onClick={() => onSelect(opt)}
>
<ListItemIcon>
<Checkbox
edge='start'
checked={selected.includes(opt)}
tabIndex={-1}
/>
</ListItemIcon>
<ListItemText primary={opt} />
</ListItem>
))}
</List>
</Collapse>
</>
)
}
Example #3
| Source File: ListExpansion.js From mui-storyblok with MIT License | 6 votes |
|
MuiListExpansion = ({
rootClass,
handleClick,
icon,
open,
primaryText,
}) => {
const styles = StoryBlok.arrayToMuiStyles(rootClass);
return (
<>
<ListItem button onClick={handleClick} className={styles.root}>
{icon.length ? <ListItemIcon {...icon[0]} /> : null}
<ListItemText primary={primaryText} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
</>
);
}
Example #4
| Source File: CheckboxFacet.js From azure-search-react-template with MIT License | 5 votes |
|
export default function CheckboxFacet(props) {
let [isExpanded, setIsExpanded] = useState(false);
const checkboxes = props.values.map(facetValue => {
let isSelected = props.selectedFacets.some(facet => facet.value === facetValue.value);
return (
<FacetValueListItem dense disableGutters id={facetValue.value}>
<Checkbox
edge="start"
disableRipple
checked={isSelected}
onClick= {
isSelected ?
() => props.removeFilter({field: props.name, value: facetValue.value}) :
() => props.addFilter(props.name, facetValue.value)
}
/>
<ListItemText primary={facetValue.value + " (" + facetValue.count + ")"}/>
</FacetValueListItem>
);
});
return (
<div>
<FacetListItem disableRipple={true} button onClick={() => setIsExpanded(!isExpanded)}>
<ListItemText
primary={props.mapFacetName(props.name)}
/>
{isExpanded ? <ExpandLess /> : <ExpandMore />}
</FacetListItem>
<Collapse in={isExpanded} component="div">
<FacetValuesList>
{checkboxes}
</FacetValuesList>
</Collapse>
</div>
);
}
Example #5
| Source File: ConnectionsList.js From spl-token-wallet with Apache License 2.0 | 5 votes |
|
function ConnectionsListItem({ origin, connectedWallet }) {
const classes = useStyles();
const [open, setOpen] = useState(false);
// TODO better way to get high res icon?
const appleIconUrl = origin + '/apple-touch-icon.png';
const faviconUrl = origin + '/favicon.ico';
const [iconUrl, setIconUrl] = useState(appleIconUrl);
const { accounts } = useWalletSelector();
// TODO better way to do this
const account = accounts.find(
(account) => account.address.toBase58() === connectedWallet.publicKey,
);
const setAutoApprove = (autoApprove) => {
chrome.storage.local.get('connectedWallets', (result) => {
result.connectedWallets[origin].autoApprove = autoApprove;
chrome.storage.local.set({ connectedWallets: result.connectedWallets });
});
};
const disconnectWallet = () => {
chrome.storage.local.get('connectedWallets', (result) => {
delete result.connectedWallets[origin];
chrome.storage.local.set({ connectedWallets: result.connectedWallets });
});
};
return (
<>
<ListItem button onClick={() => setOpen((open) => !open)}>
<ListItemIcon>
<div className={classes.listItemIcon}>
<img
src={iconUrl}
onError={() => setIconUrl(faviconUrl)}
className={classes.listItemImage}
alt=""
/>
</div>
</ListItemIcon>
<div style={{ display: 'flex', flex: 1 }}>
<ListItemText primary={origin} secondary={account.name} />
</div>
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<div class={classes.itemDetails}>
<div class={classes.buttonContainer}>
<Button
variant={connectedWallet.autoApprove ? 'contained' : 'outlined'}
color="primary"
size="small"
startIcon={<DoneAll />}
onClick={() => setAutoApprove(!connectedWallet.autoApprove)}
>
{connectedWallet.autoApprove ? 'Auto-Approved' : 'Auto-Approve'}
</Button>
<Button
variant="outlined"
color="secondary"
size="small"
startIcon={<DeleteIcon />}
onClick={disconnectWallet}
>
Disconnect
</Button>
</div>
</div>
</Collapse>
</>
);
}
Example #6
| 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 #7
| Source File: SideAndTopNavBar.js From medha-STPC with GNU Affero General Public License v3.0 | 4 votes |
|
function SideAndTopNavBar(props) {
const { container, className, ...rest } = props;
const classes = useDrawerStyles();
const topBarClasses = useTopBarStyles();
const listClasses = useListStyles();
const theme = useTheme();
const [mobileOpen, setMobileOpen] = useState(false);
const [subListState, setSubListState] = useState({});
const { index, setIndex } = useContext(SetIndexContext);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
const handleClick = name => {
setSubListState({ ...subListState, [name]: !get(subListState, name) });
};
const authMenuItems = [
{
name: "Auth",
Icon: <AccountCircleOutlinedIcon />,
items: [
{
name: "Change Password",
link: routeConstants.CHANGE_PASSWORD,
Icon: <SwapHorizontalCircleOutlinedIcon />
},
{
name: "Sign Out",
link: routeConstants.LOGOUT_URL,
Icon: <InputIcon />
}
]
}
];
const inputs = get(
MenuItems(),
auth.getUserInfo() ? auth.getUserInfo()["role"]["name"] : "",
[]
);
const title = () => {
const userInfo = auth.getUserInfo();
return userInfo["first_name"]
? `${userInfo["first_name"]} ${userInfo["last_name"]}`
: userInfo.username;
};
const role = () => {
const userInfo = auth.getUserInfo();
return userInfo["role"]["name"];
};
const drawer = (
<div {...rest} className={clsx(classes.root, className)}>
<div className={classes.toolbar} />
{inputs.map((list, id) => {
return (
<div key={list.name} className={listClasses.navigationpanel}>
{list.items != null ? (
<List
{...rest}
className={clsx(
listClasses.root,
className,
listClasses.padding
)}
>
<ListItem
className={listClasses.button}
disableGutters
key={list.name}
onClick={e => handleClick(list.name)}
selected={index === id}
>
<ListItemIcon>{list.Icon}</ListItemIcon>
{list.name}
<div className={topBarClasses.flexGrow} />
<div className={listClasses.expandPadding}>
{get(subListState, list.name) ? (
<ExpandLess />
) : (
<ExpandMore />
)}
</div>
</ListItem>
<Collapse
in={get(subListState, list.name)}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
{list.items.map(subList => {
return (
<ListItem
className={(listClasses.item, listClasses.nested)}
disableGutters
key={subList.name}
>
<Button
activeClassName={listClasses.active}
className={listClasses.button}
component={CustomRouterLink}
to={subList.link}
onClick={() => setIndex(id)}
>
{subList.name}
</Button>
</ListItem>
);
})}
</List>
</Collapse>
</List>
) : (
<List
{...rest}
className={clsx(
listClasses.root,
className,
listClasses.padding
)}
>
<ListItem
className={listClasses.button}
disableGutters
key={list.name}
selected={index === id}
component={CustomRouterLink}
to={list.link}
onClick={() => setIndex(id)}
>
<ListItemIcon>{list.Icon}</ListItemIcon>
{list.name}
</ListItem>
</List>
)}
</div>
);
})}
<Hidden lgUp>
<Divider className={classes.dividerStyle} />
{authMenuItems.map(list => {
return (
<div key={list.name} className={listClasses.navigationpanel}>
{list.items != null ? (
<List
{...rest}
className={clsx(
listClasses.root,
className,
listClasses.padding
)}
>
<ListItem
className={listClasses.button}
disableGutters
key={list.name}
onClick={e => handleClick(list.name)}
>
<ListItemIcon>{list.Icon}</ListItemIcon>
{list.name}
<div className={topBarClasses.flexGrow} />
<div className={listClasses.expandPadding}>
{get(subListState, list.name) ? (
<ExpandLess />
) : (
<ExpandMore />
)}
</div>
</ListItem>
<Collapse
in={get(subListState, list.name)}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
{list.items.map(subList => {
return (
<ListItem
className={(listClasses.item, listClasses.nested)}
disableGutters
key={subList.name}
>
<Button
activeClassName={listClasses.active}
className={listClasses.button}
component={CustomRouterLink}
to={subList.link}
>
{subList.name}
</Button>
</ListItem>
);
})}
</List>
</Collapse>
</List>
) : (
""
)}
</div>
);
})}
</Hidden>
</div>
);
return (
<div className={topBarClasses.root}>
<AppBar position="fixed" className={topBarClasses.root}>
<Toolbar>
<Logo />
{auth.getToken() !== null ? (
<div className={topBarClasses.loginButtonFlex}>
<div className={topBarClasses.flexGrow} />
<Hidden mdDown>
<div className={topBarClasses.Iconroot}>
<AccountCircleOutlinedIcon />
</div>
<InputLabel>
{"Welcome "}
{title()}
</InputLabel>
<IconButton
className={topBarClasses.changePasswordButton}
color="inherit"
component={CustomRouterLink}
to={routeConstants.CHANGE_PASSWORD}
>
<div className={topBarClasses.Iconroot}>
<SwapHorizontalCircleOutlinedIcon />
</div>
Change Password
</IconButton>
<IconButton
className={topBarClasses.signOutButton}
color="inherit"
component={CustomRouterLink}
to={routeConstants.LOGOUT_URL}
>
<div className={topBarClasses.Iconroot}>
<InputIcon />
</div>
Sign out
</IconButton>
<Drawer
classes={{
paper: classes.drawer
}}
anchor="left"
variant="permanent"
open
>
{auth.getUserInfo().role.name === "Student" ? (
<Box className={classes.mainDesktopBox}>
{auth.getUserInfo().studentInfo.profile_photo &&
auth.getUserInfo().studentInfo.profile_photo.url ? (
<Box className={classes.logoStudentBox}>
<Avatar
alt={title()}
src={
strapiApiConstants.STRAPI_DB_URL_WITHOUT_HASH +
auth.getUserInfo().studentInfo.profile_photo.url
}
className={classes.avatarLogo}
/>
</Box>
) : (
<Box className={classes.logoStudentBox}>
<Avatar
alt={title()}
src=""
className={classes.avatarLogo}
/>
</Box>
)}
<Box className={classes.userContentBox}>
<Typography variant="h5" component="h5">
{title()}
</Typography>
</Box>
</Box>
) : null}
{drawer}
</Drawer>
</Hidden>
<Hidden lgUp>
<IconButton color="inherit" onClick={handleDrawerToggle}>
<MenuIcon />
</IconButton>
<Drawer
container={container}
variant="temporary"
anchor={theme.direction === "rtl" ? "right" : "left"}
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper
}}
ModalProps={{
keepMounted: true // Better open performance on mobile.
}}
>
{/* <Hidden lgUp> */}
<Box className={classes.mainBox}>
{auth.getUserInfo().role.name === "Student" &&
auth.getUserInfo().studentInfo.profile_photo &&
auth.getUserInfo().studentInfo.profile_photo.url ? (
<React.Fragment>
<Box className={classes.smallLogoBox}>
<SmallLogo />
</Box>
<Box className={classes.logoStudentBox}>
<Avatar
alt={title()}
src={
strapiApiConstants.STRAPI_DB_URL_WITHOUT_HASH +
auth.getUserInfo().studentInfo.profile_photo.url
}
className={classes.avatarLogo}
/>
</Box>
</React.Fragment>
) : auth.getUserInfo().role.name === "Student" ? (
<React.Fragment>
<Box className={classes.smallLogoBox}>
<SmallLogo />
</Box>
<Box className={classes.logoStudentBox}>
<Avatar
alt={title()}
src=""
className={classes.avatarLogo}
/>
</Box>
</React.Fragment>
) : (
<Box className={classes.logoBox}>
<LargeLogo />
</Box>
)}
<Box className={classes.userContentBox}>
<Typography variant="h5" component="h5">
{title()}
</Typography>
<Typography
variant="body2"
className={classes.body2Style}
>
{role()}
</Typography>
</Box>
</Box>
<Divider />
{/* </Hidden> */}
{drawer}
</Drawer>
</Hidden>
</div>
) : (
""
)}
</Toolbar>
</AppBar>
</div>
);
}
