All files / src/components/DatatableCore/Body BodyCell.js

96.97% Statements 32/33
86.67% Branches 13/15
85.71% Functions 6/7
96.97% Lines 32/33

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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149                                                    169x                     169x 169x 3x   169x       169x                 169x 169x 169x                         169x 2x   167x   26x 26x   26x 26x   1x 1x   1x 1x   22x 22x     91x 91x       169x     11x                               169x       7x                       7x 160x           7x 160x                    
import React, { Component } from "react";
import { connect } from "react-redux";
import twidth from "text-width";
import { Tooltip, Zoom } from "@material-ui/core";
import { setRowEdited as setRowEditedAction } from "../../../redux/actions/datatableActions";
import {
  columnPropType,
  cellValPropType,
  customDataTypesPropType,
  widthPropType,
  rowIdPropType,
  editingPropType,
  setRowEditedPropType,
  onClickPropType,
  fontPropType
} from "../../../proptypes";
import {
  NumberType,
  TextType,
  BooleanType,
  DateType,
  TimeType,
  DateTimeType
} from "../CellTypes";
 
export class BodyCell extends Component {
  buildCell = () => {
    const {
      cellVal,
      column,
      customDataTypes,
      width,
      font,
      rowId,
      editing,
      setRowEdited,
      onClick
    } = this.props;
    const customDatatype = customDataTypes.find(
      cd => cd.dataType === column.dataType
    );
    const textWidth = twidth(cellVal, {
      family: font,
      size: 15
    });
    const overlap = textWidth + 5 > Number(width.split("px")[0]);
    let cellContent;
    const {
      inputType,
      dataType,
      values,
      valueVerification,
      dateFormat,
      mask
    } = column;
    const columnId = column.id;
    const properties = {
      cellVal,
      editing,
      inputType,
      values,
      rowId,
      columnId,
      valueVerification,
      dateFormat,
      mask,
      setRowEdited
    };
 
    if (customDatatype && !editing) {
      cellContent = customDatatype.component(cellVal, width);
    } else {
      switch (dataType) {
        case "number":
          cellContent = NumberType(properties);
          break;
        case "boolean":
          cellContent = BooleanType(properties);
          break;
        case "date":
          cellContent = DateType(properties);
          break;
        case "time":
          cellContent = TimeType(properties);
          break;
        case "dateTime":
          cellContent = DateTimeType(properties);
          break;
        case "text":
        default:
          cellContent = TextType(properties);
          break;
      }
    }
 
    return (
      <div
        className={`Table-Cell ${column.id}`}
        onClick={() => onClick(cellVal)}
        onKeyDown={this.handleKeyDown}
        role="presentation"
      >
        <Tooltip
          title={overlap && !editing ? cellVal : ""}
          TransitionComponent={Zoom}
          interactive
        >
          <div style={{ width }}>{cellContent}</div>
        </Tooltip>
      </div>
    );
  };
 
  render() {
    return this.buildCell();
  }
}
 
BodyCell.propTypes = {
  cellVal: cellValPropType,
  column: columnPropType.isRequired,
  customDataTypes: customDataTypesPropType.isRequired,
  width: widthPropType.isRequired,
  rowId: rowIdPropType.isRequired,
  editing: editingPropType.isRequired,
  setRowEdited: setRowEditedPropType,
  onClick: onClickPropType,
  font: fontPropType
};
 
const mapStateToProps = state => {
  return {
    customDataTypes: state.customComponentsReducer.customDataTypes,
    font: state.datatableReducer.font
  };
};
 
const mapDispatchToProps = dispatch => {
  return {
    setRowEdited: ({ columnId, rowId, newValue, error }) =>
      dispatch(setRowEditedAction({ columnId, rowId, newValue, error }))
  };
};
 
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BodyCell);