react-cm-ui/core/inputs/datePickerDeprecated/datePickerDeprecated.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 _reactDom = _interopRequireDefault(require("react-dom"));

var _reactTether = _interopRequireDefault(require("react-tether"));

var _datePickerDeprecatedCalendar = _interopRequireDefault(require("./datePickerDeprecatedCalendar"));

var _datePickerDeprecatedInput = _interopRequireDefault(require("./datePickerDeprecatedInput"));

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

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 DatePicker = /*#__PURE__*/function (_React$Component) {
  _inherits(DatePicker, _React$Component);

  var _super = _createSuper(DatePicker);

  function DatePicker(props) {
    var _this;

    _classCallCheck(this, DatePicker);

    _this = _super.call(this, props);
    _this.state = {
      inputHasValue: false,
      isCalendarOpen: false,
      presetLink: 'open'
    };
    return _this;
  }

  _createClass(DatePicker, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      return !_lodash["default"].isEqual(this.props, nextProps) || !_lodash["default"].isEqual(this.state, nextState);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          buttonClear = _this$props.buttonClear,
          className = _this$props.className,
          classNameInput = _this$props.classNameInput,
          date = _this$props.date,
          dateEnd = _this$props.dateEnd,
          dateFormat = _this$props.dateFormat,
          dateSecondaryEnd = _this$props.dateSecondaryEnd,
          dateSecondaryStart = _this$props.dateSecondaryStart,
          dateStart = _this$props.dateStart,
          disabled = _this$props.disabled,
          error = _this$props.error,
          events = _this$props.events,
          excludeDates = _this$props.excludeDates,
          filterDates = _this$props.filterDates,
          id = _this$props.id,
          includeDates = _this$props.includeDates,
          locale = _this$props.locale,
          maxDate = _this$props.maxDate,
          minDate = _this$props.minDate,
          required = _this$props.required,
          tabIndex = _this$props.tabIndex,
          type = _this$props.type,
          uxMode = _this$props.uxMode;
      var containerClasses = (0, _classnames["default"])('ui', 'date-picker-deprecated', className);

      var calendarJSX = /*#__PURE__*/_react["default"].createElement(_datePickerDeprecatedCalendar["default"], {
        buttonClear: buttonClear,
        date: this._convertTimestamp(date),
        dateEnd: this._convertTimestamp(dateEnd),
        dateSecondaryEnd: this._convertTimestamp(dateSecondaryEnd),
        dateSecondaryStart: this._convertTimestamp(dateSecondaryStart),
        dateStart: this._convertTimestamp(dateStart),
        events: events,
        excludeDates: excludeDates,
        filterDates: filterDates,
        includeDates: includeDates,
        locale: locale,
        maxDate: maxDate,
        minDate: minDate,
        onApplyClick: this.props.onApplyClick,
        onClearClick: this._onClearClick.bind(this),
        onClose: this._onCalendarClickOutside.bind(this),
        onMonthChange: this._onMonthChange.bind(this),
        onSelect: this._onSelect.bind(this),
        ref: "calendar",
        type: type || 'singleDate',
        uxMode: uxMode
      });

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses
      }, uxMode === 'input' ? /*#__PURE__*/_react["default"].createElement(_reactTether["default"], {
        attachment: 'top left',
        classPrefix: "date-picker-deprecated-tether",
        constraints: [{
          to: 'window',
          attachment: 'together'
        }],
        renderElement: function renderElement(ref) {
          return _this2.state.isCalendarOpen && /*#__PURE__*/_react["default"].createElement("div", {
            ref: ref
          }, calendarJSX);
        },
        renderTarget: function renderTarget(ref) {
          return /*#__PURE__*/_react["default"].createElement("div", {
            ref: ref
          }, /*#__PURE__*/_react["default"].createElement(_datePickerDeprecatedInput["default"], {
            className: classNameInput,
            date: _this2._convertTimestamp(date),
            dateEnd: _this2._convertTimestamp(dateEnd),
            dateFormat: dateFormat,
            dateSecondaryEnd: _this2._convertTimestamp(dateSecondaryEnd),
            dateSecondaryStart: _this2._convertTimestamp(dateSecondaryStart),
            dateStart: _this2._convertTimestamp(dateStart),
            disabled: disabled,
            error: error,
            excludeDates: excludeDates,
            filterDates: filterDates,
            hasValue: _this2._hasValue.bind(_this2),
            id: id,
            includeDates: includeDates,
            locale: locale,
            maxDate: maxDate,
            minDate: minDate,
            onBlur: _this2._onInputBlur.bind(_this2),
            onClick: _this2._onInputClick.bind(_this2),
            onDone: _this2._setOpen.bind(_this2),
            onFocus: _this2._onInputFocus.bind(_this2),
            onSelect: _this2._onSelect.bind(_this2),
            open: _this2.state.isCalendarOpen,
            ref: "input",
            required: required,
            setSelected: _this2._setSelected.bind(_this2),
            tabIndex: tabIndex,
            type: type || 'singleDate',
            uxMode: uxMode
          }));
        },
        targetAttachment: 'bottom left',
        targetOffset: '10px 0'
      }) : /*#__PURE__*/_react["default"].createElement("div", null, type === 'dateRange' ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("ul", {
        className: "date-picker date-picker-presets"
      }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("a", {
        className: (0, _classnames["default"])('font-size-xsmall', {
          'color-static': this.state.presetLink !== 'open',
          'color-text': this.state.presetLink === 'open',
          'text-decoration-underline': this.state.presetLink === 'open'
        }),
        onClick: this._onPresetClick.bind(this, 'open')
      }, "Open")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("a", {
        className: (0, _classnames["default"])('font-size-xsmall', {
          'color-static': this.state.presetLink !== 'pastWeek',
          'color-text': this.state.presetLink === 'pastWeek',
          'text-decoration-underline': this.state.presetLink === 'pastWeek'
        }),
        onClick: this._onPresetClick.bind(this, 'pastWeek')
      }, "Past Week")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("a", {
        className: (0, _classnames["default"])('font-size-xsmall', {
          'color-static': this.state.presetLink !== 'monthToDate',
          'color-text': this.state.presetLink === 'monthToDate',
          'text-decoration-underline': this.state.presetLink === 'monthToDate'
        }),
        onClick: this._onPresetClick.bind(this, 'monthToDate')
      }, "Past 30 Days")), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("a", {
        className: (0, _classnames["default"])('font-size-xsmall', {
          'color-static': this.state.presetLink !== 'custom',
          'color-text': this.state.presetLink === 'custom',
          'text-decoration-underline': this.state.presetLink === 'custom'
        }),
        onClick: this._onPresetClick.bind(this, 'custom')
      }, "Custom"))), /*#__PURE__*/_react["default"].createElement(_datePickerDeprecatedInput["default"], {
        dateEnd: this._convertTimestamp(dateEnd),
        dateStart: this._convertTimestamp(dateStart),
        disabled: disabled,
        hasValue: this._hasValue.bind(this),
        locale: locale,
        onClick: this._onInputClick.bind(this),
        onSelect: this._onSelect.bind(this),
        open: this.state.isCalendarOpen,
        type: type,
        uxMode: uxMode
      })) : null, type === 'servicePeriodRange' ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
        className: "font-size-xxsmall color-static",
        style: {
          margin: 0
        }
      }, "Start Service Period"), /*#__PURE__*/_react["default"].createElement("p", {
        style: {
          margin: '0 0 22px'
        }
      }, dateStart && dateEnd ? /*#__PURE__*/_react["default"].createElement("span", null, "".concat(this._convertTimestamp(dateStart).locale(locale || _momentTimezone["default"].locale()).format('MM/DD/YYYY'), " - ").concat(this._convertTimestamp(dateEnd).locale(locale || _momentTimezone["default"].locale()).format('MM/DD/YYYY'))) : /*#__PURE__*/_react["default"].createElement("span", null, "mm/dd/yyyy - mm/dd/yyyy")), /*#__PURE__*/_react["default"].createElement("p", {
        className: "font-size-xxsmall color-static",
        style: {
          margin: 0
        }
      }, "End Service Period"), /*#__PURE__*/_react["default"].createElement("p", {
        style: {
          margin: '0 0 22px'
        }
      }, dateSecondaryStart && dateSecondaryEnd ? /*#__PURE__*/_react["default"].createElement("span", null, "".concat(this._convertTimestamp(dateSecondaryStart).locale(locale || _momentTimezone["default"].locale()).format('MM/DD/YYYY'), " - ").concat(this._convertTimestamp(dateSecondaryEnd).locale(locale || _momentTimezone["default"].locale()).format('MM/DD/YYYY'))) : /*#__PURE__*/_react["default"].createElement("span", null, "mm/dd/yyyy - mm/dd/yyyy"))) : null, calendarJSX));
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      console.warn('<DatePicker /> has been deprecated. This will be removed in the next major version of react-cm-ui. Please use <DatePickerInput />: http://cm-ui-docs.saddleback.com/modules/date-picker-input or use <DatePickerCalendar />: http://cm-ui-docs.saddleback.com/modules/date-picker-calendar');
    }
  }, {
    key: "_convertTimestamp",
    value: function _convertTimestamp(timestamp) {
      return !_lodash["default"].isNil(timestamp) ? _momentTimezone["default"].unix(timestamp).utc() : null;
    }
  }, {
    key: "_hasValue",
    value: function _hasValue(date) {
      this.setState({
        inputHasValue: !_lodash["default"].isNull(date) && !_lodash["default"].isEmpty(date)
      });
    }
  }, {
    key: "_onCalendarClickOutside",
    value: function _onCalendarClickOutside(event) {
      this._setOpen(false);

      this.props.onClickOutside ? this.props.onClickOutside() : null;
    }
  }, {
    key: "_onClearClick",
    value: function _onClearClick(event) {
      var type = this.props.type;

      if (type === 'dateRange') {
        this._onPresetClick('open');
      } else if (type === 'servicePeriodRange' || type === 'servicePeriodRangeEnd' || type === 'servicePeriodRangeStart') {
        this.props.onChange({
          dateFirstChoice: null,
          dateSecondChoice: null
        });
      } else {
        this._setSelected(null);
      }
    }
  }, {
    key: "_onInputBlur",
    value: function _onInputBlur(event) {
      if (this.state.isCalendarOpen) {
        _reactDom["default"].findDOMNode(this.refs.input).focus();
      } else {
        if (_lodash["default"].isFunction(this.props.onBlur)) {
          this.props.onBlur(event);
        }
      }
    }
  }, {
    key: "_onInputClick",
    value: function _onInputClick() {
      this._setOpen(true);
    }
  }, {
    key: "_onInputFocus",
    value: function _onInputFocus(event) {
      if (_lodash["default"].isFunction(this.props.onFocus)) {
        this.props.onFocus(event);
      }

      this._setOpen(true);
    }
  }, {
    key: "_onMonthChange",
    value: function _onMonthChange(month, year) {
      if (typeof this.props.onMonthChange === 'function') {
        this.props.onMonthChange(month, year);
      }
    }
  }, {
    key: "_onPresetClick",
    value: function _onPresetClick(type) {
      var activePreset;

      if (type === 'open') {
        activePreset = 'open';
        this.props.onChange({
          dateEnd: null,
          dateStart: null
        });
      } else if (type === 'pastWeek') {
        activePreset = 'pastWeek';
        this.props.onChange({
          dateEnd: (0, _momentTimezone["default"])().subtract(1, 'day').unix(),
          dateStart: (0, _momentTimezone["default"])().subtract(1, 'week').unix()
        });
      } else if (type === 'monthToDate') {
        activePreset = 'monthToDate';
        this.props.onChange({
          dateEnd: (0, _momentTimezone["default"])().unix(),
          dateStart: (0, _momentTimezone["default"])().subtract(1, 'month').unix()
        });
      } else if (type === 'custom') {
        activePreset = 'custom';
      }

      this.setState({
        presetLink: activePreset
      });
    }
  }, {
    key: "_onSelect",
    value: function _onSelect(date, dateType, clear) {
      var _this$props2 = this.props,
          dateEnd = _this$props2.dateEnd,
          dateSecondaryEnd = _this$props2.dateSecondaryEnd,
          dateSecondaryStart = _this$props2.dateSecondaryStart,
          dateStart = _this$props2.dateStart,
          type = _this$props2.type;

      if (type === 'dateRange') {
        var dateObj = {
          dateEnd: dateEnd,
          dateStart: dateStart
        };
        var isDateBeforeDateStart = (_lodash["default"].isUndefined(dateType) || dateType === 'dateStart') && date.isBefore(this._convertTimestamp(dateStart));
        var isDateBeforeDateEnd = (_lodash["default"].isUndefined(dateType) || dateType === 'dateEnd') && date.isBefore(this._convertTimestamp(dateEnd));
        var isDateAfterDateEnd = (_lodash["default"].isUndefined(dateType) || dateType === 'dateEnd') && date.isAfter(this._convertTimestamp(dateEnd));

        if (!clear && !dateStart || dateStart && !dateEnd && isDateBeforeDateStart || dateStart && dateEnd && isDateBeforeDateStart || dateType === 'dateStart' && dateStart && dateEnd && date.isBefore(this._convertTimestamp(dateEnd))) {
          dateObj.dateStart = date.unix();
          this.props.onChange(dateObj);
          this.setState({
            presetLink: 'custom'
          });
        }

        if (!clear && !isDateBeforeDateStart && (dateStart && !dateEnd || dateStart && dateEnd && isDateBeforeDateEnd || dateStart && dateEnd && isDateAfterDateEnd)) {
          dateObj.dateEnd = date.unix();
          this.props.onChange(dateObj);
          this.setState({
            presetLink: 'custom'
          });
        } // Reset selections


        if (clear || _lodash["default"].isNumber(dateStart) && _lodash["default"].isNumber(dateEnd) && _lodash["default"].isEqual(dateStart, dateEnd) && _lodash["default"].isEqual(dateEnd, date.unix())) {
          dateObj.dateStart = null;
          dateObj.dateEnd = null;
          this.props.onChange(dateObj);

          this._hasValue(null);

          this.setState({
            presetLink: 'open'
          });
        }
      } else if (type === 'servicePeriod') {
        this.props.onChange(_lodash["default"].isObject(date) && date.clone().isValid() ? date.clone().unix() : null);

        this._hasValue(date);
      } else if (type === 'servicePeriodRange' || type === 'servicePeriodRangeEnd' || type === 'servicePeriodRangeStart') {
        var _dateObj = {
          dateFirstChoice: dateStart,
          dateSecondChoice: dateSecondaryStart
        };

        var _isDateBeforeDateStart = date.isBefore(this._convertTimestamp(dateStart));

        var _isDateAfterDateEnd = date.isAfter(this._convertTimestamp(dateEnd));

        var isDateBeforeDateSecondaryStart = date.isBefore(this._convertTimestamp(dateSecondaryStart));

        if (!dateStart && !dateEnd || dateStart && dateEnd && _isDateBeforeDateStart) {
          _dateObj.dateFirstChoice = date.unix();
          this.props.onChange(_dateObj);
        }

        if (dateStart && dateEnd && _isDateAfterDateEnd || dateStart && dateEnd && dateSecondaryStart && dateSecondaryEnd && isDateBeforeDateSecondaryStart) {
          _dateObj.dateSecondChoice = date.unix();
          this.props.onChange(_dateObj);
        }
      } else {
        if (_momentTimezone["default"].isMoment(date)) {
          this.props.onChange(date.unix());
        } else {
          this.props.onChange(null);
        }

        this._hasValue(date);
      }
    }
  }, {
    key: "_setOpen",
    value: function _setOpen(open) {
      this.setState({
        isCalendarOpen: open
      });
    }
  }, {
    key: "_setSelected",
    value: function _setSelected(date) {
      if (_lodash["default"].isFunction(this.props.onChange) && !_datePickerUtils["default"].isSameDay(this._convertTimestamp(this.props.date), date)) {
        this.props.onChange(date);
      }

      this._hasValue(date);
    }
  }]);

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

