diff --git a/.babelrc b/.babelrc
index b5ad76866..f5f11440d 100755
--- a/.babelrc
+++ b/.babelrc
@@ -1,12 +1,13 @@
{
"presets": [
- ["@babel/preset-env"],
- ["@babel/preset-react"]
+ "@babel/preset-react",
+ "@babel/preset-env"
],
- "plugins": [
- ["@babel/plugin-proposal-class-properties"],
- ["@babel/plugin-proposal-export-default-from"],
- "date-fns"
- ]
-}
-
+ "env": {
+ "test": {
+ "presets": [
+ "react-app"
+ ]
+ }
+ }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 31ca39e05..ecd51e813 100755
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,4 @@ node_modules/
*.orig
lib/
NOTES.txt
-dist/
styleguide/
diff --git a/dist/accessibility/index.js b/dist/accessibility/index.js
new file mode 100644
index 000000000..e66bf7f82
--- /dev/null
+++ b/dist/accessibility/index.js
@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.ariaLabelsShape = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ariaLabelsShape = _propTypes.default.shape({
+ dateInput: _propTypes.default.objectOf(_propTypes.default.shape({
+ startDate: _propTypes.default.string,
+ endDate: _propTypes.default.string
+ })),
+ monthPicker: _propTypes.default.string,
+ yearPicker: _propTypes.default.string,
+ prevButton: _propTypes.default.string,
+ nextButton: _propTypes.default.string
+});
+
+exports.ariaLabelsShape = ariaLabelsShape;
\ No newline at end of file
diff --git a/dist/components/Calendar/index.js b/dist/components/Calendar/index.js
new file mode 100644
index 000000000..63aa1149c
--- /dev/null
+++ b/dist/components/Calendar/index.js
@@ -0,0 +1,784 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DayCell = require("../DayCell");
+
+var _Month = _interopRequireDefault(require("../Month"));
+
+var _DateInput = _interopRequireDefault(require("../DateInput"));
+
+var _utils = require("../../utils");
+
+var _classnames3 = _interopRequireDefault(require("classnames"));
+
+var _reactList = _interopRequireDefault(require("react-list"));
+
+var _shallowEqual = require("shallow-equal");
+
+var _dateFns = require("date-fns");
+
+var _enUS = _interopRequireDefault(require("date-fns/locale/en-US"));
+
+var _styles = _interopRequireDefault(require("../../styles"));
+
+var _accessibility = require("../../accessibility");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Calendar = /*#__PURE__*/function (_PureComponent) {
+ _inherits(Calendar, _PureComponent);
+
+ var _super = _createSuper(Calendar);
+
+ function Calendar(_props, context) {
+ var _this;
+
+ _classCallCheck(this, Calendar);
+
+ _this = _super.call(this, _props, context);
+
+ _defineProperty(_assertThisInitialized(_this), "focusToDate", function (date) {
+ var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props;
+ var preventUnnecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+ if (!props.scroll.enabled) {
+ if (!props.forceShownDate) {
+ if (preventUnnecessary && props.preventSnapRefocus) {
+ var focusedDateDiff = (0, _dateFns.differenceInCalendarMonths)(date, _this.state.focusedDate);
+ var isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0;
+ var isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0;
+
+ if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) {
+ return;
+ }
+ }
+
+ _this.setState({
+ focusedDate: date
+ });
+
+ return;
+ } else {
+ _this.setState({
+ focusedDate: props.forceShownDate
+ });
+
+ return;
+ }
+ }
+
+ var targetMonthIndex = (0, _dateFns.differenceInCalendarMonths)(date, props.minDate, _this.dateOptions);
+
+ var visibleMonths = _this.list.getVisibleRange();
+
+ if (preventUnnecessary && visibleMonths.includes(targetMonthIndex)) return;
+ _this.isFirstRender = true;
+
+ _this.list.scrollTo(targetMonthIndex);
+
+ _this.setState({
+ focusedDate: date
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "updateShownDate", function () {
+ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
+ var newProps = props.scroll.enabled ? _objectSpread(_objectSpread({}, props), {}, {
+ months: _this.list.getVisibleRange().length
+ }) : props;
+ var newFocus = (0, _utils.calcFocusDate)(_this.state.focusedDate, newProps);
+
+ _this.focusToDate(newFocus, newProps);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "updatePreview", function (val) {
+ if (!val) {
+ _this.setState({
+ preview: null
+ });
+
+ return;
+ }
+
+ var preview = {
+ startDate: val,
+ endDate: val,
+ color: _this.props.color
+ };
+
+ _this.setState({
+ preview: preview
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "changeShownDate", function (value) {
+ var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set';
+ var focusedDate = _this.state.focusedDate;
+ var _this$props = _this.props,
+ onShownDateChange = _this$props.onShownDateChange,
+ minDate = _this$props.minDate,
+ maxDate = _this$props.maxDate;
+ var modeMapper = {
+ monthOffset: function monthOffset() {
+ return (0, _dateFns.addMonths)(focusedDate, value);
+ },
+ setMonth: function setMonth() {
+ return (0, _dateFns.setMonth)(focusedDate, value);
+ },
+ setYear: function setYear() {
+ return (0, _dateFns.setYear)(focusedDate, value);
+ },
+ set: function set() {
+ return value;
+ }
+ };
+ var newDate = (0, _dateFns.min)([(0, _dateFns.max)([modeMapper[mode](), minDate]), maxDate]);
+
+ _this.focusToDate(newDate, _this.props, false);
+
+ onShownDateChange && onShownDateChange(newDate);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleRangeFocusChange", function (rangesIndex, rangeItemIndex) {
+ _this.props.onRangeFocusChange && _this.props.onRangeFocusChange([rangesIndex, rangeItemIndex]);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleScroll", function () {
+ var _this$props2 = _this.props,
+ onShownDateChange = _this$props2.onShownDateChange,
+ minDate = _this$props2.minDate;
+ var focusedDate = _this.state.focusedDate;
+
+ var _assertThisInitialize = _assertThisInitialized(_this),
+ isFirstRender = _assertThisInitialize.isFirstRender;
+
+ var visibleMonths = _this.list.getVisibleRange(); // prevent scroll jump with wrong visible value
+
+
+ if (visibleMonths[0] === undefined) return;
+ var visibleMonth = (0, _dateFns.addMonths)(minDate, visibleMonths[0] || 0);
+ var isFocusedToDifferent = !(0, _dateFns.isSameMonth)(visibleMonth, focusedDate);
+
+ if (isFocusedToDifferent && !isFirstRender) {
+ _this.setState({
+ focusedDate: visibleMonth
+ });
+
+ onShownDateChange && onShownDateChange(visibleMonth);
+ }
+
+ _this.isFirstRender = false;
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderMonthAndYear", function (focusedDate, changeShownDate, props) {
+ var showMonthArrow = props.showMonthArrow,
+ minDate = props.minDate,
+ maxDate = props.maxDate,
+ showMonthAndYearPickers = props.showMonthAndYearPickers,
+ ariaLabels = props.ariaLabels;
+ var upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear();
+ var lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
+ var styles = _this.styles;
+ return /*#__PURE__*/_react.default.createElement("div", {
+ onMouseUp: function onMouseUp(e) {
+ return e.stopPropagation();
+ },
+ className: styles.monthAndYearWrapper
+ }, showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", {
+ type: "button",
+ className: (0, _classnames3.default)(styles.nextPrevButton, styles.prevButton),
+ onClick: function onClick() {
+ return changeShownDate(-1, 'monthOffset');
+ },
+ "aria-label": ariaLabels.prevButton
+ }, /*#__PURE__*/_react.default.createElement("i", null)) : null, showMonthAndYearPickers ? /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.monthAndYearPickers
+ }, /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.monthPicker
+ }, /*#__PURE__*/_react.default.createElement("select", {
+ value: focusedDate.getMonth(),
+ onChange: function onChange(e) {
+ return changeShownDate(e.target.value, 'setMonth');
+ },
+ "aria-label": ariaLabels.monthPicker
+ }, _this.state.monthNames.map(function (monthName, i) {
+ return /*#__PURE__*/_react.default.createElement("option", {
+ key: i,
+ value: i
+ }, monthName);
+ }))), /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.monthAndYearDivider
+ }), /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.yearPicker
+ }, /*#__PURE__*/_react.default.createElement("select", {
+ value: focusedDate.getFullYear(),
+ onChange: function onChange(e) {
+ return changeShownDate(e.target.value, 'setYear');
+ },
+ "aria-label": ariaLabels.yearPicker
+ }, new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map(function (val, i) {
+ var year = val - i;
+ return /*#__PURE__*/_react.default.createElement("option", {
+ key: year,
+ value: year
+ }, year);
+ })))) : /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.monthAndYearPickers
+ }, _this.state.monthNames[focusedDate.getMonth()], " ", focusedDate.getFullYear()), showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", {
+ type: "button",
+ className: (0, _classnames3.default)(styles.nextPrevButton, styles.nextButton),
+ onClick: function onClick() {
+ return changeShownDate(+1, 'monthOffset');
+ },
+ "aria-label": ariaLabels.nextButton
+ }, /*#__PURE__*/_react.default.createElement("i", null)) : null);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderDateDisplay", function () {
+ var _this$props3 = _this.props,
+ focusedRange = _this$props3.focusedRange,
+ color = _this$props3.color,
+ ranges = _this$props3.ranges,
+ rangeColors = _this$props3.rangeColors,
+ dateDisplayFormat = _this$props3.dateDisplayFormat,
+ editableDateInputs = _this$props3.editableDateInputs,
+ startDatePlaceholder = _this$props3.startDatePlaceholder,
+ endDatePlaceholder = _this$props3.endDatePlaceholder,
+ ariaLabels = _this$props3.ariaLabels;
+ var defaultColor = rangeColors[focusedRange[0]] || color;
+ var styles = _this.styles;
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: styles.dateDisplayWrapper
+ }, ranges.map(function (range, i) {
+ if (range.showDateDisplay === false || range.disabled && !range.showDateDisplay) return null;
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: styles.dateDisplay,
+ key: i,
+ style: {
+ color: range.color || defaultColor
+ }
+ }, /*#__PURE__*/_react.default.createElement(_DateInput.default, {
+ className: (0, _classnames3.default)(styles.dateDisplayItem, _defineProperty({}, styles.dateDisplayItemActive, focusedRange[0] === i && focusedRange[1] === 0)),
+ readOnly: !editableDateInputs,
+ disabled: range.disabled,
+ value: range.startDate,
+ placeholder: startDatePlaceholder,
+ dateOptions: _this.dateOptions,
+ dateDisplayFormat: dateDisplayFormat,
+ ariaLabel: ariaLabels.dateInput && ariaLabels.dateInput[range.key] && ariaLabels.dateInput[range.key].startDate,
+ onChange: _this.onDragSelectionEnd,
+ onFocus: function onFocus() {
+ return _this.handleRangeFocusChange(i, 0);
+ }
+ }), /*#__PURE__*/_react.default.createElement(_DateInput.default, {
+ className: (0, _classnames3.default)(styles.dateDisplayItem, _defineProperty({}, styles.dateDisplayItemActive, focusedRange[0] === i && focusedRange[1] === 1)),
+ readOnly: !editableDateInputs,
+ disabled: range.disabled,
+ value: range.endDate,
+ placeholder: endDatePlaceholder,
+ dateOptions: _this.dateOptions,
+ dateDisplayFormat: dateDisplayFormat,
+ ariaLabel: ariaLabels.dateInput && ariaLabels.dateInput[range.key] && ariaLabels.dateInput[range.key].endDate,
+ onChange: _this.onDragSelectionEnd,
+ onFocus: function onFocus() {
+ return _this.handleRangeFocusChange(i, 1);
+ }
+ }));
+ }));
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "onDragSelectionStart", function (date) {
+ var _this$props4 = _this.props,
+ onChange = _this$props4.onChange,
+ dragSelectionEnabled = _this$props4.dragSelectionEnabled;
+
+ if (dragSelectionEnabled) {
+ _this.setState({
+ drag: {
+ status: true,
+ range: {
+ startDate: date,
+ endDate: date
+ },
+ disablePreview: true
+ }
+ });
+ } else {
+ onChange && onChange(date);
+ }
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "onDragSelectionEnd", function (date) {
+ var _this$props5 = _this.props,
+ updateRange = _this$props5.updateRange,
+ displayMode = _this$props5.displayMode,
+ onChange = _this$props5.onChange,
+ dragSelectionEnabled = _this$props5.dragSelectionEnabled;
+ if (!dragSelectionEnabled) return;
+
+ if (displayMode === 'date' || !_this.state.drag.status) {
+ onChange && onChange(date);
+ return;
+ }
+
+ var newRange = {
+ startDate: _this.state.drag.range.startDate,
+ endDate: date
+ };
+
+ if (displayMode !== 'dateRange' || (0, _dateFns.isSameDay)(newRange.startDate, date)) {
+ _this.setState({
+ drag: {
+ status: false,
+ range: {}
+ }
+ }, function () {
+ return onChange && onChange(date);
+ });
+ } else {
+ _this.setState({
+ drag: {
+ status: false,
+ range: {}
+ }
+ }, function () {
+ updateRange && updateRange(newRange);
+ });
+ }
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "onDragSelectionMove", function (date) {
+ var drag = _this.state.drag;
+ if (!drag.status || !_this.props.dragSelectionEnabled) return;
+
+ _this.setState({
+ drag: {
+ status: drag.status,
+ range: {
+ startDate: drag.range.startDate,
+ endDate: date
+ },
+ disablePreview: true
+ }
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "estimateMonthSize", function (index, cache) {
+ var _this$props6 = _this.props,
+ direction = _this$props6.direction,
+ minDate = _this$props6.minDate;
+ var scrollArea = _this.state.scrollArea;
+
+ if (cache) {
+ _this.listSizeCache = cache;
+ if (cache[index]) return cache[index];
+ }
+
+ if (direction === 'horizontal') return scrollArea.monthWidth;
+ var monthStep = (0, _dateFns.addMonths)(minDate, index);
+
+ var _getMonthDisplayRange = (0, _utils.getMonthDisplayRange)(monthStep, _this.dateOptions),
+ start = _getMonthDisplayRange.start,
+ end = _getMonthDisplayRange.end;
+
+ var isLongMonth = (0, _dateFns.differenceInDays)(end, start, _this.dateOptions) + 1 > 7 * 5;
+ return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight;
+ });
+
+ _this.dateOptions = {
+ locale: _props.locale
+ };
+ if (_props.weekStartsOn !== undefined) _this.dateOptions.weekStartsOn = _props.weekStartsOn;
+ _this.styles = (0, _utils.generateStyles)([_styles.default, _props.classNames]);
+ _this.listSizeCache = {};
+ _this.isFirstRender = true;
+ _this.state = {
+ monthNames: _this.getMonthNames(),
+ focusedDate: (0, _utils.calcFocusDate)(null, _props),
+ drag: {
+ status: false,
+ range: {
+ startDate: null,
+ endDate: null
+ },
+ disablePreview: false
+ },
+ scrollArea: _this.calcScrollArea(_props)
+ };
+ return _this;
+ }
+
+ _createClass(Calendar, [{
+ key: "getMonthNames",
+ value: function getMonthNames() {
+ var _this2 = this;
+
+ return _toConsumableArray(Array(12).keys()).map(function (i) {
+ return _this2.props.locale.localize.month(i);
+ });
+ }
+ }, {
+ key: "calcScrollArea",
+ value: function calcScrollArea(props) {
+ var direction = props.direction,
+ months = props.months,
+ scroll = props.scroll;
+ if (!scroll.enabled) return {
+ enabled: false
+ };
+ var longMonthHeight = scroll.longMonthHeight || scroll.monthHeight;
+
+ if (direction === 'vertical') {
+ return {
+ enabled: true,
+ monthHeight: scroll.monthHeight || 220,
+ longMonthHeight: longMonthHeight || 260,
+ calendarWidth: 'auto',
+ calendarHeight: (scroll.calendarHeight || longMonthHeight || 240) * months
+ };
+ }
+
+ return {
+ enabled: true,
+ monthWidth: scroll.monthWidth || 332,
+ calendarWidth: (scroll.calendarWidth || scroll.monthWidth || 332) * months,
+ monthHeight: longMonthHeight || 300,
+ calendarHeight: longMonthHeight || 300
+ };
+ }
+ }, {
+ key: "componentDidMount",
+ value: function componentDidMount() {
+ var _this3 = this;
+
+ if (this.props.scroll.enabled) {
+ // prevent react-list's initial render focus problem
+ setTimeout(function () {
+ return _this3.focusToDate(_this3.state.focusedDate);
+ });
+ }
+ }
+ }, {
+ key: "componentDidUpdate",
+ value: function componentDidUpdate(prevProps) {
+ var propMapper = {
+ dateRange: 'ranges',
+ date: 'date'
+ };
+ var targetProp = propMapper[this.props.displayMode];
+
+ if (this.props[targetProp] !== prevProps[targetProp]) {
+ this.updateShownDate(this.props);
+ }
+
+ if (prevProps.locale !== this.props.locale || prevProps.weekStartsOn !== this.props.weekStartsOn) {
+ this.dateOptions = {
+ locale: this.props.locale
+ };
+ if (this.props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = this.props.weekStartsOn;
+ this.setState({
+ monthNames: this.getMonthNames()
+ });
+ }
+
+ if (!(0, _shallowEqual.shallowEqualObjects)(prevProps.scroll, this.props.scroll)) {
+ this.setState({
+ scrollArea: this.calcScrollArea(this.props)
+ });
+ }
+ }
+ }, {
+ key: "renderWeekdays",
+ value: function renderWeekdays() {
+ var _this4 = this;
+
+ var now = new Date();
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: this.styles.weekDays
+ }, (0, _dateFns.eachDayOfInterval)({
+ start: (0, _dateFns.startOfWeek)(now, this.dateOptions),
+ end: (0, _dateFns.endOfWeek)(now, this.dateOptions)
+ }).map(function (day, i) {
+ return /*#__PURE__*/_react.default.createElement("span", {
+ className: _this4.styles.weekDay,
+ key: i
+ }, (0, _dateFns.format)(day, _this4.props.weekdayDisplayFormat, _this4.dateOptions));
+ }));
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this5 = this;
+
+ var _this$props7 = this.props,
+ showDateDisplay = _this$props7.showDateDisplay,
+ onPreviewChange = _this$props7.onPreviewChange,
+ scroll = _this$props7.scroll,
+ direction = _this$props7.direction,
+ disabledDates = _this$props7.disabledDates,
+ disabledDay = _this$props7.disabledDay,
+ maxDate = _this$props7.maxDate,
+ minDate = _this$props7.minDate,
+ rangeColors = _this$props7.rangeColors,
+ color = _this$props7.color,
+ navigatorRenderer = _this$props7.navigatorRenderer,
+ className = _this$props7.className,
+ preview = _this$props7.preview;
+ var _this$state = this.state,
+ scrollArea = _this$state.scrollArea,
+ focusedDate = _this$state.focusedDate;
+ var isVertical = direction === 'vertical';
+ var monthAndYearRenderer = navigatorRenderer || this.renderMonthAndYear;
+ var ranges = this.props.ranges.map(function (range, i) {
+ return _objectSpread(_objectSpread({}, range), {}, {
+ color: range.color || rangeColors[i] || color
+ });
+ });
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: (0, _classnames3.default)(this.styles.calendarWrapper, className),
+ onMouseUp: function onMouseUp() {
+ return _this5.setState({
+ drag: {
+ status: false,
+ range: {}
+ }
+ });
+ },
+ onMouseLeave: function onMouseLeave() {
+ _this5.setState({
+ drag: {
+ status: false,
+ range: {}
+ }
+ });
+ }
+ }, showDateDisplay && this.renderDateDisplay(), monthAndYearRenderer(focusedDate, this.changeShownDate, this.props), scroll.enabled ? /*#__PURE__*/_react.default.createElement("div", null, isVertical && this.renderWeekdays(this.dateOptions), /*#__PURE__*/_react.default.createElement("div", {
+ className: (0, _classnames3.default)(this.styles.infiniteMonths, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal),
+ onMouseLeave: function onMouseLeave() {
+ return onPreviewChange && onPreviewChange();
+ },
+ style: {
+ width: scrollArea.calendarWidth + 11,
+ height: scrollArea.calendarHeight + 11
+ },
+ onScroll: this.handleScroll
+ }, /*#__PURE__*/_react.default.createElement(_reactList.default, {
+ length: (0, _dateFns.differenceInCalendarMonths)((0, _dateFns.endOfMonth)(maxDate), (0, _dateFns.addDays)((0, _dateFns.startOfMonth)(minDate), -1), this.dateOptions),
+ treshold: 500,
+ type: "variable",
+ ref: function ref(target) {
+ return _this5.list = target;
+ },
+ itemSizeEstimator: this.estimateMonthSize,
+ axis: isVertical ? 'y' : 'x',
+ itemRenderer: function itemRenderer(index, key) {
+ var monthStep = (0, _dateFns.addMonths)(minDate, index);
+ return /*#__PURE__*/_react.default.createElement(_Month.default, _extends({}, _this5.props, {
+ onPreviewChange: onPreviewChange || _this5.updatePreview,
+ preview: preview || _this5.state.preview,
+ ranges: ranges,
+ key: key,
+ drag: _this5.state.drag,
+ dateOptions: _this5.dateOptions,
+ disabledDates: disabledDates,
+ disabledDay: disabledDay,
+ month: monthStep,
+ onDragSelectionStart: _this5.onDragSelectionStart,
+ onDragSelectionEnd: _this5.onDragSelectionEnd,
+ onDragSelectionMove: _this5.onDragSelectionMove,
+ onMouseLeave: function onMouseLeave() {
+ return onPreviewChange && onPreviewChange();
+ },
+ styles: _this5.styles,
+ style: isVertical ? {
+ height: _this5.estimateMonthSize(index)
+ } : {
+ height: scrollArea.monthHeight,
+ width: _this5.estimateMonthSize(index)
+ },
+ showMonthName: true,
+ showWeekDays: !isVertical
+ }));
+ }
+ }))) : /*#__PURE__*/_react.default.createElement("div", {
+ className: (0, _classnames3.default)(this.styles.months, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal)
+ }, new Array(this.props.months).fill(null).map(function (_, i) {
+ var monthStep = (0, _dateFns.addMonths)(_this5.state.focusedDate, i);
+
+ if (_this5.props.calendarFocus === 'backwards') {
+ monthStep = (0, _dateFns.subMonths)(_this5.state.focusedDate, _this5.props.months - 1 - i);
+ }
+
+ return /*#__PURE__*/_react.default.createElement(_Month.default, _extends({}, _this5.props, {
+ onPreviewChange: onPreviewChange || _this5.updatePreview,
+ preview: preview || _this5.state.preview,
+ ranges: ranges,
+ key: i,
+ drag: _this5.state.drag,
+ dateOptions: _this5.dateOptions,
+ disabledDates: disabledDates,
+ disabledDay: disabledDay,
+ month: monthStep,
+ onDragSelectionStart: _this5.onDragSelectionStart,
+ onDragSelectionEnd: _this5.onDragSelectionEnd,
+ onDragSelectionMove: _this5.onDragSelectionMove,
+ onMouseLeave: function onMouseLeave() {
+ return onPreviewChange && onPreviewChange();
+ },
+ styles: _this5.styles,
+ showWeekDays: !isVertical || i === 0,
+ showMonthName: !isVertical || i > 0
+ }));
+ })));
+ }
+ }]);
+
+ return Calendar;
+}(_react.PureComponent);
+
+Calendar.defaultProps = {
+ showMonthArrow: true,
+ showMonthAndYearPickers: true,
+ disabledDates: [],
+ disabledDay: function disabledDay() {},
+ classNames: {},
+ locale: _enUS.default,
+ ranges: [],
+ focusedRange: [0, 0],
+ dateDisplayFormat: 'MMM d, yyyy',
+ monthDisplayFormat: 'MMM yyyy',
+ weekdayDisplayFormat: 'E',
+ dayDisplayFormat: 'd',
+ showDateDisplay: true,
+ showPreview: true,
+ displayMode: 'date',
+ months: 1,
+ color: '#3d91ff',
+ scroll: {
+ enabled: false
+ },
+ direction: 'vertical',
+ maxDate: (0, _dateFns.addYears)(new Date(), 20),
+ minDate: (0, _dateFns.addYears)(new Date(), -100),
+ rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+ startDatePlaceholder: 'Early',
+ endDatePlaceholder: 'Continuous',
+ editableDateInputs: false,
+ dragSelectionEnabled: true,
+ fixedHeight: false,
+ calendarFocus: 'forwards',
+ preventSnapRefocus: false,
+ ariaLabels: {}
+};
+Calendar.propTypes = {
+ showMonthArrow: _propTypes.default.bool,
+ showMonthAndYearPickers: _propTypes.default.bool,
+ disabledDates: _propTypes.default.array,
+ disabledDay: _propTypes.default.func,
+ minDate: _propTypes.default.object,
+ maxDate: _propTypes.default.object,
+ date: _propTypes.default.object,
+ onChange: _propTypes.default.func,
+ onPreviewChange: _propTypes.default.func,
+ onRangeFocusChange: _propTypes.default.func,
+ classNames: _propTypes.default.object,
+ locale: _propTypes.default.object,
+ shownDate: _propTypes.default.object,
+ forceShownDate: _propTypes.default.object,
+ onShownDateChange: _propTypes.default.func,
+ ranges: _propTypes.default.arrayOf(_DayCell.rangeShape),
+ preview: _propTypes.default.shape({
+ startDate: _propTypes.default.object,
+ endDate: _propTypes.default.object,
+ color: _propTypes.default.string
+ }),
+ dateDisplayFormat: _propTypes.default.string,
+ monthDisplayFormat: _propTypes.default.string,
+ weekdayDisplayFormat: _propTypes.default.string,
+ weekStartsOn: _propTypes.default.number,
+ dayDisplayFormat: _propTypes.default.string,
+ focusedRange: _propTypes.default.arrayOf(_propTypes.default.number),
+ initialFocusedRange: _propTypes.default.arrayOf(_propTypes.default.number),
+ months: _propTypes.default.number,
+ className: _propTypes.default.string,
+ showDateDisplay: _propTypes.default.bool,
+ showPreview: _propTypes.default.bool,
+ displayMode: _propTypes.default.oneOf(['dateRange', 'date']),
+ color: _propTypes.default.string,
+ updateRange: _propTypes.default.func,
+ scroll: _propTypes.default.shape({
+ enabled: _propTypes.default.bool,
+ monthHeight: _propTypes.default.number,
+ longMonthHeight: _propTypes.default.number,
+ monthWidth: _propTypes.default.number,
+ calendarWidth: _propTypes.default.number,
+ calendarHeight: _propTypes.default.number
+ }),
+ direction: _propTypes.default.oneOf(['vertical', 'horizontal']),
+ startDatePlaceholder: _propTypes.default.string,
+ endDatePlaceholder: _propTypes.default.string,
+ navigatorRenderer: _propTypes.default.func,
+ rangeColors: _propTypes.default.arrayOf(_propTypes.default.string),
+ editableDateInputs: _propTypes.default.bool,
+ dragSelectionEnabled: _propTypes.default.bool,
+ fixedHeight: _propTypes.default.bool,
+ calendarFocus: _propTypes.default.string,
+ preventSnapRefocus: _propTypes.default.bool,
+ ariaLabels: _accessibility.ariaLabelsShape
+};
+var _default = Calendar;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/components/Calendar/index.test.js b/dist/components/Calendar/index.test.js
new file mode 100644
index 000000000..ae10d96d7
--- /dev/null
+++ b/dist/components/Calendar/index.test.js
@@ -0,0 +1,11 @@
+"use strict";
+
+var _Calendar = _interopRequireDefault(require("../Calendar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Calendar', function () {
+ test('Should resolve', function () {
+ expect(_Calendar.default).toEqual(expect.anything());
+ });
+});
\ No newline at end of file
diff --git a/dist/components/DateInput/index.js b/dist/components/DateInput/index.js
new file mode 100644
index 000000000..7f5f86c16
--- /dev/null
+++ b/dist/components/DateInput/index.js
@@ -0,0 +1,193 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _dateFns = require("date-fns");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var DateInput = /*#__PURE__*/function (_PureComponent) {
+ _inherits(DateInput, _PureComponent);
+
+ var _super = _createSuper(DateInput);
+
+ function DateInput(props, context) {
+ var _this;
+
+ _classCallCheck(this, DateInput);
+
+ _this = _super.call(this, props, context);
+
+ _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
+ var value = _this.state.value;
+
+ if (e.key === 'Enter') {
+ _this.update(value);
+ }
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+ _this.setState({
+ value: e.target.value,
+ changed: true,
+ invalid: false
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
+ var value = _this.state.value;
+
+ _this.update(value);
+ });
+
+ _this.state = {
+ invalid: false,
+ changed: false,
+ value: _this.formatDate(props)
+ };
+ return _this;
+ }
+
+ _createClass(DateInput, [{
+ key: "componentDidUpdate",
+ value: function componentDidUpdate(prevProps) {
+ var value = prevProps.value;
+
+ if (!(0, _dateFns.isEqual)(value, this.props.value)) {
+ this.setState({
+ value: this.formatDate(this.props)
+ });
+ }
+ }
+ }, {
+ key: "formatDate",
+ value: function formatDate(_ref) {
+ var value = _ref.value,
+ dateDisplayFormat = _ref.dateDisplayFormat,
+ dateOptions = _ref.dateOptions;
+
+ if (value && (0, _dateFns.isValid)(value)) {
+ return (0, _dateFns.format)(value, dateDisplayFormat, dateOptions);
+ }
+
+ return '';
+ }
+ }, {
+ key: "update",
+ value: function update(value) {
+ var _this$state = this.state,
+ invalid = _this$state.invalid,
+ changed = _this$state.changed;
+
+ if (invalid || !changed || !value) {
+ return;
+ }
+
+ var _this$props = this.props,
+ onChange = _this$props.onChange,
+ dateDisplayFormat = _this$props.dateDisplayFormat,
+ dateOptions = _this$props.dateOptions;
+ var parsed = (0, _dateFns.parse)(value, dateDisplayFormat, new Date(), dateOptions);
+
+ if ((0, _dateFns.isValid)(parsed)) {
+ this.setState({
+ changed: false
+ }, function () {
+ return onChange(parsed);
+ });
+ } else {
+ this.setState({
+ invalid: true
+ });
+ }
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this$props2 = this.props,
+ className = _this$props2.className,
+ readOnly = _this$props2.readOnly,
+ placeholder = _this$props2.placeholder,
+ ariaLabel = _this$props2.ariaLabel,
+ disabled = _this$props2.disabled,
+ onFocus = _this$props2.onFocus;
+ var _this$state2 = this.state,
+ value = _this$state2.value,
+ invalid = _this$state2.invalid;
+ return /*#__PURE__*/_react.default.createElement("span", {
+ className: (0, _classnames.default)('rdrDateInput', className)
+ }, /*#__PURE__*/_react.default.createElement("input", {
+ readOnly: readOnly,
+ disabled: disabled,
+ value: value,
+ placeholder: placeholder,
+ "aria-label": ariaLabel,
+ onKeyDown: this.onKeyDown,
+ onChange: this.onChange,
+ onBlur: this.onBlur,
+ onFocus: onFocus
+ }), invalid && /*#__PURE__*/_react.default.createElement("span", {
+ className: "rdrWarning"
+ }, "\u26A0"));
+ }
+ }]);
+
+ return DateInput;
+}(_react.PureComponent);
+
+DateInput.propTypes = {
+ value: _propTypes.default.object,
+ placeholder: _propTypes.default.string,
+ disabled: _propTypes.default.bool,
+ readOnly: _propTypes.default.bool,
+ dateOptions: _propTypes.default.object,
+ dateDisplayFormat: _propTypes.default.string,
+ ariaLabel: _propTypes.default.string,
+ className: _propTypes.default.string,
+ onFocus: _propTypes.default.func.isRequired,
+ onChange: _propTypes.default.func.isRequired
+};
+DateInput.defaultProps = {
+ readOnly: true,
+ disabled: false,
+ dateDisplayFormat: 'MMM D, YYYY'
+};
+var _default = DateInput;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/components/DateRange/index.js b/dist/components/DateRange/index.js
new file mode 100644
index 000000000..e6f1fea1d
--- /dev/null
+++ b/dist/components/DateRange/index.js
@@ -0,0 +1,269 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Calendar = _interopRequireDefault(require("../Calendar"));
+
+var _DayCell = require("../DayCell");
+
+var _utils = require("../../utils");
+
+var _dateFns = require("date-fns");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = _interopRequireDefault(require("../../styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var DateRange = /*#__PURE__*/function (_Component) {
+ _inherits(DateRange, _Component);
+
+ var _super = _createSuper(DateRange);
+
+ function DateRange(props, context) {
+ var _this;
+
+ _classCallCheck(this, DateRange);
+
+ _this = _super.call(this, props, context);
+
+ _defineProperty(_assertThisInitialized(_this), "calcNewSelection", function (value) {
+ var isSingleValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+ var focusedRange = _this.props.focusedRange || _this.state.focusedRange;
+ var _this$props = _this.props,
+ ranges = _this$props.ranges,
+ onChange = _this$props.onChange,
+ maxDate = _this$props.maxDate,
+ moveRangeOnFirstSelection = _this$props.moveRangeOnFirstSelection,
+ retainEndDateOnFirstSelection = _this$props.retainEndDateOnFirstSelection,
+ disabledDates = _this$props.disabledDates;
+ var focusedRangeIndex = focusedRange[0];
+ var selectedRange = ranges[focusedRangeIndex];
+ if (!selectedRange || !onChange) return {};
+ var startDate = selectedRange.startDate,
+ endDate = selectedRange.endDate;
+ var now = new Date();
+ var nextFocusRange;
+
+ if (!isSingleValue) {
+ startDate = value.startDate;
+ endDate = value.endDate;
+ } else if (focusedRange[1] === 0) {
+ // startDate selection
+ var dayOffset = (0, _dateFns.differenceInCalendarDays)(endDate || now, startDate);
+
+ var calculateEndDate = function calculateEndDate() {
+ if (moveRangeOnFirstSelection) {
+ return (0, _dateFns.addDays)(value, dayOffset);
+ }
+
+ if (retainEndDateOnFirstSelection) {
+ if (!endDate || (0, _dateFns.isBefore)(value, endDate)) {
+ return endDate;
+ }
+
+ return value;
+ }
+
+ return value || now;
+ };
+
+ startDate = value;
+ endDate = calculateEndDate();
+ if (maxDate) endDate = (0, _dateFns.min)([endDate, maxDate]);
+ nextFocusRange = [focusedRange[0], 1];
+ } else {
+ endDate = value;
+ } // reverse dates if startDate before endDate
+
+
+ var isStartDateSelected = focusedRange[1] === 0;
+
+ if ((0, _dateFns.isBefore)(endDate, startDate)) {
+ isStartDateSelected = !isStartDateSelected;
+ var _ref = [endDate, startDate];
+ startDate = _ref[0];
+ endDate = _ref[1];
+ }
+
+ var inValidDatesWithinRange = disabledDates.filter(function (disabledDate) {
+ return (0, _dateFns.isWithinInterval)(disabledDate, {
+ start: startDate,
+ end: endDate
+ });
+ });
+
+ if (inValidDatesWithinRange.length > 0) {
+ if (isStartDateSelected) {
+ startDate = (0, _dateFns.addDays)((0, _dateFns.max)(inValidDatesWithinRange), 1);
+ } else {
+ endDate = (0, _dateFns.addDays)((0, _dateFns.min)(inValidDatesWithinRange), -1);
+ }
+ }
+
+ if (!nextFocusRange) {
+ var nextFocusRangeIndex = (0, _utils.findNextRangeIndex)(_this.props.ranges, focusedRange[0]);
+ nextFocusRange = [nextFocusRangeIndex, 0];
+ }
+
+ return {
+ wasValid: !(inValidDatesWithinRange.length > 0),
+ range: {
+ startDate: startDate,
+ endDate: endDate
+ },
+ nextFocusRange: nextFocusRange
+ };
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "setSelection", function (value, isSingleValue) {
+ var _this$props2 = _this.props,
+ onChange = _this$props2.onChange,
+ ranges = _this$props2.ranges,
+ onRangeFocusChange = _this$props2.onRangeFocusChange;
+ var focusedRange = _this.props.focusedRange || _this.state.focusedRange;
+ var focusedRangeIndex = focusedRange[0];
+ var selectedRange = ranges[focusedRangeIndex];
+ if (!selectedRange) return;
+
+ var newSelection = _this.calcNewSelection(value, isSingleValue);
+
+ onChange(_defineProperty({}, selectedRange.key || "range".concat(focusedRangeIndex + 1), _objectSpread(_objectSpread({}, selectedRange), newSelection.range)));
+
+ _this.setState({
+ focusedRange: newSelection.nextFocusRange,
+ preview: null
+ });
+
+ onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleRangeFocusChange", function (focusedRange) {
+ _this.setState({
+ focusedRange: focusedRange
+ });
+
+ _this.props.onRangeFocusChange && _this.props.onRangeFocusChange(focusedRange);
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "updatePreview", function (val) {
+ var _ranges$focusedRange$;
+
+ if (!val) {
+ _this.setState({
+ preview: null
+ });
+
+ return;
+ }
+
+ var _this$props3 = _this.props,
+ rangeColors = _this$props3.rangeColors,
+ ranges = _this$props3.ranges;
+ var focusedRange = _this.props.focusedRange || _this.state.focusedRange;
+ var color = ((_ranges$focusedRange$ = ranges[focusedRange[0]]) === null || _ranges$focusedRange$ === void 0 ? void 0 : _ranges$focusedRange$.color) || rangeColors[focusedRange[0]] || color;
+
+ _this.setState({
+ preview: _objectSpread(_objectSpread({}, val.range), {}, {
+ color: color
+ })
+ });
+ });
+
+ _this.state = {
+ focusedRange: props.initialFocusedRange || [(0, _utils.findNextRangeIndex)(props.ranges), 0],
+ preview: null
+ };
+ _this.styles = (0, _utils.generateStyles)([_styles.default, props.classNames]);
+ return _this;
+ }
+
+ _createClass(DateRange, [{
+ key: "render",
+ value: function render() {
+ var _this2 = this;
+
+ return /*#__PURE__*/_react.default.createElement(_Calendar.default, _extends({
+ focusedRange: this.state.focusedRange,
+ onRangeFocusChange: this.handleRangeFocusChange,
+ preview: this.state.preview,
+ onPreviewChange: function onPreviewChange(value) {
+ _this2.updatePreview(value ? _this2.calcNewSelection(value) : null);
+ }
+ }, this.props, {
+ displayMode: "dateRange",
+ className: (0, _classnames.default)(this.styles.dateRangeWrapper, this.props.className),
+ onChange: this.setSelection,
+ updateRange: function updateRange(val) {
+ return _this2.setSelection(val, false);
+ },
+ ref: function ref(target) {
+ _this2.calendar = target;
+ }
+ }));
+ }
+ }]);
+
+ return DateRange;
+}(_react.Component);
+
+DateRange.defaultProps = {
+ classNames: {},
+ ranges: [],
+ moveRangeOnFirstSelection: false,
+ retainEndDateOnFirstSelection: false,
+ rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+ disabledDates: []
+};
+DateRange.propTypes = _objectSpread(_objectSpread({}, _Calendar.default.propTypes), {}, {
+ onChange: _propTypes.default.func,
+ onRangeFocusChange: _propTypes.default.func,
+ className: _propTypes.default.string,
+ ranges: _propTypes.default.arrayOf(_DayCell.rangeShape),
+ moveRangeOnFirstSelection: _propTypes.default.bool,
+ retainEndDateOnFirstSelection: _propTypes.default.bool
+});
+var _default = DateRange;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/components/DateRange/index.test.js b/dist/components/DateRange/index.test.js
new file mode 100644
index 000000000..91e137f7c
--- /dev/null
+++ b/dist/components/DateRange/index.test.js
@@ -0,0 +1,100 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dateFns = require("date-fns");
+
+var _DateRange = _interopRequireDefault(require("../DateRange"));
+
+var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+var testRenderer = null;
+var instance = null;
+var endDate = new Date();
+var startDate = (0, _dateFns.subDays)(endDate, 7);
+var commonProps = {
+ ranges: [{
+ startDate: startDate,
+ endDate: endDate,
+ key: 'selection'
+ }],
+ onChange: function onChange() {},
+ moveRangeOnFirstSelection: false
+};
+
+var compareRanges = function compareRanges(newRange, assertionRange) {
+ ['startDate', 'endDate'].forEach(function (key) {
+ if (!newRange[key] || !assertionRange[key]) {
+ return expect(newRange[key]).toEqual(assertionRange[key]);
+ }
+
+ return expect((0, _dateFns.isSameDay)(newRange[key], assertionRange[key])).toEqual(true);
+ });
+};
+
+beforeEach(function () {
+ testRenderer = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_DateRange.default, commonProps));
+ instance = testRenderer.getInstance();
+});
+describe('DateRange', function () {
+ test('Should resolve', function () {
+ expect(_DateRange.default).toEqual(expect.anything());
+ });
+ test('calculate new selection by resetting end date', function () {
+ var methodResult = instance.calcNewSelection((0, _dateFns.subDays)(endDate, 10), true);
+ compareRanges(methodResult.range, {
+ startDate: (0, _dateFns.subDays)(endDate, 10),
+ endDate: (0, _dateFns.subDays)(endDate, 10)
+ });
+ });
+ test('calculate new selection by resetting end date if start date is not before', function () {
+ var methodResult = instance.calcNewSelection((0, _dateFns.addDays)(endDate, 2), true);
+ compareRanges(methodResult.range, {
+ startDate: (0, _dateFns.addDays)(endDate, 2),
+ endDate: (0, _dateFns.addDays)(endDate, 2)
+ });
+ });
+ test('calculate new selection based on moveRangeOnFirstSelection prop', function () {
+ testRenderer.update( /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({}, commonProps, {
+ moveRangeOnFirstSelection: true
+ })));
+ var methodResult = instance.calcNewSelection((0, _dateFns.subDays)(endDate, 10), true);
+ compareRanges(methodResult.range, {
+ startDate: (0, _dateFns.subDays)(endDate, 10),
+ endDate: (0, _dateFns.subDays)(endDate, 3)
+ });
+ });
+ test('calculate new selection by retaining end date, based on retainEndDateOnFirstSelection prop', function () {
+ testRenderer.update( /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({}, commonProps, {
+ retainEndDateOnFirstSelection: true
+ })));
+ var methodResult = instance.calcNewSelection((0, _dateFns.subDays)(endDate, 10), true);
+ compareRanges(methodResult.range, {
+ startDate: (0, _dateFns.subDays)(endDate, 10),
+ endDate: endDate
+ });
+ });
+ test('calculate new selection by retaining the unset end date, based on retainEndDateOnFirstSelection prop', function () {
+ testRenderer.update( /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({}, commonProps, {
+ ranges: [_objectSpread(_objectSpread({}, commonProps.ranges[0]), {}, {
+ endDate: null
+ })],
+ retainEndDateOnFirstSelection: true
+ })));
+ var methodResult = instance.calcNewSelection((0, _dateFns.subDays)(endDate, 10), true);
+ compareRanges(methodResult.range, {
+ startDate: (0, _dateFns.subDays)(endDate, 10),
+ endDate: null
+ });
+ });
+});
\ No newline at end of file
diff --git a/dist/components/DateRangePicker/index.js b/dist/components/DateRangePicker/index.js
new file mode 100644
index 000000000..2210d04d9
--- /dev/null
+++ b/dist/components/DateRangePicker/index.js
@@ -0,0 +1,116 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DateRange = _interopRequireDefault(require("../DateRange"));
+
+var _DefinedRange = _interopRequireDefault(require("../DefinedRange"));
+
+var _utils = require("../../utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = _interopRequireDefault(require("../../styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var DateRangePicker = /*#__PURE__*/function (_Component) {
+ _inherits(DateRangePicker, _Component);
+
+ var _super = _createSuper(DateRangePicker);
+
+ function DateRangePicker(props) {
+ var _this;
+
+ _classCallCheck(this, DateRangePicker);
+
+ _this = _super.call(this, props);
+ _this.state = {
+ focusedRange: [(0, _utils.findNextRangeIndex)(props.ranges), 0]
+ };
+ _this.styles = (0, _utils.generateStyles)([_styles.default, props.classNames]);
+ return _this;
+ }
+
+ _createClass(DateRangePicker, [{
+ key: "render",
+ value: function render() {
+ var _this2 = this;
+
+ var focusedRange = this.state.focusedRange;
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: (0, _classnames.default)(this.styles.dateRangePickerWrapper, this.props.className)
+ }, /*#__PURE__*/_react.default.createElement(_DefinedRange.default, _extends({
+ focusedRange: focusedRange,
+ onPreviewChange: function onPreviewChange(value) {
+ return _this2.dateRange.updatePreview(value ? _this2.dateRange.calcNewSelection(value, typeof value === 'string') : null);
+ }
+ }, this.props, {
+ range: this.props.ranges[focusedRange[0]],
+ className: undefined
+ })), /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({
+ onRangeFocusChange: function onRangeFocusChange(focusedRange) {
+ return _this2.setState({
+ focusedRange: focusedRange
+ });
+ },
+ focusedRange: focusedRange
+ }, this.props, {
+ ref: function ref(t) {
+ return _this2.dateRange = t;
+ },
+ className: undefined
+ })));
+ }
+ }]);
+
+ return DateRangePicker;
+}(_react.Component);
+
+DateRangePicker.defaultProps = {};
+DateRangePicker.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _DateRange.default.propTypes), _DefinedRange.default.propTypes), {}, {
+ className: _propTypes.default.string
+});
+var _default = DateRangePicker;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/components/DayCell/index.js b/dist/components/DayCell/index.js
new file mode 100644
index 000000000..b458d97ce
--- /dev/null
+++ b/dist/components/DayCell/index.js
@@ -0,0 +1,314 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = exports.rangeShape = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames4 = _interopRequireDefault(require("classnames"));
+
+var _dateFns = require("date-fns");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var DayCell = /*#__PURE__*/function (_Component) {
+ _inherits(DayCell, _Component);
+
+ var _super = _createSuper(DayCell);
+
+ function DayCell(props, context) {
+ var _this;
+
+ _classCallCheck(this, DayCell);
+
+ _this = _super.call(this, props, context);
+
+ _defineProperty(_assertThisInitialized(_this), "handleKeyEvent", function (event) {
+ var _this$props = _this.props,
+ day = _this$props.day,
+ onMouseDown = _this$props.onMouseDown,
+ onMouseUp = _this$props.onMouseUp;
+
+ if ([13
+ /* space */
+ , 32
+ /* enter */
+ ].includes(event.keyCode)) {
+ if (event.type === 'keydown') onMouseDown(day);else onMouseUp(day);
+ }
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "handleMouseEvent", function (event) {
+ var _this$props2 = _this.props,
+ day = _this$props2.day,
+ disabled = _this$props2.disabled,
+ onPreviewChange = _this$props2.onPreviewChange,
+ onMouseEnter = _this$props2.onMouseEnter,
+ onMouseDown = _this$props2.onMouseDown,
+ onMouseUp = _this$props2.onMouseUp;
+ var stateChanges = {};
+
+ if (disabled) {
+ onPreviewChange();
+ return;
+ }
+
+ switch (event.type) {
+ case 'mouseenter':
+ onMouseEnter(day);
+ onPreviewChange(day);
+ stateChanges.hover = true;
+ break;
+
+ case 'blur':
+ case 'mouseleave':
+ stateChanges.hover = false;
+ break;
+
+ case 'mousedown':
+ stateChanges.active = true;
+ onMouseDown(day);
+ break;
+
+ case 'mouseup':
+ event.stopPropagation();
+ stateChanges.active = false;
+ onMouseUp(day);
+ break;
+
+ case 'focus':
+ onPreviewChange(day);
+ break;
+ }
+
+ if (Object.keys(stateChanges).length) {
+ _this.setState(stateChanges);
+ }
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "getClassNames", function () {
+ var _classnames;
+
+ var _this$props3 = _this.props,
+ isPassive = _this$props3.isPassive,
+ isToday = _this$props3.isToday,
+ isWeekend = _this$props3.isWeekend,
+ isStartOfWeek = _this$props3.isStartOfWeek,
+ isEndOfWeek = _this$props3.isEndOfWeek,
+ isStartOfMonth = _this$props3.isStartOfMonth,
+ isEndOfMonth = _this$props3.isEndOfMonth,
+ disabled = _this$props3.disabled,
+ styles = _this$props3.styles;
+ return (0, _classnames4.default)(styles.day, (_classnames = {}, _defineProperty(_classnames, styles.dayPassive, isPassive), _defineProperty(_classnames, styles.dayDisabled, disabled), _defineProperty(_classnames, styles.dayToday, isToday), _defineProperty(_classnames, styles.dayWeekend, isWeekend), _defineProperty(_classnames, styles.dayStartOfWeek, isStartOfWeek), _defineProperty(_classnames, styles.dayEndOfWeek, isEndOfWeek), _defineProperty(_classnames, styles.dayStartOfMonth, isStartOfMonth), _defineProperty(_classnames, styles.dayEndOfMonth, isEndOfMonth), _defineProperty(_classnames, styles.dayHovered, _this.state.hover), _defineProperty(_classnames, styles.dayActive, _this.state.active), _classnames));
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderPreviewPlaceholder", function () {
+ var _classnames2;
+
+ var _this$props4 = _this.props,
+ preview = _this$props4.preview,
+ day = _this$props4.day,
+ styles = _this$props4.styles;
+ if (!preview) return null;
+ var startDate = preview.startDate ? (0, _dateFns.endOfDay)(preview.startDate) : null;
+ var endDate = preview.endDate ? (0, _dateFns.startOfDay)(preview.endDate) : null;
+ var isInRange = (!startDate || (0, _dateFns.isAfter)(day, startDate)) && (!endDate || (0, _dateFns.isBefore)(day, endDate));
+ var isStartEdge = !isInRange && (0, _dateFns.isSameDay)(day, startDate);
+ var isEndEdge = !isInRange && (0, _dateFns.isSameDay)(day, endDate);
+ return /*#__PURE__*/_react.default.createElement("span", {
+ className: (0, _classnames4.default)((_classnames2 = {}, _defineProperty(_classnames2, styles.dayStartPreview, isStartEdge), _defineProperty(_classnames2, styles.dayInPreview, isInRange), _defineProperty(_classnames2, styles.dayEndPreview, isEndEdge), _classnames2)),
+ style: {
+ color: preview.color
+ }
+ });
+ });
+
+ _defineProperty(_assertThisInitialized(_this), "renderSelectionPlaceholders", function () {
+ var _this$props5 = _this.props,
+ styles = _this$props5.styles,
+ ranges = _this$props5.ranges,
+ day = _this$props5.day;
+
+ if (_this.props.displayMode === 'date') {
+ var isSelected = (0, _dateFns.isSameDay)(_this.props.day, _this.props.date);
+ return isSelected ? /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.selected,
+ style: {
+ color: _this.props.color
+ }
+ }) : null;
+ }
+
+ var inRanges = ranges.reduce(function (result, range) {
+ var startDate = range.startDate;
+ var endDate = range.endDate;
+
+ if (startDate && endDate && (0, _dateFns.isBefore)(endDate, startDate)) {
+ var _ref = [endDate, startDate];
+ startDate = _ref[0];
+ endDate = _ref[1];
+ }
+
+ startDate = startDate ? (0, _dateFns.endOfDay)(startDate) : null;
+ endDate = endDate ? (0, _dateFns.startOfDay)(endDate) : null;
+ var isInRange = (!startDate || (0, _dateFns.isAfter)(day, startDate)) && (!endDate || (0, _dateFns.isBefore)(day, endDate));
+ var isStartEdge = !isInRange && (0, _dateFns.isSameDay)(day, startDate);
+ var isEndEdge = !isInRange && (0, _dateFns.isSameDay)(day, endDate);
+
+ if (isInRange || isStartEdge || isEndEdge) {
+ return [].concat(_toConsumableArray(result), [_objectSpread({
+ isStartEdge: isStartEdge,
+ isEndEdge: isEndEdge,
+ isInRange: isInRange
+ }, range)]);
+ }
+
+ return result;
+ }, []);
+ return inRanges.map(function (range, i) {
+ var _classnames3;
+
+ return /*#__PURE__*/_react.default.createElement("span", {
+ key: i,
+ id: range.isStartEdge || range.isEndEdge ? 'rangeEdgeCustomId' : undefined,
+ className: (0, _classnames4.default)((_classnames3 = {}, _defineProperty(_classnames3, styles.startEdge, range.isStartEdge), _defineProperty(_classnames3, styles.endEdge, range.isEndEdge), _defineProperty(_classnames3, styles.inRange, range.isInRange), _classnames3)),
+ style: {
+ color: range.color || _this.props.color
+ }
+ });
+ });
+ });
+
+ _this.state = {
+ hover: false,
+ active: false
+ };
+ return _this;
+ }
+
+ _createClass(DayCell, [{
+ key: "render",
+ value: function render() {
+ var dayContentRenderer = this.props.dayContentRenderer;
+ return /*#__PURE__*/_react.default.createElement("button", _extends({
+ type: "button",
+ onMouseEnter: this.handleMouseEvent,
+ onMouseLeave: this.handleMouseEvent,
+ onFocus: this.handleMouseEvent,
+ onMouseDown: this.handleMouseEvent,
+ onMouseUp: this.handleMouseEvent,
+ onBlur: this.handleMouseEvent,
+ onPauseCapture: this.handleMouseEvent,
+ onKeyDown: this.handleKeyEvent,
+ onKeyUp: this.handleKeyEvent,
+ className: this.getClassNames(this.props.styles)
+ }, this.props.disabled || this.props.isPassive ? {
+ tabIndex: -1
+ } : {}, {
+ style: {
+ color: this.props.color
+ }
+ }), this.renderSelectionPlaceholders(), this.renderPreviewPlaceholder(), /*#__PURE__*/_react.default.createElement("span", {
+ className: this.props.styles.dayNumber
+ }, (dayContentRenderer === null || dayContentRenderer === void 0 ? void 0 : dayContentRenderer(this.props.day)) || /*#__PURE__*/_react.default.createElement("span", {
+ className: "dayNumberSpan"
+ }, (0, _dateFns.format)(this.props.day, this.props.dayDisplayFormat))));
+ }
+ }]);
+
+ return DayCell;
+}(_react.Component);
+
+DayCell.defaultProps = {};
+
+var rangeShape = _propTypes.default.shape({
+ startDate: _propTypes.default.object,
+ endDate: _propTypes.default.object,
+ color: _propTypes.default.string,
+ key: _propTypes.default.string,
+ autoFocus: _propTypes.default.bool,
+ disabled: _propTypes.default.bool,
+ showDateDisplay: _propTypes.default.bool
+});
+
+exports.rangeShape = rangeShape;
+DayCell.propTypes = {
+ day: _propTypes.default.object.isRequired,
+ dayDisplayFormat: _propTypes.default.string,
+ date: _propTypes.default.object,
+ ranges: _propTypes.default.arrayOf(rangeShape),
+ preview: _propTypes.default.shape({
+ startDate: _propTypes.default.object,
+ endDate: _propTypes.default.object,
+ color: _propTypes.default.string
+ }),
+ onPreviewChange: _propTypes.default.func,
+ previewColor: _propTypes.default.string,
+ disabled: _propTypes.default.bool,
+ isPassive: _propTypes.default.bool,
+ isToday: _propTypes.default.bool,
+ isWeekend: _propTypes.default.bool,
+ isStartOfWeek: _propTypes.default.bool,
+ isEndOfWeek: _propTypes.default.bool,
+ isStartOfMonth: _propTypes.default.bool,
+ isEndOfMonth: _propTypes.default.bool,
+ color: _propTypes.default.string,
+ displayMode: _propTypes.default.oneOf(['dateRange', 'date']),
+ styles: _propTypes.default.object,
+ onMouseDown: _propTypes.default.func,
+ onMouseUp: _propTypes.default.func,
+ onMouseEnter: _propTypes.default.func,
+ dayContentRenderer: _propTypes.default.func
+};
+var _default = DayCell;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/components/DefinedRange/index.js b/dist/components/DefinedRange/index.js
new file mode 100644
index 000000000..014a20432
--- /dev/null
+++ b/dist/components/DefinedRange/index.js
@@ -0,0 +1,220 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = _interopRequireDefault(require("../../styles"));
+
+var _defaultRanges = require("../../defaultRanges");
+
+var _DayCell = require("../DayCell");
+
+var _InputRangeField = _interopRequireDefault(require("../InputRangeField"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var DefinedRange = /*#__PURE__*/function (_Component) {
+ _inherits(DefinedRange, _Component);
+
+ var _super = _createSuper(DefinedRange);
+
+ function DefinedRange(props) {
+ var _this;
+
+ _classCallCheck(this, DefinedRange);
+
+ _this = _super.call(this, props);
+
+ _defineProperty(_assertThisInitialized(_this), "handleRangeChange", function (range) {
+ var _this$props = _this.props,
+ onChange = _this$props.onChange,
+ ranges = _this$props.ranges,
+ focusedRange = _this$props.focusedRange;
+ var selectedRange = ranges[focusedRange[0]];
+ if (!onChange || !selectedRange) return;
+ onChange(_defineProperty({}, selectedRange.key || "range".concat(focusedRange[0] + 1), _objectSpread(_objectSpread({}, selectedRange), range)));
+ });
+
+ _this.state = {
+ rangeOffset: 0,
+ focusedInput: -1
+ };
+ return _this;
+ }
+
+ _createClass(DefinedRange, [{
+ key: "getRangeOptionValue",
+ value: function getRangeOptionValue(option) {
+ var _this$props2 = this.props,
+ _this$props2$ranges = _this$props2.ranges,
+ ranges = _this$props2$ranges === void 0 ? [] : _this$props2$ranges,
+ _this$props2$focusedR = _this$props2.focusedRange,
+ focusedRange = _this$props2$focusedR === void 0 ? [] : _this$props2$focusedR;
+
+ if (typeof option.getCurrentValue !== 'function') {
+ return '';
+ }
+
+ var selectedRange = ranges[focusedRange[0]] || {};
+ return option.getCurrentValue(selectedRange) || '';
+ }
+ }, {
+ key: "getSelectedRange",
+ value: function getSelectedRange(ranges, staticRange) {
+ var focusedRangeIndex = ranges.findIndex(function (range) {
+ if (!range.startDate || !range.endDate || range.disabled) return false;
+ return staticRange.isSelected(range);
+ });
+ var selectedRange = ranges[focusedRangeIndex];
+ return {
+ selectedRange: selectedRange,
+ focusedRangeIndex: focusedRangeIndex
+ };
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this2 = this;
+
+ var _this$props3 = this.props,
+ headerContent = _this$props3.headerContent,
+ footerContent = _this$props3.footerContent,
+ onPreviewChange = _this$props3.onPreviewChange,
+ inputRanges = _this$props3.inputRanges,
+ staticRanges = _this$props3.staticRanges,
+ ranges = _this$props3.ranges,
+ renderStaticRangeLabel = _this$props3.renderStaticRangeLabel,
+ rangeColors = _this$props3.rangeColors,
+ className = _this$props3.className;
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: (0, _classnames.default)(_styles.default.definedRangesWrapper, className)
+ }, headerContent, /*#__PURE__*/_react.default.createElement("div", {
+ className: _styles.default.staticRanges
+ }, staticRanges.map(function (staticRange, i) {
+ var _this2$getSelectedRan = _this2.getSelectedRange(ranges, staticRange),
+ selectedRange = _this2$getSelectedRan.selectedRange,
+ focusedRangeIndex = _this2$getSelectedRan.focusedRangeIndex;
+
+ var labelContent;
+
+ if (staticRange.hasCustomRendering) {
+ labelContent = renderStaticRangeLabel(staticRange);
+ } else {
+ labelContent = staticRange.label;
+ }
+
+ return /*#__PURE__*/_react.default.createElement("button", {
+ type: "button",
+ className: (0, _classnames.default)(_styles.default.staticRange, _defineProperty({}, _styles.default.staticRangeSelected, Boolean(selectedRange))),
+ style: {
+ color: selectedRange ? selectedRange.color || rangeColors[focusedRangeIndex] : null
+ },
+ key: i,
+ onClick: function onClick() {
+ return _this2.handleRangeChange(staticRange.range(_this2.props));
+ },
+ onFocus: function onFocus() {
+ return onPreviewChange && onPreviewChange(staticRange.range(_this2.props));
+ },
+ onMouseOver: function onMouseOver() {
+ return onPreviewChange && onPreviewChange(staticRange.range(_this2.props));
+ },
+ onMouseLeave: function onMouseLeave() {
+ onPreviewChange && onPreviewChange();
+ }
+ }, /*#__PURE__*/_react.default.createElement("span", {
+ tabIndex: -1,
+ className: _styles.default.staticRangeLabel
+ }, labelContent));
+ })), /*#__PURE__*/_react.default.createElement("div", {
+ className: _styles.default.inputRanges
+ }, inputRanges.map(function (rangeOption, i) {
+ return /*#__PURE__*/_react.default.createElement(_InputRangeField.default, {
+ key: i,
+ styles: _styles.default,
+ label: rangeOption.label,
+ onFocus: function onFocus() {
+ return _this2.setState({
+ focusedInput: i,
+ rangeOffset: 0
+ });
+ },
+ onBlur: function onBlur() {
+ return _this2.setState({
+ rangeOffset: 0
+ });
+ },
+ onChange: function onChange(value) {
+ return _this2.handleRangeChange(rangeOption.range(value, _this2.props));
+ },
+ value: _this2.getRangeOptionValue(rangeOption)
+ });
+ })), footerContent);
+ }
+ }]);
+
+ return DefinedRange;
+}(_react.Component);
+
+DefinedRange.propTypes = {
+ inputRanges: _propTypes.default.array,
+ staticRanges: _propTypes.default.array,
+ ranges: _propTypes.default.arrayOf(_DayCell.rangeShape),
+ focusedRange: _propTypes.default.arrayOf(_propTypes.default.number),
+ onPreviewChange: _propTypes.default.func,
+ onChange: _propTypes.default.func,
+ footerContent: _propTypes.default.any,
+ headerContent: _propTypes.default.any,
+ rangeColors: _propTypes.default.arrayOf(_propTypes.default.string),
+ className: _propTypes.default.string,
+ renderStaticRangeLabel: _propTypes.default.func
+};
+DefinedRange.defaultProps = {
+ inputRanges: _defaultRanges.defaultInputRanges,
+ staticRanges: _defaultRanges.defaultStaticRanges,
+ ranges: [],
+ rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+ focusedRange: [0, 0]
+};
+var _default = DefinedRange;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/components/DefinedRange/index.test.js b/dist/components/DefinedRange/index.test.js
new file mode 100644
index 000000000..56b266389
--- /dev/null
+++ b/dist/components/DefinedRange/index.test.js
@@ -0,0 +1,115 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _DefinedRange = _interopRequireDefault(require("../DefinedRange"));
+
+var _dateFns = require("date-fns");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('DefinedRange tests', function () {
+ test('Should call "renderStaticRangeLabel" callback correct amount of times according to the "hasCustomRendering" option', function () {
+ var renderStaticRangeLabel = jest.fn();
+ (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DefinedRange.default, {
+ staticRanges: [{
+ label: 'Dynamic Label',
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ },
+ hasCustomRendering: true
+ }, {
+ label: 'Static Label',
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ }
+ }, {
+ label: 'Hede',
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ },
+ hasCustomRendering: true
+ }],
+ renderStaticRangeLabel: renderStaticRangeLabel
+ }));
+ expect(renderStaticRangeLabel).toHaveBeenCalledTimes(2);
+ });
+ test('Should render dynamic static label contents correctly', function () {
+ var renderItalicLabelContent = function renderItalicLabelContent() {
+ return /*#__PURE__*/_react.default.createElement("i", {
+ className: 'italic-label-content'
+ }, 'Italic Content');
+ };
+
+ var renderBoldLabelContent = function renderBoldLabelContent() {
+ return /*#__PURE__*/_react.default.createElement("b", {
+ className: 'bold-label-content'
+ }, 'Bold Content');
+ };
+
+ var renderSomethingElse = function renderSomethingElse() {
+ return /*#__PURE__*/_react.default.createElement("img", {
+ className: 'random-image'
+ });
+ };
+
+ var renderStaticRangeLabel = function renderStaticRangeLabel(staticRange) {
+ var result;
+
+ if (staticRange.id === 'italic') {
+ result = renderItalicLabelContent();
+ } else if (staticRange.id === 'bold') {
+ result = renderBoldLabelContent();
+ } else {
+ result = renderSomethingElse();
+ }
+
+ return result;
+ };
+
+ var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_DefinedRange.default, {
+ staticRanges: [{
+ id: 'italic',
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ },
+ hasCustomRendering: true
+ }, {
+ label: 'Static Label',
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ }
+ }, {
+ id: 'whatever',
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ },
+ hasCustomRendering: true
+ }, {
+ id: 'bold',
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ },
+ hasCustomRendering: true
+ }],
+ renderStaticRangeLabel: renderStaticRangeLabel
+ }));
+ expect(wrapper).toMatchSnapshot();
+ });
+});
\ No newline at end of file
diff --git a/dist/components/InputRangeField/index.js b/dist/components/InputRangeField/index.js
new file mode 100644
index 000000000..0a3166029
--- /dev/null
+++ b/dist/components/InputRangeField/index.js
@@ -0,0 +1,124 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var MIN = 0;
+var MAX = 99999;
+
+var InputRangeField = /*#__PURE__*/function (_Component) {
+ _inherits(InputRangeField, _Component);
+
+ var _super = _createSuper(InputRangeField);
+
+ function InputRangeField(props, context) {
+ var _this;
+
+ _classCallCheck(this, InputRangeField);
+
+ _this = _super.call(this, props, context);
+
+ _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+ var onChange = _this.props.onChange;
+ var value = parseInt(e.target.value, 10);
+ value = isNaN(value) ? 0 : Math.max(Math.min(MAX, value), MIN);
+ onChange(value);
+ });
+
+ return _this;
+ }
+
+ _createClass(InputRangeField, [{
+ key: "shouldComponentUpdate",
+ value: function shouldComponentUpdate(nextProps) {
+ var _this$props = this.props,
+ value = _this$props.value,
+ label = _this$props.label,
+ placeholder = _this$props.placeholder;
+ return value !== nextProps.value || label !== nextProps.label || placeholder !== nextProps.placeholder;
+ }
+ }, {
+ key: "render",
+ value: function render() {
+ var _this$props2 = this.props,
+ label = _this$props2.label,
+ placeholder = _this$props2.placeholder,
+ value = _this$props2.value,
+ styles = _this$props2.styles,
+ onBlur = _this$props2.onBlur,
+ onFocus = _this$props2.onFocus;
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: styles.inputRange
+ }, /*#__PURE__*/_react.default.createElement("input", {
+ className: styles.inputRangeInput,
+ placeholder: placeholder,
+ value: value,
+ min: MIN,
+ max: MAX,
+ onChange: this.onChange,
+ onFocus: onFocus,
+ onBlur: onBlur
+ }), /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.inputRangeLabel
+ }, label));
+ }
+ }]);
+
+ return InputRangeField;
+}(_react.Component);
+
+InputRangeField.propTypes = {
+ value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+ label: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.node]).isRequired,
+ placeholder: _propTypes.default.string,
+ styles: _propTypes.default.shape({
+ inputRange: _propTypes.default.string,
+ inputRangeInput: _propTypes.default.string,
+ inputRangeLabel: _propTypes.default.string
+ }).isRequired,
+ onBlur: _propTypes.default.func.isRequired,
+ onFocus: _propTypes.default.func.isRequired,
+ onChange: _propTypes.default.func.isRequired
+};
+InputRangeField.defaultProps = {
+ value: '',
+ placeholder: '-'
+};
+var _default = InputRangeField;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/components/InputRangeField/index.test.js b/dist/components/InputRangeField/index.test.js
new file mode 100644
index 000000000..ee9af016c
--- /dev/null
+++ b/dist/components/InputRangeField/index.test.js
@@ -0,0 +1,122 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _InputRangeField = _interopRequireDefault(require("../InputRangeField"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+ inputRange: 'range',
+ inputRangeInput: 'input',
+ inputRangeLabel: 'label'
+};
+
+var toChangeEvent = function toChangeEvent(value) {
+ return {
+ target: {
+ value: value
+ }
+ };
+};
+
+describe('InputRangeField tests', function () {
+ test('Should parse input value to number', function () {
+ var onChange = jest.fn();
+ var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, {
+ label: "Input label",
+ styles: styles,
+ onChange: onChange,
+ onFocus: jest.fn(),
+ onBlur: jest.fn()
+ }));
+ wrapper.find('input').simulate('change', toChangeEvent('3'));
+ expect(onChange).lastCalledWith(3);
+ wrapper.find('input').simulate('change', toChangeEvent(12));
+ expect(onChange).lastCalledWith(12);
+ wrapper.find('input').simulate('change', toChangeEvent(''));
+ expect(onChange).lastCalledWith(0);
+ wrapper.find('input').simulate('change', toChangeEvent('invalid number'));
+ expect(onChange).lastCalledWith(0);
+ wrapper.find('input').simulate('change', toChangeEvent(-12));
+ expect(onChange).lastCalledWith(0);
+ wrapper.find('input').simulate('change', toChangeEvent(99999999));
+ expect(onChange).lastCalledWith(99999);
+ expect(onChange).toHaveBeenCalledTimes(6);
+ expect(wrapper).toMatchSnapshot();
+ });
+ test('Should rerender when props change', function () {
+ var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, {
+ value: 12,
+ placeholder: "Placeholder",
+ label: "Input label",
+ styles: styles,
+ onChange: jest.fn(),
+ onFocus: jest.fn(),
+ onBlur: jest.fn()
+ }));
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual(12);
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label');
+ wrapper.setProps({
+ value: '32'
+ });
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32');
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label');
+ wrapper.setProps({
+ placeholder: '-'
+ });
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32');
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label');
+ wrapper.setProps({
+ label: 'Label'
+ });
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32');
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Label');
+ });
+ test('Should render the label as a Component', function () {
+ var Label = function Label() {
+ return /*#__PURE__*/_react.default.createElement("span", {
+ className: "input-range-field-label"
+ }, "Input label");
+ };
+
+ var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, {
+ value: 12,
+ placeholder: "Placeholder",
+ label: /*#__PURE__*/_react.default.createElement(Label, null),
+ styles: styles,
+ onChange: jest.fn(),
+ onFocus: jest.fn(),
+ onBlur: jest.fn()
+ }));
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual(12);
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label');
+ expect(wrapper.find(".input-range-field-label").text()).toEqual('Input label');
+ wrapper.setProps({
+ value: '32'
+ });
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32');
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label');
+ wrapper.setProps({
+ placeholder: '-'
+ });
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32');
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label');
+ wrapper.setProps({
+ label: 'Label'
+ });
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32');
+ expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-');
+ expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Label');
+ });
+});
\ No newline at end of file
diff --git a/dist/components/Month/index.js b/dist/components/Month/index.js
new file mode 100644
index 000000000..aa041ffa6
--- /dev/null
+++ b/dist/components/Month/index.js
@@ -0,0 +1,192 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DayCell = _interopRequireWildcard(require("../DayCell"));
+
+var _dateFns = require("date-fns");
+
+var _utils = require("../../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function renderWeekdays(styles, dateOptions, weekdayDisplayFormat) {
+ var now = new Date();
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: styles.weekDays
+ }, (0, _dateFns.eachDayOfInterval)({
+ start: (0, _dateFns.startOfWeek)(now, dateOptions),
+ end: (0, _dateFns.endOfWeek)(now, dateOptions)
+ }).map(function (day, i) {
+ return /*#__PURE__*/_react.default.createElement("span", {
+ className: styles.weekDay,
+ key: i
+ }, (0, _dateFns.format)(day, weekdayDisplayFormat, dateOptions));
+ }));
+}
+
+var Month = /*#__PURE__*/function (_PureComponent) {
+ _inherits(Month, _PureComponent);
+
+ var _super = _createSuper(Month);
+
+ function Month() {
+ _classCallCheck(this, Month);
+
+ return _super.apply(this, arguments);
+ }
+
+ _createClass(Month, [{
+ key: "render",
+ value: function render() {
+ var _this = this;
+
+ var now = new Date();
+ var _this$props = this.props,
+ displayMode = _this$props.displayMode,
+ focusedRange = _this$props.focusedRange,
+ drag = _this$props.drag,
+ styles = _this$props.styles,
+ disabledDates = _this$props.disabledDates,
+ disabledDay = _this$props.disabledDay;
+ var minDate = this.props.minDate && (0, _dateFns.startOfDay)(this.props.minDate);
+ var maxDate = this.props.maxDate && (0, _dateFns.endOfDay)(this.props.maxDate);
+ var monthDisplay = (0, _utils.getMonthDisplayRange)(this.props.month, this.props.dateOptions, this.props.fixedHeight);
+ var ranges = this.props.ranges;
+
+ if (displayMode === 'dateRange' && drag.status) {
+ var _drag$range = drag.range,
+ startDate = _drag$range.startDate,
+ endDate = _drag$range.endDate;
+ ranges = ranges.map(function (range, i) {
+ if (i !== focusedRange[0]) return range;
+ return _objectSpread(_objectSpread({}, range), {}, {
+ startDate: startDate,
+ endDate: endDate
+ });
+ });
+ }
+
+ var showPreview = this.props.showPreview && !drag.disablePreview;
+ return /*#__PURE__*/_react.default.createElement("div", {
+ className: styles.month,
+ style: this.props.style
+ }, this.props.showMonthName ? /*#__PURE__*/_react.default.createElement("div", {
+ className: styles.monthName
+ }, (0, _dateFns.format)(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions)) : null, this.props.showWeekDays && renderWeekdays(styles, this.props.dateOptions, this.props.weekdayDisplayFormat), /*#__PURE__*/_react.default.createElement("div", {
+ className: styles.days,
+ onMouseLeave: this.props.onMouseLeave
+ }, (0, _dateFns.eachDayOfInterval)({
+ start: monthDisplay.start,
+ end: monthDisplay.end
+ }).map(function (day, index) {
+ var isStartOfMonth = (0, _dateFns.isSameDay)(day, monthDisplay.startDateOfMonth);
+ var isEndOfMonth = (0, _dateFns.isSameDay)(day, monthDisplay.endDateOfMonth);
+ var isOutsideMinMax = minDate && (0, _dateFns.isBefore)(day, minDate) || maxDate && (0, _dateFns.isAfter)(day, maxDate);
+ var isDisabledSpecifically = disabledDates.some(function (disabledDate) {
+ return (0, _dateFns.isSameDay)(disabledDate, day);
+ });
+ var isDisabledDay = disabledDay(day);
+ return /*#__PURE__*/_react.default.createElement(_DayCell.default, _extends({}, _this.props, {
+ ranges: ranges,
+ day: day,
+ preview: showPreview ? _this.props.preview : null,
+ isWeekend: (0, _dateFns.isWeekend)(day, _this.props.dateOptions),
+ isToday: (0, _dateFns.isSameDay)(day, now),
+ isStartOfWeek: (0, _dateFns.isSameDay)(day, (0, _dateFns.startOfWeek)(day, _this.props.dateOptions)),
+ isEndOfWeek: (0, _dateFns.isSameDay)(day, (0, _dateFns.endOfWeek)(day, _this.props.dateOptions)),
+ isStartOfMonth: isStartOfMonth,
+ isEndOfMonth: isEndOfMonth,
+ key: index,
+ disabled: isOutsideMinMax || isDisabledSpecifically || isDisabledDay,
+ isPassive: !(0, _dateFns.isWithinInterval)(day, {
+ start: monthDisplay.startDateOfMonth,
+ end: monthDisplay.endDateOfMonth
+ }),
+ styles: styles,
+ onMouseDown: _this.props.onDragSelectionStart,
+ onMouseUp: _this.props.onDragSelectionEnd,
+ onMouseEnter: _this.props.onDragSelectionMove,
+ dragRange: drag.range,
+ drag: drag.status
+ }));
+ })));
+ }
+ }]);
+
+ return Month;
+}(_react.PureComponent);
+
+Month.defaultProps = {};
+Month.propTypes = {
+ style: _propTypes.default.object,
+ styles: _propTypes.default.object,
+ month: _propTypes.default.object,
+ drag: _propTypes.default.object,
+ dateOptions: _propTypes.default.object,
+ disabledDates: _propTypes.default.array,
+ disabledDay: _propTypes.default.func,
+ preview: _propTypes.default.shape({
+ startDate: _propTypes.default.object,
+ endDate: _propTypes.default.object
+ }),
+ showPreview: _propTypes.default.bool,
+ displayMode: _propTypes.default.oneOf(['dateRange', 'date']),
+ minDate: _propTypes.default.object,
+ maxDate: _propTypes.default.object,
+ ranges: _propTypes.default.arrayOf(_DayCell.rangeShape),
+ focusedRange: _propTypes.default.arrayOf(_propTypes.default.number),
+ onDragSelectionStart: _propTypes.default.func,
+ onDragSelectionEnd: _propTypes.default.func,
+ onDragSelectionMove: _propTypes.default.func,
+ onMouseLeave: _propTypes.default.func,
+ monthDisplayFormat: _propTypes.default.string,
+ weekdayDisplayFormat: _propTypes.default.string,
+ dayDisplayFormat: _propTypes.default.string,
+ showWeekDays: _propTypes.default.bool,
+ showMonthName: _propTypes.default.bool,
+ fixedHeight: _propTypes.default.bool
+};
+var _default = Month;
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/defaultRanges.js b/dist/defaultRanges.js
new file mode 100644
index 000000000..1901d5a06
--- /dev/null
+++ b/dist/defaultRanges.js
@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.createStaticRanges = createStaticRanges;
+exports.defaultInputRanges = exports.defaultStaticRanges = void 0;
+
+var _dateFns = require("date-fns");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defineds = {
+ startOfWeek: (0, _dateFns.startOfWeek)(new Date()),
+ endOfWeek: (0, _dateFns.endOfWeek)(new Date()),
+ startOfLastWeek: (0, _dateFns.startOfWeek)((0, _dateFns.addDays)(new Date(), -7)),
+ endOfLastWeek: (0, _dateFns.endOfWeek)((0, _dateFns.addDays)(new Date(), -7)),
+ startOfToday: (0, _dateFns.startOfDay)(new Date()),
+ endOfToday: (0, _dateFns.endOfDay)(new Date()),
+ startOfYesterday: (0, _dateFns.startOfDay)((0, _dateFns.addDays)(new Date(), -1)),
+ endOfYesterday: (0, _dateFns.endOfDay)((0, _dateFns.addDays)(new Date(), -1)),
+ startOfMonth: (0, _dateFns.startOfMonth)(new Date()),
+ endOfMonth: (0, _dateFns.endOfMonth)(new Date()),
+ startOfLastMonth: (0, _dateFns.startOfMonth)((0, _dateFns.addMonths)(new Date(), -1)),
+ endOfLastMonth: (0, _dateFns.endOfMonth)((0, _dateFns.addMonths)(new Date(), -1))
+};
+var staticRangeHandler = {
+ range: {},
+ isSelected: function isSelected(range) {
+ var definedRange = this.range();
+ return (0, _dateFns.isSameDay)(range.startDate, definedRange.startDate) && (0, _dateFns.isSameDay)(range.endDate, definedRange.endDate);
+ }
+};
+
+function createStaticRanges(ranges) {
+ return ranges.map(function (range) {
+ return _objectSpread(_objectSpread({}, staticRangeHandler), range);
+ });
+}
+
+var defaultStaticRanges = createStaticRanges([{
+ label: 'Today',
+ range: function range() {
+ return {
+ startDate: defineds.startOfToday,
+ endDate: defineds.endOfToday
+ };
+ }
+}, {
+ label: 'Yesterday',
+ range: function range() {
+ return {
+ startDate: defineds.startOfYesterday,
+ endDate: defineds.endOfYesterday
+ };
+ }
+}, {
+ label: 'This Week',
+ range: function range() {
+ return {
+ startDate: defineds.startOfWeek,
+ endDate: defineds.endOfWeek
+ };
+ }
+}, {
+ label: 'Last Week',
+ range: function range() {
+ return {
+ startDate: defineds.startOfLastWeek,
+ endDate: defineds.endOfLastWeek
+ };
+ }
+}, {
+ label: 'This Month',
+ range: function range() {
+ return {
+ startDate: defineds.startOfMonth,
+ endDate: defineds.endOfMonth
+ };
+ }
+}, {
+ label: 'Last Month',
+ range: function range() {
+ return {
+ startDate: defineds.startOfLastMonth,
+ endDate: defineds.endOfLastMonth
+ };
+ }
+}]);
+exports.defaultStaticRanges = defaultStaticRanges;
+var defaultInputRanges = [{
+ label: 'days up to today',
+ range: function range(value) {
+ return {
+ startDate: (0, _dateFns.addDays)(defineds.startOfToday, (Math.max(Number(value), 1) - 1) * -1),
+ endDate: defineds.endOfToday
+ };
+ },
+ getCurrentValue: function getCurrentValue(range) {
+ if (!(0, _dateFns.isSameDay)(range.endDate, defineds.endOfToday)) return '-';
+ if (!range.startDate) return '∞';
+ return (0, _dateFns.differenceInCalendarDays)(defineds.endOfToday, range.startDate) + 1;
+ }
+}, {
+ label: 'days starting today',
+ range: function range(value) {
+ var today = new Date();
+ return {
+ startDate: today,
+ endDate: (0, _dateFns.addDays)(today, Math.max(Number(value), 1) - 1)
+ };
+ },
+ getCurrentValue: function getCurrentValue(range) {
+ if (!(0, _dateFns.isSameDay)(range.startDate, defineds.startOfToday)) return '-';
+ if (!range.endDate) return '∞';
+ return (0, _dateFns.differenceInCalendarDays)(range.endDate, defineds.startOfToday) + 1;
+ }
+}];
+exports.defaultInputRanges = defaultInputRanges;
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 000000000..5ceb02ae4
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+Object.defineProperty(exports, "DateRange", {
+ enumerable: true,
+ get: function get() {
+ return _DateRange.default;
+ }
+});
+Object.defineProperty(exports, "Calendar", {
+ enumerable: true,
+ get: function get() {
+ return _Calendar.default;
+ }
+});
+Object.defineProperty(exports, "DateRangePicker", {
+ enumerable: true,
+ get: function get() {
+ return _DateRangePicker.default;
+ }
+});
+Object.defineProperty(exports, "DefinedRange", {
+ enumerable: true,
+ get: function get() {
+ return _DefinedRange.default;
+ }
+});
+Object.defineProperty(exports, "defaultInputRanges", {
+ enumerable: true,
+ get: function get() {
+ return _defaultRanges.defaultInputRanges;
+ }
+});
+Object.defineProperty(exports, "defaultStaticRanges", {
+ enumerable: true,
+ get: function get() {
+ return _defaultRanges.defaultStaticRanges;
+ }
+});
+Object.defineProperty(exports, "createStaticRanges", {
+ enumerable: true,
+ get: function get() {
+ return _defaultRanges.createStaticRanges;
+ }
+});
+
+var _DateRange = _interopRequireDefault(require("./components/DateRange"));
+
+var _Calendar = _interopRequireDefault(require("./components/Calendar"));
+
+var _DateRangePicker = _interopRequireDefault(require("./components/DateRangePicker"));
+
+var _DefinedRange = _interopRequireDefault(require("./components/DefinedRange"));
+
+var _defaultRanges = require("./defaultRanges");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
\ No newline at end of file
diff --git a/dist/locale/index.js b/dist/locale/index.js
new file mode 100644
index 000000000..4fe1de4ad
--- /dev/null
+++ b/dist/locale/index.js
@@ -0,0 +1,503 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+Object.defineProperty(exports, "af", {
+ enumerable: true,
+ get: function get() {
+ return _af.default;
+ }
+});
+Object.defineProperty(exports, "arDZ", {
+ enumerable: true,
+ get: function get() {
+ return _arDZ.default;
+ }
+});
+Object.defineProperty(exports, "arSA", {
+ enumerable: true,
+ get: function get() {
+ return _arSA.default;
+ }
+});
+Object.defineProperty(exports, "be", {
+ enumerable: true,
+ get: function get() {
+ return _be.default;
+ }
+});
+Object.defineProperty(exports, "bg", {
+ enumerable: true,
+ get: function get() {
+ return _bg.default;
+ }
+});
+Object.defineProperty(exports, "bn", {
+ enumerable: true,
+ get: function get() {
+ return _bn.default;
+ }
+});
+Object.defineProperty(exports, "ca", {
+ enumerable: true,
+ get: function get() {
+ return _ca.default;
+ }
+});
+Object.defineProperty(exports, "cs", {
+ enumerable: true,
+ get: function get() {
+ return _cs.default;
+ }
+});
+Object.defineProperty(exports, "cy", {
+ enumerable: true,
+ get: function get() {
+ return _cy.default;
+ }
+});
+Object.defineProperty(exports, "da", {
+ enumerable: true,
+ get: function get() {
+ return _da.default;
+ }
+});
+Object.defineProperty(exports, "de", {
+ enumerable: true,
+ get: function get() {
+ return _de.default;
+ }
+});
+Object.defineProperty(exports, "el", {
+ enumerable: true,
+ get: function get() {
+ return _el.default;
+ }
+});
+Object.defineProperty(exports, "enAU", {
+ enumerable: true,
+ get: function get() {
+ return _enAU.default;
+ }
+});
+Object.defineProperty(exports, "enCA", {
+ enumerable: true,
+ get: function get() {
+ return _enCA.default;
+ }
+});
+Object.defineProperty(exports, "enGB", {
+ enumerable: true,
+ get: function get() {
+ return _enGB.default;
+ }
+});
+Object.defineProperty(exports, "enUS", {
+ enumerable: true,
+ get: function get() {
+ return _enUS.default;
+ }
+});
+Object.defineProperty(exports, "eo", {
+ enumerable: true,
+ get: function get() {
+ return _eo.default;
+ }
+});
+Object.defineProperty(exports, "es", {
+ enumerable: true,
+ get: function get() {
+ return _es.default;
+ }
+});
+Object.defineProperty(exports, "et", {
+ enumerable: true,
+ get: function get() {
+ return _et.default;
+ }
+});
+Object.defineProperty(exports, "faIR", {
+ enumerable: true,
+ get: function get() {
+ return _faIR.default;
+ }
+});
+Object.defineProperty(exports, "fi", {
+ enumerable: true,
+ get: function get() {
+ return _fi.default;
+ }
+});
+Object.defineProperty(exports, "fr", {
+ enumerable: true,
+ get: function get() {
+ return _fr.default;
+ }
+});
+Object.defineProperty(exports, "frCA", {
+ enumerable: true,
+ get: function get() {
+ return _frCA.default;
+ }
+});
+Object.defineProperty(exports, "gl", {
+ enumerable: true,
+ get: function get() {
+ return _gl.default;
+ }
+});
+Object.defineProperty(exports, "gu", {
+ enumerable: true,
+ get: function get() {
+ return _gu.default;
+ }
+});
+Object.defineProperty(exports, "he", {
+ enumerable: true,
+ get: function get() {
+ return _he.default;
+ }
+});
+Object.defineProperty(exports, "hi", {
+ enumerable: true,
+ get: function get() {
+ return _hi.default;
+ }
+});
+Object.defineProperty(exports, "hr", {
+ enumerable: true,
+ get: function get() {
+ return _hr.default;
+ }
+});
+Object.defineProperty(exports, "hu", {
+ enumerable: true,
+ get: function get() {
+ return _hu.default;
+ }
+});
+Object.defineProperty(exports, "hy", {
+ enumerable: true,
+ get: function get() {
+ return _hy.default;
+ }
+});
+Object.defineProperty(exports, "id", {
+ enumerable: true,
+ get: function get() {
+ return _id.default;
+ }
+});
+Object.defineProperty(exports, "is", {
+ enumerable: true,
+ get: function get() {
+ return _is.default;
+ }
+});
+Object.defineProperty(exports, "it", {
+ enumerable: true,
+ get: function get() {
+ return _it.default;
+ }
+});
+Object.defineProperty(exports, "ja", {
+ enumerable: true,
+ get: function get() {
+ return _ja.default;
+ }
+});
+Object.defineProperty(exports, "ka", {
+ enumerable: true,
+ get: function get() {
+ return _ka.default;
+ }
+});
+Object.defineProperty(exports, "kk", {
+ enumerable: true,
+ get: function get() {
+ return _kk.default;
+ }
+});
+Object.defineProperty(exports, "ko", {
+ enumerable: true,
+ get: function get() {
+ return _ko.default;
+ }
+});
+Object.defineProperty(exports, "lt", {
+ enumerable: true,
+ get: function get() {
+ return _lt.default;
+ }
+});
+Object.defineProperty(exports, "lv", {
+ enumerable: true,
+ get: function get() {
+ return _lv.default;
+ }
+});
+Object.defineProperty(exports, "ms", {
+ enumerable: true,
+ get: function get() {
+ return _ms.default;
+ }
+});
+Object.defineProperty(exports, "nb", {
+ enumerable: true,
+ get: function get() {
+ return _nb.default;
+ }
+});
+Object.defineProperty(exports, "nl", {
+ enumerable: true,
+ get: function get() {
+ return _nl.default;
+ }
+});
+Object.defineProperty(exports, "nn", {
+ enumerable: true,
+ get: function get() {
+ return _nn.default;
+ }
+});
+Object.defineProperty(exports, "pl", {
+ enumerable: true,
+ get: function get() {
+ return _pl.default;
+ }
+});
+Object.defineProperty(exports, "pt", {
+ enumerable: true,
+ get: function get() {
+ return _pt.default;
+ }
+});
+Object.defineProperty(exports, "ptBR", {
+ enumerable: true,
+ get: function get() {
+ return _ptBR.default;
+ }
+});
+Object.defineProperty(exports, "ro", {
+ enumerable: true,
+ get: function get() {
+ return _ro.default;
+ }
+});
+Object.defineProperty(exports, "ru", {
+ enumerable: true,
+ get: function get() {
+ return _ru.default;
+ }
+});
+Object.defineProperty(exports, "sk", {
+ enumerable: true,
+ get: function get() {
+ return _sk.default;
+ }
+});
+Object.defineProperty(exports, "sl", {
+ enumerable: true,
+ get: function get() {
+ return _sl.default;
+ }
+});
+Object.defineProperty(exports, "sr", {
+ enumerable: true,
+ get: function get() {
+ return _sr.default;
+ }
+});
+Object.defineProperty(exports, "srLatn", {
+ enumerable: true,
+ get: function get() {
+ return _srLatn.default;
+ }
+});
+Object.defineProperty(exports, "sv", {
+ enumerable: true,
+ get: function get() {
+ return _sv.default;
+ }
+});
+Object.defineProperty(exports, "ta", {
+ enumerable: true,
+ get: function get() {
+ return _ta.default;
+ }
+});
+Object.defineProperty(exports, "te", {
+ enumerable: true,
+ get: function get() {
+ return _te.default;
+ }
+});
+Object.defineProperty(exports, "th", {
+ enumerable: true,
+ get: function get() {
+ return _th.default;
+ }
+});
+Object.defineProperty(exports, "tr", {
+ enumerable: true,
+ get: function get() {
+ return _tr.default;
+ }
+});
+Object.defineProperty(exports, "ug", {
+ enumerable: true,
+ get: function get() {
+ return _ug.default;
+ }
+});
+Object.defineProperty(exports, "uk", {
+ enumerable: true,
+ get: function get() {
+ return _uk.default;
+ }
+});
+Object.defineProperty(exports, "vi", {
+ enumerable: true,
+ get: function get() {
+ return _vi.default;
+ }
+});
+Object.defineProperty(exports, "zhCN", {
+ enumerable: true,
+ get: function get() {
+ return _zhCN.default;
+ }
+});
+Object.defineProperty(exports, "zhTW", {
+ enumerable: true,
+ get: function get() {
+ return _zhTW.default;
+ }
+});
+
+var _af = _interopRequireDefault(require("date-fns/locale/af"));
+
+var _arDZ = _interopRequireDefault(require("date-fns/locale/ar-DZ"));
+
+var _arSA = _interopRequireDefault(require("date-fns/locale/ar-SA"));
+
+var _be = _interopRequireDefault(require("date-fns/locale/be"));
+
+var _bg = _interopRequireDefault(require("date-fns/locale/bg"));
+
+var _bn = _interopRequireDefault(require("date-fns/locale/bn"));
+
+var _ca = _interopRequireDefault(require("date-fns/locale/ca"));
+
+var _cs = _interopRequireDefault(require("date-fns/locale/cs"));
+
+var _cy = _interopRequireDefault(require("date-fns/locale/cy"));
+
+var _da = _interopRequireDefault(require("date-fns/locale/da"));
+
+var _de = _interopRequireDefault(require("date-fns/locale/de"));
+
+var _el = _interopRequireDefault(require("date-fns/locale/el"));
+
+var _enAU = _interopRequireDefault(require("date-fns/locale/en-AU"));
+
+var _enCA = _interopRequireDefault(require("date-fns/locale/en-CA"));
+
+var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB"));
+
+var _enUS = _interopRequireDefault(require("date-fns/locale/en-US"));
+
+var _eo = _interopRequireDefault(require("date-fns/locale/eo"));
+
+var _es = _interopRequireDefault(require("date-fns/locale/es"));
+
+var _et = _interopRequireDefault(require("date-fns/locale/et"));
+
+var _faIR = _interopRequireDefault(require("date-fns/locale/fa-IR"));
+
+var _fi = _interopRequireDefault(require("date-fns/locale/fi"));
+
+var _fr = _interopRequireDefault(require("date-fns/locale/fr"));
+
+var _frCA = _interopRequireDefault(require("date-fns/locale/fr-CA"));
+
+var _gl = _interopRequireDefault(require("date-fns/locale/gl"));
+
+var _gu = _interopRequireDefault(require("date-fns/locale/gu"));
+
+var _he = _interopRequireDefault(require("date-fns/locale/he"));
+
+var _hi = _interopRequireDefault(require("date-fns/locale/hi"));
+
+var _hr = _interopRequireDefault(require("date-fns/locale/hr"));
+
+var _hu = _interopRequireDefault(require("date-fns/locale/hu"));
+
+var _hy = _interopRequireDefault(require("date-fns/locale/hy"));
+
+var _id = _interopRequireDefault(require("date-fns/locale/id"));
+
+var _is = _interopRequireDefault(require("date-fns/locale/is"));
+
+var _it = _interopRequireDefault(require("date-fns/locale/it"));
+
+var _ja = _interopRequireDefault(require("date-fns/locale/ja"));
+
+var _ka = _interopRequireDefault(require("date-fns/locale/ka"));
+
+var _kk = _interopRequireDefault(require("date-fns/locale/kk"));
+
+var _ko = _interopRequireDefault(require("date-fns/locale/ko"));
+
+var _lt = _interopRequireDefault(require("date-fns/locale/lt"));
+
+var _lv = _interopRequireDefault(require("date-fns/locale/lv"));
+
+var _ms = _interopRequireDefault(require("date-fns/locale/ms"));
+
+var _nb = _interopRequireDefault(require("date-fns/locale/nb"));
+
+var _nl = _interopRequireDefault(require("date-fns/locale/nl"));
+
+var _nn = _interopRequireDefault(require("date-fns/locale/nn"));
+
+var _pl = _interopRequireDefault(require("date-fns/locale/pl"));
+
+var _pt = _interopRequireDefault(require("date-fns/locale/pt"));
+
+var _ptBR = _interopRequireDefault(require("date-fns/locale/pt-BR"));
+
+var _ro = _interopRequireDefault(require("date-fns/locale/ro"));
+
+var _ru = _interopRequireDefault(require("date-fns/locale/ru"));
+
+var _sk = _interopRequireDefault(require("date-fns/locale/sk"));
+
+var _sl = _interopRequireDefault(require("date-fns/locale/sl"));
+
+var _sr = _interopRequireDefault(require("date-fns/locale/sr"));
+
+var _srLatn = _interopRequireDefault(require("date-fns/locale/sr-Latn"));
+
+var _sv = _interopRequireDefault(require("date-fns/locale/sv"));
+
+var _ta = _interopRequireDefault(require("date-fns/locale/ta"));
+
+var _te = _interopRequireDefault(require("date-fns/locale/te"));
+
+var _th = _interopRequireDefault(require("date-fns/locale/th"));
+
+var _tr = _interopRequireDefault(require("date-fns/locale/tr"));
+
+var _ug = _interopRequireDefault(require("date-fns/locale/ug"));
+
+var _uk = _interopRequireDefault(require("date-fns/locale/uk"));
+
+var _vi = _interopRequireDefault(require("date-fns/locale/vi"));
+
+var _zhCN = _interopRequireDefault(require("date-fns/locale/zh-CN"));
+
+var _zhTW = _interopRequireDefault(require("date-fns/locale/zh-TW"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
\ No newline at end of file
diff --git a/dist/styles.css b/dist/styles.css
new file mode 100644
index 000000000..b4dbc7593
--- /dev/null
+++ b/dist/styles.css
@@ -0,0 +1,201 @@
+.rdrCalendarWrapper {
+ box-sizing: border-box;
+ background: #ffffff;
+ display: inline-flex;
+ flex-direction: column;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.rdrDateDisplay{
+ display: flex;
+ justify-content: space-between;
+}
+
+.rdrDateDisplayItem{
+ flex: 1 1;
+ width: 0;
+ text-align: center;
+ color: inherit;
+}
+
+.rdrDateDisplayItem + .rdrDateDisplayItem{
+ margin-left: 0.833em;
+ }
+
+.rdrDateDisplayItem input{
+ text-align: inherit
+ }
+
+.rdrDateDisplayItem input:disabled{
+ cursor: default;
+ }
+
+.rdrDateDisplayItemActive{}
+
+.rdrMonthAndYearWrapper {
+ box-sizing: inherit;
+ display: flex;
+ justify-content: space-between;
+}
+
+.rdrMonthAndYearPickers{
+ flex: 1 1 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.rdrMonthPicker{}
+
+.rdrYearPicker{}
+
+.rdrNextPrevButton {
+ box-sizing: inherit;
+ cursor: pointer;
+ outline: none;
+}
+
+.rdrPprevButton {}
+
+.rdrNextButton {}
+
+.rdrMonths{
+ display: flex;
+}
+
+.rdrMonthsVertical{
+ flex-direction: column;
+}
+
+.rdrMonthsHorizontal > div > div > div{
+ display: flex;
+ flex-direction: row;
+}
+
+.rdrMonth{
+ width: 27.667em;
+}
+
+.rdrWeekDays{
+ display: flex;
+}
+
+.rdrWeekDay {
+ flex-basis: calc(100% / 7);
+ box-sizing: inherit;
+ text-align: center;
+}
+
+.rdrDays{
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.rdrDateDisplayWrapper{}
+
+.rdrMonthName{}
+
+.rdrInfiniteMonths{
+ overflow: auto;
+}
+
+.rdrDateRangeWrapper{
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.rdrDateInput {
+ position: relative;
+}
+
+.rdrDateInput input {
+ outline: none;
+ }
+
+.rdrDateInput .rdrWarning {
+ position: absolute;
+ font-size: 1.6em;
+ line-height: 1.6em;
+ top: 0;
+ right: .25em;
+ color: #FF0000;
+ }
+
+.rdrDay {
+ box-sizing: inherit;
+ width: calc(100% / 7);
+ position: relative;
+ font: inherit;
+ cursor: pointer;
+}
+
+.rdrDayNumber {
+ display: block;
+ position: relative;
+}
+
+.rdrDayNumber span{
+ color: #1d2429;
+ }
+
+.rdrDayDisabled {
+ cursor: not-allowed;
+}
+
+@supports (-ms-ime-align: auto) {
+ .rdrDay {
+ flex-basis: 14.285% !important;
+ }
+}
+
+.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
+ pointer-events: none;
+}
+
+.rdrInRange{}
+
+.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
+ pointer-events: none;
+}
+
+.rdrDayHovered{}
+
+.rdrDayActive{}
+
+.rangeEdgeWhiteText {
+ color: #E0E0E0 !important;
+}
+
+.rdrDateRangePickerWrapper{
+ display: inline-flex;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.rdrDefinedRangesWrapper{}
+
+.rdrStaticRanges{
+ display: flex;
+ flex-direction: column;
+}
+
+.rdrStaticRange{
+ font-size: inherit;
+}
+
+.rdrStaticRangeLabel{}
+
+.rdrInputRanges{}
+
+.rdrInputRange{
+ display: flex;
+}
+
+.rdrInputRangeInput{}
diff --git a/dist/styles.js b/dist/styles.js
new file mode 100644
index 000000000..e760d6cf4
--- /dev/null
+++ b/dist/styles.js
@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = void 0;
+var _default = {
+ dateRangeWrapper: 'rdrDateRangeWrapper',
+ calendarWrapper: 'rdrCalendarWrapper',
+ dateDisplay: 'rdrDateDisplay',
+ dateDisplayItem: 'rdrDateDisplayItem',
+ dateDisplayItemActive: 'rdrDateDisplayItemActive',
+ monthAndYearWrapper: 'rdrMonthAndYearWrapper',
+ monthAndYearPickers: 'rdrMonthAndYearPickers',
+ nextPrevButton: 'rdrNextPrevButton',
+ month: 'rdrMonth',
+ weekDays: 'rdrWeekDays',
+ weekDay: 'rdrWeekDay',
+ days: 'rdrDays',
+ day: 'rdrDay',
+ dayNumber: 'rdrDayNumber',
+ dayPassive: 'rdrDayPassive',
+ dayToday: 'rdrDayToday',
+ dayStartOfWeek: 'rdrDayStartOfWeek',
+ dayEndOfWeek: 'rdrDayEndOfWeek',
+ daySelected: 'rdrDaySelected',
+ dayDisabled: 'rdrDayDisabled',
+ dayStartOfMonth: 'rdrDayStartOfMonth',
+ dayEndOfMonth: 'rdrDayEndOfMonth',
+ dayWeekend: 'rdrDayWeekend',
+ dayStartPreview: 'rdrDayStartPreview',
+ dayInPreview: 'rdrDayInPreview',
+ dayEndPreview: 'rdrDayEndPreview',
+ dayHovered: 'rdrDayHovered',
+ dayActive: 'rdrDayActive',
+ inRange: 'rdrInRange',
+ endEdge: 'rdrEndEdge',
+ startEdge: 'rdrStartEdge',
+ prevButton: 'rdrPprevButton',
+ nextButton: 'rdrNextButton',
+ selected: 'rdrSelected',
+ months: 'rdrMonths',
+ monthPicker: 'rdrMonthPicker',
+ yearPicker: 'rdrYearPicker',
+ dateDisplayWrapper: 'rdrDateDisplayWrapper',
+ definedRangesWrapper: 'rdrDefinedRangesWrapper',
+ staticRanges: 'rdrStaticRanges',
+ staticRange: 'rdrStaticRange',
+ inputRanges: 'rdrInputRanges',
+ inputRange: 'rdrInputRange',
+ inputRangeInput: 'rdrInputRangeInput',
+ dateRangePickerWrapper: 'rdrDateRangePickerWrapper',
+ staticRangeLabel: 'rdrStaticRangeLabel',
+ staticRangeSelected: 'rdrStaticRangeSelected',
+ monthName: 'rdrMonthName',
+ infiniteMonths: 'rdrInfiniteMonths',
+ monthsVertical: 'rdrMonthsVertical',
+ monthsHorizontal: 'rdrMonthsHorizontal'
+};
+exports.default = _default;
\ No newline at end of file
diff --git a/dist/theme/default.css b/dist/theme/default.css
new file mode 100644
index 000000000..539a5e7ae
--- /dev/null
+++ b/dist/theme/default.css
@@ -0,0 +1,392 @@
+.rdrCalendarWrapper {
+ color: #000000;
+ font-size: 12px;
+}
+
+.rdrDateDisplayWrapper {
+ background-color: rgb(239, 242, 247);
+}
+
+.rdrDateDisplay {
+ margin: 0.833em;
+}
+
+.rdrDateDisplayItem {
+ border-radius: 4px;
+ background-color: rgb(255, 255, 255);
+ box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
+ border: 1px solid transparent;
+}
+
+.rdrDateDisplayItem input {
+ cursor: pointer;
+ height: 2.5em;
+ line-height: 2.5em;
+ border: 0px;
+ background: transparent;
+ width: 100%;
+ color: #849095;
+ }
+
+.rdrDateDisplayItemActive {
+ border-color: currentColor;
+}
+
+.rdrDateDisplayItemActive input {
+ color: #7d888d
+ }
+
+.rdrMonthAndYearWrapper {
+ align-items: center;
+ height: 60px;
+ padding-top: 10px;
+}
+
+.rdrMonthAndYearPickers:not(.dark):not(.light) {
+ font-weight: 600;
+}
+
+.rdrMonthAndYearPickers:not(.dark):not(.light) select {
+ -moz-appearance: none;
+ appearance: none;
+ -webkit-appearance: none;
+ border: 0;
+ background: transparent;
+ padding: 10px 30px 10px 10px;
+ border-radius: 4px;
+ outline: 0;
+ color: #3e484f;
+ background: url("data:image/svg+xml;utf8,") no-repeat;
+ background-position: right 8px center;
+ cursor: pointer;
+ text-align: center
+ }
+
+.rdrMonthAndYearPickers:not(.dark):not(.light) select:hover {
+ background-color: rgba(0, 0, 0, 0.07);
+ }
+
+.rdrMonthPicker, .rdrYearPicker {
+ margin: 0 5px
+}
+
+.rdrNextPrevButton {
+ display: block;
+ width: 24px;
+ height: 24px;
+ margin: 0 0.833em;
+ padding: 0;
+ border: 0;
+ border-radius: 5px;
+ background: #EFF2F7
+}
+
+.rdrNextPrevButton:hover {
+ background: #E1E7F0;
+ }
+
+.rdrNextPrevButton i {
+ display: block;
+ width: 0;
+ height: 0;
+ padding: 0;
+ text-align: center;
+ border-style: solid;
+ margin: auto;
+ transform: translate(-3px, 0px);
+ }
+
+.rdrPprevButton i {
+ border-width: 4px 6px 4px 4px;
+ border-color: transparent rgb(52, 73, 94) transparent transparent;
+ transform: translate(-3px, 0px);
+ }
+
+.rdrNextButton i {
+ margin: 0 0 0 7px;
+ border-width: 4px 4px 4px 6px;
+ border-color: transparent transparent transparent rgb(52, 73, 94);
+ transform: translate(3px, 0px);
+ }
+
+.rdrWeekDays {
+ padding: 0 0.833em;
+}
+
+.rdrMonth {
+ padding: 0 0.833em 1.666em 0.833em;
+}
+
+.rdrMonth .rdrWeekDays {
+ padding: 0;
+ }
+
+.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName {
+ display: none;
+}
+
+.rdrWeekDay {
+ font-weight: 400;
+ line-height: 2.667em;
+ color: rgb(132, 144, 149);
+}
+
+.rdrDay {
+ background: transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border: 0;
+ padding: 0;
+ line-height: 3.000em;
+ height: 3.000em;
+ text-align: center;
+ color: #1d2429
+}
+
+.rdrDay:focus {
+ outline: 0;
+ }
+
+.rdrDayNumber {
+ outline: 0;
+ font-weight: 300;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ top: 5px;
+ bottom: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.rdrDayToday .rdrDayNumber span {
+ font-weight: 500
+}
+
+.rdrDayToday .rdrDayNumber span:after {
+ content: '';
+ position: absolute;
+ height: 4px;
+ width: 4px;
+ bottom: 8px;
+ border-radius: 0;
+ }
+
+.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber .light span:after, .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber .light span:after, .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber .light span:after, .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber .light span:after {
+ background: #161616;
+ }
+
+.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber .dark span:after, .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber .dark span:after, .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber .dark span:after, .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber .dark span:after {
+ background: #F4F4F4;
+ }
+
+.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
+ color: rgba(255, 255, 255, 0.85);
+ }
+
+.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span {
+ color: #161616;
+ }
+
+.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge {
+ background: currentColor;
+ position: absolute;
+ top: 5px;
+ left: 0;
+ right: 0;
+ bottom: 5px;
+}
+
+.rdrSelected {
+ left: 2px;
+ right: 2px;
+}
+
+.rdrInRange {
+}
+
+.rdrStartEdge {
+ border-top-left-radius: 1.042em;
+ border-bottom-left-radius: 1.042em;
+ left: 2px;
+}
+
+.rdrEndEdge {
+ border-top-right-radius: 1.042em;
+ border-bottom-right-radius: 1.042em;
+ right: 2px;
+}
+
+.rdrSelected {
+ border-radius: 1.042em;
+}
+
+.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge {
+ border-top-left-radius: 1.042em;
+ border-bottom-left-radius: 1.042em;
+ left: 2px;
+ }
+
+.rdrDayEndOfMonth .rdrInRange, .rdrDayEndOfMonth .rdrStartEdge, .rdrDayEndOfWeek .rdrInRange, .rdrDayEndOfWeek .rdrStartEdge {
+ border-top-right-radius: 1.042em;
+ border-bottom-right-radius: 1.042em;
+ right: 2px;
+ }
+
+.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview {
+ border-top-left-radius: 1.333em;
+ border-bottom-left-radius: 1.333em;
+ border-left-width: 1px;
+ left: 0px;
+ }
+
+.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview {
+ border-top-right-radius: 1.333em;
+ border-bottom-right-radius: 1.333em;
+ border-right-width: 1px;
+ right: 0px;
+ }
+
+.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview {
+ background: rgba(255, 255, 255, 0.09);
+ position: absolute;
+ top: 3px;
+ left: 0px;
+ right: 0px;
+ bottom: 3px;
+ pointer-events: none;
+ border: 0px solid currentColor;
+ z-index: 1;
+}
+
+.rdrDayStartPreview {
+ border-top-width: 1px;
+ border-left-width: 1px;
+ border-bottom-width: 1px;
+ border-top-left-radius: 1.333em;
+ border-bottom-left-radius: 1.333em;
+ left: 0px;
+}
+
+.rdrDayInPreview {
+ border-top-width: 1px;
+ border-bottom-width: 1px;
+}
+
+.rdrDayEndPreview {
+ border-top-width: 1px;
+ border-right-width: 1px;
+ border-bottom-width: 1px;
+ border-top-right-radius: 1.333em;
+ border-bottom-right-radius: 1.333em;
+ right: 2px;
+ right: 0px;
+}
+
+.rdrDefinedRangesWrapper {
+ font-size: 12px;
+ width: 226px;
+ border-right: solid 1px #eff2f7;
+ background: #fff;
+}
+
+.rdrDefinedRangesWrapper .rdrStaticRangeSelected {
+ color: currentColor;
+ font-weight: 600;
+ }
+
+.rdrStaticRange {
+ border: 0;
+ cursor: pointer;
+ display: block;
+ outline: 0;
+ border-bottom: 1px solid #eff2f7;
+ padding: 0;
+ background: #fff
+}
+
+.rdrStaticRange:hover .rdrStaticRangeLabel, .rdrStaticRange:focus .rdrStaticRangeLabel {
+ background: #eff2f7;
+ }
+
+.rdrStaticRangeLabel {
+ display: block;
+ outline: 0;
+ line-height: 18px;
+ padding: 10px 20px;
+ text-align: left;
+}
+
+.rdrInputRanges {
+ padding: 10px 0;
+}
+
+.rdrInputRange {
+ align-items: center;
+ padding: 5px 20px;
+}
+
+.rdrInputRangeInput {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ border-radius: 4px;
+ text-align: center;
+ border: solid 1px rgb(222, 231, 235);
+ margin-right: 10px;
+ color: rgb(108, 118, 122)
+}
+
+.rdrInputRangeInput:focus, .rdrInputRangeInput:hover {
+ border-color: rgb(180, 191, 196);
+ outline: 0;
+ color: #333;
+ }
+
+.rdrCalendarWrapper:not(.rdrDateRangeWrapper):not(.dark):not(.light) .rdrDayHovered .rdrDayNumber:after {
+ height: 4px;
+ width: 4px;
+ bottom: 8px;
+ border-radius: 0;
+ background: transparent;
+}
+
+.rdrDayPassive {
+ pointer-events: none;
+}
+
+.rdrDayPassive .rdrDayNumber span {
+ color: #d5dce0;
+ }
+
+.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview {
+ display: none;
+ }
+
+.rdrDayDisabled {
+ background-color: rgb(248, 248, 248);
+}
+
+.rdrDayDisabled .rdrDayNumber span {
+ color: #aeb9bf;
+ }
+
+.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview {
+ filter: grayscale(100%) opacity(60%);
+ }
+
+.rdrMonthName {
+ text-align: left;
+ font-weight: 600;
+ color: #849095;
+ padding: 0.833em;
+}
+
+.rangeEdgeWhiteText {
+ color: #E0E0E0 !important;
+}
diff --git a/dist/utils.js b/dist/utils.js
new file mode 100644
index 000000000..0ea10c0c3
--- /dev/null
+++ b/dist/utils.js
@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.calcFocusDate = calcFocusDate;
+exports.findNextRangeIndex = findNextRangeIndex;
+exports.getMonthDisplayRange = getMonthDisplayRange;
+exports.generateStyles = generateStyles;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _dateFns = require("date-fns");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function calcFocusDate(currentFocusedDate, props) {
+ var shownDate = props.shownDate,
+ date = props.date,
+ months = props.months,
+ ranges = props.ranges,
+ focusedRange = props.focusedRange,
+ displayMode = props.displayMode; // find primary date according the props
+
+ var targetInterval;
+
+ if (displayMode === 'dateRange') {
+ var range = ranges[focusedRange[0]] || {};
+ targetInterval = {
+ start: range.startDate,
+ end: range.endDate
+ };
+ } else {
+ targetInterval = {
+ start: date,
+ end: date
+ };
+ }
+
+ targetInterval.start = (0, _dateFns.startOfMonth)(targetInterval.start || new Date());
+ targetInterval.end = (0, _dateFns.endOfMonth)(targetInterval.end || targetInterval.start);
+ var targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); // initial focus
+
+ if (!currentFocusedDate) return shownDate || targetDate; // // just return targetDate for native scrolled calendars
+ // if (props.scroll.enabled) return targetDate;
+
+ if ((0, _dateFns.differenceInCalendarMonths)(targetInterval.start, targetInterval.end) > months) {
+ // don't change focused if new selection in view area
+ return currentFocusedDate;
+ }
+
+ return targetDate;
+}
+
+function findNextRangeIndex(ranges) {
+ var currentRangeIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+ var nextIndex = ranges.findIndex(function (range, i) {
+ return i > currentRangeIndex && range.autoFocus !== false && !range.disabled;
+ });
+ if (nextIndex !== -1) return nextIndex;
+ return ranges.findIndex(function (range) {
+ return range.autoFocus !== false && !range.disabled;
+ });
+}
+
+function getMonthDisplayRange(date, dateOptions, fixedHeight) {
+ var startDateOfMonth = (0, _dateFns.startOfMonth)(date, dateOptions);
+ var endDateOfMonth = (0, _dateFns.endOfMonth)(date, dateOptions);
+ var startDateOfCalendar = (0, _dateFns.startOfWeek)(startDateOfMonth, dateOptions);
+ var endDateOfCalendar = (0, _dateFns.endOfWeek)(endDateOfMonth, dateOptions);
+
+ if (fixedHeight && (0, _dateFns.differenceInCalendarDays)(endDateOfCalendar, startDateOfCalendar) <= 34) {
+ endDateOfCalendar = (0, _dateFns.addDays)(endDateOfCalendar, 7);
+ }
+
+ return {
+ start: startDateOfCalendar,
+ end: endDateOfCalendar,
+ startDateOfMonth: startDateOfMonth,
+ endDateOfMonth: endDateOfMonth
+ };
+}
+
+function generateStyles(sources) {
+ if (!sources.length) return {};
+ var generatedStyles = sources.filter(function (source) {
+ return Boolean(source);
+ }).reduce(function (styles, styleSource) {
+ Object.keys(styleSource).forEach(function (key) {
+ styles[key] = (0, _classnames.default)(styles[key], styleSource[key]);
+ });
+ return styles;
+ }, {});
+ return generatedStyles;
+}
\ No newline at end of file
diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js
index 73b9faa48..dc41973da 100644
--- a/src/components/Calendar/index.js
+++ b/src/components/Calendar/index.js
@@ -50,6 +50,7 @@ class Calendar extends PureComponent {
scrollArea: this.calcScrollArea(props),
};
}
+
getMonthNames() {
return [...Array(12).keys()].map(i => this.props.locale.localize.month(i));
}
@@ -76,18 +77,24 @@ class Calendar extends PureComponent {
calendarHeight: longMonthHeight || 300,
};
}
+
focusToDate = (date, props = this.props, preventUnnecessary = true) => {
if (!props.scroll.enabled) {
- if (preventUnnecessary && props.preventSnapRefocus) {
- const focusedDateDiff = differenceInCalendarMonths(date, this.state.focusedDate);
- const isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0;
- const isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0;
- if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) {
- return;
+ if (!props.forceShownDate) {
+ if (preventUnnecessary && props.preventSnapRefocus) {
+ const focusedDateDiff = differenceInCalendarMonths(date, this.state.focusedDate);
+ const isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0;
+ const isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0;
+ if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) {
+ return;
+ }
}
+ this.setState({ focusedDate: date });
+ return;
+ } else {
+ this.setState({ focusedDate: props.forceShownDate });
+ return;
}
- this.setState({ focusedDate: date });
- return;
}
const targetMonthIndex = differenceInCalendarMonths(date, props.minDate, this.dateOptions);
const visibleMonths = this.list.getVisibleRange();
@@ -118,6 +125,7 @@ class Calendar extends PureComponent {
};
this.setState({ preview });
};
+
componentDidMount() {
if (this.props.scroll.enabled) {
// prevent react-list's initial render focus problem
@@ -251,6 +259,7 @@ class Calendar extends PureComponent {
);
};
+
renderWeekdays() {
const now = new Date();
return (
@@ -266,6 +275,7 @@ class Calendar extends PureComponent {
);
}
+
renderDateDisplay = () => {
const {
focusedRange,
@@ -396,6 +406,7 @@ class Calendar extends PureComponent {
const isLongMonth = differenceInDays(end, start, this.dateOptions) + 1 > 7 * 5;
return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight;
};
+
render() {
const {
showDateDisplay,
@@ -476,7 +487,10 @@ class Calendar extends PureComponent {
style={
isVertical
? { height: this.estimateMonthSize(index) }
- : { height: scrollArea.monthHeight, width: this.estimateMonthSize(index) }
+ : {
+ height: scrollArea.monthHeight,
+ width: this.estimateMonthSize(index),
+ }
}
showMonthName
showWeekDays={!isVertical}
@@ -493,7 +507,7 @@ class Calendar extends PureComponent {
isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
)}>
{new Array(this.props.months).fill(null).map((_, i) => {
- let monthStep = addMonths(this.state.focusedDate, i);;
+ let monthStep = addMonths(this.state.focusedDate, i);
if (this.props.calendarFocus === 'backwards') {
monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i);
}
@@ -575,6 +589,7 @@ Calendar.propTypes = {
classNames: PropTypes.object,
locale: PropTypes.object,
shownDate: PropTypes.object,
+ forceShownDate: PropTypes.object,
onShownDateChange: PropTypes.func,
ranges: PropTypes.arrayOf(rangeShape),
preview: PropTypes.shape({
diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js
index 26f12539e..fa401f0fb 100644
--- a/src/components/DayCell/index.js
+++ b/src/components/DayCell/index.js
@@ -140,6 +140,7 @@ class DayCell extends Component {
return inRanges.map((range, i) => (
- {
- dayContentRenderer?.(this.props.day) ||
- {format(this.props.day, this.props.dayDisplayFormat)}
- }
+ {dayContentRenderer?.(this.props.day) || (
+
+ {format(this.props.day, this.props.dayDisplayFormat)}
+
+ )}
);
diff --git a/src/components/DayCell/index.scss b/src/components/DayCell/index.scss
index e6f0c6543..301e52f8a 100644
--- a/src/components/DayCell/index.scss
+++ b/src/components/DayCell/index.scss
@@ -37,3 +37,7 @@
.rdrDayHovered{}
.rdrDayActive{}
+
+.rangeEdgeWhiteText {
+ color: #E0E0E0 !important;
+}
diff --git a/src/theme/default.scss b/src/theme/default.scss
index 0e17aecac..1807d2160 100644
--- a/src/theme/default.scss
+++ b/src/theme/default.scss
@@ -1,22 +1,23 @@
-.rdrCalendarWrapper{
+.rdrCalendarWrapper {
color: #000000;
font-size: 12px;
}
-.rdrDateDisplayWrapper{
+.rdrDateDisplayWrapper {
background-color: rgb(239, 242, 247);
}
-.rdrDateDisplay{
+.rdrDateDisplay {
margin: 0.833em;
}
-.rdrDateDisplayItem{
+.rdrDateDisplayItem {
border-radius: 4px;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
border: 1px solid transparent;
- input{
+
+ input {
cursor: pointer;
height: 2.5em;
line-height: 2.5em;
@@ -27,12 +28,12 @@
}
}
-.rdrDateDisplayItemActive{
+.rdrDateDisplayItemActive {
border-color: currentColor;
}
-.rdrDateDisplayItemActive{
- input{
+.rdrDateDisplayItemActive {
+ input {
color: #7d888d
}
}
@@ -43,9 +44,10 @@
padding-top: 10px;
}
-.rdrMonthAndYearPickers{
+.rdrMonthAndYearPickers:not(.dark):not(.light) {
font-weight: 600;
- select{
+
+ select {
appearance: none;
-webkit-appearance: none;
border: 0;
@@ -58,13 +60,14 @@
background-position: right 8px center;
cursor: pointer;
text-align: center;
- &:hover{
- background-color: rgba(0,0,0,0.07);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.07);
}
}
}
-.rdrMonthPicker, .rdrYearPicker{
+.rdrMonthPicker, .rdrYearPicker {
margin: 0 5px
}
@@ -77,9 +80,11 @@
border: 0;
border-radius: 5px;
background: #EFF2F7;
- &:hover{
+
+ &:hover {
background: #E1E7F0;
}
+
i {
display: block;
width: 0;
@@ -114,16 +119,17 @@
padding: 0 0.833em;
}
-.rdrMonth{
+.rdrMonth {
padding: 0 0.833em 1.666em 0.833em;
+
.rdrWeekDays {
padding: 0;
}
-}
+}
-.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
+.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName {
display: none;
-}
+}
.rdrWeekDay {
font-weight: 400;
@@ -140,6 +146,7 @@
height: 3.000em;
text-align: center;
color: #1d2429;
+
&:focus {
outline: 0;
}
@@ -160,40 +167,56 @@
justify-content: center;
}
-.rdrDayToday .rdrDayNumber span{
+.rdrDayToday .rdrDayNumber span {
font-weight: 500;
- &:after{
+
+ &:after {
content: '';
position: absolute;
- bottom: 4px;
- left: 50%;
- transform: translate(-50%, 0);
- width: 18px;
- height: 2px;
- border-radius: 2px;
- background: #3d91ff;
+ height: 4px;
+ width: 4px;
+ bottom: 8px;
+ border-radius: 0;
}
}
.rdrDayToday:not(.rdrDayPassive) {
- .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
- & ~ .rdrDayNumber span:after{
- background: #fff;
+ .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected {
+ & ~ .rdrDayNumber .light span:after {
+ background: #161616;
}
}
}
-.rdrDay:not(.rdrDayPassive){
- .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
- & ~ .rdrDayNumber{
- span{
- color: rgba(255, 255, 255, 0.85);
- }
+.rdrDayToday:not(.rdrDayPassive) {
+ .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected {
+ & ~ .rdrDayNumber .dark span:after {
+ background: #F4F4F4;
+ }
+ }
+}
+
+.rdrDay:not(.rdrDayPassive) {
+ .rdrStartEdge, .rdrEndEdge, .rdrSelected {
+ & ~ .rdrDayNumber {
+ span {
+ color: rgba(255, 255, 255, 0.85);
}
+ }
}
}
-.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
+.rdrDay:not(.rdrDayPassive) {
+ .rdrInRange {
+ & ~ .rdrDayNumber {
+ span {
+ color: #161616;
+ }
+ }
+ }
+}
+
+.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge {
background: currentColor;
position: absolute;
top: 5px;
@@ -202,47 +225,48 @@
bottom: 5px;
}
-.rdrSelected{
+.rdrSelected {
left: 2px;
right: 2px;
}
-.rdrInRange{}
+.rdrInRange {
+}
-.rdrStartEdge{
+.rdrStartEdge {
border-top-left-radius: 1.042em;
border-bottom-left-radius: 1.042em;
left: 2px;
}
-.rdrEndEdge{
+.rdrEndEdge {
border-top-right-radius: 1.042em;
border-bottom-right-radius: 1.042em;
right: 2px;
}
-.rdrSelected{
+.rdrSelected {
border-radius: 1.042em;
}
-.rdrDayStartOfMonth, .rdrDayStartOfWeek{
- .rdrInRange, .rdrEndEdge{
+.rdrDayStartOfMonth, .rdrDayStartOfWeek {
+ .rdrInRange, .rdrEndEdge {
border-top-left-radius: 1.042em;
border-bottom-left-radius: 1.042em;
left: 2px;
}
}
-.rdrDayEndOfMonth, .rdrDayEndOfWeek{
- .rdrInRange, .rdrStartEdge{
+.rdrDayEndOfMonth, .rdrDayEndOfWeek {
+ .rdrInRange, .rdrStartEdge {
border-top-right-radius: 1.042em;
border-bottom-right-radius: 1.042em;
right: 2px;
}
}
-.rdrDayStartOfMonth, .rdrDayStartOfWeek{
- .rdrDayInPreview, .rdrDayEndPreview{
+.rdrDayStartOfMonth, .rdrDayStartOfWeek {
+ .rdrDayInPreview, .rdrDayEndPreview {
border-top-left-radius: 1.333em;
border-bottom-left-radius: 1.333em;
border-left-width: 1px;
@@ -250,17 +274,17 @@
}
}
-.rdrDayEndOfMonth, .rdrDayEndOfWeek{
- .rdrDayInPreview, .rdrDayStartPreview{
- border-top-right-radius: 1.333em;
- border-bottom-right-radius: 1.333em;
- border-right-width: 1px;
- right: 0px;
- }
+.rdrDayEndOfMonth, .rdrDayEndOfWeek {
+ .rdrDayInPreview, .rdrDayStartPreview {
+ border-top-right-radius: 1.333em;
+ border-bottom-right-radius: 1.333em;
+ border-right-width: 1px;
+ right: 0px;
+ }
}
-.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
+.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview {
background: rgba(255, 255, 255, 0.09);
position: absolute;
top: 3px;
@@ -273,7 +297,7 @@
}
-.rdrDayStartPreview{
+.rdrDayStartPreview {
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
@@ -282,12 +306,12 @@
left: 0px;
}
-.rdrDayInPreview{
+.rdrDayInPreview {
border-top-width: 1px;
border-bottom-width: 1px;
}
-.rdrDayEndPreview{
+.rdrDayEndPreview {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
@@ -297,18 +321,19 @@
right: 0px;
}
-.rdrDefinedRangesWrapper{
+.rdrDefinedRangesWrapper {
font-size: 12px;
width: 226px;
border-right: solid 1px #eff2f7;
background: #fff;
- .rdrStaticRangeSelected{
+
+ .rdrStaticRangeSelected {
color: currentColor;
font-weight: 600;
}
}
-.rdrStaticRange{
+.rdrStaticRange {
border: 0;
cursor: pointer;
display: block;
@@ -316,14 +341,15 @@
border-bottom: 1px solid #eff2f7;
padding: 0;
background: #fff;
- &:hover, &:focus{
- .rdrStaticRangeLabel{
+
+ &:hover, &:focus {
+ .rdrStaticRangeLabel {
background: #eff2f7;
}
}
}
-.rdrStaticRangeLabel{
+.rdrStaticRangeLabel {
display: block;
outline: 0;
line-height: 18px;
@@ -331,16 +357,16 @@
text-align: left;
}
-.rdrInputRanges{
+.rdrInputRanges {
padding: 10px 0;
}
-.rdrInputRange{
+.rdrInputRange {
align-items: center;
padding: 5px 20px;
}
-.rdrInputRangeInput{
+.rdrInputRangeInput {
width: 30px;
height: 30px;
line-height: 30px;
@@ -349,48 +375,53 @@
border: solid 1px rgb(222, 231, 235);
margin-right: 10px;
color: rgb(108, 118, 122);
- &:focus, &:hover{
+
+ &:focus, &:hover {
border-color: rgb(180, 191, 196);
outline: 0;
color: #333;
}
}
-.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
- content: '';
- border: 1px solid currentColor;
- border-radius: 1.333em;
- position: absolute;
- top: -2px;
- bottom: -2px;
- left: 0px;
- right: 0px;
+.rdrCalendarWrapper:not(.rdrDateRangeWrapper):not(.dark):not(.light) .rdrDayHovered .rdrDayNumber:after {
+ height: 4px;
+ width: 4px;
+ bottom: 8px;
+ border-radius: 0;
background: transparent;
}
-.rdrDayPassive{
+.rdrDayPassive {
pointer-events: none;
- .rdrDayNumber span{
+
+ .rdrDayNumber span {
color: #d5dce0;
}
- .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
+
+ .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview {
display: none;
}
}
.rdrDayDisabled {
background-color: rgb(248, 248, 248);
- .rdrDayNumber span{
+
+ .rdrDayNumber span {
color: #aeb9bf;
}
- .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
+
+ .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview {
filter: grayscale(100%) opacity(60%);
}
}
-.rdrMonthName{
+.rdrMonthName {
text-align: left;
font-weight: 600;
color: #849095;
padding: 0.833em;
}
+
+.rangeEdgeWhiteText {
+ color: #E0E0E0 !important;
+}