office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
68 lines • 3.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var HoverCard_1 = require("office-ui-fabric-react/lib/HoverCard");
var DetailsList_1 = require("office-ui-fabric-react/lib/DetailsList");
var Utilities_2 = require("office-ui-fabric-react/lib/Utilities");
var example_app_base_1 = require("@uifabric/example-app-base");
require("./HoverCard.Example.scss");
var _items;
var HoverCardBasicExample = (function (_super) {
tslib_1.__extends(HoverCardBasicExample, _super);
function HoverCardBasicExample(props) {
var _this = _super.call(this, props) || this;
_items = _items || example_app_base_1.createListItems(10);
_this.state = {
items: _items,
columns: _buildColumns()
};
return _this;
}
HoverCardBasicExample.prototype.render = function () {
var _a = this.state, items = _a.items, columns = _a.columns;
return (React.createElement("div", null,
React.createElement("p", null, " Hover over location of a row item to see the card "),
React.createElement(DetailsList_1.DetailsList, { setKey: 'hoverSet', items: items, columns: columns, onRenderItemColumn: this._onRenderItemColumn })));
};
HoverCardBasicExample.prototype._onRenderItemColumn = function (item, index, column) {
var expandingCardProps = {
onRenderCompactCard: this._onRenderCompactCard,
onRenderExpandedCard: this._onRenderExpandedCard,
renderData: item
};
if (column.key === 'location') {
return (React.createElement(HoverCard_1.HoverCard, { id: 'myID1', expandingCardProps: expandingCardProps, instantOpenOnClick: true },
React.createElement("div", { className: 'HoverCard-item' }, item.location)));
}
return item[column.key];
};
HoverCardBasicExample.prototype._onRenderCompactCard = function (item) {
return (React.createElement("div", { className: 'hoverCardExample-compactCard' },
React.createElement("a", { target: '_blank', href: "http://wikipedia.org/wiki/" + item.location }, item.location)));
};
HoverCardBasicExample.prototype._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 })));
};
tslib_1.__decorate([
Utilities_2.autobind
], HoverCardBasicExample.prototype, "_onRenderItemColumn", null);
tslib_1.__decorate([
Utilities_2.autobind
], HoverCardBasicExample.prototype, "_onRenderCompactCard", null);
tslib_1.__decorate([
Utilities_2.autobind
], HoverCardBasicExample.prototype, "_onRenderExpandedCard", null);
return HoverCardBasicExample;
}(Utilities_1.BaseComponent));
exports.HoverCardBasicExample = HoverCardBasicExample;
function _buildColumns() {
return DetailsList_1.buildColumns(_items).filter(function (column) { return column.name === 'location' || column.name === 'key'; });
}
//# sourceMappingURL=HoverCard.Basic.Example.js.map