v0.7.10

caplin · Sep 9, 2023 · ee42817 · ee42817
1 parent 0528ba2
commit ee42817
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 39 deletions.
diff --git a/ChangeLog.txt b/ChangeLog.txt
@@ -1,3 +1,9 @@
+0.7.10
+Fix for #399 - the overflow button in a tabset is now placed after 
+any sticky buttons (additional buttons that stick to the last tab of a tabset)
+but before any other buttons.
+Enabled sticky buttons in border tabsets
+
 0.7.9
 Fix drag issue found when used in devtool extension
 Fix double render in popout when in strict mode

diff --git a/README.md b/README.md
@@ -58,7 +58,15 @@ import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 ```
 
-Include the light, underline, gray or dark style in your html:
+Include the light, underline, gray or dark theme by either:
+
+Adding an additional import:
+
+```
+import 'flexlayout-react/style/light.css';  
+```
+
+or by adding the css to your html:
 
 ```
 <link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
@@ -614,6 +622,7 @@ To build the npm distribution run 'yarn build', this will create the artifacts i
 | Name | Repository |
 | ------------- |:-------------|
 | rc-dock | https://github.com/ticlo/rc-dock | 
+| Dockview | https://dockview.dev/ | 
 | lumino | https://github.com/jupyterlab/lumino | 
 | golden-layout | https://github.com/golden-layout/golden-layout |
 | react-mosaic | https://github.com/nomcopter/react-mosaic |

diff --git a/examples/demo/App.tsx b/examples/demo/App.tsx
@@ -401,16 +401,18 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
     onRenderTabSet = (node: (TabSetNode | BorderNode), renderValues: ITabSetRenderValues) => {
         if (this.state.layoutFile === "default") {
             //renderValues.headerContent = "-- " + renderValues.headerContent + " --";
-            //renderValues.buttons.push(<img style={{width:"1em", height:"1em"}} src="images/folder.svg"/>);
-            renderValues.stickyButtons.push(
-                <img src="images/add.svg"
-                    alt="Add"
-                    key="Add button"
-                    title="Add Tab (using onRenderTabSet callback, see Demo)"
-                    style={{ width: "1.1em", height: "1.1em" }}
-                    className="flexlayout__tab_toolbar_button"
-                    onClick={() => this.onAddFromTabSetButton(node)}
-                />);
+            //renderValues.buttons.push(<img key="folder" style={{width:"1em", height:"1em"}} src="images/folder.svg"/>);
+            if (node instanceof TabSetNode) { // don't show + button on border tabsets
+                renderValues.stickyButtons.push(
+                    <img src="images/add.svg"
+                        alt="Add"
+                        key="Add button"
+                        title="Add Tab (using onRenderTabSet callback, see Demo)"
+                        style={{ width: "1.1em", height: "1.1em" }}
+                        className="flexlayout__tab_toolbar_button"
+                        onClick={() => this.onAddFromTabSetButton(node)}
+                    />);
+            }
         }
     }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.7.9",
+    "version": "0.7.10",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",

diff --git a/src/view/BorderTabSet.tsx b/src/view/BorderTabSet.tsx
@@ -30,7 +30,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
     const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null);
 
-    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
+    const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
 
     const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         if (isAuxMouseEvent(event)) {
@@ -42,7 +42,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         layout.showContextMenu(border, event);
     };
 
-    const onInterceptMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent<HTMLButtonElement>) => {
+    const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => {
         event.stopPropagation();
     };
 
@@ -116,12 +116,11 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     // allow customization of tabset right/bottom buttons
     let buttons: any[] = [];
-    const renderState = { headerContent: undefined, buttons, stickyButtons: [], headerButtons: [] };
+    let stickyButtons: any[] = [];
+    const renderState = { headerContent: undefined, buttons, stickyButtons: stickyButtons, headerButtons: [] };
     layout.customizeTabSet(border, renderState);
     buttons = renderState.buttons;
 
-    let toolbar;
-
     if (hiddenTabs.length > 0) {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
         let overflowContent;
@@ -133,7 +132,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
                 <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
             </>);
         }
-        buttons.push(
+        buttons.unshift(
             <button
                 key="overflowbutton"
                 ref={overflowbuttonRef}
@@ -147,6 +146,23 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             </button>
         );
     }
+
+    if (stickyButtons.length > 0) {
+        if (tabsTruncated) {
+            buttons = [...stickyButtons, ...buttons];
+        } else {
+            tabs.push(<div
+                ref={stickyButtonsRef}
+                key="sticky_buttons_container"
+                onMouseDown={onInterceptMouseDown}
+                onTouchStart={onInterceptMouseDown}
+                onDragStart={(e) => { e.preventDefault() }}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
+            >
+                {stickyButtons}
+            </div>);
+        }
+    }
 
     const selectedIndex = border.getSelected();
     if (selectedIndex !== -1) {
@@ -167,7 +183,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             );
         }
     }
-    toolbar = (
+    const toolbar = (
         <div key="toolbar" ref={toolbarRef} className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName())}>
             {buttons}
         </div>

diff --git a/src/view/TabSet.tsx b/src/view/TabSet.tsx
@@ -167,24 +167,6 @@ export const TabSet = (props: ITabSetProps) => {
     buttons = renderState.buttons;
     headerButtons = renderState.headerButtons;
 
-    if (stickyButtons.length > 0) {
-        if (tabsTruncated) {
-            buttons = [...stickyButtons, ...buttons];
-        } else {
-            tabs.push(<div
-                ref={stickyButtonsRef}
-                key="sticky_buttons_container"
-                onMouseDown={onInterceptMouseDown}
-                onTouchStart={onInterceptMouseDown}
-                onDragStart={(e) => { e.preventDefault() }}
-                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
-            >
-                {stickyButtons}
-            </div>);
-        }
-    }
-
-    let toolbar;
     if (hiddenTabs.length > 0) {
         const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
         let overflowContent;
@@ -196,7 +178,7 @@ export const TabSet = (props: ITabSetProps) => {
                 <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}>{hiddenTabs.length}</div>
             </>);
         }
-        buttons.push(
+        buttons.unshift(
             <button
                 key="overflowbutton"
                 data-layout-path={path + "/button/overflow"}
@@ -213,6 +195,23 @@ export const TabSet = (props: ITabSetProps) => {
         );
     }
 
+    if (stickyButtons.length > 0) {
+        if (tabsTruncated) {
+            buttons = [...stickyButtons, ...buttons];
+        } else {
+            tabs.push(<div
+                ref={stickyButtonsRef}
+                key="sticky_buttons_container"
+                onMouseDown={onInterceptMouseDown}
+                onTouchStart={onInterceptMouseDown}
+                onDragStart={(e) => { e.preventDefault() }}
+                className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)}
+            >
+                {stickyButtons}
+            </div>);
+        }
+    }
+
     if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {
         const floatTitle = layout.i18nName(I18nLabel.Float_Tab);
         buttons.push(
@@ -268,7 +267,7 @@ export const TabSet = (props: ITabSetProps) => {
         );
     }
 
-    toolbar = (
+    const toolbar = (
         <div key="toolbar" ref={toolbarRef}
             className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR)}
             onMouseDown={onInterceptMouseDown}