"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HoverCardTargetExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var example_data_1 = require("@fluentui/example-data");
var react_hooks_1 = require("@fluentui/react-hooks");
var classNames = react_1.mergeStyleSets({
    compactCard: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
    },
    expandedCard: {
        padding: '16px 24px',
    },
    item: {
        selectors: {
            '&:hover': {
                textDecoration: 'underline',
                cursor: 'pointer',
            },
        },
    },
});
var log = function (text) {
    return function () {
        console.log(text);
    };
};
var items = example_data_1.createListItems(10);
var columns = react_1.buildColumns(items).filter(function (column) { return column.name === 'location' || column.name === 'key'; });
var onRenderCompactCard = function (item) {
    return (React.createElement("div", { className: classNames.compactCard },
        React.createElement("a", { target: "_blank", href: "http://wikipedia.org/wiki/" + item.location }, item.location)));
};
var onRenderExpandedCard = function (item) {
    return (React.createElement("div", { className: classNames.expandedCard },
        item.description,
        React.createElement(react_1.DetailsList, { setKey: "expandedCardSet", items: items, columns: columns })));
};
/**
 * Used for the hoverable "key" cell. In this case, the implementation uses hooks to control
 * open/closed state, so it must be a function component (not just code within a render callback).
 */
var KeyCellWithHoverCard = function (_a) {
    var item = _a.item;
    var _b = react_hooks_1.useBoolean(false), contentRendered = _b[0], toggleContentRendered = _b[1].toggle;
    var targetElementRef = React.useRef(null);
    var expandingCardProps = react_hooks_1.useConst({
        onRenderCompactCard: onRenderCompactCard,
        onRenderExpandedCard: onRenderExpandedCard,
        renderData: item,
        directionalHint: react_1.DirectionalHint.rightTopEdge,
        gapSpace: 16,
        calloutProps: {
            isBeakVisible: true,
        },
    });
    React.useEffect(toggleContentRendered, [toggleContentRendered]);
    return (React.createElement("div", { className: classNames.item },
        React.createElement("div", { ref: targetElementRef, "data-is-focusable": true },
            item.key,
            contentRendered && (React.createElement(react_1.HoverCard, { expandingCardProps: expandingCardProps, target: targetElementRef.current, cardDismissDelay: 300, onCardVisible: log('onCardVisible'), onCardHide: log('onCardHide'), trapFocus: true, openHotKey: react_1.KeyCodes.enter })))));
};
var onRenderItemColumn = function (item, index, column) {
    if (column.key === 'key') {
        return React.createElement(KeyCellWithHoverCard, { item: item });
    }
    return item[column.key];
};
var HoverCardTargetExample = function () {
    return (React.createElement(react_1.ThemeProvider, null,
        React.createElement("p", null,
            "Hover over the ",
            React.createElement("strong", null, "key"),
            " cell of a row item to see the card or use the keyboard to navigate to it by tabbing to a row and hitting the right arrow key."),
        React.createElement("p", null,
            "When using the keyboard to navigate, open the card with the hotkey and it will automatically focus the first focusable element in the card allowing further navigation inside the card. The hotkey is defined by the",
            ' ',
            React.createElement("code", null, "openHotKey"),
            " prop and is defined as 'enter' in the following example."),
        React.createElement(react_1.DetailsList, { setKey: "hoverSet", items: items, columns: columns, onRenderItemColumn: onRenderItemColumn, ariaLabel: "Hover card DetailsList test" })));
};
exports.HoverCardTargetExample = HoverCardTargetExample;
//# sourceMappingURL=HoverCard.Target.Example.js.map