@eureca/eureca-ui/src/components/Table/table-cell.js

UI component library of Eureca's user and admin apps

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

import { makeStyles, createMuiTheme } from '@material-ui/core/styles';
import { TableCell, Typography } from '@material-ui/core';

import { colors } from '../../theme/colors';

const theme = createMuiTheme();

const useStyles = makeStyles({
  root: {
    height: theme.spacing(6),
    paddingRight: theme.spacing(1),
    paddingLeft: theme.spacing(1),
    borderBottomColor: colors.gray4,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
});

const stickyStyle = {
  position: 'sticky',
  backgroundClip: 'padding-box',
  backgroundColor: 'inherit',
  zIndex: 30,
};

function Cell({ id, index, align = {}, style = {}, sticky = false, children }) {
  const ref = useRef();
  const classes = useStyles();
  const properties = index === 0 ? { component: 'th', id, scope: 'row', padding: 'none' } : null;
  const left = 0;
  const styles = sticky ? { ...stickyStyle, left, ...style } : { ...style };
  let childComponent = ['string', 'number'].includes(typeof children) ? (
    <Typography variant="subtitle2">{children}</Typography>
  ) : (
    children
  );
  return (
    <TableCell
      ref={ref}
      padding="none"
      classes={classes}
      align={align}
      style={{ ...styles }}
      {...properties}
    >
      {childComponent}
    </TableCell>
  );
}

Cell.propTypes = {
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  index: PropTypes.number.isRequired,
  align: PropTypes.string,
  style: PropTypes.object,
  sticky: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
};

export default React.forwardRef((props, ref) => <Cell {...props} forwardedRef={ref} />);