18219: Disables custom props forwarding on MPV components by default.

This is to avoid warning messages like:
Warning: React does not recognize the `panelIlluminated` prop on a DOM element.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/components/multi-panel-view/multi-panel-view.test.tsx b/src/components/multi-panel-view/multi-panel-view.test.tsx
index 6cf13d78842fa0f1e385400fbb7ea70d90b357cc..d690e82fa7ecfbd33c92cb98c2b2229e3d6a6dc2 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.test.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.test.tsx
@@ -10,7 +10,7 @@ import { Button } from "@material-ui/core";
 
 configure({ adapter: new Adapter() });
 
 
 configure({ adapter: new Adapter() });
 

-const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, children, ...rest}) =>
+const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, panelIlluminated, panelRef, children, ...rest}) =>

     <div {...rest}>{children}</div>;
 
 describe('<MPVContainer />', () => {
     <div {...rest}>{children}</div>;
 
 describe('<MPVContainer />', () => {

diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index dbb379218a4b57163bcec88ed2769be1ce6d5874..185c3b90ced0bf010c4ac7c61a57eb4c13824a22 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -64,6 +64,7 @@ interface MPVPanelDataProps {
     panelMaximized?: boolean;
     panelIlluminated?: boolean;
     panelRef?: MutableRefObject<any>;
     panelMaximized?: boolean;
     panelIlluminated?: boolean;
     panelRef?: MutableRefObject<any>;

+    forwardProps?: boolean;

 }
 
 interface MPVPanelActionProps {
 }
 
 interface MPVPanelActionProps {


@@ -77,7 +78,7 @@ export type MPVPanelProps = MPVPanelDataProps & MPVPanelActionProps;
 type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps;
 
 // Grid item compatible component for layout and MPV props passing
 type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps;
 
 // Grid item compatible component for layout and MPV props passing

-export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelMaximized, panelIlluminated, panelRef, ...props}: MPVPanelContentProps) => {
+export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelMaximized, panelIlluminated, panelRef, forwardProps, ...props}: MPVPanelContentProps) => {

     useEffect(() => {
         if (panelRef && panelRef.current) {
             panelRef.current.scrollIntoView({behavior: 'smooth'});
     useEffect(() => {
         if (panelRef && panelRef.current) {
             panelRef.current.scrollIntoView({behavior: 'smooth'});


@@ -87,7 +88,9 @@ export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelM
     return <Grid item {...props}>
         <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
         <Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
     return <Grid item {...props}>
         <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
         <Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>

-            {React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })}
+            { forwardProps
+                ? React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })
+                : props.children }

         </Paper>
     </Grid>;
 }
         </Paper>
     </Grid>;
 }