text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var React = require("react");
  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 example_app_base_1 = require("@uifabric/example-app-base");
  require("./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_1.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_1.DetailsList, { setKey: 'expandedCardSet', items: items, columns: columns })));
          };
          _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 })));
      };
      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