Change TreeViewFinder appearance (#310)

* change TreeViewFinder appearance

Signed-off-by: anistouri <[email protected]>

src/components/TreeViewFinder/TreeViewFinder.js

@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useCallback, useEffect } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import {
     toNestedGlobalSelectors,
@@ -28,6 +28,7 @@ import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import CheckIcon from '@mui/icons-material/Check';
+import CancelButton from '../react-hook-form/utils/cancel-button';
 
 // As a bunch of individual variables to try to make it easier
 // to track that they are all used. Not sure, maybe group them in an object ?
@@ -96,6 +97,7 @@ const composeClasses = makeComposeClasses(generateTreeViewFinderClass);
  * @param {String}          [validationButtonText=default text] - Customized Validation Button text (default: Add N Elements)
  * @param {Boolean}         [onlyLeaves=true] - Allow/Forbid selection only on leaves
  * @param {Boolean}         [multiselect=false] - Allow/Forbid multiselection on Tree
+ * @param {Object}          [cancelButtonProps] - The cancel button props
  */
 const TreeViewFinder = (props) => {
     const intl = useIntl();
@@ -114,6 +116,7 @@ const TreeViewFinder = (props) => {
         multiselect,
         sortMethod,
         className,
+        cancelButtonProps,
     } = props;
 
     const [mapPrintedNodes, setMapPrintedNodes] = useState({});
@@ -343,18 +346,16 @@ const TreeViewFinder = (props) => {
                 </TreeView>
             </DialogContent>
             <DialogActions>
-                <Button
-                    variant="contained"
+                <CancelButton
                     style={{ float: 'left', margin: '5px' }}
                     onClick={() => {
                         onClose([]);
                         setSelected([]);
                     }}
-                >
-                    <FormattedMessage id="treeview_finder/cancel" />
-                </Button>
+                    {...cancelButtonProps}
+                />
                 <Button
-                    variant="contained"
+                    variant="outlined"
                     style={{ float: 'left', margin: '5px' }}
                     onClick={() => {
                         onClose(computeSelectedNodes());
@@ -392,6 +393,7 @@ TreeViewFinder.propTypes = {
     onlyLeaves: PropTypes.bool,
     multiselect: PropTypes.bool,
     sortMethod: PropTypes.func,
+    cancelButtonProps: PropTypes.object,
 };
 
 /* TreeViewFinder props default values */

src/components/react-hook-form/utils/cancel-button.js

@@ -1,31 +1,25 @@
+/**
+ * Copyright (c) 2023, 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 React from 'react';
 import { Button } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const CancelButton = ({
-    onClick,
-    variant,
-    disabled,
-    withCustomColor = true,
-}) => {
+const CancelButton = ({ ...buttonProps }) => {
     return (
-        <Button
-            onClick={onClick}
-            variant={variant}
-            disabled={disabled}
-            color={withCustomColor ? 'customButton' : 'primary'}
-        >
+        <Button {...buttonProps}>
             <FormattedMessage id="cancel" />
         </Button>
     );
 };
 
 CancelButton.propTypes = {
-    onClick: PropTypes.func.isRequired,
-    variant: PropTypes.string,
-    disabled: PropTypes.bool,
-    withCustomColor: PropTypes.bool,
+    buttonProps: PropTypes.object,
 };
 
 export default CancelButton;

src/components/react-hook-form/utils/submit-button.js

@@ -9,15 +9,23 @@ import React from 'react';
 import { Button } from '@mui/material';
 import { useFormState } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
 
-const SubmitButton = ({ onClick, disabled = false }) => {
+const SubmitButton = ({ ...buttonProps }) => {
     const { isDirty } = useFormState();
 
     return (
-        <Button onClick={onClick} disabled={!isDirty || disabled}>
+        <Button
+            {...buttonProps}
+            disabled={!isDirty || (buttonProps?.disabled ?? false)}
+        >
             <FormattedMessage id="validate" />
         </Button>
     );
 };
 
+SubmitButton.propTypes = {
+    buttonProps: PropTypes.object,
+};
+
 export default SubmitButton;

src/components/translations/common-button-en.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023, 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/.
+ */
+
+const common_button_en = {
+    cancel: 'Cancel',
+    validate: 'Validate',
+};
+
+export default common_button_en;

src/components/translations/common-button-fr.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023, 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/.
+ */
+
+const common_button_fr = {
+    cancel: 'Annuler',
+    validate: 'Valider',
+};
+
+export default common_button_fr;

src/components/translations/treeview-finder-en.js

@@ -7,7 +7,6 @@
 
 const treeview_finder_en = {
     'treeview_finder/close': 'Close',
-    'treeview_finder/cancel': 'Cancel',
     'treeview_finder/validate': 'Validate',
     'treeview_finder/add': 'Add...',
     'treeview_finder/deleteSelection': 'Delete selection',

src/components/translations/treeview-finder-fr.js

@@ -7,7 +7,6 @@
 
 const treeview_finder_fr = {
     'treeview_finder/close': 'Fermer',
-    'treeview_finder/cancel': 'Annuler',
     'treeview_finder/validate': 'Valider',
     'treeview_finder/add': 'Ajouter...',
     'treeview_finder/deleteSelection': 'Supprimer la selection',

src/index.js

@@ -81,6 +81,9 @@ export flat_parameters_en from './components/translations/flat-parameters-en';
 export flat_parameters_fr from './components/translations/flat-parameters-fr';
 export multiple_selection_dialog_en from './components/translations/multiple-selection-dialog-en';
 export multiple_selection_dialog_fr from './components/translations/multiple-selection-dialog-fr';
+export common_button_en from './components/translations/common-button-en';
+export common_button_fr from './components/translations/common-button-fr';
+
 export { TagRenderer } from './components/ElementSearchDialog';
 export { EquipmentItem } from './components/ElementSearchDialog/equipment-item';
 export CardErrorBoundary from './components/CardErrorBoundary';