backpack-ui/dist/components/form/daterange.js

Lonely Planet's Components

"use strict";

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _moment = require("moment");

var _moment2 = _interopRequireDefault(_moment);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _DateRangePicker = require("react-dates/lib/components/DateRangePicker");

var _DateRangePicker2 = _interopRequireDefault(_DateRangePicker);

var _constants = require("react-dates/constants");

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 styles = {
  dateRangeWrapper: {
    position: "relative",
    width: "100%",
    zIndex: _settings.zIndex.default + 4
  },

  startEndDate: {
    backgroundColor: _settings.color.blue,
    borderRadius: "100%",
    color: _settings.color.white,
    position: "relative"
  },

  colorFill: {
    backgroundColor: "#eaf2f8",
    content: "",
    display: "block",
    height: "100%",
    position: "absolute",
    top: 0,
    zIndex: _settings.zIndex.below
  },

  daySpan: {
    backgroundColor: "#eaf2f8",
    color: _settings.color.titleGray,
    position: "relative"
  },

  startEndDateHovered: {
    backgroundColor: _settings.color.blue,
    color: _settings.color.white
  },

  firstLastSelectedSpan: {
    position: "relative"
  }
};

var startDateColorFillStyles = (0, _objectAssign2.default)({}, styles.colorFill, { left: "-50%", width: "50%" });
var endDateColorFillStyles = (0, _objectAssign2.default)({}, styles.colorFill, { left: 0, width: "50%" });
var firstSelectedSpanColorFillStyles = (0, _objectAssign2.default)({}, styles.colorFill, { left: "-23px", width: "23px" });
var lastSelectedSpanColorFillStyles = (0, _objectAssign2.default)({}, styles.colorFill, { right: "-23px", width: "23px" });
var lastSelectedStartColorFillStyles = (0, _objectAssign2.default)({}, styles.colorFill, { left: "50%", width: "calc(100% + 4px)" });

