office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
101 lines (99 loc) • 5.02 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./ExpandingCard", "./ExpandingCard.Props", "./HoverCard.styles"], function (require, exports, tslib_1, React, Utilities_1, ExpandingCard_1, ExpandingCard_Props_1, HoverCard_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var HoverCard = (function (_super) {
tslib_1.__extends(HoverCard, _super);
// Constructor
function HoverCard(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isHoverCardVisible: false,
mode: ExpandingCard_Props_1.ExpandingCardMode.compact
};
return _this;
}
HoverCard.prototype.componentWillUpdate = function (newProps, newState) {
var _this = this;
if (newState.isHoverCardVisible !== this.state.isHoverCardVisible) {
if (newState.isHoverCardVisible) {
this._async.setTimeout(function () {
_this.setState({
mode: ExpandingCard_Props_1.ExpandingCardMode.expanded
});
}, this.props.expandedCardOpenDelay);
}
else {
this.setState({
mode: ExpandingCard_Props_1.ExpandingCardMode.compact
});
}
}
};
// Render
HoverCard.prototype.render = function () {
var _a = this.props, expandingCardProps = _a.expandingCardProps, children = _a.children, id = _a.id, instantOpenOnClick = _a.instantOpenOnClick, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, customStyles = _a.styles;
var _c = this.state, isHoverCardVisible = _c.isHoverCardVisible, mode = _c.mode;
var hoverCardId = id || Utilities_1.getId('hoverCard');
this._styles = HoverCard_styles_1.getStyles(customStyles);
return (React.createElement("div", { className: Utilities_1.css(this._styles.host), ref: this._resolveRef('_hoverCard'), onFocusCapture: this._cardOpen, onBlurCapture: this._cardDismiss, onMouseEnter: this._cardOpen, onMouseLeave: this._cardDismiss, onClick: instantOpenOnClick && this._instantOpenExpanded, "aria-describedby": setAriaDescribedBy && isHoverCardVisible ? hoverCardId : undefined },
children,
isHoverCardVisible &&
React.createElement(ExpandingCard_1.ExpandingCard, tslib_1.__assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { id: hoverCardId, targetElement: this._getTargetElement(), onEnter: this._cardOpen, onLeave: this._cardDismiss, mode: mode }, expandingCardProps))));
};
HoverCard.prototype._getTargetElement = function () {
return this._hoverCard;
};
// Show HoverCard
HoverCard.prototype._cardOpen = function (ev) {
var _this = this;
this._async.clearTimeout(this._dismissTimerId);
this._openTimerId = this._async.setTimeout(function () {
if (!_this.state.isHoverCardVisible) {
_this.setState({
isHoverCardVisible: true,
mode: ExpandingCard_Props_1.ExpandingCardMode.compact
});
}
}, this.props.cardOpenDelay);
};
// Hide HoverCard
HoverCard.prototype._cardDismiss = function (ev) {
var _this = this;
var eventType = ev.type;
this._async.clearTimeout(this._openTimerId);
this._dismissTimerId = this._async.setTimeout(function () {
if (!(_this.props.sticky && eventType === 'mouseleave')) {
_this.setState({
isHoverCardVisible: false,
mode: ExpandingCard_Props_1.ExpandingCardMode.compact
});
}
}, this.props.cardDismissDelay);
};
// Instant Open the card in Expanded mode
HoverCard.prototype._instantOpenExpanded = function (ev) {
this.setState({
isHoverCardVisible: true,
mode: ExpandingCard_Props_1.ExpandingCardMode.expanded
});
};
return HoverCard;
}(Utilities_1.BaseComponent));
HoverCard.defaultProps = {
cardOpenDelay: 500,
cardDismissDelay: 100,
expandedCardOpenDelay: 1500,
instantOpenOnClick: false
};
tslib_1.__decorate([
Utilities_1.autobind
], HoverCard.prototype, "_cardOpen", null);
tslib_1.__decorate([
Utilities_1.autobind
], HoverCard.prototype, "_cardDismiss", null);
tslib_1.__decorate([
Utilities_1.autobind
], HoverCard.prototype, "_instantOpenExpanded", null);
exports.HoverCard = HoverCard;
});
//# sourceMappingURL=HoverCard.js.map