material-date-range-picker/DateRangePicker.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");

exports.__esModule = true;
exports.default = void 0;

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

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

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

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

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

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

var _downshift = _interopRequireDefault(require("downshift"));

var _dateFns = require("date-fns");

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

var _kalendaryo = _interopRequireDefault(require("kalendaryo"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Calendar = _interopRequireDefault(require("./Calendar"));

function _templateObject() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  position: relative;\n  * {\n    box-sizing: border-box;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var Wrapper = _styledComponents.default.div(_templateObject());

var itemToString = function itemToString(dateFormat) {
  return function (_temp) {
    var _ref = _temp === void 0 ? {} : _temp,
        fromDate = _ref.fromDate,
        toDate = _ref.toDate;

    return "" + (fromDate ? "From: " + (0, _dateFns.format)(fromDate, dateFormat) + (toDate ? ' ' : '') : '') + (toDate ? "To: " + (0, _dateFns.format)(toDate, dateFormat) : '');
  };
};

function stateReducer(state, changes) {
  // this prevents the menu from being closed when the user
  // selects an item with a keyboard or mouse
  switch (changes.type) {
    case _downshift.default.stateChangeTypes.keyDownEnter:
    case _downshift.default.stateChangeTypes.clickItem:
      return (0, _extends2.default)({}, changes, {
        isOpen: state.isOpen,
        highlightedIndex: state.highlightedIndex
      });

    default:
      return changes;
  }
}

var renderCalendar = function renderCalendar(props) {
  return _react.default.createElement(_Calendar.default, props);
};

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

  function DateRangePicker() {
    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.setDateRange = function (selectedDate, stateAndHelpers) {
      var _this$props = _this.props,
          fromDate = _this$props.fromDate,
          toDate = _this$props.toDate;

      if (!fromDate && toDate && (0, _dateFns.isAfter)(selectedDate, toDate)) {
        _this.props.onChange({
          fromDate: toDate,
          toDate: selectedDate
        });

        return;
      } // Reset the state if the selected date is equal


      if (toDate && (0, _dateFns.isSameDay)(selectedDate, toDate)) {
        _this.props.onChange({
          toDate: null
        });

        return;
      }

      if (fromDate && (0, _dateFns.isSameDay)(selectedDate, fromDate)) {
        _this.props.onChange({
          fromDate: null
        });

        return;
      } // Set the starting date to the selected date
      // if the starting date is empty


      if (!fromDate) {
        _this.props.onChange({
          fromDate: selectedDate
        });

        return;
      } // Set the ending date to the selected date if the start date
      // is given and the selected date is after the start date


      if (fromDate && (0, _dateFns.isAfter)(selectedDate, fromDate)) {
        _this.props.onChange({
          toDate: selectedDate
        });
      } // Set the starting date to the selected date if the
      // starting date is given and the selected date is
      // before the ending date
      else if (toDate && fromDate && (0, _dateFns.isBefore)(selectedDate, fromDate)) {
          _this.props.onChange({
            fromDate: selectedDate
          });
        } // Set the starting date to the selected date
        // and the ending date to the last starting date
        // if the starting date is given and the selected date is before this starting date
        else if (fromDate && (0, _dateFns.isBefore)(selectedDate, fromDate)) {
            _this.props.onChange({
              fromDate: selectedDate,
              toDate: fromDate
            });
          } // Both dates are selected if we get here


      if (_this.props.closeDialogOnSelection) {
        stateAndHelpers.closeMenu();
      }
    };

    _this.clearDateRange = function () {
      return _this.props.onChange({
        fromDate: null,
        toDate: null
      });
    };

    return _this;
  }

  var _proto = DateRangePicker.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        fromDate = _this$props2.fromDate,
        toDate = _this$props2.toDate,
        dateFormat = _this$props2.dateFormat;
    return _react.default.createElement(_downshift.default, (0, _extends2.default)({
      stateReducer: stateReducer,
      selectedItem: {
        fromDate: fromDate,
        toDate: toDate
      },
      itemToString: itemToString(dateFormat),
      onSelect: this.setDateRange
    }, this.props), function (_ref2) {
      var getInputProps = _ref2.getInputProps,
          getLabelProps = _ref2.getLabelProps,
          selectedItem = _ref2.selectedItem,
          downshiftProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["getInputProps", "getLabelProps", "selectedItem"]);
      return _react.default.createElement("div", {
        className: _this2.props.className
      }, _react.default.createElement(_TextField.default, {
        id: "date-range",
        label: "Date range",
        InputLabelProps: getLabelProps({
          shrink: downshiftProps.isOpen || !!fromDate || !!toDate
        }),
        placeholder: "From:",
        fullWidth: true,
        InputProps: getInputProps({
          readOnly: true,
          onClick: downshiftProps.openMenu,
          onFocus: downshiftProps.openMenu
        })
      }), downshiftProps.isOpen ? _react.default.createElement(Wrapper, null, _react.default.createElement(_kalendaryo.default, (0, _extends2.default)({}, downshiftProps, {
        startCurrentDateAt: selectedItem.fromDate || selectedItem.toDate,
        fromDate: selectedItem.fromDate,
        toDate: selectedItem.toDate,
        clearDateRange: _this2.clearDateRange,
        startWeekAt: 1,
        defaultFormat: dateFormat,
        render: renderCalendar
      }))) : null);
    });
  };

  return DateRangePicker;
}(_react.PureComponent);

process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
  fromDate: _propTypes.default.instanceOf(Date),
  toDate: _propTypes.default.instanceOf(Date),
  onChange: _propTypes.default.func.isRequired,
  className: _propTypes.default.string,
  dateFormat: _propTypes.default.string,
  closeDialogOnSelection: _propTypes.default.bool
} : void 0;
DateRangePicker.defaultProps = {
  fromDate: null,
  toDate: null,
  className: '',
  dateFormat: 'YYYY-MM-DD'
};
var _default = DateRangePicker;
exports.default = _default;