@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
60 lines (59 loc) • 2.39 kB
JavaScript
import React, { useLayoutEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import { PortalBucket } from './PortalBucket';
export function createPortalRendererComponent(portalManager) {
return function PortalRenderer() {
const [buckets, setBuckets] = useState(portalManager.getBuckets());
useLayoutEffect(() => {
portalManager.registerPortalRenderer(setBuckets);
return () => {
portalManager.unregisterPortalRenderer();
};
}, []);
const portalsElements = useMemo(
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
() => buckets.map((_, i) => /*#__PURE__*/React.createElement(PortalBucket, {
key: i,
id: i,
portalManager: portalManager
})), [buckets]);
return /*#__PURE__*/React.createElement(React.Fragment, null, portalsElements);
};
}
/**
* Creates a portal provider for managing multiple React portals. The provider
* facilitates rendering, removing, and destroying portals managed by a given
* PortalManager.
*
* @param {PortalManager} portalManager - An instance of a PortalManager which
* is responsible for registering, managing, and destroying portals.
* @returns {PortalProviderAPI} An object containing methods to render, remove, and destroy
* portals.
* - `render(children, container, key)` Renders a new React portal with the given
* children, mounts it into the specified DOM container, and registers it
* with the PortalManager using a unique key.
* - `remove(key)` Removes a previously rendered portal identified by its key
* and deregisters it from the PortalManager.
* - `destroy()` Clears all portals managed by this provider and invokes the
* destroy method on the PortalManager to clean up any resources.
*
*/
export const getPortalProviderAPI = portalManager => {
const portalsMap = new Map();
return {
render: (children, container, key) => {
const portal = /*#__PURE__*/createPortal(children(), container, key);
portalsMap.set(key, portalManager.registerPortal(key, portal));
},
remove: key => {
var _portalsMap$get;
(_portalsMap$get = portalsMap.get(key)) === null || _portalsMap$get === void 0 ? void 0 : _portalsMap$get();
portalsMap.delete(key);
},
destroy: () => {
portalsMap.clear();
portalManager.destroy();
}
};
};