office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
228 lines • 10.3 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_types_1 = require("./Pivot.types");
var Pivot_types_2 = require("./Pivot.types");
var Icon_1 = require("../../Icon");
var getClassNames = Utilities_1.classNamesFunction();
var PivotItemType = React.createElement(PivotItem_1.PivotItem, null).type;
/**
* Usage:
*
* <Pivot>
* <PivotItem headerText="Foo">
* <Label>Pivot #1</Label>
* </PivotItem>
* <PivotItem headerText="Bar">
* <Label>Pivot #2</Label>
* </PivotItem>
* <PivotItem headerText="Bas">
* <Label>Pivot #3</Label>
* </PivotItem>
* </Pivot>
*/
var PivotBase = /** @class */ (function (_super) {
tslib_1.__extends(PivotBase, _super);
function PivotBase(props) {
var _this = _super.call(this, props) || this;
_this._focusZone = React.createRef();
_this._renderPivotLink = function (linkCollection, link, selectedKey) {
var itemKey = link.itemKey, headerButtonProps = link.headerButtonProps;
var tabId = linkCollection.keyToTabIdMapping[itemKey];
var onRenderItemLink = link.onRenderItemLink;
var linkContent;
var isSelected = selectedKey === itemKey;
if (onRenderItemLink) {
linkContent = onRenderItemLink(link, _this._renderLinkContent);
}
else {
linkContent = _this._renderLinkContent(link);
}
var contentString = link.headerText || '';
contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';
// Adding space supplementary for icon
contentString += link.itemIcon ? ' xx' : '';
return (React.createElement(Button_1.CommandButton, tslib_1.__assign({}, headerButtonProps, { id: tabId, key: itemKey, className: isSelected ? _this._classNames.linkIsSelected : _this._classNames.link, onClick: _this._onLinkClick.bind(_this, itemKey), onKeyPress: _this._onKeyPress.bind(_this, itemKey), ariaLabel: link.ariaLabel, role: "tab", "aria-selected": isSelected, name: link.headerText, keytipProps: link.keytipProps, "data-content": contentString }), linkContent));
};
_this._renderLinkContent = function (link) {
var itemCount = link.itemCount, itemIcon = link.itemIcon, headerText = link.headerText;
var classNames = _this._classNames;
return (React.createElement("span", { className: classNames.linkContent },
itemIcon !== undefined && (React.createElement("span", { className: classNames.icon },
React.createElement(Icon_1.Icon, { iconName: itemIcon }))),
headerText !== undefined && React.createElement("span", { className: classNames.text },
" ",
link.headerText),
itemCount !== undefined && React.createElement("span", { className: classNames.count },
" (",
itemCount,
")")));
};
_this._warnDeprecations({
initialSelectedKey: 'defaultSelectedKey',
initialSelectedIndex: 'defaultSelectedIndex'
});
_this._pivotId = Utilities_1.getId('Pivot');
var links = _this._getPivotLinks(props).links;
var _a = props.defaultSelectedKey, defaultSelectedKey = _a === void 0 ? props.initialSelectedKey : _a, _b = props.defaultSelectedIndex, defaultSelectedIndex = _b === void 0 ? props.initialSelectedIndex : _b;
var selectedKey;
if (defaultSelectedKey) {
selectedKey = defaultSelectedKey;
}
else if (typeof defaultSelectedIndex === 'number') {
selectedKey = links[defaultSelectedIndex].itemKey;
}
else if (links.length) {
selectedKey = links[0].itemKey;
}
_this.state = {
selectedKey: selectedKey
};
return _this;
}
/**
* Sets focus to the first pivot tab.
*/
PivotBase.prototype.focus = function () {
if (this._focusZone.current) {
this._focusZone.current.focus();
}
};
PivotBase.prototype.render = function () {
var linkCollection = this._getPivotLinks(this.props);
var selectedKey = this._getSelectedKey(linkCollection);
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
this._classNames = this._getClassNames(this.props);
return (React.createElement("div", tslib_1.__assign({}, divProps),
this._renderPivotLinks(linkCollection, selectedKey),
selectedKey && this._renderPivotItem(linkCollection, selectedKey)));
};
PivotBase.prototype._getSelectedKey = function (linkCollection) {
var propsSelectedKey = this.props.selectedKey;
if (this._isKeyValid(linkCollection, propsSelectedKey) || propsSelectedKey === null) {
return propsSelectedKey;
}
var stateSelectedKey = this.state.selectedKey;
if (this._isKeyValid(linkCollection, stateSelectedKey)) {
return stateSelectedKey;
}
if (linkCollection.links.length) {
return linkCollection.links[0].itemKey;
}
return undefined;
};
/**
* Renders the set of links to route between pivots
*/
PivotBase.prototype._renderPivotLinks = function (linkCollection, selectedKey) {
var _this = this;
var items = linkCollection.links.map(function (l) { return _this._renderPivotLink(linkCollection, l, selectedKey); });
return (React.createElement(FocusZone_1.FocusZone, { componentRef: this._focusZone, direction: FocusZone_1.FocusZoneDirection.horizontal },
React.createElement("div", { className: this._classNames.root, role: "tablist" }, items)));
};
/**
* Renders the current Pivot Item
*/
PivotBase.prototype._renderPivotItem = function (linkCollection, itemKey) {
if (this.props.headersOnly || !itemKey) {
return null;
}
var index = linkCollection.keyToIndexMapping[itemKey];
var selectedTabId = linkCollection.keyToTabIdMapping[itemKey];
return (React.createElement("div", { role: "tabpanel", "aria-labelledby": selectedTabId, className: this._classNames.itemContainer }, React.Children.toArray(this.props.children)[index]));
};
/**
* Gets the set of PivotLinks as array of IPivotItemProps
* The set of Links is determined by child components of type PivotItem
*/
PivotBase.prototype._getPivotLinks = function (props) {
var _this = this;
var result = {
links: [],
keyToIndexMapping: {},
keyToTabIdMapping: {}
};
React.Children.map(React.Children.toArray(props.children), function (child, index) {
if (typeof child === 'object' && child.type === PivotItemType) {
var pivotItem = child;
var _a = pivotItem.props, linkText = _a.linkText, pivotItemProps = tslib_1.__rest(_a, ["linkText"]);
var itemKey = pivotItem.props.itemKey || index.toString();
result.links.push(tslib_1.__assign({
// Use linkText (deprecated) if headerText is not provided
headerText: linkText }, pivotItemProps, { itemKey: itemKey }));
result.keyToIndexMapping[itemKey] = index;
result.keyToTabIdMapping[itemKey] = _this._getTabId(itemKey, index);
}
else {
Utilities_1.warn('The children of a Pivot component must be of type PivotItem to be rendered.');
}
});
return result;
};
/**
* Generates the Id for the tab button.
*/
PivotBase.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.
*/
PivotBase.prototype._isKeyValid = function (linkCollection, itemKey) {
return itemKey !== undefined && itemKey !== null && linkCollection.keyToIndexMapping[itemKey] !== undefined;
};
/**
* Handles the onClick event on PivotLinks
*/
PivotBase.prototype._onLinkClick = function (itemKey, ev) {
ev.preventDefault();
this._updateSelectedItem(itemKey, ev);
};
/**
* Handle the onKeyPress eventon the PivotLinks
*/
PivotBase.prototype._onKeyPress = function (itemKey, ev) {
if (ev.which === Utilities_1.KeyCodes.enter) {
ev.preventDefault();
this._updateSelectedItem(itemKey);
}
};
/**
* Updates the state with the new selected index
*/
PivotBase.prototype._updateSelectedItem = function (itemKey, ev) {
this.setState({
selectedKey: itemKey
});
var linkCollection = this._getPivotLinks(this.props);
if (this.props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {
var index = linkCollection.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 === PivotItemType) {
this.props.onLinkClick(item, ev);
}
}
};
PivotBase.prototype._getClassNames = function (props) {
var theme = props.theme;
var rootIsLarge = props.linkSize === Pivot_types_2.PivotLinkSize.large;
var rootIsTabs = props.linkFormat === Pivot_types_1.PivotLinkFormat.tabs;
return getClassNames(props.styles, {
theme: theme,
rootIsLarge: rootIsLarge,
rootIsTabs: rootIsTabs
});
};
return PivotBase;
}(Utilities_1.BaseComponent));
exports.PivotBase = PivotBase;
//# sourceMappingURL=Pivot.base.js.map