Skip to content

Commit 0eb1cf6

Browse files
authored
Unify description for different elements gridexplore (#551)
* Unify description for diffrenet elements gridexplore --------- Signed-off-by: maissa SOUISSI <[email protected]>
1 parent 5e21d3e commit 0eb1cf6

File tree

3 files changed

+65
-10
lines changed

3 files changed

+65
-10
lines changed

src/components/filter/filter-form.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,10 @@ import CriteriaBasedFilterForm from './criteria-based/criteria-based-filter-form
1414
import ExplicitNamingFilterForm from './explicit-naming/explicit-naming-filter-form';
1515
import ExpertFilterForm from './expert/expert-filter-form';
1616
import { FilterType } from './constants/filter-constants';
17-
import ExpandableGroup from '../ExpandableGroup';
1817
import RadioInput from '../inputs/react-hook-form/radio-input';
1918
import { ElementExistsType, ElementType } from '../../utils/ElementType';
20-
import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField';
2119
import UniqueNameInput from '../inputs/react-hook-form/unique-name-input';
20+
import DescriptionField from '../inputs/react-hook-form/description-field';
2221

2322
interface FilterFormProps {
2423
creation?: boolean;
@@ -62,14 +61,7 @@ function FilterForm(props: FilterFormProps) {
6261
{creation && (
6362
<>
6463
<Grid item xs={12}>
65-
<ExpandableGroup renderHeader="Description">
66-
<ExpandingTextField
67-
name={FieldConstants.DESCRIPTION}
68-
label="descriptionProperty"
69-
minRows={3}
70-
rows={5}
71-
/>
72-
</ExpandableGroup>
64+
<DescriptionField />
7365
</Grid>
7466
{!sourceFilterForExplicitNamingConversion && (
7567
<Grid item>
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Copyright (c) 2024, RTE (http://www.rte-france.com)
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
8+
import { useState } from 'react';
9+
import { FormattedMessage } from 'react-intl';
10+
import { Box, Button } from '@mui/material';
11+
import AddIcon from '@mui/icons-material/Add';
12+
import DeleteIcon from '@mui/icons-material/Delete';
13+
import { useFormContext } from 'react-hook-form'; // Import useFormContext
14+
import FieldConstants from '../../../utils/field-constants';
15+
import ExpandingTextField from './ExpandingTextField';
16+
17+
function DescriptionField() {
18+
const [isDescriptionFieldVisible, setIsDescriptionFieldVisible] = useState(false);
19+
const { setValue } = useFormContext();
20+
21+
const handleOpenDescription = () => {
22+
setIsDescriptionFieldVisible(true);
23+
setValue(FieldConstants.DESCRIPTION, '');
24+
};
25+
26+
const handleCloseDescription = () => {
27+
setIsDescriptionFieldVisible(false);
28+
};
29+
30+
return (
31+
<Box>
32+
{!isDescriptionFieldVisible ? (
33+
<Button startIcon={<AddIcon />} onClick={handleOpenDescription}>
34+
<FormattedMessage id="AddDescription" />
35+
</Button>
36+
) : (
37+
<Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
38+
<ExpandingTextField
39+
name={FieldConstants.DESCRIPTION}
40+
label="descriptionProperty"
41+
minRows={3}
42+
rows={3}
43+
sx={{ flexGrow: 1 }}
44+
/>
45+
<Button
46+
sx={{
47+
alignSelf: 'flex-end',
48+
marginLeft: 1,
49+
padding: 1,
50+
marginBottom: 2,
51+
}}
52+
onClick={handleCloseDescription}
53+
>
54+
<DeleteIcon />
55+
</Button>
56+
</Box>
57+
)}
58+
</Box>
59+
);
60+
}
61+
62+
export default DescriptionField;

src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export { default as ExpandableGroup } from './components/ExpandableGroup';
2727
export { default as MultipleSelectionDialog } from './components/MultipleSelectionDialog';
2828
export { default as CustomMuiDialog } from './components/dialogs/custom-mui-dialog';
2929
export { default as DescriptionModificationDialog } from './components/dialogs/description-modification-dialog';
30+
export { default as DescriptionField } from './components/inputs/react-hook-form/description-field';
3031
export { default as ModifyElementSelection } from './components/dialogs/modify-element-selection';
3132
export { default as CriteriaBasedForm } from './components/filter/criteria-based/criteria-based-form';
3233
export { default as PopupConfirmationDialog } from './components/dialogs/popup-confirmation-dialog';

0 commit comments

Comments
 (0)