React Tabs

UnitTabs.js

import React from 'react';
import { AppBar, Tab, Tabs, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';
import Auth from '../../util/Auth';
import PERMISSIONS_LIST from '../../util/RolesEnum';
import Box from '@material-ui/core/Box';
import EditUnit from './EditUnit';
import UnitChainOfTitle from './UnitChainOfTitle';
import UnitRetainedAcreage from './UnitRetainedAcreage';

const hasPermissions = Auth.hasRole(PERMISSIONS_LIST.WRITE.WRITE_UNITS);

export const FormStyles = makeStyles((theme) => ({
  root: {
    paddingBottom: 50,
  },
  TextField: {
    display: 'block',
    marginTop: 10,
    marginBottom: 10,
    paddingRight: '1em',
  },
  Switch: {
    margin: 0,
  },
  BottomBar: {
    display: hasPermissions ? 'flex' : 'none',
    justifyContent: 'space-between',
  },
  positives: {
    display: 'flex',
    flexDirection: 'row',
  },
  SubmitButton: {
    display: hasPermissions ? 'inline-block' : 'none',
    maxWidth: '200px',
    maxHeight: '50px',
    minWidth: '200px',
    float: 'left',
  },
  DeleteButton: {
    display: hasPermissions ? 'inline-block' : 'none',
    maxWidth: '200px',
    maxHeight: '50px',
    minWidth: '200px',
    float: 'right',
  },
  DIButton: {
    display: hasPermissions ? 'inline-block' : 'none',
    maxWidth: '200px',
    maxHeight: '50px',
    minWidth: '200px',
  },
  FormControlLabel: {
    paddingRight: '5em',
  },
  Select: {
    display: 'block',
  },
  FullWidthTextBox: {
    marginBottom: 20,
    marginTop: 20,
  },
  paper: {
    padding: 25,
    marginBottom: '1rem',
    marginTop: '1rem',
  },
  title: {
    color: '#1976d2',
    fontSize: '1.75rem',
    textAlign: 'left',
    textDecoration: 'underline',
  },
}));

function TabContainer(props) {
  return (
    <Typography component='div' style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

function TabPanel(props) {
  console.log(props);
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          {children}
        </Box>
      )}
    </div>
  );
}

const UnitTabs = ({ match, history }) => {
  const [value, setValue] = React.useState(0);
  const tableComponents = [<EditUnit />, <UnitChainOfTitle />, <UnitRetainedAcreage />];

  return (
    <div>
      <AppBar position='static'>
        <Tabs
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
        >
          <Tab label='Main' />
          <Tab label='Chain Of Title' />
          <Tab label='Unit Retained Acreage' />
        </Tabs>
      </AppBar>
      {
        tableComponents.map((component, index) => {
          console.log(index);
          return(
            <TabPanel value={index + 1} index={index}>
              {component}
            </TabPanel>
          )
        })
      }
      {/*{value === 0 && (*/}
      {/*  <TabContainer>*/}
      {/*    <EditUnit match={match} history={history} />*/}
      {/*  </TabContainer>*/}
      {/*)}*/}
      {/*{value === 1 && (*/}
      {/*  <TabContainer>*/}
      {/*    <UnitChainOfTitle match={match} history={history} />*/}
      {/*  </TabContainer>*/}
      {/*)}*/}
      {/*{value === 2 && (*/}
      {/*  <TabContainer>*/}
      {/*    <UnitRetainedAcreage match={match} />*/}
      {/*  </TabContainer>*/}
      {/*)}*/}
    </div>
  );
};

export default UnitTabs;