-export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelMaximized, ...props}: MPVPanelContentProps) =>
- <Grid item {...props}>
- {React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })}
+export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName,
+ panelMaximized, panelIlluminated, panelRef, forwardProps, maxHeight,
+ ...props}: MPVPanelContentProps) => {
+ useEffect(() => {
+ if (panelRef && panelRef.current) {
+ panelRef.current.scrollIntoView({behavior: 'smooth'});
+ }
+ }, [panelRef]);
+
+ const mh = panelMaximized
+ ? '100%'
+ : maxHeight;
+
+ return <Grid item style={{maxHeight: mh}} {...props}>
+ <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
+ <Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
+ { forwardProps
+ ? React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })
+ : props.children }
+ </Paper>