react-calendar
Advanced tools
Comparing version 2.18.1 to 2.19.0
@@ -342,15 +342,19 @@ "use strict"; | ||
switch (returnValue) { | ||
case 'start': | ||
return getDetailValueFrom(value, minDate, maxDate, maxDetail); | ||
var processFunction = function () { | ||
switch (returnValue) { | ||
case 'start': | ||
return getDetailValueFrom; | ||
case 'end': | ||
return getDetailValueTo(value, minDate, maxDate, maxDetail); | ||
case 'end': | ||
return getDetailValueTo; | ||
case 'range': | ||
return getDetailValueArray(value, minDate, maxDate, maxDetail); | ||
case 'range': | ||
return getDetailValueArray; | ||
default: | ||
throw new Error('Invalid returnValue.'); | ||
} | ||
default: | ||
throw new Error('Invalid returnValue.'); | ||
} | ||
}(); | ||
return processFunction(value, minDate, maxDate, maxDetail); | ||
} | ||
@@ -461,13 +465,16 @@ }, { | ||
minDetail = _this$props8.minDetail, | ||
navigationAriaLabel = _this$props8.navigationAriaLabel, | ||
navigationLabel = _this$props8.navigationLabel, | ||
next2AriaLabel = _this$props8.next2AriaLabel, | ||
next2Label = _this$props8.next2Label, | ||
nextAriaLabel = _this$props8.nextAriaLabel, | ||
nextLabel = _this$props8.nextLabel, | ||
navigationLabel = _this$props8.navigationLabel, | ||
prev2AriaLabel = _this$props8.prev2AriaLabel, | ||
prev2Label = _this$props8.prev2Label, | ||
prevAriaLabel = _this$props8.prevAriaLabel, | ||
prevLabel = _this$props8.prevLabel; | ||
var _this$state3 = this.state, | ||
activeRange = _this$state3.activeRange, | ||
activeStartDate = _this$state3.activeStartDate, | ||
view = _this$state3.view; | ||
return _react.default.createElement(_Navigation.default, { | ||
activeRange: activeRange, | ||
activeStartDate: activeStartDate, | ||
@@ -479,6 +486,11 @@ drillUp: this.drillUp, | ||
minDate: minDate, | ||
navigationAriaLabel: navigationAriaLabel, | ||
navigationLabel: navigationLabel, | ||
next2AriaLabel: next2AriaLabel, | ||
next2Label: next2Label, | ||
nextAriaLabel: nextAriaLabel, | ||
nextLabel: nextLabel, | ||
navigationLabel: navigationLabel, | ||
prev2AriaLabel: prev2AriaLabel, | ||
prev2Label: prev2Label, | ||
prevAriaLabel: prevAriaLabel, | ||
prevLabel: prevLabel, | ||
@@ -613,4 +625,7 @@ setActiveStartDate: this.setActiveStartDate, | ||
minDetail: _propTypes.default.oneOf(allViews), | ||
navigationAriaLabel: _propTypes.default.string, | ||
navigationLabel: _propTypes.default.func, | ||
next2AriaLabel: _propTypes.default.string, | ||
next2Label: _propTypes.default.node, | ||
nextAriaLabel: _propTypes.default.string, | ||
nextLabel: _propTypes.default.node, | ||
@@ -626,3 +641,5 @@ onActiveDateChange: _propTypes.default.func, | ||
onDrillUp: _propTypes.default.func, | ||
prev2AriaLabel: _propTypes.default.string, | ||
prev2Label: _propTypes.default.node, | ||
prevAriaLabel: _propTypes.default.string, | ||
prevLabel: _propTypes.default.node, | ||
@@ -629,0 +646,0 @@ renderChildren: _propTypes.default.func, |
@@ -152,2 +152,30 @@ "use strict"; | ||
}); | ||
it('displays proper user-defined ARIA labels on prev2, prev, navigation, next and next2 buttons', function () { | ||
var component = (0, _enzyme.shallow)(_react.default.createElement(_Navigation.default, { | ||
activeStartDate: new Date(2017, 0, 1), | ||
drillUp: jest.fn(), | ||
navigationAriaLabel: "navigationAriaLabel", | ||
next2AriaLabel: "next2AriaLabel", | ||
nextAriaLabel: "nextAriaLabel", | ||
prev2AriaLabel: "prev2AriaLabel", | ||
prevAriaLabel: "prevAriaLabel", | ||
setActiveStartDate: jest.fn(), | ||
view: "month", | ||
views: allViews | ||
})); | ||
var _component$children11 = component.children(), | ||
_component$children12 = _slicedToArray(_component$children11, 5), | ||
prev2 = _component$children12[0], | ||
prev = _component$children12[1], | ||
navigation = _component$children12[2], | ||
next = _component$children12[3], | ||
next2 = _component$children12[4]; | ||
expect(prev2.props['aria-label']).toBe('prev2AriaLabel'); | ||
expect(prev.props['aria-label']).toBe('prevAriaLabel'); | ||
expect(navigation.props['aria-label']).toBe('navigationAriaLabel'); | ||
expect(next.props['aria-label']).toBe('nextAriaLabel'); | ||
expect(next2.props['aria-label']).toBe('next2AriaLabel'); | ||
}); | ||
it('calls drillUp function on drill up button click', function () { | ||
@@ -395,5 +423,5 @@ var drillUpFn = jest.fn(); | ||
var _component$children11 = component.children(), | ||
_component$children12 = _slicedToArray(_component$children11, 3), | ||
drillUp = _component$children12[2]; | ||
var _component$children13 = component.children(), | ||
_component$children14 = _slicedToArray(_component$children13, 3), | ||
drillUp = _component$children14[2]; | ||
@@ -400,0 +428,0 @@ expect(navigationLabel).toHaveBeenCalledWith({ |
@@ -6,5 +6,5 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Navigation; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _react = _interopRequireDefault(require("react")); | ||
@@ -21,227 +21,142 @@ var _propTypes = _interopRequireDefault(require("prop-types")); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
var className = 'react-calendar__navigation'; | ||
function _typeof(obj) { 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); } | ||
function Navigation(_ref) { | ||
var date = _ref.activeStartDate, | ||
drillUp = _ref.drillUp, | ||
formatMonthYear = _ref.formatMonthYear, | ||
locale = _ref.locale, | ||
maxDate = _ref.maxDate, | ||
minDate = _ref.minDate, | ||
navigationAriaLabel = _ref.navigationAriaLabel, | ||
navigationLabel = _ref.navigationLabel, | ||
next2AriaLabel = _ref.next2AriaLabel, | ||
next2Label = _ref.next2Label, | ||
nextAriaLabel = _ref.nextAriaLabel, | ||
nextLabel = _ref.nextLabel, | ||
prev2AriaLabel = _ref.prev2AriaLabel, | ||
prev2Label = _ref.prev2Label, | ||
prevAriaLabel = _ref.prevAriaLabel, | ||
prevLabel = _ref.prevLabel, | ||
setActiveStartDate = _ref.setActiveStartDate, | ||
view = _ref.view, | ||
views = _ref.views; | ||
var drillUpAvailable = views.indexOf(view) > 0; | ||
var shouldShowPrevNext2Buttons = view !== 'century'; | ||
var previousActiveStartDate = (0, _dates.getBeginPrevious)(view, date); | ||
var previousActiveStartDate2 = shouldShowPrevNext2Buttons && (0, _dates.getBeginPrevious2)(view, date); | ||
var nextActiveStartDate = (0, _dates.getBeginNext)(view, date); | ||
var nextActiveStartDate2 = shouldShowPrevNext2Buttons && (0, _dates.getBeginNext2)(view, date); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var prevButtonDisabled = function () { | ||
if (previousActiveStartDate.getFullYear() < 1000) { | ||
return true; | ||
} | ||
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); } } | ||
var previousActiveEndDate = (0, _dates.getEndPrevious)(view, date); | ||
return minDate && minDate >= previousActiveEndDate; | ||
}(); | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
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 Navigation = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
_inherits(Navigation, _PureComponent); | ||
function Navigation() { | ||
var _getPrototypeOf2; | ||
var _this; | ||
_classCallCheck(this, Navigation); | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
var prev2ButtonDisabled = shouldShowPrevNext2Buttons && function () { | ||
if (previousActiveStartDate2.getFullYear() < 1000) { | ||
return true; | ||
} | ||
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Navigation)).call.apply(_getPrototypeOf2, [this].concat(args))); | ||
var previousActiveEndDate = (0, _dates.getEndPrevious2)(view, date); | ||
return minDate && minDate >= previousActiveEndDate; | ||
}(); | ||
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClickPrevious", function () { | ||
var _this$props = _this.props, | ||
date = _this$props.activeStartDate, | ||
view = _this$props.view, | ||
setActiveStartDate = _this$props.setActiveStartDate; | ||
setActiveStartDate((0, _dates.getBeginPrevious)(view, date)); | ||
}); | ||
var nextButtonDisabled = maxDate && maxDate <= nextActiveStartDate; | ||
var next2ButtonDisabled = shouldShowPrevNext2Buttons && maxDate && maxDate <= nextActiveStartDate2; | ||
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClickNext", function () { | ||
var _this$props2 = _this.props, | ||
date = _this$props2.activeStartDate, | ||
view = _this$props2.view, | ||
setActiveStartDate = _this$props2.setActiveStartDate; | ||
setActiveStartDate((0, _dates.getBeginNext)(view, date)); | ||
}); | ||
function onClickPrevious() { | ||
setActiveStartDate(previousActiveStartDate); | ||
} | ||
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClickPrevious2", function () { | ||
var _this$props3 = _this.props, | ||
date = _this$props3.activeStartDate, | ||
view = _this$props3.view, | ||
setActiveStartDate = _this$props3.setActiveStartDate; | ||
setActiveStartDate((0, _dates.getBeginPrevious2)(view, date)); | ||
}); | ||
function onClickPrevious2() { | ||
setActiveStartDate(previousActiveStartDate2); | ||
} | ||
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onClickNext2", function () { | ||
var _this$props4 = _this.props, | ||
date = _this$props4.activeStartDate, | ||
view = _this$props4.view, | ||
setActiveStartDate = _this$props4.setActiveStartDate; | ||
setActiveStartDate((0, _dates.getBeginNext2)(view, date)); | ||
}); | ||
function onClickNext() { | ||
setActiveStartDate(nextActiveStartDate); | ||
} | ||
return _this; | ||
function onClickNext2() { | ||
setActiveStartDate(nextActiveStartDate2); | ||
} | ||
_createClass(Navigation, [{ | ||
key: "render", | ||
value: function render() { | ||
var label = this.label; | ||
var _this$props5 = this.props, | ||
date = _this$props5.activeStartDate, | ||
drillUp = _this$props5.drillUp, | ||
navigationLabel = _this$props5.navigationLabel, | ||
next2Label = _this$props5.next2Label, | ||
nextLabel = _this$props5.nextLabel, | ||
prev2Label = _this$props5.prev2Label, | ||
prevLabel = _this$props5.prevLabel, | ||
view = _this$props5.view; | ||
var className = 'react-calendar__navigation'; | ||
return _react.default.createElement("div", { | ||
className: className, | ||
style: { | ||
display: 'flex' | ||
} | ||
}, prev2Label !== null && view !== 'century' && _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__prev2-button"), | ||
disabled: this.prev2ButtonDisabled, | ||
onClick: this.onClickPrevious2, | ||
type: "button" | ||
}, prev2Label), _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__prev-button"), | ||
disabled: this.prevButtonDisabled, | ||
onClick: this.onClickPrevious, | ||
type: "button" | ||
}, prevLabel), _react.default.createElement("button", { | ||
className: "react-calendar__navigation__label", | ||
onClick: drillUp, | ||
disabled: !this.drillUpAvailable, | ||
style: { | ||
flexGrow: 1 | ||
}, | ||
type: "button" | ||
}, navigationLabel ? navigationLabel({ | ||
date: date, | ||
view: view, | ||
label: label | ||
}) : label), _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__next-button"), | ||
disabled: this.nextButtonDisabled, | ||
onClick: this.onClickNext, | ||
type: "button" | ||
}, nextLabel), next2Label !== null && view !== 'century' && _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__next2-button"), | ||
disabled: this.next2ButtonDisabled, | ||
onClick: this.onClickNext2, | ||
type: "button" | ||
}, next2Label)); | ||
} | ||
}, { | ||
key: "drillUpAvailable", | ||
get: function get() { | ||
var _this$props6 = this.props, | ||
view = _this$props6.view, | ||
views = _this$props6.views; | ||
return views.indexOf(view) > 0; | ||
} | ||
}, { | ||
key: "prevButtonDisabled", | ||
get: function get() { | ||
var _this$props7 = this.props, | ||
date = _this$props7.activeStartDate, | ||
minDate = _this$props7.minDate, | ||
view = _this$props7.view; | ||
var previousActiveStartDate = (0, _dates.getBeginPrevious)(view, date); | ||
var label = function () { | ||
switch (view) { | ||
case 'century': | ||
return (0, _dates.getCenturyLabel)(date); | ||
if (previousActiveStartDate.getFullYear() < 1000) { | ||
return true; | ||
} | ||
case 'decade': | ||
return (0, _dates.getDecadeLabel)(date); | ||
var previousActiveEndDate = (0, _dates.getEndPrevious)(view, date); | ||
return minDate && minDate >= previousActiveEndDate; | ||
} | ||
}, { | ||
key: "prev2ButtonDisabled", | ||
get: function get() { | ||
var _this$props8 = this.props, | ||
date = _this$props8.activeStartDate, | ||
minDate = _this$props8.minDate, | ||
view = _this$props8.view; | ||
var previousActiveStartDate = (0, _dates.getBeginPrevious2)(view, date); | ||
case 'year': | ||
return (0, _dates.getYear)(date); | ||
if (previousActiveStartDate.getFullYear() < 1000) { | ||
return true; | ||
} | ||
case 'month': | ||
return formatMonthYear(locale, date); | ||
var previousActiveEndDate = (0, _dates.getEndPrevious2)(view, date); | ||
return minDate && minDate >= previousActiveEndDate; | ||
default: | ||
throw new Error("Invalid view: ".concat(view, ".")); | ||
} | ||
}, { | ||
key: "nextButtonDisabled", | ||
get: function get() { | ||
var _this$props9 = this.props, | ||
date = _this$props9.activeStartDate, | ||
maxDate = _this$props9.maxDate, | ||
view = _this$props9.view; | ||
var nextActiveStartDate = (0, _dates.getBeginNext)(view, date); | ||
return maxDate && maxDate <= nextActiveStartDate; | ||
} | ||
}, { | ||
key: "next2ButtonDisabled", | ||
get: function get() { | ||
var _this$props10 = this.props, | ||
date = _this$props10.activeStartDate, | ||
maxDate = _this$props10.maxDate, | ||
view = _this$props10.view; | ||
var nextActiveStartDate = (0, _dates.getBeginNext2)(view, date); | ||
return maxDate && maxDate <= nextActiveStartDate; | ||
} | ||
}, { | ||
key: "label", | ||
get: function get() { | ||
var _this$props11 = this.props, | ||
date = _this$props11.activeStartDate, | ||
formatMonthYear = _this$props11.formatMonthYear, | ||
locale = _this$props11.locale, | ||
view = _this$props11.view; | ||
}(); | ||
switch (view) { | ||
case 'century': | ||
return (0, _dates.getCenturyLabel)(date); | ||
case 'decade': | ||
return (0, _dates.getDecadeLabel)(date); | ||
case 'year': | ||
return (0, _dates.getYear)(date); | ||
case 'month': | ||
return formatMonthYear(locale, date); | ||
default: | ||
throw new Error("Invalid view: ".concat(view, ".")); | ||
} | ||
return _react.default.createElement("div", { | ||
className: className, | ||
style: { | ||
display: 'flex' | ||
} | ||
}]); | ||
}, prev2Label !== null && shouldShowPrevNext2Buttons && _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__prev2-button"), | ||
disabled: prev2ButtonDisabled, | ||
onClick: onClickPrevious2, | ||
type: "button", | ||
"aria-label": prev2AriaLabel | ||
}, prev2Label), _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__prev-button"), | ||
disabled: prevButtonDisabled, | ||
onClick: onClickPrevious, | ||
type: "button", | ||
"aria-label": prevAriaLabel | ||
}, prevLabel), _react.default.createElement("button", { | ||
className: "react-calendar__navigation__label", | ||
onClick: drillUp, | ||
disabled: !drillUpAvailable, | ||
style: { | ||
flexGrow: 1 | ||
}, | ||
type: "button", | ||
"aria-label": navigationAriaLabel | ||
}, navigationLabel ? navigationLabel({ | ||
date: date, | ||
view: view, | ||
label: label | ||
}) : label), _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__next-button"), | ||
disabled: nextButtonDisabled, | ||
onClick: onClickNext, | ||
type: "button", | ||
"aria-label": nextAriaLabel | ||
}, nextLabel), next2Label !== null && shouldShowPrevNext2Buttons && _react.default.createElement("button", { | ||
className: "".concat(className, "__arrow ").concat(className, "__next2-button"), | ||
disabled: next2ButtonDisabled, | ||
onClick: onClickNext2, | ||
type: "button", | ||
"aria-label": next2AriaLabel | ||
}, next2Label)); | ||
} | ||
return Navigation; | ||
}(_react.PureComponent); | ||
exports.default = Navigation; | ||
Navigation.defaultProps = { | ||
formatMonthYear: _dateFormatter.formatMonthYear, | ||
navigationAriaLabel: '', | ||
next2AriaLabel: '', | ||
next2Label: '»', | ||
nextAriaLabel: '', | ||
nextLabel: '›', | ||
prev2AriaLabel: '', | ||
prev2Label: '«', | ||
prevAriaLabel: '', | ||
prevLabel: '‹' | ||
@@ -256,6 +171,11 @@ }; | ||
minDate: _propTypes.default.instanceOf(Date), | ||
next2AriaLabel: _propTypes.default.string, | ||
next2Label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), | ||
nextAriaLabel: _propTypes.default.string, | ||
nextLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), | ||
navigationAriaLabel: _propTypes.default.string, | ||
navigationLabel: _propTypes.default.func, | ||
prev2AriaLabel: _propTypes.default.string, | ||
prev2Label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), | ||
prevAriaLabel: _propTypes.default.string, | ||
prevLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), | ||
@@ -262,0 +182,0 @@ setActiveStartDate: _propTypes.default.func.isRequired, |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Decade; | ||
@@ -27,10 +27,2 @@ var _react = _interopRequireDefault(require("react")); | ||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } | ||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } | ||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } | ||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
@@ -42,3 +34,3 @@ | ||
var Decade = function Decade(_ref) { | ||
function Decade(_ref) { | ||
var classes = _ref.classes, | ||
@@ -49,3 +41,3 @@ point = _ref.point, | ||
return _react.default.createElement(_Tile.default, _extends({}, otherProps, { | ||
classes: [].concat(_toConsumableArray(classes), [className]), | ||
classes: [].concat(classes, className), | ||
maxDateTransform: _dates.getEndOfDecade, | ||
@@ -55,8 +47,6 @@ minDateTransform: _dates.getBeginOfDecade, | ||
}), (0, _dates.getDecadeLabel)(point)); | ||
}; | ||
} | ||
Decade.propTypes = _objectSpread({}, _propTypes2.tileProps, { | ||
point: _propTypes.default.number.isRequired | ||
}); | ||
var _default = Decade; | ||
exports.default = _default; | ||
}); |
@@ -6,5 +6,5 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Decades; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _react = _interopRequireDefault(require("react")); | ||
@@ -21,4 +21,2 @@ var _TileGroup = _interopRequireDefault(require("../TileGroup")); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
@@ -28,63 +26,19 @@ | ||
function _typeof(obj) { 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); } | ||
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 Decades(props) { | ||
var activeStartDate = props.activeStartDate; | ||
var start = (0, _dates.getBeginOfCenturyYear)(activeStartDate); | ||
var end = start + 99; | ||
return _react.default.createElement(_TileGroup.default, _extends({}, props, { | ||
className: "react-calendar__century-view__decades", | ||
dateTransform: _dates.getBeginOfDecade, | ||
dateType: "decade", | ||
end: end, | ||
start: start, | ||
step: 10, | ||
tile: _Decade.default | ||
})); | ||
} | ||
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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
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); } | ||
var Decades = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
_inherits(Decades, _PureComponent); | ||
function Decades() { | ||
_classCallCheck(this, Decades); | ||
return _possibleConstructorReturn(this, _getPrototypeOf(Decades).apply(this, arguments)); | ||
} | ||
_createClass(Decades, [{ | ||
key: "render", | ||
value: function render() { | ||
return _react.default.createElement(_TileGroup.default, _extends({}, this.props, { | ||
className: "react-calendar__century-view__decades", | ||
dateTransform: _dates.getBeginOfDecade, | ||
dateType: "decade", | ||
end: this.end, | ||
start: this.start, | ||
step: 10, | ||
tile: _Decade.default | ||
})); | ||
} | ||
}, { | ||
key: "start", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getBeginOfCenturyYear)(activeStartDate); | ||
} | ||
}, { | ||
key: "end", | ||
get: function get() { | ||
return this.start + 99; | ||
} | ||
}]); | ||
return Decades; | ||
}(_react.PureComponent); | ||
exports.default = Decades; | ||
Decades.propTypes = _objectSpread({}, _propTypes.tileGroupProps); |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Year; | ||
@@ -27,10 +27,2 @@ var _react = _interopRequireDefault(require("react")); | ||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } | ||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } | ||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } | ||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
@@ -42,3 +34,3 @@ | ||
var Year = function Year(_ref) { | ||
function Year(_ref) { | ||
var classes = _ref.classes, | ||
@@ -49,3 +41,3 @@ point = _ref.point, | ||
return _react.default.createElement(_Tile.default, _extends({}, otherProps, { | ||
classes: [].concat(_toConsumableArray(classes), [className]), | ||
classes: [].concat(classes, className), | ||
maxDateTransform: _dates.getEndOfYear, | ||
@@ -55,8 +47,6 @@ minDateTransform: _dates.getBeginOfYear, | ||
}), point); | ||
}; | ||
} | ||
Year.propTypes = _objectSpread({}, _propTypes2.tileProps, { | ||
point: _propTypes.default.number.isRequired | ||
}); | ||
var _default = Year; | ||
exports.default = _default; | ||
}); |
@@ -6,5 +6,5 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Years; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _react = _interopRequireDefault(require("react")); | ||
@@ -21,4 +21,2 @@ var _TileGroup = _interopRequireDefault(require("../TileGroup")); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
@@ -28,64 +26,20 @@ | ||
function _typeof(obj) { 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); } | ||
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 Years(props) { | ||
var activeStartDate = props.activeStartDate; | ||
var start = (0, _dates.getBeginOfDecadeYear)(activeStartDate); | ||
var end = start + 9; | ||
return _react.default.createElement(_TileGroup.default, _extends({}, props, { | ||
className: "react-calendar__decade-view__years", | ||
dateTransform: function dateTransform(year) { | ||
return new Date(year, 0, 1); | ||
}, | ||
dateType: "year", | ||
end: end, | ||
start: start, | ||
tile: _Year.default | ||
})); | ||
} | ||
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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
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); } | ||
var Years = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
_inherits(Years, _PureComponent); | ||
function Years() { | ||
_classCallCheck(this, Years); | ||
return _possibleConstructorReturn(this, _getPrototypeOf(Years).apply(this, arguments)); | ||
} | ||
_createClass(Years, [{ | ||
key: "render", | ||
value: function render() { | ||
return _react.default.createElement(_TileGroup.default, _extends({}, this.props, { | ||
className: "react-calendar__decade-view__years", | ||
dateTransform: function dateTransform(year) { | ||
return new Date(year, 0, 1); | ||
}, | ||
dateType: "year", | ||
end: this.end, | ||
start: this.start, | ||
tile: _Year.default | ||
})); | ||
} | ||
}, { | ||
key: "start", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getBeginOfDecadeYear)(activeStartDate); | ||
} | ||
}, { | ||
key: "end", | ||
get: function get() { | ||
return this.start + 9; | ||
} | ||
}]); | ||
return Years; | ||
}(_react.PureComponent); | ||
exports.default = Years; | ||
Years.propTypes = _objectSpread({}, _propTypes.tileGroupProps); |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Flex; | ||
@@ -25,7 +25,7 @@ var _react = _interopRequireDefault(require("react")); | ||
var toPercent = function toPercent(num) { | ||
function toPercent(num) { | ||
return "".concat(num, "%"); | ||
}; | ||
} | ||
var Flex = function Flex(_ref) { | ||
function Flex(_ref) { | ||
var children = _ref.children, | ||
@@ -57,3 +57,3 @@ className = _ref.className, | ||
})); | ||
}; | ||
} | ||
@@ -68,4 +68,2 @@ Flex.propTypes = { | ||
wrap: _propTypes.default.bool | ||
}; | ||
var _default = Flex; | ||
exports.default = _default; | ||
}; |
@@ -63,3 +63,2 @@ "use strict"; | ||
var _this$props = this.props, | ||
activeStartDate = _this$props.activeStartDate, | ||
formatShortWeekday = _this$props.formatShortWeekday, | ||
@@ -70,3 +69,2 @@ locale = _this$props.locale; | ||
locale: locale, | ||
activeStartDate: activeStartDate, | ||
formatShortWeekday: formatShortWeekday | ||
@@ -73,0 +71,0 @@ }); |
@@ -11,13 +11,8 @@ "use strict"; | ||
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); } | ||
/* eslint-disable comma-dangle */ | ||
var weekdaysProps = { | ||
activeStartDate: new Date(2018, 0, 1) | ||
}; | ||
describe('Weekdays', function () { | ||
it('renders proper weekdays (ISO 8601)', function () { | ||
var component = (0, _enzyme.mount)(_react.default.createElement(_Weekdays.default, _extends({}, weekdaysProps, { | ||
var component = (0, _enzyme.mount)(_react.default.createElement(_Weekdays.default, { | ||
calendarType: "ISO 8601" | ||
}))); | ||
})); | ||
var weekdays = component.find('.react-calendar__month-view__weekdays__weekday'); | ||
@@ -31,5 +26,5 @@ var firstWeekday = weekdays.first(); | ||
it('renders proper weekdays (US)', function () { | ||
var component = (0, _enzyme.mount)(_react.default.createElement(_Weekdays.default, _extends({}, weekdaysProps, { | ||
var component = (0, _enzyme.mount)(_react.default.createElement(_Weekdays.default, { | ||
calendarType: "US" | ||
}))); | ||
})); | ||
var weekdays = component.find('.react-calendar__month-view__weekdays__weekday'); | ||
@@ -36,0 +31,0 @@ var firstWeekday = weekdays.first(); |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Day; | ||
@@ -29,10 +29,2 @@ var _react = _interopRequireDefault(require("react")); | ||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } | ||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } | ||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } | ||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
@@ -44,3 +36,3 @@ | ||
var Day = function Day(_ref) { | ||
function Day(_ref) { | ||
var calendarType = _ref.calendarType, | ||
@@ -53,3 +45,3 @@ classes = _ref.classes, | ||
return _react.default.createElement(_Tile.default, _extends({}, otherProps, { | ||
classes: [].concat(_toConsumableArray(classes), [className, (0, _dates.isWeekend)(date, calendarType) ? "".concat(className, "--weekend") : null, date.getMonth() !== currentMonthIndex ? "".concat(className, "--neighboringMonth") : null]), | ||
classes: [].concat(classes, className, (0, _dates.isWeekend)(date, calendarType) ? "".concat(className, "--weekend") : null, date.getMonth() !== currentMonthIndex ? "".concat(className, "--neighboringMonth") : null), | ||
date: date, | ||
@@ -61,8 +53,6 @@ formatAbbr: _dateFormatter.formatLongDate, | ||
}), (0, _dates.getDay)(date)); | ||
}; | ||
} | ||
Day.propTypes = _objectSpread({}, _propTypes2.tileProps, { | ||
currentMonthIndex: _propTypes.default.number.isRequired | ||
}); | ||
var _default = Day; | ||
exports.default = _default; | ||
}); |
@@ -6,5 +6,5 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Days; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _react = _interopRequireDefault(require("react")); | ||
@@ -23,4 +23,2 @@ var _propTypes = _interopRequireDefault(require("prop-types")); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
@@ -30,4 +28,2 @@ | ||
function _typeof(obj) { 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); } | ||
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); } | ||
@@ -39,142 +35,60 @@ | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function Days(props) { | ||
var activeStartDate = props.activeStartDate, | ||
calendarType = props.calendarType; | ||
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); } } | ||
var showFixedNumberOfWeeks = props.showFixedNumberOfWeeks, | ||
showNeighboringMonth = props.showNeighboringMonth, | ||
otherProps = _objectWithoutProperties(props, ["showFixedNumberOfWeeks", "showNeighboringMonth"]); | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
var year = (0, _dates.getYear)(activeStartDate); | ||
var monthIndex = (0, _dates.getMonthIndex)(activeStartDate); | ||
var hasFixedNumberOfWeeks = showFixedNumberOfWeeks || showNeighboringMonth; | ||
var dayOfWeek = (0, _dates.getDayOfWeek)(activeStartDate, calendarType); | ||
var offset = hasFixedNumberOfWeeks ? 0 : dayOfWeek; | ||
/** | ||
* Defines on which day of the month the grid shall start. If we simply show current | ||
* month, we obviously start on day one, but if showNeighboringMonth is set to | ||
* true, we need to find the beginning of the week the first day of the month is in. | ||
*/ | ||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
var start = (hasFixedNumberOfWeeks ? -dayOfWeek : 0) + 1; | ||
/** | ||
* Defines on which day of the month the grid shall end. If we simply show current | ||
* month, we need to stop on the last day of the month, but if showNeighboringMonth | ||
* is set to true, we need to find the end of the week the last day of the month is in. | ||
*/ | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
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); } | ||
var Days = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
_inherits(Days, _PureComponent); | ||
function Days() { | ||
_classCallCheck(this, Days); | ||
return _possibleConstructorReturn(this, _getPrototypeOf(Days).apply(this, arguments)); | ||
} | ||
_createClass(Days, [{ | ||
key: "render", | ||
value: function render() { | ||
var _this = this; | ||
var monthIndex = this.monthIndex; | ||
var _this$props = this.props, | ||
showFixedNumberOfWeeks = _this$props.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props.showNeighboringMonth, | ||
otherProps = _objectWithoutProperties(_this$props, ["showFixedNumberOfWeeks", "showNeighboringMonth"]); | ||
return _react.default.createElement(_TileGroup.default, _extends({}, otherProps, { | ||
className: "react-calendar__month-view__days", | ||
count: 7, | ||
dateTransform: function dateTransform(day) { | ||
return new Date(_this.year, monthIndex, day); | ||
}, | ||
dateType: "day", | ||
end: this.end, | ||
offset: this.offset, | ||
start: this.start, | ||
tile: _Day.default // Tile props | ||
, | ||
currentMonthIndex: monthIndex | ||
})); | ||
var end = function () { | ||
if (showFixedNumberOfWeeks) { | ||
// Always show 6 weeks | ||
return start + 6 * 7 - 1; | ||
} | ||
}, { | ||
key: "offset", | ||
get: function get() { | ||
var _this$props2 = this.props, | ||
showFixedNumberOfWeeks = _this$props2.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props2.showNeighboringMonth; | ||
if (showFixedNumberOfWeeks || showNeighboringMonth) { | ||
return 0; | ||
} | ||
var daysInMonth = (0, _dates.getDaysInMonth)(activeStartDate); | ||
var _this$props3 = this.props, | ||
activeStartDate = _this$props3.activeStartDate, | ||
calendarType = _this$props3.calendarType; | ||
return (0, _dates.getDayOfWeek)(activeStartDate, calendarType); | ||
if (showNeighboringMonth) { | ||
var activeEndDate = new Date(year, monthIndex, daysInMonth); | ||
return daysInMonth + (7 - (0, _dates.getDayOfWeek)(activeEndDate, calendarType) - 1); | ||
} | ||
/** | ||
* Defines on which day of the month the grid shall start. If we simply show current | ||
* month, we obviously start on day one, but if showNeighboringMonth is set to | ||
* true, we need to find the beginning of the week the first day of the month is in. | ||
*/ | ||
}, { | ||
key: "start", | ||
get: function get() { | ||
var _this$props4 = this.props, | ||
showFixedNumberOfWeeks = _this$props4.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props4.showNeighboringMonth; | ||
return daysInMonth; | ||
}(); | ||
if (showFixedNumberOfWeeks || showNeighboringMonth) { | ||
var _this$props5 = this.props, | ||
activeStartDate = _this$props5.activeStartDate, | ||
calendarType = _this$props5.calendarType; | ||
return -(0, _dates.getDayOfWeek)(activeStartDate, calendarType) + 1; | ||
} | ||
return _react.default.createElement(_TileGroup.default, _extends({}, otherProps, { | ||
className: "react-calendar__month-view__days", | ||
count: 7, | ||
dateTransform: function dateTransform(day) { | ||
return new Date(year, monthIndex, day); | ||
}, | ||
dateType: "day", | ||
end: end, | ||
offset: offset, | ||
start: start, | ||
tile: _Day.default // Tile props | ||
, | ||
currentMonthIndex: monthIndex | ||
})); | ||
} | ||
return 1; | ||
} | ||
/** | ||
* Defines on which day of the month the grid shall end. If we simply show current | ||
* month, we need to stop on the last day of the month, but if showNeighboringMonth | ||
* is set to true, we need to find the end of the week the last day of the month is in. | ||
*/ | ||
}, { | ||
key: "end", | ||
get: function get() { | ||
var _this$props6 = this.props, | ||
activeStartDate = _this$props6.activeStartDate, | ||
showFixedNumberOfWeeks = _this$props6.showFixedNumberOfWeeks, | ||
showNeighboringMonth = _this$props6.showNeighboringMonth; | ||
var daysInMonth = (0, _dates.getDaysInMonth)(activeStartDate); | ||
if (showFixedNumberOfWeeks) { | ||
// Always show 6 weeks | ||
return this.start + 6 * 7 - 1; | ||
} | ||
if (showNeighboringMonth) { | ||
var year = this.year, | ||
monthIndex = this.monthIndex; | ||
var calendarType = this.props.calendarType; | ||
var activeEndDate = new Date(year, monthIndex, daysInMonth); | ||
return daysInMonth + (7 - (0, _dates.getDayOfWeek)(activeEndDate, calendarType) - 1); | ||
} | ||
return daysInMonth; | ||
} | ||
}, { | ||
key: "year", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getYear)(activeStartDate); | ||
} | ||
}, { | ||
key: "monthIndex", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getMonthIndex)(activeStartDate); | ||
} | ||
}]); | ||
return Days; | ||
}(_react.PureComponent); | ||
exports.default = Days; | ||
Days.propTypes = _objectSpread({ | ||
@@ -181,0 +95,0 @@ calendarType: _propTypes2.isCalendarType.isRequired, |
@@ -6,5 +6,5 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Weekdays; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _react = _interopRequireDefault(require("react")); | ||
@@ -23,97 +23,30 @@ var _propTypes = _interopRequireDefault(require("prop-types")); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function Weekdays(props) { | ||
var calendarType = props.calendarType, | ||
formatShortWeekday = props.formatShortWeekday, | ||
locale = props.locale; | ||
var anyDate = new Date(); | ||
var beginOfMonth = (0, _dates.getBeginOfMonth)(anyDate); | ||
var year = (0, _dates.getYear)(beginOfMonth); | ||
var monthIndex = (0, _dates.getMonthIndex)(beginOfMonth); | ||
var weekdays = []; | ||
function _typeof(obj) { 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); } | ||
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 _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
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); } | ||
var Weekdays = | ||
/*#__PURE__*/ | ||
function (_Component) { | ||
_inherits(Weekdays, _Component); | ||
function Weekdays() { | ||
_classCallCheck(this, Weekdays); | ||
return _possibleConstructorReturn(this, _getPrototypeOf(Weekdays).apply(this, arguments)); | ||
for (var weekday = 1; weekday <= 7; weekday += 1) { | ||
var weekdayDate = new Date(year, monthIndex, weekday - (0, _dates.getDayOfWeek)(beginOfMonth, calendarType)); | ||
var abbr = (0, _dateFormatter.formatWeekday)(locale, weekdayDate); | ||
weekdays.push(_react.default.createElement("div", { | ||
className: "react-calendar__month-view__weekdays__weekday", | ||
key: weekday | ||
}, _react.default.createElement("abbr", { | ||
title: abbr, | ||
"aria-label": abbr | ||
}, formatShortWeekday(locale, weekdayDate).replace('.', '')))); | ||
} | ||
_createClass(Weekdays, [{ | ||
key: "shouldComponentUpdate", | ||
value: function shouldComponentUpdate(nextProps) { | ||
var _this$props = this.props, | ||
calendarType = _this$props.calendarType, | ||
locale = _this$props.locale; | ||
return nextProps.calendarType !== calendarType || nextProps.locale !== locale; | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _this$props2 = this.props, | ||
calendarType = _this$props2.calendarType, | ||
formatShortWeekday = _this$props2.formatShortWeekday, | ||
locale = _this$props2.locale; | ||
var beginOfMonth = this.beginOfMonth, | ||
year = this.year, | ||
monthIndex = this.monthIndex; | ||
var weekdays = []; | ||
return _react.default.createElement(_Flex.default, { | ||
className: "react-calendar__month-view__weekdays", | ||
count: 7 | ||
}, weekdays); | ||
} | ||
for (var weekday = 1; weekday <= 7; weekday += 1) { | ||
var weekdayDate = new Date(year, monthIndex, weekday - (0, _dates.getDayOfWeek)(beginOfMonth, calendarType)); | ||
var abbr = (0, _dateFormatter.formatWeekday)(locale, weekdayDate); | ||
weekdays.push(_react.default.createElement("div", { | ||
className: "react-calendar__month-view__weekdays__weekday", | ||
key: weekday, | ||
style: { | ||
flexGrow: 1 | ||
} | ||
}, _react.default.createElement("abbr", { | ||
title: abbr, | ||
"aria-label": abbr | ||
}, formatShortWeekday(locale, weekdayDate).replace('.', '')))); | ||
} | ||
return _react.default.createElement(_Flex.default, { | ||
className: "react-calendar__month-view__weekdays", | ||
count: 7 | ||
}, weekdays); | ||
} | ||
}, { | ||
key: "beginOfMonth", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getBeginOfMonth)(activeStartDate); | ||
} | ||
}, { | ||
key: "year", | ||
get: function get() { | ||
var beginOfMonth = this.beginOfMonth; | ||
return (0, _dates.getYear)(beginOfMonth); | ||
} | ||
}, { | ||
key: "monthIndex", | ||
get: function get() { | ||
var beginOfMonth = this.beginOfMonth; | ||
return (0, _dates.getMonthIndex)(beginOfMonth); | ||
} | ||
}]); | ||
return Weekdays; | ||
}(_react.Component); | ||
exports.default = Weekdays; | ||
Weekdays.defaultProps = { | ||
@@ -125,4 +58,3 @@ formatShortWeekday: _dateFormatter.formatShortWeekday | ||
formatShortWeekday: _propTypes.default.func, | ||
locale: _propTypes.default.string, | ||
activeStartDate: _propTypes.default.instanceOf(Date).isRequired | ||
locale: _propTypes.default.string | ||
}; |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = WeekNumber; | ||
@@ -15,3 +15,3 @@ var _react = _interopRequireDefault(require("react")); | ||
var WeekNumber = function WeekNumber(_ref) { | ||
function WeekNumber(_ref) { | ||
var date = _ref.date, | ||
@@ -35,3 +35,3 @@ onClickWeekNumber = _ref.onClickWeekNumber, | ||
}, _react.default.createElement("span", null, weekNumber)); | ||
}; | ||
} | ||
@@ -42,4 +42,2 @@ WeekNumber.propTypes = { | ||
weekNumber: _propTypes.default.number.isRequired | ||
}; | ||
var _default = WeekNumber; | ||
exports.default = _default; | ||
}; |
@@ -6,5 +6,5 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = WeekNumbers; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _react = _interopRequireDefault(require("react")); | ||
@@ -23,132 +23,53 @@ var _propTypes = _interopRequireDefault(require("prop-types")); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function WeekNumbers(props) { | ||
var activeStartDate = props.activeStartDate, | ||
calendarType = props.calendarType, | ||
onClickWeekNumber = props.onClickWeekNumber, | ||
showFixedNumberOfWeeks = props.showFixedNumberOfWeeks; | ||
function _typeof(obj) { 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); } | ||
var numberOfWeeks = function () { | ||
if (showFixedNumberOfWeeks) { | ||
return 6; | ||
} | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var numberOfDays = (0, _dates.getDaysInMonth)(activeStartDate); | ||
var startWeekday = (0, _dates.getDayOfWeek)(activeStartDate, calendarType); | ||
var days = numberOfDays - (7 - startWeekday); | ||
return 1 + Math.ceil(days / 7); | ||
}(); | ||
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); } } | ||
var dates = function () { | ||
var year = (0, _dates.getYear)(activeStartDate); | ||
var monthIndex = (0, _dates.getMonthIndex)(activeStartDate); | ||
var day = (0, _dates.getDay)(activeStartDate); | ||
var result = []; | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
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); } | ||
var WeekNumbers = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
_inherits(WeekNumbers, _PureComponent); | ||
function WeekNumbers() { | ||
_classCallCheck(this, WeekNumbers); | ||
return _possibleConstructorReturn(this, _getPrototypeOf(WeekNumbers).apply(this, arguments)); | ||
} | ||
_createClass(WeekNumbers, [{ | ||
key: "render", | ||
value: function render() { | ||
var dates = this.dates, | ||
numberOfWeeks = this.numberOfWeeks, | ||
weekNumbers = this.weekNumbers; | ||
var onClickWeekNumber = this.props.onClickWeekNumber; | ||
return _react.default.createElement(_Flex.default, { | ||
className: "react-calendar__month-view__weekNumbers", | ||
count: numberOfWeeks, | ||
direction: "column", | ||
style: { | ||
flexBasis: 'calc(100% * (1 / 8)', | ||
flexShrink: 0 | ||
} | ||
}, weekNumbers.map(function (weekNumber, weekIndex) { | ||
return _react.default.createElement(_WeekNumber.default, { | ||
date: dates[weekIndex], | ||
key: weekNumber, | ||
onClickWeekNumber: onClickWeekNumber, | ||
weekNumber: weekNumber | ||
}); | ||
})); | ||
for (var index = 0; index < numberOfWeeks; index += 1) { | ||
result.push((0, _dates.getBeginOfWeek)(new Date(year, monthIndex, day + index * 7), calendarType)); | ||
} | ||
}, { | ||
key: "startWeekday", | ||
get: function get() { | ||
var _this$props = this.props, | ||
activeStartDate = _this$props.activeStartDate, | ||
calendarType = _this$props.calendarType; | ||
return (0, _dates.getDayOfWeek)(activeStartDate, calendarType); | ||
} | ||
}, { | ||
key: "numberOfDays", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getDaysInMonth)(activeStartDate); | ||
} | ||
}, { | ||
key: "numberOfWeeks", | ||
get: function get() { | ||
var showFixedNumberOfWeeks = this.props.showFixedNumberOfWeeks; | ||
if (showFixedNumberOfWeeks) { | ||
return 6; | ||
} | ||
return result; | ||
}(); | ||
var days = this.numberOfDays - (7 - this.startWeekday); | ||
return 1 + Math.ceil(days / 7); | ||
var weekNumbers = dates.map(function (date) { | ||
return (0, _dates.getWeekNumber)(date, calendarType); | ||
}); | ||
return _react.default.createElement(_Flex.default, { | ||
className: "react-calendar__month-view__weekNumbers", | ||
count: numberOfWeeks, | ||
direction: "column", | ||
style: { | ||
flexBasis: 'calc(100% * (1 / 8)', | ||
flexShrink: 0 | ||
} | ||
}, { | ||
key: "year", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getYear)(activeStartDate); | ||
} | ||
}, { | ||
key: "monthIndex", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getMonthIndex)(activeStartDate); | ||
} | ||
}, { | ||
key: "day", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getDay)(activeStartDate); | ||
} | ||
}, { | ||
key: "dates", | ||
get: function get() { | ||
var year = this.year, | ||
monthIndex = this.monthIndex, | ||
numberOfWeeks = this.numberOfWeeks, | ||
day = this.day; | ||
var calendarType = this.props.calendarType; | ||
var dates = []; | ||
}, weekNumbers.map(function (weekNumber, weekIndex) { | ||
return _react.default.createElement(_WeekNumber.default, { | ||
date: dates[weekIndex], | ||
key: weekNumber, | ||
onClickWeekNumber: onClickWeekNumber, | ||
weekNumber: weekNumber | ||
}); | ||
})); | ||
} | ||
for (var index = 0; index < numberOfWeeks; index += 1) { | ||
dates.push((0, _dates.getBeginOfWeek)(new Date(year, monthIndex, day + index * 7), calendarType)); | ||
} | ||
return dates; | ||
} | ||
}, { | ||
key: "weekNumbers", | ||
get: function get() { | ||
var dates = this.dates; | ||
var calendarType = this.props.calendarType; | ||
return dates.map(function (date) { | ||
return (0, _dates.getWeekNumber)(date, calendarType); | ||
}); | ||
} | ||
}]); | ||
return WeekNumbers; | ||
}(_react.PureComponent); | ||
exports.default = WeekNumbers; | ||
WeekNumbers.propTypes = { | ||
@@ -155,0 +76,0 @@ activeStartDate: _propTypes.default.instanceOf(Date).isRequired, |
@@ -12,28 +12,6 @@ "use strict"; | ||
var formatterCache = {}; | ||
/** | ||
* Gets Intl-based date formatter from formatter cache. If it doesn't exist in cache | ||
* just yet, it will be created on the fly. | ||
*/ | ||
var getFormatter = function getFormatter(locale, options) { | ||
if (!locale) { | ||
// Default parameter is not enough as it does not protect us from null values | ||
// eslint-disable-next-line no-param-reassign | ||
locale = (0, _getUserLocale.default)(); | ||
} | ||
var stringifiedOptions = JSON.stringify(options); | ||
if (!formatterCache[locale]) { | ||
formatterCache[locale] = {}; | ||
} | ||
if (!formatterCache[locale][stringifiedOptions]) { | ||
formatterCache[locale][stringifiedOptions] = function (n) { | ||
return n.toLocaleString(locale, options); | ||
}; | ||
} | ||
return formatterCache[locale][stringifiedOptions]; | ||
var getFormatter = function getFormatter(options) { | ||
return function (locale, date) { | ||
return date.toLocaleString(locale || (0, _getUserLocale.default)(), options); | ||
}; | ||
}; | ||
@@ -56,53 +34,42 @@ /** | ||
var formatDate = function formatDate(locale, date) { | ||
return getFormatter(locale, { | ||
day: 'numeric', | ||
month: 'numeric', | ||
year: 'numeric' | ||
})(toSafeHour(date)); | ||
var getSafeFormatter = function getSafeFormatter(options) { | ||
return function (locale, date) { | ||
return getFormatter(options)(locale, toSafeHour(date)); | ||
}; | ||
}; | ||
var formatDateOptions = { | ||
day: 'numeric', | ||
month: 'numeric', | ||
year: 'numeric' | ||
}; | ||
var formatLongDateOptions = { | ||
day: 'numeric', | ||
month: 'long', | ||
year: 'numeric' | ||
}; | ||
var formatMonthYearOptions = { | ||
month: 'long', | ||
year: 'numeric' | ||
}; | ||
var formatMonthOptions = { | ||
month: 'long' | ||
}; | ||
var formatWeekdayOptions = { | ||
weekday: 'long' | ||
}; | ||
var formatShortWeekdayOptions = { | ||
weekday: 'short' | ||
}; | ||
var formatDate = getSafeFormatter(formatDateOptions); | ||
exports.formatDate = formatDate; | ||
var formatLongDate = function formatLongDate(locale, date) { | ||
return getFormatter(locale, { | ||
day: 'numeric', | ||
month: 'long', | ||
year: 'numeric' | ||
})(toSafeHour(date)); | ||
}; | ||
var formatLongDate = getSafeFormatter(formatLongDateOptions); | ||
exports.formatLongDate = formatLongDate; | ||
var formatMonthYear = function formatMonthYear(locale, date) { | ||
return getFormatter(locale, { | ||
month: 'long', | ||
year: 'numeric' | ||
})(toSafeHour(date)); | ||
}; | ||
var formatMonthYear = getSafeFormatter(formatMonthYearOptions); | ||
exports.formatMonthYear = formatMonthYear; | ||
var formatMonth = function formatMonth(locale, date) { | ||
return getFormatter(locale, { | ||
month: 'long' | ||
})(toSafeHour(date)); | ||
}; | ||
var formatMonth = getSafeFormatter(formatMonthOptions); | ||
exports.formatMonth = formatMonth; | ||
var formatWeekday = function formatWeekday(locale, date) { | ||
return getFormatter(locale, { | ||
weekday: 'long' | ||
})(toSafeHour(date)); | ||
}; | ||
var formatWeekday = getSafeFormatter(formatWeekdayOptions); | ||
exports.formatWeekday = formatWeekday; | ||
var formatShortWeekday = function formatShortWeekday(locale, date) { | ||
return getFormatter(locale, { | ||
weekday: 'short' | ||
})(toSafeHour(date)); | ||
}; | ||
var formatShortWeekday = getSafeFormatter(formatShortWeekdayOptions); | ||
exports.formatShortWeekday = formatShortWeekday; |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Month; | ||
@@ -29,10 +29,2 @@ var _react = _interopRequireDefault(require("react")); | ||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } | ||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } | ||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } | ||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
@@ -44,3 +36,3 @@ | ||
var Month = function Month(_ref) { | ||
function Month(_ref) { | ||
var classes = _ref.classes, | ||
@@ -53,3 +45,3 @@ date = _ref.date, | ||
return _react.default.createElement(_Tile.default, _extends({}, otherProps, { | ||
classes: [].concat(_toConsumableArray(classes), [className]), | ||
classes: [].concat(classes, className), | ||
date: date, | ||
@@ -62,3 +54,3 @@ formatAbbr: _dateFormatter.formatMonthYear, | ||
}), formatMonth(locale, date)); | ||
}; | ||
} | ||
@@ -70,4 +62,2 @@ Month.defaultProps = { | ||
formatMonth: _propTypes.default.func | ||
}); | ||
var _default = Month; | ||
exports.default = _default; | ||
}); |
@@ -6,5 +6,5 @@ "use strict"; | ||
}); | ||
exports.default = void 0; | ||
exports.default = Months; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _react = _interopRequireDefault(require("react")); | ||
@@ -23,83 +23,27 @@ var _propTypes = _interopRequireDefault(require("prop-types")); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
function _typeof(obj) { 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); } | ||
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 Months(props) { | ||
var activeStartDate = props.activeStartDate; | ||
var start = 0; | ||
var end = 11; | ||
var year = (0, _dates.getYear)(activeStartDate); | ||
return _react.default.createElement(_TileGroup.default, _extends({}, props, { | ||
className: "react-calendar__year-view__months", | ||
dateTransform: function dateTransform(monthIndex) { | ||
return new Date(year, monthIndex, 1); | ||
}, | ||
dateType: "month", | ||
end: end, | ||
start: start, | ||
tile: _Month.default | ||
})); | ||
} | ||
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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
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 Months = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
_inherits(Months, _PureComponent); | ||
function Months() { | ||
var _getPrototypeOf2; | ||
var _this; | ||
_classCallCheck(this, Months); | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Months)).call.apply(_getPrototypeOf2, [this].concat(args))); | ||
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "start", 0); | ||
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "end", 11); | ||
return _this; | ||
} | ||
_createClass(Months, [{ | ||
key: "render", | ||
value: function render() { | ||
var _this2 = this; | ||
return _react.default.createElement(_TileGroup.default, _extends({}, this.props, { | ||
className: "react-calendar__year-view__months", | ||
dateTransform: function dateTransform(monthIndex) { | ||
return new Date(_this2.year, monthIndex, 1); | ||
}, | ||
dateType: "month", | ||
end: this.end, | ||
start: this.start, | ||
tile: _Month.default | ||
})); | ||
} | ||
}, { | ||
key: "year", | ||
get: function get() { | ||
var activeStartDate = this.props.activeStartDate; | ||
return (0, _dates.getYear)(activeStartDate); | ||
} | ||
}]); | ||
return Months; | ||
}(_react.PureComponent); | ||
exports.default = Months; | ||
Months.propTypes = _objectSpread({}, _propTypes2.tileGroupProps, { | ||
locale: _propTypes.default.string | ||
}); |
{ | ||
"name": "react-calendar", | ||
"version": "2.18.1", | ||
"version": "2.19.0", | ||
"description": "Ultimate calendar for your React app.", | ||
@@ -17,3 +17,3 @@ "main": "dist/entry.js", | ||
"test": "yarn run test-eslint && yarn run test-jest", | ||
"test-eslint": "eslint src/ test/ --ext .jsx,.js", | ||
"test-eslint": "eslint sample/ src/ test/ --ext .jsx,.js", | ||
"test-jest": "jest", | ||
@@ -78,5 +78,4 @@ "test-jest-coverage": "jest --coverage" | ||
"@babel/preset-react": "^7.0.0", | ||
"babel-core": "^7.0.0-bridge.0", | ||
"babel-eslint": "^10.0.0", | ||
"babel-jest": "^23.6.0", | ||
"babel-jest": "^24.0.0", | ||
"enzyme": "^3.8.0", | ||
@@ -89,4 +88,3 @@ "enzyme-adapter-react-16": "^1.7.1", | ||
"eslint-plugin-react": "^7.11.1", | ||
"jest": "^23.6.0", | ||
"jest-cli": "^23.6.0", | ||
"jest": "^24.0.0", | ||
"less": "^3.8.1", | ||
@@ -93,0 +91,0 @@ "react": "^16.7.0", |
@@ -1,4 +0,2 @@ | ||
![downloads](https://img.shields.io/npm/dt/react-calendar.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg | ||
) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-calendar.svg | ||
) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) | ||
[![npm](https://img.shields.io/npm/v/react-calendar.svg)](https://www.npmjs.com/package/react-calendar) ![downloads](https://img.shields.io/npm/dt/react-calendar.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-calendar/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-calendar.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-calendar.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) | ||
@@ -73,2 +71,4 @@ # React-Calendar | ||
Check the [sample directory](https://github.com/wojtekmaj/react-calendar/tree/master/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-calendar/wiki/Recipes) in React-Calendar Wiki. | ||
### Custom styling | ||
@@ -99,4 +99,7 @@ | ||
|minDetail|Defines the least detailed view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".|`"century"`| | ||
|navigationAriaLabel|Defines `aria-label` attribute of a label rendered on calendar navigation bar.|`"Go up"`| | ||
|navigationLabel|Defines the content of a label rendered on calendar navigation bar.|``({ date, view, label }) => `Current view: ${view}, date: ${date.toLocaleDateString()}` ``| | ||
|nextAriaLabel|Defines `aria-label` attribute of the "next" button on the navigation pane.|`"Next"`| | ||
|nextLabel|Defines the content of the "next" button on the navigation pane. Defaults to "›".|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul>| | ||
|nextAriaLabel|Defines `aria-label` attribute of the "next on higher level" button on the navigation pane.|`"Jump forwards"`| | ||
|next2Label|Defines the content of the "next on higher level" button on the navigation pane. Defaults to "»". |<ul><li>String: `"»"`</li><li>React element: `<DoubleNextIcon />`</li></ul>| | ||
@@ -112,3 +115,5 @@ |onActiveDateChange|Function called when the user navigates from one view to another using previous/next button.|`({ activeStartDate, view }) => alert('Changed view to: ', activeStartDate, view)`| | ||
|onDrillUp|Function called when the user drills up by clicking drill up button.|`({ activeStartDate, view }) => alert('Drilled up to: ', activeStartDate, view)`| | ||
|prevAriaLabel|Defines `aria-label` attribute of the "previous" button on the navigation pane.|`"Previous"`| | ||
|prevLabel|Defines the content of the "previous" button on the navigation pane. Defaults to "‹".|<ul><li>String: `"‹"`</li><li>React element: `<PreviousIcon />`</li></ul>| | ||
|prevAriaLabel|Defines `aria-label` attribute of the "previous on higher level" button on the navigation pane.|`"Jump backwards"`| | ||
|prev2Label|Defines the content of the "previous on higher level" button on the navigation pane. Defaults to "«".|<ul><li>String: `"«"`</li><li>React element: `<DoublePreviousIcon />`</li></ul>| | ||
@@ -115,0 +120,0 @@ |returnValue|Defines which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed. Defaults to "start".|`"range"`| |
@@ -183,12 +183,16 @@ import React, { Component } from 'react'; | ||
switch (returnValue) { | ||
case 'start': | ||
return getDetailValueFrom(value, minDate, maxDate, maxDetail); | ||
case 'end': | ||
return getDetailValueTo(value, minDate, maxDate, maxDetail); | ||
case 'range': | ||
return getDetailValueArray(value, minDate, maxDate, maxDetail); | ||
default: | ||
throw new Error('Invalid returnValue.'); | ||
} | ||
const processFunction = (() => { | ||
switch (returnValue) { | ||
case 'start': | ||
return getDetailValueFrom; | ||
case 'end': | ||
return getDetailValueTo; | ||
case 'range': | ||
return getDetailValueArray; | ||
default: | ||
throw new Error('Invalid returnValue.'); | ||
} | ||
})(); | ||
return processFunction(value, minDate, maxDate, maxDetail); | ||
} | ||
@@ -462,13 +466,17 @@ | ||
minDetail, | ||
navigationAriaLabel, | ||
navigationLabel, | ||
next2AriaLabel, | ||
next2Label, | ||
nextAriaLabel, | ||
nextLabel, | ||
navigationLabel, | ||
prev2AriaLabel, | ||
prev2Label, | ||
prevAriaLabel, | ||
prevLabel, | ||
} = this.props; | ||
const { activeRange, activeStartDate, view } = this.state; | ||
const { activeStartDate, view } = this.state; | ||
return ( | ||
<Navigation | ||
activeRange={activeRange} | ||
activeStartDate={activeStartDate} | ||
@@ -480,6 +488,11 @@ drillUp={this.drillUp} | ||
minDate={minDate} | ||
navigationAriaLabel={navigationAriaLabel} | ||
navigationLabel={navigationLabel} | ||
next2AriaLabel={next2AriaLabel} | ||
next2Label={next2Label} | ||
nextAriaLabel={nextAriaLabel} | ||
nextLabel={nextLabel} | ||
navigationLabel={navigationLabel} | ||
prev2AriaLabel={prev2AriaLabel} | ||
prev2Label={prev2Label} | ||
prevAriaLabel={prevAriaLabel} | ||
prevLabel={prevLabel} | ||
@@ -537,4 +550,7 @@ setActiveStartDate={this.setActiveStartDate} | ||
minDetail: PropTypes.oneOf(allViews), | ||
navigationAriaLabel: PropTypes.string, | ||
navigationLabel: PropTypes.func, | ||
next2AriaLabel: PropTypes.string, | ||
next2Label: PropTypes.node, | ||
nextAriaLabel: PropTypes.string, | ||
nextLabel: PropTypes.node, | ||
@@ -550,3 +566,5 @@ onActiveDateChange: PropTypes.func, | ||
onDrillUp: PropTypes.func, | ||
prev2AriaLabel: PropTypes.string, | ||
prev2Label: PropTypes.node, | ||
prevAriaLabel: PropTypes.string, | ||
prevLabel: PropTypes.node, | ||
@@ -553,0 +571,0 @@ renderChildren: PropTypes.func, // For backwards compatibility |
@@ -142,2 +142,27 @@ import React from 'react'; | ||
it('displays proper user-defined ARIA labels on prev2, prev, navigation, next and next2 buttons', () => { | ||
const component = shallow( | ||
<Navigation | ||
activeStartDate={new Date(2017, 0, 1)} | ||
drillUp={jest.fn()} | ||
navigationAriaLabel="navigationAriaLabel" | ||
next2AriaLabel="next2AriaLabel" | ||
nextAriaLabel="nextAriaLabel" | ||
prev2AriaLabel="prev2AriaLabel" | ||
prevAriaLabel="prevAriaLabel" | ||
setActiveStartDate={jest.fn()} | ||
view="month" | ||
views={allViews} | ||
/> | ||
); | ||
const [prev2, prev, navigation, next, next2] = component.children(); | ||
expect(prev2.props['aria-label']).toBe('prev2AriaLabel'); | ||
expect(prev.props['aria-label']).toBe('prevAriaLabel'); | ||
expect(navigation.props['aria-label']).toBe('navigationAriaLabel'); | ||
expect(next.props['aria-label']).toBe('nextAriaLabel'); | ||
expect(next2.props['aria-label']).toBe('next2AriaLabel'); | ||
}); | ||
it('calls drillUp function on drill up button click', () => { | ||
@@ -144,0 +169,0 @@ const drillUpFn = jest.fn(); |
@@ -1,2 +0,2 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
@@ -18,11 +18,34 @@ | ||
export default class Navigation extends PureComponent { | ||
get drillUpAvailable() { | ||
const { view, views } = this.props; | ||
return views.indexOf(view) > 0; | ||
} | ||
const className = 'react-calendar__navigation'; | ||
get prevButtonDisabled() { | ||
const { activeStartDate: date, minDate, view } = this.props; | ||
const previousActiveStartDate = getBeginPrevious(view, date); | ||
export default function Navigation({ | ||
activeStartDate: date, | ||
drillUp, | ||
formatMonthYear, | ||
locale, | ||
maxDate, | ||
minDate, | ||
navigationAriaLabel, | ||
navigationLabel, | ||
next2AriaLabel, | ||
next2Label, | ||
nextAriaLabel, | ||
nextLabel, | ||
prev2AriaLabel, | ||
prev2Label, | ||
prevAriaLabel, | ||
prevLabel, | ||
setActiveStartDate, | ||
view, | ||
views, | ||
}) { | ||
const drillUpAvailable = views.indexOf(view) > 0; | ||
const shouldShowPrevNext2Buttons = view !== 'century'; | ||
const previousActiveStartDate = getBeginPrevious(view, date); | ||
const previousActiveStartDate2 = shouldShowPrevNext2Buttons && getBeginPrevious2(view, date); | ||
const nextActiveStartDate = getBeginNext(view, date); | ||
const nextActiveStartDate2 = shouldShowPrevNext2Buttons && getBeginNext2(view, date); | ||
const prevButtonDisabled = (() => { | ||
if (previousActiveStartDate.getFullYear() < 1000) { | ||
@@ -33,8 +56,6 @@ return true; | ||
return minDate && minDate >= previousActiveEndDate; | ||
} | ||
})(); | ||
get prev2ButtonDisabled() { | ||
const { activeStartDate: date, minDate, view } = this.props; | ||
const previousActiveStartDate = getBeginPrevious2(view, date); | ||
if (previousActiveStartDate.getFullYear() < 1000) { | ||
const prev2ButtonDisabled = shouldShowPrevNext2Buttons && (() => { | ||
if (previousActiveStartDate2.getFullYear() < 1000) { | ||
return true; | ||
@@ -44,41 +65,29 @@ } | ||
return minDate && minDate >= previousActiveEndDate; | ||
} | ||
})(); | ||
get nextButtonDisabled() { | ||
const { activeStartDate: date, maxDate, view } = this.props; | ||
const nextActiveStartDate = getBeginNext(view, date); | ||
return maxDate && maxDate <= nextActiveStartDate; | ||
} | ||
const nextButtonDisabled = maxDate && maxDate <= nextActiveStartDate; | ||
get next2ButtonDisabled() { | ||
const { activeStartDate: date, maxDate, view } = this.props; | ||
const nextActiveStartDate = getBeginNext2(view, date); | ||
return maxDate && maxDate <= nextActiveStartDate; | ||
} | ||
const next2ButtonDisabled = ( | ||
shouldShowPrevNext2Buttons | ||
&& maxDate | ||
&& maxDate <= nextActiveStartDate2 | ||
); | ||
onClickPrevious = () => { | ||
const { activeStartDate: date, view, setActiveStartDate } = this.props; | ||
setActiveStartDate(getBeginPrevious(view, date)); | ||
function onClickPrevious() { | ||
setActiveStartDate(previousActiveStartDate); | ||
} | ||
onClickNext = () => { | ||
const { activeStartDate: date, view, setActiveStartDate } = this.props; | ||
setActiveStartDate(getBeginNext(view, date)); | ||
function onClickPrevious2() { | ||
setActiveStartDate(previousActiveStartDate2); | ||
} | ||
onClickPrevious2 = () => { | ||
const { activeStartDate: date, view, setActiveStartDate } = this.props; | ||
setActiveStartDate(getBeginPrevious2(view, date)); | ||
function onClickNext() { | ||
setActiveStartDate(nextActiveStartDate); | ||
} | ||
onClickNext2 = () => { | ||
const { activeStartDate: date, view, setActiveStartDate } = this.props; | ||
setActiveStartDate(getBeginNext2(view, date)); | ||
function onClickNext2() { | ||
setActiveStartDate(nextActiveStartDate2); | ||
} | ||
get label() { | ||
const { | ||
activeStartDate: date, formatMonthYear, locale, view, | ||
} = this.props; | ||
const label = (() => { | ||
switch (view) { | ||
@@ -96,75 +105,64 @@ case 'century': | ||
} | ||
} | ||
})(); | ||
render() { | ||
const { label } = this; | ||
const { | ||
activeStartDate: date, | ||
drillUp, | ||
navigationLabel, | ||
next2Label, | ||
nextLabel, | ||
prev2Label, | ||
prevLabel, | ||
view, | ||
} = this.props; | ||
const className = 'react-calendar__navigation'; | ||
return ( | ||
<div | ||
className={className} | ||
style={{ display: 'flex' }} | ||
> | ||
{prev2Label !== null && view !== 'century' && ( | ||
<button | ||
className={`${className}__arrow ${className}__prev2-button`} | ||
disabled={this.prev2ButtonDisabled} | ||
onClick={this.onClickPrevious2} | ||
type="button" | ||
> | ||
{prev2Label} | ||
</button> | ||
)} | ||
return ( | ||
<div | ||
className={className} | ||
style={{ display: 'flex' }} | ||
> | ||
{prev2Label !== null && shouldShowPrevNext2Buttons && ( | ||
<button | ||
className={`${className}__arrow ${className}__prev-button`} | ||
disabled={this.prevButtonDisabled} | ||
onClick={this.onClickPrevious} | ||
className={`${className}__arrow ${className}__prev2-button`} | ||
disabled={prev2ButtonDisabled} | ||
onClick={onClickPrevious2} | ||
type="button" | ||
aria-label={prev2AriaLabel} | ||
> | ||
{prevLabel} | ||
{prev2Label} | ||
</button> | ||
)} | ||
<button | ||
className={`${className}__arrow ${className}__prev-button`} | ||
disabled={prevButtonDisabled} | ||
onClick={onClickPrevious} | ||
type="button" | ||
aria-label={prevAriaLabel} | ||
> | ||
{prevLabel} | ||
</button> | ||
<button | ||
className="react-calendar__navigation__label" | ||
onClick={drillUp} | ||
disabled={!drillUpAvailable} | ||
style={{ flexGrow: 1 }} | ||
type="button" | ||
aria-label={navigationAriaLabel} | ||
> | ||
{navigationLabel | ||
? navigationLabel({ date, view, label }) | ||
: label | ||
} | ||
</button> | ||
<button | ||
className={`${className}__arrow ${className}__next-button`} | ||
disabled={nextButtonDisabled} | ||
onClick={onClickNext} | ||
type="button" | ||
aria-label={nextAriaLabel} | ||
> | ||
{nextLabel} | ||
</button> | ||
{next2Label !== null && shouldShowPrevNext2Buttons && ( | ||
<button | ||
className="react-calendar__navigation__label" | ||
onClick={drillUp} | ||
disabled={!this.drillUpAvailable} | ||
style={{ flexGrow: 1 }} | ||
className={`${className}__arrow ${className}__next2-button`} | ||
disabled={next2ButtonDisabled} | ||
onClick={onClickNext2} | ||
type="button" | ||
aria-label={next2AriaLabel} | ||
> | ||
{navigationLabel | ||
? navigationLabel({ date, view, label }) | ||
: label | ||
} | ||
{next2Label} | ||
</button> | ||
<button | ||
className={`${className}__arrow ${className}__next-button`} | ||
disabled={this.nextButtonDisabled} | ||
onClick={this.onClickNext} | ||
type="button" | ||
> | ||
{nextLabel} | ||
</button> | ||
{next2Label !== null && view !== 'century' && ( | ||
<button | ||
className={`${className}__arrow ${className}__next2-button`} | ||
disabled={this.next2ButtonDisabled} | ||
onClick={this.onClickNext2} | ||
type="button" | ||
> | ||
{next2Label} | ||
</button> | ||
)} | ||
</div> | ||
); | ||
} | ||
)} | ||
</div> | ||
); | ||
} | ||
@@ -174,5 +172,10 @@ | ||
formatMonthYear: defaultFormatMonthYear, | ||
navigationAriaLabel: '', | ||
next2AriaLabel: '', | ||
next2Label: '»', | ||
nextAriaLabel: '', | ||
nextLabel: '›', | ||
prev2AriaLabel: '', | ||
prev2Label: '«', | ||
prevAriaLabel: '', | ||
prevLabel: '‹', | ||
@@ -188,6 +191,11 @@ }; | ||
minDate: PropTypes.instanceOf(Date), | ||
next2AriaLabel: PropTypes.string, | ||
next2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), | ||
nextAriaLabel: PropTypes.string, | ||
nextLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), | ||
navigationAriaLabel: PropTypes.string, | ||
navigationLabel: PropTypes.func, | ||
prev2AriaLabel: PropTypes.string, | ||
prev2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), | ||
prevAriaLabel: PropTypes.string, | ||
prevLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), | ||
@@ -194,0 +202,0 @@ setActiveStartDate: PropTypes.func.isRequired, |
@@ -11,13 +11,15 @@ import React from 'react'; | ||
const Decade = ({ classes, point, ...otherProps }) => ( | ||
<Tile | ||
{...otherProps} | ||
classes={[...classes, className]} | ||
maxDateTransform={getEndOfDecade} | ||
minDateTransform={getBeginOfDecade} | ||
view="century" | ||
> | ||
{getDecadeLabel(point)} | ||
</Tile> | ||
); | ||
export default function Decade({ classes, point, ...otherProps }) { | ||
return ( | ||
<Tile | ||
{...otherProps} | ||
classes={[].concat(classes, className)} | ||
maxDateTransform={getEndOfDecade} | ||
minDateTransform={getBeginOfDecade} | ||
view="century" | ||
> | ||
{getDecadeLabel(point)} | ||
</Tile> | ||
); | ||
} | ||
@@ -28,3 +30,1 @@ Decade.propTypes = { | ||
}; | ||
export default Decade; |
@@ -1,2 +0,2 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
@@ -12,26 +12,19 @@ import TileGroup from '../TileGroup'; | ||
export default class Decades extends PureComponent { | ||
get start() { | ||
const { activeStartDate } = this.props; | ||
return getBeginOfCenturyYear(activeStartDate); | ||
} | ||
export default function Decades(props) { | ||
const { activeStartDate } = props; | ||
const start = getBeginOfCenturyYear(activeStartDate); | ||
const end = start + 99; | ||
get end() { | ||
return this.start + 99; | ||
} | ||
render() { | ||
return ( | ||
<TileGroup | ||
{...this.props} | ||
className="react-calendar__century-view__decades" | ||
dateTransform={getBeginOfDecade} | ||
dateType="decade" | ||
end={this.end} | ||
start={this.start} | ||
step={10} | ||
tile={Decade} | ||
/> | ||
); | ||
} | ||
return ( | ||
<TileGroup | ||
{...props} | ||
className="react-calendar__century-view__decades" | ||
dateTransform={getBeginOfDecade} | ||
dateType="decade" | ||
end={end} | ||
start={start} | ||
step={10} | ||
tile={Decade} | ||
/> | ||
); | ||
} | ||
@@ -38,0 +31,0 @@ |
@@ -11,13 +11,15 @@ import React from 'react'; | ||
const Year = ({ classes, point, ...otherProps }) => ( | ||
<Tile | ||
{...otherProps} | ||
classes={[...classes, className]} | ||
maxDateTransform={getEndOfYear} | ||
minDateTransform={getBeginOfYear} | ||
view="decade" | ||
> | ||
{point} | ||
</Tile> | ||
); | ||
export default function Year({ classes, point, ...otherProps }) { | ||
return ( | ||
<Tile | ||
{...otherProps} | ||
classes={[].concat(classes, className)} | ||
maxDateTransform={getEndOfYear} | ||
minDateTransform={getBeginOfYear} | ||
view="decade" | ||
> | ||
{point} | ||
</Tile> | ||
); | ||
} | ||
@@ -28,3 +30,1 @@ Year.propTypes = { | ||
}; | ||
export default Year; |
@@ -1,2 +0,2 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
@@ -9,25 +9,18 @@ import TileGroup from '../TileGroup'; | ||
export default class Years extends PureComponent { | ||
get start() { | ||
const { activeStartDate } = this.props; | ||
return getBeginOfDecadeYear(activeStartDate); | ||
} | ||
export default function Years(props) { | ||
const { activeStartDate } = props; | ||
const start = getBeginOfDecadeYear(activeStartDate); | ||
const end = start + 9; | ||
get end() { | ||
return this.start + 9; | ||
} | ||
render() { | ||
return ( | ||
<TileGroup | ||
{...this.props} | ||
className="react-calendar__decade-view__years" | ||
dateTransform={year => new Date(year, 0, 1)} | ||
dateType="year" | ||
end={this.end} | ||
start={this.start} | ||
tile={Year} | ||
/> | ||
); | ||
} | ||
return ( | ||
<TileGroup | ||
{...props} | ||
className="react-calendar__decade-view__years" | ||
dateTransform={year => new Date(year, 0, 1)} | ||
dateType="year" | ||
end={end} | ||
start={start} | ||
tile={Year} | ||
/> | ||
); | ||
} | ||
@@ -34,0 +27,0 @@ |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
const toPercent = num => `${num}%`; | ||
function toPercent(num) { | ||
return `${num}%`; | ||
} | ||
const Flex = ({ | ||
export default function Flex({ | ||
children, | ||
@@ -15,29 +17,31 @@ className, | ||
...otherProps | ||
}) => ( | ||
<div | ||
className={className} | ||
style={{ | ||
display: 'flex', | ||
flexDirection: direction, | ||
flexWrap: wrap ? 'wrap' : 'no-wrap', | ||
...style, | ||
}} | ||
{...otherProps} | ||
> | ||
{React.Children.map(children, (child, index) => ( | ||
React.cloneElement( | ||
child, | ||
{ | ||
...child.props, | ||
style: { | ||
flexBasis: toPercent(100 / count), | ||
maxWidth: toPercent(100 / count), | ||
overflow: 'hidden', | ||
marginLeft: offset && (index === 0) ? toPercent((100 * offset) / count) : null, | ||
}) { | ||
return ( | ||
<div | ||
className={className} | ||
style={{ | ||
display: 'flex', | ||
flexDirection: direction, | ||
flexWrap: wrap ? 'wrap' : 'no-wrap', | ||
...style, | ||
}} | ||
{...otherProps} | ||
> | ||
{React.Children.map(children, (child, index) => ( | ||
React.cloneElement( | ||
child, | ||
{ | ||
...child.props, | ||
style: { | ||
flexBasis: toPercent(100 / count), | ||
maxWidth: toPercent(100 / count), | ||
overflow: 'hidden', | ||
marginLeft: offset && (index === 0) ? toPercent((100 * offset) / count) : null, | ||
}, | ||
}, | ||
}, | ||
) | ||
))} | ||
</div> | ||
); | ||
) | ||
))} | ||
</div> | ||
); | ||
} | ||
@@ -56,3 +60,1 @@ Flex.propTypes = { | ||
}; | ||
export default Flex; |
@@ -74,3 +74,3 @@ import React, { PureComponent } from 'react'; | ||
renderWeekdays() { | ||
const { activeStartDate, formatShortWeekday, locale } = this.props; | ||
const { formatShortWeekday, locale } = this.props; | ||
@@ -81,3 +81,2 @@ return ( | ||
locale={locale} | ||
activeStartDate={activeStartDate} | ||
formatShortWeekday={formatShortWeekday} | ||
@@ -84,0 +83,0 @@ /> |
@@ -8,6 +8,2 @@ import React from 'react'; | ||
const weekdaysProps = { | ||
activeStartDate: new Date(2018, 0, 1), | ||
}; | ||
describe('Weekdays', () => { | ||
@@ -17,3 +13,2 @@ it('renders proper weekdays (ISO 8601)', () => { | ||
<Weekdays | ||
{...weekdaysProps} | ||
calendarType="ISO 8601" | ||
@@ -35,3 +30,2 @@ /> | ||
<Weekdays | ||
{...weekdaysProps} | ||
calendarType="US" | ||
@@ -38,0 +32,0 @@ /> |
@@ -17,3 +17,3 @@ import React from 'react'; | ||
const Day = ({ | ||
export default function Day({ | ||
calendarType, | ||
@@ -24,20 +24,22 @@ classes, | ||
...otherProps | ||
}) => ( | ||
<Tile | ||
{...otherProps} | ||
classes={[ | ||
...classes, | ||
className, | ||
isWeekend(date, calendarType) ? `${className}--weekend` : null, | ||
date.getMonth() !== currentMonthIndex ? `${className}--neighboringMonth` : null, | ||
]} | ||
date={date} | ||
formatAbbr={formatLongDate} | ||
maxDateTransform={getEndOfDay} | ||
minDateTransform={getBeginOfDay} | ||
view="month" | ||
> | ||
{getDay(date)} | ||
</Tile> | ||
); | ||
}) { | ||
return ( | ||
<Tile | ||
{...otherProps} | ||
classes={[].concat( | ||
classes, | ||
className, | ||
isWeekend(date, calendarType) ? `${className}--weekend` : null, | ||
date.getMonth() !== currentMonthIndex ? `${className}--neighboringMonth` : null, | ||
)} | ||
date={date} | ||
formatAbbr={formatLongDate} | ||
maxDateTransform={getEndOfDay} | ||
minDateTransform={getBeginOfDay} | ||
view="month" | ||
> | ||
{getDay(date)} | ||
</Tile> | ||
); | ||
} | ||
@@ -48,3 +50,1 @@ Day.propTypes = { | ||
}; | ||
export default Day; |
@@ -1,2 +0,2 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
@@ -15,14 +15,20 @@ | ||
export default class Days extends PureComponent { | ||
get offset() { | ||
const { showFixedNumberOfWeeks, showNeighboringMonth } = this.props; | ||
export default function Days(props) { | ||
const { | ||
activeStartDate, | ||
calendarType, | ||
} = props; | ||
const { | ||
showFixedNumberOfWeeks, | ||
showNeighboringMonth, | ||
...otherProps | ||
} = props; | ||
if (showFixedNumberOfWeeks || showNeighboringMonth) { | ||
return 0; | ||
} | ||
const year = getYear(activeStartDate); | ||
const monthIndex = getMonthIndex(activeStartDate); | ||
const { activeStartDate, calendarType } = this.props; | ||
const hasFixedNumberOfWeeks = showFixedNumberOfWeeks || showNeighboringMonth; | ||
const dayOfWeek = getDayOfWeek(activeStartDate, calendarType); | ||
return getDayOfWeek(activeStartDate, calendarType); | ||
} | ||
const offset = hasFixedNumberOfWeeks ? 0 : dayOfWeek; | ||
@@ -34,13 +40,4 @@ /** | ||
*/ | ||
get start() { | ||
const { showFixedNumberOfWeeks, showNeighboringMonth } = this.props; | ||
const start = (hasFixedNumberOfWeeks ? -dayOfWeek : 0) + 1; | ||
if (showFixedNumberOfWeeks || showNeighboringMonth) { | ||
const { activeStartDate, calendarType } = this.props; | ||
return -getDayOfWeek(activeStartDate, calendarType) + 1; | ||
} | ||
return 1; | ||
} | ||
/** | ||
@@ -51,14 +48,11 @@ * Defines on which day of the month the grid shall end. If we simply show current | ||
*/ | ||
get end() { | ||
const { activeStartDate, showFixedNumberOfWeeks, showNeighboringMonth } = this.props; | ||
const daysInMonth = getDaysInMonth(activeStartDate); | ||
const end = (() => { | ||
if (showFixedNumberOfWeeks) { | ||
// Always show 6 weeks | ||
return this.start + (6 * 7) - 1; | ||
return start + (6 * 7) - 1; | ||
} | ||
const daysInMonth = getDaysInMonth(activeStartDate); | ||
if (showNeighboringMonth) { | ||
const { year, monthIndex } = this; | ||
const { calendarType } = this.props; | ||
const activeEndDate = new Date(year, monthIndex, daysInMonth); | ||
@@ -69,39 +63,19 @@ return daysInMonth + (7 - getDayOfWeek(activeEndDate, calendarType) - 1); | ||
return daysInMonth; | ||
} | ||
})(); | ||
get year() { | ||
const { activeStartDate } = this.props; | ||
return getYear(activeStartDate); | ||
} | ||
get monthIndex() { | ||
const { activeStartDate } = this.props; | ||
return getMonthIndex(activeStartDate); | ||
} | ||
render() { | ||
const { monthIndex } = this; | ||
const { | ||
showFixedNumberOfWeeks, | ||
showNeighboringMonth, | ||
...otherProps | ||
} = this.props; | ||
return ( | ||
<TileGroup | ||
{...otherProps} | ||
className="react-calendar__month-view__days" | ||
count={7} | ||
dateTransform={day => new Date(this.year, monthIndex, day)} | ||
dateType="day" | ||
end={this.end} | ||
offset={this.offset} | ||
start={this.start} | ||
tile={Day} | ||
// Tile props | ||
currentMonthIndex={monthIndex} | ||
/> | ||
); | ||
} | ||
return ( | ||
<TileGroup | ||
{...otherProps} | ||
className="react-calendar__month-view__days" | ||
count={7} | ||
dateTransform={day => new Date(year, monthIndex, day)} | ||
dateType="day" | ||
end={end} | ||
offset={offset} | ||
start={start} | ||
tile={Day} | ||
// Tile props | ||
currentMonthIndex={monthIndex} | ||
/> | ||
); | ||
} | ||
@@ -108,0 +82,0 @@ |
@@ -1,2 +0,2 @@ | ||
import React, { Component } from 'react'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
@@ -15,65 +15,43 @@ | ||
export default class Weekdays extends Component { | ||
shouldComponentUpdate(nextProps) { | ||
const { calendarType, locale } = this.props; | ||
export default function Weekdays(props) { | ||
const { | ||
calendarType, | ||
formatShortWeekday, | ||
locale, | ||
} = props; | ||
return ( | ||
nextProps.calendarType !== calendarType | ||
|| nextProps.locale !== locale | ||
); | ||
} | ||
const anyDate = new Date(); | ||
const beginOfMonth = getBeginOfMonth(anyDate); | ||
const year = getYear(beginOfMonth); | ||
const monthIndex = getMonthIndex(beginOfMonth); | ||
get beginOfMonth() { | ||
const { activeStartDate } = this.props; | ||
const weekdays = []; | ||
return getBeginOfMonth(activeStartDate); | ||
} | ||
for (let weekday = 1; weekday <= 7; weekday += 1) { | ||
const weekdayDate = new Date( | ||
year, monthIndex, weekday - getDayOfWeek(beginOfMonth, calendarType), | ||
); | ||
get year() { | ||
const { beginOfMonth } = this; | ||
const abbr = formatWeekday(locale, weekdayDate); | ||
return getYear(beginOfMonth); | ||
} | ||
get monthIndex() { | ||
const { beginOfMonth } = this; | ||
return getMonthIndex(beginOfMonth); | ||
} | ||
render() { | ||
const { calendarType, formatShortWeekday, locale } = this.props; | ||
const { beginOfMonth, year, monthIndex } = this; | ||
const weekdays = []; | ||
for (let weekday = 1; weekday <= 7; weekday += 1) { | ||
const weekdayDate = new Date( | ||
year, monthIndex, weekday - getDayOfWeek(beginOfMonth, calendarType), | ||
); | ||
const abbr = formatWeekday(locale, weekdayDate); | ||
weekdays.push( | ||
<div | ||
className="react-calendar__month-view__weekdays__weekday" | ||
key={weekday} | ||
style={{ flexGrow: 1 }} | ||
> | ||
<abbr title={abbr} aria-label={abbr}> | ||
{formatShortWeekday(locale, weekdayDate).replace('.', '')} | ||
</abbr> | ||
</div>, | ||
); | ||
} | ||
return ( | ||
<Flex | ||
className="react-calendar__month-view__weekdays" | ||
count={7} | ||
weekdays.push( | ||
<div | ||
className="react-calendar__month-view__weekdays__weekday" | ||
key={weekday} | ||
> | ||
{weekdays} | ||
</Flex> | ||
<abbr title={abbr} aria-label={abbr}> | ||
{formatShortWeekday(locale, weekdayDate).replace('.', '')} | ||
</abbr> | ||
</div>, | ||
); | ||
} | ||
return ( | ||
<Flex | ||
className="react-calendar__month-view__weekdays" | ||
count={7} | ||
> | ||
{weekdays} | ||
</Flex> | ||
); | ||
} | ||
@@ -89,3 +67,2 @@ | ||
locale: PropTypes.string, | ||
activeStartDate: PropTypes.instanceOf(Date).isRequired, | ||
}; |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
const WeekNumber = ({ | ||
export default function WeekNumber({ | ||
date, | ||
onClickWeekNumber, | ||
weekNumber, | ||
}) => ( | ||
onClickWeekNumber | ||
? ( | ||
<button | ||
className="react-calendar__tile" | ||
onClick={() => onClickWeekNumber(weekNumber, date)} | ||
style={{ flexGrow: 1 }} | ||
type="button" | ||
> | ||
<span> | ||
{weekNumber} | ||
</span> | ||
</button> | ||
) | ||
: ( | ||
<div | ||
className="react-calendar__tile" | ||
style={{ flexGrow: 1 }} | ||
> | ||
<span> | ||
{weekNumber} | ||
</span> | ||
</div> | ||
) | ||
); | ||
}) { | ||
return ( | ||
onClickWeekNumber | ||
? ( | ||
<button | ||
className="react-calendar__tile" | ||
onClick={() => onClickWeekNumber(weekNumber, date)} | ||
style={{ flexGrow: 1 }} | ||
type="button" | ||
> | ||
<span> | ||
{weekNumber} | ||
</span> | ||
</button> | ||
) | ||
: ( | ||
<div | ||
className="react-calendar__tile" | ||
style={{ flexGrow: 1 }} | ||
> | ||
<span> | ||
{weekNumber} | ||
</span> | ||
</div> | ||
) | ||
); | ||
} | ||
@@ -39,3 +41,1 @@ WeekNumber.propTypes = { | ||
}; | ||
export default WeekNumber; |
@@ -1,2 +0,2 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
@@ -18,16 +18,11 @@ | ||
export default class WeekNumbers extends PureComponent { | ||
get startWeekday() { | ||
const { activeStartDate, calendarType } = this.props; | ||
return getDayOfWeek(activeStartDate, calendarType); | ||
} | ||
export default function WeekNumbers(props) { | ||
const { | ||
activeStartDate, | ||
calendarType, | ||
onClickWeekNumber, | ||
showFixedNumberOfWeeks, | ||
} = props; | ||
get numberOfDays() { | ||
const { activeStartDate } = this.props; | ||
return getDaysInMonth(activeStartDate); | ||
} | ||
get numberOfWeeks() { | ||
const { showFixedNumberOfWeeks } = this.props; | ||
const numberOfWeeks = (() => { | ||
if (showFixedNumberOfWeeks) { | ||
@@ -37,66 +32,44 @@ return 6; | ||
const days = this.numberOfDays - (7 - this.startWeekday); | ||
const numberOfDays = getDaysInMonth(activeStartDate); | ||
const startWeekday = getDayOfWeek(activeStartDate, calendarType); | ||
const days = numberOfDays - (7 - startWeekday); | ||
return 1 + Math.ceil(days / 7); | ||
} | ||
})(); | ||
get year() { | ||
const { activeStartDate } = this.props; | ||
return getYear(activeStartDate); | ||
} | ||
const dates = (() => { | ||
const year = getYear(activeStartDate); | ||
const monthIndex = getMonthIndex(activeStartDate); | ||
const day = getDay(activeStartDate); | ||
get monthIndex() { | ||
const { activeStartDate } = this.props; | ||
return getMonthIndex(activeStartDate); | ||
} | ||
get day() { | ||
const { activeStartDate } = this.props; | ||
return getDay(activeStartDate); | ||
} | ||
get dates() { | ||
const { | ||
year, monthIndex, numberOfWeeks, day, | ||
} = this; | ||
const { calendarType } = this.props; | ||
const dates = []; | ||
const result = []; | ||
for (let index = 0; index < numberOfWeeks; index += 1) { | ||
dates.push( | ||
result.push( | ||
getBeginOfWeek(new Date(year, monthIndex, day + (index * 7)), calendarType), | ||
); | ||
} | ||
return dates; | ||
} | ||
return result; | ||
})(); | ||
get weekNumbers() { | ||
const { dates } = this; | ||
const { calendarType } = this.props; | ||
return dates.map(date => getWeekNumber(date, calendarType)); | ||
} | ||
const weekNumbers = dates.map(date => getWeekNumber(date, calendarType)); | ||
render() { | ||
const { dates, numberOfWeeks, weekNumbers } = this; | ||
const { onClickWeekNumber } = this.props; | ||
return ( | ||
<Flex | ||
className="react-calendar__month-view__weekNumbers" | ||
count={numberOfWeeks} | ||
direction="column" | ||
style={{ flexBasis: 'calc(100% * (1 / 8)', flexShrink: 0 }} | ||
> | ||
{ | ||
weekNumbers.map((weekNumber, weekIndex) => ( | ||
<WeekNumber | ||
date={dates[weekIndex]} | ||
key={weekNumber} | ||
onClickWeekNumber={onClickWeekNumber} | ||
weekNumber={weekNumber} | ||
/> | ||
)) | ||
} | ||
</Flex> | ||
); | ||
} | ||
return ( | ||
<Flex | ||
className="react-calendar__month-view__weekNumbers" | ||
count={numberOfWeeks} | ||
direction="column" | ||
style={{ flexBasis: 'calc(100% * (1 / 8)', flexShrink: 0 }} | ||
> | ||
{ | ||
weekNumbers.map((weekNumber, weekIndex) => ( | ||
<WeekNumber | ||
date={dates[weekIndex]} | ||
key={weekNumber} | ||
onClickWeekNumber={onClickWeekNumber} | ||
weekNumber={weekNumber} | ||
/> | ||
)) | ||
} | ||
</Flex> | ||
); | ||
} | ||
@@ -103,0 +76,0 @@ |
import getUserLocale from 'get-user-locale'; | ||
const formatterCache = {}; | ||
const getFormatter = options => (locale, date) => ( | ||
date.toLocaleString(locale || getUserLocale(), options) | ||
); | ||
/** | ||
* Gets Intl-based date formatter from formatter cache. If it doesn't exist in cache | ||
* just yet, it will be created on the fly. | ||
*/ | ||
const getFormatter = (locale, options) => { | ||
if (!locale) { | ||
// Default parameter is not enough as it does not protect us from null values | ||
// eslint-disable-next-line no-param-reassign | ||
locale = getUserLocale(); | ||
} | ||
const stringifiedOptions = JSON.stringify(options); | ||
if (!formatterCache[locale]) { | ||
formatterCache[locale] = {}; | ||
} | ||
if (!formatterCache[locale][stringifiedOptions]) { | ||
formatterCache[locale][stringifiedOptions] = n => n.toLocaleString(locale, options); | ||
} | ||
return formatterCache[locale][stringifiedOptions]; | ||
}; | ||
/** | ||
* Changes the hour in a Date to ensure right date formatting even if DST is messed up. | ||
@@ -43,30 +21,18 @@ * Workaround for bug in WebKit and Firefox with historical dates. | ||
export const formatDate = (locale, date) => getFormatter( | ||
locale, | ||
{ day: 'numeric', month: 'numeric', year: 'numeric' }, | ||
)(toSafeHour(date)); | ||
const getSafeFormatter = options => (locale, date) => ( | ||
getFormatter(options)(locale, toSafeHour(date)) | ||
); | ||
export const formatLongDate = (locale, date) => getFormatter( | ||
locale, | ||
{ day: 'numeric', month: 'long', year: 'numeric' }, | ||
)(toSafeHour(date)); | ||
const formatDateOptions = { day: 'numeric', month: 'numeric', year: 'numeric' }; | ||
const formatLongDateOptions = { day: 'numeric', month: 'long', year: 'numeric' }; | ||
const formatMonthYearOptions = { month: 'long', year: 'numeric' }; | ||
const formatMonthOptions = { month: 'long' }; | ||
const formatWeekdayOptions = { weekday: 'long' }; | ||
const formatShortWeekdayOptions = { weekday: 'short' }; | ||
export const formatMonthYear = (locale, date) => getFormatter( | ||
locale, | ||
{ month: 'long', year: 'numeric' }, | ||
)(toSafeHour(date)); | ||
export const formatMonth = (locale, date) => getFormatter( | ||
locale, | ||
{ month: 'long' }, | ||
)(toSafeHour(date)); | ||
export const formatWeekday = (locale, date) => getFormatter( | ||
locale, | ||
{ weekday: 'long' }, | ||
)(toSafeHour(date)); | ||
export const formatShortWeekday = (locale, date) => getFormatter( | ||
locale, | ||
{ weekday: 'short' }, | ||
)(toSafeHour(date)); | ||
export const formatDate = getSafeFormatter(formatDateOptions); | ||
export const formatLongDate = getSafeFormatter(formatLongDateOptions); | ||
export const formatMonthYear = getSafeFormatter(formatMonthYearOptions); | ||
export const formatMonth = getSafeFormatter(formatMonthOptions); | ||
export const formatWeekday = getSafeFormatter(formatWeekdayOptions); | ||
export const formatShortWeekday = getSafeFormatter(formatShortWeekdayOptions); |
@@ -18,3 +18,3 @@ import React from 'react'; | ||
const Month = ({ | ||
export default function Month({ | ||
classes, | ||
@@ -25,16 +25,18 @@ date, | ||
...otherProps | ||
}) => ( | ||
<Tile | ||
{...otherProps} | ||
classes={[...classes, className]} | ||
date={date} | ||
formatAbbr={formatMonthYear} | ||
locale={locale} | ||
maxDateTransform={getEndOfMonth} | ||
minDateTransform={getBeginOfMonth} | ||
view="year" | ||
> | ||
{formatMonth(locale, date)} | ||
</Tile> | ||
); | ||
}) { | ||
return ( | ||
<Tile | ||
{...otherProps} | ||
classes={[].concat(classes, className)} | ||
date={date} | ||
formatAbbr={formatMonthYear} | ||
locale={locale} | ||
maxDateTransform={getEndOfMonth} | ||
minDateTransform={getBeginOfMonth} | ||
view="year" | ||
> | ||
{formatMonth(locale, date)} | ||
</Tile> | ||
); | ||
} | ||
@@ -49,3 +51,1 @@ Month.defaultProps = { | ||
}; | ||
export default Month; |
@@ -1,2 +0,2 @@ | ||
import React, { PureComponent } from 'react'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
@@ -10,25 +10,19 @@ | ||
export default class Months extends PureComponent { | ||
start = 0 | ||
export default function Months(props) { | ||
const { activeStartDate } = props; | ||
const start = 0; | ||
const end = 11; | ||
const year = getYear(activeStartDate); | ||
end = 11 | ||
get year() { | ||
const { activeStartDate } = this.props; | ||
return getYear(activeStartDate); | ||
} | ||
render() { | ||
return ( | ||
<TileGroup | ||
{...this.props} | ||
className="react-calendar__year-view__months" | ||
dateTransform={monthIndex => new Date(this.year, monthIndex, 1)} | ||
dateType="month" | ||
end={this.end} | ||
start={this.start} | ||
tile={Month} | ||
/> | ||
); | ||
} | ||
return ( | ||
<TileGroup | ||
{...props} | ||
className="react-calendar__year-view__months" | ||
dateTransform={monthIndex => new Date(year, monthIndex, 1)} | ||
dateType="month" | ||
end={end} | ||
start={start} | ||
tile={Month} | ||
/> | ||
); | ||
} | ||
@@ -35,0 +29,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
20
184
448785
10778