flexlayout-react 0.7.11 → 0.7.13

package/ChangeLog.txt

@@ -1,3 +1,15 @@
+0.7.13
+New attribute on tabset: enableSingleTabStretch will stretch a single tab to take up
+all the remaining space and change the style to look like a header, combined with enableDrop
+this can be used to create a Mosaic style layout (headed panels without tabs), see the new
+Mosaic Style layout in the Demo.
+The layout methods addTabToTabSet and addTabToActiveTabSet now return the added TabNode.
+Fixed #352 - Layout.getDomRect returning null.
+
+0.7.12
+Action.setActiveTabset can now take undefined to unset the active tabset.
+Added Tab attribute contentClassName to add a class to the tab content.
+
 0.7.11
 Added ITabSetRenderValues.overflowPosition to allow overflow button position to be 
 specified, if left undefined, position will be after sticky buttons as before.

package/README.md

@@ -42,20 +42,16 @@ Features:
 
 ## Installation
 
-FlexLayout is in the npm repository. Simply install React and FlexLayout from npm:
+FlexLayout is in the npm repository. install using:
 
 ```
-npm install react
-npm install react-dom
 npm install flexlayout-react
 ```
 
-Import React and FlexLayout in your modules:
+Import FlexLayout in your modules:
 
 ```
-import * as React from "react";
-import { createRoot } from "react-dom/client";
-import * as FlexLayout from "flexlayout-react";
+import {Layout, Model} from 'flexlayout-react';
 ```
 
 Include the light, underline, gray or dark theme by either:
@@ -93,14 +89,6 @@ The factory is a function that takes a Node object and returns a React component
 
 The model can be created using the Model.fromJson(jsonObject) static method, and can be saved using the model.toJson() method.
 
-```javascript
-this.state = {model: FlexLayout.Model.fromJson(json)};
-
-render() {
-	<FlexLayout.Layout model={this.state.model} factory={factory}/>
-}
-```
-
 ## Example Configuration:
 
 ```javascript
@@ -140,34 +128,25 @@ var json = {
 
 ## Example Code
 
-```
-import * as React from "react";
-import { createRoot } from "react-dom/client";
-import * as FlexLayout from "flexlayout-react";
+```javascript
+const model = Model.fromJson(json);
 
-class Main extends React.Component {
+function App() {
 
-    constructor(props) {
-        super(props);
-        this.state = {model: FlexLayout.Model.fromJson(json)};
-    }
+  const factory = (node) => {
+    var component = node.getComponent();
 
-    factory = (node) => {
-        var component = node.getComponent();
-        if (component === "button") {
-            return <button>{node.getName()}</button>;
-        }
+    if (component === "button") {
+      return <button>{node.getName()}</button>;
     }
+  }
 
-    render() {
-        return (
-            <FlexLayout.Layout model={this.state.model} factory={this.factory}/>
-        )
-    }
+  return (
+    <Layout
+      model={model}
+      factory={factory} />
+  );
 }
-
-const root = createRoot(document.getElementById("container"));
-root.render(<Main/>);
 ```		
 
 The above code would render two tabsets horizontally each containing a single tab that hosts a button component. The tabs could be moved and resized by dragging and dropping. Additional grids could be added to the layout by sending actions to the model.
@@ -203,55 +182,6 @@ Weights on rows and tabsets specify the relative weight of these nodes within th
 NOTE: the easiest way to create your initial layout JSON is to use the [demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/demo/index.html) app, modify one of the 
 existing layouts by dragging/dropping and adding nodes then press the 'Show Layout JSON in console' button to print the JSON to the browser developer console.
 
-
-example borders section:
-```
-    borders: [
-         {
-            type: "border",
-            location: "left",
-            children: [
-                {
-                    type: "tab",
-                    enableClose: false,
-                    name: "Navigation",
-                    component: "grid",
-                }
-            ]
-        },
-        {
-            type: "border",
-            location: "right",
-            children: [
-                {
-                    type: "tab",
-                    enableClose: false,
-                    name: "Options",
-                    component: "grid",
-                }
-            ]
-        },
-        {
-            type: "border",
-            location: "bottom",
-            children: [
-                {
-                    type: "tab",
-                    enableClose: false,
-                    name: "Activity Blotter",
-                    component: "grid",
-                },
-                {
-                    type: "tab",
-                    enableClose: false,
-                    name: "Execution Blotter",
-                    component: "grid",
-                }
-            ]
-        }
-    ]
-```
-
 To control where nodes can be dropped you can add a callback function to the model:
 
 ```
@@ -259,7 +189,7 @@ model.setOnAllowDrop(this.allowDrop);
 ```
 
 example:
