flexlayout-react 0.8.5 → 0.8.7

package/ChangeLog.txt

@@ -1,3 +1,13 @@
+0.8.7
+Improved tab scrolling into visible area
+Added sections about tab and tabset customization to readme
+
+0.8.6
+Restructured scss files to remove use of deprecated @import rule
+Added combined.css containing all themes.
+Updated demo to use combined.css for simple theme switching using class names
+Added option in demo to show the layout structure
+
 0.8.5
 Changed the mini scrollbar to only show when tabs are hovered over 
 

package/README.md

@@ -30,7 +30,7 @@ Features:
 *   popout tabs into new browser windows
 *	submodels, allow layouts inside layouts
 *	tab renaming (double click tab text to rename)
-*	theming - light, underline, gray, round and dark
+*	theming - light, dark, underline, gray, rounded and combined
 *	works on mobile devices (iPad, Android)
 *   add tabs using drag, add to active tab set, add to tab set by id
 *	tab and tab set attributes: enableTabStrip, enableDock, enableDrop...
@@ -52,7 +52,7 @@ Import FlexLayout in your modules:
 import {Layout, Model} from 'flexlayout-react';
 ```
 
-Include the light, underline, gray or dark theme by either:
+Include the light, dark, underline, gray, rounded or combined theme by either:
 
 Adding an additional import:
 
@@ -66,6 +66,9 @@ or by adding the css to your html:
 <link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
 ```
 
+[How to change the theme dynamically in code](#dynamically-changing-the-theme)
+
+
 ## Usage
 
 The `<Layout>` component renders the tab sets and splitters, it takes the following props:
@@ -173,6 +176,10 @@ The layout element is built up using 3 types of 'node':
 
 The layout structure is defined with rows within rows that contain tabsets that themselves contain tabs.
 
+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")
+
 The optional borders element is made up of border nodes
 
 * border - borders contain a list of tabs and the index of the selected tab, they can only be used in the borders
@@ -196,6 +203,75 @@ tabs or drag and drop).
  global: {tabSetEnableTabStrip:false},
 ```
 
+## Dynamically Changing the Theme
+
+The 'combined.css' theme contains all the other themes and can be used for theme switching.
+
+When using combined.css, add a className (of the form "flexlayout__theme_[theme name]") to the div containing the `<Layout>` to select the applied theme.
+
+For example: 
+```
+    <div ref={containerRef} className="flexlayout__theme_light">
+        <Layout model={model} factory={factory} />
+    </div>
+```
+
+Change the theme in code by changing the className on the containing div.
+
+For example:
+```
+    containerRef.current!.className = "flexlayout__theme_dark"
+```
+
+## Customizing Tabs
+
+You can use the `<Layout>` prop onRenderTab to customize the tab rendering:
+
+
+![FlexLayout Tab structure](Screenshot_customize_tab.png?raw=true "Tab structure")
+
+Update the renderValues parameter as needed:
+
+renderValues.leading : the red block
+
+renderValues.content : the green block
+
+renderValues.buttons : the yellow block
+
+For example:
+
+```
+onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
+    // renderValues.leading = <img style={{width:"1em", height:"1em"}}src="images/folder.svg"/>;
+    // renderValues.content += " *";
+    renderValues.buttons.push(<img key="menu" style={{width:"1em", height:"1em"}} src="images/menu.svg"/>);
+}
+```
+
+## Customizing Tab sets
+
+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")
+
+Update the renderValues parameter as needed:
+
+renderValues.stickyButtons : the red block
+
+renderValues.buttons : the green block
+
+
+For example:
+
+```
+onRenderTabSet = (node: (TabSetNode | BorderNode), renderValues: ITabSetRenderValues) => {
+    renderValues.stickyButtons.push(<img key="add" style={{width:"1em", height:"1em"}} src="images/add.svg"/>);
+
+    renderValues.buttons.push(<img key="menu" style={{width:"1em", height:"1em"}} src="images/menu.svg"/>);
+}
+```
+
 ## Model Actions
 
 Once the model json has been loaded all changes to the model are applied through actions.

package/declarations/Rect.d.ts

@@ -23,6 +23,8 @@ export declare class Rect {
     equalSize(rect: Rect | null | undefined): boolean;
     getBottom(): number;
     getRight(): number;
+    get bottom(): number;
+    get right(): number;
     getCenter(): {
         x: number;
         y: number;

package/declarations/Types.d.ts

@@ -30,7 +30,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER = "flexlayout__error_boundary_container",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
     FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
-    FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
     FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
     FLEXLAYOUT__LAYOUT_OVERLAY = "flexlayout__layout_overlay",
@@ -56,11 +55,9 @@ export declare enum CLASSES {
     FLEXLAYOUT__TABSET = "flexlayout__tabset",
     FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
     FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
-    FLEXLAYOUT__TABSET_HEADER_SIZER = "flexlayout__tabset_header_sizer",
     FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
     FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
     FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
-    FLEXLAYOUT__TABSET_SIZER = "flexlayout__tabset_sizer",
     FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
     FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
     FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
@@ -80,8 +77,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
     FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
     FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
-    FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
-    FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",
     FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
     FLEXLAYOUT__TAB_TOOLBAR_ICON = "flexlayout__tab_toolbar_icon",

package/declarations/view/Layout.d.ts

@@ -12,6 +12,8 @@ export interface ILayoutProps {
     model: Model;
     /** factory function for creating the tab components */
     factory: (node: TabNode) => React.ReactNode;
+    /** sets a top level class name on popout windows */
+    popoutClassName?: string;
     /** object mapping keys among close, maximize, restore, more, popout to React nodes to use in place of the default icons, can alternatively return functions for creating the React nodes */
     icons?: IIcons;
     /** 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 */
@@ -96,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.5";
+export declare const FlexLayoutVersion = "0.8.7";
 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: {