| 1 | import * as React from 'react';
|
|---|
| 2 | import { useLayoutEffect, useRef } from 'react';
|
|---|
| 3 | import { useAppDispatch, useAppSelector } from '../state/hooks';
|
|---|
| 4 | import { registerZIndexPortalElement, unregisterZIndexPortalElement } from '../state/zIndexSlice';
|
|---|
| 5 | import { selectAllRegisteredZIndexes } from './zIndexSelectors';
|
|---|
| 6 | function ZIndexSvgPortal(_ref) {
|
|---|
| 7 | var {
|
|---|
| 8 | zIndex,
|
|---|
| 9 | isPanorama
|
|---|
| 10 | } = _ref;
|
|---|
| 11 | var ref = useRef(null);
|
|---|
| 12 | var dispatch = useAppDispatch();
|
|---|
| 13 | useLayoutEffect(() => {
|
|---|
| 14 | if (ref.current) {
|
|---|
| 15 | dispatch(registerZIndexPortalElement({
|
|---|
| 16 | zIndex,
|
|---|
| 17 | element: ref.current,
|
|---|
| 18 | isPanorama
|
|---|
| 19 | }));
|
|---|
| 20 | }
|
|---|
| 21 | return () => {
|
|---|
| 22 | dispatch(unregisterZIndexPortalElement({
|
|---|
| 23 | zIndex,
|
|---|
| 24 | isPanorama
|
|---|
| 25 | }));
|
|---|
| 26 | };
|
|---|
| 27 | }, [dispatch, zIndex, isPanorama]);
|
|---|
| 28 | // these g elements should not be tabbable
|
|---|
| 29 | return /*#__PURE__*/React.createElement("g", {
|
|---|
| 30 | tabIndex: -1,
|
|---|
| 31 | ref: ref
|
|---|
| 32 | });
|
|---|
| 33 | }
|
|---|
| 34 | export function AllZIndexPortals(_ref2) {
|
|---|
| 35 | var {
|
|---|
| 36 | children,
|
|---|
| 37 | isPanorama
|
|---|
| 38 | } = _ref2;
|
|---|
| 39 | var allRegisteredZIndexes = useAppSelector(selectAllRegisteredZIndexes);
|
|---|
| 40 | if (!allRegisteredZIndexes || allRegisteredZIndexes.length === 0) {
|
|---|
| 41 | return children;
|
|---|
| 42 | }
|
|---|
| 43 | var allNegativeZIndexes = allRegisteredZIndexes.filter(zIndex => zIndex < 0);
|
|---|
| 44 | // We exclude zero on purpose - that is the default layer, and it doesn't need a portal.
|
|---|
| 45 | var allPositiveZIndexes = allRegisteredZIndexes.filter(zIndex => zIndex > 0);
|
|---|
| 46 | return /*#__PURE__*/React.createElement(React.Fragment, null, allNegativeZIndexes.map(zIndex => /*#__PURE__*/React.createElement(ZIndexSvgPortal, {
|
|---|
| 47 | key: zIndex,
|
|---|
| 48 | zIndex: zIndex,
|
|---|
| 49 | isPanorama: isPanorama
|
|---|
| 50 | })), children, allPositiveZIndexes.map(zIndex => /*#__PURE__*/React.createElement(ZIndexSvgPortal, {
|
|---|
| 51 | key: zIndex,
|
|---|
| 52 | zIndex: zIndex,
|
|---|
| 53 | isPanorama: isPanorama
|
|---|
| 54 | })));
|
|---|
| 55 | } |
|---|