material-ui-pickers-fork/_shared/DateTextField.js

React components, that implements material design pickers for material-ui v1

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DateTextField = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));

var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));

var _MaskedInput = _interopRequireDefault(require("./MaskedInput"));

var _WithUtils = _interopRequireDefault(require("../_shared/WithUtils"));

var getDisplayDate = function getDisplayDate(props) {
  var utils = props.utils,
      value = props.value,
      format = props.format,
      invalidLabel = props.invalidLabel,
      emptyLabel = props.emptyLabel,
      labelFunc = props.labelFunc;
  var isEmpty = value === null;
  var date = utils.date(value);

  if (labelFunc) {
    return labelFunc(isEmpty ? null : date, invalidLabel);
  }

  if (isEmpty) {
    return emptyLabel;
  }

  return utils.isValid(date) ? utils.format(date, format) : invalidLabel;
};

var getError = function getError(value, props) {
  var utils = props.utils,
      maxDate = props.maxDate,
      minDate = props.minDate,
      disablePast = props.disablePast,
      disableFuture = props.disableFuture,
      maxDateMessage = props.maxDateMessage,
      minDateMessage = props.minDateMessage,
      invalidDateMessage = props.invalidDateMessage;

  if (!utils.isValid(value)) {
    // if null - do not show error
    if (utils.isNull(value)) {
      return '';
    }

    return invalidDateMessage;
  }

  if (maxDate && utils.isAfter(value, maxDate) || disableFuture && utils.isAfter(value, utils.endOfDay(utils.date()))) {
    return maxDateMessage;
  }

  if (minDate && utils.isBefore(value, minDate) || disablePast && utils.isBefore(value, utils.startOfDay(utils.date()))) {
    return minDateMessage;
  }

  return '';
};

var DateTextField =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inheritsLoose2.default)(DateTextField, _PureComponent);

  function DateTextField() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
    _this.state = DateTextField.updateState(_this.props);

    _this.commitUpdates = function (value) {
      var _this$props = _this.props,
          clearable = _this$props.clearable,
          onClear = _this$props.onClear,
          utils = _this$props.utils,
          format = _this$props.format,
          onError = _this$props.onError;

      if (value === '') {
        if (_this.props.value === null) {
          _this.setState(DateTextField.updateState(_this.props));
        } else if (clearable && onClear) {
          onClear();
        }

        return;
      }

      var oldValue = utils.date(_this.state.value);
      var newValue = utils.parse(value, format);
      var error = getError(newValue, _this.props);

      _this.setState({
        error: error,
        displayValue: value,
        value: error ? newValue : oldValue
      }, function () {
        if (!error && !utils.isEqual(newValue, oldValue)) {
          _this.props.onChange(newValue);
        }

        if (error && onError) {
          onError(newValue, error);
        }
      });
    };

    _this.handleBlur = function (e) {
      if (_this.props.keyboard) {
        e.preventDefault();
        e.stopPropagation();

        _this.commitUpdates(e.target.value);

        if (_this.props.onBlur) {
          _this.props.onBlur(e);
        }
      }
    };

    _this.handleChange = function (e) {
      var _this$props2 = _this.props,
          utils = _this$props2.utils,
          format = _this$props2.format,
          onInputChange = _this$props2.onInputChange;
      var parsedValue = utils.parse(e.target.value, format);

      if (onInputChange) {
        onInputChange(e);
      }

      _this.setState({
        displayValue: e.target.value,
        error: getError(parsedValue, _this.props)
      });
    };

    _this.handleFocus = function (e) {
      e.stopPropagation();
      e.preventDefault();

      if (!_this.props.keyboard) {
        _this.openPicker(e);
      }
    };

    _this.handleKeyPress = function (e) {
      if (e.key === 'Enter') {
        if (!_this.props.disableOpenOnEnter) {
          _this.openPicker(e);
        } else {
          _this.commitUpdates(e.target.value);
        }
      }
    };

    _this.openPicker = function (e) {
      var _this$props3 = _this.props,
          disabled = _this$props3.disabled,
          onClick = _this$props3.onClick;

      if (!disabled) {
        onClick(e);
      }
    };

    return _this;
  }

  var _proto = DateTextField.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (!this.props.utils.isEqual(this.props.value, prevProps.value) || prevProps.format !== this.props.format || prevProps.maxDate !== this.props.maxDate || prevProps.minDate !== this.props.minDate || prevProps.emptyLabel !== this.props.emptyLabel || prevProps.utils !== this.props.utils) {
      /* eslint-disable-next-line react/no-did-update-set-state */
      this.setState(DateTextField.updateState(this.props));
    }
  };

  _proto.render = function render() {
    var _this$props4 = this.props,
        adornmentPosition = _this$props4.adornmentPosition,
        classes = _this$props4.classes,
        clearable = _this$props4.clearable,
        disabled = _this$props4.disabled,
        disableFuture = _this$props4.disableFuture,
        disableOpenOnEnter = _this$props4.disableOpenOnEnter,
        disablePast = _this$props4.disablePast,
        emptyLabel = _this$props4.emptyLabel,
        format = _this$props4.format,
        InputAdornmentProps = _this$props4.InputAdornmentProps,
        InputProps = _this$props4.InputProps,
        invalidDateMessage = _this$props4.invalidDateMessage,
        invalidLabel = _this$props4.invalidLabel,
        keyboard = _this$props4.keyboard,
        keyboardIcon = _this$props4.keyboardIcon,
        labelFunc = _this$props4.labelFunc,
        mask = _this$props4.mask,
        maxDate = _this$props4.maxDate,
        maxDateMessage = _this$props4.maxDateMessage,
        minDate = _this$props4.minDate,
        minDateMessage = _this$props4.minDateMessage,
        onBlur = _this$props4.onBlur,
        onClear = _this$props4.onClear,
        onClick = _this$props4.onClick,
        TextFieldComponent = _this$props4.TextFieldComponent,
        utils = _this$props4.utils,
        value = _this$props4.value,
        onInputChange = _this$props4.onInputChange,
        other = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["adornmentPosition", "classes", "clearable", "disabled", "disableFuture", "disableOpenOnEnter", "disablePast", "emptyLabel", "format", "InputAdornmentProps", "InputProps", "invalidDateMessage", "invalidLabel", "keyboard", "keyboardIcon", "labelFunc", "mask", "maxDate", "maxDateMessage", "minDate", "minDateMessage", "onBlur", "onClear", "onClick", "TextFieldComponent", "utils", "value", "onInputChange"]);
    var _this$state = this.state,
        displayValue = _this$state.displayValue,
        error = _this$state.error;
    var localInputProps = {
      className: classes.input,
      inputComponent: _MaskedInput.default,
      inputProps: {
        mask: !keyboard ? null : mask,
        readOnly: !keyboard
      }
    };

    if (keyboard) {
      localInputProps[adornmentPosition + "Adornment"] = _react.default.createElement(_InputAdornment.default, (0, _extends2.default)({
        position: adornmentPosition
      }, InputAdornmentProps), _react.default.createElement(_IconButton.default, {
        disabled: disabled,
        onClick: this.openPicker
      }, _react.default.createElement(_Icon.default, null, " ", keyboardIcon, " ")));
    }

    return _react.default.createElement(TextFieldComponent, (0, _extends2.default)({
      onClick: this.handleFocus,
      error: !!error,
      helperText: error,
      onKeyPress: this.handleKeyPress,
      onBlur: this.handleBlur,
      disabled: disabled,
      value: displayValue
    }, other, {
      onChange: this.handleChange,
      InputProps: (0, _extends2.default)({}, localInputProps, InputProps)
    }));
  };

  return DateTextField;
}(_react.PureComponent);

exports.DateTextField = DateTextField;

DateTextField.updateState = function (props) {
  return {
    value: props.value,
    displayValue: getDisplayDate(props),
    error: getError(props.utils.date(props.value), props)
  };
};

DateTextField.propTypes = {
  classes: _propTypes.default.shape({}).isRequired,
  value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string, _propTypes.default.number, _propTypes.default.instanceOf(Date)]),
  minDate: _propTypes2.default.date,
  maxDate: _propTypes2.default.date,
  disablePast: _propTypes.default.bool,
  disableFuture: _propTypes.default.bool,
  format: _propTypes.default.string,
  onBlur: _propTypes.default.func,
  onChange: _propTypes.default.func.isRequired,
  onClear: _propTypes.default.func,
  onClick: _propTypes.default.func.isRequired,
  clearable: _propTypes.default.bool,
  utils: _propTypes.default.object.isRequired,
  disabled: _propTypes.default.bool,
  InputProps: _propTypes.default.shape(),

  /** Input mask, used in keyboard mode read more <a href="https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme">here</a> */
  mask: _propTypes.default.any,

  /** Error message, shown if date is less then minimal date */
  minDateMessage: _propTypes.default.node,

  /** Error message, shown if date is more then maximal date */
  maxDateMessage: _propTypes.default.node,

  /** Message displaying in text field, if date is invalid (doesn't work in keyboard mode) */
  invalidLabel: _propTypes.default.string,

  /** Message displaying in text field, if null passed (doesn't work in keyboard mode) */
  emptyLabel: _propTypes.default.string,

  /** Dynamic label generation function (date, invalidLabel) => string */
  labelFunc: _propTypes.default.func,

  /** On/off manual keyboard input mode */
  keyboard: _propTypes.default.bool,

  /** Icon displayed for open picker button in keyboard mode */
  keyboardIcon: _propTypes.default.node,

  /** enables/disable automatic opening of the picker when the user clicks enter */
  disableOpenOnEnter: _propTypes.default.bool,

  /** Message, appearing when date cannot be parsed */
  invalidDateMessage: _propTypes.default.node,

  /** Component that should replace the default Material-UI TextField */
  TextFieldComponent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),

  /** Props to pass to keyboard input adornment */
  InputAdornmentProps: _propTypes.default.object,

  /** Specifies position of keyboard button adornment */
  adornmentPosition: _propTypes.default.oneOf(['start', 'end']),

  /** Callback firing when date that applied in the keyboard is invalid  */
  onError: _propTypes.default.func,

  /** Callback firing on change input in keyboard mode */
  onInputChange: _propTypes.default.func
};
DateTextField.defaultProps = {
  disabled: false,
  invalidLabel: 'Unknown',
  emptyLabel: '',
  value: new Date(),
  labelFunc: undefined,
  format: undefined,
  InputProps: undefined,
  keyboard: false,
  mask: undefined,
  keyboardIcon: 'event',
  disableOpenOnEnter: false,
  invalidDateMessage: 'Invalid Date Format',
  clearable: false,
  onBlur: undefined,
  onClear: undefined,
  disablePast: false,
  disableFuture: false,
  onError: undefined,
  onInputChange: undefined,
  minDate: '1900-01-01',
  maxDate: '2100-01-01',
  minDateMessage: 'Date should not be before minimal date',
  maxDateMessage: 'Date should not be after maximal date',
  TextFieldComponent: _TextField.default,
  InputAdornmentProps: {},
  adornmentPosition: 'end'
};
var styles = {
  input: {
    alignItems: 'flex-end'
  }
};

var _default = (0, _withStyles.default)(styles)((0, _WithUtils.default)()(DateTextField));

exports.default = _default;