var typeEnums = ['dateRange', 'servicePeriod', 'servicePeriodRange', 'servicePeriodRangeEnd', 'servicePeriodRangeStart', 'singleDate'];
var uxModeEnums = ['input', 'calendar'];
DatePicker.propTypes = {
  buttonClear: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  classNameInput: _propTypes["default"].string,
  date: _propTypes["default"].number,
  dateEnd: _propTypes["default"].number,
  dateFormat: _propTypes["default"].string,
  dateSecondaryEnd: _propTypes["default"].number,
  dateSecondaryStart: _propTypes["default"].number,
  dateStart: _propTypes["default"].number,
  disabled: _propTypes["default"].bool,
  errorMessage: _propTypes["default"].string,
  events: _propTypes["default"].array,
  excludeDates: _propTypes["default"].array,
  filterDates: _propTypes["default"].func,
  id: _propTypes["default"].string,
  includeDates: _propTypes["default"].array,
  locale: _propTypes["default"].string,
  maxDate: _propTypes["default"].shape({}),
  minDate: _propTypes["default"].shape({}),
  onApplyClick: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  onChange: _propTypes["default"].func.isRequired,
  onFocus: _propTypes["default"].func,
  onMonthChange: _propTypes["default"].func,
  required: _propTypes["default"].bool,
  tabIndex: _propTypes["default"].number,
  type: _propTypes["default"].oneOf(typeEnums),
  uxMode: _propTypes["default"].oneOf(uxModeEnums)
};
var _default = DatePicker;
exports["default"] = _default;