diff --git a/src/components/ExpendableGroup/expendable-group.tsx b/src/components/ExpendableGroup/expendable-group.tsx new file mode 100644 index 00000000..d03234e5 --- /dev/null +++ b/src/components/ExpendableGroup/expendable-group.tsx @@ -0,0 +1,79 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ +import { + Accordion, + AccordionDetails, + AccordionSummary, + Theme, + Typography, +} from '@mui/material'; +import React, { PropsWithChildren, ReactNode, useState } from 'react'; +import { ExpandCircleDown, ExpandMore } from '@mui/icons-material'; +import { FormattedMessage } from 'react-intl'; + +export const styles = { + accordion: (theme: Theme) => ({ + '&:before': { + display: 'none', + }, + background: 'none', + }), + accordionSummary: (theme: Theme) => ({ + flexDirection: 'row-reverse', // place icon at the left + padding: 0, // reset default left right space in summary + '.MuiAccordionSummary-content': { + paddingLeft: 1, // align text label + }, + '&:not(.Mui-expanded)': { + // show a fake divider at the bottom of summary + borderBottom: '1px solid', + borderColor: theme.palette.divider, + }, + + '& .MuiAccordionSummary-expandIconWrapper': { + transform: 'rotate(-90deg)', + }, + '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': { + transform: 'rotate(0deg)', + }, + }), + accordionDetails: (theme: Theme) => ({ + padding: 0, // reset default left right space in details + }), +}; + +interface ExpandableGroupProps extends PropsWithChildren { + renderHeader: ReactNode; +} + +const ExpendableGroup = ({ renderHeader, children }: ExpandableGroupProps) => { + const [mouseHover, setMouseHover] = useState(false); + + return ( + + : } + onMouseEnter={(event) => setMouseHover(true)} + onMouseLeave={(event) => setMouseHover(false)} + > + {typeof renderHeader === 'string' ? ( + + + + ) : ( + renderHeader + )} + + + {children} + + + ); +}; + +export default ExpendableGroup; diff --git a/src/components/ExpendableGroup/index.ts b/src/components/ExpendableGroup/index.ts new file mode 100644 index 00000000..0679f19e --- /dev/null +++ b/src/components/ExpendableGroup/index.ts @@ -0,0 +1,8 @@ +/** + * Copyright (c) 2024, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +export { default } from './expendable-group'; diff --git a/src/components/filter/filter-form.tsx b/src/components/filter/filter-form.tsx index c7298807..5e9e6dc5 100644 --- a/src/components/filter/filter-form.tsx +++ b/src/components/filter/filter-form.tsx @@ -12,13 +12,14 @@ import ExplicitNamingFilterForm from './explicit-naming/explicit-naming-filter-f import React, { FunctionComponent, useEffect } from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; import ExpertFilterForm from './expert/expert-filter-form'; -import { Box, Grid } from '@mui/material'; -import RadioInput from '../inputs/react-hook-form/radio-input'; +import { Grid } from '@mui/material'; import { ElementType } from '../../utils/ElementType'; import { UUID } from 'crypto'; import { elementExistsType } from './criteria-based/criteria-based-filter-edition-dialog'; -import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField'; import { FilterType } from './constants/filter-constants'; +import ExpendableGroup from '../ExpendableGroup'; +import RadioInput from '../inputs/react-hook-form/radio-input'; +import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField'; interface FilterFormProps { creation?: boolean; @@ -64,14 +65,13 @@ export const FilterForm: FunctionComponent = (props) => { {props.creation && ( <> - + - + {!props.sourceFilterForExplicitNamingConversion && ( diff --git a/src/index.ts b/src/index.ts index 7104ecc9..16d925d2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,6 +20,7 @@ export { default as ReportViewerDialog } from './components/ReportViewerDialog'; export { default as OverflowableText } from './components/OverflowableText'; export { default as ElementSearchDialog } from './components/ElementSearchDialog'; export { default as FlatParameters } from './components/FlatParameters'; +export { default as ExpandableGroup } from './components/ExpendableGroup'; export { default as MultipleSelectionDialog } from './components/MultipleSelectionDialog'; export { default as CustomMuiDialog } from './components/dialogs/custom-mui-dialog'; export { default as DescriptionModificationDialog } from './components/dialogs/description-modification-dialog';