mirror of
https://github.com/mathuo/dockview
synced 2025-01-22 17:35:57 +00:00
commit
b901f4de0c
@ -7,7 +7,7 @@ import { MultiFrameworkContainer } from '@site/src/components/ui/container';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app';
|
||||
import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
|
||||
import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
|
||||
import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
|
||||
import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
|
||||
@ -140,7 +140,7 @@ As well as importing the `dockview` stylesheet you must provide a class-based th
|
||||
|
||||
You can find more details on theming <Link to="../theme">here</Link>.
|
||||
|
||||
## Layout Persistance
|
||||
## Layout Persistence
|
||||
|
||||
Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
|
||||
The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
|
||||
@ -156,7 +156,7 @@ React.useEffect(() => {
|
||||
const layout = api.toJSON();
|
||||
|
||||
localStorage.setItem(
|
||||
'dockview_persistance_layout',
|
||||
'dockview_persistence_layout',
|
||||
JSON.stringify(layout)
|
||||
);
|
||||
});
|
||||
@ -169,7 +169,7 @@ React.useEffect(() => {
|
||||
|
||||
```tsx title="Loading a layout from localStorage"
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
const layoutString = localStorage.getItem('dockview_persistance_layout');
|
||||
const layoutString = localStorage.getItem('dockview_persistence_layout');
|
||||
|
||||
let success = false;
|
||||
|
||||
@ -194,7 +194,7 @@ If you refresh the page you should notice your layout is loaded as you left it.
|
||||
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="layout-dockview"
|
||||
react={DockviewPersistance}
|
||||
react={DockviewPersistence}
|
||||
/>
|
||||
|
||||
## Scrollbars
|
||||
|
@ -127,7 +127,7 @@ const useLocalStorage = <T,>(
|
||||
];
|
||||
};
|
||||
|
||||
export const DockviewPersistance = (props: { theme?: string }) => {
|
||||
export const DockviewPersistence = (props: { theme?: string }) => {
|
||||
const [api, setApi] = React.useState<DockviewApi>();
|
||||
const [layout, setLayout] =
|
||||
useLocalStorage<SerializedDockview>('floating.layout');
|
||||
@ -289,7 +289,7 @@ const RightComponent = (props: IDockviewHeaderActionsProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default DockviewPersistance;
|
||||
export default DockviewPersistence;
|
||||
|
||||
const Watermark = () => {
|
||||
return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
|
||||
|
@ -47,11 +47,11 @@ function loadDefaultLayout(api: DockviewApi) {
|
||||
});
|
||||
}
|
||||
|
||||
export const DockviewPersistance = (props: { theme?: string }) => {
|
||||
export const DockviewPersistence = (props: { theme?: string }) => {
|
||||
const [api, setApi] = React.useState<DockviewApi>();
|
||||
|
||||
const clearLayout = () => {
|
||||
localStorage.removeItem('dockview_persistance_layout');
|
||||
localStorage.removeItem('dockview_persistence_layout');
|
||||
if (api) {
|
||||
api.clear();
|
||||
loadDefaultLayout(api);
|
||||
@ -60,7 +60,7 @@ export const DockviewPersistance = (props: { theme?: string }) => {
|
||||
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
const layoutString = localStorage.getItem(
|
||||
'dockview_persistance_layout'
|
||||
'dockview_persistence_layout'
|
||||
);
|
||||
|
||||
let success = false;
|
||||
@ -91,7 +91,7 @@ export const DockviewPersistance = (props: { theme?: string }) => {
|
||||
const layout = api.toJSON();
|
||||
|
||||
localStorage.setItem(
|
||||
'dockview_persistance_layout',
|
||||
'dockview_persistence_layout',
|
||||
JSON.stringify(layout)
|
||||
);
|
||||
});
|
||||
@ -125,7 +125,7 @@ export const DockviewPersistance = (props: { theme?: string }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default DockviewPersistance;
|
||||
export default DockviewPersistence;
|
||||
|
||||
const Watermark = () => {
|
||||
return <div style={{ color: 'white', padding: '8px' }}>watermark</div>;
|
||||
|
@ -7,7 +7,7 @@ import { MultiFrameworkContainer } from '@site/src/components/ui/container';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
import DockviewPersistance from '@site/sandboxes/layout-dockview/src/app';
|
||||
import DockviewPersistence from '@site/sandboxes/layout-dockview/src/app';
|
||||
import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
|
||||
import ResizeDockview from '@site/sandboxes/resize-dockview/src/app';
|
||||
import DockviewWatermark from '@site/sandboxes/watermark-dockview/src/app';
|
||||
@ -140,7 +140,7 @@ As well as importing the `dockview` stylesheet you must provide a class-based th
|
||||
|
||||
You can find more details on theming <Link to="../theme">here</Link>.
|
||||
|
||||
## Layout Persistance
|
||||
## Layout Persistence
|
||||
|
||||
Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
|
||||
The api also exposes an event `onDidLayoutChange` you can listen on to determine when the layout has changed.
|
||||
@ -156,7 +156,7 @@ React.useEffect(() => {
|
||||
const layout = api.toJSON();
|
||||
|
||||
localStorage.setItem(
|
||||
'dockview_persistance_layout',
|
||||
'dockview_persistence_layout',
|
||||
JSON.stringify(layout)
|
||||
);
|
||||
});
|
||||
@ -169,7 +169,7 @@ React.useEffect(() => {
|
||||
|
||||
```tsx title="Loading a layout from localStorage"
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
const layoutString = localStorage.getItem('dockview_persistance_layout');
|
||||
const layoutString = localStorage.getItem('dockview_persistence_layout');
|
||||
|
||||
let success = false;
|
||||
|
||||
@ -194,7 +194,7 @@ If you refresh the page you should notice your layout is loaded as you left it.
|
||||
|
||||
<MultiFrameworkContainer
|
||||
sandboxId="layout-dockview"
|
||||
react={DockviewPersistance}
|
||||
react={DockviewPersistence}
|
||||
/>
|
||||
|
||||
## Scrollbars
|
||||
|
Loading…
Reference in New Issue
Block a user