backpack-ui
Version:
Lonely Planet's Components
355 lines (299 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactDateRange = require("react-date-range");
var _moment = require("moment");
var _moment2 = _interopRequireDefault(_moment);
var _radium = require("radium");
var _radium2 = _interopRequireDefault(_radium);
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _timing = require("../../styles/timing");
var _timing2 = _interopRequireDefault(_timing);
var _color = require("../../utils/color");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Calendar = function (_Component) {
(0, _inherits3.default)(Calendar, _Component);
function Calendar(props) {
(0, _classCallCheck3.default)(this, Calendar);
var _this = (0, _possibleConstructorReturn3.default)(this, (Calendar.__proto__ || (0, _getPrototypeOf2.default)(Calendar)).call(this, props));
_this.state = {};
return _this;
}
(0, _createClass3.default)(Calendar, [{
key: "render",
value: function render() {
var _props = this.props,
useRange = _props.useRange,
startDate = _props.startDate,
endDate = _props.endDate,
minDate = _props.minDate,
maxDate = _props.maxDate,
format = _props.format,
firstDayOfWeek = _props.firstDayOfWeek,
onInit = _props.onInit,
onChange = _props.onChange,
linkedCalendars = _props.linkedCalendars,
calendars = _props.calendars,
ranges = _props.ranges;
var icons = {
chevron: encodeURIComponent("<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" fill=\"" + _colors2.default.linkPrimary + "\"><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: _colors2.default.bgPrimary,
borderRadius: 0,
boxShadow: "0 " + 39 / 14 + "em " + 54 / 14 + "em rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .16)",
color: "inherit",
fontSize: "14px",
padding: 10 / 14 + "em",
// width: `${300 / 14}em`,
width: "391px"
},
MonthAndYear: {
color: _colors2.default.linkPrimary,
fontSize: "1em",
fontWeight: 600,
height: "auto",
lineHeight: 1,
padding: 0,
textTransform: "uppercase"
},
DateRange: {
backgroundColor: _colors2.default.bgPrimary,
borderRadius: 0,
display: "inline-block"
},
MonthButton: {
backgroundColor: _colors2.default.bgPrimary,
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 " + _timing2.default.fast + ",\n color " + _timing2.default.fast,
width: 53 / 14 + "em"
},
DayToday: {
color: _colors2.default.accentRed
},
DaySelected: {
backgroundColor: _colors2.default.linkPrimary,
color: _colors2.default.bgPrimary
},
DayActive: {
backgroundColor: _colors2.default.linkPrimary,
color: _colors2.default.bgPrimary,
transform: "none"
},
DayInRange: {
backgroundColor: "#eaf2f8",
color: _colors2.default.textPrimary
},
DayHover: {
backgroundColor: _colors2.default.bgPrimary,
color: _colors2.default.linkPrimary
},
DayPassive: {
cursor: "default"
}
};
var scopedStyles = {
".rdr-MonthAndYear": {
borderBottom: "1px solid " + _colors2.default.borderPrimary,
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: _colors2.default.bgPrimary,
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: _colors2.default.textPrimary + " !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: _propTypes2.default.bool,
/**
* Starting date for the calendar
*/
startDate: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object, // Moment.js object
_propTypes2.default.func]),
/**
* Starting date for the calendar; range only
*/
endDate: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object, // Moment.js object
_propTypes2.default.func]),
/**
* Min date for the calendar
*/
minDate: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object, // Moment.js object
_propTypes2.default.func]),
/**
* Max date for the calendar
*/
maxDate: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object, // Moment.js object
_propTypes2.default.func]),
/**
* Moment.js date format
*/
format: _propTypes2.default.string,
/**
* Which day of the week is the start of the week
*/
firstDayOfWeek: _propTypes2.default.number,
/**
* Function to run when calendar initializes
*/
onInit: _propTypes2.default.func,
/**
* Function to run when date is changed
*/
onChange: _propTypes2.default.func,
/**
* Should multiple calendars change months together; range only
*/
linkedCalendars: _propTypes2.default.bool,
/**
* Number of calendars to show; range only
*/
calendars: _propTypes2.default.number,
/**
* Ranges to show; range only
*/
ranges: _propTypes2.default.shape({
startDate: _propTypes2.default.object, // Moment.js object
endDate: _propTypes2.default.object // Moment.js 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);