var DateRange = function (_React$Component) {
  _inherits(DateRange, _React$Component);

  _createClass(DateRange, null, [{
    key: "initialVisibleMonth",
    value: function initialVisibleMonth() {
      var isTodayLastDayOfMonth = (0, _moment2.default)() === (0, _moment2.default)().endOf("month");
      var nextMonth = (0, _moment2.default)().add(1, "months");
      var thisMonth = (0, _moment2.default)();

      return isTodayLastDayOfMonth ? nextMonth : thisMonth;
    }
  }]);

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

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

    _this.state = {
      focusedInput: props.focusedInput
    };

    _this.onFocusChange = _this.onFocusChange.bind(_this);
    _this.isOutsideRange = _this.isOutsideRange.bind(_this);
    return _this;
  }

  _createClass(DateRange, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        focusedInput: nextProps.focusedInput
      });
    }
  }, {
    key: "onFocusChange",
    value: function onFocusChange(focusedInput) {
      if (this.props.onFocusChange) {
        this.props.onFocusChange(focusedInput);
      }

      this.setState({
        focusedInput: focusedInput
      });
    }
  }, {
    key: "isOutsideRange",
    value: function isOutsideRange(date) {
      if (this.state.focusedInput === _constants.END_DATE && this.props.startDate && date.diff(this.props.startDate, "days") > 30) {
        return true;
      }

      return date < (0, _moment2.default)();
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props;
      var noBorder = _props.noBorder;
      var withFullScreenPortal = _props.withFullScreenPortal;
      var soldOut = _props.soldOut;
      var focusedInput = this.state.focusedInput;

      /* eslint-disable */

      return _react2.default.createElement(
        "div",
        { className: "DateRangeWrapper", style: styles.dateRangeWrapper },
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".DateRangeWrapper",
          rules: {
            ".DateRangePicker": {
              width: "100%"
            },

            ".DateRangePickerInput": noBorder ? {
              border: 0,
              position: "relative",
              width: "100%",
              zIndex: _settings.zIndex.modal + 1
            } : {
              borderColor: soldOut ? _settings.color.red : (0, _color.darken)(_settings.color.white, 17),
              position: "relative",
              transition: "border-color " + _settings.timing.fast + " ease-in-out",
              width: "100%",
              zIndex: _settings.zIndex.modal + 1
            },

            ".DateRangePickerInput__arrow svg": {
              height: "20px",
              width: "20px"
            },

            ".DateRangePickerInput__clear-dates": {
              bottom: 0,
              margin: "auto 0",
              padding: "10px 20px",
              position: "absolute",
              right: 0,
              top: 0
            },

            ".DateRangePickerInput__clear-dates--hover": {
              backgroundColor: "transparent",
              borderRadius: "none"
            },

            ".DateInput": {
              color: _settings.color.darkGray,
              fontSize: "14px",
              padding: "18px 17px 16px",
              textAlign: "center",
              width: "40%"
            },

            ".DateInput__input": {
              cursor: "pointer"
            },

            ".DateInput__display-text": {
              fontSize: "1em",
              fontWeight: 400,
              padding: 0
            },

            ".DateInput__display-text--focused": {
              backgroundColor: _settings.color.white,
              color: _settings.color.blue
            }
          }
        }),
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".DateRangePicker__tether-element",
          rules: {
            top: "-23px !important",
            zIndex: _settings.zIndex.modal + 1
          }
        }),
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".DateRangePicker__picker",
          rules: {
            fontSize: "14px",
            zIndex: _settings.zIndex.modal,
            backgroundColor: _settings.color.white,
            boxShadow: "0 " + 39 / 14 + "em " + 54 / 14 + "em rgba(" + (0, _color.rgb)(_settings.color.black) + ", .16),\n              0 0 0 1px rgba(" + (0, _color.rgb)(_settings.color.black) + ", .02)",

            ".DayPicker--horizontal": {
              borderRadius: 0,
              boxShadow: "none"
            },

            ".DayPicker--horizontal svg": {
              fill: (0, _color.darken)(_settings.color.white, 17)
            },

            ".DayPicker__week-header": {
              color: _settings.color.darkGray,
              fontWeight: 600
            },

            ".DayPicker__nav--prev": {
              border: 0
            },

            ".DayPicker__nav--next": {
              border: 0
            },

            ".CalendarMonth__caption strong": {
              color: _settings.color.darkGray,
              fontWeight: 400
            },

            ".CalendarMonth__day": {
              border: 0
            },

            ".CalendarMonth__day--blocked-past-date": {
              border: 0
            },

            ".CalendarMonth__day--selected-span": styles.daySpan,

            ".CalendarMonth__day--selected-start": styles.startEndDate,
            ".CalendarMonth__day--selected-start + .CalendarMonth__day--hovered::before": startDateColorFillStyles,
            ".CalendarMonth__day--selected-start + .CalendarMonth__day--hovered-span::before": startDateColorFillStyles,
            ".CalendarMonth__day--selected-start + .CalendarMonth__day--selected-span::before": startDateColorFillStyles,

            ".CalendarMonth__day--selected-end": styles.startEndDate,
            ".CalendarMonth__day--selected-end::before": endDateColorFillStyles,

            ".CalendarMonth__day--selected-start + .CalendarMonth__day--selected-end::before": {
              backgroundColor: _settings.color.blue,
              left: "-50%",
              width: "100%"
            },

            ".CalendarMonth__day--hovered": {
              border: 0,
              position: "relative"
            },

            ".CalendarMonth__day--hovered-span": styles.daySpan,

            ".CalendarMonth__day--selected-start.CalendarMonth__day--hovered": styles.startEndDateHovered,
            ".CalendarMonth__day--selected-start.CalendarMonth__day--hovered-span": styles.startEndDateHovered,

            ".CalendarMonth__day--selected-end.CalendarMonth__day--hovered": styles.startEndDateHovered,
            ".CalendarMonth__day--selected-end.CalendarMonth__day--hovered-span": styles.startEndDateHovered,

            "tr > .CalendarMonth__day--selected-span:first-of-type": styles.firstLastSelectedSpan,
            ".CalendarMonth[data-visible='true'] tr > .CalendarMonth__day--selected-span:first-of-type::after": firstSelectedSpanColorFillStyles,

            "tr > .CalendarMonth__day--selected-span:last-of-type": styles.firstLastSelectedSpan,
            ".CalendarMonth[data-visible='true'] tr > .CalendarMonth__day--selected-span:last-of-type::after": lastSelectedSpanColorFillStyles,
            ".CalendarMonth[data-visible='true'] tr > .CalendarMonth__day--selected-start:last-of-type::after": lastSelectedStartColorFillStyles,

            ".CalendarDay__day": {
              verticalAlign: "top",
              paddingTop: "10px"
            }
          }
        }),
        _react2.default.createElement(_DateRangePicker2.default, _extends({}, this.props, {
          onFocusChange: this.onFocusChange,
          focusedInput: focusedInput,
          withFullScreenPortal: withFullScreenPortal,
          displayFormat: "ddd, MMM D",
          isOutsideRange: this.isOutsideRange,
          initialVisibleMonth: function initialVisibleMonth() {
            return DateRange.initialVisibleMonth();
          },
          showClearDates: true
        }))
      );
      /* eslint-enable */
    }
  }]);

  return DateRange;
}(_react2.default.Component);

DateRange.propTypes = {
  /**
   * Remove border
   */
  noBorder: _react2.default.PropTypes.bool,

  /**
   * Should the component open with the full screen portal
   */
  withFullScreenPortal: _react2.default.PropTypes.bool,

  focusedInput: _react2.default.PropTypes.string,

  onFocusChange: _react2.default.PropTypes.func,

  startDate: _react2.default.PropTypes.string,

  /**
   * Puts a red border around the input
   */
  soldOut: _react2.default.PropTypes.bool
};

DateRange.defaultProps = {
  noBorder: false,

  withFullScreenPortal: false,

  focusedInput: null,

  onFocusChange: "",

  soldOut: false
};

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