office-ui-fabric-react/lib-amd/components/HoverCard/examples/HoverCard.Target.Example.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/HoverCard", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/Utilities", "@uifabric/example-app-base", "./HoverCard.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, HoverCard_1, DetailsList_1, Utilities_2, example_app_base_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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_1.HoverCard, { expandingCardProps: this.props.expandingCardProps, target: this.state.contentRendered, cardDismissDelay: 300, onCardVisible: this._log('onCardVisible'), onCardHide: this._log('onCardHide'), trapFocus: true })));
        };
        HoverCardField.prototype._log = function (text) {
            return function () {
                console.log(text);
            };
        };
        return HoverCardField;
    }(Utilities_1.BaseComponent));
    var HoverCardTargetExample = /** @class */ (function (_super) {
        tslib_1.__extends(HoverCardTargetExample, _super);
        function HoverCardTargetExample(props) {
            var _this = _super.call(this, props) || this;
            _items = _items || example_app_base_1.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_1.DetailsList, { setKey: 'hoverSet', items: items, columns: columns, onRenderItemColumn: this._onRenderItemColumn, ariaLabel: 'Hover card DetailsList test' })));
        };
        HoverCardTargetExample.prototype._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];
        };
        HoverCardTargetExample.prototype._onRenderCompactCard = function (item) {
            return (React.createElement("div", { className: 'hoverCardExample-compactCard' },
                React.createElement("a", { target: '_blank', href: "http://wikipedia.org/wiki/" + item.location }, item.location)));
        };
        HoverCardTargetExample.prototype._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 })));
        };
        tslib_1.__decorate([
            Utilities_2.autobind
        ], HoverCardTargetExample.prototype, "_onRenderItemColumn", null);
        tslib_1.__decorate([
            Utilities_2.autobind
        ], HoverCardTargetExample.prototype, "_onRenderCompactCard", null);
        tslib_1.__decorate([
            Utilities_2.autobind
        ], HoverCardTargetExample.prototype, "_onRenderExpandedCard", null);
        return HoverCardTargetExample;
    }(Utilities_1.BaseComponent));
    exports.HoverCardTargetExample = HoverCardTargetExample;
    function _buildColumns() {
        return DetailsList_1.buildColumns(_items).filter(function (column) { return column.name === 'location' || column.name === 'key'; });
    }
});
//# sourceMappingURL=HoverCard.Target.Example.js.map