All files / elements/Table/utils/styled/StyledTableCell index.js

100% Statements 13/13
100% Branches 0/0
100% Functions 2/2
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93                                                      5x             561x 561x 561x     5x         5x         5x                                 5x       5x         204x 204x     5x           5x              
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { fontWeight } from 'styled-system';
import propTypes from '@styled-system/prop-types';
import { removeSomeProps } from 'src/utils/componentHelpers';
import {
  colorCore,
  ellipsisCore,
  fontFamilyCore,
  fontSizeCore,
  fontStyleCore,
  letterSpacingCore,
  lineHeightCore,
  textAlignCore,
  textDecorationCore,
  typography,
} from 'src/utils/styledHelpers';
import {
  defaultTableCellProps,
  defaultTableHeadProps,
  defaultTableStylesBase,
  defaultTableStylesPropsToTrim,
  tableCellPropTypes,
  tableHeadPropTypes,
} from '../..';
 
const propsToTrim = [
  ...Object.keys(typography.propTypes),
  ...defaultTableStylesPropsToTrim,
  propTypes.fontWeight,
];
 
function StyledTableCellComponent(props) {
  const { children, tag, ...otherProps } = props;
  const Tag = tag;
  return <Tag {...removeSomeProps(otherProps, propsToTrim)}>{children}</Tag>;
}
 
StyledTableCellComponent.propTypes = {
  children: PropTypes.node,
  tag: PropTypes.node,
};
 
StyledTableCellComponent.defaultProps = {
  children: '',
  tag: 'td',
};
 
const StyledTableCell = styled(StyledTableCellComponent)`
  ${defaultTableStylesBase}
  ${colorCore}
  ${ellipsisCore}
  ${fontFamilyCore}
  ${fontSizeCore}
  ${fontStyleCore}
  ${fontWeight}
  ${letterSpacingCore}
  ${lineHeightCore}
  ${textAlignCore}
  ${textDecorationCore}
  &:hover .sort-icon {
    opacity: 0.3;
  }
`;
 
StyledTableCell.propTypes = {
  ...tableCellPropTypes,
};
 
StyledTableCell.defaultProps = {
  ...defaultTableCellProps,
};
 
function StyledTableHead(props) {
  const { children } = props;
  return <StyledTableCell {...props}>{children}</StyledTableCell>;
}
 
StyledTableHead.propTypes = {
  ...tableHeadPropTypes,
  children: PropTypes.node,
  tag: PropTypes.node,
};
 
StyledTableHead.defaultProps = {
  ...defaultTableHeadProps,
  children: '',
  tag: 'th',
};
 
export { StyledTableCell, StyledTableHead };