office-ui-fabric-react/lib-es2015/components/HoverCard/examples/HoverCard.Basic.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { HoverCard } from 'office-ui-fabric-react/lib/HoverCard';
import { DetailsList, buildColumns } from 'office-ui-fabric-react/lib/DetailsList';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import { createListItems } from '@uifabric/example-app-base';
import './HoverCard.Example.scss';
var _items;
var HoverCardBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(HoverCardBasicExample, _super);
    function HoverCardBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _items = _items || 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, { 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, { 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, { setKey: 'expandedCardSet', items: items, columns: columns })));
    };
    tslib_1.__decorate([
        autobind
    ], HoverCardBasicExample.prototype, "_onRenderItemColumn", null);
    tslib_1.__decorate([
        autobind
    ], HoverCardBasicExample.prototype, "_onRenderCompactCard", null);
    tslib_1.__decorate([
        autobind
    ], HoverCardBasicExample.prototype, "_onRenderExpandedCard", null);
    return HoverCardBasicExample;
}(BaseComponent));
export { HoverCardBasicExample };
function _buildColumns() {
    return buildColumns(_items).filter(function (column) { return column.name === 'location' || column.name === 'key'; });
}
//# sourceMappingURL=HoverCard.Basic.Example.js.map