flexlayout-react 0.5.17 → 0.5.21

package/ChangeLog.txt

@@ -1,3 +1,23 @@
+0.5.21
+Fixed copying stylesheet links for popout windows when cssRules throw exception.
+Added option, enableUseVisibility, to allow use of visibility: hidden rather than display:none for hiding elements.
+
+0.5.20
+Added Cypress Tests 
+Fixed bug with tab icon not showing
+
+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
+
 0.5.17
 New global option, splitterExtra, to allow splitters to have an extended hit test areas. 
 This makes it easier to use narrow splitters.

package/README.md

@@ -6,7 +6,7 @@ FlexLayout is a layout manager that arranges React components in multiple tab se
 
 [Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.5/demo/index.html)
 
-Try it now using [JSFiddle](https://jsfiddle.net/9x6hecdw/)
+Try it now using [JSFiddle](https://jsfiddle.net/7oe4q2pc/)
 
 <!-- [API Doc](./typedoc/index.html) -->
 
@@ -66,25 +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. |
+#### 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.
 
@@ -104,38 +118,36 @@ 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,
+                children: [
+                    {
+                        type: "tab",
+                        name: "One",
+                        component: "button",
+                    }
+                ]
+            },
+            {
+                type: "tabset",
+                weight: 50,
+                children: [
+                    {
+                        type: "tab",
+                        name: "Two",
+                        component: "button",
+                    }
+                ]
+            }
+        ]
+    }
 };
 ```
 
@@ -173,7 +185,7 @@ ReactDOM.render(<Main/>, document.getElementById("container"));
 
 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/9x6hecdw/) 
+Try it now using [JSFiddle](https://jsfiddle.net/7oe4q2pc/) 
 
 A simple Create React App (CRA) example (using typescript) can be found here:
 
@@ -207,50 +219,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:
@@ -348,6 +360,7 @@ Attributes allowed in the 'global' element
 | tabSetHeaderHeight | 0 | height of tabset header in pixels; if left as 0 then the value will be calculated from the current fontSize |
 | tabSetTabStripHeight | 0 | height of tabset tab bar in pixels; if left as 0 then the value will be calculated from the current fontSize |
 | borderBarSize | 0 | size of the border bars in pixels; if left as 0 then the value will be calculated from the current fontSize |
+| borderEnableAutoHide | false | hide border if it has zero tabs |
 | borderEnableDrop | true | allow user to drag tabs into this border |
 | borderAutoSelectTabWhenOpen | true | whether to select new/moved tabs in border when the border is already open |
 | borderAutoSelectTabWhenClosed | false | whether to select new/moved tabs in border when the border is curently closed |
@@ -455,6 +468,7 @@ Inherited defaults will take their value from the associated global attributes (
 | id | auto generated | border_ + border name e.g. border_left |
 | config | null | a place to hold json config used in your own code |
 | show | true | show/hide this border |
+| enableAutoHide | false | hide border if it has zero tabs |
 | children | *required* | a list of tab nodes |
 | barSize | *inherited* | size of this border's bar in pixels; if left as 0 then the value will be calculated from the current fontSize |
 | enableDrop | *inherited* | |
@@ -567,13 +581,6 @@ First install dependencies:
 yarn install
 ```
 
-Install the peer dependencies:
-
-```
-yarn add react
-yarn add react-dom
-```
-
 Compile the project and run the examples:
  
 ```
@@ -585,4 +592,16 @@ Open your browser at http://localhost:8080/examples/ to show the examples direct
 The 'yarn start' command will watch for changes to flexlayout and example source, so you can make changes to the code
 and then refresh the browser to see the result.
 
+To run the tests in the Cypress interactive runner use:
+
+```
+yarn cypress
+```
+
+![FlexLayout Cypress tests](/../screenshots/github_images/CypressTests.png?raw=true "Cypress interactive runner Screenshot")
+
+
 To build the npm distribution run 'yarn build', this will create the artifacts in the dist dir.
+
+
+

package/declarations/Rect.d.ts

@@ -10,6 +10,10 @@ declare class Rect {
     equals(rect: Rect): boolean;
     getBottom(): number;
     getRight(): number;
+    getCenter(): {
+        x: number;
+        y: number;
+    };
     positionElement(element: HTMLElement, position?: string): void;
     styleWithPosition(style: Record<string, any>, position?: string): Record<string, any>;
     contains(x: number, y: number): boolean;

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/model/BorderNode.d.ts

@@ -29,6 +29,7 @@ declare class BorderNode extends Node implements IDropTarget {
     getConfig(): any;
     isMaximized(): boolean;
     isShowing(): boolean;
+    isAutoHide(): boolean;
     toJson(): IJsonBorderNode;
 }
 export default BorderNode;

package/declarations/model/IJsonModel.d.ts

@@ -31,10 +31,12 @@ export interface IGlobalAttributes {
     borderAutoSelectTabWhenOpen?: boolean;
     borderBarSize?: number;
     borderClassName?: string;
+    borderEnableAutoHide?: boolean;
     borderEnableDrop?: boolean;
     borderMinSize?: number;
     borderSize?: number;
     enableEdgeDock?: boolean;
+    enableUseVisibility?: boolean;
     marginInsets?: IInsets;
     rootOrientationVertical?: boolean;
     splitterExtra?: number;
@@ -127,6 +129,7 @@ export interface IBorderAttributes {
     barSize?: number;
     className?: string;
     config?: any;
+    enableAutoHide?: boolean;
     enableDrop?: boolean;
     minSize?: number;
     selected?: number;

package/declarations/model/Model.d.ts

@@ -31,6 +31,7 @@ declare class Model {
      */
     getRoot(): RowNode;
     isRootOrientationVertical(): boolean;
+    isUseVisibility(): boolean;
     /**
      * Gets the
      * @returns {BorderSet|*}

package/declarations/view/Layout.d.ts

@@ -10,6 +10,9 @@ import TabSetNode from "../model/TabSetNode";
 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;
@@ -42,6 +45,10 @@ export interface ILayoutProps {
         invalidated?: () => void;
         cursor?: string | undefined;
     };
+    onRenderDragRect?: DragRectRenderCallback;
+    onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
+    onContextMenu?: NodeMouseEvent;
+    onAuxMouseClick?: NodeMouseEvent;
 }
 export interface IFontValues {
     size?: string;
@@ -71,6 +78,7 @@ export interface ILayoutState {
     calculatedTabBarSize: number;
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
+    showHiddenBorder: DockLocation;
 }
 export interface IIcons {
     close?: React.ReactNode;
@@ -111,7 +119,7 @@ export declare class Layout extends React.Component<ILayoutProps, ILayoutState>
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
      * @param dragText the text to show on the drag panel
      * @param json the json for the new tab node
-     * @param onDrop a callback to call when the drag is complete
+     * @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, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
     /**
@@ -120,8 +128,8 @@ export declare class Layout extends React.Component<ILayoutProps, ILayoutState>
      *
      * @param dragText the text to show on the drag panel
      * @param json the json for the new tab node
-     * @param onDrop a callback to call when the drag is complete
+     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
      */
-    addTabWithDragAndDropIndirect(dragText: string, json: IJsonTabNode, onDrop?: () => void): void;
+    addTabWithDragAndDropIndirect(dragText: string, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
 }
 export default Layout;

package/declarations/view/Tab.d.ts

@@ -1 +1 @@
-export {};
+export declare function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean): void;