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 '../../../utilities/exampleData';
import './HoverCard.Example.scss';
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, { 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;
}(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, { setKey: "expandedCardSet", items: items, columns: columns })));
        };
        _items = _items || 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 key of a row item to see the card "),
            React.createElement(DetailsList, { setKey: "hoverSet", items: items, columns: columns, onRenderItemColumn: this._onRenderItemColumn, ariaLabel: 'Hover card DetailsList test' })));
    };
    return HoverCardTargetExample;
}(BaseComponent));
export { HoverCardTargetExample };
function _buildColumns() {
    return buildColumns(_items).filter(function (column) { return column.name === 'location' || column.name === 'key'; });
}
//# sourceMappingURL=HoverCard.Target.Example.js.map