flexlayout-react 0.5.20 → 0.6.2

package/ChangeLog.txt

@@ -1,3 +1,25 @@
+0.6.2
+Extended icons prop to allow use of functions to set icons.
+Added onShowOverflowMenu callback for handling the display of the tab overflow menu.
+
+0.6.1
+Use portal for drag rectangle to preserve React context in onRenderTab.
+
+0.6.0
+Changed icons to use svg images, these will now scale with the font size.
+Improved element spacing, removed most margin/padding spacers.
+The overflow menu and drag rectangle will now show the tab icon and content as rendered in the tab.
+Added altName attribute to TabNode, this will be used as the name in the overflow menu if there is no
+name attribute (e.g the tab has just an icon).
+Changed the drag outline colors from red/green to light blue/green.
+Removed closeIcon prop from Layout, use the icons property instead.
+Changed onRenderDragRect callback to take a ReactElement rather than a string, the content now
+contains the tabbutton as rendered.
+
+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

package/README.md

@@ -4,9 +4,9 @@ FlexLayout is a layout manager that arranges React components in multiple tab se
 
 ![FlexLayout Demo Screenshot](/../screenshots/github_images/v0.5/demo1.png?raw=true "FlexLayout Demo Screenshot")
 
-[Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.5/demo/index.html)
+[Run the Demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/demo/index.html)
 
