@mui/material#Hidden TypeScript Examples
The following examples show how to use
@mui/material#Hidden.
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: AboutPlatform.tsx From frontend with MIT License | 6 votes |
|
export default function AboutPlatform() {
const { t, i18n } = useTranslation()
return (
<Grid
container
spacing={5}
direction="column"
component="section"
alignContent="center"
sx={{ mb: 12, textAlign: 'center' }}>
<Grid item>
<Typography
variant="h5"
component="p"
sx={(theme) => ({
fontSize: theme.typography.pxToRem(17.6),
mb: 5,
})}>
{t('about-project:aboutPlatformDescription')}
</Typography>
</Grid>
<Hidden smUp>
<Image src={`/infographic-${i18n.language}-mobile.svg`} width={320} height={1002} />
</Hidden>
<Hidden smDown>
<Image src={`/infographic-${i18n.language}.svg`} width={1096} height={1114.6} />
</Hidden>
</Grid>
)
}
Example #2
| Source File: HowWeWorkSection.tsx From frontend with MIT License | 6 votes |
|
export default function HowWeWorkSection() {
const { t, i18n } = useTranslation()
return (
<Grid container direction="column" component="section" sx={{ textAlign: 'center', mb: 5 }}>
<Heading
id="how-we-work"
variant="h4"
component="h2"
linkable
sx={(theme) => ({
pt: 10,
pb: 7,
color: theme.palette.primary.dark,
})}>
{t('index:how-we-work.heading')}
</Heading>
<Box sx={{ backgroundColor: '#F4F4F4', py: 6 }}>
<Grid maxWidth="lg" margin="0 auto" item rowSpacing={10}>
<Typography variant="subtitle1">{t('index:how-we-work.text')}</Typography>
</Grid>
</Box>
<Grid item sx={{ mt: 5 }} maxWidth="md">
<Hidden smUp>
<Image src={`/infographic-${i18n.language}-mobile.svg`} width={320} height={1002} />
</Hidden>
<Hidden smDown>
<Image src={`/infographic-${i18n.language}.svg`} width={1096} height={1114.6} />
</Hidden>
</Grid>
</Grid>
)
}
Example #3
| Source File: MobileNav.tsx From frontend with MIT License | 5 votes |
|
export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) {
const router = useRouter()
const { t } = useTranslation()
const closeNavMenu = () => setMobileOpen(false)
// Register route change event handlers
useEffect(() => {
router.events.on('routeChangeStart', closeNavMenu)
return () => {
router.events.off('routeChangeStart', closeNavMenu)
}
}, [])
return (
<Root className={classes.navMenuDrawer}>
<Hidden mdUp implementation="css">
<SwipeableDrawer
anchor="right"
open={mobileOpen}
variant="temporary"
ModalProps={{ keepMounted: true }}
onOpen={() => setMobileOpen(true)}
onClose={closeNavMenu}
classes={{ paper: classes.navMenuPaper }}>
<CloseModalButton edge="end" fontSize="inherit" onClose={closeNavMenu} />
<Box display="flex" justifyContent="center" px={2}>
<Grid container justifyContent="center" direction="column" spacing={2}>
<Grid item>
<Box width="100%" textAlign="center">
<PodkrepiIcon className={classes.icon} />
</Box>
</Grid>
{navItems.map(({ href, label }, key) => (
<Grid item key={key}>
<LinkButton fullWidth variant="outlined" href={href}>
{t(label)}
</LinkButton>
</Grid>
))}
<Grid item>
<Button href={staticUrls.blog} target="_blank" fullWidth variant="outlined">
{t('nav.blog')}
</Button>
</Grid>
<Grid item>
<DonationMenuMobile />
</Grid>
<AuthLinks />
<Box my={4} textAlign="center">
<LocaleButton />
</Box>
</Grid>
</Box>
</SwipeableDrawer>
</Hidden>
</Root>
)
}
Example #4
| Source File: CollectionTableToolbar.tsx From firecms with MIT License | 4 votes |
|
export function CollectionTableToolbar<M extends { [Key: string]: any }>(props: CollectionTableToolbarProps) {
const classes = useStyles();
const theme = useTheme();
const largeLayout = useMediaQuery(theme.breakpoints.up("md"));
const filterView = props.filterIsSet &&
<Box display={"flex"}
alignItems="center">
<Tooltip title="Clear filter">
<IconButton
style={{ height: "fit-content" }}
aria-label="filter clear"
onClick={props.clearFilter}
size="large">
<ClearIcon/>
</IconButton>
</Tooltip>
</Box>;
const sizeSelect = (
<Select
variant={"standard"}
value={props.size}
style={{ width: 56 }}
onChange={(evt: any) => {
props.onSizeChanged(evt.target.value);
}}
MenuProps={{
MenuListProps: {
disablePadding: true,
style: {
borderRadius: 4
}
},
elevation: 1
}}
input={<InputBase classes={{
root: classes.selectRoot,
input: classes.input
}}/>}
renderValue={(value: any) => value.toUpperCase()}
>
{["xs", "s", "m", "l", "xl"].map((value) => (
<MenuItem
classes={{
root: classes.item
}}
key={`size-select-${value}`} value={value}>
{value.toUpperCase()}
</MenuItem>
))}
</Select>
);
return (
<div
className={classes.toolbar}
>
<Box display={"flex"}
alignItems="center">
{props.title && <Hidden lgDown>
<Box mr={2}>
{props.title}
</Box>
</Hidden>}
{sizeSelect}
{filterView}
</Box>
<div className={classes.actions}>
{largeLayout && <Box width={22}>
{props.loading &&
<CircularProgress size={16} thickness={8}/>}
</Box>}
{props.onTextSearch &&
<SearchBar
key={"search-bar"}
onTextSearch={props.onTextSearch}/>
}
{props.actions}
</div>
</div>
);
}
Example #5
| Source File: FireCMSAppBar.tsx From firecms with MIT License | 4 votes |
|
export function FireCMSAppBar({
title,
handleDrawerToggle,
toolbarExtraWidget
}: CMSAppBarProps) {
const classes = useStyles();
const breadcrumbsContext = useBreadcrumbsContext();
const { breadcrumbs } = breadcrumbsContext;
const authController = useAuthController();
const { mode, toggleMode } = useModeState();
const initial = authController.user?.displayName
? authController.user.displayName[0].toUpperCase()
: (authController.user?.email ? authController.user.email[0].toUpperCase() : "A");
return (
<Slide
direction="down" in={true} mountOnEnter unmountOnExit>
<AppBar
className={classes.appbar}
position={"relative"}
elevation={1}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
size="large">
<MenuIcon/>
</IconButton>
<Hidden lgDown>
<Box mr={3}>
<Link
underline={"none"}
key={"breadcrumb-home"}
color="inherit"
component={ReactLink}
to={"/"}>
<Typography variant="h6" noWrap>
{title}
</Typography>
</Link>
</Box>
</Hidden>
<Box mr={2}>
<Breadcrumbs
separator={<NavigateNextIcon
htmlColor={"rgb(0,0,0,0.87)"}
fontSize="small"/>}
aria-label="breadcrumb">
{breadcrumbs.map((entry, index) => (
<Link
underline={"none"}
key={`breadcrumb-${index}`}
color="inherit"
component={ReactLink}
to={entry.url}>
<Chip
classes={{ root: classes.breadcrumb }}
label={entry.title}
/>
</Link>)
)
}
</Breadcrumbs>
</Box>
<Box flexGrow={1}/>
{toolbarExtraWidget &&
<ErrorBoundary>
{
toolbarExtraWidget
}
</ErrorBoundary>}
<Box p={1} mr={1}>
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={() => toggleMode()}
size="large">
{mode === "dark"
? <Brightness3Icon/>
: <Brightness5Icon/>}
</IconButton>
</Box>
<Box p={1} mr={1}>
{authController.user && authController.user.photoURL
? <Avatar
src={authController.user.photoURL}/>
: <Avatar>{initial}</Avatar>
}
</Box>
<Button variant="text"
color="inherit"
onClick={authController.signOut}>
Log Out
</Button>
</Toolbar>
</AppBar>
</Slide>
);
}
Example #6
| Source File: AppNavBar.tsx From frontend with MIT License | 4 votes |
|
export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
const { locale } = useRouter()
const { status } = useSession()
const shrink = useScrollTrigger()
return (
<AppBar
position="fixed"
className={clsx({ shrink })}
sx={(theme) => ({
overflow: 'hidden',
transition: 'height .5s, background-color .5s ease 0s',
height: theme.spacing(14),
lineHeight: theme.spacing(14),
[theme.breakpoints.down('md')]: {
height: theme.spacing(10),
},
'&.shrink': {
height: theme.spacing(10),
lineHeight: theme.spacing(10),
backgroundColor: 'hsla(0,0%,100%,0.85)',
backdropFilter: 'saturate(180%) blur(5px)',
},
backgroundColor: theme.palette.common.white,
})}>
<Toolbar
sx={{
height: '100%',
display: 'flex',
justifyContent: 'space-between',
}}>
<Link href={routes.index} passHref>
<ButtonBase
component="a"
className={clsx({ shrink })}
sx={(theme) => ({
transition: 'height .5s',
height: theme.spacing(7.5),
minWidth: theme.spacing(15),
marginLeft: theme.spacing(5),
[theme.breakpoints.up('lg')]: {
marginLeft: theme.spacing(10),
},
[theme.breakpoints.down('md')]: {
marginLeft: 0,
width: '100%',
height: '50%',
},
'&.shrink': {
height: '50%',
},
'& > svg': {
display: 'block',
height: '100%',
},
})}>
<PodkrepiLogo locale={locale} variant="adaptive" />
</ButtonBase>
</Link>
<Hidden mdDown>
<Grid
container
wrap="nowrap"
direction="row"
justifyContent="flex-end"
sx={(theme) => ({
marginLeft: theme.spacing(2),
marginRight: theme.spacing(5),
[theme.breakpoints.up('lg')]: {
marginRight: theme.spacing(10),
},
})}>
<Grid item>
<MainNavMenu>
{status === 'authenticated' ? <PrivateMenu /> : <PublicMenu />}
<Grid item>
<LocaleButton />
</Grid>
</MainNavMenu>
</Grid>
</Grid>
</Hidden>
<Hidden mdUp>
<IconButton
size="small"
edge="end"
onClick={navMenuToggle}
aria-labelledby="navigation menu">
<Menu fontSize="large" />
</IconButton>
</Hidden>
</Toolbar>
</AppBar>
)
}
Example #7
| Source File: SupportForm.tsx From frontend with MIT License | 4 votes |
|
export default function SupportForm() {
const { t } = useTranslation()
const formRef = useRef<FormikProps<SupportFormData>>(null)
const [activeStep, setActiveStep] = useState<Steps>(Steps.ROLES)
const [failedStep, setFailedStep] = useState<Steps>(Steps.NONE)
const mutation = useMutation<
AxiosResponse<SupportRequestResponse>,
AxiosError<ApiErrors>,
SupportRequestInput
>({
mutationFn: createSupportRequest,
onError: () => AlertStore.show(t('common:alerts.error'), 'error'),
onSuccess: () => AlertStore.show(t('common:alerts.message-sent'), 'success'),
})
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1)
}
const handleSubmit = async (values: SupportFormData, actions: FormikHelpers<SupportFormData>) => {
if (isLastStep(activeStep, steps)) {
const errors = await actions.validateForm()
const hasErrors = !!Object.keys(errors).length
if (hasErrors) {
setFailedStep(Steps.PERSON)
return
}
setActiveStep((prevActiveStep) => prevActiveStep + 1)
setFailedStep(Steps.NONE)
try {
const { person, ...supportData } = values
await mutation.mutateAsync({ person, supportData })
actions.resetForm()
if (window) {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
} catch (error) {
console.error(error)
if (isAxiosError(error)) {
const { response } = error as AxiosError<ApiErrors>
response?.data.message.map(({ property, constraints }) => {
actions.setFieldError(property, t(matchValidator(constraints)))
})
}
}
return
}
actions.setTouched({})
actions.setSubmitting(false)
switch (activeStep) {
case Steps.ROLES:
{
const errors = await actions.validateForm()
if (errors.roles) {
setFailedStep(Steps.ROLES)
return
}
setActiveStep((prevActiveStep) => prevActiveStep + 1)
setFailedStep(Steps.NONE)
}
break
case Steps.QUESTIONS:
{
const errors = await actions.validateForm()
let hasErrors = false
const questions = Object.entries(values.roles)
.filter(([, value]) => value)
.map(([key]) => key)
Object.keys(errors).forEach((error) => {
if (questions.includes(error)) {
hasErrors = true
}
})
if (hasErrors) {
setFailedStep(Steps.QUESTIONS)
return
}
setActiveStep((prevActiveStep) => prevActiveStep + 1)
setFailedStep(Steps.NONE)
}
break
case Steps.PERSON:
{
const errors = await actions.validateForm()
if (errors.person) {
setFailedStep(Steps.PERSON)
return
}
setActiveStep((prevActiveStep) => prevActiveStep + 1)
setFailedStep(Steps.NONE)
}
break
default:
return 'Unknown step'
}
}
const isStepFailed = (step: Steps | number): boolean => {
return step === failedStep
}
const isLastStep = (activeStep: number, steps: StepType[]): boolean => {
return activeStep === steps.length - 2
}
const isThankYouStep = (activeStep: number, steps: StepType[]): boolean => {
return activeStep === steps.length - 1
}
return (
<GenericForm<SupportFormData>
onSubmit={handleSubmit}
initialValues={initialValues}
validationSchema={validationSchema[activeStep]}
innerRef={formRef}>
<Hidden mdDown>
<Stepper
alternativeLabel
activeStep={activeStep}
connector={<StepConnector sx={{ mt: 1.5 }} />}>
{steps.map((step, index) => (
<Step key={index}>
<StepLabel error={isStepFailed(index)} StepIconComponent={StepIcon}>
{t(step.label)}
</StepLabel>
</Step>
))}
</Stepper>
</Hidden>
{isThankYouStep(activeStep, steps) ? (
steps[activeStep].component
) : (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Grid container justifyContent="center">
<Grid item xs={12} sx={{ mt: 1, mb: 5 }}>
{steps[activeStep].component}
</Grid>
<Grid item xs={12} sx={(theme) => ({ '& button': { minWidth: theme.spacing(12) } })}>
<Actions
disableBack={activeStep === 0}
onBack={handleBack}
loading={mutation.isLoading}
nextLabel={
isLastStep(activeStep, steps) ? 'support:cta.submit' : 'support:cta.next'
}
/>
</Grid>
</Grid>
</Box>
)}
</GenericForm>
)
}
