office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
154 lines • 7.21 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, divProperties, getNativeProps, getId, getDocument, createRef } from '../../Utilities';
import { mergeStyles } from '../../Styling';
import { ExpandingCard } from './ExpandingCard';
import { ExpandingCardMode, OpenCardMode } from './ExpandingCard.types';
import { getStyles } from './HoverCard.styles';
var HoverCard = /** @class */ (function (_super) {
tslib_1.__extends(HoverCard, _super);
// Constructor
function HoverCard(props) {
var _this = _super.call(this, props) || this;
// The wrapping div that gets the hover events
_this._hoverCard = createRef();
// Show HoverCard
_this._cardOpen = function (ev) {
if (_this._shouldBlockHoverCard() || (ev.type === 'keydown' && !(ev.which === _this.props.openHotKey))) {
return;
}
_this._async.clearTimeout(_this._dismissTimerId);
if (ev.type === 'mouseenter') {
_this._currentMouseTarget = ev.currentTarget;
}
_this._executeCardOpen(ev);
};
_this._executeCardOpen = function (ev) {
_this._async.clearTimeout(_this._openTimerId);
_this._openTimerId = _this._async.setTimeout(function () {
_this.setState(function (prevState) {
if (!prevState.isHoverCardVisible) {
return {
isHoverCardVisible: true,
mode: ExpandingCardMode.compact,
openMode: ev.type === 'keydown' ? OpenCardMode.hotKey : OpenCardMode.hover
};
}
return prevState;
});
}, _this.props.cardOpenDelay);
};
// Hide HoverCard
_this._cardDismiss = function (ev) {
if (ev.type === 'keydown' && ev.which !== 27 /* escape */) {
return;
}
// Dismiss if not sticky and currentTarget is the same element that mouse last entered
if (!_this.props.sticky && (_this._currentMouseTarget === ev.currentTarget || ev.which === 27 /* escape */)) {
_this._executeCardDimiss();
}
};
_this._executeCardDimiss = function () {
_this._async.clearTimeout(_this._openTimerId);
_this._async.clearTimeout(_this._dismissTimerId);
_this._dismissTimerId = _this._async.setTimeout(function () {
_this.setState({
isHoverCardVisible: false,
mode: ExpandingCardMode.compact,
openMode: OpenCardMode.hover
});
}, _this.props.cardDismissDelay);
};
_this._instantOpenAsExpanded = function (ev) {
_this._async.clearTimeout(_this._dismissTimerId);
_this.setState(function (prevState) {
if (!prevState.isHoverCardVisible) {
return {
isHoverCardVisible: true,
mode: ExpandingCardMode.expanded
};
}
return prevState;
});
};
_this.state = {
isHoverCardVisible: false,
mode: ExpandingCardMode.compact,
openMode: OpenCardMode.hover
};
return _this;
}
HoverCard.prototype.componentDidMount = function () {
var target = this._getTargetElement();
this._events.on(target, 'mouseenter', this._cardOpen);
this._events.on(target, 'mouseleave', this._cardDismiss);
if (this.props.trapFocus) {
this._events.on(target, 'keydown', this._cardOpen);
}
else {
this._events.on(target, 'focus', this._cardOpen);
this._events.on(target, 'blur', this._cardDismiss);
}
if (this.props.instantOpenOnClick) {
this._events.on(target, 'click', this._instantOpenAsExpanded);
}
else {
this._events.on(target, 'mousedown', this._cardDismiss);
this._events.on(target, 'keydown', this._cardDismiss);
}
};
HoverCard.prototype.componentDidUpdate = function (prevProps, prevState) {
var _this = this;
if (prevState.isHoverCardVisible !== this.state.isHoverCardVisible) {
if (this.state.isHoverCardVisible) {
this._async.setTimeout(function () {
_this.setState({
mode: ExpandingCardMode.expanded
});
}, this.props.expandedCardOpenDelay);
this.props.onCardVisible && this.props.onCardVisible();
}
else {
this.setState({
mode: ExpandingCardMode.compact
});
this.props.onCardHide && this.props.onCardHide();
}
}
};
// Render
HoverCard.prototype.render = function () {
var _a = this.props, expandingCardProps = _a.expandingCardProps, children = _a.children, id = _a.id, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, customStyles = _a.styles;
var _c = this.state, isHoverCardVisible = _c.isHoverCardVisible, mode = _c.mode, openMode = _c.openMode;
var hoverCardId = id || getId('hoverCard');
this._styles = getStyles(customStyles);
return (React.createElement("div", { className: mergeStyles(this._styles.host), ref: this._hoverCard, "aria-describedby": setAriaDescribedBy && isHoverCardVisible ? hoverCardId : undefined, "data-is-focusable": !Boolean(this.props.target) },
children,
isHoverCardVisible && (React.createElement(ExpandingCard, tslib_1.__assign({}, getNativeProps(this.props, divProperties), { id: hoverCardId, trapFocus: !!this.props.trapFocus, firstFocus: this.props.setInitialFocus || openMode === OpenCardMode.hotKey, targetElement: this._getTargetElement(), onEnter: this._cardOpen, onLeave: this._executeCardDimiss, mode: mode }, expandingCardProps)))));
};
HoverCard.prototype._getTargetElement = function () {
var target = this.props.target;
switch (typeof target) {
case 'string':
return getDocument().querySelector(target);
case 'object':
return target;
default:
return this._hoverCard.current || undefined;
}
};
HoverCard.prototype._shouldBlockHoverCard = function () {
return !!(this.props.shouldBlockHoverCard && this.props.shouldBlockHoverCard());
};
HoverCard.defaultProps = {
cardOpenDelay: 500,
cardDismissDelay: 100,
expandedCardOpenDelay: 1500,
instantOpenOnClick: false,
setInitialFocus: false,
openHotKey: 67 /* c */
};
return HoverCard;
}(BaseComponent));
export { HoverCard };
//# sourceMappingURL=HoverCard.js.map