office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
80 lines (78 loc) • 4.95 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./ExpandingCard.Props", "../../Callout", "../../common/DirectionalHint", "../../Styling", "./ExpandingCard.styles"], function (require, exports, tslib_1, React, Utilities_1, ExpandingCard_Props_1, Callout_1, DirectionalHint_1, Styling_1, ExpandingCard_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ExpandingCard = (function (_super) {
tslib_1.__extends(ExpandingCard, _super);
function ExpandingCard(props) {
var _this = _super.call(this, props) || this;
_this.state = {
firstFrameRendered: false,
needsScroll: false
};
return _this;
}
ExpandingCard.prototype.componentDidMount = function () {
if (this._expandedElem && this._expandedElem.scrollHeight >= this.props.expandedCardHeight) {
this.setState({
needsScroll: true
});
}
};
ExpandingCard.prototype.componentWillUnmount = function () {
this._async.dispose();
};
ExpandingCard.prototype.render = function () {
var _a = this.props, targetElement = _a.targetElement, id = _a.id, theme = _a.theme, customStyles = _a.styles, onRenderCompactCard = _a.onRenderCompactCard, onRenderExpandedCard = _a.onRenderExpandedCard, compactCardHeight = _a.compactCardHeight, expandedCardHeight = _a.expandedCardHeight;
this._styles = ExpandingCard_styles_1.getStyles(theme, customStyles);
return (React.createElement(Callout_1.Callout, tslib_1.__assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { componentRef: this._resolveRef('_callout'), className: Utilities_1.css(Styling_1.AnimationClassNames.scaleUpIn100, this._styles.root), targetElement: targetElement, isBeakVisible: false, directionalHint: Utilities_1.getRTL() ? DirectionalHint_1.DirectionalHint.bottomRightEdge : DirectionalHint_1.DirectionalHint.bottomLeftEdge, directionalHintFixed: true, finalHeight: compactCardHeight + expandedCardHeight, minPagePadding: 24 }),
React.createElement("div", { onFocusCapture: this.props.onEnter, onBlurCapture: this.props.onLeave, onMouseEnter: this.props.onEnter, onMouseLeave: this.props.onLeave },
this._onRenderCompactCard(),
this._onRenderExpandedCard())));
};
ExpandingCard.prototype._onRenderCompactCard = function () {
return (React.createElement("div", { className: Styling_1.mergeStyles(this._styles.compactCard, { height: this.props.compactCardHeight + 'px' }) }, this.props.onRenderCompactCard(this.props.renderData)));
};
ExpandingCard.prototype._onRenderExpandedCard = function () {
var _this = this;
// firstFrameRendered helps in initially setting height of expanded card to 0, even if
// mode prop is set to ExpandingCardMode.expanded on first render. This is to make sure transition animation takes place.
this._async.requestAnimationFrame(function () {
_this.setState({
firstFrameRendered: true
});
});
return (React.createElement("div", { className: Styling_1.mergeStyles(this._styles.expandedCard, this.props.mode === ExpandingCard_Props_1.ExpandingCardMode.expanded && this.state.firstFrameRendered && { height: this.props.expandedCardHeight + 'px' }, this.state.needsScroll && { 'overflow-y': 'auto' }), ref: this._resolveRef('_expandedElem') }, this.props.onRenderExpandedCard && this.props.onRenderExpandedCard(this.props.renderData)));
};
ExpandingCard.prototype._checkNeedsScroll = function () {
var _this = this;
if (this._expandedElem) {
this._async.requestAnimationFrame(function () {
if (_this._expandedElem.scrollHeight >= _this.props.expandedCardHeight) {
_this.setState({
needsScroll: true
});
}
});
}
};
return ExpandingCard;
}(Utilities_1.BaseComponent));
ExpandingCard.defaultProps = {
compactCardHeight: 156,
expandedCardHeight: 384
};
tslib_1.__decorate([
Utilities_1.autobind
], ExpandingCard.prototype, "_onRenderCompactCard", null);
tslib_1.__decorate([
Utilities_1.autobind
], ExpandingCard.prototype, "_onRenderExpandedCard", null);
tslib_1.__decorate([
Utilities_1.autobind
], ExpandingCard.prototype, "_checkNeedsScroll", null);
ExpandingCard = tslib_1.__decorate([
Utilities_1.customizable(['theme'])
], ExpandingCard);
exports.ExpandingCard = ExpandingCard;
});
//# sourceMappingURL=ExpandingCard.js.map