[INFRA-421] | Anoop | Add shade to expansion panel heading

src/renderer/FoldableGroup.tsx

@@ -6,17 +6,29 @@ import {
   ExpansionPanelDetails,
   ExpansionPanelSummary,
   Hidden,
-  Typography
+  Typography,
+  createStyles,
+  makeStyles
 } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import React from "react";
 import { FoldableGroupContext } from './FoldableGroupContext';
 
-const FoldableGroup = props => {
-  const { uischema, schema, path, visible, renderers} = props;
-  const { foldableGroupState, foldableGroupDispatch } = React.useContext(FoldableGroupContext)
+const useStyles = makeStyles((theme: any) =>
+  createStyles({
+    expandedPanelHeading: {
+      backgroundColor: '#E8E8E8'
+    }
+  }),
+);
 
-  const layoutProps : MaterialLayoutRendererProps = {
+
+const FoldableGroup = props => {
+  const { uischema, schema, path, visible, renderers } = props;
+  const { foldableGroupState, foldableGroupDispatch } = React.useContext(FoldableGroupContext)
+  const classes = useStyles()
+
+  const layoutProps: MaterialLayoutRendererProps = {
     elements: uischema.elements,
     schema: schema,
     path: path,
@@ -27,25 +39,25 @@ const FoldableGroup = props => {
 
   let expansionPanelProps = {}
 
-  if(uischema.parentId) {
-        const currentExpandedPanel = foldableGroupState[uischema.parentId]
-        expansionPanelProps = {
-            expanded: currentExpandedPanel === uischema.id,
-            onChange: (event, isExpanded) => {
-                if(isExpanded) {
-                    foldableGroupDispatch({ type: 'EXPAND', key: uischema.parentId, value: uischema.id })
-                }
-                else {
-                    foldableGroupDispatch({ type: 'SHRINK', key: uischema.parentId })
-                }
-            }
+  if (uischema.parentId) {
+    const currentExpandedPanel = foldableGroupState[uischema.parentId]
+    expansionPanelProps = {
+      expanded: currentExpandedPanel === uischema.id,
+      onChange: (event, isExpanded) => {
+        if (isExpanded) {
+          foldableGroupDispatch({ type: 'EXPAND', key: uischema.parentId, value: uischema.id })
         }
+        else {
+          foldableGroupDispatch({ type: 'SHRINK', key: uischema.parentId })
+        }
+      }
     }
+  }
 
   return (
     <Hidden>
-      <ExpansionPanel {...expansionPanelProps}>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+      <ExpansionPanel {...expansionPanelProps} >
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} classes={{ expanded: classes.expandedPanelHeading }}>
           <Typography>{uischema.label}</Typography>
         </ExpansionPanelSummary>
         <ExpansionPanelDetails>
@@ -56,5 +68,5 @@ const FoldableGroup = props => {
   );
 };
 
-export const FoldableGroupRenderer =  withJsonFormsLayoutProps(FoldableGroup);
+export const FoldableGroupRenderer = withJsonFormsLayoutProps(FoldableGroup);
 export const FoldableGroupTester = rankWith(100, uiTypeIs("FoldableGroup"));