flipper-plugin
Version:
Flipper Desktop plugin SDK and components
50 lines • 1.97 kB
JavaScript
;
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports._PortalsManager = exports.renderReactRoot = void 0;
const atom_1 = require("../state/atom");
const react_1 = __importDefault(require("react"));
const react_dom_1 = require("react-dom");
/**
* This utility creates a fresh react render hook, which is great to render elements imperatively, like opening dialogs.
* Make sure to call `unmount` to cleanup after the rendering becomes irrelevant
*/
function renderReactRoot(handler) {
// TODO: find a way to make this visible in unit tests as well
const div = document.body.appendChild(document.createElement('div'));
const unmount = () => {
portals.update((draft) => {
draft.delete(id);
});
(0, react_dom_1.unmountComponentAtNode)(div);
div.remove();
};
const id = ++portalId;
const portal = (0, react_dom_1.createPortal)(handler(unmount), div);
portals.update((draft) => {
draft.set(id, portal);
});
return unmount;
}
exports.renderReactRoot = renderReactRoot;
let portalId = 0;
const portals = (0, atom_1.createState)(new Map());
/**
* This is a dummy component, that just makes sure react roots are managed within a certain node in the main React tree, so that context etc is available.
*/
function _PortalsManager() {
const portalElements = (0, atom_1.useValue)(portals);
return react_1.default.createElement(react_1.default.Fragment, null, Array.from(portalElements).map(([_id, portal]) => portal));
}
exports._PortalsManager = _PortalsManager;
//# sourceMappingURL=renderReactRoot.js.map