refactor(tsx): convert CustomTabs component

Author: fabiovincenzi

src/ui/components/CustomTabs/CustomTabs.jsx renamed to src/ui/components/CustomTabs/CustomTabs.tsx

@@ -1,28 +1,50 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Card from '../Card/Card';
 import CardBody from '../Card/CardBody';
 import CardHeader from '../Card/CardHeader';
-
 import styles from '../../assets/jss/material-dashboard-react/components/customTabsStyle';
 
-const useStyles = makeStyles(styles);
+const useStyles = makeStyles(styles as any);
 
-export default function CustomTabs(props) {
-  const [value, setValue] = React.useState(0);
-  const handleChange = (event, val) => {
-    setValue(val);
-  };
+type HeaderColor = 'warning' | 'success' | 'danger' | 'info' | 'primary' | 'rose';
+
+interface TabItem {
+  tabName: string;
+  tabIcon?: React.ComponentType;
+  tabContent: React.ReactNode;
+}
+
+interface CustomTabsProps {
+  headerColor?: HeaderColor;
+  title?: string;
+  tabs: TabItem[];
+  rtlActive?: boolean;
+  plainTabs?: boolean;
+}
+
+const CustomTabs: React.FC<CustomTabsProps> = ({
+  headerColor = 'primary',
+  plainTabs = false,
+  tabs,
+  title,
+  rtlActive = false,
+}) => {
+  const [value, setValue] = useState(0);
   const classes = useStyles();
-  const { headerColor, plainTabs, tabs, title, rtlActive } = props;
+
+  const handleChange = (event: React.ChangeEvent<unknown>, newValue: number) => {
+    setValue(newValue);
+  };
+
   const cardTitle = classNames({
     [classes.cardTitle]: true,
     [classes.cardTitleRTL]: rtlActive,
   });
+
   return (
     <Card plain={plainTabs}>
       <CardHeader color={headerColor} plain={plainTabs}>
@@ -39,12 +61,7 @@ export default function CustomTabs(props) {
           scrollButtons='auto'
         >
           {tabs.map((prop, key) => {
-            let icon = {};
-            if (prop.tabIcon) {
-              icon = {
-                icon: <prop.tabIcon />,
-              };
-            }
+            const icon = prop.tabIcon ? { icon: <prop.tabIcon /> } : {};
             return (
               <Tab
                 classes={{
@@ -61,27 +78,14 @@ export default function CustomTabs(props) {
         </Tabs>
       </CardHeader>
       <CardBody>
-        {tabs.map((prop, key) => {
-          if (key === value) {
-            return <div key={key}>{prop.tabContent}</div>;
-          }
-          return null;
-        })}
+        {tabs.map((prop, key) => (
+          <div key={key} style={{ display: key === value ? 'block' : 'none' }}>
+            {prop.tabContent}
+          </div>
+        ))}
       </CardBody>
     </Card>
   );
-}
-
-CustomTabs.propTypes = {
-  headerColor: PropTypes.oneOf(['warning', 'success', 'danger', 'info', 'primary', 'rose']),
-  title: PropTypes.string,
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({
-      tabName: PropTypes.string.isRequired,
-      tabIcon: PropTypes.object,
-      tabContent: PropTypes.node.isRequired,
-    }),
-  ),
-  rtlActive: PropTypes.bool,
-  plainTabs: PropTypes.bool,
 };
+
+export default CustomTabs;