v0.8.9

Author: nealus

ChangeLog.txt

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

README.md

@@ -152,7 +152,8 @@ 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.
 
-![Simple layout](screenshots/Screenshot_two_tabs.png?raw=true "Generated Layout")
+<img src="screenshots/Screenshot_two_tabs.png?raw=true" alt="Simple layout" title="Generated Layout" style="border: 1px solid #ccc;" />
+
 
 Try it now using [CodeSandbox](https://codesandbox.io/p/sandbox/yvjzqf)
 
@@ -230,7 +231,10 @@ For example:
 You can use the `<Layout>` prop onRenderTab to customize the tab rendering:
 
 
-![FlexLayout Tab structure](screenshots/Screenshot_customize_tab.png?raw=true "Tab structure")
+<img src="screenshots/Screenshot_customize_tab.png?raw=true"
+     alt="FlexLayout Tab structure"
+     title="Tab structure"
+     style="border: 1px solid #ccc;" />
 
 Update the renderValues parameter as needed:
 
@@ -255,7 +259,10 @@ onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
 You can use the `<Layout>` prop onRenderTabSet to customize the tab set rendering:
 
 
-![FlexLayout Tab structure](screenshots/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"
+     style="border: 1px solid #ccc;" />
 
 Update the renderValues parameter as needed:
 
@@ -278,16 +285,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
@@ -297,14 +312,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`).

Screenshot_customize_tab.png

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.8.8",
+    "version": "0.8.9",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",

Screenshot_customize_tabset.png

@@ -174,6 +174,10 @@ export class TabNode extends Node implements IDraggable {
         return this.getAttr("maxHeight") as number;
     }
 
+    isVisible() {
+        return this.visible;
+    }
+
     toJson(): IJsonTabNode {
         const json = {};
         TabNode.attributeDefinitions.toJson(json, this.attributes);
@@ -215,8 +219,8 @@ export class TabNode extends Node implements IDraggable {
     /** @internal */
     setVisible(visible: boolean) {
         if (visible !== this.visible) {
-            this.fireEvent("visibility", { visible });
             this.visible = visible;
+            this.fireEvent("visibility", { visible });
         }
     }
 

Screenshot_layout.png

@@ -86,8 +86,7 @@ export const BorderButton = (props: IBorderButtonProps) => {
     const onClose = (event: React.MouseEvent<HTMLElement>) => {
         if (isClosable()) {
             layout.doAction(Actions.deleteTab(node.getId()));
-        } else {
-            onClick();
+            event.stopPropagation();
         }
     };