react-cm-ui/core/inputs/datePickerDeprecated/datePickerDeprecatedInput.js

React UI for Healthy Church

"use strict";

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

var _lodash = _interopRequireDefault(require("lodash"));

var _classnames = _interopRequireDefault(require("classnames"));

var _momentTimezone = _interopRequireDefault(require("moment-timezone"));

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

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

var _datePickerUtils = _interopRequireDefault(require("../../utils/datePickerUtils"));

var _dateUtils = _interopRequireDefault(require("../../utils/dateUtils"));

var _grid = _interopRequireDefault(require("../../layout/grid"));

var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));

var _input = _interopRequireDefault(require("../input"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var propTypes = {
  className: _propTypes["default"].string,
  date: _propTypes["default"].shape({}),
  dateEnd: _propTypes["default"].shape({}),
  dateFormat: _propTypes["default"].string,
  dateSecondaryEnd: _propTypes["default"].shape({}),
  dateSecondaryStart: _propTypes["default"].shape({}),
  dateStart: _propTypes["default"].shape({}),
  disabled: _propTypes["default"].bool,
  errorMessage: _propTypes["default"].string,
  excludeDates: _propTypes["default"].array,
  filterDates: _propTypes["default"].func,
  hasValue: _propTypes["default"].func.isRequired,
  id: _propTypes["default"].string,
  includeDates: _propTypes["default"].array,
  locale: _propTypes["default"].string,
  maxDate: _propTypes["default"].shape({}),
  minDate: _propTypes["default"].shape({}),
  mode: _propTypes["default"].string,
  onBlur: _propTypes["default"].func,
  onClick: _propTypes["default"].func,
  onDone: _propTypes["default"].func,
  onFocus: _propTypes["default"].func,
  onSelect: _propTypes["default"].func,
  open: _propTypes["default"].bool,
  required: _propTypes["default"].bool,
  tabIndex: _propTypes["default"].number,
  type: _propTypes["default"].string,
  uxMode: _propTypes["default"].string
};

var DatePickerInput = /*#__PURE__*/function (_React$Component) {
  _inherits(DatePickerInput, _React$Component);

  var _super = _createSuper(DatePickerInput);

  function DatePickerInput(props) {
    var _this;

    _classCallCheck(this, DatePickerInput);

    _this = _super.call(this, props);
    _this.state = {
      hasAnError: false,
      listensForErrors: !_lodash["default"].isUndefined(props.required),
      maybeDate: _this.safeDateFormat(props.date, props.locale),
      maybeDateRange: {
        dateEnd: _this.safeDateFormat(props.dateEnd, props.locale),
        dateSecondaryEnd: _this.safeDateFormat(props.dateSecondaryEnd, props.locale),
        dateSecondaryStart: _this.safeDateFormat(props.dateSecondaryStart, props.locale),
        dateStart: _this.safeDateFormat(props.dateStart, props.locale)
      }
    };
    _this.onErrorRef = _this.onError.bind(_assertThisInitialized(_this));
    _this._dateFormats = _this.getAllowedDateFormats('MM/DD/YYYY');
    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
    _this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(DatePickerInput, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.state.listensForErrors) {
        ParsleyFormStore.addChangeListener(this.onErrorRef);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _this$props = this.props,
          date = _this$props.date,
          dateStart = _this$props.dateStart,
          dateEnd = _this$props.dateEnd,
          dateSecondaryStart = _this$props.dateSecondaryStart,
          dateSecondaryEnd = _this$props.dateSecondaryEnd,
          locale = _this$props.locale;

      if (!_datePickerUtils["default"].isSameDay(date, prevProps.date) || !_datePickerUtils["default"].isSameDay(dateStart, prevProps.dateStart) || !_datePickerUtils["default"].isSameDay(dateEnd, prevProps.dateEnd) || !_datePickerUtils["default"].isSameDay(dateSecondaryStart, prevProps.dateSecondaryStart) || !_datePickerUtils["default"].isSameDay(dateSecondaryEnd, prevProps.dateSecondaryEnd) || !_lodash["default"].isEqual(locale, prevProps.locale)) {
        this.setState({
          maybeDate: this.safeDateFormat(date, locale),
          maybeDateRange: {
            dateEnd: this.safeDateFormat(dateEnd, locale),
            dateSecondaryEnd: this.safeDateFormat(dateSecondaryEnd, locale),
            dateSecondaryStart: this.safeDateFormat(dateSecondaryStart, locale),
            dateStart: this.safeDateFormat(dateStart, locale)
          }
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.state.listensForErrors) {
        ParsleyFormStore.removeChangeListener(this.onErrorRef);
      }
    }
  }, {
    key: "onBlur",
    value: function onBlur(value) {
      var _this$props2 = this.props,
          date = _this$props2.date,
          dateEnd = _this$props2.dateEnd,
          dateStart = _this$props2.dateStart,
          locale = _this$props2.locale,
          type = _this$props2.type;
      var isSingleDateOrServicePeriod = type === 'singleDate' || type === 'servicePeriod';
      var isDateRange = type === 'dateRange';

      if (!_lodash["default"].isUndefined(this.props.onBlur)) {
        this.props.onBlur(event);
      }

      this.props.hasValue(value);
      this.setState({
        maybeDate: isSingleDateOrServicePeriod ? this.safeDateFormat(date, locale) : this.state.maybeDate,
        maybeDateRange: isDateRange ? {
          dateEnd: this.safeDateFormat(dateEnd, locale),
          dateStart: this.safeDateFormat(dateStart, locale)
        } : this.state.maybeDateRange
      });
    }
  }, {
    key: "onChange",
    value: function onChange(dateType, value) {
      var _this2 = this;

      var _this$props3 = this.props,
          type = _this$props3.type,
          locale = _this$props3.locale,
          uxMode = _this$props3.uxMode;

      var newLocale = locale || _momentTimezone["default"].locale();

      if (uxMode === 'input' && type === 'dateRange') {
        var datesArray = value ? value.split('-') : '';

        if (value !== '' && value !== '__/__/____ - __/__/____') {
          _lodash["default"].map(datesArray, function (date, index) {
            var newDate = (0, _momentTimezone["default"])(date.trim(), _this2._dateFormats, newLocale, true);
            var dateType = index === 0 ? 'dateStart' : index === 1 ? 'dateEnd' : null;

            if (newDate.isValid() && (!_datePickerUtils["default"].isDayDisabled(newDate, _this2.props) && index === 0 && !_datePickerUtils["default"].isSameDay(_this2.props.dateStart, newDate) || index === 1 && !_datePickerUtils["default"].isSameDay(_this2.props.dateEnd, newDate))) {
              _this2.props.onSelect(newDate, dateType);
            }
          });
        } else {
          this.props.onSelect(null, null, true);
        }

        this.setState({
          maybeDateRange: {
            dateEnd: value ? datesArray[1].trim() : '',
            dateStart: value ? datesArray[0].trim() : ''
          }
        });
      } else if (uxMode === 'calendar' || uxMode === 'input' && type === 'singleDate') {
        var date = (0, _momentTimezone["default"])(value, this._dateFormats, newLocale, true);

        if (date.isValid() && !_datePickerUtils["default"].isDayDisabled(date, this.props)) {
          this.props.onSelect(date);
        } else if (value === '' || value === '__/__/____') {
          this.props.onSelect(null, null, true);
        }

        if (uxMode === 'input') {
          this.setState({
            maybeDate: value
          });
        }

        if (uxMode === 'calendar') {
          this.setState({
            maybeDateRange: {
              dateEnd: dateType === 'dateEnd' ? value : this.state.maybeDateRange.dateEnd,
              dateStart: dateType === 'dateStart' ? value : this.state.maybeDateRange.dateStart
            }
          });
        }
      }

      this.props.hasValue(value);
    }
  }, {
    key: "onClick",
    value: function onClick(dateField) {
      if (_lodash["default"].isFunction(this.props.onClick)) {
        this.props.onClick();
      }
    }
  }, {
    key: "onError",
    value: function onError() {
      this.setState({
        'hasAnError': ParsleyFormStore.inputHasError(this.props.id)
      });
    }
  }, {
    key: "onFocus",
    value: function onFocus() {
      if (_lodash["default"].isFunction(this.props.onFocus)) {
        this.props.onFocus();
      }
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(event) {
      if (event.keyCode === 9 || event.keyCode === 13) {
        this.props.onDone();
      }
    }
  }, {
    key: "getAllowedDateFormats",
    value: function getAllowedDateFormats(specifiedFormat) {
      var formats = _dateUtils["default"].getAllowedDateFormats();

      if (_lodash["default"].indexOf(formats, specifiedFormat) < 0) {
        formats.unshift(specifiedFormat);
      }

      return formats;
    }
  }, {
    key: "safeDateFormat",
    value: function safeDateFormat(date, locale) {
      if (date && date.isValid()) {
        return date.clone().locale(locale || _momentTimezone["default"].locale()).format('MM/DD/YYYY');
      }

      if (_lodash["default"].isNull(date)) {
        return null;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          className = _this$props4.className,
          open = _this$props4.open,
          type = _this$props4.type,
          uxMode = _this$props4.uxMode;
      var disabled = this.props.disabled || type === 'servicePeriod' || type === 'servicePeriodRangeEnd' || type === 'servicePeriodRangeStart';
      var containerClasses = (0, _classnames["default"])('date-picker-deprecated-input', {
        'date-picker-input-disabled': disabled,
        'date-picker-input-type-date-range': type === 'dateRange',
        'date-picker-input-type-service-period': type === 'servicePeriod',
        'date-picker-input-type-service-period-range': type === 'servicePeriodRange',
        'date-picker-input-type-single-date': type === 'singleDate',
        'ignore-react-onclickoutside': open
      }, className);
      var mask, placeholder, value;

      if (uxMode === 'input' && type === 'dateRange' || type === 'servicePeriod' || type === 'servicePeriodRangeEnd' || type === 'servicePeriodRangeStart') {
        mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
        placeholder = 'mm/dd/yyyy - mm/dd/yyyy';

        if (type === 'servicePeriodRangeEnd') {
          value = "".concat(this.state.maybeDateRange.dateSecondaryStart, " - ").concat(this.state.maybeDateRange.dateSecondaryEnd);
        } else {
          value = "".concat(this.state.maybeDateRange.dateStart, " - ").concat(this.state.maybeDateRange.dateEnd);
        }
      } else {
        mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
        placeholder = 'mm/dd/yyyy';
        value = this.state.maybeDate;
      }

      if (uxMode === 'input') {
        return /*#__PURE__*/_react["default"].createElement(_input["default"], {
          autoComplete: "off",
          className: containerClasses,
          "data-parsley-error-message": this.props.errorMessage,
          disabled: disabled,
          guide: true,
          icon: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            color: open ? 'highlight' : null,
            compact: true,
            onClick: this.onClick,
            type: "calendar"
          }),
          id: this.props.id,
          keepCharPositions: true,
          mask: mask,
          onBlur: this.onBlur,
          onChange: this.onChange.bind(this, 'date'),
          onClick: this.onClick,
          onFocus: this.onFocus,
          onKeyDown: this.onKeyDown,
          placeholder: placeholder,
          ref: "input",
          required: this.props.required,
          tabIndex: this.props.tabIndex,
          type: "text",
          value: value
        });
      } else if (uxMode === 'calendar') {
        return /*#__PURE__*/_react["default"].createElement(_grid["default"], {
          columns: 2,
          spacing: 2,
          style: {
            marginBottom: 5,
            marginTop: 7
          }
        }, /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, null, /*#__PURE__*/_react["default"].createElement(_input["default"], {
          autoComplete: "off",
          className: containerClasses,
          "data-parsley-error-message": this.props.errorMessage,
          disabled: disabled,
          guide: true,
          id: this.props.id,
          keepCharPositions: true,
          label: "From",
          mask: mask,
          onBlur: this.onBlur,
          onChange: this.onChange.bind(this, 'dateStart'),
          onClick: this.onClick,
          onFocus: this.onFocus,
          placeholder: placeholder,
          required: this.props.required,
          tabIndex: this.props.tabIndex,
          type: "text",
          value: this.state.maybeDateRange.dateStart
        })), /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, null, /*#__PURE__*/_react["default"].createElement(_input["default"], {
          autoComplete: "off",
          className: containerClasses,
          "data-parsley-error-message": this.props.errorMessage,
          disabled: disabled,
          guide: true,
          id: this.props.id,
          keepCharPositions: true,
          label: "To",
          mask: mask,
          onBlur: this.onBlur,
          onChange: this.onChange.bind(this, 'dateEnd'),
          onClick: this.onClick,
          onFocus: this.onFocus,
          placeholder: placeholder,
          ref: "inputEnd",
          required: this.props.required,
          tabIndex: this.props.tabIndex,
          type: "text",
          value: this.state.maybeDateRange.dateEnd
        })));
      }
    }
  }]);

  return DatePickerInput;
}(_react["default"].Component);

DatePickerInput.propTypes = propTypes;
var _default = DatePickerInput;
exports["default"] = _default;