flexlayout-react 0.5.21 → 0.6.0

package/src/view/TabButtonStamp.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import TabNode from "../model/TabNode";
+import { ILayoutCallbacks } from "./Layout";
+import { CLASSES } from "../Types";
+import { getRenderStateEx } from "./Utils";
+
+/** @hidden @internal */
+export interface ITabButtonStampProps {
+    node: TabNode;
+    layout: ILayoutCallbacks;
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+}
+
+/** @hidden @internal */
+export const TabButtonStamp = (props: ITabButtonStampProps) => {
+    const { layout, node, iconFactory, titleFactory } = props;
+    const selfRef = React.useRef<HTMLDivElement | null>(null);
+
+    const cm = layout.getClassName;
+
+    let classNames = cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_STAMP);
+
+    const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+
+    let content = renderState.content ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT)}>
+            {renderState.content}
+        </div>)
+        : node._getNameForOverflowMenu();
+
+    const leading = renderState.leading ? (
+        <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING)}>
+            {renderState.leading}
+        </div>) : null;
+
+    return (
+        <div
+            ref={selfRef}
+            className={classNames}
+            title={node.getHelpText()}
+        >
+            {leading}
+            {content}
+        </div>
+    );
+};

package/src/view/TabFloating.tsx

@@ -5,7 +5,7 @@ import TabSetNode from "../model/TabSetNode";
 import { CLASSES } from "../Types";
 import { ILayoutCallbacks } from "./Layout";
 import { I18nLabel } from "../I18nLabel";
-import { hideElement } from "./Tab";
+import { hideElement } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabFloatingProps {

package/src/view/TabOverflowHook.tsx

@@ -92,7 +92,7 @@ export const useTabOverflow = (
                     return; // nothing to do all tabs are shown in available space
                 }
 
-                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation.HORZ ? 10 : 0) : 45; // will need hidden tabs
+                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation.HORZ ? 16 : 0) : 45; // will need hidden tabs
 
                 let shiftPos = 0;
 

package/src/view/TabSet.tsx

@@ -9,7 +9,7 @@ import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
-import { hideElement } from "./Tab";
+import { hideElement, isAuxMouseEvent } from "./Utils";
 
 /** @hidden @internal */
 export interface ITabSetProps {
@@ -35,7 +35,14 @@ export const TabSet = (props: ITabSetProps) => {
 
     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();
     };
 
@@ -174,7 +181,7 @@ export const TabSet = (props: ITabSetProps) => {
                 data-layout-path={path + "/button/overflow"}
 
                 ref={overflowbuttonRef}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
@@ -347,14 +354,4 @@ export const TabSet = (props: ITabSetProps) => {
     );
 };
 
-/** @hidden @internal */
-export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) {
-    let auxEvent = false;
-    if (event.nativeEvent instanceof MouseEvent) {
-        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
-            auxEvent = true; 
-        }
-    }
-    return auxEvent;
-}
 

package/src/view/Utils.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import TabNode from "../model/TabNode";
+import { ILayoutCallbacks, ITitleObject } from "./Layout";
+
+/** @hidden @internal */
+export function getRenderStateEx (
+    layout: ILayoutCallbacks,
+    node: TabNode,
+    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
+    titleFactory?: (node: TabNode) => React.ReactNode | undefined
+) {
+    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 (leadingContent === undefined && node.getIcon() !== undefined) {
+        leadingContent = <img style={{width:"1em", height:"1em"}} 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);
+
+    return renderState;
+
+}
+
+/** @hidden @internal */
+export function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean ) {
+    if (useVisibility) {
+        style.visibility = "hidden";
+    } else {
+        style.display = "none";
+    }
+}
+
+
+/** @hidden @internal */
+export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) {
+    let auxEvent = false;
+    if (event.nativeEvent instanceof MouseEvent) {
+        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+            auxEvent = true; 
+        }
+    }
+    return auxEvent;
+}
+

package/style/_base.scss

@@ -19,6 +19,8 @@
         --color-6: #{$color_6};
         --color-drag1: #{$color_drag1};
         --color-drag2: #{$color_drag2};
+        --color-drag1-background: #{$color_drag1_background};
+        --color-drag2-background: #{$color_drag2_background};
         
         --font-size: #{$font-size};
         --font-family: #{$font-family};
@@ -55,14 +57,14 @@
         pointer-events: none;
         box-sizing: border-box;
         border: 2px solid var(--color-drag1);
-        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
+        background: var(--color-drag1-background);
         border-radius: 5px;
         z-index: 1000;
 
         &_edge {
             pointer-events: none;
             border: 2px solid var(--color-drag2);
-            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
+            background: var(--color-drag2-background);
             border-radius: 5px;
             z-index: 1000;
             box-sizing: border-box;
@@ -94,7 +96,7 @@
         justify-content: center;
         flex-direction: column;
         overflow: hidden;
-        padding: 10px;
+        padding: 0.5em 1em;
         word-wrap: break-word;
         font-size: var(--font-size);
         font-family: var(--font-family);
@@ -157,6 +159,9 @@
 
                 &_tab_container {
                     display: flex;
+                    gap: 4px;
+                    padding-left: 4px;
+                    padding-right: 4px;
                     box-sizing: border-box;
                     position: absolute;
                     top: 0;
@@ -182,6 +187,14 @@
         }
     }
 
