backpack-ui/dist/components/calendar/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactDateRange = require("react-date-range");

var _moment = require("moment");

var _moment2 = _interopRequireDefault(_moment);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _settings = require("../../../settings.json");

var _color = require("../../utils/color");

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

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

var Calendar = function (_Component) {
  _inherits(Calendar, _Component);

  function Calendar(props) {
    _classCallCheck(this, Calendar);

    var _this = _possibleConstructorReturn(this, (Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call(this, props));

    _this.state = {};
    return _this;
  }

  _createClass(Calendar, [{
    key: "render",
    value: function render() {
      var _props = this.props;
      var useRange = _props.useRange;
      var startDate = _props.startDate;
      var endDate = _props.endDate;
      var minDate = _props.minDate;
      var maxDate = _props.maxDate;
      var format = _props.format;
      var firstDayOfWeek = _props.firstDayOfWeek;
      var onInit = _props.onInit;
      var onChange = _props.onChange;
      var linkedCalendars = _props.linkedCalendars;
      var calendars = _props.calendars;
      var ranges = _props.ranges;


      var icons = {
        chevron: encodeURIComponent("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" fill=\"" + _settings.color.blue + "\"><path class=\"path1\" d=\"M28.8 6.2l-12.8 12.8-12.8-12.8-3.2 3.2 16 16.4 16-16.4z\"></path></svg>")
      };

      var theme = {
        Calendar: {
          backgroundColor: _settings.color.white,
          borderRadius: 0,
          boxShadow: "0 " + 39 / 14 + "em " + 54 / 14 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .16)",
          color: "inherit",
          fontSize: "14px",
          padding: 10 / 14 + "em",
          // width: `${300 / 14}em`,
          width: "391px"
        },
        MonthAndYear: {
          color: _settings.color.blue,
          fontSize: "1em",
          fontWeight: 600,
          height: "auto",
          lineHeight: 1,
          padding: 0,
          textTransform: "uppercase"
        },
        DateRange: {
          backgroundColor: _settings.color.white,
          borderRadius: 0,
          display: "inline-block"
        },
        MonthButton: {
          backgroundColor: _settings.color.white,
          border: 0,
          borderRadius: 0,
          display: "inline-block",
          height: 20 / 14 + "em",
          lineHeight: 1,
          margin: 0,
          position: "relative",
          top: 5 / 14 + "em",
          width: 20 / 14 + "em"
        },
        MonthArrowPrev: {
          backgroundImage: "url(\"data:image/svg+xml;charset=UTF-8," + icons.chevron + "\")",
          backgroundPosition: "50%",
          backgroundRepeat: "no-repeat",
          backgroundSize: 9 / 14 + "em",
          borderRightColor: "transparent",
          borderStyle: "none",
          borderWidth: 0,
          display: "block",
          height: "100%",
          margin: 0,
          transform: "rotate(90deg) translateX(-1px)",
          width: "100%"
        },
        MonthArrowNext: {
          backgroundImage: "url(\"data:image/svg+xml;charset=UTF-8," + icons.chevron + "\")",
          backgroundPosition: "50%",
          backgroundRepeat: "no-repeat",
          backgroundSize: 9 / 14 + "em",
          borderLeftColor: "transparent",
          display: "block",
          height: "100%",
          margin: 0,
          transform: "rotate(-90deg)",
          width: "100%"
        },
        Weekday: {
          fontSize: "1em",
          fontWeight: 400,
          height: 20 / 14 + "em",
          lineHeight: 20 / 14 + "em",
          width: 53 / 14 + "em"
        },
        Day: {
          fontSize: "1em",
          height: 53 / 14 + "em",
          lineHeight: 53 / 14 + "em",
          transition: "background-color " + _settings.timing.fast + ",\n          color " + _settings.timing.fast,
          width: 53 / 14 + "em"
        },
        DayToday: {
          color: _settings.color.red
        },
        DaySelected: {
          backgroundColor: _settings.color.blue,
          color: _settings.color.white
        },
        DayActive: {
          backgroundColor: _settings.color.blue,
          color: _settings.color.white,
          transform: "none"
        },
        DayInRange: {
          backgroundColor: "#eaf2f8",
          color: _settings.color.titleGray
        },
        DayHover: {
          backgroundColor: _settings.color.white,
          color: _settings.color.blue
        },
        DayPassive: {
          cursor: "default"
        }
      };

      var scopedStyles = {
        ".rdr-MonthAndYear": {
          borderBottom: "1px solid " + _settings.color.gray,
          marginBottom: 22 / 14 + "em",
          marginLeft: -10 / 14 + "em",
          marginRight: -10 / 14 + "em",
          paddingBottom: 16 / 14 + "em",
          paddingTop: 20 / 14 + "em"
        },

        ".rdr-MonthAndYear-innerWrapper > span": {
          display: "inline-block",
          width: 130 / 14 + "em"
        },

        ".rdr-MonthAndYear-divider": {
          color: _settings.color.white,
          display: "inline-block",
          width: 3 / 14 + "em"
        },

        ".rdr-MonthAndYear-button": {
          float: "none !important"
        },

        ".rdr-MonthAndYear-button > i": {
          borderWidth: "0 !important",
          margin: "0 !important"
        },

        ".rdr-WeekDays": {
          paddingBottom: 11 / 14 + "em",
          paddingTop: 11 / 14 + "em"
        },

        ".rdr-Day.is-inRange:hover": {
          backgroundColor: "#eaf2f8 !important",
          color: _settings.color.titleGray + " !important"
        }
      };

      return _react2.default.createElement(
        "div",
        { className: "Calendar" },
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".rdr-Calendar",
          rules: scopedStyles
        }),
        !useRange && _react2.default.createElement(_reactDateRange.Calendar, {
          date: startDate,
          firstDayOfWeek: firstDayOfWeek,
          format: format,
          maxDate: maxDate,
          minDate: minDate,
          onChange: onChange,
          onInit: onInit,
          theme: theme
        }),
        useRange && _react2.default.createElement(_reactDateRange.DateRange, {
          calendars: calendars,
          startDate: startDate,
          endDate: endDate,
          firstDayOfWeek: firstDayOfWeek,
          format: format,
          linkedCalendars: linkedCalendars,
          maxDate: maxDate,
          minDate: minDate,
          onChange: onChange,
          onInit: onInit,
          ranges: ranges,
          theme: theme
        })
      );
    }
  }]);

  return Calendar;
}(_react.Component);

