@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
157 lines • 9.69 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Utilities_1 = require("../../Utilities");
var PageNumber_1 = require("./PageNumber");
var ComboBox_1 = require("office-ui-fabric-react/lib/ComboBox");
var Tooltip_1 = require("office-ui-fabric-react/lib/Tooltip");
var getClassNames = Utilities_1.classNamesFunction();
var DEFAULT_STRINGS = {
of: 'of',
divider: '-'
};
var PaginationBase = /** @class */ (function (_super) {
tslib_1.__extends(PaginationBase, _super);
function PaginationBase(props) {
var _this = _super.call(this, props) || this;
_this.handleFirstPage = function () {
_this.handleSelectedPage(0);
};
_this.handleLastPage = function () {
_this.handleSelectedPage(_this.props.pageCount - 1);
};
_this.onComboBoxChange = function (event, option, index) {
if (option !== undefined) {
_this.handleSelectedPage(index);
}
};
_this.handleSelectedPage = function (selected) {
var _a = _this.props, selectedPageIndex = _a.selectedPageIndex, onPageChange = _a.onPageChange;
if (selected === selectedPageIndex) {
return; // same page, no action
}
if (onPageChange) {
onPageChange(selected);
}
};
_this.handlePreviousPage = function () {
_this.handleSelectedPage(_this.props.selectedPageIndex - 1);
};
_this.handleNextPage = function () {
_this.handleSelectedPage(_this.props.selectedPageIndex + 1);
};
_this._renderVisibleItemLabel = function (props) {
if (props.onRenderVisibleItemLabel) {
return React.createElement("div", { className: _this._classNames.visibleItemLabel }, props.onRenderVisibleItemLabel(props));
}
if (props.itemsPerPage && props.totalItemCount) {
var leftItemIndex = props.selectedPageIndex * props.itemsPerPage + 1;
var rightItemsIndex = Math.min((props.selectedPageIndex + 1) * props.itemsPerPage, props.totalItemCount);
var visibleItemLabel = leftItemIndex + " " + props.strings.divider + " " + rightItemsIndex + " " + props.strings.of + " " + props.totalItemCount;
return (React.createElement("div", { className: _this._classNames.visibleItemLabel, "aria-label": visibleItemLabel }, visibleItemLabel));
}
return null;
};
return _this;
}
PaginationBase.prototype.render = function () {
var _a = this.props, comboBoxAriaLabel = _a.comboBoxAriaLabel, firstPageAriaLabel = _a.firstPageAriaLabel, previousPageAriaLabel = _a.previousPageAriaLabel, nextPageAriaLabel = _a.nextPageAriaLabel, lastPageAriaLabel = _a.lastPageAriaLabel, firstPageIconProps = _a.firstPageIconProps, previousPageIconProps = _a.previousPageIconProps, nextPageIconProps = _a.nextPageIconProps, lastPageIconProps = _a.lastPageIconProps, pageAriaLabel = _a.pageAriaLabel, pageCount = _a.pageCount, selectedPageIndex = _a.selectedPageIndex, _b = _a.onRenderVisibleItemLabel, onRenderVisibleItemLabel = _b === void 0 ? this._renderVisibleItemLabel : _b, format = _a.format, styles = _a.styles, theme = _a.theme;
this._classNames = getClassNames(styles, {
theme: theme,
format: format
});
var canPrevious = selectedPageIndex > 0;
var canNext = selectedPageIndex + 1 < pageCount;
var canFirst = selectedPageIndex !== 0;
var canLast = selectedPageIndex !== pageCount - 1;
if (format === 'comboBox') {
var scaleOptions = [];
for (var i = 0; i < this.props.pageCount; i++) {
scaleOptions.push({
key: "" + i,
text: "" + (i + 1)
});
}
return (React.createElement("div", { className: this._classNames.root },
React.createElement(Button_1.IconButton, { iconProps: firstPageIconProps, onClick: this.handleFirstPage, disabled: !canFirst, "aria-label": firstPageAriaLabel }),
React.createElement(Button_1.IconButton, { iconProps: previousPageIconProps, onClick: this.handlePreviousPage, disabled: !canPrevious, "aria-label": previousPageAriaLabel }),
React.createElement(ComboBox_1.ComboBox, { ariaLabel: comboBoxAriaLabel, selectedKey: "" + selectedPageIndex, options: scaleOptions, onChange: this.onComboBoxChange, styles: {
container: this._classNames.comboBox
} }),
React.createElement(Button_1.IconButton, { iconProps: nextPageIconProps, onClick: this.handleNextPage, disabled: !canNext, "aria-label": nextPageAriaLabel }),
React.createElement(Button_1.IconButton, { iconProps: lastPageIconProps, onClick: this.handleLastPage, disabled: !canLast, "aria-label": lastPageAriaLabel })));
}
return (React.createElement("div", { className: this._classNames.root },
React.createElement("div", null,
React.createElement(Button_1.IconButton, { iconProps: this.props.firstPageIconProps, onClick: this.handleFirstPage, disabled: !canFirst, "aria-label": firstPageAriaLabel, styles: {
icon: this._classNames.previousNextPage,
rootDisabled: this._classNames.previousNextPageDisabled
} }),
React.createElement(Button_1.IconButton, { iconProps: this.props.previousPageIconProps, onClick: this.handlePreviousPage, disabled: !canPrevious, "aria-label": previousPageAriaLabel, styles: {
icon: this._classNames.previousNextPage,
rootDisabled: this._classNames.previousNextPageDisabled
} }),
this._pageList(),
React.createElement(Button_1.IconButton, { iconProps: this.props.nextPageIconProps, onClick: this.handleNextPage, disabled: !canNext, "aria-label": nextPageAriaLabel, styles: {
icon: this._classNames.previousNextPage,
rootDisabled: this._classNames.previousNextPageDisabled
} }),
React.createElement(Tooltip_1.TooltipHost, { content: "" + (pageAriaLabel ? pageAriaLabel + ' ' : '') + pageCount, directionalHint: Tooltip_1.DirectionalHint.bottomCenter },
React.createElement(Button_1.IconButton, { iconProps: this.props.lastPageIconProps, onClick: this.handleLastPage, disabled: !canLast, "aria-label": lastPageAriaLabel, styles: {
icon: this._classNames.previousNextPage,
rootDisabled: this._classNames.previousNextPageDisabled
} }))),
onRenderVisibleItemLabel(this.props, this._renderVisibleItemLabel)));
};
PaginationBase.prototype._pageElement = function (index) {
var _a = this.props, pageAriaLabel = _a.pageAriaLabel, pageCount = _a.pageCount, selectedPageIndex = _a.selectedPageIndex, selectedAriaLabel = _a.selectedAriaLabel, strings = _a.strings;
var isSelected = index === selectedPageIndex;
var ariaLabel = pageAriaLabel && pageAriaLabel + " " + (index + 1) + " " + strings.of + " " + pageCount;
if (isSelected) {
ariaLabel = ariaLabel + ' ' + selectedAriaLabel;
}
return (React.createElement(PageNumber_1.PageNumber, { key: index + 1, page: index + 1, ariaLabel: ariaLabel, selected: isSelected, onClick: this.handleSelectedPage, className: this._classNames.pageNumber }));
};
PaginationBase.prototype._pageList = function () {
var _a = this.props, numberOfPageButton = _a.numberOfPageButton, pageCount = _a.pageCount, selectedPageIndex = _a.selectedPageIndex;
var pageList = [];
if (pageCount <= numberOfPageButton) {
for (var index = 0; index < pageCount; index++) {
pageList.push(this._pageElement(index));
}
}
else {
var leftHalfCount = Math.floor((numberOfPageButton - 1) / 2);
var rightHalfCount = numberOfPageButton - 1 - leftHalfCount;
var leftSide = selectedPageIndex - leftHalfCount;
var rightSide = selectedPageIndex + rightHalfCount;
if (rightSide > pageCount - 1) {
rightSide = pageCount - 1;
leftSide = rightSide - numberOfPageButton + 1;
}
else if (leftSide < 0) {
leftSide = 0;
rightSide = numberOfPageButton - 1;
}
for (var index = leftSide; index <= rightSide; index++) {
pageList.push(this._pageElement(index));
}
}
return pageList;
};
PaginationBase.defaultProps = {
selectedPageIndex: 0,
format: 'comboBox',
numberOfPageButton: 5,
previousPageIconProps: { iconName: 'CaretSolidLeft' },
nextPageIconProps: { iconName: 'CaretSolidRight' },
firstPageIconProps: { iconName: 'Previous' },
lastPageIconProps: { iconName: 'Next' },
strings: DEFAULT_STRINGS
};
return PaginationBase;
}(Utilities_1.BaseComponent));
exports.PaginationBase = PaginationBase;
//# sourceMappingURL=Pagination.base.js.map