@pepperi-addons/ngx-composite-lib-react 0.5.13 → 0.5.16

package/pep-layout2.js

@@ -0,0 +1,145 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom';
+export class PepLayout2 extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.elementRef = React.createRef();
+        this.unsubs = [];
+        this.rootFactoryPromise = null;
+        this.portalRoots = new Map();
+    }
+    componentDidMount() {
+        this.applyPropsToElement();
+        this.bindEvents();
+    }
+    componentDidUpdate(prevProps) {
+        this.applyPropsToElement();
+        const handlersChanged = prevProps.onLayoutViewChange !== this.props.onLayoutViewChange ||
+            prevProps.onScreenTypeChange !== this.props.onScreenTypeChange;
+        if (handlersChanged) {
+            this.unbindEvents();
+            this.bindEvents();
+        }
+    }
+    componentWillUnmount() {
+        this.unbindEvents();
+        this.unmountAllPortals();
+    }
+    getRootFactory() {
+        if (this.rootFactoryPromise) {
+            return this.rootFactoryPromise;
+        }
+        this.rootFactoryPromise = Promise.resolve().then(() => {
+            const win = window;
+            const createRoot = win.ReactDOMClient?.createRoot;
+            if (typeof createRoot === 'function') {
+                return (container) => {
+                    const root = createRoot(container);
+                    return {
+                        render: (node) => root.render(node),
+                        unmount: () => root.unmount(),
+                    };
+                };
+            }
+            return (container) => {
+                return {
+                    render: (node) => ReactDOM.render(_jsx(_Fragment, { children: node }), container),
+                    unmount: () => ReactDOM.unmountComponentAtNode(container),
+                };
+            };
+        });
+        return this.rootFactoryPromise;
+    }
+    async ensurePortalRoot(host) {
+        const existing = this.portalRoots.get(host);
+        if (existing) {
+            return existing;
+        }
+        const createRoot = await this.getRootFactory();
+        const root = createRoot(host);
+        this.portalRoots.set(host, root);
+        return root;
+    }
+    unmountPortal(host) {
+        const existing = this.portalRoots.get(host);
+        if (existing) {
+            existing.unmount();
+            this.portalRoots.delete(host);
+        }
+        while (host.firstChild) {
+            host.removeChild(host.firstChild);
+        }
+    }
+    unmountAllPortals() {
+        this.portalRoots.forEach((root, host) => {
+            root.unmount();
+            while (host.firstChild) {
+                host.removeChild(host.firstChild);
+            }
+        });
+        this.portalRoots.clear();
+    }
+    applyPropsToElement() {
+        const el = this.elementRef.current;
+        if (!el) {
+            return;
+        }
+        const { editorMode, layoutView, renderSkeleton, showSkeleton, blockTemplateRenderer } = this.props;
+        if (editorMode !== undefined)
+            el.editorMode = editorMode;
+        if (layoutView !== undefined)
+            el.layoutView = layoutView;
+        if (renderSkeleton !== undefined)
+            el.renderSkeleton = renderSkeleton;
+        if (showSkeleton !== undefined)
+            el.showSkeleton = showSkeleton;
+        if (blockTemplateRenderer) {
+            el.blockTemplateRenderer = (host, blockKey) => {
+                void this.ensurePortalRoot(host).then((root) => {
+                    root.render(blockTemplateRenderer(blockKey));
+                });
+            };
+            el.blockTemplateUnmount = (host) => {
+                this.unmountPortal(host);
+            };
+        }
+        else {
+            el.blockTemplateRenderer = null;
+            el.blockTemplateUnmount = null;
+        }
+    }
+    bindEvents() {
+        const el = this.elementRef.current;
+        if (!el) {
+            return;
+        }
+        const bind = (name, cb) => {
+            if (!cb)
+                return () => { };
+            const handler = (e) => cb(e.detail);
+            el.addEventListener(name, handler);
+            return () => el.removeEventListener(name, handler);
+        };
+        this.unsubs = [
+            bind('layoutViewChange', this.props.onLayoutViewChange),
+            bind('screenTypeChange', this.props.onScreenTypeChange),
+        ];
+    }
+    unbindEvents() {
+        this.unsubs.forEach((u) => u());
+        this.unsubs = [];
+    }
+    render() {
+        const { blockTemplate, children, className, style } = this.props;
+        const childElements = [];
+        if (blockTemplate) {
+            childElements.push(React.createElement('div', { key: 'block-template', slot: 'blockTemplate' }, blockTemplate));
+        }
+        if (children) {
+            childElements.push(children);
+        }
+        return React.createElement('pep-layout2-element', { ref: this.elementRef, class: className, style }, childElements.length > 0 ? childElements : undefined);
+    }
+}
+//# sourceMappingURL=pep-layout2.js.map