flexlayout-react 0.5.19 → 0.6.1

package/src/PopupMenu.tsx

@@ -1,17 +1,21 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { DragDrop } from ".";
 import TabNode from "./model/TabNode";
 import { CLASSES } from "./Types";
+import { ILayoutCallbacks } from "./view/Layout";
+import { TabButtonStamp } from "./view/TabButtonStamp";
 
 /** @hidden @internal */
 export function showPopup(
-    layoutDiv: HTMLDivElement,
     triggerElement: Element,
     items: { index: number; node: TabNode }[],
     onSelect: (item: { index: number; node: TabNode }) => void,
-    classNameMapper: (defaultClassName: string) => string
+    layout: ILayoutCallbacks,
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined,
 ) {
+    const layoutDiv = layout.getRootDiv();
+    const classNameMapper = layout.getClassName;
     const currentDocument = triggerElement.ownerDocument;
     const triggerRect = triggerElement.getBoundingClientRect();
     const layoutRect = layoutDiv.getBoundingClientRect();
@@ -35,9 +39,9 @@ export function showPopup(
     layoutDiv.appendChild(elm);
 
     const onHide = () => {
+        layout.hidePortal();
         DragDrop.instance.hideGlass();
         layoutDiv.removeChild(elm);
-        ReactDOM.unmountComponentAtNode(elm);
         elm.removeEventListener("mousedown", onElementMouseDown);
         currentDocument.removeEventListener("mousedown", onDocMouseDown);
     };
@@ -53,12 +57,15 @@ export function showPopup(
     elm.addEventListener("mousedown", onElementMouseDown);
     currentDocument.addEventListener("mousedown", onDocMouseDown);
 
-    ReactDOM.render(<PopupMenu
+    layout.showPortal(<PopupMenu
         currentDocument={currentDocument}
         onSelect={onSelect}
         onHide={onHide}
         items={items}
         classNameMapper={classNameMapper}
+        layout={layout}
+        iconFactory={iconFactory}
+        titleFactory={titleFactory}
     />, elm);
 }
 
@@ -69,11 +76,14 @@ interface IPopupMenuProps {
     onHide: () => void;
     onSelect: (item: { index: number; node: TabNode }) => void;
     classNameMapper: (defaultClassName: string) => string;
+    layout: ILayoutCallbacks;
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
 }
 
 /** @hidden @internal */
 const PopupMenu = (props: IPopupMenuProps) => {
-    const { items, onHide, onSelect, classNameMapper } = props;
+    const { items, onHide, onSelect, classNameMapper, layout, iconFactory, titleFactory} = props;
 
     const onItemClick = (item: { index: number; node: TabNode }, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         onSelect(item);
@@ -81,17 +91,27 @@ const PopupMenu = (props: IPopupMenuProps) => {
         event.stopPropagation();
     };
 
-    const itemElements = items.map((item) => (
+    const itemElements = items.map((item, i) => (
         <div key={item.index}
             className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM)}
+            data-layout-path={"/popup-menu/tb" + i}
             onClick={(event) => onItemClick(item, event)}
-            title={item.node.getHelpText()}>
-            {item.node._getRenderedName()}
+            title={item.node.getHelpText()} >
+            {item.node.getModel().isLegacyOverflowMenu() ? 
+            item.node._getNameForOverflowMenu() :
+            <TabButtonStamp 
+                node={item.node}
+                layout={layout}
+                iconFactory={iconFactory}
+                titleFactory={titleFactory}
+            />}
         </div>
     ));
 
     return (
-        <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}>
+        <div className={classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU)}
+        data-layout-path="/popup-menu"
+        >
             {itemElements}
         </div>);
 };

package/src/Types.ts

@@ -70,6 +70,7 @@ export enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",
     FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
     FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
+    FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
 
     FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
     FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",

package/src/model/IJsonModel.ts

@@ -40,6 +40,8 @@ export interface IGlobalAttributes {
 	borderMinSize?: number; // default: 0
 	borderSize?: number; // default: 200
 	enableEdgeDock?: boolean; // default: true
+	enableUseVisibility?: boolean; // default: false
+	legacyOverflowMenu?: boolean; // default: false
 	marginInsets?: IInsets; // default: {"top":0,"right":0,"bottom":0,"left":0}
 	rootOrientationVertical?: boolean; // default: false
 	splitterExtra?: number; // default: 0
@@ -108,6 +110,7 @@ export interface ITabSetAttributes {
 	width?: number;
 }
 export interface ITabAttributes {
+	altName?: string;
 	borderHeight?: number; // default: -1 - inherited from global tabBorderHeight
 	borderWidth?: number; // default: -1 - inherited from global tabBorderWidth
 	className?: string; //  - inherited from global tabClassName

package/src/model/Model.ts

@@ -52,6 +52,9 @@ class Model {
     /** @hidden @internal */
     private static _createAttributeDefinitions(): AttributeDefinitions {
         const attributeDefinitions = new AttributeDefinitions();
+
+        attributeDefinitions.add("legacyOverflowMenu", false).setType(Attribute.BOOLEAN);
+
         // splitter
         attributeDefinitions.add("splitterSize", -1).setType(Attribute.NUMBER);
         attributeDefinitions.add("splitterExtra", 0).setType(Attribute.NUMBER);
@@ -59,6 +62,7 @@ class Model {
         attributeDefinitions.add("rootOrientationVertical", false).setType(Attribute.BOOLEAN);
         attributeDefinitions.add("marginInsets", { top: 0, right: 0, bottom: 0, left: 0 })
             .setType("IInsets");
+        attributeDefinitions.add("enableUseVisibility", false).setType(Attribute.BOOLEAN);
 
         // tab
         attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
@@ -201,6 +205,10 @@ class Model {
         return this._attributes.rootOrientationVertical as boolean;
     }
 
+    isUseVisibility() {
+        return this._attributes.enableUseVisibility as boolean;
+    }
+
     /**
      * Gets the
      * @returns {BorderSet|*}
@@ -443,6 +451,10 @@ class Model {
         return splitterSize;
     }
 
+    isLegacyOverflowMenu() {
+        return this._attributes.legacyOverflowMenu as boolean;
+    }
+
     getSplitterExtra() {
         return this._attributes.splitterExtra as number;
     }

package/src/model/TabNode.ts

@@ -26,6 +26,7 @@ class TabNode extends Node implements IDraggable {
         attributeDefinitions.add("id", undefined).setType(Attribute.STRING);
 
         attributeDefinitions.add("name", "[Unnamed Tab]").setType(Attribute.STRING);
+        attributeDefinitions.add("altName", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("helpText", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("component", undefined).setType(Attribute.STRING);
         attributeDefinitions.add("config", undefined).setType("any");
@@ -84,7 +85,11 @@ class TabNode extends Node implements IDraggable {
     }
 
     /** @hidden @internal */
-    _getRenderedName() {
+    _getNameForOverflowMenu() {
+        const altName = this._getAttr("altName") as string;
+        if (altName !== undefined) {
+            return altName;
+        }
         return this._renderedName;
     }
 

package/src/view/BorderButton.tsx

@@ -3,10 +3,10 @@ import { I18nLabel } from "..";
 import Actions from "../model/Actions";
 import TabNode from "../model/TabNode";
 import Rect from "../Rect";
-import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IIcons, ILayoutCallbacks } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
-import { isAuxMouseEvent } from "./TabSet";
+import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface IBorderButtonProps {
@@ -17,17 +17,17 @@ export interface IBorderButtonProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const BorderButton = (props: IBorderButtonProps) => {
-    const { layout, node, selected, border, iconFactory, titleFactory, icons } = props;
+    const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;
     const selfRef = React.useRef<HTMLDivElement | null>(null);
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
         if (!isAuxMouseEvent(event)) {
-            const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
-            props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
+            props.layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, (event2: Event) => undefined);
         }
     };
 
@@ -95,47 +95,22 @@ export const BorderButton = (props: IBorderButtonProps) => {
         classNames += " " + node.getClassName();
     }
 
-    let leadingContent = iconFactory ? iconFactory(node) : undefined;
-    let titleContent: React.ReactNode = node.getName();
-    let name = node.getName();
-
-    function isTitleObject(obj: any): obj is ITitleObject {
-        return obj.titleContent !== undefined 
-      }
-
-    if (titleFactory !== undefined) {
-        const titleObj = titleFactory(node);
-        if (titleObj !== undefined) {
-            if (typeof titleObj === "string") {
-                titleContent = titleObj as string;
-                name = titleObj as string;
-            } else if (isTitleObject(titleObj)) {
-                titleContent = titleObj.titleContent;
-                name = titleObj.name;
-            } else {
-                titleContent = titleObj;
-            }
-        }
-    }
-
-    if (typeof leadingContent === undefined && typeof node.getIcon() !== undefined) {
-        leadingContent = <img src={node.getIcon()} alt="leadingContent" />;
-    }
-
-    let buttons: any[] = [];
-
-    // allow customization of leading contents (icon) and contents
-    const renderState = { leading: leadingContent, content: titleContent, name, buttons };
-    layout.customizeTab(node, renderState);
-    node._setRenderedName(renderState.name);
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
 
-    const content = <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>{renderState.content}</div>;
-    const leading = <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>{renderState.leading}</div>;
+    const content = renderState.content ? (<div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>{renderState.content}</div>) : null;
+    const leading = renderState.leading ? (<div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>{renderState.leading}</div>) : null;
 
     if (node.isEnableClose()) {
         const closeTitle = layout.i18nName(I18nLabel.Close_Tab);
-        buttons.push(
-            <div key="close" title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} onMouseDown={onCloseMouseDown} onClick={onClose} onTouchStart={onCloseMouseDown}>
+        renderState.buttons.push(
+            <div 
+                key="close" 
+                data-layout-path={path + "/button/close"}
+                title={closeTitle} 
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} 
+                onMouseDown={onCloseMouseDown} 
+                onClick={onClose} 
+                onTouchStart={onCloseMouseDown}>
                 {icons?.close}
             </div>
         );
@@ -143,6 +118,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
 
     return (
         <div ref={selfRef} style={{}} className={classNames} 
+        data-layout-path={path}
         onMouseDown={onMouseDown} 
         onClick={onAuxMouseClick}
         onAuxClick={onAuxMouseClick}
@@ -151,7 +127,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
         title={node.getHelpText()}>
             {leading}
             {content}
-            {buttons}
+            {renderState.buttons}
         </div>
     );
 };

package/src/view/BorderTabSet.tsx

@@ -10,7 +10,7 @@ import { I18nLabel } from "../I18nLabel";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
-import { isAuxMouseEvent } from "./TabSet";
+import { isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface IBorderTabSetProps {
@@ -19,11 +19,12 @@ export interface IBorderTabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
+    path: string;
 }
 
 /** @hidden @internal */
 export const BorderTabSet = (props: IBorderTabSetProps) => {
-    const { border, layout, iconFactory, titleFactory, icons } = props;
+    const { border, layout, iconFactory, titleFactory, icons, path } = props;
 
     const toolbarRef = React.useRef<HTMLDivElement | null>(null);
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
@@ -47,7 +48,12 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
-        showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        showPopup( element, 
+            hiddenTabs, 
+            onOverflowItemSelect, 
+            layout,
+            iconFactory,
+            titleFactory);
         event.stopPropagation();
     };
 
@@ -78,6 +84,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                 layout={layout}
                 border={border.getLocation().getName()}
                 node={child}
+                path={path + "/tb" + i}
                 key={child.getId()}
                 selected={isSelected}
                 iconFactory={iconFactory}
@@ -135,7 +142,9 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                     onClick={onFloatTab}
                     onMouseDown={onInterceptMouseDown}
                     onTouchStart={onInterceptMouseDown}
-                />
+                >
+                    {icons?.popout}
+                </button>
             );
         }
     }
@@ -159,6 +168,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     return (
         <div ref={selfRef} dir="ltr" style={style} className={borderClasses} 
+            data-layout-path={path}
             onClick={onAuxMouseClick}
             onAuxClick={onAuxMouseClick}
             onContextMenu={onContextMenu}

package/src/view/FloatingWindow.tsx

@@ -16,7 +16,7 @@ export interface IFloatingWindowProps {
 interface IStyleSheet {
     href: string | null;
     type: string;
-    rules: string[];
+    rules: string[] | null;
 }
 
 /** @hidden @internal */
@@ -31,17 +31,23 @@ export const FloatingWindow = (props: React.PropsWithChildren<IFloatingWindowPro
         // 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: Array.from(styleSheet.cssRules).map(rule => rule.cssText),
+                        rules: rules ? Array.from(rules).map(rule => rule.cssText) : null,
                     }
                 ];
             } catch (e) {
-                // styleSheet.cssRules can throw security exception
                 return result;
             }
         }, [] as IStyleSheet[]);
@@ -113,9 +119,11 @@ function copyStyles(doc: Document, styleSheets: IStyleSheet[]): Promise<boolean[
                 })
             );
         } else {
-            const style = doc.createElement("style");
-            styleSheet.rules.forEach(rule => style.appendChild(doc.createTextNode(rule)));
-            head.appendChild(style);
+            if (styleSheet.rules) {
+                const style = doc.createElement("style");
+                styleSheet.rules.forEach(rule => style.appendChild(doc.createTextNode(rule)));
+                head.appendChild(style);
+            }
         }
     });
     return Promise.all(promises);

package/src/view/Icons.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+const style = {width:"1em", height:"1em", display: "flex", alignItems:"center"};
+
+export const CloseIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" >
+            <path fill="none" d="M0 0h24v24H0z"/>
+            <path  stroke="gray" fill="gray" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+        </svg>
+    );
+}
+
+export const MaximizeIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
+    );
+}
+
+export const OverflowIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M7 10l5 5 5-5z"/></svg>
+    );
+}
+
+export const PopoutIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>
+    );
+}
+
+export const RestoreIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={style}  viewBox="0 0 24 24" fill="gray"><path d="M0 0h24v24H0z" fill="none"/><path stroke="gray" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>
+    );
+}