@mui/material#Switch JavaScript Examples
The following examples show how to use
@mui/material#Switch.
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: AccountInformationArea.js From react-saas-template with MIT License | 6 votes |
|
function AccountInformationArea(props) {
const { classes, toggleAccountActivation, isAccountActivated } = props;
return (
<Paper className={classes.paper}>
<Toolbar className={classes.toolbar}>
<Box display="flex" alignItems="center">
<Box mr={2}>
<ListItemText
primary="Status"
secondary={isAccountActivated ? "Activated" : "Not activated"}
className="mr-2"
/>
</Box>
<ListItemIcon>
<LoopIcon
className={classNames(
isAccountActivated ? classes.spin : null,
classes.scaleMinus
)}
/>
</ListItemIcon>
</Box>
<ListItemSecondaryAction className={classes.listItemSecondaryAction}>
<Switch
color="secondary"
checked={isAccountActivated}
onClick={toggleAccountActivation}
inputProps={{
"aria-label": isAccountActivated
? "Deactivate Account"
: "Activate Account"
}}
/>
</ListItemSecondaryAction>
</Toolbar>
</Paper>
);
}
Example #2
| Source File: index.js From neutron with Mozilla Public License 2.0 | 6 votes |
|
SectionAutofill = () => {
const passwordsAskToSave = useSelector((state) => state.preferences.passwordsAskToSave);
return (
<List disablePadding dense>
<ListItem>
<ListItemText
primary="Ask to save logins and passwords for websites"
secondary={getStaticGlobal('passwordManagerExtensionDetected')
? `The built-in autofill feature has been taken over by the '${getStaticGlobal('passwordManagerExtensionDetected')}'.`
: `Passwords are stored encrypted locally on disk with the master key stored securely in ${getKeytarVaultName()}.`}
/>
<ListItemSecondaryAction>
<Switch
edge="end"
color="primary"
checked={getStaticGlobal('passwordManagerExtensionDetected') ? false : passwordsAskToSave}
disabled={getStaticGlobal('passwordManagerExtensionDetected')}
onChange={(e) => {
requestSetPreference('passwordsAskToSave', e.target.checked);
}}
/>
</ListItemSecondaryAction>
</ListItem>
</List>
);
}
Example #3
| Source File: Settings.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const { classes, t, settings } = this.props;
const { snackbar } = this.state;
return (
<TableViewContainer
headline={t("Settings")}
subtitle={t('settings_sub')}
href="https://docs.grommunio.com/admin/administration.html#settings"
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<Paper className={classes.paper} elevation={1}>
<FormControl className={classes.form}>
<TextField
select
className={classes.input}
label={t("Language")}
fullWidth
value={settings.language || 'en-US'}
onChange={this.handleLangChange}
>
{this.langs.map((lang, key) => (
<MenuItem key={key} value={lang.ID}>
{lang.name}
</MenuItem>
))}
</TextField>
<FormControl className={classes.formControl}>
<FormLabel component="legend">{t('Darkmode')}</FormLabel>
<Switch
checked={(window.localStorage.getItem('darkMode') === 'true')}
onChange={this.handleDarkModeChange}
color="primary"
/>
</FormControl>
</FormControl>
</Paper>
</TableViewContainer>
);
}
Example #4
| Source File: Layout1Sidenav.jsx From matx-react with MIT License | 5 votes |
|
Layout1Sidenav = () => {
const theme = useTheme();
const { settings, updateSettings } = useSettings();
const leftSidebar = settings.layout1Settings.leftSidebar;
const { mode, bgImgURL } = leftSidebar;
const getSidenavWidth = () => {
switch (mode) {
case 'compact':
return sidenavCompactWidth;
default:
return sideNavWidth;
}
};
const primaryRGB = convertHexToRGB(theme.palette.primary.main);
const updateSidebarMode = (sidebarSettings) => {
updateSettings({
layout1Settings: {
leftSidebar: {
...sidebarSettings,
},
},
});
};
const handleSidenavToggle = () => {
updateSidebarMode({ mode: mode === 'compact' ? 'full' : 'compact' });
};
return (
<SidebarNavRoot bgImgURL={bgImgURL} primaryBg={primaryRGB} width={getSidenavWidth()}>
<NavListBox>
<Brand>
<Hidden smDown>
<Switch
onChange={handleSidenavToggle}
checked={leftSidebar.mode !== 'full'}
color="secondary"
size="small"
/>
</Hidden>
</Brand>
<Sidenav />
</NavListBox>
</SidebarNavRoot>
);
}
Example #5
| Source File: LdapConfig.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t } = this.props;
const writable = this.context.includes(SYSTEM_ADMIN_WRITE);
const { available, force, deleting, snackbar, server, bindUser, bindPass, starttls, baseDn, objectID, disabled,
username, filter, templates, attributes, defaultQuota, displayName, searchAttributes,
authBackendSelection, aliases, taskMessage, taskID } = this.state;
return (
<div className={classes.root}>
<TopBar />
<div className={classes.toolbar}></div>
<form className={classes.base} onSubmit={this.handleSave}>
<Typography variant="h2" className={classes.pageTitle}>
{t("Directory")}
<Tooltip
className={classes.tooltip}
title={t("ldap_settingsHelp")}
placement="top"
>
<IconButton
size="small"
href="https://docs.grommunio.com/admin/administration.html#ldap"
target="_blank"
>
<Help fontSize="small"/>
</IconButton>
</Tooltip>
</Typography>
<Typography variant="caption" className={classes.subtitle}>
{t('ldap_sub')}
</Typography>
<Grid container className={classes.category}>
<FormControlLabel
control={
<Switch
checked={!disabled}
onChange={this.handleActive}
name="disabled"
color="primary"
/>
}
label={<span>
{t('LDAP enabled')}
<Tooltip
className={classes.tooltip}
title={t("Enable LDAP service")}
placement="top"
>
<IconButton size="small">
<Help fontSize="small"/>
</IconButton>
</Tooltip>
</span>}
/>
<div className={classes.flexContainer}>
<Tooltip placement="top" title={t("Synchronize already imported users")}>
<Button
variant="contained"
color="primary"
style={{ marginRight: 16 }}
onClick={this.handleSync(false)}
>
{t("Sync users")}
</Button>
</Tooltip>
<Tooltip
placement="top"
title={t("ldap_import_tooltip")}
>
<Button
variant="contained"
color="primary"
style={{ marginRight: 16 }}
onClick={this.handleSync(true)}
>
{t("Import users")}
</Button>
</Tooltip>
</div>
</Grid>
<Typography
color="inherit"
variant="caption"
style={{
marginLeft: 16,
color: available ? green['500'] : red['500'],
}}
>
{!disabled && (available ? t('LDAP connectivity check passed') : t('LDAP connectivity check failed'))}
</Typography>
<Paper elevation={1} className={classes.paper}>
<Typography variant="h6" className={classes.category}>{t('LDAP Server')}</Typography>
<FormControl className={classes.formControl}>
<div className={classes.flexRow}>
<LdapTextfield
flex
label='LDAP Server'
autoFocus
placeholder="ldap://[::1]:389/"
onChange={this.handleInput('server')}
value={server || ''}
desc={t("ldap_server_desc")}
id="url"
name="url"
autoComplete="url"
InputLabelProps={{
shrink: true,
}}
/>
<LdapTextfield
flex
label="LDAP Bind DN"
onChange={this.handleInput('bindUser')}
value={bindUser || ''}
desc={t("Distinguished Name used for binding")}
id="username"
name="username"
autoComplete="username"
/>
<LdapTextfield
flex
label={t('LDAP Bind Password')}
onChange={this.handleInput('bindPass')}
value={bindPass || ''}
desc={t("ldap_password_desc")}
id="password"
name="password"
type="password"
autoComplete="current-password"
/>
<FormControlLabel
control={
<Checkbox
checked={starttls || false}
onChange={this.handleCheckbox('starttls')}
name="starttls"
inputProps={{
autoComplete: 'starttls',
name: 'starttls',
id: 'starttls',
}}
color="primary"
/>
}
label={<span>
{'STARTTLS'}
<Tooltip
className={classes.tooltip}
title="Whether to issue a StartTLS extended operation"
placement="top"
>
<IconButton size="small">
<Help fontSize="small"/>
</IconButton>
</Tooltip>
</span>}
/>
</div>
<LdapTextfield
label='LDAP Base DN'
onChange={this.handleInput('baseDn')}
value={baseDn || ''}
desc={t("Base DN to use for searches")}
id="baseDn"
name="baseDn"
autoComplete="baseDn"
/>
</FormControl>
</Paper>
<Paper elevation={1} className={classes.paper}>
<Typography variant="h6" className={classes.category}>
{t('User authentication mechanism')}
</Typography>
<FormControl className={classes.formControl}>
<RadioGroup
name="authBackendSelection"
value={authBackendSelection}
onChange={this.handleInput("authBackendSelection")}
row
className={classes.radioGroup}
color="primary"
>
<FormControlLabel
value="externid"
control={<Radio color="primary"/>}
label={t("Automatic")}
/>
<FormControlLabel value="always_mysql" control={<Radio color="primary"/>} label={t("Only MySQL")} />
<FormControlLabel value="always_ldap" control={<Radio color="primary"/>} label={t("Only LDAP")} />
</RadioGroup>
</FormControl>
</Paper>
<Paper className={classes.paper} elevation={1}>
<FormControl className={classes.formControl}>
<Typography variant="h6" className={classes.category}>{t('Attribute Configuration')}</Typography>
<LdapTextfield
label={t('LDAP Template')}
onChange={this.handleTemplate}
value={templates}
select
desc={t("Mapping templates to use")}
id="templates"
name="templates"
autoComplete="templates"
>
<MenuItem value='none'>{t('No template')}</MenuItem>
<MenuItem value="OpenLDAP">OpenLDAP</MenuItem>
<MenuItem value="ActiveDirectory">ActiveDirectory</MenuItem>
</LdapTextfield>
<LdapTextfield
label={t('LDAP Filter')}
onChange={this.handleInput('filter')}
value={filter || ''}
desc={t("LDAP search filter to apply to user lookup")}
id="filter"
name="filter"
autoComplete="filter"
/>
<LdapTextfield
label={t('Unique Identifier Attribute')}
onChange={this.handleInput('objectID')}
value={objectID || ''}
desc={t("ldap_oID_desc")}
id="objectID"
name="objectID"
autoComplete="objectID"
/>
<LdapTextfield
label={t('LDAP Username Attribute')}
onChange={this.handleInput('username')}
value={username || ''}
desc={t("ldap_username_desc")}
id="username"
name="username"
autoComplete="username"
/>
<LdapTextfield
label={t('LDAP Display Name Attribute')}
onChange={this.handleInput('displayName')}
value={displayName || ''}
desc={t("Name of the attribute that contains the name")}
id="displayName"
name="displayName"
autoComplete="displayName"
/>
<LdapTextfield
label={t('LDAP Default Quota')}
onChange={this.handleInput('defaultQuota')}
value={defaultQuota}
desc={t("ldap_defaultQuota_desc")}
id="defaultQuota"
name="defaultQuota"
autoComplete="defaultQuota"
/>
<LdapTextfield
label={t('LDAP Aliases')}
onChange={this.handleInput('aliases')}
value={aliases}
desc={t("LDAP alias mapping")}
id="aliasMapping"
name="aliasMapping"
autoComplete="aliasMapping"
/>
</FormControl>
</Paper>
<Paper elevation={1} className={classes.paper}>
<Typography variant="h6" className={classes.category}>{t('LDAP Search Attributes')}</Typography>
<Typography variant="caption" className={classes.category}>
{t('ldap_attribute_desc')}
</Typography>
<Autocomplete
value={searchAttributes || []}
onChange={this.handleAutocomplete('searchAttributes')}
className={classes.textfield}
options={adminConfig.searchAttributes}
multiple
renderInput={(params) => (
<TextField
{...params}
/>
)}
/>
</Paper>
<Paper elevation={1} className={classes.paper}>
<Typography variant="h6" className={classes.category}>
{t('Custom Mapping')}
<Tooltip
className={classes.tooltip}
title={t('ldap_mapping_desc')}
placement="top"
>
<IconButton size="small">
<Help fontSize="small"/>
</IconButton>
</Tooltip>
</Typography>
{attributes.map((mapping, idx) =>
<Grid className={classes.attribute} container alignItems="center" key={idx}>
<LdapTextfield
label={t('Name')}
flex
onChange={this.handleAttributeInput('key', idx)}
value={mapping.key || ''}
desc={t("LDAP attribute to map")}
/>
<Typography className={classes.spacer}>:</Typography>
<LdapTextfield
label={t('Value')}
flex
onChange={this.handleAttributeInput('value', idx)}
value={mapping.value || ''}
desc={t("Name of the user property to map to")}
/>
<IconButton
onClick={this.removeRow(idx)}
className={classes.removeButton}
size="large">
<Delete color="error" />
</IconButton>
</Grid>
)}
<Grid container justifyContent="center" className={classes.addButton}>
<Button size="small" onClick={this.handleNewRow}>
<Add color="primary" />
</Button>
</Grid>
</Paper>
<div className={classes.bottomRow}>
<Button
variant="contained"
color="secondary"
onClick={this.handleDelete}
className={classes.deleteButton}
>
{t('Delete config')}
</Button>
<Button
variant="contained"
color="primary"
type="submit"
onClick={this.handleSave}
disabled={!writable}
>
{t('Save')}
</Button>
<FormControlLabel
className={classes.attribute}
control={
<Checkbox
checked={force || false}
onChange={this.handleCheckbox('force')}
name="disabled"
color="primary"
/>
}
label={<span>
{t('Force config save')}
<Tooltip
className={classes.tooltip}
title={t("Save LDAP configuration even if it's faulty")}
placement="top"
>
<IconButton size="small">
<Help fontSize="small"/>
</IconButton>
</Tooltip>
</span>}
/>
</div>
</form>
<DeleteConfig
open={deleting}
onSuccess={this.handleDeleteSuccess}
onError={this.handleDeleteError}
onClose={this.handleDeleteClose}
/>
<TaskCreated
message={taskMessage}
taskID={taskID}
onClose={this.handleTaskClose}
/>
<Feedback
snackbar={snackbar}
onClose={() => this.setState({ snackbar: '' })}
/>
</div>
);
}
Example #6
| Source File: Logs.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, logs } = this.props;
const { snackbar, log, filename, autorefresh, clipboardMessage } = this.state;
return (
<TableViewContainer
headline={t("Logs")}
subtitle={t("logs_sub")}
href="https://docs.grommunio.com/admin/administration.html#logs"
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<div className={classes.logViewer}>
<List style={{ width: 200 }}>
<ListItem>
<ListItemText
primary={t("Log files")}
primaryTypographyProps={{ color: "primary", variant: 'h6' }}
/>
</ListItem>
{logs.Logs.map((log, idx) =>
<ListItem
key={idx}
onClick={this.handleLog(log)}
button
className={classes.li}
selected={log === filename}
>
<ListItemText
primary={log}
primaryTypographyProps={{ color: "textPrimary" }}
/>
</ListItem>
)}
</List>
<Paper elevation={1} className={classes.paper}>
{filename && <Grid container justifyContent="flex-end">
<IconButton onClick={this.handleRefresh} style={{ marginRight: 8 }} size="large">
<Refresh />
</IconButton>
<FormControlLabel
control={
<Switch
checked={autorefresh}
onChange={this.handleAutoRefresh}
name="autorefresh"
color="primary"
/>
}
label="Autorefresh"
/>
</Grid>}
{log.length > 0 ? <IconButton onClick={this.handleScroll} size="large">
<ArrowUp />
</IconButton> : filename && <Typography><no logs></Typography>}
{log.map((log, idx) =>
<pre
key={idx}
className={log.level < 4 ? classes.errorLog : log.level < 6 ? classes.noticeLog : classes.log}
onClick={this.handleCopyToClipboard(log.message)}
>
{'[' + log.time + ']: ' + log.message}
</pre>
)}
</Paper>
</div>
<Portal>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={!!clipboardMessage}
onClose={this.handleSnackbarClose}
autoHideDuration={2000}
transitionDuration={{ in: 0, appear: 250, enter: 250, exit: 0 }}
>
<Alert
onClose={this.handleSnackbarClose}
severity={"success"}
elevation={6}
variant="filled"
>
{clipboardMessage}
</Alert>
</Snackbar>
</Portal>
</TableViewContainer>
);
}
Example #7
| Source File: Layout1Customizer.jsx From matx-react with MIT License | 4 votes |
|
Layout1Customizer = ({ settings, handleChange, handleControlChange }) => {
return (
<Fragment>
<Box mb="16px" mx="12px">
<ThemeName>Sidebar theme</ThemeName>
<ToolbarContainer>
{mainSidebarThemes.map((color, i) => (
<Tooltip key={i} title={color} placement="top">
<ToolbarContent
color={color}
onClick={() => handleChange('layout1Settings.leftSidebar.theme', color)}
>
{settings.layout1Settings.leftSidebar.theme === color && <Icon>done</Icon>}
<div className={settings.themes[color].palette.type}></div>
</ToolbarContent>
</Tooltip>
))}
</ToolbarContainer>
</Box>
<Box mb="32px" mx="12px">
<ThemeName>Sidebar theme</ThemeName>
<ToolbarContainer>
{topbarThemes.map((color, i) => (
<Tooltip key={i} title={color} placement="top">
<ToolbarContent
color={color}
onClick={() => handleChange('layout1Settings.topbar.theme', color)}
>
{settings.layout1Settings.topbar.theme === color && <Icon>done</Icon>}
<div className={settings.themes[color].palette.type}></div>
</ToolbarContent>
</Tooltip>
))}
</ToolbarContainer>
</Box>
<Box mb="18px" mx="12px">
<FormControl component="fieldset">
<FormLabel component="legend">Sidebar mode</FormLabel>
<RadioGroup
aria-label="Sidebar"
name="leftSidebar"
value={settings.layout1Settings.leftSidebar.mode}
onChange={handleControlChange('layout1Settings.leftSidebar.mode')}
>
<FormControlLabel value="full" control={<Radio />} label="Full" />
<FormControlLabel value="close" control={<Radio />} label="Close" />
<FormControlLabel value="compact" control={<Radio />} label="Compact" />
</RadioGroup>
</FormControl>
</Box>
<Box mb="32px" mx="12px">
<ThemeName sx={{ mb: 4 }}>Sidebar background image</ThemeName>
<div>
<Grid container spacing={3}>
{sidebarBG.map((bg, i) => (
<Grid item xs={4} key={i}>
<BadgeSelected
color="primary"
badgeContent={<Icon>done</Icon>}
invisible={settings.layout1Settings.leftSidebar.bgImgURL !== bg}
sx={{ width: '100%', height: '100%', cursor: 'pointer' }}
>
<Paper onClick={() => handleChange('layout1Settings.leftSidebar.bgImgURL', bg)}>
<IMG src={bg} alt="" />
</Paper>
</BadgeSelected>
</Grid>
))}
</Grid>
</div>
</Box>
<Box mb="24px" mx="12px">
<FormControl component="fieldset">
<FormLabel component="legend">Topbar</FormLabel>
<FormGroup>
<FormControlLabel
control={
<Switch
checked={get(settings.layout1Settings.topbar, 'show')}
onChange={handleControlChange('layout1Settings.topbar.show')}
/>
}
label="Show"
/>
<FormControlLabel
control={
<Switch
checked={get(settings.layout1Settings.topbar, 'fixed')}
onChange={handleControlChange('layout1Settings.topbar.fixed')}
/>
}
label="Fixed"
/>
</FormGroup>
</FormControl>
</Box>
</Fragment>
);
}
Example #8
| Source File: index.js From mui-image with ISC License | 3 votes |
|
export default function Demo() {
const [currentPhoto, setCurrentPhoto] = React.useState(DEFAULT_IMAGE);
const [showPhoto, setShowPhoto] = React.useState(true);
const [showLoading, setShowLoading] = React.useState(SHOW_LOADING);
const [errorIcon, setErrorIcon] = React.useState(ERROR_ICON);
const [height, setHeight] = React.useState(HEIGHT);
const [width, setWidth] = React.useState(WIDTH);
const [shift, setShift] = React.useState(SHIFT);
const [distance, setDistance] = React.useState(DISTANCE);
const [shiftDuration, setShiftDuration] = React.useState(SHIFT_DURATION);
const [duration, setDuration] = React.useState(DURATION);
const [easing, setEasing] = React.useState(EASING);
const [fit, setFit] = React.useState(FIT);
const [bgColor, setBgColor] = React.useState(BG_COLOR);
function getNewPhoto() {
if (mobileOpen) setMobileOpen(false);
const newPhoto = Math.floor(Math.random() * 1051);
setShowPhoto(false);
setCurrentPhoto(newPhoto);
setTimeout(() => {
setShowPhoto(true);
}, 100);
}
function refreshPhoto() {
if (mobileOpen) setMobileOpen(false);
setShowPhoto(false);
setTimeout(() => {
setShowPhoto(true);
}, 100);
}
function resetDefaults() {
setShowLoading(SHOW_LOADING);
setErrorIcon(ERROR_ICON);
setHeight(HEIGHT);
setWidth(WIDTH);
setShift(SHIFT);
setDistance(DISTANCE);
setShiftDuration(SHIFT_DURATION);
setDuration(DURATION);
setEasing(EASING);
setFit(FIT);
setBgColor(BG_COLOR);
}
const [mobileOpen, setMobileOpen] = React.useState(false);
const mobile = useMediaQuery('@media (max-width: 900px)');
function handleDrawerToggle() {
setMobileOpen(!mobileOpen);
}
return (
<Box sx={{ display: 'flex', height: '100vh' }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { md: 'none' } }}
>
{mobileOpen ? <CodeOffIcon /> : <CodeIcon />}
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'none', md: 'inline-block' } }}
>
<TypeIt
getBeforeInit={(instance) => {
instance
.pause(3500)
.type('npm install mui-image')
.pause(1500)
.delete()
.type("import Image from 'mui-image'");
return instance;
}}
options={{ speed: 120, cursor: false }}
/>
</Typography>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'inline-block', md: 'none' } }}
>
mui-image
</Typography>
<Box display="flex">
<IconButton
onClick={() =>
window.open('https://yarnpkg.com/package/mui-image')
}
color="inherit"
>
<YarnIcon
viewBox="0 0 256 256"
fontSize="large"
color="inherit"
/>
</IconButton>
<IconButton
onClick={() => window.open('https://npmjs.com/package/mui-image')}
color="inherit"
>
<NpmIcon fontSize="large" color="inherit" />
</IconButton>
<IconButton
onClick={() =>
window.open('https://github.com/benmneb/mui-image')
}
color="inherit"
>
<GitHubIcon fontSize="large" color="inherit" />
</IconButton>
</Box>
</Toolbar>
</AppBar>
<Drawer
variant={mobile ? 'temporary' : 'permanent'}
open={mobile ? mobileOpen : true}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true,
}}
sx={{
width: DRAWER_WIDTH,
maxWidth: '100vw',
flexShrink: 0,
'& .MuiDrawer-paper': {
width: DRAWER_WIDTH,
maxWidth: '100vw',
boxSizing: 'border-box',
},
}}
>
<Toolbar />
<Stack
spacing={2}
component="section"
padding={2}
sx={{ minWidth: '100%' }}
>
<Box component="div" variant="h6">
{'<Image'}
</Box>
<Stack spacing={1} sx={{ pl: 2 }}>
<Line component="div">
src="https://picsum.photos/id/{currentPhoto}/2000"
</Line>
<Tooltip title="Any valid CSS `height` property" placement="right">
<Line component="div">
height="
<TextField
variant="standard"
value={height}
onChange={(e) => setHeight(e.target.value)}
/>
"
</Line>
</Tooltip>
<Tooltip title="Any valid CSS `width` property" placement="right">
<Line component="div">
width="
<TextField
variant="standard"
value={width}
onChange={(e) => setWidth(e.target.value)}
/>
"
</Line>
</Tooltip>
<Tooltip
title="Any valid CSS `object-fit` property"
placement="right"
>
<Line component="div">
fit=
<Select
variant="standard"
value={fit}
onChange={(e) => setFit(e.target.value)}
sx={{ minWidth: 100 }}
>
<MenuItem value="fill">"fill"</MenuItem>
<MenuItem value="contain">"contain"</MenuItem>
<MenuItem value="cover">"cover"</MenuItem>
<MenuItem value="none">"none"</MenuItem>
<MenuItem value="scale-down">"scale-down"</MenuItem>
</Select>
</Line>
</Tooltip>
<Tooltip
title="Number of milliseconds the image takes to transition in"
placement="right"
>
<Line component="div">
duration={'{'}
<TextField
variant="standard"
value={duration}
onChange={(e) => setDuration(e.target.value)}
/>
{'}'}
</Line>
</Tooltip>
<Tooltip
title="Any valid CSS `transition-timing-function` property"
placement="right"
>
<Line component="div">
easing=
<Select
variant="standard"
value={easing}
onChange={(e) => setEasing(e.target.value)}
sx={{ minWidth: 100 }}
>
<MenuItem value="cubic-bezier(0.7, 0, 0.6, 1)">
"cubic-bezier(0.7, 0, 0.6, 1)"
</MenuItem>
<MenuItem value="ease">"ease"</MenuItem>
<MenuItem value="ease-in">"ease-in"</MenuItem>
<MenuItem value="ease-out">"ease-out"</MenuItem>
<MenuItem value="ease-in-out">"ease-in-out"</MenuItem>
<MenuItem value="linear">"linear"</MenuItem>
</Select>
</Line>
</Tooltip>
<Tooltip
title="Once installed you can add a custom loading indicator"
placement="right"
>
<Line component="div">
showLoading=
<FormControlLabel
sx={{ ml: 0 }}
control={
<Switch
checked={showLoading}
onChange={(e) => setShowLoading(e.target.checked)}
/>
}
label={`{ ${showLoading} }`}
labelPlacement="start"
/>
</Line>
</Tooltip>
<Tooltip
title="Once installed you can add a custom error icon"
placement="right"
>
<Line component="div">
errorIcon=
<FormControlLabel
sx={{ ml: 0 }}
control={
<Switch
checked={errorIcon}
onChange={(e) => setErrorIcon(e.target.checked)}
/>
}
label={`{ ${errorIcon} }`}
labelPlacement="start"
/>
</Line>
</Tooltip>
<Tooltip
title="Direction to shift image as it appears"
placement="right"
>
<Line component="div">
shift=
<Select
variant="standard"
value={shift || 'null'}
onChange={(e) => setShift(e.target.value)}
sx={{ minWidth: 100 }}
>
<MenuItem value={'null'}>{'{ null }'}</MenuItem>
<MenuItem value="top">"top"</MenuItem>
<MenuItem value="right">"right"</MenuItem>
<MenuItem value="bottom">"bottom"</MenuItem>
<MenuItem value="left">"left"</MenuItem>
</Select>
</Line>
</Tooltip>
<Tooltip
title="Distance to shift the image as it appears. Any valid CSS `length` property"
placement="right"
>
<Line component="div">
distance="
<TextField
variant="standard"
value={distance}
onChange={(e) => setDistance(e.target.value)}
/>
"
</Line>
</Tooltip>
<Tooltip
title="Number of milliseconds the shift takes"
placement="right"
>
<Line component="div">
shiftDuration={'{'}
<TextField
variant="standard"
value={shiftDuration || duration * 0.3}
onChange={(e) => setShiftDuration(e.target.value)}
/>
{'}'}
</Line>
</Tooltip>
<Tooltip
title="Color the image transitions in from. Any valid CSS `background-color` property"
placement="right"
>
<Line component="div">
bgColor="
<TextField
variant="standard"
value={bgColor}
onChange={(e) => setBgColor(e.target.value)}
/>
"
</Line>
</Tooltip>
</Stack>
<Box component="div" variant="h6">
{'/>'}
</Box>
<Button
disabled={showPhoto === 'refresh'}
variant="contained"
onClick={refreshPhoto}
disableElevation
>
Refresh photo
</Button>
<Button
disabled={showPhoto === 'new'}
variant="outlined"
onClick={getNewPhoto}
>
Random photo
</Button>
<Button onClick={resetDefaults}>Reset defaults</Button>
</Stack>
</Drawer>
<Box component="section" sx={{ flexGrow: 1, backgroundColor: bgColor }}>
<Toolbar />
<ImageOutput
sx={{
maxHeight: { xs: 'calc(100vh - 56px)', sm: 'calc(100vh - 64px)' },
}}
>
{showPhoto && (
<Image
src={`https://picsum.photos/id/${currentPhoto}/2000`}
width={width}
height={height}
duration={duration}
showLoading={showLoading}
errorIcon={errorIcon}
shift={shift}
distance={distance}
shiftDuration={shiftDuration}
easing={easing}
fit={fit}
bgColor={bgColor}
/>
)}
</ImageOutput>
</Box>
</Box>
);
}
