"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HoverCardPlainCardExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var example_data_1 = require("@fluentui/example-data");
var itemClass = react_1.mergeStyles({
    selectors: {
        '&:hover': {
            textDecoration: 'underline',
            cursor: 'pointer',
        },
    },
});
var items = example_data_1.createListItems(10);
var buildColumn = function () {
    return react_1.buildColumns(items).filter(function (column) { return column.name === 'color' || column.name === 'width' || column.name === 'height'; });
};
var columns = buildColumn();
var onRenderPlainCard = function (item) {
    var src = item.thumbnail + ("/" + react_1.getColorFromString(item.color).hex);
    return React.createElement(react_1.Image, { src: src, width: item.width, height: item.height, imageFit: react_1.ImageFit.cover });
};
var onRenderItemColumn = function (item, index, column) {
    var plainCardProps = {
        onRenderPlainCard: onRenderPlainCard,
        renderData: item,
    };
    if (column.key === 'color') {
        return (React.createElement(react_1.HoverCard, { plainCardProps: plainCardProps, instantOpenOnClick: true, type: react_1.HoverCardType.plain },
            React.createElement("div", { className: itemClass, style: { color: item.color } }, item.color)));
    }
    return item[column.key];
};
var HoverCardPlainCardExample = function () {
    return (React.createElement(react_1.ThemeProvider, null,
        React.createElement("p", null,
            "Hover over the ",
            React.createElement("i", null, "color"),
            " cell of a row item to see the card."),
        React.createElement(react_1.DetailsList, { setKey: "hoverSet", items: items, columns: columns, onRenderItemColumn: onRenderItemColumn })));
};
exports.HoverCardPlainCardExample = HoverCardPlainCardExample;
//# sourceMappingURL=HoverCard.PlainCard.Example.js.map