From 0cde6cf81c258eee43f27514f7da9b0acac9f953 Mon Sep 17 00:00:00 2001
From: Zach Gover <9044773+zgover@users.noreply.github.com>
Date: Tue, 16 Mar 2021 05:52:55 -0500
Subject: [PATCH] (DRY) Simplified styling and added HOC

- Added HOC to simplify use and maintenance within field components.
- Updated style implementation to use Mui's styled function.
---
 .../src/form-field-grid/form-field-grid.js    | 51 +++++++++++++------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js b/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js
index c9d9d93b8..8c847bdd8 100644
--- a/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js
+++ b/packages/mui-component-mapper/src/form-field-grid/form-field-grid.js
@@ -2,24 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { styled } from '@material-ui/core/styles';
 
-const useFinalFormFieldStyles = makeStyles({
-  grid: {
-    position: 'relative'
-  }
-});
-
-const FormFieldGrid = ({ children, className, ...props }) => {
-  const classes = useFinalFormFieldStyles();
+const StyledGrid = styled(Grid)({position: 'relative'});
 
-  return (
-    <Grid xs={12} item className={clsx(classes.grid, className)} {...props}>
-      {children}
-    </Grid>
-  );
-};
+const FormFieldGrid = React.forwardRef(
+  function RefRenderFn(props, ref) {
+    const { children, ...rest } = props;
+    
+    return (
+      <StyledGrid ref={ref} item xs={12} {...rest}>
+        {children}
+      </StyledGrid>
+    );
+  }
+);
 
 FormFieldGrid.propTypes = {
   children: PropTypes.node,
@@ -27,3 +24,25 @@ FormFieldGrid.propTypes = {
 };
 
 export default FormFieldGrid;
+
+export const withFormFieldGrid = (WrappedComponent) => {
+  const WithFormFieldGrid = forwardRef(
+    function  RefRenderFn(props, ref) {
+      const { GridItemProps, ...rest } = props;
+      return (
+        <FormFieldGrid {...GridItemProps}>
+          <WrappedComponent {...rest}/>
+        </FormFieldGrid>
+      )
+    }
+  );
+  WithFormFieldGrid.displayName = `WithFormFieldGrid(${getDisplayName(WrappedComponent)})`;
+  WithFormFieldGrid.propTypes = {
+    GridItemProps: PropTypes.object
+  };
+  return WithFormFieldGrid;
+};
+
+const getDisplayName = (WrappedComponent) => {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+};