@eureca/eureca-ui/src/components/Tabs/tabs.js

UI component library of Eureca's user and admin apps

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';

import { Tabs, Tab } from '@material-ui/core';
import { makeStyles, useTheme } from '@material-ui/core/styles';

import { useWindowSize } from '../../hooks/useWindowSizeSSR';

const useStyles = makeStyles({
  root: {
    textTransform: 'none',
    paddingLeft: 32,
    paddingRight: 32,
  },
});

function EurecaTabs({ items, current, onChange }) {
  const styles = useStyles();
  const size = useWindowSize();
  const theme = useTheme();
  const handleChange = useCallback(
    function change(event, newValue) {
      onChange(newValue);
    },
    [onChange]
  );
  return (
    <Tabs
      indicatorColor="primary"
      value={current}
      onChange={handleChange}
      variant="scrollable"
      scrollButtons={size?.width < theme.breakpoints.values.md ? 'on' : 'auto'}
    >
      {items.map(item => (
        <Tab key={`${item.label}-${item.value}`} classes={styles} {...item} />
      ))}
    </Tabs>
  );
}

EurecaTabs.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])
        .isRequired,
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      disabled: PropTypes.bool,
    }).isRequired
  ).isRequired,
  current: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  onChange: PropTypes.func.isRequired,
};

EurecaTabs.defaultProps = {
  items: [
    {
      label: '',
      value: 0,
      disabled: false,
    },
  ],
  current: 0,
  onChange: () => {},
};

export { EurecaTabs as Tabs };