flexlayout-react 0.7.12 → 0.7.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChangeLog.txt +12 -0
- package/README.md +74 -71
- package/declarations/Rect.d.ts +1 -1
- package/declarations/Types.d.ts +1 -0
- package/declarations/model/IJsonModel.d.ts +3 -0
- package/declarations/model/TabNode.d.ts +1 -0
- package/declarations/model/TabSetNode.d.ts +1 -0
- package/declarations/view/Layout.d.ts +4 -2
- package/dist/flexlayout.js +14 -14
- package/dist/flexlayout_min.js +1 -1
- package/lib/DragDrop.js +1 -1
- package/lib/DragDrop.js.map +1 -1
- package/lib/PopupMenu.js +9 -4
- package/lib/PopupMenu.js.map +1 -1
- package/lib/Rect.js +1 -6
- package/lib/Rect.js.map +1 -1
- package/lib/Types.js +1 -0
- package/lib/Types.js.map +1 -1
- package/lib/model/Model.js +1 -0
- package/lib/model/Model.js.map +1 -1
- package/lib/model/TabNode.js +4 -0
- package/lib/model/TabNode.js.map +1 -1
- package/lib/model/TabSetNode.js +4 -0
- package/lib/model/TabSetNode.js.map +1 -1
- package/lib/view/BorderButton.js +7 -5
- package/lib/view/BorderButton.js.map +1 -1
- package/lib/view/FloatingWindow.js +3 -2
- package/lib/view/FloatingWindow.js.map +1 -1
- package/lib/view/Layout.js +117 -57
- package/lib/view/Layout.js.map +1 -1
- package/lib/view/Splitter.js +18 -6
- package/lib/view/Splitter.js.map +1 -1
- package/lib/view/TabButton.js +17 -12
- package/lib/view/TabButton.js.map +1 -1
- package/lib/view/TabOverflowHook.js +7 -4
- package/lib/view/TabOverflowHook.js.map +1 -1
- package/lib/view/TabSet.js +17 -5
- package/lib/view/TabSet.js.map +1 -1
- package/package.json +8 -3
- package/src/DragDrop.ts +2 -2
- package/src/PopupMenu.tsx +8 -4
- package/src/Rect.ts +2 -6
- package/src/Types.ts +1 -0
- package/src/model/IJsonModel.ts +5 -2
- package/src/model/Model.ts +1 -0
- package/src/model/TabNode.ts +5 -0
- package/src/model/TabSetNode.ts +6 -0
- package/src/view/BorderButton.tsx +13 -5
- package/src/view/FloatingWindow.tsx +3 -3
- package/src/view/Layout.tsx +145 -69
- package/src/view/Splitter.tsx +36 -7
- package/src/view/TabButton.tsx +22 -11
- package/src/view/TabOverflowHook.tsx +8 -5
- package/src/view/TabSet.tsx +20 -5
- package/style/_base.scss +21 -0
- package/style/dark.css +17 -0
- package/style/dark.css.map +1 -1
- package/style/dark.scss +6 -0
- package/style/gray.css +17 -0
- package/style/gray.css.map +1 -1
- package/style/gray.scss +6 -0
- package/style/light.css +561 -544
- package/style/light.css.map +1 -1
- package/style/light.scss +6 -0
- package/style/underline.css +17 -0
- package/style/underline.css.map +1 -1
- package/style/underline.scss +6 -0
package/ChangeLog.txt
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
0.7.14
|
|
2
|
+
Added attribute tabsetClassName to tab nodes, this will add the classname to the parent
|
|
3
|
+
tabset when there is a single stretched tab. Updated mosaic layout in demo to use this to color headers.
|
|
4
|
+
|
|
5
|
+
0.7.13
|
|
6
|
+
New attribute on tabset: enableSingleTabStretch will stretch a single tab to take up
|
|
7
|
+
all the remaining space and change the style to look like a header, combined with enableDrop
|
|
8
|
+
this can be used to create a Mosaic style layout (headed panels without tabs), see the new
|
|
9
|
+
Mosaic Style layout in the Demo.
|
|
10
|
+
The layout methods addTabToTabSet and addTabToActiveTabSet now return the added TabNode.
|
|
11
|
+
Fixed #352 - Layout.getDomRect returning null.
|
|
12
|
+
|
|
1
13
|
0.7.12
|
|
2
14
|
Action.setActiveTabset can now take undefined to unset the active tabset.
|
|
3
15
|
Added Tab attribute contentClassName to add a class to the tab content.
|
package/README.md
CHANGED
|
@@ -272,49 +272,50 @@ for example see the getDocument() callback in agGrid at https://www.ag-grid.com/
|
|
|
272
272
|
Attributes allowed in the 'global' element
|
|
273
273
|
|
|
274
274
|
|
|
275
|
-
| Attribute
|
|
276
|
-
|
|
277
|
-
| splitterSize
|
|
278
|
-
| splitterExtra
|
|
279
|
-
| legacyOverflowMenu
|
|
280
|
-
| enableEdgeDock
|
|
281
|
-
| enableRotateBorderIcons
|
|
282
|
-
| tabEnableClose
|
|
283
|
-
| tabCloseType
|
|
284
|
-
| tabEnableDrag
|
|
285
|
-
| tabEnableRename
|
|
286
|
-
| tabEnableFloat
|
|
287
|
-
| tabClassName
|
|
288
|
-
| tabContentClassName
|
|
289
|
-
| tabIcon
|
|
290
|
-
| tabEnableRenderOnDemand
|
|
291
|
-
| tabDragSpeed
|
|
292
|
-
| tabBorderWidth
|
|
293
|
-
| tabBorderHeight
|
|
294
|
-
| tabSetEnableDeleteWhenEmpty
|
|
295
|
-
| tabSetEnableDrop
|
|
296
|
-
| tabSetEnableDrag
|
|
297
|
-
| tabSetEnableDivide
|
|
298
|
-
| tabSetEnableMaximize
|
|
299
|
-
| tabSetEnableClose
|
|
300
|
-
| tabSetAutoSelectTab
|
|
301
|
-
| tabSetClassNameTabStrip
|
|
302
|
-
|
|
|
303
|
-
|
|
|
304
|
-
|
|
|
305
|
-
|
|
|
306
|
-
|
|
|
307
|
-
|
|
|
308
|
-
|
|
|
309
|
-
|
|
|
310
|
-
|
|
|
311
|
-
|
|
|
312
|
-
|
|
|
313
|
-
|
|
|
314
|
-
|
|
|
315
|
-
|
|
|
316
|
-
|
|
|
317
|
-
|
|
|
275
|
+
| Attribute | Default | Description |
|
|
276
|
+
|-------------------------------|:-------:|--------------------------------------------------------------------------------------------------------------|
|
|
277
|
+
| splitterSize | 8 | width in pixels of all splitters between tabsets/borders |
|
|
278
|
+
| splitterExtra | 0 | additional width in pixels of the splitter hit test area |
|
|
279
|
+
| legacyOverflowMenu | false | use the legacy text only overflow menu |
|
|
280
|
+
| enableEdgeDock | true | |
|
|
281
|
+
| enableRotateBorderIcons | true | boolean indicating if tab icons should rotate with the text in the left and right borders |
|
|
282
|
+
| tabEnableClose | true | allow user to close all tabs via close button |
|
|
283
|
+
| tabCloseType | 1 | see values in ICloseType |
|
|
284
|
+
| tabEnableDrag | true | allow user to drag all tabs to new location |
|
|
285
|
+
| tabEnableRename | true | allow user to rename all tabs by double clicking |
|
|
286
|
+
| tabEnableFloat | false | enable popouts in all tabs (in popout capable browser) |
|
|
287
|
+
| tabClassName | null | |
|
|
288
|
+
| tabContentClassName | null | |
|
|
289
|
+
| tabIcon | null | |
|
|
290
|
+
| tabEnableRenderOnDemand | true | whether to avoid rendering component until tab is visible |
|
|
291
|
+
| tabDragSpeed | 0.3 | CSS transition speed of drag outlines (in seconds) |
|
|
292
|
+
| tabBorderWidth | -1 | width when added to border, -1 will use border size |
|
|
293
|
+
| tabBorderHeight | -1 | height when added to border, -1 will use border size |
|
|
294
|
+
| tabSetEnableDeleteWhenEmpty | true | |
|
|
295
|
+
| tabSetEnableDrop | true | allow user to drag tabs into all tabsets |
|
|
296
|
+
| tabSetEnableDrag | true | allow user to drag tabs out of all tabsets |
|
|
297
|
+
| tabSetEnableDivide | true | allow user to drag tabs to region of all tabsets, splitting into new tabset |
|
|
298
|
+
| tabSetEnableMaximize | true | allow user to maximize all tabsets to fill view via maximize button |
|
|
299
|
+
| tabSetEnableClose | false | allow user to close all tabsets via close button |
|
|
300
|
+
| tabSetAutoSelectTab | true | whether to select new/moved tabs in all tabsets |
|
|
301
|
+
| tabSetClassNameTabStrip | null | height in pixels of tab strips in all tabsets |
|
|
302
|
+
| tabSetEnableSingleTabStretch | false | if a tabset has only a single tab then stretch the single tab to fill area and display in a header style |
|
|
303
|
+
| tabSetClassNameHeader | null | |
|
|
304
|
+
| tabSetEnableTabStrip | true | enable tab strip and allow multiple tabs in all tabsets |
|
|
305
|
+
| tabSetHeaderHeight | 0 | height of tabset header in pixels; if left as 0 then the value will be calculated from the current fontSize |
|
|
306
|
+
| tabSetTabStripHeight | 0 | height of tabset tab bar in pixels; if left as 0 then the value will be calculated from the current fontSize |
|
|
307
|
+
| borderBarSize | 0 | size of the border bars in pixels; if left as 0 then the value will be calculated from the current fontSize |
|
|
308
|
+
| borderEnableAutoHide | false | hide border if it has zero tabs |
|
|
309
|
+
| borderEnableDrop | true | allow user to drag tabs into this border |
|
|
310
|
+
| borderAutoSelectTabWhenOpen | true | whether to select new/moved tabs in border when the border is already open |
|
|
311
|
+
| borderAutoSelectTabWhenClosed | false | whether to select new/moved tabs in border when the border is curently closed |
|
|
312
|
+
| borderClassName | null | |
|
|
313
|
+
| borderSize | 200 | initial width in pixels for left/right borders, height for top/bottom borders |
|
|
314
|
+
| borderMinSize | 0 | minimum width in pixels for left/right borders, height for top/bottom borders |
|
|
315
|
+
| tabSetMinHeight | 0 | minimum width (in px) for all tabsets |
|
|
316
|
+
| tabSetMinWidth | 0 | minimum height (in px) for all tabsets |
|
|
317
|
+
| tabSetTabLocation | top | show tabs in location top or bottom |
|
|
318
|
+
| rootOrientationVertical | false | the top level 'row' will layout horizontally by default, set this option true to make it layout vertically |
|
|
318
319
|
|
|
319
320
|
|
|
320
321
|
## Row Attributes
|
|
@@ -353,6 +354,7 @@ Inherited defaults will take their value from the associated global attributes (
|
|
|
353
354
|
| floating | false | |
|
|
354
355
|
| className | *inherited* | class applied to tab button |
|
|
355
356
|
| contentClassName | *inherited* | class applied to tab content |
|
|
357
|
+
| tabsetClassName | undefined | class applied to parent tabset when this is the only tab and it is stretched to fill the tabset |
|
|
356
358
|
| icon | *inherited* | |
|
|
357
359
|
| enableRenderOnDemand | *inherited* | whether to avoid rendering component until tab is visible |
|
|
358
360
|
| borderWidth | *inherited* | width when added to border, -1 will use border size |
|
|
@@ -370,34 +372,35 @@ Inherited defaults will take their value from the associated global attributes (
|
|
|
370
372
|
|
|
371
373
|
Note: tabsets can be dynamically created as tabs are moved and deleted when all their tabs are removed (unless enableDeleteWhenEmpty is false).
|
|
372
374
|
|
|
373
|
-
| Attribute
|
|
374
|
-
|
|
375
|
-
| type
|
|
376
|
-
| weight
|
|
377
|
-
| width
|
|
378
|
-
| height
|
|
379
|
-
| name
|
|
380
|
-
| config
|
|
381
|
-
| selected
|
|
382
|
-
| active
|
|
383
|
-
| maximized
|
|
384
|
-
| enableClose
|
|
385
|
-
| id
|
|
386
|
-
| children
|
|
387
|
-
| enableDeleteWhenEmpty
|
|
388
|
-
| enableDrop
|
|
389
|
-
| enableDrag
|
|
390
|
-
| enableDivide
|
|
391
|
-
| enableMaximize
|
|
392
|
-
|
|
|
393
|
-
|
|
|
394
|
-
|
|
|
395
|
-
|
|
|
396
|
-
|
|
|
397
|
-
|
|
|
398
|
-
|
|
|
399
|
-
|
|
|
400
|
-
|
|
|
375
|
+
| Attribute | Default | Description |
|
|
376
|
+
|-------------------------|:-------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
377
|
+
| type | tabset | |
|
|
378
|
+
| weight | 100 | relative weight for sizing of this tabset in parent row |
|
|
379
|
+
| width | null | preferred pixel width |
|
|
380
|
+
| height | null | preferred pixel height |
|
|
381
|
+
| name | null | named tabsets will show a header bar above the tabs |
|
|
382
|
+
| config | null | a place to hold json config used in your own code |
|
|
383
|
+
| selected | 0 | index of selected/visible tab in tabset |
|
|
384
|
+
| active | false | whether tabset is currently active; this attribute can only be used in the initial configuration, to change the active tabset you should use the `setActiveTabset` action on the model |
|
|
385
|
+
| maximized | false | whether tabset is currently maximized to fill view |
|
|
386
|
+
| enableClose | false | allow user to close tabset via a close button |
|
|
387
|
+
| id | auto generated | |
|
|
388
|
+
| children | *required* | a list of tab nodes |
|
|
389
|
+
| enableDeleteWhenEmpty | *inherited* | |
|
|
390
|
+
| enableDrop | *inherited* | allow user to drag tabs into this tabset |
|
|
391
|
+
| enableDrag | *inherited* | allow user to drag tabs out this tabset |
|
|
392
|
+
| enableDivide | *inherited* | allow user to drag tabs to region of this tabset, splitting into new tabset |
|
|
393
|
+
| enableMaximize | *inherited* | allow user to maximize tabset to fill view via maximize button |
|
|
394
|
+
| enableSingleTabStretch | *inherited* | if the tabset has only a single tab then stretch the single tab to fill area and display in a header style |
|
|
395
|
+
| autoSelectTab | *inherited* | whether to select new/moved tabs in tabset |
|
|
396
|
+
| classNameTabStrip | *inherited* | |
|
|
397
|
+
| classNameHeader | *inherited* | |
|
|
398
|
+
| enableTabStrip | *inherited* | enable tab strip and allow multiple tabs in this tabset |
|
|
399
|
+
| headerHeight | *inherited* | |
|
|
400
|
+
| tabStripHeight | *inherited* | height in pixels of tab strip |
|
|
401
|
+
| tabLocation | *inherited* | show tabs in location top or bottom |
|
|
402
|
+
| minHeight | *inherited* | minimum height (in px) for this tabset |
|
|
403
|
+
| minWidth | *inherited* | minimum width (in px) for this tabset |
|
|
401
404
|
|
|
402
405
|
## Border Attributes
|
|
403
406
|
|
package/declarations/Rect.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export declare class Rect {
|
|
|
7
7
|
constructor(x: number, y: number, width: number, height: number);
|
|
8
8
|
static fromElement(element: Element): Rect;
|
|
9
9
|
clone(): Rect;
|
|
10
|
-
equals(rect: Rect): boolean;
|
|
10
|
+
equals(rect: Rect | null | undefined): boolean;
|
|
11
11
|
getBottom(): number;
|
|
12
12
|
getRight(): number;
|
|
13
13
|
getCenter(): {
|
package/declarations/Types.d.ts
CHANGED
|
@@ -57,6 +57,7 @@ export declare enum CLASSES {
|
|
|
57
57
|
FLEXLAYOUT__TAB_BORDER = "flexlayout__tab_border",
|
|
58
58
|
FLEXLAYOUT__TAB_BORDER_ = "flexlayout__tab_border_",
|
|
59
59
|
FLEXLAYOUT__TAB_BUTTON = "flexlayout__tab_button",
|
|
60
|
+
FLEXLAYOUT__TAB_BUTTON_STRETCH = "flexlayout__tab_button_stretch",
|
|
60
61
|
FLEXLAYOUT__TAB_BUTTON_CONTENT = "flexlayout__tab_button_content",
|
|
61
62
|
FLEXLAYOUT__TAB_BUTTON_LEADING = "flexlayout__tab_button_leading",
|
|
62
63
|
FLEXLAYOUT__TAB_BUTTON_OVERFLOW = "flexlayout__tab_button_overflow",
|
|
@@ -65,6 +65,7 @@ export interface IGlobalAttributes {
|
|
|
65
65
|
tabSetEnableDrag?: boolean;
|
|
66
66
|
tabSetEnableDrop?: boolean;
|
|
67
67
|
tabSetEnableMaximize?: boolean;
|
|
68
|
+
tabSetEnableSingleTabStretch?: boolean;
|
|
68
69
|
tabSetEnableTabStrip?: boolean;
|
|
69
70
|
tabSetHeaderHeight?: number;
|
|
70
71
|
tabSetMarginInsets?: IInsets;
|
|
@@ -92,6 +93,7 @@ export interface ITabSetAttributes {
|
|
|
92
93
|
enableDrag?: boolean;
|
|
93
94
|
enableDrop?: boolean;
|
|
94
95
|
enableMaximize?: boolean;
|
|
96
|
+
enableSingleTabStretch?: boolean;
|
|
95
97
|
enableTabStrip?: boolean;
|
|
96
98
|
headerHeight?: number;
|
|
97
99
|
height?: number;
|
|
@@ -118,6 +120,7 @@ export interface ITabAttributes {
|
|
|
118
120
|
component?: string;
|
|
119
121
|
config?: any;
|
|
120
122
|
contentClassName?: string;
|
|
123
|
+
tabsetClassName?: string;
|
|
121
124
|
enableClose?: boolean;
|
|
122
125
|
enableDrag?: boolean;
|
|
123
126
|
enableFloat?: boolean;
|
|
@@ -31,6 +31,7 @@ export declare class TabNode extends Node implements IDraggable {
|
|
|
31
31
|
isEnableRename(): boolean;
|
|
32
32
|
getClassName(): string | undefined;
|
|
33
33
|
getContentClassName(): string | undefined;
|
|
34
|
+
getTabSetClassName(): string | undefined;
|
|
34
35
|
isEnableRenderOnDemand(): boolean;
|
|
35
36
|
toJson(): IJsonTabNode;
|
|
36
37
|
}
|
|
@@ -28,6 +28,7 @@ export declare class TabSetNode extends Node implements IDraggable, IDropTarget
|
|
|
28
28
|
isEnableDivide(): boolean;
|
|
29
29
|
isEnableMaximize(): boolean;
|
|
30
30
|
isEnableClose(): boolean;
|
|
31
|
+
isEnableSingleTabStretch(): boolean;
|
|
31
32
|
canMaximize(): boolean;
|
|
32
33
|
isEnableTabStrip(): boolean;
|
|
33
34
|
isAutoSelectTab(): boolean;
|
|
@@ -126,13 +126,15 @@ export declare class Layout extends React.Component<ILayoutProps, ILayoutState>
|
|
|
126
126
|
* Adds a new tab to the given tabset
|
|
127
127
|
* @param tabsetId the id of the tabset where the new tab will be added
|
|
128
128
|
* @param json the json for the new tab node
|
|
129
|
+
* @returns the added tab node or undefined
|
|
129
130
|
*/
|
|
130
|
-
addTabToTabSet(tabsetId: string, json: IJsonTabNode):
|
|
131
|
+
addTabToTabSet(tabsetId: string, json: IJsonTabNode): TabNode | undefined;
|
|
131
132
|
/**
|
|
132
133
|
* Adds a new tab to the active tabset (if there is one)
|
|
133
134
|
* @param json the json for the new tab node
|
|
135
|
+
* @returns the added tab node or undefined
|
|
134
136
|
*/
|
|
135
|
-
addTabToActiveTabSet(json: IJsonTabNode):
|
|
137
|
+
addTabToActiveTabSet(json: IJsonTabNode): TabNode | undefined;
|
|
136
138
|
/**
|
|
137
139
|
* Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
|
|
138
140
|
* @param dragText the text to show on the drag panel
|