Skip to content

Commit d09e465

Browse files
nealusnealus
committed
restore simple example
1 parent 43fd100 commit d09e465

3 files changed

Lines changed: 148 additions & 34 deletions

File tree

‎README.md‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,15 @@ Features:
3030
* popout tabs into new browser windows
3131
* submodels, allow layouts inside layouts
3232
* tab renaming (double click tab text to rename)
33-
* theming - light, gray and dark
33+
* theming - light, underline, gray and dark
3434
* touch events - works on mobile devices (iPad, Android)
3535
* add tabs using drag, indirect drag, add to active tabset, add to tabset by id
3636
* preferred pixel size tabsets (try to keep their size when window resizes)
3737
* headed tabsets
3838
* tab and tabset attributes: enableHeader, enableTabStrip, enableDock, enableDrop...
3939
* customizable tabs and tabset header rendering
40-
* esc cancels drag
4140
* typescript type declarations included
4241

43-
4442
## Installation
4543

4644
FlexLayout is in the npm repository. Simply install React and FlexLayout from npm:
@@ -78,33 +76,7 @@ The `<Layout>` component renders the tabsets and splitters, it takes the followi
7876
| model | the layout model |
7977
| factory | a factory function for creating React components |
8078

81-
#### Optional props:
82-
83-
84-
| Prop | Description |
85-
| --------------- | ----------------- |
86-
| font | the tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}|
87-
| 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 |
88-
| 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 |
89-
| onRenderTab | function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized |
90-
| onRenderTabSet | function called when rendering a tabset, allows header and buttons to be customized |
91-
| onModelChange | function called when model has changed |
92-
| 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. |
93-
| classNameMapper | function called with default css class name, return value is class name that will be used. Mainly for use with css modules.|
94-
| i18nMapper | function called for each I18nLabel to allow user translation, currently used for tab and tabset move messages, return undefined to use default values |
95-
| supportsPopout | if left undefined will do simple check based on userAgent |
96-
| popoutURL | URL of popout window relative to origin, defaults to popout.html |
97-
| 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 |
98-
| 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. |
99-
| onRenderDragRect | callback for rendering the drag rectangles |
100-
| onRenderFloatingTabPlaceholder | callback for rendering the floating tab placeholder |
101-
| onContextMenu | callback for handling context actions on tabs and tabsets |
102-
| onAuxMouseClick | callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks |
103-
| onShowOverflowMenu | callback for handling the display of the tab overflow menu |
104-
| onTabSetPlaceHolder | callback for rendering a placeholder when a tabset is empty |
105-
| 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 |
106-
| 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 |
107-
79+
Additional [optional props](#optional-props)
10880

10981
The model is tree of Node objects that define the structure of the layout.
11082

@@ -185,17 +157,15 @@ class Main extends React.Component {
185157
}
186158
}
187159
188-
const container = document.getElementById("container");
189-
const root = createRoot(container);
160+
const root = createRoot(document.getElementById("container"));
190161
root.render(<Main/>);
191162
```
192-
(See the examples for full source code)
193163

194164
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.
195165

196166
Try it now using [JSFiddle](https://jsfiddle.net/10kmLzvu/)
197167

198-
A simple Create React App (CRA) example (using typescript) can be found here:
168+
A simple Typescript example can be found here:
199169

200170
https://github.com/nealus/FlexLayout_cra_example
201171

@@ -330,6 +300,34 @@ In the above code selfRef is a React ref to the toplevel element in the tab bein
330300
Note: some libraries support popout windows by allowing you to specify the document to use,
331301
for example see the getDocument() callback in agGrid at https://www.ag-grid.com/javascript-grid-callbacks/
332302

303+
## Optional Props
304+
305+
306+
| Prop | Description |
307+
| --------------- | ----------------- |
308+
| font | the tab font (overrides value in css). Example: font={{size:"12px", style:"italic"}}|
309+
| 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 |
310+
| 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 |
311+
| onRenderTab | function called when rendering a tab, allows leading (icon), content section, buttons and name used in overflow menu to be customized |
312+
| onRenderTabSet | function called when rendering a tabset, allows header and buttons to be customized |
313+
| onModelChange | function called when model has changed |
314+
| 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. |
315+
| classNameMapper | function called with default css class name, return value is class name that will be used. Mainly for use with css modules.|
316+
| i18nMapper | function called for each I18nLabel to allow user translation, currently used for tab and tabset move messages, return undefined to use default values |
317+
| supportsPopout | if left undefined will do simple check based on userAgent |
318+
| popoutURL | URL of popout window relative to origin, defaults to popout.html |
319+
| 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 |
320+
| 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. |
321+
| onRenderDragRect | callback for rendering the drag rectangles |
322+
| onRenderFloatingTabPlaceholder | callback for rendering the floating tab placeholder |
323+
| onContextMenu | callback for handling context actions on tabs and tabsets |
324+
| onAuxMouseClick | callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks |
325+
| onShowOverflowMenu | callback for handling the display of the tab overflow menu |
326+
| onTabSetPlaceHolder | callback for rendering a placeholder when a tabset is empty |
327+
| 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 |
328+
| 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 |
329+
330+
333331
## Global Config attributes
334332

335333
Attributes allowed in the 'global' element

‎examples/simple/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html >
3+
<head>
4+
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5+
<title>Flex Layout</title>
6+
<link rel="stylesheet" href="../../style/light.css" />
7+
<style>
8+
html,body
9+
{
10+
height: 100%;
11+
margin: 0;
12+
padding: 0;
13+
overflow:hidden;
14+
font-size: 12px;
15+
font-family: Arial, sans-serif;
16+
}
17+
18+
.container {
19+
left: 10px;
20+
top: 10px;
21+
right: 10px;
22+
bottom: 10px;
23+
position: absolute;
24+
overflow: hidden;
25+
display:flex;
26+
flex-direction: column;
27+
}
28+
29+
.tab_content {
30+
height: 100%;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
}
35+
36+
</style>
37+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0-next-bd0813766-20220420/umd/react.production.min.js"></script>
38+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0-next-bd0813766-20220420/umd/react-dom.production.min.js"></script>
39+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
40+
<script src="https://cdn.jsdelivr.net/npm/flexlayout-react@0.7.1/dist/flexlayout_min.js"></script>
41+
<script type="text/babel" src="main.js"></script>
42+
</head>
43+
<body>
44+
<div id="container" class="container"></div>
45+
</body>
46+
</html>

‎examples/simple/main.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
var json = {
2+
global: {},
3+
layout: {
4+
"type": "row",
5+
"weight": 100,
6+
"children": [
7+
{
8+
"type": "tabset",
9+
"weight": 50,
10+
"selected": 0,
11+
"children": [
12+
{
13+
"type": "tab",
14+
"name": "One",
15+
"component": "panel"
16+
}
17+
]
18+
},
19+
{
20+
"type": "tabset",
21+
"weight": 50,
22+
"selected": 0,
23+
"children": [
24+
{
25+
"type": "tab",
26+
"name": "Two",
27+
"component": "panel"
28+
}
29+
]
30+
},
31+
{
32+
"type": "tabset",
33+
"weight": 50,
34+
"selected": 0,
35+
"children": [
36+
{
37+
"type": "tab",
38+
"name": "Three",
39+
"component": "panel"
40+
}
41+
]
42+
}
43+
]
44+
}
45+
};
46+
47+
class Main extends React.Component {
48+
49+
constructor(props) {
50+
super(props);
51+
this.state = {model: FlexLayout.Model.fromJson(json)};
52+
}
53+
54+
factory = (node) => {
55+
var component = node.getComponent();
56+
if (component === "panel") {
57+
return <div className="tab_content">{node.getName()}</div>;
58+
}
59+
}
60+
61+
render() {
62+
return (
63+
<FlexLayout.Layout
64+
model={this.state.model}
65+
factory={this.factory}/>
66+
);
67+
}
68+
}
69+
70+
ReactDOM.createRoot(document.getElementById("container")).render(<Main/>);

0 commit comments

Comments
 (0)