flexlayout-react 0.6.9 → 0.7.1

package/ChangeLog.txt

@@ -1,3 +1,14 @@
+0.7.1
+Fix for #310 - Added new layout method: moveTabWithDragAndDrop(node) to allow tab dragging to be
+started from custom code.
+
+0.7.0
+Updated dependencies, in particular changed React peer dependency to React 18
+Made changes for React 18
+
+0.6.10
+fix for #312, chrome warning for wheel event listener 
+
 0.6.9
 fix for #308, Allow dragging within a maximized tabset
 

package/README.md

@@ -8,11 +8,11 @@ FlexLayout is a layout manager that arranges React components in multiple tab se
 
 ![FlexLayout Demo Screenshot](/../screenshots/github_images/v0.5/demo1.png?raw=true "FlexLayout Demo Screenshot")
 
-[Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/demo/index.html)
+[Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/demo/index.html)
 
-Try it now using [JSFiddle](https://jsfiddle.net/18zfp0qm/)
+Try it now using [JSFiddle](https://jsfiddle.net/10kmLzvu/)
 
-[API Doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/typedoc/index.html)
+[API Doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/typedoc/index.html)
 
 [Screenshot of Caplin Liberator Explorer using FlexLayout](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.20/images/LiberatorExplorerV3_3.PNG)
 
@@ -27,10 +27,10 @@ Features:
 *	maximize tabset (double click tabset header or use icon)
 *	tab overflow (show menu when tabs overflow, scroll tabs using mouse wheel)
 *   border tabsets
-*   popout tabs into new browser windows (only enabled in latest browsers)
+*   popout tabs into new browser windows
 *	submodels, allow layouts inside layouts
 *	tab renaming (double click tab text to rename)
-*	themeing - light, gray and dark
+*	theming - light, gray and dark
 *	touch events - works on mobile devices (iPad, Android)
 *   add tabs using drag, indirect drag, add to active tabset, add to tabset by id
 *   preferred pixel size tabsets (try to keep their size when window resizes)
@@ -39,7 +39,7 @@ Features:
 *	customizable tabs and tabset header rendering
 *   esc cancels drag
 *	typescript type declarations included
-*	supports overriding css class names via the classNameMapper prop, for use in css modules
+
 
 ## Installation
 
@@ -55,11 +55,11 @@ Import React and FlexLayout in your modules:
 
 ```
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 ```
 
-Include the light, gray or dark style in your html:
+Include the light, underline, gray or dark style in your html:
 
 ```
 <link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
@@ -161,7 +161,7 @@ var json = {
 
 ```
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import * as FlexLayout from "flexlayout-react";
 
 class Main extends React.Component {
@@ -185,13 +185,15 @@ class Main extends React.Component {
     }
 }
 
-ReactDOM.render(<Main/>, document.getElementById("container"));
+const container = document.getElementById("container");
+const root = createRoot(container);
+root.render(<Main/>);
 ```		
 (See the examples for full source code)
 
 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.
 
-Try it now using [JSFiddle](https://jsfiddle.net/18zfp0qm/) 
+Try it now using [JSFiddle](https://jsfiddle.net/10kmLzvu/) 
 
 A simple Create React App (CRA) example (using typescript) can be found here:
 
@@ -219,7 +221,7 @@ The model json contains 3 top level elements:
 
 Weights on rows and tabsets specify the relative weight of these nodes within the parent row, the actual values do not matter just their relative values (ie two tabsets of weights 30,70 would render the same if they had weights of 3,7).
 
-NOTE: the easiest way to create your initial layout JSON is to use the [demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/demo/index.html) app, modify one of the 
+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.
 
 
@@ -304,11 +306,7 @@ tabs or drag and drop).
 ```
 ## Floating Tabs (Popouts)
 
-Note: this feature only works for Chrome, Firefox, Safari, latest Edge (the Chrome based one) and Opera, it does
-NOT work for any version of IE or the previous version of Edge. For unsupported browsers the popout icons
-will not be shown and any saved layout with popouts will show with all their tabs in the main layout.
-
-For supported browsers tabs can be rendered into external browser windows (for use in multi-monitor setups)
+Tabs can be rendered into external browser windows (for use in multi-monitor setups)
 by configuring them with the enableFloat attribute. When this attribute is present
 an additional icon is shown in the tab header bar allowing the tab to be popped out
 into an external window.
@@ -329,7 +327,7 @@ following method on one of the elements rendered in the popout (for example a re
 
 In the above code selfRef is a React ref to the toplevel element in the tab being rendered.
 
-Note: some libraries already support popout windows by allowing you to specify the document to use, 
+Note: some libraries support popout windows by allowing you to specify the document to use, 
 for example see the getDocument() callback in agGrid at https://www.ag-grid.com/javascript-grid-callbacks/
 
 ## Global Config attributes

package/declarations/model/Floating.d.ts

@@ -0,0 +1,15 @@
+import { Rect } from "../Rect";
+import { IJsonFloating } from "./IJsonModel";
+import { TabNode } from "./TabNode";
+export declare class Floating {
+    private _rect;
+    private _parentId;
+    private _tabIndex;
+    private _tab;
+    constructor(_rect: Rect, _parentId: string, _tabIndex: number, _tab: TabNode);
+    get rect(): Rect;
+    get tabIndex(): number;
+    get parentId(): string;
+    get tab(): TabNode;
+    toJson(): IJsonFloating;
+}

package/declarations/model/FloatingSet.d.ts

@@ -0,0 +1,9 @@
+import { Rect } from "../Rect";
+import { Floating } from "./Floating";
+import { TabNode } from "./TabNode";
+export declare class FloatingSet {
+    get floatingWindows(): Floating[];
+    delete(node: TabNode): void;
+    find(node: TabNode): Floating | undefined;
+    add(r: Rect, parentId: string, tabIndex: number, node: TabNode): void;
+}

package/declarations/view/Icons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const CloseIcon: () => JSX.Element;
 export declare const MaximizeIcon: () => JSX.Element;
 export declare const OverflowIcon: () => JSX.Element;

package/declarations/view/Layout.d.ts

@@ -21,13 +21,15 @@ export declare type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, m
     node: TabNode;
 }) => void) => void;
 export declare type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
+export declare type IconFactory = (node: TabNode) => React.ReactNode;
+export declare type TitleFactory = (node: TabNode) => ITitleObject | React.ReactNode;
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
     font?: IFontValues;
     fontFamily?: string;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => ITitleObject | React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
@@ -89,7 +91,7 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
-    portal?: React.ReactNode;
+    portal?: React.ReactPortal;
 }
 export interface IIcons {
     close?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
@@ -136,6 +138,12 @@ export declare class Layout extends React.Component<ILayoutProps, ILayoutState>
      * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
      */
     addTabWithDragAndDrop(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
+    /**
+     * Move a tab/tabset using drag and drop
+     * @param node the tab or tabset to drag
+     * @param dragText the text to show on the drag panel
+     */
+    moveTabWithDragAndDrop(node: (TabNode | TabSetNode), dragText?: string): void;
     /**
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
      * mouse down on the panel