+    &__tab_button_stamp {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3em;
+        white-space: nowrap;
+        box-sizing: border-box;
+    }
+
     &__tab {
         overflow: auto;
         position: absolute;
@@ -191,10 +204,11 @@
 
         &_button {
             display: flex;
+            gap: 0.3em;
             align-items: center;
             box-sizing: border-box;
-            padding: 3px 8px; // if you change top or bottom update the tabset_sizer above
-            margin: 0px 2px;
+            padding: 3px 0.5em; // if you change top or bottom update the tabset_sizer above
+
             cursor: pointer;
             @include tab_button_mixin;
 
@@ -243,65 +257,74 @@
 
             &_trailing {
                 display: flex;
-                margin-left: 8px;
-                min-width: 8px;
-                min-height: 8px;
+                visibility: hidden;
+                border-radius: 4px;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
             }
             @media (pointer: coarse) {
                 &_trailing {
-                    min-width: 20px;
-                    min-height: 20px;
                 }
             }
             @media (hover: hover) {
                 &:hover &_trailing {
-                    background: transparent url("../images/close.png") no-repeat center;
+                    visibility: visible;
                 }
             }
 
             &--selected &_trailing {
-                background: transparent url("../images/close.png") no-repeat center;
+                visibility: visible;
             }
 
             &_overflow {
-                margin-left: 10px;
-                padding-left: 12px;
+                display: flex;
+                align-items: center;
                 border: none;
                 color: gray;
                 font-size: inherit;
-                background: transparent url("../images/more2.png") no-repeat left;
+                background-color: transparent;
             }
         }
 
         &_toolbar {
             display: flex;
             align-items: center;
+            gap: .3em;
+            padding-left: .5em;
+            padding-right: .3em;
 
             &_button {
-                min-width: 20px;
-                min-height: 20px;
                 border: none;
                 outline: none;
+                font-size: inherit;
+                margin: 0px;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
+                @media (hover: hover) {
+                    &:hover {
+                        @include toolbar_button_hovered_mixin;
+                    }
+                }
 
                 &-min {
-                    background: transparent url("../images/maximize.png") no-repeat center;
                 }
 
                 &-max {
-                    background: transparent url("../images/restore.png") no-repeat center;
                 }
 
                 &-float {
-                    background: transparent url("../images/popout.png") no-repeat center;
                 }
 
                 &-close {
-                    background: transparent url("../images/close.png") no-repeat center;
                 }
             }
 
             &_sticky_buttons_container {
                 display: flex;
+                gap: 0.3em;
+                padding-left: 2px;
                 align-items: center;
             }
         }
@@ -375,6 +398,9 @@
             &_tab_container {
                 white-space: nowrap;
                 display: flex;
+                gap: 4px;
+                padding-left: 2px;
+                padding-right: 2px;
                 box-sizing: border-box;
                 position: absolute;
                 top: 0;
@@ -395,10 +421,11 @@
 
         &_button {
             display: flex;
+            gap: 0.3em;
             align-items: center;
             cursor: pointer;
-            padding: 3px 8px;
-            margin: 2px;
+            padding: 3px 0.5em;
+            margin: 2px 0px;
             box-sizing: border-box;
             white-space: nowrap;
             @include border_button_mixin;
@@ -426,68 +453,71 @@
 
             &_trailing {
                 display: flex;
-                margin-left: 8px;
-                min-width: 8px;
-                min-height: 8px;
+                border-radius: 4px;
+                visibility: hidden;
+                &:hover {
+                    @include close_button_hovered_mixin;
+                }
             }
-
             @media (pointer: coarse) {
                 &_trailing {
-                    min-width: 20px;
-                    min-height: 20px;
                 }
             }
-
             @media (hover: hover) {
                 &:hover &_trailing {
-                    background: transparent url("../images/close.png") no-repeat center;
+                    visibility: visible;
                 }
             }
 
             &--selected &_trailing {
-                background: transparent url("../images/close.png") no-repeat center;
+                visibility: visible;
             }
         }
 
         &_toolbar {
             display: flex;
+            gap: .3em;
             align-items: center;
 
-            &_left {
+            &_left,
+            &_right {
                 flex-direction: column;
+                padding-top: .5em;
+                padding-bottom: .3em;
             }
 
-            &_right {
-                flex-direction: column;
+            &_top,
+            &_bottom {
+                padding-left: .5em;
+                padding-right: .3em;
             }
 
             &_button {
-                min-width: 20px;
-                min-height: 20px;
                 border: none;
                 outline: none;
+                font-size: inherit;
+                background-color: transparent;
+                border-radius: 4px;
+                padding: 1px;
 
                 &-float {
-                    background: transparent url("../images/popout.png") no-repeat center;
                 }
 
                 &_overflow {
+                    display: flex;
+                    align-items: center;
                     border: none;
-                    padding-left: 12px;
                     color: gray;
                     font-size: inherit;
-                    background: transparent url("../images/more2.png") no-repeat left;
+                    background-color: transparent;
                 }
 
                 &_overflow_top,
                 &_overflow_bottom {
-                    margin-left: 10px;
                 }
 
                 &_overflow_right,
                 &_overflow_left {
-                    padding-right: 0px;
-                    margin-top: 5px;
                 }
             }
         }
@@ -498,8 +528,7 @@
         font-family: var(--font-family);
 
         &_item {
-            margin: 2px;
-            padding: 2px 10px 2px 10px;
+            padding: 2px 0.5em;
             white-space: nowrap;
             cursor: pointer;
             border-radius: 2px;
@@ -522,6 +551,7 @@
             max-height: 50%;
             min-width: 100px;
             overflow: auto;
+            padding: 2px;
         }
     }