v0.7.0

ChangeLog.txt

@@ -1,3 +1,7 @@
+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 
 

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)
 
@@ -55,7 +55,7 @@ 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";
 ```
 
@@ -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.
 
 

examples/demo/App.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Action, Actions, BorderNode, CLASSES, DockLocation, DragDrop, DropInfo, IJsonTabNode, ILayoutProps, ITabRenderValues, ITabSetRenderValues, Layout, Model, Node, TabNode, TabSetNode } from "../../src/index";
 import { NewFeatures } from "./NewFeatures";
 import { showPopup } from "./PopupMenu";
@@ -450,12 +450,9 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
                         <select className="toolbar_control" onChange={this.onSelectLayout}>
                             <option value="default">Default</option>
                             <option value="newfeatures">New Features</option>
-                            <option value="simple">Simple</option>
-                            <option value="justsplitters">Just Splitters</option>
                             <option value="sub">SubLayout</option>
                             <option value="complex">Complex</option>
-                            <option value="preferred">Using Preferred size</option>
-                            <option value="trader">Trader</option>
+                            <option value="headers">Headers</option>
                         </select>
                         <button className="toolbar_control" onClick={this.onReloadFromFile} style={{ marginLeft: 5 }}>Reload</button>
                         <div style={{ flexGrow: 1 }}></div>
@@ -560,4 +557,5 @@ class SimpleTable extends React.Component<{ fields: any, data: any, onClick: any
 //     return <span>{value}</span>;
 // }
 
-ReactDOM.render(<App />, document.getElementById("container"));
+const root = createRoot(document.getElementById("container")!);
+root.render(<App />)

examples/demo/PopupMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import * as ReactDOM from "react-dom/client";
 import { DragDrop } from "../../src";
 
 /** @hidden @internal */
@@ -36,7 +36,7 @@ export function showPopup(
         DragDrop.instance.hideGlass();
         onSelect(item);
         layoutDiv.removeChild(elm);
-        ReactDOM.unmountComponentAtNode(elm);
+        root.unmount();
         elm.removeEventListener("mousedown", onElementMouseDown);
         currentDocument.removeEventListener("mousedown", onDocMouseDown);
     };
@@ -52,12 +52,12 @@ export function showPopup(
     elm.addEventListener("mousedown", onElementMouseDown);
     currentDocument.addEventListener("mousedown", onDocMouseDown);
 
-    ReactDOM.render(<PopupMenu
+    const root = ReactDOM.createRoot(elm);
+    root.render(<PopupMenu
         currentDocument={currentDocument}
         onHide={onHide}
         title={title}
-        items={items} />,
-        elm);
+        items={items} />);
 }
 
 /** @hidden @internal */

examples/demo/TabStorage.tsx

@@ -83,7 +83,7 @@ export function TabStorage({ tab, layout }: { tab: TabNode; layout: Layout; }) {
         };
     }, [storedTabs]);
 
-    const insertionCallback = useCallback((dragging: TabNode | IJsonTabNode, _, __, y: number) => {
+    const insertionCallback = useCallback((dragging: TabNode | IJsonTabNode, _: any, __: any, y: number) => {
         const absoluteY = y + tab.getRect().y + layout.getDomRect().top;
         const { insertionIndex } = calculateInsertion(absoluteY);
         const json = dragging instanceof TabNode ? dragging.toJson() as IJsonTabNode : dragging;

examples/demo/layouts/simple.layout → examples/demo/layouts/headers.layout

@@ -63,4 +63,4 @@
 			}
 		]
 	}
-}
+}