flexlayout-react 0.7.10 → 0.7.12

package/ChangeLog.txt

@@ -1,3 +1,14 @@
+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.
+New model attribute enableRotateBorderIcons, this allows the tab icons in the left and
+right borders to rotate with the text or not, default is true.
+Added additional class names to edge indicators
+
 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)

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;
 
@@ -348,12 +278,14 @@ Attributes allowed in the 'global' element
 | splitterExtra | 0 | additional width in pixels of the splitter hit test area |
 | legacyOverflowMenu | false | use the legacy text only overflow menu |
 | enableEdgeDock | true | |
+| enableRotateBorderIcons | true | boolean indicating if tab icons should rotate with the text in the left and right borders |
 | tabEnableClose | true | allow user to close all tabs via close button |
 | tabCloseType | 1 | see values in ICloseType |
 | tabEnableDrag | true | allow user to drag all tabs to new location |
 | 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) |
@@ -419,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 |
@@ -446,6 +379,7 @@ Note: tabsets can be dynamically created as tabs are moved and deleted when all
 | name | null | named tabsets will show a header bar above the tabs |
 | config | null | a place to hold json config used in your own code |
 | selected | 0 | index of selected/visible tab in tabset |
+| active | false | whether tabset is currently active; this attribute can only be used in the initial configuration, to change the active tabset you should use the `setActiveTabset` action on the model |
 | maximized | false | whether tabset is currently maximized to fill view |
 | enableClose | false | allow user to close tabset via a close button |
 | id | auto generated | |
@@ -462,8 +396,8 @@ Note: tabsets can be dynamically created as tabs are moved and deleted when all
 | headerHeight | *inherited* | |
 | tabStripHeight | *inherited* | height in pixels of tab strip |
 | tabLocation | *inherited* | show tabs in location top or bottom |
-| minHeight | *inherited* | minimum width (in px) for this tabset |
-| minWidth | *inherited* | minimum height (in px) for this tabset |
+| minHeight | *inherited* | minimum height (in px) for this tabset |
+| minWidth | *inherited* | minimum width (in px) for this tabset |
 
 ## Border Attributes
 
@@ -487,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/Types.d.ts

@@ -22,6 +22,10 @@ export declare enum CLASSES {
     FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT = "flexlayout__border_toolbar_button-float",
     FLEXLAYOUT__DRAG_RECT = "flexlayout__drag_rect",
     FLEXLAYOUT__EDGE_RECT = "flexlayout__edge_rect",
+    FLEXLAYOUT__EDGE_RECT_TOP = "flexlayout__edge_rect_top",
+    FLEXLAYOUT__EDGE_RECT_LEFT = "flexlayout__edge_rect_left",
+    FLEXLAYOUT__EDGE_RECT_BOTTOM = "flexlayout__edge_rect_bottom",
+    FLEXLAYOUT__EDGE_RECT_RIGHT = "flexlayout__edge_rect_right",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER = "flexlayout__error_boundary_container",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
     FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",

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,6 +36,7 @@ export interface IGlobalAttributes {
     borderMinSize?: number;
     borderSize?: number;
     enableEdgeDock?: boolean;
+    enableRotateBorderIcons?: boolean;
     enableUseVisibility?: boolean;
     legacyOverflowMenu?: boolean;
     marginInsets?: IInsets;
@@ -46,6 +47,7 @@ export interface IGlobalAttributes {
     tabBorderWidth?: number;
     tabClassName?: string;
     tabCloseType?: ICloseType;
+    tabContentClassName?: string;
     tabDragSpeed?: number;
     tabEnableClose?: boolean;
     tabEnableDrag?: boolean;
@@ -104,6 +106,8 @@ export interface ITabSetAttributes {
     type: "tabset";
     weight?: number;
     width?: number;
+    maximized?: boolean;
+    active?: boolean;
 }
 export interface ITabAttributes {
     altName?: string;
@@ -113,6 +117,7 @@ export interface ITabAttributes {
     closeType?: ICloseType;
     component?: string;
     config?: any;
+    contentClassName?: string;
     enableClose?: boolean;
     enableDrag?: boolean;
     enableFloat?: boolean;

package/declarations/model/Model.d.ts

@@ -31,6 +31,7 @@ export declare class Model {
     getRoot(): RowNode;
     isRootOrientationVertical(): boolean;
     isUseVisibility(): boolean;
+    isEnableRotateBorderIcons(): boolean;
     /**
      * Gets the
      * @returns {BorderSet|*}
@@ -46,6 +47,12 @@ export declare class Model {
      * @param id the id to find
      */
     getNodeById(id: string): Node | undefined;
+    /**
+     * Finds the first/top left tab set of the given node.
+     * @param node The top node you want to begin searching from, deafults to the root node
+     * @returns The first Tab Set
+     */
+    getFirstTabSet(node?: Node): Node;
     /**
      * Update the node tree by performing the given action,
      * Actions should be generated via static methods on the Actions class

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/view/Layout.d.ts

@@ -73,6 +73,7 @@ export interface ITabSetRenderValues {
     stickyButtons: React.ReactNode[];
     buttons: React.ReactNode[];
     headerButtons: React.ReactNode[];
+    overflowPosition: number | undefined;
 }
 export interface ITabRenderValues {
     leading: React.ReactNode;