Calendar.propTypes = {
  /**
   * Should the range-enabled calendar be used
   */
  useRange: _react.PropTypes.bool,

  /**
   * Starting date for the calendar
   */
  startDate: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object, // Moment.js object
  _react.PropTypes.func]),

  /**
   * Starting date for the calendar; range only
   */
  endDate: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object, // Moment.js object
  _react.PropTypes.func]),

  /**
   * Min date for the calendar
   */
  minDate: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object, // Moment.js object
  _react.PropTypes.func]),

  /**
   * Max date for the calendar
   */
  maxDate: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object, // Moment.js object
  _react.PropTypes.func]),

  /**
   * Moment.js date format
   */
  format: _react.PropTypes.string,

  /**
   * Which day of the week is the start of the week
   */
  firstDayOfWeek: _react.PropTypes.number,

  /**
   * Function to run when calendar initializes
   */
  onInit: _react.PropTypes.func,

  /**
   * Function to run when date is changed
   */
  onChange: _react.PropTypes.func,

  /**
   * Should multiple calendars change months together; range only
   */
  linkedCalendars: _react.PropTypes.bool,

  /**
   * Number of calendars to show; range only
   */
  calendars: _react.PropTypes.number,

  /**
   * Ranges to show; range only
   */
  ranges: _react.PropTypes.object
};

Calendar.defaultProps = {
  useRange: false,

  startDate: (0, _moment2.default)(),

  endDate: (0, _moment2.default)().add(1, "week"),

  minDate: null,

  maxDate: null,

  format: "M/D/YYYY",

  firstDayOfWeek: _moment2.default.localeData().firstDayOfWeek(),

  onInit: null,

  onChange: null,

  linkedCalendars: false,

  calendars: 1,

  ranges: null
};

exports.default = (0, _radium2.default)(Calendar);