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

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
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 { createListItems } from 'office-ui-fabric-react/lib/utilities/exampleData';
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;
        _this._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];
        };
        _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, { setKey: "expandedCardSet", items: items, columns: columns })));
        };
        _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 the ",
                React.createElement("i", null, "location"),
                " 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, the card will open but navigation inside of it will not be available."),
            React.createElement(DetailsList, { setKey: "hoverSet", items: items, columns: columns, onRenderItemColumn: this._onRenderItemColumn })));
    };
    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