office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
79 lines • 4.91 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/HoverCard", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/utilities/exampleData", "./HoverCard.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, HoverCard_1, DetailsList_1, exampleData_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _items;
var HoverCardField = /** @class */ (function (_super) {
tslib_1.__extends(HoverCardField, _super);
function HoverCardField(props) {
var _this = _super.call(this, props) || this;
_this.state = {
contentRendered: undefined
};
return _this;
}
HoverCardField.prototype.render = function () {
var _this = this;
return (React.createElement("div", { ref: function (c) { return !_this.state.contentRendered && _this.setState({ contentRendered: c }); }, "data-is-focusable": true },
this.props.content,
this.state.contentRendered && (React.createElement(HoverCard_1.HoverCard, { expandingCardProps: this.props.expandingCardProps, target: this.state.contentRendered, cardDismissDelay: 300, onCardVisible: this._log('onCardVisible'), onCardHide: this._log('onCardHide'), trapFocus: true, openHotKey: 13 /* enter */ }))));
};
HoverCardField.prototype._log = function (text) {
return function () {
console.log(text);
};
};
return HoverCardField;
}(Utilities_1.BaseComponent));
var HoverCardTargetExample = /** @class */ (function (_super) {
tslib_1.__extends(HoverCardTargetExample, _super);
function HoverCardTargetExample(props) {
var _this = _super.call(this, props) || this;
_this._onRenderItemColumn = function (item, index, column) {
var expandingCardProps = {
onRenderCompactCard: _this._onRenderCompactCard,
onRenderExpandedCard: _this._onRenderExpandedCard,
renderData: item,
directionalHint: 11 /* rightTopEdge */,
gapSpace: 16
};
if (column.key === 'key') {
return (React.createElement("div", { className: "HoverCard-item" },
React.createElement(HoverCardField, { content: item.key, expandingCardProps: expandingCardProps })));
}
return item[column.key];
};
_this._onRenderCompactCard = function (item) {
return (React.createElement("div", { className: "hoverCardExample-compactCard" },
React.createElement("a", { target: "_blank", href: "http://wikipedia.org/wiki/" + item.location }, item.location)));
};
_this._onRenderExpandedCard = function (item) {
var _a = _this.state, items = _a.items, columns = _a.columns;
return (React.createElement("div", { className: "hoverCardExample-expandedCard" },
item.description,
React.createElement(DetailsList_1.DetailsList, { setKey: "expandedCardSet", items: items, columns: columns })));
};
_items = _items || exampleData_1.createListItems(10);
_this.state = {
items: _items,
columns: _buildColumns()
};
return _this;
}
HoverCardTargetExample.prototype.render = function () {
var _a = this.state, items = _a.items, columns = _a.columns;
return (React.createElement("div", null,
React.createElement("p", null,
"Hover over the ",
React.createElement("i", null, "key"),
" cell of a row item to see the card or use the keyboard to navigate to it."),
React.createElement("p", null, "When using the keyboard to tab to it, open the card with the hotKey and it will automatically focus the first focusable element in the card allowing further navigation inside the card."),
React.createElement(DetailsList_1.DetailsList, { setKey: "hoverSet", items: items, columns: columns, onRenderItemColumn: this._onRenderItemColumn, ariaLabel: 'Hover card DetailsList test' })));
};
return HoverCardTargetExample;
}(Utilities_1.BaseComponent));
exports.HoverCardTargetExample = HoverCardTargetExample;
function _buildColumns() {
return DetailsList_1.buildColumns(_items).filter(function (column) { return column.name === 'location' || column.name === 'key'; });
}
});
//# sourceMappingURL=HoverCard.Target.Example.js.map