| 1 | {"version":3,"file":"Layer.base.js","sourceRoot":"../src/","sources":["components/Layer/Layer.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport { Fabric } from '../../Fabric';\nimport { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types';\nimport {\n classNamesFunction,\n customizable,\n getDocument,\n setPortalAttribute,\n setVirtualParent,\n warnDeprecations,\n} from '../../Utilities';\nimport { registerLayer, getDefaultTarget, unregisterLayer } from './Layer.notification';\n\nexport type ILayerBaseState = {\n hostId?: string;\n layerElement?: HTMLElement;\n};\n\nconst getClassNames = classNamesFunction<ILayerStyleProps, ILayerStyles>();\n\n@customizable('Layer', ['theme', 'hostId'])\nexport class LayerBase extends React.Component<ILayerProps, ILayerBaseState> {\n public static defaultProps: ILayerProps = {\n onLayerDidMount: () => undefined,\n onLayerWillUnmount: () => undefined,\n };\n\n private _rootRef = React.createRef<HTMLSpanElement>();\n\n constructor(props: ILayerProps) {\n super(props);\n\n this.state = {};\n\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations('Layer', props, {\n onLayerMounted: 'onLayerDidMount',\n });\n }\n }\n\n public componentDidMount(): void {\n const { hostId } = this.props;\n\n this._createLayerElement();\n\n if (hostId) {\n registerLayer(hostId, this._createLayerElement);\n }\n }\n\n public render(): React.ReactNode {\n const { layerElement } = this.state;\n const classNames = this._getClassNames();\n const { eventBubblingEnabled } = this.props;\n\n return (\n <span className=\"ms-layer\" ref={this._rootRef}>\n {layerElement &&\n ReactDOM.createPortal(\n <Fabric {...(!eventBubblingEnabled && _getFilteredEvents())} className={classNames.content}>\n {this.props.children}\n </Fabric>,\n layerElement,\n )}\n </span>\n );\n }\n\n public componentDidUpdate(): void {\n if (this.props.hostId !== this.state.hostId) {\n this._createLayerElement();\n }\n }\n\n public componentWillUnmount(): void {\n const { hostId } = this.props;\n\n this._removeLayerElement();\n if (hostId) {\n unregisterLayer(hostId, this._createLayerElement);\n }\n }\n\n private _createLayerElement = () => {\n const { hostId } = this.props;\n\n const doc = getDocument(this._rootRef.current);\n const host = this._getHost();\n\n if (!doc || !host) {\n return;\n }\n\n // If one was already existing, remove.\n this._removeLayerElement();\n\n const layerElement = doc.createElement('div');\n const classNames = this._getClassNames();\n\n layerElement.className = classNames.root!;\n setPortalAttribute(layerElement);\n setVirtualParent(layerElement, this._rootRef.current!);\n\n this.props.insertFirst ? host.insertBefore(layerElement, host.firstChild) : host.appendChild(layerElement);\n\n this.setState(\n {\n hostId,\n layerElement,\n },\n () => {\n // eslint-disable-next-line deprecation/deprecation\n const { onLayerDidMount, onLayerMounted } = this.props;\n if (onLayerMounted) {\n onLayerMounted();\n }\n\n if (onLayerDidMount) {\n onLayerDidMount();\n }\n },\n );\n };\n\n private _removeLayerElement(): void {\n const { onLayerWillUnmount } = this.props;\n const { layerElement } = this.state;\n\n if (layerElement) {\n setVirtualParent(layerElement, null);\n }\n\n if (onLayerWillUnmount) {\n onLayerWillUnmount();\n }\n\n if (layerElement && layerElement.parentNode) {\n const parentNode = layerElement.parentNode;\n if (parentNode) {\n parentNode.removeChild(layerElement);\n }\n }\n }\n\n private _getClassNames() {\n const { className, styles, theme } = this.props;\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n isNotHost: !this.props.hostId,\n });\n\n return classNames;\n }\n\n private _getHost(): Node | undefined {\n const { hostId } = this.props;\n const doc = getDocument(this._rootRef.current);\n if (!doc) {\n return undefined;\n }\n\n if (hostId) {\n return doc.getElementById(hostId) as Node;\n } else {\n const defaultHostSelector = getDefaultTarget();\n return defaultHostSelector ? (doc.querySelector(defaultHostSelector) as Node) : doc.body;\n }\n }\n}\n\nconst _onFilterEvent = (ev: React.SyntheticEvent<HTMLElement>): void => {\n // We should just be able to check ev.bubble here and only stop events that are bubbling up. However, even though\n // mouseenter and mouseleave do NOT bubble up, they are showing up as bubbling. Therefore we stop events based on\n // event name rather than ev.bubble.\n if (\n ev.eventPhase === Event.BUBBLING_PHASE &&\n ev.type !== 'mouseenter' &&\n ev.type !== 'mouseleave' &&\n ev.type !== 'touchstart' &&\n ev.type !== 'touchend'\n ) {\n ev.stopPropagation();\n }\n};\n\nlet _filteredEventProps: { [key: string]: (ev: React.SyntheticEvent<HTMLElement, Event>) => void };\n\nfunction _getFilteredEvents() {\n if (!_filteredEventProps) {\n _filteredEventProps = {} as any;\n\n [\n 'onClick',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseUp',\n 'onTouchMove',\n 'onTouchStart',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onFocus',\n 'onBlur',\n 'onChange',\n 'onInput',\n 'onInvalid',\n 'onSubmit',\n ].forEach(name => (_filteredEventProps[name] = _onFilterEvent));\n }\n\n return _filteredEventProps;\n}\n"]} |