All files / buffer-web-components/TableCell index.jsx

100% Statements 12/12
100% Branches 2/2
100% Functions 4/4
100% Lines 12/12
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          3x           106x           106x                     3x             3x                 106x 106x     106x 105x           106x       4x 4x                  
import React from 'react';
import PropTypes from 'prop-types';
import { calculateStyles } from '@bufferapp/components/lib/utils';
import PseudoClassComponent from '@bufferapp/components/PseudoClassComponent';
 
const TableCellStateless = ({
  children,
  hovered,
  onMouseEnter,
  onMouseLeave,
}) => {
  const style = calculateStyles({
    default: {},
    hovered: {},
  }, {
    hovered,
  });
  return (
    <div
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={style}
    >
      {children}
    </div>
  );
};
 
TableCellStateless.defaultProps = {
  children: '',
  hovered: false,
  onMouseEnter: undefined,
  onMouseLeave: undefined,
};
 
TableCellStateless.propTypes = {
  children: PropTypes.node,
  hovered: PropTypes.bool,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
};
 
class TableCell extends PseudoClassComponent {
  render() {
    const { children, ...rest } = this.props;
    let hoveredChildren = children;
 
    // string as children isn't clonable
    if (React.isValidElement(children)) {
      hoveredChildren = React.cloneElement(
        children,
        { hovered: this.state.hovered },
      );
    }
 
    return (
      <TableCellStateless
        {...rest}
        hovered={this.state.hovered}
        onMouseEnter={() => this.handleMouseEnter()}
        onMouseLeave={() => this.handleMouseLeave()}
      >
        {hoveredChildren}
      </TableCellStateless>
    );
  }
}
 
export default TableCell;