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

Lonely Planet's Components

"use strict";

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _moment = require("moment");

var _moment2 = _interopRequireDefault(_moment);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactMomentProptypes = require("react-moment-proptypes");

var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes);

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

var _DateRangePicker2 = _interopRequireDefault(_DateRangePicker);

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

var _omit = require("lodash/omit");

var _omit2 = _interopRequireDefault(_omit);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

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

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

var styles = {
  dateRangeWrapper: {
    position: "relative",
    width: "100%",
    zIndex: _zIndex2.default.default + 4
  },

  startEndDate: {
    backgroundColor: _colors2.default.linkPrimary,
    color: _colors2.default.textOverlay,
    position: "relative"
  },

  daySpan: {
    backgroundColor: "#eaf2f8",
    color: _colors2.default.textSecondary,
    position: "relative"
  },

  firstLastSelectedSpan: {
    position: "relative"
  }
};

var DateRange = function (_React$Component) {
  (0, _inherits3.default)(DateRange, _React$Component);

  function DateRange(props) {
    (0, _classCallCheck3.default)(this, DateRange);

    var _this = (0, _possibleConstructorReturn3.default)(this, (DateRange.__proto__ || (0, _getPrototypeOf2.default)(DateRange)).call(this, props));

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

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

  (0, _createClass3.default)(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: "initialVisibleMonth",
    value: function initialVisibleMonth() {
      var startDate = this.props.startDate;

      if (startDate) {
        return startDate;
      }

      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;
    }
  }, {
    key: "isOutsideRange",
    value: function isOutsideRange(date) {
      var _props = this.props,
          startDate = _props.startDate,
          lastSelectableDate = _props.lastSelectableDate;

      var isPastDate = date < (0, _moment2.default)();

      return isPastDate || date.isAfter(lastSelectableDate) || this.state.focusedInput === _constants.END_DATE && date.diff(startDate, "days") > 30;
    }
  }, {
    key: "render",
    value: function render() {
      var _props2 = this.props,
          noBorder = _props2.noBorder,
          withFullScreenPortal = _props2.withFullScreenPortal,
          soldOut = _props2.soldOut;
      var focusedInput = this.state.focusedInput;
      // not all props should be passed to DateRangePicker

      var pickerProps = (0, _omit2.default)(this.props, ["id", "lastSelectableDate", "noBorder", "soldOut"]);

      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: _zIndex2.default.modal + 1
            } : {
              borderColor: soldOut ? _colors2.default.accentRed : _colors2.default.borderPrimary,
              position: "relative",
              transition: "border-color " + _timing2.default.fast + " ease-in-out",
              width: "100%",
              zIndex: _zIndex2.default.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: _colors2.default.textPrimary,
              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: _colors2.default.bgPrimary,
              color: _colors2.default.linkPrimary
            },

            ".DayPickerKeyboardShortcuts__show--bottom-right": {
              borderRightColor: _colors2.default.linkPrimary
            }
          }
        }),
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".DateRangePicker__tether-element",
          rules: {
            top: "-23px !important",
            zIndex: _zIndex2.default.modal + 1
          }
        }),
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".DateRangePicker__picker",
          rules: {
            fontSize: "14px",
            zIndex: _zIndex2.default.modal,
            backgroundColor: _colors2.default.bgPrimary,
            boxShadow: "0 " + 39 / 14 + "em " + 54 / 14 + "em " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.16) + ",\n              0 0 0 1px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.02),

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

            ".DateInput--open-down.DateInput--with-caret::before": {
              borderBottomColor: "transparent"
            },

            ".DayPicker__week-header": {
              color: _colors2.default.textPrimary,
              fontWeight: 600
            },

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

            ".DayPickerNavigation--horizontal .DayPickerNavigation__prev, .DayPickerNavigation--horizontal .DayPickerNavigation__next": {
              borderRadius: 0
            },

            ".CalendarMonth__caption strong": {
              color: _colors2.default.textPrimary,
              fontWeight: 400
            },

            ".CalendarDay, .CalendarDay--blocked, .CalendarDay--blocked-out-of-range": {
              border: 0
            },

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

            ".CalendarDay--selected-start": styles.startEndDate,
            ".CalendarDay--selected-start.CalendarDay--hovered-span": styles.startEndDate,

            ".CalendarDay--selected-end": styles.startEndDate,

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

            ".CalendarDay--hovered-span, .CalendarDay--after-hovered-start": styles.daySpan
          }
        }),
        _react2.default.createElement(_DateRangePicker2.default, (0, _extends3.default)({}, pickerProps, {
          onFocusChange: this.onFocusChange,
          focusedInput: focusedInput,
          withFullScreenPortal: withFullScreenPortal,
          displayFormat: "ddd, MMM D",
          isOutsideRange: this.isOutsideRange,
          initialVisibleMonth: this.initialVisibleMonth,
          showClearDates: true
        }))
      );
    }
  }]);
  return DateRange;
}(_react2.default.Component);

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

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

  focusedInput: _propTypes2.default.oneOf([_constants.START_DATE, _constants.END_DATE]),

  onFocusChange: _propTypes2.default.func,

  /**
   * The start date as a moment object
   */
  startDate: _reactMomentProptypes2.default.momentObj,

  /**
   * Puts a red border around the input
   */
  soldOut: _propTypes2.default.bool,

  /**
   * The last selectable date on the calendar as a moment object
   */
  lastSelectableDate: _reactMomentProptypes2.default.momentObj
};

DateRange.defaultProps = {
  noBorder: false,

  withFullScreenPortal: false,

  focusedInput: null,

  soldOut: false,

  lastSelectableDate: null,

  onDatesChange: function onDatesChange() {}
};

exports.default = (0, _radium2.default)(DateRange);
var DeveloperNote = exports.DeveloperNote = function DeveloperNote() {
  return (
    /**
     * A developer-facing note that is being written as a component
     * for inclusion in storybook, which I figure gets more eyes than the readme.
     */
    _react2.default.createElement(
      "div",
      { style: { margin: "32px" } },
      _react2.default.createElement(
        "em",
        null,
        "Note to developers:"
      ),
      _react2.default.createElement(
        "small",
        { style: { display: "block" } },
        "This component uses ",
        _react2.default.createElement(
          "a",
          { href: "https://github.com/airbnb/react-dates" },
          "Airbnb's \"react-dates\" package/component"
        ),
        ", which requires some one-time global setup in order to properly load its styles. You'll need to",
        _react2.default.createElement(
          "ul",
          null,
          _react2.default.createElement(
            "li",
            null,
            _react2.default.createElement(
              "a",
              { href: "https://github.com/airbnb/react-dates#install-dependencies" },
              "install it as a dependency"
            ),
            ","
          ),
          _react2.default.createElement(
            "li",
            null,
            _react2.default.createElement(
              "a",
              { href: "https://github.com/airbnb/react-dates#initialize" },
              "initialize the package"
            ),
            ","
          ),
          _react2.default.createElement(
            "li",
            null,
            "and then ",
            _react2.default.createElement(
              "a",
              { href: "https://github.com/airbnb/react-dates#webpack" },
              "include its styles"
            ),
            "."
          )
        )
      )
    )
  );
};