flexlayout-react 0.7.15 → 0.8.0

package/src/view/FloatingWindow.tsx

@@ -1,140 +0,0 @@
-import * as React from "react";
-import { createPortal } from "react-dom";
-import { Rect } from "../Rect";
-import { CLASSES } from "../Types";
-
-/** @internal */
-export interface IFloatingWindowProps {
-    title: string;
-    id: string;
-    url: string;
-    rect: Rect | null;
-    onCloseWindow: (id: string) => void;
-    onSetWindow: (id: string, window: Window) => void;
-}
-
-interface IStyleSheet {
-    href: string | null;
-    type: string;
-    rules: string[] | null;
-}
-
-/** @internal */
-export const FloatingWindow = (props: React.PropsWithChildren<IFloatingWindowProps>) => {
-    const { title, id, url, rect, onCloseWindow, onSetWindow, children } = props;
-    const popoutWindow = React.useRef<Window | null>(null);
-    const timerId = React.useRef<any>(null);
-    const [content, setContent] = React.useState<HTMLElement | undefined>(undefined);
-
-    React.useLayoutEffect(() => {
-        if (timerId.current) {
-            clearTimeout(timerId.current);
-        }
-        let isMounted = true;
-        const r = rect || new Rect(0, 0, 100, 100);
-        // Make a local copy of the styles from the current window which will be passed into
-        // the floating window. window.document.styleSheets is mutable and we can't guarantee
-        // the styles will exist when 'popoutWindow.load' is called below.
-        const styles = Array.from(window.document.styleSheets).reduce((result, styleSheet) => {
-            let rules: CSSRuleList | undefined = undefined;
-            try {
-                rules = styleSheet.cssRules;
-            } catch (e) {
-                // styleSheet.cssRules can throw security exception
-            }
-
-            try {
-                return [
-                    ...result,
-                    {
-                        href: styleSheet.href,
-                        type: styleSheet.type,
-                        rules: rules ? Array.from(rules).map(rule => rule.cssText) : null,
-                    }
-                ];
-            } catch (e) {
-                return result;
-            }
-        }, [] as IStyleSheet[]);
-        popoutWindow.current = window.open(url, id, `left=${r.x},top=${r.y},width=${r.width},height=${r.height}`);
-        if (popoutWindow.current !== null) {
-            onSetWindow(id, popoutWindow.current);
-
-            // listen for parent unloading to remove all popouts
-            window.addEventListener("beforeunload", () => {
-                if (popoutWindow.current) {
-                    popoutWindow.current.close();
-                    popoutWindow.current = null;
-                }
-            });
-
-            popoutWindow.current.addEventListener("load", () => {
-                if (isMounted) {
-                    const popoutDocument = popoutWindow.current!.document;
-                    popoutDocument.title = title;
-                    const popoutContent = popoutDocument.createElement("div");
-                    popoutContent.className = CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;
-                    popoutDocument.body.appendChild(popoutContent);
-                    copyStyles(popoutDocument, styles).then(() => {
-                        setContent(popoutContent);
-                    });
-
-                    // listen for popout unloading (needs to be after load for safari)
-                    popoutWindow.current!.addEventListener("beforeunload", () => {
-                        onCloseWindow(id);
-                    });
-                }
-            });
-        } else {
-            console.warn(`Unable to open window ${url}`);
-            onCloseWindow(id);
-        }
-
-        return () => {
-            isMounted = false;
-            // delay so refresh will close window
-            timerId.current = setTimeout(() => {
-                if (popoutWindow.current) {
-                    popoutWindow.current.close();
-                    popoutWindow.current = null;
-                }
-            }, 0);
-        };
-    }, []);
-
-    if (content !== undefined) {
-        return createPortal(children, content!);
-    } else {
-        return null;
-    }
-};
-
-/** @internal */
-function copyStyles(doc: Document, styleSheets: IStyleSheet[]): Promise<boolean[]> {
-    const head = doc.head;
-    const promises: Promise<boolean>[] = [];
-    for (const styleSheet of styleSheets) {
-        if (styleSheet.href) {
-            // prefer links since they will keep paths to images etc
-            const styleElement = doc.createElement("link");
-            styleElement.type = styleSheet.type;
-            styleElement.rel = "stylesheet";
-            styleElement.href = styleSheet.href!;
-            head.appendChild(styleElement);
-            promises.push(
-                new Promise((resolve) => {
-                    styleElement.onload = () => resolve(true);
-                })
-            );
-        } else {
-            if (styleSheet.rules) {
-                const style = doc.createElement("style");
-                for (const rule of styleSheet.rules) {
-                    style.appendChild(doc.createTextNode(rule));
-                }
-                head.appendChild(style);
-            }
-        }
-    }
-    return Promise.all(promises);
-}

