define(["require", "exports", "tslib", "react", "../../Utilities", "./ExpandingCard.types", "../../Callout", "../../Styling", "../../FocusTrapZone", "./ExpandingCard.styles"], function (require, exports, tslib_1, React, Utilities_1, ExpandingCard_types_1, Callout_1, Styling_1, FocusTrapZone_1, ExpandingCard_styles_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ExpandingCard = /** @class */ (function (_super) {
        tslib_1.__extends(ExpandingCard, _super);
        function ExpandingCard(props) {
            var _this = _super.call(this, props) || this;
            // tslint:disable-next-line:no-unused-variable
            _this._callout = Utilities_1.createRef();
            _this._expandedElem = Utilities_1.createRef();
            _this._onKeyDown = function (ev) {
                if (ev.which === 27 /* escape */) {
                    _this.props.onLeave && _this.props.onLeave(ev);
                }
            };
            _this._onRenderCompactCard = function () {
                return (React.createElement("div", { className: Styling_1.mergeStyles(_this._styles.compactCard, { height: _this.props.compactCardHeight + 'px' }) }, _this.props.onRenderCompactCard(_this.props.renderData)));
            };
            _this._onRenderExpandedCard = function () {
                // firstFrameRendered helps in initially setting height of expanded card to 1px, even if
                // mode prop is set to ExpandingCardMode.expanded on first render. This is to make sure transition animation takes place.
                !_this.state.firstFrameRendered &&
                    _this._async.requestAnimationFrame(function () {
                        _this.setState({
                            firstFrameRendered: true
                        });
                    });
                return (React.createElement("div", { className: Styling_1.mergeStyles(_this._styles.expandedCard, _this.props.mode === ExpandingCard_types_1.ExpandingCardMode.expanded &&
                        _this.state.firstFrameRendered && { height: _this.props.expandedCardHeight + 'px' }), ref: _this._expandedElem },
                    React.createElement("div", { className: Styling_1.mergeStyles(_this.state.needsScroll && _this._styles.expandedCardScroll) }, _this.props.onRenderExpandedCard && _this.props.onRenderExpandedCard(_this.props.renderData))));
            };
            _this._checkNeedsScroll = function () {
                if (_this._expandedElem.current) {
                    _this._async.requestAnimationFrame(function () {
                        if (_this._expandedElem.current && _this._expandedElem.current.scrollHeight >= _this.props.expandedCardHeight) {
                            _this.setState({
                                needsScroll: true
                            });
                        }
                    });
                }
            };
            _this.state = {
                firstFrameRendered: false,
                needsScroll: false
            };
            return _this;
        }
        ExpandingCard.prototype.componentDidMount = function () {
            this._checkNeedsScroll();
        };
        ExpandingCard.prototype.componentWillUnmount = function () {
            this._async.dispose();
        };
        ExpandingCard.prototype.render = function () {
            var _a = this.props, targetElement = _a.targetElement, theme = _a.theme, customStyles = _a.styles, compactCardHeight = _a.compactCardHeight, directionalHintFixed = _a.directionalHintFixed, firstFocus = _a.firstFocus, expandedCardHeight = _a.expandedCardHeight;
            this._styles = ExpandingCard_styles_1.getStyles(theme, customStyles);
            var content = (React.createElement("div", { onMouseEnter: this.props.onEnter, onMouseLeave: this.props.onLeave, onKeyDown: this._onKeyDown },
                this._onRenderCompactCard(),
                this._onRenderExpandedCard()));
            return (React.createElement(Callout_1.Callout, tslib_1.__assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { componentRef: this._callout, className: Styling_1.mergeStyles(this._styles.root), target: targetElement, isBeakVisible: false, directionalHint: this.props.directionalHint, directionalHintFixed: directionalHintFixed, finalHeight: compactCardHeight + expandedCardHeight, minPagePadding: 24, onDismiss: this.props.onLeave, gapSpace: this.props.gapSpace }), this.props.trapFocus ? (React.createElement(FocusTrapZone_1.FocusTrapZone, { forceFocusInsideTrap: false, isClickableOutsideFocusTrap: true, disableFirstFocus: !firstFocus }, content)) : (content)));
        };
        ExpandingCard.defaultProps = {
            compactCardHeight: 156,
            expandedCardHeight: 384,
            directionalHint: 4 /* bottomLeftEdge */,
            directionalHintFixed: true,
            gapSpace: 0
        };
        ExpandingCard = tslib_1.__decorate([
            Utilities_1.customizable('ExpandingCard', ['theme', 'styles'])
        ], ExpandingCard);
        return ExpandingCard;
    }(Utilities_1.BaseComponent));
    exports.ExpandingCard = ExpandingCard;
});
//# sourceMappingURL=ExpandingCard.js.map