From b1f8e617da0aab725dc8638189950a7d5c506ee3 Mon Sep 17 00:00:00 2001
From: Matt Oestreich <21092343+oze4@users.noreply.github.com>
Date: Sun, 1 Aug 2021 22:38:54 -0500
Subject: [PATCH] refactor: create MTableCustomIcon component

---
 src/components/MTableBodyRow/index.js    | 26 +++++++++---------------
 src/components/MTableCustomIcon/index.js | 22 ++++++++++++++++++++
 src/components/index.js                  |  1 +
 3 files changed, 33 insertions(+), 16 deletions(-)
 create mode 100644 src/components/MTableCustomIcon/index.js

diff --git a/src/components/MTableBodyRow/index.js b/src/components/MTableBodyRow/index.js
index b0d2e7d7..5e419a8b 100644
--- a/src/components/MTableBodyRow/index.js
+++ b/src/components/MTableBodyRow/index.js
@@ -5,7 +5,6 @@ import {
   Checkbox,
   TableCell,
   IconButton,
-  Icon,
   Tooltip,
   TableRow
 } from '@material-ui/core';
@@ -13,6 +12,7 @@ import {
 import { MTableDetailPanel } from '../m-table-detailpanel';
 import * as CommonValues from '../../utils/common-values';
 import { useDoubleClick } from '../../utils/hooks/useDoubleClick';
+import { MTableCustomIcon } from '../../components';
 
 export default function MTableBodyRow(props) {
   const {
@@ -206,19 +206,7 @@ export default function MTableBodyRow(props) {
     if (!props.options.showDetailPanelIcon) {
       return null;
     }
-
     const size = CommonValues.elementSize(props);
-
-    const CustomIcon = ({ icon, iconProps }) => {
-      if (!icon) {
-        return;
-      }
-      if (typeof icon === 'string') {
-        return <Icon {...iconProps}>{icon}</Icon>;
-      }
-      return React.createElement(icon, { ...iconProps });
-    };
-
     if (typeof props.detailPanel === 'function') {
       return (
         <TableCell
@@ -272,7 +260,7 @@ export default function MTableBodyRow(props) {
               if (isOpen) {
                 if (panel.openIcon) {
                   iconButton = (
-                    <CustomIcon
+                    <MTableCustomIcon
                       icon={panel.openIcon}
                       iconProps={panel.iconProps}
                     />
@@ -280,12 +268,18 @@ export default function MTableBodyRow(props) {
                   animation = false;
                 } else if (panel.icon) {
                   iconButton = (
-                    <CustomIcon icon={panel.icon} iconProps={panel.iconProps} />
+                    <MTableCustomIcon
+                      icon={panel.icon}
+                      iconProps={panel.iconProps}
+                    />
                   );
                 }
               } else if (panel.icon) {
                 iconButton = (
-                  <CustomIcon icon={panel.icon} iconProps={panel.iconProps} />
+                  <MTableCustomIcon
+                    icon={panel.icon}
+                    iconProps={panel.iconProps}
+                  />
                 );
                 animation = false;
               }
diff --git a/src/components/MTableCustomIcon/index.js b/src/components/MTableCustomIcon/index.js
new file mode 100644
index 00000000..b452f1cd
--- /dev/null
+++ b/src/components/MTableCustomIcon/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@material-ui/core';
+
+export default function MTableCustomIcon({ icon, iconProps }) {
+  if (!icon) {
+    return;
+  }
+  if (typeof icon === 'string') {
+    return <Icon {...iconProps}>{icon}</Icon>;
+  }
+  return React.createElement(icon, { ...iconProps });
+}
+
+MTableCustomIcon.defaultProps = {
+  iconProps: {}
+};
+
+MTableCustomIcon.propTypes = {
+  icon: PropTypes.element.isRequired,
+  iconProps: PropTypes.object
+};
diff --git a/src/components/index.js b/src/components/index.js
index 9ea5b6c0..3e29114d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -27,6 +27,7 @@ export { default as MTableAction } from './MTableAction';
 export { default as MTableActions } from './MTableActions';
 export { default as MTableBodyRow } from './MTableBodyRow';
 export { default as MTableCell } from './MTableCell';
+export { default as MTableCustomIcon } from './MTableCustomIcon';
 export { default as MTableEditRow } from './MTableEditRow';
 export { default as MTableFilterRow } from './MTableFilterRow';
 export { default as MTableGroupbar } from './MTableGroupbar';