flexlayout-react 0.8.8 → 0.8.10

package/ChangeLog.txt

@@ -1,3 +1,12 @@
+0.8.10
+Fix for #481 Numpad Enter doesn't confirm rename
+Work around <StrictMode> issue in React 19 (https://github.com/facebook/react/issues/29585) causing
+  tabs to re-mount when moved
+
+0.8.9
+Fix for #480 Actions.selectTab is called when closing Tab 
+Added isVisible() method to TabNode
+
 0.8.8
 Enable esc to close overflow menu 
 Prevent initial reposition flash when there are hidden tabs

package/README.md

@@ -6,7 +6,7 @@
 
 FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.
 
-![FlexLayout Demo Screenshot](Screenshot_light.png?raw=true "FlexLayout Demo Screenshot")
+![FlexLayout Demo Screenshot](screenshots/Screenshot_light.png?raw=true "FlexLayout Demo Screenshot")
 
 [Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.8/demo/index.html)
 
@@ -152,6 +152,9 @@ function App() {
 
 The above code would render two tab sets horizontally each containing a single tab that hosts a div component (returned from the factory). The tabs could be moved and resized by dragging and dropping. Additional tabs could be added to the layout by sending actions to the model.
 
+<img src="screenshots/Screenshot_two_tabs.png?raw=true" alt="Simple layout" title="Generated Layout"/>
+
+
 Try it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)
 
 A simple Typescript example can be found here:
@@ -178,7 +181,7 @@ The layout structure is defined with rows within rows that contain tabsets that
 
 Within the demo app you can show the layout structure by ticking the 'Show layout' checkbox, rows are shown in blue, tabsets in orange.
 
-![FlexLayout Demo Showing Layout](Screenshot_layout.png?raw=true "Demo showing layout")
+![FlexLayout Demo Showing Layout](screenshots/Screenshot_layout.png?raw=true "Demo showing layout")
 
 The optional borders element is made up of border nodes
 
@@ -228,7 +231,9 @@ For example:
 You can use the `<Layout>` prop onRenderTab to customize the tab rendering:
 
 
-![FlexLayout Tab structure](Screenshot_customize_tab.png?raw=true "Tab structure")
+<img src="screenshots/Screenshot_customize_tab.png?raw=true"
+     alt="FlexLayout Tab structure"
+     title="Tab structure"/>
 
 Update the renderValues parameter as needed:
 
@@ -253,7 +258,9 @@ onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
 You can use the `<Layout>` prop onRenderTabSet to customize the tab set rendering:
 
 
-![FlexLayout Tab structure](Screenshot_customize_tabset.png?raw=true "Tab set structure")
+<img src="screenshots/Screenshot_customize_tabset.png?raw=true"
+     alt="FlexLayout Tab structure"
+     title="Tab set structure" />
 
 Update the renderValues parameter as needed:
 
@@ -276,16 +283,24 @@ onRenderTabSet = (node: (TabSetNode | BorderNode), renderValues: ITabSetRenderVa
 
 Once the model json has been loaded all changes to the model are applied through actions.
 
-
 You apply actions using the `Model.doAction()` method.
 
 This method takes a single argument, created by one of the action
-generators (typically accessed as `FlexLayout.Actions.<actionName>`):
+generators (accessed as `FlexLayout.Actions.<actionName>`):
 
 [Actions doc](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.8/typedoc/classes/Actions.html)
 
 ### Examples
 
+```js
+model.doAction(FlexLayout.Actions.addNode(
+    {type:"tab", component:"grid", name:"a grid", id:"5"},
+    "1", FlexLayout.DockLocation.CENTER, 0));
+```
+
+This example adds a new grid component to the center of tabset with id "1" and at the 0'th tab position (use value -1 to add to the end of the tabs).
+
+
 ```js
 model.doAction(FlexLayout.Actions.updateModelAttributes({
     splitterSize:40
@@ -295,14 +310,6 @@ model.doAction(FlexLayout.Actions.updateModelAttributes({
 The above example would increase the size of the splitters, this could be used to make
 adjusting the layout easier on a small device.
 
-```js
-model.doAction(FlexLayout.Actions.addNode(
-    {type:"tab", component:"grid", name:"a grid", id:"5"},
-    "1", FlexLayout.DockLocation.CENTER, 0));
-```
-
-This example adds a new grid component to the center of tabset with id "1" and at the 0'th tab position (use value -1 to add to the end of the tabs).
-
 Note: you can get the id of a node (e.g., the node returned by the `addNode`
 action) using the method `node.getId()`.
 If an id wasn't assigned when the node was created, then one will be created for you of the form `#<uuid>` (e.g. `#0c459064-8dee-444e-8636-eb9ab910fb27`).

package/declarations/model/TabNode.d.ts

@@ -40,5 +40,6 @@ export declare class TabNode extends Node implements IDraggable {
     getMinHeight(): number;
     getMaxWidth(): number;
     getMaxHeight(): number;
+    isVisible(): boolean;
     toJson(): IJsonTabNode;
 }

package/declarations/view/Layout.d.ts

@@ -98,7 +98,7 @@ export declare class Layout extends React.Component<ILayoutProps> {
     /** Get the root div element of the layout */
     getRootDiv(): HTMLDivElement | null;
 }
-export declare const FlexLayoutVersion = "0.8.8";
+export declare const FlexLayoutVersion = "0.8.10";
 export type DragRectRenderCallback = (content: React.ReactNode | undefined, node?: Node, json?: IJsonTabNode) => React.ReactNode | undefined;
 export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 export type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {