office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
307 lines • 14.9 kB
JavaScript
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { KeyCodes, css, getRTL, format } from '../../Utilities';
import { FocusZone } from '../../FocusZone';
import * as stylesImport from './Calendar.scss';
import { Icon } from '../../Icon';
var styles = stylesImport;
var CELL_COUNT = 12;
var DefaultCalendarYearStrings = {
prevRangeAriaLabel: undefined,
nextRangeAriaLabel: undefined,
};
var DefaultNavigationIcons = {
leftNavigation: 'Up',
rightNavigation: 'Down',
closeIcon: 'CalculatorMultiply',
};
var CalendarYearGridCell = /** @class */ (function (_super) {
__extends(CalendarYearGridCell, _super);
function CalendarYearGridCell() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._buttonRef = React.createRef();
_this._onRenderYear = function () {
var _a = _this.props, year = _a.year, onRenderYear = _a.onRenderYear;
if (onRenderYear) {
return onRenderYear(year);
}
return year;
};
_this._onClick = function () {
if (_this.props.onSelectYear) {
_this.props.onSelectYear(_this.props.year);
}
};
_this._onKeyDown = function (ev) {
if (_this.props.onSelectYear && ev.which === KeyCodes.enter) {
_this.props.onSelectYear(_this.props.year);
}
};
return _this;
}
CalendarYearGridCell.prototype.focus = function () {
if (this._buttonRef.current) {
this._buttonRef.current.focus();
}
};
CalendarYearGridCell.prototype.render = function () {
var _a;
var _b = this.props, year = _b.year, selected = _b.selected, disabled = _b.disabled, onSelectYear = _b.onSelectYear;
return (React.createElement("button", { className: css('ms-DatePicker-yearOption', styles.yearOption, (_a = {},
_a['ms-DatePicker-day--highlighted ' + styles.yearIsHighlighted] = selected,
_a['ms-DatePicker-yearOption--disabled ' + styles.yearOptionIsDisabled] = disabled,
_a)), type: "button", role: "gridcell", onClick: !disabled && onSelectYear ? this._onClick : undefined, onKeyDown: !disabled && onSelectYear ? this._onKeyDown : undefined, disabled: disabled, "aria-label": String(year), "aria-selected": selected, ref: this._buttonRef }, this._onRenderYear()));
};
return CalendarYearGridCell;
}(React.Component));
var CalendarYearGrid = /** @class */ (function (_super) {
__extends(CalendarYearGrid, _super);
function CalendarYearGrid() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._selectedCellRef = React.createRef();
_this._currentCellRef = React.createRef();
_this._renderCell = function (year) {
var selected = year === _this.props.selectedYear;
var _a = _this.props, minYear = _a.minYear, maxYear = _a.maxYear, onSelectYear = _a.onSelectYear;
var disabled = (minYear !== undefined && year < minYear) || (maxYear !== undefined && year > maxYear);
var current = year === new Date().getFullYear();
return (React.createElement(CalendarYearGridCell, { key: year, year: year, selected: selected, current: current, disabled: disabled, onSelectYear: onSelectYear, ref: selected ? _this._selectedCellRef : current ? _this._currentCellRef : undefined }));
};
return _this;
}
CalendarYearGrid.prototype.focus = function () {
if (this._selectedCellRef.current) {
this._selectedCellRef.current.focus();
}
else if (this._currentCellRef.current) {
this._currentCellRef.current.focus();
}
};
CalendarYearGrid.prototype.render = function () {
var _a = this.props, fromYear = _a.fromYear, toYear = _a.toYear;
var year = fromYear;
var cells = [];
while (year <= toYear) {
cells.push(this._renderCell(year));
year++;
}
return (React.createElement(FocusZone, null,
React.createElement("div", { className: css('ms-DatePicker-optionGrid', styles.optionGrid), role: "grid" },
React.createElement("div", { role: "row" }, cells))));
};
return CalendarYearGrid;
}(React.Component));
var CalendarYearNavPrev = /** @class */ (function (_super) {
__extends(CalendarYearNavPrev, _super);
function CalendarYearNavPrev() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onSelectPrev = function () {
if (!_this.isDisabled && _this.props.onSelectPrev) {
_this.props.onSelectPrev();
}
};
_this._onKeyDown = function (ev) {
if (ev.which === KeyCodes.enter) {
_this._onSelectPrev();
}
};
return _this;
}
CalendarYearNavPrev.prototype.render = function () {
var _a;
var iconStrings = this.props.navigationIcons || DefaultNavigationIcons;
var strings = this.props.strings || DefaultCalendarYearStrings;
var prevRangeAriaLabel = strings.prevRangeAriaLabel;
var prevRange = { fromYear: this.props.fromYear - CELL_COUNT, toYear: this.props.toYear - CELL_COUNT };
var prevAriaLabel = prevRangeAriaLabel
? typeof prevRangeAriaLabel === 'string'
? prevRangeAriaLabel
: prevRangeAriaLabel(prevRange)
: undefined;
var disabled = this.isDisabled;
var onSelectPrev = this.props.onSelectPrev;
return (React.createElement("button", { className: css('ms-DatePicker-prevDecade', styles.prevDecade, (_a = {},
_a['ms-DatePicker-prevDecade--disabled ' + styles.prevDecadeIsDisabled] = disabled,
_a)), onClick: !disabled && onSelectPrev ? this._onSelectPrev : undefined, onKeyDown: !disabled && onSelectPrev ? this._onKeyDown : undefined, type: "button", tabIndex: 0, title: prevAriaLabel, disabled: disabled },
React.createElement(Icon, { iconName: getRTL() ? iconStrings.rightNavigation : iconStrings.leftNavigation })));
};
Object.defineProperty(CalendarYearNavPrev.prototype, "isDisabled", {
get: function () {
var minYear = this.props.minYear;
return minYear !== undefined && this.props.fromYear < minYear;
},
enumerable: true,
configurable: true
});
return CalendarYearNavPrev;
}(React.Component));
var CalendarYearNavNext = /** @class */ (function (_super) {
__extends(CalendarYearNavNext, _super);
function CalendarYearNavNext() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onSelectNext = function () {
if (!_this.isDisabled && _this.props.onSelectNext) {
_this.props.onSelectNext();
}
};
_this._onKeyDown = function (ev) {
if (ev.which === KeyCodes.enter) {
_this._onSelectNext();
}
};
return _this;
}
CalendarYearNavNext.prototype.render = function () {
var _a;
var iconStrings = this.props.navigationIcons || DefaultNavigationIcons;
var strings = this.props.strings || DefaultCalendarYearStrings;
var nextRangeAriaLabel = strings.nextRangeAriaLabel;
var nextRange = { fromYear: this.props.fromYear + CELL_COUNT, toYear: this.props.toYear + CELL_COUNT };
var nextAriaLabel = nextRangeAriaLabel
? typeof nextRangeAriaLabel === 'string'
? nextRangeAriaLabel
: nextRangeAriaLabel(nextRange)
: undefined;
var onSelectNext = this.props.onSelectNext;
var disabled = this.isDisabled;
return (React.createElement("button", { className: css('ms-DatePicker-nextDecade', styles.nextDecade, (_a = {},
_a['ms-DatePicker-nextDecade--disabled ' + styles.nextDecadeIsDisabled] = disabled,
_a)), onClick: !disabled && onSelectNext ? this._onSelectNext : undefined, onKeyDown: !disabled && onSelectNext ? this._onKeyDown : undefined, type: "button", tabIndex: 0, title: nextAriaLabel, disabled: this.isDisabled },
React.createElement(Icon, { iconName: getRTL() ? iconStrings.leftNavigation : iconStrings.rightNavigation })));
};
Object.defineProperty(CalendarYearNavNext.prototype, "isDisabled", {
get: function () {
var maxYear = this.props.maxYear;
return maxYear !== undefined && this.props.fromYear + CELL_COUNT > maxYear;
},
enumerable: true,
configurable: true
});
return CalendarYearNavNext;
}(React.Component));
var CalendarYearNav = /** @class */ (function (_super) {
__extends(CalendarYearNav, _super);
function CalendarYearNav() {
return _super !== null && _super.apply(this, arguments) || this;
}
CalendarYearNav.prototype.render = function () {
return (React.createElement("div", { className: css('ms-DatePicker-decadeComponents', styles.decadeComponents) },
React.createElement("div", { className: css('ms-DatePicker-navContainer', styles.navContainer) },
React.createElement(CalendarYearNavPrev, __assign({}, this.props)),
React.createElement(CalendarYearNavNext, __assign({}, this.props)))));
};
return CalendarYearNav;
}(React.Component));
var CalendarYearTitle = /** @class */ (function (_super) {
__extends(CalendarYearTitle, _super);
function CalendarYearTitle() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onHeaderSelect = function () {
if (_this.props.onHeaderSelect) {
_this.props.onHeaderSelect(true);
}
};
_this._onHeaderKeyDown = function (ev) {
if (_this.props.onHeaderSelect && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {
_this.props.onHeaderSelect(true);
}
};
_this._onRenderYear = function (year) {
if (_this.props.onRenderYear) {
return _this.props.onRenderYear(year);
}
return year;
};
return _this;
}
CalendarYearTitle.prototype.render = function () {
var _a = this.props, fromYear = _a.fromYear, toYear = _a.toYear, onHeaderSelect = _a.onHeaderSelect;
if (onHeaderSelect) {
var strings = this.props.strings || DefaultCalendarYearStrings;
var rangeAriaLabel = strings.rangeAriaLabel;
var currentDateRange = rangeAriaLabel
? typeof rangeAriaLabel === 'string'
? rangeAriaLabel
: rangeAriaLabel(this.props)
: undefined;
var ariaLabel = strings.headerAriaLabelFormatString
? format(strings.headerAriaLabelFormatString, currentDateRange)
: currentDateRange;
return (React.createElement("div", { className: css('ms-DatePicker-currentDecade js-showYearPicker', styles.currentDecade, styles.headerToggleView), onClick: this._onHeaderSelect, onKeyDown: this._onHeaderKeyDown, "aria-label": ariaLabel, role: "button", "aria-atomic": true, "aria-live": "polite", tabIndex: 0 },
this._onRenderYear(fromYear),
" - ",
this._onRenderYear(toYear)));
}
return (React.createElement("div", { className: css('ms-DatePicker-currentDecade js-showYearPicker', styles.currentDecade) },
this._onRenderYear(fromYear),
" - ",
this._onRenderYear(toYear)));
};
return CalendarYearTitle;
}(React.Component));
var CalendarYearHeader = /** @class */ (function (_super) {
__extends(CalendarYearHeader, _super);
function CalendarYearHeader() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onRenderTitle = function () {
if (_this.props.onRenderTitle) {
return _this.props.onRenderTitle(_this.props);
}
return React.createElement(CalendarYearTitle, __assign({}, _this.props));
};
_this._onRenderNav = function () {
return React.createElement(CalendarYearNav, __assign({}, _this.props));
};
return _this;
}
CalendarYearHeader.prototype.render = function () {
return (React.createElement("div", { className: css('ms-DatePicker-header', styles.header) },
this._onRenderTitle(),
this._onRenderNav()));
};
return CalendarYearHeader;
}(React.Component));
var CalendarYear = /** @class */ (function (_super) {
__extends(CalendarYear, _super);
function CalendarYear(props) {
var _this = _super.call(this, props) || this;
_this._gridRef = React.createRef();
_this._onNavNext = function () {
_this.setState({ fromYear: _this.state.fromYear + CELL_COUNT });
};
_this._onNavPrev = function () {
_this.setState({ fromYear: _this.state.fromYear - CELL_COUNT });
};
_this._renderHeader = function () {
return (React.createElement(CalendarYearHeader, __assign({}, _this.props, { fromYear: _this.state.fromYear, toYear: _this.state.fromYear + CELL_COUNT - 1, onSelectPrev: _this._onNavPrev, onSelectNext: _this._onNavNext })));
};
_this._renderGrid = function () {
return (React.createElement(CalendarYearGrid, __assign({}, _this.props, { fromYear: _this.state.fromYear, toYear: _this.state.fromYear + CELL_COUNT - 1, ref: _this._gridRef })));
};
_this.state = _this._calculateInitialStateFromProps(props);
return _this;
}
CalendarYear.prototype.focus = function () {
if (this._gridRef.current) {
this._gridRef.current.focus();
}
};
CalendarYear.prototype.render = function () {
return (React.createElement("div", { className: css('ms-DatePicker-yearPicker', styles.yearPicker) },
this._renderHeader(),
this._renderGrid()));
};
CalendarYear.prototype._calculateInitialStateFromProps = function (props) {
var selectedYear = props.selectedYear, navigatedYear = props.navigatedYear;
var rangeYear = selectedYear || navigatedYear || new Date().getFullYear();
var fromYear = Math.floor(rangeYear / 10) * 10;
return {
fromYear: fromYear,
navigatedYear: navigatedYear,
selectedYear: selectedYear,
};
};
return CalendarYear;
}(React.Component));
export { CalendarYear };
//# sourceMappingURL=CalendarYear.js.map