@mui/material#AccordionDetails JavaScript Examples
The following examples show how to use
@mui/material#AccordionDetails.
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: Settings2.js From react-saas-template with MIT License | 6 votes |
|
styles = (theme) => ({
numberInput: {
width: 120,
[theme.breakpoints.down("md")]: {
width: 80,
},
"@media (max-width: 350px)": {
width: 65,
},
},
numberInputInput: {
padding: "9px 14.5px",
"@media (max-width: 380px)": {
padding: "9px 8.5px",
},
"@media (max-width: 350px)": {
padding: "9px 6.5px",
},
},
listItem: {
[theme.breakpoints.up("sm")]: {
paddingLeft: theme.spacing(4),
},
paddingLeft: 100,
},
AccordionDetails: {
paddingTop: theme.spacing(0),
display: "flex",
justifyContent: "flex-end",
},
dBlock: {
display: "block",
},
})
Example #2
| Source File: Settings1.js From react-saas-template with MIT License | 4 votes |
|
function Settings1(props) {
const { classes, pushMessageToSnackbar } = props;
const [isSaveLoading, setIsSaveLoading] = useState(false);
const [isDefaultLoading, setIsDefaultLoading] = useState(false);
const [option1, setOption1] = useState("None");
const [option2, setOption2] = useState("None");
const [option3, setOption3] = useState("None");
const [option4, setOption4] = useState("None");
const [option5, setOption5] = useState("2 Days");
const [option6, setOption6] = useState(7500);
const handleChange = useCallback(
(event) => {
const { name, value } = event.target;
if (name === "option6") {
if (value > 7500 || value < 1000) {
return;
}
}
switch (name) {
case "option1": {
setOption1(value);
break;
}
case "option2": {
setOption2(value);
break;
}
case "option3": {
setOption3(value);
break;
}
case "option4": {
setOption4(value);
break;
}
case "option5": {
setOption5(value);
break;
}
case "option6": {
setOption6(value);
break;
}
default:
throw new Error("No branch selected in switch statement.");
}
},
[setOption1, setOption2, setOption3, setOption4, setOption5, setOption6]
);
const resetState = useCallback(() => {
setIsSaveLoading(false);
setIsDefaultLoading(false);
setOption1("None");
setOption2("None");
setOption3("None");
setOption4("None");
setOption5("2 Days");
setOption6(7500);
}, [
setIsSaveLoading,
setIsDefaultLoading,
setOption1,
setOption2,
setOption3,
setOption4,
setOption5,
setOption6,
]);
const onSetDefault = useCallback(() => {
setIsDefaultLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been reset to default",
});
resetState();
}, 1500);
}, [pushMessageToSnackbar, resetState]);
const onSubmit = useCallback(() => {
setIsSaveLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been saved",
});
setIsSaveLoading(false);
}, 1500);
}, [setIsSaveLoading, pushMessageToSnackbar]);
const inputs = [
{
state: option1,
label: "Option 1",
stateName: "option1",
},
{
state: option2,
label: "Option 2",
stateName: "option2",
},
{
state: option3,
label: "Option 3",
stateName: "option3",
},
{
state: option4,
label: "Option 4",
stateName: "option4",
},
];
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Settings 1</Typography>
</AccordionSummary>
<AccordionDetails className={classes.dBlock}>
<List disablePadding>
<Bordered disableVerticalPadding disableBorderRadius>
{inputs.map((element, index) => (
<ListItem
className="listItemLeftPadding"
disableGutters
divider
key={index}
>
<ListItemText>
<Typography variant="body2">{element.label}</Typography>
</ListItemText>
<FormControl variant="outlined">
<ListItemSecondaryAction
className={classes.ListItemSecondaryAction}
>
<Select
value={element.state}
onChange={handleChange}
input={
<OutlinedInput
name={element.stateName}
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
/>
}
MenuProps={{ disableScrollLock: true }}
>
{inputOptions.map((innerElement) => (
<MenuItem value={innerElement} key={innerElement}>
{innerElement}
</MenuItem>
))}
</Select>
</ListItemSecondaryAction>
</FormControl>
</ListItem>
))}
<ListItem className="listItemLeftPadding" disableGutters divider>
<ListItemText>
<Typography variant="body2">Option 5</Typography>
</ListItemText>
<FormControl variant="outlined">
<ListItemSecondaryAction
className={classes.ListItemSecondaryAction}
>
<Select
value={option5}
onChange={handleChange}
input={
<OutlinedInput
name="option5"
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
/>
}
MenuProps={{ disableScrollLock: true }}
>
{[
"Always",
"6 Hours",
"12 Hours",
"1 Day",
"2 Days",
"3 Days",
"1 Week",
].map((element) => (
<MenuItem value={element} key={element}>
{element}
</MenuItem>
))}
</Select>
</ListItemSecondaryAction>
</FormControl>
</ListItem>
<ListItem className="listItemLeftPadding" disableGutters>
<ListItemText>
<Typography variant="body2">Option 6</Typography>
</ListItemText>
<FormControl variant="outlined">
<ListItemSecondaryAction
className={classes.ListItemSecondaryAction}
>
<OutlinedInput
labelWidth={0}
name="option6"
value={option6}
type="number"
onChange={handleChange}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
inputProps={{ step: 20 }}
/>
</ListItemSecondaryAction>
</FormControl>
</ListItem>
</Bordered>
</List>
</AccordionDetails>
<AccordionDetails className={classes.accordionDetails}>
<Box mr={1}>
<Button
onClick={onSetDefault}
disabled={isSaveLoading || isDefaultLoading}
>
Default {isDefaultLoading && <ButtonCircularProgress />}
</Button>
</Box>
<Button
variant="contained"
color="secondary"
disabled={isSaveLoading || isDefaultLoading}
onClick={onSubmit}
>
Save {isSaveLoading && <ButtonCircularProgress />}
</Button>
</AccordionDetails>
</Accordion>
);
}
Example #3
| Source File: Settings2.js From react-saas-template with MIT License | 4 votes |
|
function Settings2(props) {
const { pushMessageToSnackbar, classes } = props;
const [isDefaultLoading, setIsDefaultLoading] = useState(false);
const [isSaveLoading, setIsSaveLoading] = useState(false);
const [option1, setOption1] = useState(false);
const [option2, setOption2] = useState(false);
const [option3, setOption3] = useState(false);
const [option4, setOption4] = useState(false);
const [option5, setOption5] = useState(false);
const [option6, setOption6] = useState("Both");
const [option7, setOption7] = useState("2 weeks");
const resetState = useCallback(() => {
setIsDefaultLoading(false);
setIsSaveLoading(false);
setOption1(false);
setOption2(false);
setOption3(false);
setOption4(false);
setOption5(false);
setOption6("Both");
setOption7("2 weeks");
}, [
setOption1,
setOption2,
setOption3,
setOption4,
setOption5,
setOption6,
setOption7,
]);
const onSubmit = useCallback(() => {
setIsSaveLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been saved",
});
setIsSaveLoading(false);
}, 1500);
}, [pushMessageToSnackbar, setIsSaveLoading]);
const onSetDefault = useCallback(() => {
setIsDefaultLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been reset to default",
});
resetState();
}, 1500);
}, [pushMessageToSnackbar, resetState, setIsDefaultLoading]);
const handleInputChange = useCallback(
(event) => {
const { name, value } = event.target;
switch (name) {
case "option6": {
setOption6(value);
break;
}
case "option7": {
setOption7(value);
break;
}
default:
throw new Error("No branch selected in switch statement");
}
},
[setOption6, setOption7]
);
const handleCheckboxChange = (name) => (event) => {
switch (name) {
case "option1":
setOption1(event.target.checked);
break;
case "option2":
setOption2(event.target.checked);
break;
case "option3":
setOption3(event.target.checked);
break;
case "option4":
setOption4(event.target.checked);
break;
case "option5":
setOption5(event.target.checked);
break;
default:
throw new Error("No branch selected in switch statement.");
}
};
const inputs = [
{
title: "Option 1",
secondaryAction: (
<Checkbox
value="option1"
color="primary"
checked={option1}
onChange={handleCheckboxChange("option1")}
/>
),
},
{
title: "Option 2",
secondaryAction: (
<Checkbox
value="option2"
color="primary"
checked={option2}
onChange={handleCheckboxChange("option2")}
/>
),
},
{
title: "Option 3",
secondaryAction: (
<Checkbox
value="option3"
color="primary"
checked={option3}
onChange={handleCheckboxChange("option3")}
/>
),
helpText: "You can add some further explanation here.",
},
{
title: "Option 4",
secondaryAction: (
<Checkbox
value="option4"
color="primary"
checked={option4}
onChange={handleCheckboxChange("option4")}
/>
),
},
{
title: "Option 5",
secondaryAction: (
<Checkbox
value="option5"
color="primary"
checked={option5}
onChange={handleCheckboxChange("option5")}
/>
),
},
{
title: "Option 6",
secondaryAction: (
<Select
value={option6}
input={
<OutlinedInput
onChange={handleInputChange}
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
name="option6"
/>
}
>
<MenuItem value="Both">Both</MenuItem>
<MenuItem value="Male+">Male+</MenuItem>
<MenuItem value="Female+">Female+</MenuItem>
<MenuItem value="Only male">Only male</MenuItem>
<MenuItem value="Only female">Only female</MenuItem>
</Select>
),
helpText: "You can add some further explanation here.",
},
{
title: "Option 7",
secondaryAction: (
<Select
value={option7}
input={
<OutlinedInput
onChange={handleInputChange}
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
name="option7"
/>
}
>
<MenuItem value="None">None</MenuItem>
<MenuItem value="6 hours">6 hours</MenuItem>
<MenuItem value="12 hours">12 hours</MenuItem>
<MenuItem value="1 day">1 day</MenuItem>
<MenuItem value="3 days">3 days</MenuItem>
<MenuItem value="1 week">1 week</MenuItem>
<MenuItem value="2 weeks">2 weeks</MenuItem>
<MenuItem value="1 month">1 month</MenuItem>
<MenuItem value="3 months">3 months</MenuItem>
<MenuItem value="6 months">6 months</MenuItem>
</Select>
),
helpText: "You can add some further explanation here.",
},
];
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Settings 2</Typography>
</AccordionSummary>
<AccordionDetails className={classes.dBlock}>
<List disablePadding>
<Bordered disableVerticalPadding disableBorderRadius>
{inputs.map((element, index) => (
<ListItem
key={index}
divider={index !== inputs.length - 1}
className="listItemLeftPadding"
>
<ListItemText>
<Typography variant="body2">
{element.title}
{element.helpText && <HelpIcon title={element.helpText} />}
</Typography>
</ListItemText>
<ListItemSecondaryAction>
<FormControl variant="outlined">
{element.secondaryAction}
</FormControl>
</ListItemSecondaryAction>
</ListItem>
))}
</Bordered>
</List>
</AccordionDetails>
<AccordionDetails className={classes.AccordionDetails}>
<Box mr={1}>
<Button
onClick={onSetDefault}
disabled={isSaveLoading || isDefaultLoading}
>
Default {isDefaultLoading && <ButtonCircularProgress />}
</Button>
</Box>
<Button
variant="contained"
color="secondary"
onClick={onSubmit}
disabled={isSaveLoading || isDefaultLoading}
>
Save {isSaveLoading && <ButtonCircularProgress />}
</Button>
</AccordionDetails>
</Accordion>
);
}
Example #4
| Source File: AddClass.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, open, onClose, _classes } = this.props;
const { classname, parentClasses, members, filters, loading, autocompleteInput } = this.state;
return (
<Dialog
onClose={onClose}
open={open}
maxWidth="md"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}>
<DialogTitle>{t('addHeadline', { item: 'Group' })}</DialogTitle>
<DialogContent style={{ minWidth: 400 }}>
<FormControl className={classes.form}>
<TextField
className={classes.input}
label={t("Groupname")}
fullWidth
value={classname || ''}
onChange={this.handleInput('classname')}
autoFocus
required
/>
<MagnitudeAutocomplete
value={parentClasses || []}
filterAttribute={'classname'}
inputValue={autocompleteInput}
onChange={this.handleAuto('parentClasses')}
className={classes.input}
options={_classes}
onInputChange={this.handleInput('autocompleteInput')}
label={t("Parent groups")}
multiple
/>
<TextField
className={classes.input}
label={t("Members (separate by comma)")}
fullWidth
value={members || ''}
onChange={this.handleMemberInput}
/>
</FormControl>
<div>
<Typography variant="body1">{t('Filters (All must be true)')}</Typography>
{filters.map((ANDFilter, ANDidx) =>
<Accordion
className={classes.panel}
elevation={2 /* 1 has global overwrite */}
key={ANDidx}
defaultExpanded
>
<AccordionSummary>
<Grid container justifyContent="space-between">
<Typography body="body1">{t('Filter (One must be true)')}</Typography>
<IconButton onClick={this.handleRemoveAND(ANDidx)} size="large">
<Delete fontSize="small" color="error"/>
</IconButton>
</Grid>
</AccordionSummary>
<AccordionDetails>
<Grid container>
{ANDFilter.map((ORFilter, ORidx) =>
<Grid item xs={12} key={ORidx} className={classes.grid}>
<Autocomplete
value={ORFilter.prop || ''}
inputValue={ORFilter.prop || ''}
onChange={this.handleAutocomplete(ANDidx, ORidx, 'prop')}
onInputChange={this.handleFilterInput(ANDidx, ORidx, 'prop')}
freeSolo
className={classes.flexTextfield}
options={this.columns}
renderInput={(params) => (
<TextField
{...params}
label={t("Name of property to match")}
/>
)}
/>
<TextField
className={classes.flexTextfield}
label={t("Comparison operator")}
value={ORFilter.op || ''}
onChange={this.handleFilterInput(ANDidx, ORidx, 'op')}
select
>
{this.operators.map(op =>
<MenuItem value={op.value} key={op.label}>{op.label}</MenuItem>
)}
</TextField>
<TextField
className={classes.flexTextfield}
label={t("Compare value (binary operators)")}
value={ORFilter.val || ''}
onChange={this.handleFilterInput(ANDidx, ORidx, 'val')}
/>
{filters[ANDidx].length > 1 &&
<IconButton onClick={this.handleRemoveOR(ANDidx, ORidx)} size="large">
<Delete fontSize="small" color="error"/>
</IconButton>}
</Grid>
)}
<Grid container justifyContent="center" className={classes.marginTop}>
<Button variant="outlined" onClick={this.handleAddOR(ANDidx)}>{t('Add or-statement')}</Button>
</Grid>
</Grid>
</AccordionDetails>
</Accordion>
)}
<Grid container justifyContent="center" className={classes.marginTop}>
<Button variant="outlined" onClick={this.handleAddAND}>{t('Add and-statement')}</Button>
</Grid>
</div>
</DialogContent>
<DialogActions>
<Button
onClick={onClose}
color="secondary"
>
{t('Cancel')}
</Button>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
disabled={loading || !classname}
>
{loading ? <CircularProgress size={24}/> : t('Add')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #5
| Source File: ClassDetails.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, domain, _classes } = this.props;
const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
const { _class, autocompleteInput, snackbar, stack } = this.state;
const { classname, parentClasses, members, filters, children } = _class;
return (
<ViewWrapper
topbarTitle={t('Groups')}
snackbar={snackbar}
onSnackbarClose={() => this.setState({ snackbar: '' })}
>
<Paper className={classes.paper} elevation={1}>
<Grid container>
<Typography
color="primary"
variant="h5"
>
{t('editHeadline', { item: 'Group' })}
</Typography>
</Grid>
<FormControl className={classes.form}>
<Breadcrumbs className={classes.breadcrumbs}>
{stack.map((_class, idx) =>
<Link
className={classes.breadcrumb}
key={_class.ID}
color="inherit"
onClick={this.handleBreadcrumb(_class.ID, idx)}
>
{_class.classname}
</Link>
)}
</Breadcrumbs>
<TextField
className={classes.input}
label={t("Groupname")}
fullWidth
value={classname || ''}
onChange={this.handleInput('classname')}
autoFocus
required
/>
<MagnitudeAutocomplete
value={parentClasses || []}
filterAttribute={'classname'}
inputValue={autocompleteInput}
onChange={this.handleAutocomplete('parentClasses')}
className={classes.input}
options={_classes || []}
onInputChange={this.handleAutocompleteInput}
label={t("Parent groups")}
placeholder={t("Search groups") + "..."}
multiple
autoSelect
/>
<TextField
className={classes.input}
label={t("Members (separate by comma)")}
fullWidth
value={members || ''}
onChange={this.handleMemberInput}
/>
</FormControl>
<div>
<Typography variant="body1">{t('Filters (All must be true)')}</Typography>
{filters && filters.map((ANDFilter, ANDidx) =>
<Accordion
className={classes.panel}
elevation={2 /* 1 has global overwrite */}
key={ANDidx}
defaultExpanded
>
<AccordionSummary>
<Grid container justifyContent="space-between">
<Typography body="body1">{t('Filter (One must be true)')}</Typography>
<IconButton onClick={this.handleRemoveAND(ANDidx)} size="large">
<Delete fontSize="small" color="error"/>
</IconButton>
</Grid>
</AccordionSummary>
<AccordionDetails>
<Grid container>
{ANDFilter.map((ORFilter, ORidx) =>
<Grid item xs={12} key={ORidx} className={classes.grid}>
<Autocomplete
value={ORFilter.prop || ''}
inputValue={ORFilter.prop || ''}
onChange={this.handleAutocomplete(ANDidx, ORidx, 'prop')}
onInputChange={this.handleFilterInput(ANDidx, ORidx, 'prop')}
freeSolo
className={classes.flexTextfield}
options={this.columns}
renderInput={(params) => (
<TextField
{...params}
label={t("Name of property to match")}
/>
)}
/>
<TextField
className={classes.flexTextfield}
label={t("Comparison operator")}
value={ORFilter.op || ''}
onChange={this.handleFilterInput(ANDidx, ORidx, 'op')}
select
>
{this.operators.map(op =>
<MenuItem value={op.value} key={op.label}>{op.label}</MenuItem>
)}
</TextField>
<TextField
className={classes.flexTextfield}
label={t("Compare value (binary operators)")}
value={ORFilter.val || ''}
onChange={this.handleFilterInput(ANDidx, ORidx, 'val')}
/>
{filters[ANDidx].length > 1 &&
<IconButton onClick={this.handleRemoveOR(ANDidx, ORidx)} size="large">
<Delete fontSize="small" color="error"/>
</IconButton>}
</Grid>
)}
<Grid container justifyContent="center">
<Button variant="outlined" onClick={this.handleAddOR(ANDidx)}>{t('Add or-statement')}</Button>
</Grid>
</Grid>
</AccordionDetails>
</Accordion>
)}
<Grid container justifyContent="center">
<Button variant="outlined" onClick={this.handleAddAND}>{t('Add and-statement')}</Button>
</Grid>
</div>
<Typography variant="h6">{t('Children')}</Typography>
<List>
{children && children.map(child =>
<ListItem
key={child.ID}
button
onClick={this.handleChildClicked(child)}
>
<ListItemText primary={child.classname} />
</ListItem>
)}
</List>
<Button
variant="text"
color="secondary"
onClick={this.handleNavigation(domain.ID + '/classes')}
style={{ marginRight: 8 }}
>
{t('Back')}
</Button>
<Button
variant="contained"
color="primary"
onClick={this.handleEdit}
disabled={!writable}
>
{t('Save')}
</Button>
</Paper>
</ViewWrapper>
);
}
