@atlaskit/editor-common/dist/esm/portal/PortalBucket.js

A package that contains common classes and components for editor and renderer

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useLayoutEffect, useMemo, useState } from 'react';
/**
 * A component for rendering portals managed by a `PortalManager`.
 * It subscribes to a `PortalManager` instance to listen for changes in the portal content
 * and renders the content of its assigned portal bucket.
 *
 * @param {PortalBucketProps} props The component props.
 * @param {number} props.id The ID for the portal bucket. This ID is used by the `PortalManager` to manage the content of this bucket.
 * @param {PortalManager} props.portalManager An instance of `PortalManager` which manages the registration and unregistration of portal buckets and their content.
 * @returns {React.ReactElement} The React element(s) that are currently registered to this portal bucket.
 */
export function PortalBucket(_ref) {
  var id = _ref.id,
    portalManager = _ref.portalManager;
  // State to hold the current portals for this bucket
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    portals = _useState2[0],
    setPortals = _useState2[1];
  // Effect to register/unregister this bucket with the portal manager on mount/unmount
  useLayoutEffect(function () {
    portalManager.registerBucket(id, setPortals);
    return function () {
      portalManager.unregisterBucket(id);
    };
  }, [id, portalManager]);
  // Memoize the portal elements to avoid unnecessary re-renders
  var portalElements = useMemo(function () {
    return Object.values(portals);
  }, [portals]);
  // Render the current portal elements
  return /*#__PURE__*/React.createElement(React.Fragment, null, portalElements);
}