material-date-range-picker/Calendar.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 = exports.Spacer = void 0;

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

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

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

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

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

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

var _NavigateNext = _interopRequireDefault(require("@material-ui/icons/NavigateNext"));

var _NavigateBefore = _interopRequireDefault(require("@material-ui/icons/NavigateBefore"));

var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));

var _ArrowDropUp = _interopRequireDefault(require("@material-ui/icons/ArrowDropUp"));

var _ClearAll = _interopRequireDefault(require("@material-ui/icons/ClearAll"));

var _Card = _interopRequireDefault(require("@material-ui/core/Card"));

var _Components = require("./Components");

var _DaySelect = _interopRequireDefault(require("./DaySelect"));

var _MonthSelect = _interopRequireDefault(require("./MonthSelect"));

function _templateObject4() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  && {\n    font-weight: 600;\n    font-size: 14px;\n  }\n"]);

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

  return data;
}

function _templateObject3() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  flex: 1;\n"]);

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

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  && {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteralLoose2.default)(["\n  && {\n    margin-top: 10px;\n    width: 100%;\n    min-width: 212px;\n    position: absolute;\n    z-index: 1;\n    flex-direction: row;\n    padding: 8px;\n  }\n"]);

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

  return data;
}

var Wrapper = (0, _styledComponents.default)(_Card.default)(_templateObject());
var MonthButton = (0, _styledComponents.default)(_IconButton.default)(_templateObject2());

var Spacer = _styledComponents.default.div(_templateObject3());

exports.Spacer = Spacer;
var MothText = (0, _styledComponents.default)(_Button.default)(_templateObject4());

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

  function Calendar() {
    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 = {
      monthSelectOpen: false
    };

    _this.handleMonthTextClick = function () {
      return _this.setState(function (_ref) {
        var monthSelectOpen = _ref.monthSelectOpen;
        return {
          monthSelectOpen: !monthSelectOpen
        };
      });
    };

    _this.preventInputLosingFocus = function (e) {
      return e.preventDefault();
    };

    return _this;
  }

  var _proto = Calendar.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        getFormattedDate = _this$props.getFormattedDate,
        setDateNextMonth = _this$props.setDateNextMonth,
        setDatePrevMonth = _this$props.setDatePrevMonth,
        clearDateRange = _this$props.clearDateRange;
    var monthSelectOpen = this.state.monthSelectOpen;
    return _react.default.createElement(Wrapper, {
      raised: true,
      onMouseDown: this.preventInputLosingFocus
    }, _react.default.createElement(_Components.Row, null, _react.default.createElement(MothText, {
      size: "small",
      onClick: this.handleMonthTextClick
    }, getFormattedDate('MMM YYYY'), monthSelectOpen ? _react.default.createElement(_ArrowDropUp.default, null) : _react.default.createElement(_ArrowDropDown.default, null)), _react.default.createElement(Spacer, null), _react.default.createElement(_Components.Cell, null, _react.default.createElement(MonthButton, {
      onClick: clearDateRange,
      "aria-label": "Clear selection"
    }, _react.default.createElement(_ClearAll.default, null))), _react.default.createElement(_Components.Cell, null, _react.default.createElement(MonthButton, {
      onClick: setDatePrevMonth,
      "aria-label": "Previous month"
    }, _react.default.createElement(_NavigateBefore.default, null))), _react.default.createElement(_Components.Cell, null, _react.default.createElement(MonthButton, {
      onClick: setDateNextMonth,
      "aria-label": "Next month"
    }, _react.default.createElement(_NavigateNext.default, null)))), monthSelectOpen ? _react.default.createElement(_MonthSelect.default, this.props) : _react.default.createElement(_DaySelect.default, this.props));
  };

  return Calendar;
}(_react.PureComponent);

exports.default = Calendar;