flexlayout-react 0.8.6 → 0.8.8

package/ChangeLog.txt

@@ -1,3 +1,12 @@
+0.8.8
+Enable esc to close overflow menu 
+Prevent initial reposition flash when there are hidden tabs
+Removed Roboto font from demo
+
+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.

package/README.md

@@ -223,6 +223,55 @@ 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/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.6";
+export declare const FlexLayoutVersion = "0.8.8";
 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: {