rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-09-12 12:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update demo stories

Browse Source
This commit is contained in:
mathuo 2021-03-29 20:44:40 +01:00
parent 0533073e1d
commit cbeb197347
13 changed files with 481 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/dockview-demo/.storybook/preview.js
View File

@ -1,3 +1,4 @@
import '!style-loader!css-loader!sass-loader!../node_modules/dockview/dist/styles/dockview.css';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },

9
packages/dockview-demo/src/stories/dockview/dockview.iframe.stories.tsx
View File

@ -62,7 +62,6 @@ export const Iframe = (props: {
const api = React.useRef<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.onGridEvent((e) => props.onEvent(e.kind));
@ -79,12 +78,6 @@ export const Iframe = (props: {
});
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<DockviewReact
className={props.theme}
@ -97,7 +90,7 @@ export const Iframe = (props: {
};
export default {
title: 'Dockview/Iframe',
title: 'Library/Dockview/Iframe',
component: Iframe,
decorators: [
(Component) => {

9
packages/dockview-demo/src/stories/dockview/dockview.simple.stories.tsx
View File

@ -37,7 +37,6 @@ export const Simple = (props: {
const api = React.useRef<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.onGridEvent((e) => props.onEvent(e.kind));
@ -64,12 +63,6 @@ export const Simple = (props: {
// event.api.getPanel('panel1').api;
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<DockviewReact
className={props.theme}
@ -82,7 +75,7 @@ export const Simple = (props: {
};
export default {
title: 'Dockview/Simple',
title: 'Library/Dockview/Simple',
component: Simple,
decorators: [
(Component) => {

17
packages/dockview-demo/src/stories/dockview/dockview.stories.tsx → packages/dockview-demo/src/stories/dockview/dockview.watermark.stories.tsx
View File

@ -28,7 +28,7 @@ const components: PanelCollection<IDockviewPanelProps> = {
},
};
const Watermark = (props: IWatermarkPanelProps) => {
const WatermarkPanel = (props: IWatermarkPanelProps) => {
const [size, setSize] = React.useState<number>(props.containerApi.size);
const [panels, setPanels] = React.useState<number>(
props.containerApi.totalPanels
@ -95,7 +95,7 @@ const Watermark = (props: IWatermarkPanelProps) => {
);
};
export const CustomWatermark = (props: {
export const Watermark = (props: {
onEvent: (name: string) => void;
theme: string;
hideBorders: boolean;
@ -104,7 +104,6 @@ export const CustomWatermark = (props: {
const api = React.useRef<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.onGridEvent((e) => props.onEvent(e.kind));
@ -112,27 +111,21 @@ export const CustomWatermark = (props: {
event.api.addEmptyGroup();
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<DockviewReact
className={props.theme}
onReady={onReady}
components={components}
hideBorders={props.hideBorders}
watermarkComponent={Watermark}
watermarkComponent={WatermarkPanel}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
export default {
title: 'Dockview/CustomWatermark',
component: CustomWatermark,
title: 'Library/Dockview/Watermark',
component: Watermark,
decorators: [
(Component) => {
document.body.style.padding = '0px';

11
packages/dockview-demo/src/stories/gridview/gridview.stories.tsx → packages/dockview-demo/src/stories/gridview/gridview.simple.stories.tsx
View File

@ -7,7 +7,7 @@ import {
PanelCollection,
} from 'dockview';
import * as React from 'react';
import { Story, Meta } from '@storybook/react';
import { Meta } from '@storybook/react';
const components: PanelCollection<IGridviewPanelProps> = {
default: (props) => {
@ -34,7 +34,6 @@ export const Simple = (props: {
const api = React.useRef<GridviewApi>();
const onReady = (event: GridviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.addPanel({
@ -79,12 +78,6 @@ export const Simple = (props: {
});
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<GridviewReact
onReady={onReady}
@ -98,7 +91,7 @@ export const Simple = (props: {
};
export default {
title: 'Gridview/Simple',
title: 'Library/Gridview/Simple',
component: Simple,
decorators: [
(Component) => {

10
packages/dockview-demo/src/stories/paneview/paneview.deserialization.stories.tsx
View File

@ -86,7 +86,6 @@ export const Deserialization = (props: {
const api = React.useRef<PaneviewApi>();
const onReady = (event: PaneviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.fromJSON({
@ -125,16 +124,9 @@ export const Deserialization = (props: {
],
});
event.api.layout(window.innerWidth, window.innerHeight);
event.api.getPanel('panel2')?.api.setSize({ size: 60 });
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<PaneviewReact
className={props.theme}
@ -146,7 +138,7 @@ export const Deserialization = (props: {
};
export default {
title: 'Paneview/Deserialization',
title: 'Library/Paneview/Deserialization',
component: Deserialization,
decorators: [
(Component) => {

14
packages/dockview-demo/src/stories/paneview/paneview.localStorageSave.stories.tsx → packages/dockview-demo/src/stories/paneview/paneview.persistance.stories.tsx
View File

@ -79,14 +79,13 @@ const components: PanelCollection<IPaneviewPanelProps> = {
},
};
export const Localstoragesave = (props: {
export const Persistance = (props: {
theme: string;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<PaneviewApi>();
const onReady = (event: PaneviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.onDidLayoutChange(() => {
@ -137,16 +136,9 @@ export const Localstoragesave = (props: {
],
});
event.api.layout(window.innerWidth, window.innerHeight);
event.api.getPanel('panel2')?.api.setSize({ size: 60 });
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<PaneviewReact
className={props.theme}
@ -158,8 +150,8 @@ export const Localstoragesave = (props: {
};
export default {
title: 'Paneview/Localstoragesave',
component: Localstoragesave,
title: 'Library/Paneview/Persistance',
component: Persistance,
decorators: [
(Component) => {
document.body.style.padding = '0px';

9
packages/dockview-demo/src/stories/paneview/paneview.simple.stories.tsx
View File

@ -86,7 +86,6 @@ export const Simple = (props: {
const api = React.useRef<PaneviewApi>();
const onReady = (event: PaneviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.addPanel({
@ -112,12 +111,6 @@ export const Simple = (props: {
});
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<PaneviewReact
className={props.theme}
@ -129,7 +122,7 @@ export const Simple = (props: {
};
export default {
title: 'Paneview/Simple',
title: 'Library/Paneview/Simple',
component: Simple,
decorators: [
(Component) => {

122
packages/dockview-demo/src/stories/splitview/splitview.deserialization.stories.tsx Normal file
View File

@ -0,0 +1,122 @@
import {
ISplitviewPanelProps,
Orientation,
PanelCollection,
SplitviewApi,
SplitviewReact,
SplitviewReadyEvent,
} from 'dockview';
import * as React from 'react';
import { Meta } from '@storybook/react';
const components: PanelCollection<ISplitviewPanelProps> = {
default: (props) => {
const resize = () => {
props.api.setSize({ size: 300 });
};
return (
<div
style={{
padding: '10px',
backgroundColor: props.color,
height: '100%',
boxSizing: 'border-box',
}}
>
<div>hello world</div>
<button onClick={resize}>Resize</button>
</div>
);
},
};
export const Deserialization = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
api.current = event.api;
event.api.fromJSON({
size: 100,
views: [
{
size: 20,
data: {
id: 'panel1',
component: 'default',
params: {
color: 'red',
},
},
},
{
size: 40,
data: {
id: 'panel2',
component: 'default',
params: {
color: 'green',
},
},
},
{
size: 60,
data: {
id: 'panel3',
component: 'default',
params: {
color: 'purple',
},
},
},
],
orientation: props.orientation,
activeView: 'panel1',
});
};
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
disableAutoResizing={props.disableAutoResizing}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
/>
);
};
export default {
title: 'Library/Splitview/Deserialization',
component: Deserialization,
decorators: [
(Component) => {
document.body.style.padding = '0px';
return (
<div style={{ height: '100vh', fontFamily: 'Arial' }}>
<Component />
</div>
);
},
],
args: {
orientation: Orientation.VERTICAL,
proportionalLayout: true,
disableAutoResizing: false,
},
argTypes: {
orientation: {
control: {
type: 'inline-radio',
options: [Orientation.HORIZONTAL, Orientation.VERTICAL],
},
},
},
} as Meta;

138
packages/dockview-demo/src/stories/splitview/splitview.persistance.stories.tsx Normal file
View File

@ -0,0 +1,138 @@
import {
ISplitviewPanelProps,
Orientation,
PanelCollection,
SerializedSplitview,
SplitviewApi,
SplitviewReact,
SplitviewReadyEvent,
} from 'dockview';
import * as React from 'react';
import { Story, Meta } from '@storybook/react';
const components: PanelCollection<ISplitviewPanelProps> = {
default: (props) => {
const resize = () => {
props.api.setSize({ size: 300 });
};
return (
<div
style={{
padding: '10px',
backgroundColor: props.color,
height: '100%',
boxSizing: 'border-box',
}}
>
<div>hello world</div>
<button onClick={resize}>Resize</button>
</div>
);
},
};
export const Persistance = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
api.current = event.api;
event.api.onDidLayoutChange(() => {
const state = event.api.toJSON();
localStorage.setItem(
'splitview.test.layout',
JSON.stringify(state)
);
console.log(JSON.stringify(state, null, 4));
});
const state = localStorage.getItem('splitview.test.layout');
if (state) {
event.api.fromJSON(JSON.parse(state) as SerializedSplitview);
return;
}
event.api.fromJSON({
size: 100,
views: [
{
size: 20,
data: {
id: 'panel1',
component: 'default',
params: {
color: 'red',
},
},
},
{
size: 40,
data: {
id: 'panel2',
component: 'default',
params: {
color: 'green',
},
},
},
{
size: 60,
data: {
id: 'panel3',
component: 'default',
params: {
color: 'purple',
},
},
},
],
orientation: props.orientation,
activeView: 'panel1',
});
};
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
disableAutoResizing={props.disableAutoResizing}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
/>
);
};
export default {
title: 'Library/Splitview/Persistance',
component: Persistance,
decorators: [
(Component) => {
document.body.style.padding = '0px';
return (
<div style={{ height: '100vh', fontFamily: 'Arial' }}>
<Component />
</div>
);
},
],
args: {
orientation: Orientation.VERTICAL,
proportionalLayout: true,
disableAutoResizing: false,
},
argTypes: {
orientation: {
control: {
type: 'inline-radio',
options: [Orientation.HORIZONTAL, Orientation.VERTICAL],
},
},
},
} as Meta;

102
packages/dockview-demo/src/stories/splitview/splitview.simple.stories.tsx Normal file
View File

@ -0,0 +1,102 @@
import {
ISplitviewPanelProps,
Orientation,
PanelCollection,
SplitviewApi,
SplitviewReact,
SplitviewReadyEvent,
} from 'dockview';
import * as React from 'react';
import { Meta } from '@storybook/react';
const components: PanelCollection<ISplitviewPanelProps> = {
default: (props) => {
const resize = () => {
props.api.setSize({ size: 300 });
};
return (
<div
style={{
padding: '10px',
backgroundColor: props.color,
height: '100%',
boxSizing: 'border-box',
}}
>
<div>hello world</div>
<button onClick={resize}>Resize</button>
</div>
);
},
};
export const Simple = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
api.current = event.api;
event.api.addPanel({
id: 'panel1',
component: 'default',
params: { color: 'red' },
minimumSize: 50,
});
event.api.addPanel({
id: 'panel2',
component: 'default',
params: { color: 'green' },
minimumSize: 50,
});
event.api.addPanel({
id: 'panel3',
component: 'default',
params: { color: 'purple' },
minimumSize: 50,
});
};
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
export default {
title: 'Library/Splitview/Simple',
component: Simple,
decorators: [
(Component) => {
document.body.style.padding = '0px';
return (
<div style={{ height: '100vh', fontFamily: 'Arial' }}>
<Component />
</div>
);
},
],
args: {
orientation: Orientation.VERTICAL,
proportionalLayout: true,
disableAutoResizing: false,
},
argTypes: {
orientation: {
control: {
type: 'inline-radio',
options: [Orientation.HORIZONTAL, Orientation.VERTICAL],
},
},
},
} as Meta;

104
packages/dockview-demo/src/stories/splitview/splitview.snap.stories.tsx Normal file
View File

@ -0,0 +1,104 @@
import {
ISplitviewPanelProps,
Orientation,
PanelCollection,
SplitviewApi,
SplitviewReact,
SplitviewReadyEvent,
} from 'dockview';
import * as React from 'react';
import { Meta } from '@storybook/react';
const components: PanelCollection<ISplitviewPanelProps> = {
default: (props) => {
const resize = () => {
props.api.setSize({ size: 300 });
};
return (
<div
style={{
padding: '10px',
backgroundColor: props.color,
height: '100%',
boxSizing: 'border-box',
}}
>
<div>hello world</div>
<button onClick={resize}>Resize</button>
</div>
);
},
};
export const Snap = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
api.current = event.api;
event.api.addPanel({
id: 'panel1',
component: 'default',
params: { color: 'red' },
minimumSize: 50,
snap: true,
});
event.api.addPanel({
id: 'panel2',
component: 'default',
params: { color: 'green' },
minimumSize: 50,
});
event.api.addPanel({
id: 'panel3',
component: 'default',
params: { color: 'purple' },
minimumSize: 50,
snap: true,
});
};
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
export default {
title: 'Library/Splitview/Snap',
component: Snap,
decorators: [
(Component) => {
document.body.style.padding = '0px';
return (
<div style={{ height: '100vh', fontFamily: 'Arial' }}>
<Component />
</div>
);
},
],
args: {
orientation: Orientation.VERTICAL,
proportionalLayout: true,
disableAutoResizing: false,
},
argTypes: {
orientation: {
control: {
type: 'inline-radio',
options: [Orientation.HORIZONTAL, Orientation.VERTICAL],
},
},
},
} as Meta;

319
packages/dockview-demo/src/stories/splitview/splitview.stories.tsx
View File

@ -1,319 +0,0 @@
import {
ISplitviewPanelProps,
Orientation,
PanelCollection,
SerializedSplitview,
Splitview,
SplitviewApi,
SplitviewReact,
SplitviewReadyEvent,
} from 'dockview';
import * as React from 'react';
import { Story, Meta } from '@storybook/react';
const components: PanelCollection<ISplitviewPanelProps> = {
default: (props) => {
const resize = () => {
props.api.setSize({ size: 300 });
};
return (
<div
style={{
padding: '10px',
backgroundColor: props.color,
height: '100%',
boxSizing: 'border-box',
}}
>
<div>hello world</div>
<button onClick={resize}>Resize</button>
</div>
);
},
};
export const Simple = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.addPanel({
id: 'panel1',
component: 'default',
params: { color: 'red' },
minimumSize: 50,
});
event.api.addPanel({
id: 'panel2',
component: 'default',
params: { color: 'green' },
minimumSize: 50,
});
event.api.addPanel({
id: 'panel3',
component: 'default',
params: { color: 'purple' },
minimumSize: 50,
});
};
React.useEffect(() => {
window.addEventListener('resize', () => {
// api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
export const SnappablePanel = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.addPanel({
id: 'panel1',
component: 'default',
params: { color: 'red' },
minimumSize: 50,
snap: true,
});
event.api.addPanel({
id: 'panel2',
component: 'default',
params: { color: 'green' },
minimumSize: 50,
});
event.api.addPanel({
id: 'panel3',
component: 'default',
params: { color: 'purple' },
minimumSize: 50,
snap: true,
});
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
export const Deserialization = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.fromJSON({
size: 100,
views: [
{
size: 20,
data: {
id: 'panel1',
component: 'default',
params: {
color: 'red',
},
},
},
{
size: 40,
data: {
id: 'panel2',
component: 'default',
params: {
color: 'green',
},
},
},
{
size: 60,
data: {
id: 'panel3',
component: 'default',
params: {
color: 'purple',
},
},
},
],
orientation: props.orientation,
activeView: 'panel1',
});
event.api.layout(window.innerWidth, window.innerHeight);
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
disableAutoResizing={props.disableAutoResizing}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
/>
);
};
export const LocalStorageSave = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
event.api.layout(window.innerWidth, window.innerHeight);
api.current = event.api;
event.api.onDidLayoutChange(() => {
const state = event.api.toJSON();
localStorage.setItem(
'splitview.test.layout',
JSON.stringify(state)
);
console.log(JSON.stringify(state, null, 4));
});
const state = localStorage.getItem('splitview.test.layout');
if (state) {
event.api.fromJSON(JSON.parse(state) as SerializedSplitview);
return;
}
event.api.fromJSON({
size: 100,
views: [
{
size: 20,
data: {
id: 'panel1',
component: 'default',
params: {
color: 'red',
},
},
},
{
size: 40,
data: {
id: 'panel2',
component: 'default',
params: {
color: 'green',
},
},
},
{
size: 60,
data: {
id: 'panel3',
component: 'default',
params: {
color: 'purple',
},
},
},
],
orientation: props.orientation,
activeView: 'panel1',
});
event.api.layout(window.innerWidth, window.innerHeight);
};
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
return (
<SplitviewReact
onReady={onReady}
orientation={props.orientation}
components={components}
disableAutoResizing={props.disableAutoResizing}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
/>
);
};
export default {
title: 'Splitview/Simple',
component: Simple,
decorators: [
(Component) => {
document.body.style.padding = '0px';
return (
<div style={{ height: '100vh', fontFamily: 'Arial' }}>
<Component />
</div>
);
},
],
args: {
orientation: Orientation.VERTICAL,
proportionalLayout: true,
disableAutoResizing: false,
},
argTypes: {
orientation: {
control: {
type: 'inline-radio',
options: [Orientation.HORIZONTAL, Orientation.VERTICAL],
},
},
},
} as Meta;