;
33 | }
34 | }
35 |
36 | let tab0 = {
37 | id: 'tab0', title: 'tab0',
38 | content: This tab will be added back to main panel every time you load layout.
39 | };
40 |
41 | class Demo extends React.Component {
42 | getRef = (r) => {
43 | this.dockLayout = r;
44 | };
45 |
46 | state = {saved: null};
47 |
48 | defaultLayout = {
49 | dockbox: {
50 | mode: 'horizontal',
51 | children: [
52 | {
53 | size: 200,
54 | tabs: [{id: 'tab1'}, {id: 'tab2'}],
55 | },
56 | {
57 | id: 'main-panel',
58 | size: 400,
59 | tabs: [{id: 'tab0'}, {id: 'jsxTab'}, {id: 'htmlTab'}],
60 | panelLock: {
61 | panelStyle: 'main'
62 | }
63 | },
64 | {
65 | size: 200,
66 | tabs: [{id: 'tab5'}, {id: 'tab6'}],
67 | },
68 | ]
69 | }
70 | };
71 |
72 | saveTab = (tabData) => {
73 | let {id, inputValue} = tabData;
74 | // add inputValue from saved data;
75 | if (id === 'tab0') {
76 | return null;
77 | }
78 | return {id, inputValue};
79 | };
80 | loadTab = (savedTab) => {
81 | let id = savedTab.id;
82 | switch (id) {
83 | case 'tab0':
84 | return tab0;
85 | case 'jsxTab':
86 | return jsxTab;
87 | case 'htmlTab':
88 | return htmlTab;
89 | default:
90 | return {id, title: id, content: InputTab.create, inputValue: savedTab.inputValue, group: 'allowWindow'};
91 | }
92 | };
93 |
94 | // add tab0 to the main panel
95 | afterPanelLoaded = (savedPanel, panelData) => {
96 | let id = savedPanel.id;
97 |
98 | if (id === 'main-panel') {
99 | panelData.panelLock = {
100 | panelStyle: 'main'
101 | };
102 | panelData.tabs.unshift({...tab0});
103 | }
104 | };
105 |
106 | render() {
107 | return (
108 |
109 |
112 |
113 |
117 |
121 |
122 |
19 |
It's easier to use React Context to update tab,
20 | but in some use cases you might need to directly update the tab.
21 | {
22 | id !== `tab${value}` ?
23 |
Only current active tab will be changed
24 | : null
25 | }
26 | value is {value}
27 |
60 |
Click here to change the other panel.
61 |
62 |
63 |
Tab Content
,
9 | closable: true,
10 | };
11 |
12 | let layout = {
13 | dockbox: {
14 | mode: 'horizontal',
15 | children: [
16 | {
17 | mode: 'vertical',
18 | size: 200,
19 | children: [
20 | {
21 | tabs: [{...tab, id: 't1', title: 'Tab 1'}, {...tab, id: 't2', title: 'Tab 2'}],
22 | },
23 | {
24 | tabs: [{
25 | ...tab, id: 't3', title: 'Min Size', content: (
26 |
27 |
This tab has a minimal size
28 | 150 x 150 px
29 |
41 | This panel won't be removed from layout even when last Tab is closed
42 |
43 | ),
44 | },
45 | jsxTab,
46 | htmlTab,
47 | ],
48 | panelLock: {panelStyle: 'main'},
49 | },
50 | {
51 | size: 200,
52 | tabs: [{...tab, id: 't8', title: 'Tab 8'}],
53 | },
54 | ]
55 | },
56 | floatbox: {
57 | mode: 'float',
58 | children: [
59 | {
60 | tabs: [
61 | {...tab, id: 't9', title: 'Tab 9', content: Float
},
62 | {...tab, id: 't10', title: 'Tab 10'}
63 | ],
64 | x: 300, y: 150, w: 400, h: 300
65 | }
66 | ]
67 | }
68 | }
69 | ;
70 | if (window.innerWidth < 600) {
71 | // remove a column for mobile
72 | layout.dockbox.children.pop();
73 | }
74 |
75 | let count = 0;
76 |
77 | class Demo extends React.Component {
78 |
79 | onDragNewTab = (e) => {
80 | let content = `New Tab ${count++}`;
81 | DragStore.dragStart(DockContextType, {
82 | tab: {
83 | id: content,
84 | content: {content}
,
85 | title: content,
86 | closable: true,
87 | }
88 | }, e.nativeEvent);
89 | };
90 |
91 | render() {
92 | return (
93 |
94 | );
95 | }
96 | }
97 |
98 | createRoot(document.getElementById("app")).render();
99 |
--------------------------------------------------------------------------------
/example/controlled-layout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | rc-dock
7 |
8 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/example/controlled-layout.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import { createRoot } from "react-dom/client";
4 | import {htmlTab, jsxTab} from "./prism-tabs";
5 | import {DockLayout} from '../lib';
6 |
7 | let tab0 = {
8 | title: 'Controlled Layout',
9 | content: (
10 |
11 |
When you use layout instead of defaultLayout on <DockLayout>
12 |
DockLayout will work as a controlled component
13 |
52 |
Removal of this tab will be rejected
53 | This is done in the onLayoutChange callback
54 |
Tab Content
65 | };
66 | };
67 |
68 | onLayoutChange = (newLayout, currentTabId, direction) => {
69 | // control DockLayout from state
70 | console.log(currentTabId, newLayout, direction);
71 | if (currentTabId === 'protect1' && direction === 'remove') {
72 | alert('removal of this tab is rejected');
73 | } else {
74 | this.setState({layout: newLayout});
75 | }
76 | };
77 |
78 | render() {
79 | return (
80 |
82 | );
83 | }
84 | }
85 |
86 | createRoot(document.getElementById("app")).render();
87 |
--------------------------------------------------------------------------------
/example/dark-theme.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | rc-dock
7 |
8 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/example/dark-theme.jsx:
--------------------------------------------------------------------------------
1 | // The jsx is same as basic example.
2 | // Only difference is in the css, just use dist/rc-dock-dark.css for dark theme.
3 |
--------------------------------------------------------------------------------
/example/disable-dock.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | rc-dock
7 |
8 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/example/disable-dock.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import { createRoot } from "react-dom/client";
4 | import {jsxTab, htmlTab} from './prism-tabs';
5 | import {DockLayout, DockContextType} from '../lib';
6 |
7 |
8 | let groups = {
9 | floatOnly: {
10 | floatable: true,
11 | disableDock: true,
12 | }
13 | };
14 |
15 | let layout = {
16 | dockbox: {
17 | mode: 'horizontal',
18 | children: [
19 | {
20 | tabs: [{id: 't1', title: 'Dock', content: Dock Content
}, jsxTab, htmlTab],
21 | }
22 | ]
23 | },
24 | floatbox: {
25 | mode: 'float',
26 | children: [
27 | {
28 | tabs: [
29 | {id: 't2', title: 'Float', content: Float Content
, group: 'floatOnly'},
30 | {id: 't3', title: 'Float', content: Float Content
, group: 'floatOnly'}
31 | ],
32 | x: 300, y: 150, w: 400, h: 300
33 | }
34 | ]
35 | }
36 | };
37 |
38 |
39 | class Demo extends React.Component {
40 |
41 | render() {
42 | return (
43 |
45 | );
46 | }
47 | }
48 |
49 | createRoot(document.getElementById("app")).render();
50 |
--------------------------------------------------------------------------------
/example/divider-box.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | rc-dock
7 |
8 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/example/divider-box.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import { createRoot } from "react-dom/client";
4 | import {jsxTab, htmlTab} from './prism-tabs';
5 | import {DockLayout, DividerBox} from '../lib';
6 |
7 | let layoutLeft = {
8 | dockbox: {
9 | mode: 'vertical',
10 | children: [
11 | {
12 | tabs: [{id: 't1', title: 'Tool', content: Left Side Dock Layout
}],
13 | },
14 | {
15 | tabs: [{id: 't2', title: 'Tool', content: Left Side Dock Layout
}],
16 | }
17 | ]
18 | },
19 | };
20 |
21 |
22 | let layoutRight = {
23 | dockbox: {
24 | mode: 'horizontal',
25 | children: [
26 | {
27 | tabs: [{
28 | id: 't3',
29 | title: 'Dock',
30 | content: Right Side Dock Layout.
31 | }, jsxTab, htmlTab],
32 | }
33 | ]
34 | },
35 | };
36 |
37 |
38 | class Demo extends React.Component {
39 | render() {
40 | return (
41 |
42 |
43 |
44 | not DockLayout, only DividerBox
45 | You can use DividerBox for fixed Tool Panels
46 |
47 |
48 |
49 | );
50 | }
51 | }
52 |
53 | createRoot(document.getElementById("app")).render();
54 |
--------------------------------------------------------------------------------
/example/drag-new-tab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | rc-dock
7 |
8 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/example/drag-new-tab.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import { createRoot } from "react-dom/client";
4 | import {htmlTab, jsxTab} from "./prism-tabs";
5 | import {DockLayout, DragDropDiv} from '../lib';
6 |
7 | let tab = {
8 | title: 'Tab',
9 | content: Tab Content
10 | };
11 | let box = {
12 | dockbox: {
13 | mode: 'horizontal',
14 | children: [
15 | {
16 | mode: 'vertical',
17 | children: [
18 | {
19 | tabs: [jsxTab, htmlTab],
20 | },
21 | {
22 | tabs: [{...tab, id: 't4'}, {...tab, id: 't5'}, {...tab, id: 't6'}],
23 | }
24 | ]
25 | },
26 | {
27 | tabs: [{...tab, id: 't7'}, {...tab, id: 't8'}, {...tab, id: 't9'}]
28 | },
29 | ]
30 | }
31 | };
32 |
33 | class Demo extends React.Component {
34 | newTabId = 0;
35 | getRef = (r) => {
36 | this.dockLayout = r;
37 | };
38 | getButtonRef = (r) => {
39 | this.buttonRef = r;
40 | }
41 |
42 | onDragStart = (e) => {
43 | console.log(this.dockLayout, this.buttonRef)
44 | e.setData({
45 | tab: {...tab, id: `newTab-${++this.newTabId}`},
46 | panelSize: [400, 300]
47 | }, this.dockLayout.getDockId());
48 | e.startDrag(this.buttonRef.element, this.buttonRef.element);
49 | };
50 |
51 | render() {
52 | return (
53 |
54 |
56 |
57 |
58 |
61 |
62 |
63 |
11 |
When you set dropMode='edge' on <DockLayout>
12 |
The distance between mouse cursor and panel border is used to pick drop location.
13 |
Tab Content
20 | };
21 | let box = {
22 | dockbox: {
23 | mode: 'horizontal',
24 | children: [
25 | {
26 | mode: 'vertical',
27 | children: [
28 | {
29 | tabs: [{...dropModeTab, id: 't1'}, jsxTab, htmlTab],
30 | },
31 | {
32 | tabs: [{...tab, id: 't4'}, {...tab, id: 't5'}, {...tab, id: 't6'}],
33 | }
34 | ]
35 | },
36 | {
37 | tabs: [{...tab, id: 't7'}, {...tab, id: 't8'}, {...tab, id: 't9'}],
38 | panelLock: {panelStyle: 'main'},
39 | },
40 | ]
41 | }
42 | };
43 |
44 | class Demo extends React.Component {
45 | render() {
46 | return (
47 |
49 | );
50 | }
51 | }
52 |
53 | createRoot(document.getElementById("app")).render();
54 |
--------------------------------------------------------------------------------
/example/gesture.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | rc-dock
7 |
8 |
9 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/example/gesture.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import { createRoot } from "react-dom/client";
4 | import {jsxTab} from "./prism-tabs";
5 | import {DragDropDiv, GestureState} from '../lib';
6 |
7 | class Demo extends React.PureComponent {
8 | state = {scale: 0, rotate: 0, dx: 0, dy: 0};
9 | getRef = (r) => {
10 | this._ref = r;
11 | };
12 |
13 | onGestureStart = (e) => {
14 | return true;
15 | };
16 | onGestureMove = (e) => {
17 | let {scale, rotate, dx, dy} = e;
18 | this.setState({scale, rotate, dx, dy});
19 | };
20 |
21 |
22 | render() {
23 | let {scale, rotate, dx, dy} = this.state;
24 | return (
25 |
26 |
27 |
28 | scale: {scale}
29 | rotate: {rotate}
30 | dx: {dx}
31 | dy: {dy}
32 |
33 | {jsxTab.content}
34 |