refactor: create MTableCustomIcon component

material-table-core · Aug 2, 2021 · b1f8e61 · b1f8e61
1 parent ff98735
commit b1f8e61
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/src/components/MTableBodyRow/index.js b/src/components/MTableBodyRow/index.js
@@ -5,14 +5,14 @@ import {
   Checkbox,
   TableCell,
   IconButton,
-  Icon,
   Tooltip,
   TableRow
 } from '@material-ui/core';
 // Internal
 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,20 +260,26 @@ export default function MTableBodyRow(props) {
               if (isOpen) {
                 if (panel.openIcon) {
                   iconButton = (
-                    <CustomIcon
+                    <MTableCustomIcon
                       icon={panel.openIcon}
                       iconProps={panel.iconProps}
                     />
                   );
                   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
@@ -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
@@ -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';