-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Unify description for different elements gridexplore (#551)
* Unify description for diffrenet elements gridexplore --------- Signed-off-by: maissa SOUISSI <maissa.souissi@rte-france.com>
- Loading branch information
1 parent
5e21d3e
commit 0eb1cf6
Showing
3 changed files
with
65 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
src/components/inputs/react-hook-form/description-field.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
/** | ||
* 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 { useState } from 'react'; | ||
import { FormattedMessage } from 'react-intl'; | ||
import { Box, Button } from '@mui/material'; | ||
import AddIcon from '@mui/icons-material/Add'; | ||
import DeleteIcon from '@mui/icons-material/Delete'; | ||
import { useFormContext } from 'react-hook-form'; // Import useFormContext | ||
import FieldConstants from '../../../utils/field-constants'; | ||
import ExpandingTextField from './ExpandingTextField'; | ||
|
||
function DescriptionField() { | ||
const [isDescriptionFieldVisible, setIsDescriptionFieldVisible] = useState(false); | ||
const { setValue } = useFormContext(); | ||
|
||
const handleOpenDescription = () => { | ||
setIsDescriptionFieldVisible(true); | ||
setValue(FieldConstants.DESCRIPTION, ''); | ||
}; | ||
|
||
const handleCloseDescription = () => { | ||
setIsDescriptionFieldVisible(false); | ||
}; | ||
|
||
return ( | ||
<Box> | ||
{!isDescriptionFieldVisible ? ( | ||
<Button startIcon={<AddIcon />} onClick={handleOpenDescription}> | ||
<FormattedMessage id="AddDescription" /> | ||
</Button> | ||
) : ( | ||
<Box sx={{ display: 'flex', alignItems: 'flex-start' }}> | ||
<ExpandingTextField | ||
name={FieldConstants.DESCRIPTION} | ||
label="descriptionProperty" | ||
minRows={3} | ||
rows={3} | ||
sx={{ flexGrow: 1 }} | ||
/> | ||
<Button | ||
sx={{ | ||
alignSelf: 'flex-end', | ||
marginLeft: 1, | ||
padding: 1, | ||
marginBottom: 2, | ||
}} | ||
onClick={handleCloseDescription} | ||
> | ||
<DeleteIcon /> | ||
</Button> | ||
</Box> | ||
)} | ||
</Box> | ||
); | ||
} | ||
|
||
export default DescriptionField; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters