All files / src/components/DatatableCore/InputTypes DateTimePickerWrapper.js

100% Statements 21/21
100% Branches 10/10
100% Functions 7/7
100% Lines 21/21

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                                                  15x 15x               15x 15x 12x       12x 3x         15x 3x       3x 2x       15x 4x 4x 3x         47x 47x   47x                   1x             1x                                         16x                  
import React, { Component } from "react";
import equal from "fast-deep-equal";
import {
  ClickAwayListener,
  Tooltip,
  Zoom,
  IconButton,
  InputAdornment,
  withStyles
} from "@material-ui/core";
import { Event as CalendarIcon } from "@material-ui/icons";
import { DateTimePicker } from "material-ui-pickers";
import { checkValue, setValue } from "./PickersFunction";
import { customVariant } from "../../MuiTheme";
import { dateTimeFormatUser } from "../../../moment.config";
import {
  valueVerificationPropType,
  cellValPropType,
  labelPropType,
  classesPropType,
  requiredPropType
} from "../../../proptypes";
 
export class DateTimePickerWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      tooltipOpen: false,
      message: ""
    };
  }
 
  componentDidMount() {
    const { valueVerification } = this.props;
    if (valueVerification) {
      const newState = checkValue({
        ...this.props,
        mounting: true
      });
      if (!equal(this.state, newState)) {
        this.setState(newState);
      }
    }
  }
 
  onDateChange = date => {
    const newState = setValue({
      ...this.props,
      date
    });
    if (!equal(this.state, newState)) {
      this.setState(newState);
    }
  };
 
  toggleTooltip = open => {
    const { error } = this.state;
    if (error) {
      this.setState({ tooltipOpen: open });
    }
  };
 
  render() {
    const { cellVal, classes, label, required } = this.props;
    const { tooltipOpen, message, error } = this.state;
 
    return (
      <Tooltip
        open={tooltipOpen}
        classes={{
          tooltip: classes.errorTooltip
        }}
        title={message}
        TransitionComponent={Zoom}
        interactive
      >
        <ClickAwayListener onClickAway={() => this.toggleTooltip(false)}>
          <DateTimePicker
            clearable
            required={required}
            label={label}
            error={error}
            ampm={dateTimeFormatUser[dateTimeFormatUser.length - 1] === "A"}
            onOpen={() => this.setState({ tooltipOpen: false })}
            format={dateTimeFormatUser}
            InputProps={{
              endAdornment: (
                <InputAdornment position="start">
                  <IconButton>
                    <CalendarIcon />
                  </IconButton>
                </InputAdornment>
              )
            }}
            helperText={null}
            value={cellVal === "" ? null : cellVal}
            onChange={this.onDateChange}
          />
        </ClickAwayListener>
      </Tooltip>
    );
  }
}
 
DateTimePickerWrapper.propTypes = {
  required: requiredPropType,
  label: labelPropType,
  classes: classesPropType.isRequired,
  cellVal: cellValPropType.isRequired,
  valueVerification: valueVerificationPropType
};
 
export default withStyles(customVariant)(DateTimePickerWrapper);