define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/HoverCard", "office-ui-fabric-react/lib/DetailsList", "../../../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 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_1.HoverCard, { id: "myID1", expandingCardProps: expandingCardProps, instantOpenOnClick: true },
                        React.createElement("div", { className: "HoverCard-item", "data-is-focusable": true }, 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_1.DetailsList, { setKey: "expandedCardSet", items: items, columns: columns })));
            };
            _items = _items || exampleData_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 })));
        };
        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