flexlayout-react 0.5.18 → 0.5.19

package/ChangeLog.txt

@@ -1,3 +1,11 @@
+0.5.19
+Added onRenderFloatingTabPlaceholder callback prop for rendering the floating tab placeholder.
+Changed style sheets to use CSS custom properties (variables) for several values.
+Fix selected index in single empty tabset.
+Added onContextMenu callback prop for handling context menus on tabs and tabsets.
+Added onAuxMouseClick callback prop for handling mouse clicks on tabs and tabsets 
+with alt, meta, shift keys, also handles center mouse clicks
+
 0.5.18
 Added onRenderDragRect callback prop for rendering the drag rectangles
 New border attribute: enableAutoHide, to hide border if it has zero tabs

package/README.md

@@ -66,26 +66,39 @@ Include the light, gray or dark style in your html:
 The `<Layout>` component renders the tabsets and splitters, it takes the following props:
 
 
-| Prop            | Required/Optional | Description       |
-| --------------- |:-----------------:| ----------------- |
-| model           | required          | the layout model  |
-| factory         | required          | a factory function for creating React components |
-| font        | optional          | the tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}|
-| iconFactory     | optional          | a factory function for creating icon components for tab bar buttons |
-| titleFactory    | optional          | a factory function for creating title components for tab bar buttons |
-| icons           | optional          | object mapping keys among `close`, `maximize`, `restore`, `more`, `popout` to React nodes to use in place of the default icons |
-| onAction        | optional          | function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning `undefined` from the function will halt the action, otherwise return the action to continue |
-| onRenderTab     | optional          | function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized |
-| onRenderTabSet  | optional          | function called when rendering a tabset, allows header and buttons to be customized |
-| onModelChange   | optional          | function called when model has changed |
-| onExternalDrag  | optional          | function called when an external object (not a tab) gets dragged onto the layout, with a single `dragenter` argument. Should return either `undefined` to reject the drag/drop or an object with keys `dragText`, `json`, and optionally `onDrop`, to create a tab via drag (similar to a call to `addTabToTabSet`). Function `onDrop` is passed the added tab `Node` and the `drop` `DragEvent`, unless the drag was canceled. |
-| classNameMapper | optional          | function called with default css class name, return value is class name that will be used. Mainly for use with css modules.|
-| i18nMapper      | optional          | function called for each I18nLabel to allow user translation, currently used for tab and tabset move messages, return undefined to use default values |
-| supportsPopout  | optional          | if left undefined will do simple check based on userAgent |
-| popoutURL      | optional          | URL of popout window relative to origin, defaults to popout.html |
-| realtimeResize      | optional          | boolean value, defaults to false, resize tabs as splitters are dragged. Warning: this can cause resizing to become choppy when tabs are slow to draw |
-| onTabDrag       | optional          | function called while dragging a tab, whether from the layout or using `addTabWithDragAndDrop`. Called with the `TabNode` being dragged / the tab json from `addTabWithDragAndDrop`, the `TabNode` being dragged over, the x and y coordinates relative to the dragged-over tab, and the `DockLocation` that would be used. Should return undefined for default behavior, or an object containing `x`, `y`, `width`, `height`, `callback`, `cursor` fields. Coordinates are in pixels relative to the dragged-over tab, and `callback` will be called with the same arguments if the tab is dropped. `cursor` is an optional string field that should contain a CSS cursor value, such as `copy` or `row-resize`. If `callback` is called, the layout does not perform its default behavior on drop. |
-| onRenderDragRect      | optional          | callback for rendering the drag rectangles |
+#### Required props:
+
+
+| Prop            | Description       |
+| --------------- | ----------------- |
+| model           | the layout model  |
+| factory         | a factory function for creating React components |
+
+#### Optional props:
+
+
+| Prop            | Description       |
+| --------------- | ----------------- |
+| font            | the tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}|
+| icons           | object mapping keys among `close`, `maximize`, `restore`, `more`, `popout` to React nodes to use in place of the default icons |
+| onAction        | function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning `undefined` from the function will halt the action, otherwise return the action to continue |
+| onRenderTab     | function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized |
+| onRenderTabSet  | function called when rendering a tabset, allows header and buttons to be customized |
+| onModelChange   | function called when model has changed |
+| onExternalDrag  | function called when an external object (not a tab) gets dragged onto the layout, with a single `dragenter` argument. Should return either `undefined` to reject the drag/drop or an object with keys `dragText`, `json`Drop`, to create a tab via drag (similar to a call to `addTabToTabSet`). Function `onDrop` is passed the added tab `Node` and the `drop` `DragEvent`, unless the drag was canceled. |
+| classNameMapper | function called with default css class name, return value is class name that will be used. Mainly for use with css modules.|
+| i18nMapper      | function called for each I18nLabel to allow user translation, currently used for tab and tabset move messages, return undefined to use default values |
+| supportsPopout  | if left undefined will do simple check based on userAgent |
+| popoutURL       | URL of popout window relative to origin, defaults to popout.html |
+| realtimeResize  | boolean value, defaults to false, resize tabs as splitters are dragged. Warning: this can cause resizing to become choppy when tabs are slow to draw |
+| onTabDrag       | function called while dragging a tab, whether from the layout or using `addTabWithDragAndDrop`. Called with the `TabNode` being dragged / the tab json from `addTabWithDragAndDrop`, the `TabNode` being dragged over, the x and y coordinates relative to the dragged-over tab, and the `DockLocation` that would be used. Should return undefined for default behavior, or an object containing `x`, `y`, `width`, `height`, `callback`, `cursor` fields. Coordinates are in pixels relative to the dragged-over tab, and `callback` will be called with the same arguments if the tab is dropped. `cursor` is an optional string field that should contain a CSS cursor value, such as `copy` or `row-resize`. If `callback` is called, the layout does not perform its default behavior on drop. |
+| onRenderDragRect | callback for rendering the drag rectangles |
+| onRenderFloatingTabPlaceholder | callback for rendering the floating tab placeholder |
+| onContextMenu    | callback for handling context actions on tabs and tabsets |
+| onAuxMouseClick  | callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks |
+| iconFactory      | a factory function for creating icon components for tab bar buttons. <br/><br/> NOTE: for greater customization of the tab use onRenderTab instead of this callback |
+| titleFactory     | a factory function for creating title components for tab bar buttons. <br /><br /> NOTE: for greater customization of the tab use onRenderTab instead of this callback  |
+
 
 The model is tree of Node objects that define the structure of the layout.
 
@@ -105,38 +118,38 @@ render() {
 
 ```javascript
 var json = {
-	global: {},
-	borders: [],
-	layout:{
-		"type": "row",
-		"weight": 100,
-		"children": [
-			{
-				"type": "tabset",
-				"weight": 50,
-				"selected": 0,
-				"children": [
-					{
-						"type": "tab",
-						"name": "FX",
-						"component":"grid",
-					}
-				]
-			},
-			{
-				"type": "tabset",
-				"weight": 50,
-				"selected": 0,
-				"children": [
-					{
-						"type": "tab",
-						"name": "FI",
-						"component":"grid",
-					}
-				]
-			}
-		]
-	}
+    global: {},
+    borders: [],
+    layout:{
+        "type": "row",
+        "weight": 100,
+        "children": [
+            {
+                "type": "tabset",
+                "weight": 50,
+                "selected": 0,
+                "children": [
+                    {
+                        "type": "tab",
+                        "name": "FX",
+                        "component":"grid",
+                    }
+                ]
+            },
+            {
+                "type": "tabset",
+                "weight": 50,
+                "selected": 0,
+                "children": [
+                    {
+                        "type": "tab",
+                        "name": "FI",
+                        "component":"grid",
+                    }
+                ]
+            }
+        ]
+    }
 };
 ```
 
@@ -208,50 +221,50 @@ existing layouts by dragging/dropping and adding nodes then press the 'Show Layo
 
 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",
-				}
-			]
-		}
-	]
+    "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:

package/declarations/Types.d.ts

@@ -8,6 +8,8 @@ export declare enum CLASSES {
     FLEXLAYOUT__BORDER_BUTTON_TRAILING = "flexlayout__border_button_trailing",
     FLEXLAYOUT__BORDER_BUTTON__SELECTED = "flexlayout__border_button--selected",
     FLEXLAYOUT__BORDER_BUTTON__UNSELECTED = "flexlayout__border_button--unselected",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW = "flexlayout__border_toolbar_button_overflow",
+    FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ = "flexlayout__border_toolbar_button_overflow_",
     FLEXLAYOUT__BORDER_INNER = "flexlayout__border_inner",
     FLEXLAYOUT__BORDER_INNER_ = "flexlayout__border_inner_",
     FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER = "flexlayout__border_inner_tab_container",
@@ -25,6 +27,7 @@ export declare enum CLASSES {
     FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
     FLEXLAYOUT__OUTLINE_RECT = "flexlayout__outline_rect",
+    FLEXLAYOUT__OUTLINE_RECT_EDGE = "flexlayout__outline_rect_edge",
     FLEXLAYOUT__SPLITTER = "flexlayout__splitter",
     FLEXLAYOUT__SPLITTER_EXTRA = "flexlayout__splitter_extra",
     FLEXLAYOUT__SPLITTER_ = "flexlayout__splitter_",
@@ -59,5 +62,8 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ = "flexlayout__tab_toolbar_button-",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT = "flexlayout__tab_toolbar_button-float",
     FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",
-    FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close"
+    FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
+    FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",
+    FLEXLAYOUT__POPUP_MENU_ITEM = "flexlayout__popup_menu_item",
+    FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu"
 }

package/declarations/view/Layout.d.ts

@@ -11,6 +11,8 @@ import Rect from "../Rect";
 import { IJsonTabNode } from "../model/IJsonModel";
 export declare type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
 export declare type DragRectRenderCallback = (text: String, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
+export declare type FloatingTabPlaceholderRenderCallback = (dockPopout: () => void, showPopout: () => void) => React.ReactElement | undefined;
+export declare type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
@@ -44,6 +46,9 @@ export interface ILayoutProps {
         cursor?: string | undefined;
     };
     onRenderDragRect?: DragRectRenderCallback;
+    onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
+    onContextMenu?: NodeMouseEvent;
+    onAuxMouseClick?: NodeMouseEvent;
 }
 export interface IFontValues {
     size?: string;