All files / src/components/DatatableCore CellTypes.js

100% Statements 39/39
100% Branches 16/16
100% Functions 6/6
100% Lines 39/39

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                      14x       14x 48x 48x 48x 22x   26x 26x     14x       14x 152x 152x 152x 62x   90x     14x       14x 48x 48x 22x   26x             14x       14x 10x 10x 8x           2x     14x       14x 10x 10x 8x         2x     14x       14x 44x 44x 22x         22x            
import React from "react";
import styled from "styled-components";
import { Checkbox } from "@material-ui/core";
import {
  moment,
  dateFormatUser,
  timeFormatUser,
  dateTimeFormatUser
} from "../../moment.config";
import CreateInput from "./InputTypes/CreateInput";
 
export const NumberWrapper = styled.div`
  text-align: center;
`;
 
export const NumberType = properties => {
  const { cellVal, editing } = properties;
  const type = "number";
  if (editing) {
    return CreateInput({ ...properties, type });
  }
  const formatVal = cellVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  return <NumberWrapper>{formatVal}</NumberWrapper>;
};
 
export const TextWrapper = styled.div`
  text-align: left;
`;
 
export const TextType = properties => {
  const { cellVal, editing } = properties;
  const type = "text";
  if (editing) {
    return CreateInput({ ...properties, type });
  }
  return <TextWrapper>{cellVal}</TextWrapper>;
};
 
export const BooleanWrapper = styled.div`
  text-align: center;
`;
 
export const BooleanType = properties => {
  const { editing, cellVal, inputType = "boolean" } = properties;
  if (editing) {
    return CreateInput({ ...properties, inputType });
  }
  return (
    <BooleanWrapper>
      <Checkbox checked={cellVal} color="primary" disabled />
    </BooleanWrapper>
  );
};
 
export const DateWrapper = styled.div`
  text-align: left;
`;
 
export const DateType = properties => {
  const { cellVal, editing, inputType = "datePicker" } = properties;
  if (editing) {
    return CreateInput({
      ...properties,
      inputType
    });
  }
 
  return <DateWrapper>{moment(cellVal).format(dateFormatUser)}</DateWrapper>;
};
 
export const TimeWrapper = styled.div`
  text-align: left;
`;
 
export const TimeType = properties => {
  const { cellVal, editing, inputType = "timePicker" } = properties;
  if (editing) {
    return CreateInput({
      ...properties,
      inputType
    });
  }
  return <TimeWrapper>{moment(cellVal).format(timeFormatUser)}</TimeWrapper>;
};
 
export const DateTimeWrapper = styled.div`
  text-align: left;
`;
 
export const DateTimeType = properties => {
  const { cellVal, editing, inputType = "dateTimePicker" } = properties;
  if (editing) {
    return CreateInput({
      ...properties,
      inputType
    });
  }
  return (
    <DateTimeWrapper>
      {moment(cellVal).format(dateTimeFormatUser)}
    </DateTimeWrapper>
  );
};