-Try it now using [JSFiddle](https://jsfiddle.net/7oe4q2pc/)
+Try it now using [JSFiddle](https://jsfiddle.net/18zfp0qm/)
 
 <!-- [API Doc](./typedoc/index.html) -->
 
@@ -80,7 +80,7 @@ The `<Layout>` component renders the tabsets and splitters, it takes the followi
 | 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 |
+| icons           | 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 |
 | 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 |
@@ -96,6 +96,7 @@ The `<Layout>` component renders the tabsets and splitters, it takes the followi
 | 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 |
+| onShowOverflowMenu | callback for handling the display of the tab overflow menu |
 | 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  |
 
@@ -185,7 +186,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/7oe4q2pc/) 
+Try it now using [JSFiddle](https://jsfiddle.net/18zfp0qm/) 
 
 A simple Create React App (CRA) example (using typescript) can be found here:
 
@@ -213,7 +214,7 @@ The model json contains 3 top level elements:
 
 Weights on rows and tabsets specify the relative weight of these nodes within the parent row, the actual values do not matter just their relative values (ie two tabsets of weights 30,70 would render the same if they had weights of 3,7).
 
-NOTE: the easiest way to create your initial layout JSON is to use the [demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.5/demo/index.html) app, modify one of the 
+NOTE: the easiest way to create your initial layout JSON is to use the [demo](https://rawgit.com/caplin/FlexLayout/demos/demos/v0.6/demo/index.html) app, modify one of the 
 existing layouts by dragging/dropping and adding nodes then press the 'Show Layout JSON in console' button to print the JSON to the browser developer console.
 
 
@@ -335,6 +336,7 @@ Attributes allowed in the 'global' element
 | ------------- |:-------------:| -----|
 | splitterSize | 8 | width in pixels of all splitters between tabsets/borders |
 | splitterExtra | 0 | additional width in pixels of the splitter hit test area |
+| legacyOverflowMenu | false | use the legacy text only overflow menu |
 | enableEdgeDock | true | |
 | tabEnableClose | true | allow user to close all tabs via close button |
 | tabCloseType | 1 | see values in ICloseType |
@@ -395,7 +397,8 @@ Inherited defaults will take their value from the associated global attributes (
 | Attribute | Default | Description  |
 | ------------- |:-------------:| -----|
 | type | tab | |
-| name | *required* | internal unique string identifying tab (for factory) |
+| name | *required* | name of tab to be displayed in the tab button |
+| altName | *optional* | if there is no name specifed then this value will be used in the overflow menu |
 | component | *required* | string identifying which component to run (for factory) |
 | config | null | a place to hold json config for the hosted component |
 | id | auto generated | |
@@ -581,13 +584,6 @@ First install dependencies:
 yarn install
 ```
 
-Install the peer dependencies:
-
-```
-yarn add react
-yarn add react-dom
-```
-
 Compile the project and run the examples:
  
 ```

package/declarations/Types.d.ts

@@ -53,8 +53,10 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_CONTENT = "flexlayout__tab_button_content",
     FLEXLAYOUT__TAB_BUTTON_LEADING = "flexlayout__tab_button_leading",
     FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",
+    FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT = "flexlayout__tab_button_overflow_count",
     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",

package/declarations/model/IJsonModel.d.ts

@@ -36,6 +36,8 @@ export interface IGlobalAttributes {
     borderMinSize?: number;
     borderSize?: number;
     enableEdgeDock?: boolean;
+    enableUseVisibility?: boolean;
+    legacyOverflowMenu?: boolean;
     marginInsets?: IInsets;
     rootOrientationVertical?: boolean;
     splitterExtra?: number;
@@ -104,6 +106,7 @@ export interface ITabSetAttributes {
     width?: number;
 }
 export interface ITabAttributes {
+    altName?: string;
     borderHeight?: number;
     borderWidth?: number;
     className?: string;

package/declarations/model/Model.d.ts

@@ -31,6 +31,7 @@ declare class Model {
      */
     getRoot(): RowNode;
     isRootOrientationVertical(): boolean;
+    isUseVisibility(): boolean;
     /**
      * Gets the
      * @returns {BorderSet|*}
@@ -59,6 +60,7 @@ declare class Model {
      */
     toJson(): IJsonModel;
     getSplitterSize(): number;
+    isLegacyOverflowMenu(): boolean;
     getSplitterExtra(): number;
     isEnableEdgeDock(): boolean;
     /**

package/declarations/view/Icons.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const CloseIcon: () => JSX.Element;
+export declare const MaximizeIcon: () => JSX.Element;
+export declare const OverflowIcon: () => JSX.Element;
+export declare const PopoutIcon: () => JSX.Element;
+export declare const RestoreIcon: () => JSX.Element;

package/declarations/view/Layout.d.ts

@@ -10,9 +10,16 @@ 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 DragRectRenderCallback = (content: React.ReactElement | undefined, 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 declare type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {
+    index: number;
+    node: TabNode;
+}[], onSelect: (item: {
+    index: number;
+    node: TabNode;
+}) => void) => void;
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
@@ -20,7 +27,6 @@ export interface ILayoutProps {
     fontFamily?: string;
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => ITitleObject | React.ReactNode | undefined;
-    closeIcon?: React.ReactNode;
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
@@ -49,6 +55,7 @@ export interface ILayoutProps {
     onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
     onContextMenu?: NodeMouseEvent;
     onAuxMouseClick?: NodeMouseEvent;
+    onShowOverflowMenu?: ShowOverflowMenuCallback;
 }
 export interface IFontValues {
     size?: string;
@@ -79,14 +86,18 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
+    portal?: React.ReactNode;
 }
 export interface IIcons {
-    close?: React.ReactNode;
-    closeTabset?: React.ReactNode;
-    popout?: React.ReactNode;
-    maximize?: React.ReactNode;
-    restore?: React.ReactNode;
-    more?: React.ReactNode;
+    close?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
+    closeTabset?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
+    popout?: (React.ReactNode | ((tabNode: TabNode) => React.ReactNode));
+    maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
+    restore?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
+    more?: (React.ReactNode | ((tabSetNode: (TabSetNode | BorderNode), hiddenTabs: {
+        node: TabNode;
+        index: number;
+    }[]) => React.ReactNode));
 }
 export interface ICustomDropDestination {
     rect: Rect;
@@ -121,7 +132,7 @@ export declare class Layout extends React.Component<ILayoutProps, ILayoutState>
      * @param json the json for the new tab node
      * @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;
+    addTabWithDragAndDrop(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
     /**
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
      * mouse down on the panel
@@ -130,6 +141,8 @@ export declare class Layout extends React.Component<ILayoutProps, ILayoutState>
      * @param json the json for the new tab node
      * @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?: (node?: Node, event?: Event) => void): void;
+    addTabWithDragAndDropIndirect(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
+    showPortal: (control: React.ReactNode, element: HTMLElement) => void;
+    hidePortal: () => void;
 }
 export default Layout;

package/declarations/view/MenuTabButton.d.ts

@@ -0,0 +1 @@
+export {};

package/declarations/view/TabButtonStamp.d.ts

@@ -0,0 +1 @@
+export {};

package/declarations/view/Utils.d.ts

@@ -0,0 +1 @@
+export {};