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

docs: demo + storybook

Browse Source
This commit is contained in:
mathuo 2020-12-20 21:09:23 +00:00
parent fc7ef9226b
commit f6c4791f0c
11 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/splitview-demo/src/layout-grid/application.tsx
View File

@ -32,7 +32,7 @@ export const Application = () => {
React.useEffect(() => {
const onresize = (ev: UIEvent) => {
const { innerWidth: width, innerHeight: height } = window;
api.current?.layout(width, height); // // fill the entire screen
// api.current?.layout(width, height); // // fill the entire screen
};
window.addEventListener('resize', onresize);

7
packages/splitview-demo/src/layout-grid/controlCenter.tsx
View File

@ -3,11 +3,6 @@ import { DockviewApi, GridviewApi, SplitviewApi } from 'dockview';
import { useLayoutRegistry } from './registry';
import './controlCenter.scss';
const nextGuid = (() => {
let counter = 0;
return () => counter++;
})();
export const ControlCenter = () => {
const registry = useLayoutRegistry();
@ -34,7 +29,7 @@ export const ControlCenter = () => {
const onAdd = () => {
const api = registry.get<DockviewApi>('dockview');
const _id = nextGuid();
const _id = Date.now();
const id = `${_id}`;
api.addPanel({

4
packages/splitview-demo/src/layout-grid/layoutGrid.tsx
View File

@ -70,7 +70,7 @@ const components: PanelCollection<IDockviewPanelProps> = {
React.useEffect(() => {
const compDis = new CompositeDisposable(
props.api.onDidDimensionsChange((event) => {
_api.current?.layout(event.width, event.height);
// _api.current?.layout(event.width, event.height);
}),
_api.current.onGridEvent((event) => {
if (event.kind === GroupChangeKind.LAYOUT_CONFIG_UPDATED) {
@ -346,7 +346,7 @@ export const TestGrid = (props: IGridviewPanelProps) => {
}),
props.api.onDidDimensionsChange((event) => {
const { width, height } = event;
_api.current.layout(width, height);
// _api.current.layout(width, height);
})
);

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

@ -33,6 +33,7 @@ export const IFrame = (props: {
onEvent: (name: string) => void;
theme: string;
hideBorders: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<DockviewApi>();
@ -64,6 +65,7 @@ export const IFrame = (props: {
onReady={onReady}
components={components}
hideBorders={props.hideBorders}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
@ -72,6 +74,7 @@ export const Simple = (props: {
onEvent: (name: string) => void;
theme: string;
hideBorders: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<DockviewApi>();
@ -115,6 +118,7 @@ export const Simple = (props: {
onReady={onReady}
components={components}
hideBorders={props.hideBorders}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
@ -190,6 +194,7 @@ export const CustomWatermark = (props: {
onEvent: (name: string) => void;
theme: string;
hideBorders: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<DockviewApi>();
@ -215,6 +220,7 @@ export const CustomWatermark = (props: {
components={components}
hideBorders={props.hideBorders}
watermarkComponent={Watermark}
disableAutoResizing={props.disableAutoResizing}
/>
);
};

8
packages/splitview-demo/src/stories/gridview.stories.tsx
View File

@ -30,6 +30,7 @@ export const Simple = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<GridviewApi>();
@ -92,6 +93,7 @@ export const Simple = (props: {
components={components}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
@ -109,7 +111,11 @@ export default {
);
},
],
args: { orientation: Orientation.VERTICAL, proportionalLayout: true },
args: {
orientation: Orientation.VERTICAL,
proportionalLayout: true,
disableAutoResizing: false,
},
argTypes: {
orientation: {
control: {

14
packages/splitview-demo/src/stories/paneview.stories.tsx
View File

@ -25,7 +25,10 @@ const components: PanelCollection<IPaneviewPanelProps> = {
},
};
export const Simple = (props: { theme: string }) => {
export const Simple = (props: {
theme: string;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<PaneviewApi>();
const onReady = (event: PaneviewReadyEvent) => {
@ -66,11 +69,15 @@ export const Simple = (props: { theme: string }) => {
className={props.theme}
onReady={onReady}
components={components}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
export const Deserialization = (props: { theme: string }) => {
export const Deserialization = (props: {
theme: string;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<PaneviewApi>();
const onReady = (event: PaneviewReadyEvent) => {
@ -128,6 +135,7 @@ export const Deserialization = (props: { theme: string }) => {
className={props.theme}
onReady={onReady}
components={components}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
@ -145,7 +153,7 @@ export default {
);
},
],
args: { theme: 'dockview-theme-light' },
args: { theme: 'dockview-theme-light', disableAutoResizing: false },
argTypes: {
theme: {
control: {

22
packages/splitview-demo/src/stories/splitview.stories.tsx
View File

@ -30,6 +30,7 @@ export const Simple = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
@ -58,7 +59,7 @@ export const Simple = (props: {
React.useEffect(() => {
window.addEventListener('resize', () => {
api.current?.layout(window.innerWidth, window.innerHeight);
// api.current?.layout(window.innerWidth, window.innerHeight);
});
}, []);
@ -69,6 +70,7 @@ export const Simple = (props: {
components={components}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
@ -77,6 +79,7 @@ export const SnappablePanel = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
@ -118,11 +121,17 @@ export const SnappablePanel = (props: {
components={components}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
disableAutoResizing={props.disableAutoResizing}
/>
);
};
export const Deserialization = (props: { orientation: Orientation }) => {
export const Deserialization = (props: {
orientation: Orientation;
hideBorders: boolean;
proportionalLayout: boolean;
disableAutoResizing: boolean;
}) => {
const api = React.useRef<SplitviewApi>();
const onReady = (event: SplitviewReadyEvent) => {
@ -181,6 +190,9 @@ export const Deserialization = (props: { orientation: Orientation }) => {
onReady={onReady}
orientation={props.orientation}
components={components}
disableAutoResizing={props.disableAutoResizing}
hideBorders={props.hideBorders}
proportionalLayout={props.proportionalLayout}
/>
);
};
@ -198,7 +210,11 @@ export default {
);
},
],
args: { orientation: Orientation.VERTICAL, proportionalLayout: true },
args: {
orientation: Orientation.VERTICAL,
proportionalLayout: true,
disableAutoResizing: false,
},
argTypes: {
orientation: {
control: {

2
packages/splitview/src/react/dockview/dockview.tsx
View File

@ -139,8 +139,6 @@ export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
domRef.current?.appendChild(dockview.element);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
// dockview.resizeToFit();
if (props.onReady) {
props.onReady({ api: new DockviewApi(dockview) });
}

2
packages/splitview/src/react/gridview/gridview.tsx
View File

@ -28,7 +28,7 @@ export interface IGridviewReactProps {
hideBorders?: boolean;
className?: string;
proportionalLayout?: boolean;
disableAutoResizing?: number;
disableAutoResizing?: boolean;
}
export const GridviewReact: React.FunctionComponent<IGridviewReactProps> = (

2
packages/splitview/src/react/paneview/paneview.tsx
View File

@ -89,8 +89,6 @@ export const PaneviewReact: React.FunctionComponent<IPaneviewReactProps> = (
props.onReady({ api: new PaneviewApi(paneview) });
}
paneview.resizeToFit();
paneviewRef.current = paneview;
return () => {

2
packages/splitview/src/react/splitview/splitview.tsx
View File

@ -72,8 +72,6 @@ export const SplitviewReact: React.FunctionComponent<ISplitviewReactProps> = (
: undefined,
});
splitview.resizeToFit();
if (props.onReady) {
props.onReady({ api: new SplitviewApi(splitview) });
}