office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
183 lines • 7.42 kB
JavaScript
import { __assign, __decorate, __extends } from "tslib";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from '../../Fabric';
import { classNamesFunction, customizable, getDocument, setPortalAttribute, setVirtualParent, warnDeprecations, } from '../../Utilities';
import { registerLayer, getDefaultTarget, unregisterLayer, getLayerHost } from './Layer.notification';
var getClassNames = classNamesFunction();
var LayerBase = /** @class */ (function (_super) {
__extends(LayerBase, _super);
function LayerBase(props) {
var _this = _super.call(this, props) || this;
_this._rootRef = React.createRef();
_this._createLayerElement = function () {
var _a, _b;
var hostId = _this.props.hostId;
var doc = getDocument(_this._rootRef.current);
var host = _this._getHost();
if (!host) {
return;
}
// If one was already existing, remove.
_this._removeLayerElement();
// eslint-disable-next-line deprecation/deprecation
var layerElement = (_b = (_a = host.ownerDocument, (_a !== null && _a !== void 0 ? _a : doc))) === null || _b === void 0 ? void 0 : _b.createElement('div');
if (layerElement) {
var classNames = _this._getClassNames();
layerElement.className = classNames.root;
setPortalAttribute(layerElement);
setVirtualParent(layerElement, _this._rootRef.current);
_this.props.insertFirst ? host.insertBefore(layerElement, host.firstChild) : host.appendChild(layerElement);
_this.setState({
hostId: hostId,
layerElement: layerElement,
}, function () {
// eslint-disable-next-line deprecation/deprecation
var _a = _this.props, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted;
if (onLayerMounted) {
onLayerMounted();
}
if (onLayerDidMount) {
onLayerDidMount();
}
});
}
};
_this.state = {};
if (process.env.NODE_ENV !== 'production') {
warnDeprecations('Layer', props, {
onLayerMounted: 'onLayerDidMount',
});
}
return _this;
}
LayerBase.prototype.componentDidMount = function () {
var hostId = this.props.hostId;
this._createLayerElement();
if (hostId) {
registerLayer(hostId, this._createLayerElement);
}
};
LayerBase.prototype.render = function () {
var layerElement = this.state.layerElement;
var classNames = this._getClassNames();
var eventBubblingEnabled = this.props.eventBubblingEnabled;
return (React.createElement("span", { className: "ms-layer", ref: this._rootRef }, layerElement &&
ReactDOM.createPortal(React.createElement(Fabric, __assign({}, (!eventBubblingEnabled && _getFilteredEvents()), { className: classNames.content }), this.props.children), layerElement)));
};
LayerBase.prototype.componentDidUpdate = function () {
if (this.props.hostId !== this.state.hostId) {
this._createLayerElement();
}
};
LayerBase.prototype.componentWillUnmount = function () {
var hostId = this.props.hostId;
this._removeLayerElement();
if (hostId) {
unregisterLayer(hostId, this._createLayerElement);
}
};
LayerBase.prototype._removeLayerElement = function () {
var onLayerWillUnmount = this.props.onLayerWillUnmount;
var layerElement = this.state.layerElement;
if (layerElement) {
setVirtualParent(layerElement, null);
}
if (onLayerWillUnmount) {
onLayerWillUnmount();
}
if (layerElement && layerElement.parentNode) {
var parentNode = layerElement.parentNode;
if (parentNode) {
parentNode.removeChild(layerElement);
}
}
};
LayerBase.prototype._getClassNames = function () {
var _a = this.props, className = _a.className, styles = _a.styles, theme = _a.theme;
var classNames = getClassNames(styles, {
theme: theme,
className: className,
isNotHost: !this.props.hostId,
});
return classNames;
};
LayerBase.prototype._getHost = function () {
var _a, _b, _c, _d, _e, _f;
var hostId = this.props.hostId;
var doc = getDocument(this._rootRef.current);
if (hostId) {
var layerHost = getLayerHost(hostId);
if (layerHost) {
return _a = layerHost.rootRef.current, (_a !== null && _a !== void 0 ? _a : null);
}
return _c = (_b = doc) === null || _b === void 0 ? void 0 : _b.getElementById(hostId), (_c !== null && _c !== void 0 ? _c : null);
}
else {
var defaultHostSelector = getDefaultTarget();
return _f = (defaultHostSelector ? (_d = doc) === null || _d === void 0 ? void 0 : _d.querySelector(defaultHostSelector) : (_e = doc) === null || _e === void 0 ? void 0 : _e.body), (_f !== null && _f !== void 0 ? _f : null);
}
};
LayerBase.defaultProps = {
onLayerDidMount: function () { return undefined; },
onLayerWillUnmount: function () { return undefined; },
};
LayerBase = __decorate([
customizable('Layer', ['theme', 'hostId'])
], LayerBase);
return LayerBase;
}(React.Component));
export { LayerBase };
var _onFilterEvent = function (ev) {
// We should just be able to check ev.bubble here and only stop events that are bubbling up. However, even though
// mouseenter and mouseleave do NOT bubble up, they are showing up as bubbling. Therefore we stop events based on
// event name rather than ev.bubble.
if (ev.eventPhase === Event.BUBBLING_PHASE &&
ev.type !== 'mouseenter' &&
ev.type !== 'mouseleave' &&
ev.type !== 'touchstart' &&
ev.type !== 'touchend') {
ev.stopPropagation();
}
};
var _filteredEventProps;
function _getFilteredEvents() {
if (!_filteredEventProps) {
_filteredEventProps = {};
[
'onClick',
'onContextMenu',
'onDoubleClick',
'onDrag',
'onDragEnd',
'onDragEnter',
'onDragExit',
'onDragLeave',
'onDragOver',
'onDragStart',
'onDrop',
'onMouseDown',
'onMouseEnter',
'onMouseLeave',
'onMouseMove',
'onMouseOver',
'onMouseOut',
'onMouseUp',
'onTouchMove',
'onTouchStart',
'onTouchCancel',
'onTouchEnd',
'onKeyDown',
'onKeyPress',
'onKeyUp',
'onFocus',
'onBlur',
'onChange',
'onInput',
'onInvalid',
'onSubmit',
].forEach(function (name) { return (_filteredEventProps[name] = _onFilterEvent); });
}
return _filteredEventProps;
}
//# sourceMappingURL=Layer.base.js.map