office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
81 lines • 4.86 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, getNativeProps, divProperties, customizable, createRef } from '../../Utilities';
import { ExpandingCardMode } from './ExpandingCard.types';
import { Callout } from '../../Callout';
import { mergeStyles } from '../../Styling';
import { FocusTrapZone } from '../../FocusTrapZone';
import { getStyles } from './ExpandingCard.styles';
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 = createRef();
_this._expandedElem = 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: 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: mergeStyles(_this._styles.expandedCard, _this.props.mode === ExpandingCardMode.expanded &&
_this.state.firstFrameRendered && { height: _this.props.expandedCardHeight + 'px' }), ref: _this._expandedElem },
React.createElement("div", { className: 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 = 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, tslib_1.__assign({}, getNativeProps(this.props, divProperties), { componentRef: this._callout, className: 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, { 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([
customizable('ExpandingCard', ['theme', 'styles'], true)
], ExpandingCard);
return ExpandingCard;
}(BaseComponent));
export { ExpandingCard };
//# sourceMappingURL=ExpandingCard.js.map