@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
95 lines (93 loc) • 3.72 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2023 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import { useState } from 'react';
import ExpandMore from '@mui/icons-material/ExpandMoreOutlined';
import Accordion, { accordionClasses } from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary, { accordionSummaryClasses } from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { SystemIcon } from '../SystemIcon';
import WidgetsGrid from '../WidgetsGrid';
export function WidgetsAccordion(props) {
const { title, icon, sxs } = props;
const [open, setOpen] = useState(false);
const theme = useTheme();
const expandedClass = accordionClasses.expanded;
const contentClass = accordionSummaryClasses.content;
return React.createElement(
Accordion,
{
expanded: open,
onChange: (e, isExpanded) => setOpen(isExpanded),
sx: Object.assign(
{ boxShadow: 0, [`&.${expandedClass}`]: { margin: 0 } },
sxs === null || sxs === void 0 ? void 0 : sxs.accordion
)
},
React.createElement(
AccordionSummary,
{
expandIcon: React.createElement(ExpandMore, null),
sx: Object.assign(
{
alignItems: 'center',
[`&, &.${expandedClass}`]: { minHeight: '48px' },
[`.${contentClass}, .${contentClass}.${expandedClass}`]: { margin: 0 }
},
sxs === null || sxs === void 0 ? void 0 : sxs.accordionSummary
)
},
icon &&
React.createElement(SystemIcon, {
icon: icon,
style: Object.assign(
{ marginRight: '10px', color: theme.palette.action.active },
sxs === null || sxs === void 0 ? void 0 : sxs.icon
)
}),
React.createElement(Typography, { sx: sxs === null || sxs === void 0 ? void 0 : sxs.typography }, title)
),
React.createElement(
AccordionDetails,
{ sx: Object.assign({ padding: 0 }, sxs === null || sxs === void 0 ? void 0 : sxs.accordionDetails) },
React.createElement(WidgetsGrid, {
container: true,
spacing: 0,
direction: 'column',
widgets: props.widgets,
sx: sxs === null || sxs === void 0 ? void 0 : sxs.widgetsGrid
})
)
);
}
export default WidgetsAccordion;