-```
+```javascript
     allowDrop(dragNode, dropInfo) {
         let dropNode = dropInfo.node;
 
@@ -355,6 +285,7 @@ Attributes allowed in the 'global' element
 | tabEnableRename | true | allow user to rename all tabs by double clicking |
 | tabEnableFloat | false | enable popouts in all tabs (in popout capable browser) |
 | tabClassName | null | |
+| tabContentClassName | null | |
 | tabIcon | null | |
 | tabEnableRenderOnDemand | true | whether to avoid rendering component until tab is visible |
 | tabDragSpeed | 0.3 | CSS transition speed of drag outlines (in seconds) |
@@ -420,7 +351,8 @@ Inherited defaults will take their value from the associated global attributes (
 | enableRename | *inherited* | allow user to rename tabs by double clicking |
 | enableFloat | *inherited* | enable popout (in popout capable browser) |
 | floating | false | |
-| className | *inherited* | |
+| className | *inherited* | class applied to tab button |
+| contentClassName | *inherited* | class applied to tab content |
 | icon | *inherited* | |
 | enableRenderOnDemand | *inherited* | whether to avoid rendering component until tab is visible |
 | borderWidth | *inherited* | width when added to border, -1 will use border size |
@@ -489,8 +421,7 @@ Inherited defaults will take their value from the associated global attributes (
 | enableDrop | *inherited* | |
 | autoSelectTabWhenOpen | *inherited* | whether to select new/moved tabs in border when the border is already open |
 | autoSelectTabWhenClosed | *inherited* | whether to select new/moved tabs in border when the border is currently closed |
-| className | *inherited* | |
-
+| className | *inherited* | class applied to tab button |
 
 ## Model Actions
 

package/declarations/Rect.d.ts

@@ -7,7 +7,7 @@ export declare class Rect {
     constructor(x: number, y: number, width: number, height: number);
     static fromElement(element: Element): Rect;
     clone(): Rect;
-    equals(rect: Rect): boolean;
+    equals(rect: Rect | null | undefined): boolean;
     getBottom(): number;
     getRight(): number;
     getCenter(): {

package/declarations/Types.d.ts

@@ -57,6 +57,7 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_BORDER = "flexlayout__tab_border",
     FLEXLAYOUT__TAB_BORDER_ = "flexlayout__tab_border_",
     FLEXLAYOUT__TAB_BUTTON = "flexlayout__tab_button",
+    FLEXLAYOUT__TAB_BUTTON_STRETCH = "flexlayout__tab_button_stretch",
     FLEXLAYOUT__TAB_BUTTON_CONTENT = "flexlayout__tab_button_content",
     FLEXLAYOUT__TAB_BUTTON_LEADING = "flexlayout__tab_button_leading",
     FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",

package/declarations/model/Actions.d.ts

@@ -68,7 +68,7 @@ export declare class Actions {
      * @param tabsetNodeId the id of the tabset node to set as active
      * @returns {Action} the action
      */
-    static setActiveTabset(tabsetNodeId: string): Action;
+    static setActiveTabset(tabsetNodeId: string | undefined): Action;
     /**
      * Adjust the splitter between two tabsets
      * @example

package/declarations/model/IJsonModel.d.ts

@@ -36,8 +36,8 @@ export interface IGlobalAttributes {
     borderMinSize?: number;
     borderSize?: number;
     enableEdgeDock?: boolean;
-    enableUseVisibility?: boolean;
     enableRotateBorderIcons?: boolean;
+    enableUseVisibility?: boolean;
     legacyOverflowMenu?: boolean;
     marginInsets?: IInsets;
     rootOrientationVertical?: boolean;
@@ -47,6 +47,7 @@ export interface IGlobalAttributes {
     tabBorderWidth?: number;
     tabClassName?: string;
     tabCloseType?: ICloseType;
+    tabContentClassName?: string;
     tabDragSpeed?: number;
     tabEnableClose?: boolean;
     tabEnableDrag?: boolean;
@@ -64,6 +65,7 @@ export interface IGlobalAttributes {
     tabSetEnableDrag?: boolean;
     tabSetEnableDrop?: boolean;
     tabSetEnableMaximize?: boolean;
+    tabSetEnableSingleTabStretch?: boolean;
     tabSetEnableTabStrip?: boolean;
     tabSetHeaderHeight?: number;
     tabSetMarginInsets?: IInsets;
@@ -91,6 +93,7 @@ export interface ITabSetAttributes {
     enableDrag?: boolean;
     enableDrop?: boolean;
     enableMaximize?: boolean;
+    enableSingleTabStretch?: boolean;
     enableTabStrip?: boolean;
     headerHeight?: number;
     height?: number;
@@ -116,6 +119,7 @@ export interface ITabAttributes {
     closeType?: ICloseType;
     component?: string;
     config?: any;
+    contentClassName?: string;
     enableClose?: boolean;
     enableDrag?: boolean;
     enableFloat?: boolean;

package/declarations/model/TabNode.d.ts

@@ -30,6 +30,7 @@ export declare class TabNode extends Node implements IDraggable {
     isEnableDrag(): boolean;
     isEnableRename(): boolean;
     getClassName(): string | undefined;
+    getContentClassName(): string | undefined;
     isEnableRenderOnDemand(): boolean;
     toJson(): IJsonTabNode;
 }

package/declarations/model/TabSetNode.d.ts

@@ -28,6 +28,7 @@ export declare class TabSetNode extends Node implements IDraggable, IDropTarget
     isEnableDivide(): boolean;
     isEnableMaximize(): boolean;
     isEnableClose(): boolean;
+    isEnableSingleTabStretch(): boolean;
     canMaximize(): boolean;
     isEnableTabStrip(): boolean;
     isAutoSelectTab(): boolean;

package/declarations/view/Layout.d.ts

@@ -126,13 +126,15 @@ export declare class Layout extends React.Component<ILayoutProps, ILayoutState>
      * Adds a new tab to the given tabset
      * @param tabsetId the id of the tabset where the new tab will be added
      * @param json the json for the new tab node
+     * @returns the added tab node or undefined
      */
-    addTabToTabSet(tabsetId: string, json: IJsonTabNode): void;
+    addTabToTabSet(tabsetId: string, json: IJsonTabNode): TabNode | undefined;
     /**
      * Adds a new tab to the active tabset (if there is one)
      * @param json the json for the new tab node
+     * @returns the added tab node or undefined
      */
-    addTabToActiveTabSet(json: IJsonTabNode): void;
+    addTabToActiveTabSet(json: IJsonTabNode): TabNode | undefined;
     /**
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
      * @param dragText the text to show on the drag panel