office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
203 lines • 8.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var FocusZone_1 = require("../../FocusZone");
var PivotItem_1 = require("./PivotItem");
var Pivot_Props_1 = require("./Pivot.Props");
var Pivot_Props_2 = require("./Pivot.Props");
var Icon_1 = require("../../Icon");
var stylesImport = require("./Pivot.scss");
var styles = stylesImport;
var Pivot = (function (_super) {
tslib_1.__extends(Pivot, _super);
function Pivot(props) {
var _this = _super.call(this, props) || this;
_this._pivotId = Utilities_1.getId('Pivot');
var links = _this._getPivotLinks(_this.props);
var selectedKey;
if (props.initialSelectedKey) {
selectedKey = props.initialSelectedKey;
}
else if (props.initialSelectedIndex) {
selectedKey = links[props.initialSelectedIndex].itemKey;
}
else if (props.selectedKey) {
selectedKey = props.selectedKey;
}
else if (links.length) {
selectedKey = links[0].itemKey;
}
_this.state = {
links: links,
selectedKey: selectedKey,
selectedTabId: _this._keyToTabIds[selectedKey],
};
_this._renderLink = _this._renderLink.bind(_this);
return _this;
}
Pivot.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var links = this._getPivotLinks(nextProps);
this.setState(function (prevState, props) {
var selectedKey;
if (_this._isKeyValid(nextProps.selectedKey)) {
selectedKey = nextProps.selectedKey;
}
else if (_this._isKeyValid(prevState.selectedKey)) {
selectedKey = prevState.selectedKey;
}
else if (links.length) {
selectedKey = links[0].itemKey;
}
return {
links: links,
selectedKey: selectedKey,
selectedTabId: _this._keyToTabIds[selectedKey],
};
});
};
Pivot.prototype.render = function () {
return (React.createElement("div", null,
this._renderPivotLinks(),
this._renderPivotItem()));
};
/**
* Renders the set of links to route between pivots
*/
Pivot.prototype._renderPivotLinks = function () {
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement("ul", { className: Utilities_1.css('ms-Pivot', styles.root, (_a = {}, _a['ms-Pivot--large ' + styles.rootIsLarge] = this.props.linkSize === Pivot_Props_2.PivotLinkSize.large, _a), (_b = {}, _b['ms-Pivot--tabs ' + styles.rootIsTabs] = this.props.linkFormat === Pivot_Props_1.PivotLinkFormat.tabs, _b)), role: 'tablist' }, this.state.links.map(this._renderLink))));
var _a, _b;
};
/**
* Renders a pivot link
*/
Pivot.prototype._renderLink = function (link) {
var itemKey = link.itemKey;
var tabId = this._keyToTabIds[itemKey];
var onRenderItemLink = link.onRenderItemLink;
var linkContent;
if (onRenderItemLink) {
linkContent = onRenderItemLink(link, this._renderLinkContent);
}
else {
linkContent = this._renderLinkContent(link);
}
return (React.createElement(Button_1.CommandButton, { id: tabId, key: itemKey, className: Utilities_1.css('ms-Pivot-link', styles.link, (_a = {},
_a['is-selected ' + styles.linkIsSelected] = this.state.selectedKey === itemKey,
_a)), onClick: this._onLinkClick.bind(this, itemKey), onKeyPress: this._onKeyPress.bind(this, itemKey), ariaLabel: link.ariaLabel, role: 'tab', "aria-selected": this.state.selectedKey === itemKey }, linkContent));
var _a;
};
Pivot.prototype._renderLinkContent = function (link) {
var itemCount = link.itemCount, itemIcon = link.itemIcon, linkText = link.linkText;
return React.createElement("span", { className: Utilities_1.css('ms-Pivot-link-content') },
itemIcon !== undefined && (React.createElement("span", { className: Utilities_1.css('ms-Pivot-icon', styles.icon) },
React.createElement(Icon_1.Icon, { iconName: itemIcon }))),
linkText !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-text', styles.text) },
" ",
link.linkText),
itemCount !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-count', styles.count) },
" (",
itemCount,
")"));
};
/**
* Renders the current Pivot Item
*/
Pivot.prototype._renderPivotItem = function () {
if (this.props.headersOnly) {
return null;
}
var itemKey = this.state.selectedKey;
var index = this._keyToIndexMapping[itemKey];
var selectedTabId = this.state.selectedTabId;
return (React.createElement("div", { role: 'tabpanel', "aria-labelledby": selectedTabId }, React.Children.toArray(this.props.children)[index]));
};
/**
* Gets the set of PivotLinks as arrary of IPivotItemProps
* The set of Links is determined by child components of type PivotItem
*/
Pivot.prototype._getPivotLinks = function (props) {
var _this = this;
var links = [];
this._keyToIndexMapping = {};
this._keyToTabIds = {};
React.Children.map(props.children, function (child, index) {
if (typeof child === 'object' && child.type === PivotItem_1.PivotItem) {
var pivotItem = child;
var itemKey = pivotItem.props.itemKey || index.toString();
links.push({
linkText: pivotItem.props.linkText,
ariaLabel: pivotItem.props.ariaLabel,
itemKey: itemKey,
itemCount: pivotItem.props.itemCount,
itemIcon: pivotItem.props.itemIcon,
onRenderItemLink: pivotItem.props.onRenderItemLink
});
_this._keyToIndexMapping[itemKey] = index;
_this._keyToTabIds[itemKey] = _this._getTabId(itemKey, index);
}
});
return links;
};
/**
* Generates the Id for the tab button.
*/
Pivot.prototype._getTabId = function (itemKey, index) {
if (this.props.getTabId) {
return this.props.getTabId(itemKey, index);
}
return this._pivotId + ("-Tab" + index);
};
/**
* whether the key exists in the pivot items.
*/
Pivot.prototype._isKeyValid = function (itemKey) {
return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
};
/**
* Handles the onClick event on PivotLinks
*/
Pivot.prototype._onLinkClick = function (itemKey, ev) {
ev.preventDefault();
this._updateSelectedItem(itemKey, ev);
};
/**
* Handle the onKeyPress eventon the PivotLinks
*/
Pivot.prototype._onKeyPress = function (itemKey, ev) {
ev.preventDefault();
if (ev.which === 13 /* enter */) {
this._updateSelectedItem(itemKey);
}
};
/**
* Updates the state with the new selected index
*/
Pivot.prototype._updateSelectedItem = function (itemKey, ev) {
this.setState({
selectedKey: itemKey,
selectedTabId: this._keyToTabIds[itemKey]
});
if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) {
var index = this._keyToIndexMapping[itemKey];
// React.Element<any> cannot directly convert to PivotItem.
var item = React.Children.toArray(this.props.children)[index];
if (typeof item === 'object' && item.type === PivotItem_1.PivotItem) {
this.props.onLinkClick(item, ev);
}
}
};
tslib_1.__decorate([
Utilities_1.autobind
], Pivot.prototype, "_renderLink", null);
tslib_1.__decorate([
Utilities_1.autobind
], Pivot.prototype, "_renderLinkContent", null);
return Pivot;
}(Utilities_1.BaseComponent));
exports.Pivot = Pivot;
//# sourceMappingURL=Pivot.js.map