office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
213 lines • 9.45 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, getId, getNativeProps, divProperties, createRef, classNamesFunction } from '../../Utilities';
import { CommandButton } from '../../Button';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { PivotItem } from './PivotItem';
import { PivotLinkFormat } from './Pivot.types';
import { PivotLinkSize } from './Pivot.types';
import { Icon } from '../../Icon';
var getClassNames = classNamesFunction();
var PivotItemType = React.createElement(PivotItem, null).type;
var PivotBase = /** @class */ (function (_super) {
tslib_1.__extends(PivotBase, _super);
function PivotBase(props) {
var _this = _super.call(this, props) || this;
_this.focusZone = createRef();
_this._renderPivotLink = function (link) {
var itemKey = link.itemKey, headerButtonProps = link.headerButtonProps;
var tabId = _this._keyToTabIds[itemKey];
var onRenderItemLink = link.onRenderItemLink;
var linkContent;
var isSelected = _this.state.selectedKey === itemKey;
if (onRenderItemLink) {
linkContent = onRenderItemLink(link, _this._renderLinkContent);
}
else {
linkContent = _this._renderLinkContent(link);
}
return (React.createElement(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": _this.state.selectedKey === itemKey, name: link.headerText, keytipProps: link.keytipProps }), linkContent));
};
_this._renderLinkContent = function (link) {
var itemCount = link.itemCount, itemIcon = link.itemIcon, headerText = link.headerText;
return (React.createElement("span", { className: _this._classNames.linkContent },
itemIcon !== undefined && (React.createElement("span", { className: _this._classNames.icon },
React.createElement(Icon, { iconName: itemIcon }))),
headerText !== undefined && React.createElement("span", { className: _this._classNames.text },
" ",
link.headerText),
itemCount !== undefined && React.createElement("span", { className: _this._classNames.count },
" (",
itemCount,
")")));
};
/**
* Renders the current Pivot Item
*/
_this._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]));
};
_this._pivotId = 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._renderPivotLink = _this._renderPivotLink.bind(_this);
return _this;
}
PivotBase.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]
};
});
};
/**
* Sets focus to the first pivot tab.
*/
PivotBase.prototype.focus = function () {
if (this.focusZone.current) {
this.focusZone.current.focus();
}
};
PivotBase.prototype.render = function () {
var divProps = getNativeProps(this.props, divProperties);
this._classNames = this._getClassNames(this.props);
return (React.createElement("div", tslib_1.__assign({}, divProps),
this._renderPivotLinks(),
this._renderPivotItem()));
};
/**
* Renders the set of links to route between pivots
*/
PivotBase.prototype._renderPivotLinks = function () {
var items = this.state.links.map(this._renderPivotLink);
return (React.createElement(FocusZone, { componentRef: this.focusZone, direction: FocusZoneDirection.horizontal },
React.createElement("ul", { className: this._classNames.root, role: "tablist" }, items)));
};
/**
* Gets the set of PivotLinks as arrary of IPivotItemProps
* The set of Links is determined by child components of type PivotItem
*/
PivotBase.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 === PivotItemType) {
var pivotItem = child;
var itemKey = pivotItem.props.itemKey || index.toString();
links.push({
headerText: pivotItem.props.headerText || pivotItem.props.linkText,
headerButtonProps: pivotItem.props.headerButtonProps,
ariaLabel: pivotItem.props.ariaLabel,
itemKey: itemKey,
itemCount: pivotItem.props.itemCount,
itemIcon: pivotItem.props.itemIcon,
onRenderItemLink: pivotItem.props.onRenderItemLink,
keytipProps: pivotItem.props.keytipProps
});
_this._keyToIndexMapping[itemKey] = index;
_this._keyToTabIds[itemKey] = _this._getTabId(itemKey, index);
}
});
return links;
};
/**
* 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 (itemKey) {
return itemKey !== undefined && this._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 === 13 /* enter */) {
ev.preventDefault();
this._updateSelectedItem(itemKey);
}
};
/**
* Updates the state with the new selected index
*/
PivotBase.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 === PivotItemType) {
this.props.onLinkClick(item, ev);
}
}
};
PivotBase.prototype._getClassNames = function (props) {
var theme = props.theme;
var rootIsLarge = props.linkSize === PivotLinkSize.large;
var rootIsTabs = props.linkFormat === PivotLinkFormat.tabs;
return getClassNames(props.styles, {
theme: theme,
rootIsLarge: rootIsLarge,
rootIsTabs: rootIsTabs
});
};
return PivotBase;
}(BaseComponent));
export { PivotBase };
//# sourceMappingURL=Pivot.base.js.map