package/src/view/FloatingWindowTab.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { TabNode } from "../model/TabNode";
-import { ILayoutCallbacks } from "./Layout";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { I18nLabel } from "../I18nLabel";
-import { Fragment } from "react";
-import { CLASSES } from "../Types";
-
-/** @internal */
-export interface IFloatingWindowTabProps {
-    layout: ILayoutCallbacks;
-    node: TabNode;
-    factory: (node: TabNode) => React.ReactNode;
-}
-
-/** @internal */
-export const FloatingWindowTab = (props: IFloatingWindowTabProps) => {
-    const { layout, node, factory } = props;
-    const cm = layout.getClassName;
-    const child = factory(node);
-
-    return (
-        <div className={cm(CLASSES.FLEXLAYOUT__FLOATING_WINDOW_TAB)}>
-            <ErrorBoundary message={props.layout.i18nName(I18nLabel.Error_rendering_component)}>
-                <Fragment>{child}</Fragment>
-            </ErrorBoundary>
-        </div>
-    );
-};

package/src/view/TabFloating.tsx

@@ -1,101 +0,0 @@
-import * as React from "react";
-import { Actions } from "../model/Actions";
-import { TabNode } from "../model/TabNode";
-import { TabSetNode } from "../model/TabSetNode";
-import { CLASSES } from "../Types";
-import { ILayoutCallbacks } from "./Layout";
-import { I18nLabel } from "../I18nLabel";
-import { hideElement } from "./Utils";
-import { BorderNode } from "../model/BorderNode";
-
-/** @internal */
-export interface ITabFloatingProps {
-    layout: ILayoutCallbacks;
-    selected: boolean;
-    node: TabNode;
-    path: string;
-}
-
-/** @internal */
-export const TabFloating = (props: ITabFloatingProps) => {
-    const { layout, selected, node, path } = props;
-
-    const showPopout = () => {
-        if (node.getWindow()) {
-            node.getWindow()!.focus();
-        }
-    }
-
-    const dockPopout = () => {
-        layout.doAction(Actions.unFloatTab(node.getId()));
-    }
-
-    const onMouseDown = () => {
-        const parent = node.getParent() as TabSetNode;
-        if (parent.getType() === TabSetNode.TYPE) {
-            if (!parent.isActive()) {
-                layout.doAction(Actions.setActiveTabset(parent.getId()));
-            }
-        }
-    };
-
-    const onClickFocus = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-        event.preventDefault();
-        showPopout();
-    };
-
-    const onClickDock = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-        event.preventDefault();
-        dockPopout();
-    };
-
-    const cm = layout.getClassName;
-
-
-    const parentNode = node.getParent() as TabSetNode | BorderNode;
-    const style: Record<string, any> = node._styleWithPosition();
-    if (!selected) {
-        hideElement(style, node.getModel().isUseVisibility());
-    }
-
-    if (parentNode instanceof TabSetNode) {
-        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {
-            hideElement(style, node.getModel().isUseVisibility());
-        }
-    }
-
-    const message = layout.i18nName(I18nLabel.Floating_Window_Message);
-    const showMessage = layout.i18nName(I18nLabel.Floating_Window_Show_Window);
-    const dockMessage = layout.i18nName(I18nLabel.Floating_Window_Dock_Window);
-
-    const customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();
-    if (customRenderCallback) {
-        return (
-            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
-                {customRenderCallback(dockPopout, showPopout)}
-            </div>
-        );
-    } else {
-        return (
-            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)}
-                data-layout-path={path}
-                onMouseDown={onMouseDown}
-                onTouchStart={onMouseDown}
-                style={style}>
-                <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
-                    <div>{message}</div>
-                    <div>
-                        <a href="#" onClick={onClickFocus}>
-                            {showMessage}
-                        </a>
-                    </div>
-                    <div>
-                        <a href="#" onClick={onClickDock}>
-                            {dockMessage}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-};