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

chore: docs

Browse Source
This commit is contained in:
mathuo 2022-05-30 22:00:44 +01:00
parent 6c2c59f858
commit 9ade38b0c4
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
23 changed files with 920 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/docs/docs/components/dockview.mdx
View File

@ -12,7 +12,7 @@ import Link from '@docusaurus/Link';
## Introduction ## Introduction
Dockview is an abstraction built on top of [Gridviews](/docs/api/gridview) where each view is a container of many tabbed panels. Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
<div <div
style={{ style={{
@ -37,14 +37,14 @@ import { ReactDockview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | --------------------------------------------------------------- | | ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| tabComponents | object | Yes | | | | tabComponents | object | Yes | | |
| watermarkComponent | object | Yes | | | | watermarkComponent | object | Yes | | |
| hideBorders | boolean | Yes | false | | | hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| onTabContextMenu | Event | Yes | false | | | onTabContextMenu | Event | Yes | false | |
| onDidDrop | Event | Yes | false | | | onDidDrop | Event | Yes | false | |
| showDndOverlay | Event | Yes | false | | | showDndOverlay | Event | Yes | false | |
@ -69,7 +69,7 @@ const onReady = (event: DockviewReadyEvent) => {
``` ```
| Property | Type | Description | | Property | Type | Description |
| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------- | | ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- |
| height | `number` | Component pixel height | | height | `number` | Component pixel height |
| width | `number` | Component pixel width | | width | `number` | Component pixel width |
| minimumHeight | `number` | | | minimumHeight | `number` | |
@ -104,9 +104,9 @@ const onReady = (event: DockviewReadyEvent) => {
| setTabHeight | `(hegiht: number \| undefined): void` | | | setTabHeight | `(hegiht: number \| undefined): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedDockview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedDockview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedDockview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedDockview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Dockview Panel API ## Dockview Panel API

12
packages/docs/docs/components/gridview.mdx
View File

@ -24,14 +24,14 @@ import { ReactGridview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ---------------------- | --------------------------------------------------------------------------- | | ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| orientation | Orientation | Yes | Orientation.HORIZONTAL | | | orientation | Orientation | Yes | Orientation.HORIZONTAL | |
| proportionalLayout | boolean | Yes | true | See <Link to="/docs/basics/#proportional-layout">Proportional layout</Link> | | proportionalLayout | boolean | Yes | true | See <Link to="../basics/#proportional-layout">Proportional layout</Link> |
| hideBorders | boolean | Yes | false | | | hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
## Gridview API ## Gridview API
@ -74,9 +74,9 @@ const onReady = (event: GridviewReadyEvent) => {
| | | | | | | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedGridview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedGridview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedGridview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedGridview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Gridview Panel API ## Gridview Panel API

14
packages/docs/docs/components/paneview.mdx
View File

@ -102,12 +102,12 @@ import { ReactPaneview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | ----------------------------------------------------------- | | ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| headerComponents | object | Yes | | | | headerComponents | object | Yes | | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| disableDnd | boolean | Yes | false | | | disableDnd | boolean | Yes | false | |
| onDidDrop | Event | Yes | | | | onDidDrop | Event | Yes | | |
@ -131,7 +131,7 @@ const onReady = (event: GridviewReadyEvent) => {
``` ```
| Property | Type | Description | | Property | Type | Description |
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| height | `number` | Component pixel height | | height | `number` | Component pixel height |
| width | `number` | Component pixel width | | width | `number` | Component pixel width |
| minimumSize | `number` | The sum of the `minimumSize` property for each panel | | minimumSize | `number` | The sum of the `minimumSize` property for each panel |
@ -143,7 +143,7 @@ const onReady = (event: GridviewReadyEvent) => {
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call | | onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
| onDidAddView | `Event<IPaneviewPanel>` | Fires when a view is added | | onDidAddView | `Event<IPaneviewPanel>` | Fires when a view is added |
| onDidRemoveView | `Event<IPaneviewPanel>` | Fires when a view is removed | | onDidRemoveView | `Event<IPaneviewPanel>` | Fires when a view is removed |
| onDidDrop | `Event<PaneviewDropEvent` | Fires on an external drop event (See <Link to="/docs/api/paneview/#drag-and-drop">Drag and Drop</Link>) | | onDidDrop | `Event<PaneviewDropEvent` | Fires on an external drop event (See <Link to="./paneview/#drag-and-drop">Drag and Drop</Link>) |
| | | | | | | |
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | | addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
| removePanel | `(panel: IPaneviewPanel): void` | | | removePanel | `(panel: IPaneviewPanel): void` | |
@ -151,9 +151,9 @@ const onReady = (event: GridviewReadyEvent) => {
| getPanel | `(id:string): IPaneviewPanel \| undefined` | | | getPanel | `(id:string): IPaneviewPanel \| undefined` | |
| | | | | | | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedPaneview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedPaneview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedPaneview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedPaneview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Paneview Panel API ## Paneview Panel API

20
packages/docs/docs/components/splitview.mdx
View File

@ -82,14 +82,14 @@ import { ReactSplitview } from 'dockview';
Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels. Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels.
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | -------------------------------------- | -------- | ------------------------ | --------------------------------------------------------------------------- | | ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | | onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers | | components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | | orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
| proportionalLayout | `boolean` | Yes | `true` | See <Link to="/docs/basics/#proportional-layout">Proportional layout</Link> | | proportionalLayout | `boolean` | Yes | `true` | See <Link to="../basics/#proportional-layout">Proportional layout</Link> |
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | | hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
| className | `string` | Yes | `''` | Attaches a classname | | className | `string` | Yes | `''` | Attaches a classname |
| disableAutoResizing | `boolean` | Yes | `false` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | `boolean` | Yes | `false` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
## Splitview API ## Splitview API
@ -131,9 +131,9 @@ const onReady = (event: SplitviewReadyEvent) => {
| | | | | |
| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedSplitview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedSplitview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedSplitview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedSplitview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Splitview Panel API ## Splitview Panel API
@ -149,7 +149,7 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
``` ```
| Property | Type | Description | | Property | Type | Description |
| ---------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| id | `string` | Panel id | | id | `string` | Panel id |
| isFocused | `boolean` | Is panel focsed | | isFocused | `boolean` | Is panel focsed |
| isActive | `boolean` | Is panel active | | isActive | `boolean` | Is panel active |
@ -159,9 +159,9 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
| | | | | | | |
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | Fires when panel dimensions change | | onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | Fires when panel dimensions change |
| onDidFocusChange | `Event<FocusEvent>` | Fire when panel is focused and blurred | | onDidFocusChange | `Event<FocusEvent>` | Fire when panel is focused and blurred |
| onDidVisibilityChange | `Event<VisibilityEvent>` | Fires when the panels visiblity property is changed (see <Link to="/docs/api/splitview/#visibility">Panel Visibility</Link>) | | onDidVisibilityChange | `Event<VisibilityEvent>` | Fires when the panels visiblity property is changed (see <Link to="./splitview/#visibility">Panel Visibility</Link>) |
| onDidActiveChange | `Event<ActiveEvent>` | Fires when the panels active property is changed (see <Link to="/docs/api/splitview/#active">Active Panel</Link>) | | onDidActiveChange | `Event<ActiveEvent>` | Fires when the panels active property is changed (see <Link to="./splitview/#active">Active Panel</Link>) |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | Fires when the panels size contrainsts change (see <Link to="/docs/api/splitview/#contraints">Panel Constraints</Link>) | | onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | Fires when the panels size contrainsts change (see <Link to="./splitview/#contraints">Panel Constraints</Link>) |
| | | | | | | |
| setVisible | `(isVisible: boolean): void` | | | setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | | | setActive | `(): void` | |

9
packages/docs/docusaurus.config.js
View File

@ -11,12 +11,12 @@ console.log(`isCI: ${process.env.CI}`);
/** @type {import('@docusaurus/types').Config} */ /** @type {import('@docusaurus/types').Config} */
const config = { const config = {
title: 'Dockview', title: 'Dockview',
tagline: 'Zero dependency layout manager for React', tagline: 'A zero dependency layout manager built for React',
url: 'https://dockview.dev', url: 'https://dockview.dev',
baseUrl: process.env.CI ? `/` : '/', baseUrl: process.env.CI ? `/` : '/',
onBrokenLinks: 'throw', onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn', onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico', favicon: 'img/dockview_logo.ico',
// GitHub pages deployment config. // GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these. // If you aren't using GitHub pages, you don't need these.
@ -52,6 +52,9 @@ const config = {
'react-dom' 'react-dom'
), ),
}, },
fallback: {
timers: false,
},
}, },
}; };
}, },
@ -123,7 +126,7 @@ const config = {
title: 'Dockview', title: 'Dockview',
logo: { logo: {
alt: 'My Site Logo', alt: 'My Site Logo',
src: 'img/logo.svg', src: 'img/dockview_logo.svg',
}, },
items: [ items: [
{ {

4
packages/docs/package.json
View File

@ -19,12 +19,14 @@
"@docusaurus/core": "2.0.0-beta.20", "@docusaurus/core": "2.0.0-beta.20",
"@docusaurus/preset-classic": "2.0.0-beta.20", "@docusaurus/preset-classic": "2.0.0-beta.20",
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^1.6.22",
"axios": "^0.27.2",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"dockview": "^1.4.3", "dockview": "^1.4.3",
"prism-react-renderer": "^1.3.1", "prism-react-renderer": "^1.3.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"recoil": "^0.7.3-alpha.2" "recoil": "^0.7.3-alpha.2",
"xml2js": "^0.4.23"
}, },
"devDependencies": { "devDependencies": {
"@docusaurus/module-type-aliases": "2.0.0-beta.20", "@docusaurus/module-type-aliases": "2.0.0-beta.20",

88
packages/docs/src/components/HomepageFeatures/index.tsx
View File

@ -10,32 +10,70 @@ type FeatureItem = {
const FeatureList: FeatureItem[] = [ const FeatureList: FeatureItem[] = [
{ {
title: 'Easy to Use', title: '',
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, Svg: require('@site/static/img/dockview_grid_2.svg').default,
description: ( description: (
<> <>
Docusaurus was designed from the ground up to be easily installed and <div className="feature-banner">
used to get your website up and running quickly. <h3 className="feature-banner-header">
Serialziable Layouts
</h3>
<p className="feature-banner-content">
Add and remove panels using the provided api or use the
serialization method to persist layouts.
</p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">
Customizable Theme
</h3>
<p className="feature-banner-content">
Adjust a numbero of provided CSS Properties for a simple
change or target specific classes for a more customized
approach.
</p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">
Choose Your Control
</h3>
<p className="feature-banner-content">
Choose from a simple splitview, a gridview, collapsable
panes or a full docking solution. Combine multiple for
more complex layouts.
</p>
</div>
</> </>
), ),
}, },
{ {
title: 'Focus on What Matters', title: '',
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, Svg: require('@site/static/img/dockview_splash_2.svg').default,
description: ( description: (
<> <>
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go <div className="feature-banner">
ahead and move your docs into the <code>docs</code> directory. <h3 className="feature-banner-header">Drag And Drop</h3>
</> <p className="feature-banner-content">
), Drag and Drop to position your layout and interact with
}, external drag events too.
{ </p>
title: 'Powered by React', </div>
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, <div className="feature-banner">
description: ( <h3 className="feature-banner-header">Zero Dependencies</h3>
<> <p className="feature-banner-content">
Extend or customize your website layout by reusing React. Docusaurus can Zero dependencies, that's all.
be extended while reusing the same header and footer. </p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">
Code Quality and Transparency
</h3>
<p className="feature-banner-content">
All of the code is run through Sonarcloud Code Analyis
which along with the source code and high test coverage
can be viewed from the Github page.
</p>
</div>
</> </>
), ),
}, },
@ -43,11 +81,17 @@ const FeatureList: FeatureItem[] = [
function Feature({ title, Svg, description }: FeatureItem) { function Feature({ title, Svg, description }: FeatureItem) {
return ( return (
<div className={clsx('col col--4')}> <div
<div className="text--center"> style={{
display: 'flex',
flexWrap: 'wrap',
margin: 'auto',
justifyContent: 'center',
}}
className="dockview-feature"
>
<Svg className={styles.featureSvg} role="img" /> <Svg className={styles.featureSvg} role="img" />
</div> <div style={{ maxWidth: '400px', padding: '0px 20px' }}>
<div className="text--center padding-horiz--md">
<h3>{title}</h3> <h3>{title}</h3>
<p>{description}</p> <p>{description}</p>
</div> </div>

4
packages/docs/src/components/HomepageFeatures/styles.module.css
View File

@ -6,6 +6,6 @@
} }
.featureSvg { .featureSvg {
height: 200px; height: 400px;
width: 200px; width: 400px;
} }

72
packages/docs/src/components/dockview/api.ts Normal file
View File

@ -0,0 +1,72 @@
import axios from 'axios';
const EXCHANGE_URL = 'https://api.exchange.coinbase.com';
const URL = 'https://api.coinbase.com/v2';
export interface Currency {
id: string;
name: string;
min_size: string;
max_precision: string;
status: string;
details: {
type: string;
symbol: string;
sort_order: number;
push_payment_methods: string[];
display_name: string;
group_types: string[];
};
}
export interface Price {
data: { base: string; currency: string; amount: string };
}
export async function allCurrencies(): Promise<Currency[]> {
try {
const response = await axios.get<Currency[]>(
`${EXCHANGE_URL}/currencies`,
{
headers: { Accept: 'application/json' },
}
);
return response.data;
} catch (err) {
return [];
}
}
export async function getCurrencies(id: string): Promise<Currency | null> {
try {
const response = await axios.get<Currency>(
`${EXCHANGE_URL}/currencies/${id}`,
{
headers: { Accept: 'application/json' },
}
);
return response.data;
} catch (err) {
return null;
}
}
export async function getPrice(base: string, quote: string) {
try {
const response = await axios.get<Price>(
`${URL}/prices/${base}-${quote}/buy`,
{
headers: { Accept: 'application/json' },
}
);
return response.data;
} catch (err) {
return null;
}
}
export const CURRENCIES = ['BTC', 'ETH', 'LTC'];

15
packages/docs/src/components/dockview/demo.scss Normal file
View File

@ -0,0 +1,15 @@
.news-panel {
height: 100%;
overflow: auto;
.story {
display: flex;
flex-direction: column;
justify-content: start;
.link {
color: white !important;
font-size: 11px;
}
}
}

186
packages/docs/src/components/dockview/demo.tsx Normal file
View File

@ -0,0 +1,186 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
import { CURRENCIES, Currency, getCurrencies, getPrice } from './api';
import './demo.scss';
const CurrencyRow = (props: { currency: Currency }) => {
const [price, setPrice] = React.useState<number>();
React.useEffect(() => {
getPrice(props.currency.id, 'USD').then((result) => {
setPrice(Number(result.data.amount));
});
}, [props.currency]);
return (
<>
<div>{props.currency.id}</div>
<div>{`${typeof price === 'number' ? `$${price}` : '-'}`}</div>
</>
);
};
const Currencies = () => {
const [currencies, setCurrencies] = React.useState<Currency[]>([]);
React.useEffect(() => {
Promise.all(CURRENCIES.map(getCurrencies)).then((results) => {
setCurrencies(results.filter(Boolean));
});
}, []);
return (
<div
style={{
height: '100%',
overflow: 'auto',
margin: '10px',
}}
>
<div
style={{
display: 'grid',
gridTemplateColumns: '50px 100px',
justifyItems: 'start',
}}
>
{currencies.map((currency) => (
<CurrencyRow key={currency.id} currency={currency} />
))}
</div>
</div>
);
};
import axios from 'axios';
type Article = {
id: 15255;
title: string;
url: string;
imageUrl: string;
newsSite: string;
summary: string;
publishedAt: string;
updatedAt: string;
featured: boolean;
launches: any[];
events: any[];
};
async function getStories(): Promise<Article[]> {
const response = await axios.get<Article[]>(
'https://api.spaceflightnewsapi.net/v3/articles'
);
return response.data;
}
const News = () => {
const [stories, setStories] = React.useState<Article[]>([]);
React.useEffect(() => {
getStories().then(setStories);
}, []);
return (
<div className="news-panel">
{stories.map((story) => {
return (
<div className="story">
<div className="metadata">
<span>{story.title}</span>
</div>
<div className="link">
<a href={story.url}>{story.url.substring(0, 10)}</a>
</div>
</div>
);
})}
</div>
);
};
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
currencies: Currencies,
news: News,
};
export const DockviewDemo = () => {
const onReady = (event: DockviewReadyEvent) => {
// event.api.addPanel({
// id: 'currencies',
// component: 'currencies',
// title: 'Prices',
// });
// event.api.addPanel({
// id: 'news',
// component: 'news',
// title: 'News',
// });
event.api.addPanel({
id: 'panel_1',
component: 'default',
title: 'Panel 1',
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
title: 'Panel 2',
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
title: 'Panel 3',
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
title: 'Panel 4',
position: { referencePanel: 'panel_3', direction: 'right' },
});
event.api.addPanel({
id: 'panel_5',
component: 'default',
title: 'Panel 5',
position: { referencePanel: 'panel_4', direction: 'within' },
});
const panel6 = event.api.addPanel({
id: 'panel_6',
component: 'default',
title: 'Panel 6',
position: { referencePanel: 'panel_4', direction: 'below' },
});
panel6.group.locked = true;
panel6.group.header.hidden = true;
event.api.addPanel({
id: 'panel_7',
component: 'default',
title: 'Panel 7',
position: { referencePanel: 'panel_6', direction: 'right' },
});
event.api.addPanel({
id: 'panel_8',
component: 'default',
title: 'Panel 8',
position: { referencePanel: 'panel_7', direction: 'within' },
});
};
return (
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-dark"
/>
);
};

19
packages/docs/src/css/custom.css
View File

@ -6,13 +6,13 @@
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
:root { :root {
--ifm-color-primary: #2e8555; --ifm-color-primary: #21222c;
--ifm-color-primary-dark: #29784c; --ifm-color-primary-dark: #1e1f28;
--ifm-color-primary-darker: #277148; --ifm-color-primary-darker: #1c1d25;
--ifm-color-primary-darkest: #205d3b; --ifm-color-primary-darkest: #17181f;
--ifm-color-primary-light: #33925d; --ifm-color-primary-light: #242530;
--ifm-color-primary-lighter: #359962; --ifm-color-primary-lighter: #262733;
--ifm-color-primary-lightest: #3cad6e; --ifm-color-primary-lightest: #2b2c39;
--ifm-code-font-size: 95%; --ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
} }
@ -29,4 +29,9 @@
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
} }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Android Emoji", EmojiSymbols, "EmojiOne Mozilla", "Twemoji Mozilla", "Segoe UI Symbol", "Noto Color Emoji"
html
}
@import "~dockview/dist/styles/dockview.css" @import "~dockview/dist/styles/dockview.css"

27
packages/docs/src/pages/index.scss Normal file
View File

@ -0,0 +1,27 @@
.badge-container {
img:not(:first-child) {
padding-left: 10px;
}
}
.dockview-feature-panel {
max-width: 1000px;
display: flex;
padding: 20px;
justify-content: space-around;
.feature-banner {
.feature-banner-header {
// font-size: 1.25em;
}
.feature-banner-content {
}
}
}
.dockview-feature {
&:nth-child(2n) {
flex-direction: row-reverse;
}
}

39
packages/docs/src/pages/index.tsx
View File

@ -5,7 +5,9 @@ import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css'; import styles from './index.module.css';
import HomepageFeatures from '@site/src/components/HomepageFeatures'; import HomepageFeatures from '@site/src/components/HomepageFeatures';
import { SimpleDockview } from '../components/simpleDockview'; import { DockviewDemo } from '../components/dockview/demo';
import useBaseUrl from '@docusaurus/useBaseUrl';
import './index.scss';
function HomepageHeader() { function HomepageHeader() {
const { siteConfig } = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
@ -27,6 +29,33 @@ function HomepageHeader() {
); );
} }
function HomepageHeader2() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<img src={useBaseUrl('/img/dockview_logo.svg')} />
<h1 className="hero__title">{siteConfig.title}</h1>
{/* <div className="badge-container">
<img src="https://badge.fury.io/js/dockview.svg" />
<img src="https://github.com/mathuo/dockview/workflows/CI/badge.svg" />
<img src="https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage" />
<img src="https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status" />
</div> */}
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs"
>
Get Started
</Link>
</div>
</div>
</header>
);
}
export default function Home(): JSX.Element { export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
return ( return (
@ -34,12 +63,12 @@ export default function Home(): JSX.Element {
title={`${siteConfig.title}`} title={`${siteConfig.title}`}
description="A zero dependency layout mananger for React." description="A zero dependency layout mananger for React."
> >
<HomepageHeader /> <HomepageHeader2 />
<main className="container"> <main className="container">
<div style={{ height: '500px', padding: '20px 0px' }}> <HomepageFeatures />
<SimpleDockview /> <div style={{ height: '500px', margin: '20px 0px' }}>
<DockviewDemo />
</div> </div>
{/* <HomepageFeatures /> */}
</main> </main>
</Layout> </Layout>
); );

45
packages/docs/static/img/dockview_grid.svg vendored Normal file
View File

@ -0,0 +1,45 @@
<svg width="312" height="200" viewBox="0 0 312 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="311.504" height="200" rx="5" fill="white"/>
<path d="M0 5C0 2.23858 2.23858 0 5 0H307C309.761 0 312 2.23858 312 5V11H0V5Z" fill="#DCDCDC"/>
<rect y="10" width="312" height="1" fill="#BABABA"/>
<rect y="11" width="156" height="189" fill="#A8A8A8"/>
<rect x="156" y="11" width="156" height="91" fill="#000C18"/>
<rect x="234" y="102" width="78" height="98" fill="#000C18"/>
<rect x="156" y="102" width="78" height="98" fill="#000C18"/>
<rect y="24" width="156" height="176" fill="#000C18"/>
<rect x="157" y="102" width="155" height="1" fill="#2B2B4A"/>
<rect width="1" height="189" transform="matrix(-1 0 0 1 157 11)" fill="#2B2B4A"/>
<path d="M234 103H233V200H234V103Z" fill="#2B2B4A"/>
<rect y="11" width="156" height="14" fill="#1C1C2A"/>
<rect y="11" width="30" height="14" fill="#10192C"/>
<rect x="31" y="11" width="30" height="14" fill="#10192C"/>
<rect x="62" y="11" width="30" height="14" fill="#000C18"/>
<rect x="30" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="61" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="92" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="157" y="11" width="155" height="14" fill="#1C1C2A"/>
<rect x="157" y="11" width="30" height="14" fill="#10192C"/>
<rect x="188" y="11" width="30" height="14" fill="#000C18"/>
<rect x="187" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="218" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="234" y="103" width="78" height="14" fill="#1C1C2A"/>
<rect x="234" y="103" width="24" height="14" fill="#10192C"/>
<rect x="258" y="103" width="24" height="14" fill="#000C18"/>
<rect x="258" y="103" width="0.503226" height="14" fill="#2B2B4A"/>
<rect x="282" y="103" width="0.503226" height="14" fill="#2B2B4A"/>
<rect x="66" y="16" width="7" height="4" rx="2" fill="white"/>
<rect x="76" y="16" width="12" height="4" rx="2" fill="white"/>
<rect x="191" y="16" width="12" height="4" rx="2" fill="#777777"/>
<rect x="260" y="108" width="7" height="4" rx="2" fill="#777777"/>
<rect x="268" y="108" width="11" height="4" rx="2" fill="#777777"/>
<rect x="206" y="16" width="4" height="4" rx="2" fill="#777777"/>
<rect x="160" y="16" width="5" height="4" rx="2" fill="#282828"/>
<rect x="166" y="16" width="16" height="4" rx="2" fill="#282828"/>
<rect x="237" y="108" width="16" height="4" rx="2" fill="#282828"/>
<rect x="33" y="16" width="15" height="4" rx="2" fill="#777777"/>
<rect x="4" y="3" width="4" height="4" rx="2" fill="#FD605E"/>
<rect x="10" y="3" width="4" height="4" rx="2" fill="#FBBC3F"/>
<rect x="16" y="3" width="4" height="4" rx="2" fill="#34C942"/>
<rect x="2" y="16" width="6" height="4" rx="2" fill="#777777"/>
<rect x="10" y="16" width="18" height="4" rx="2" fill="#777777"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

51
packages/docs/static/img/dockview_grid_2.svg vendored Normal file
View File

@ -0,0 +1,51 @@
<svg width="312" height="200" viewBox="0 0 312 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="311.504" height="200" rx="5" fill="white"/>
<path d="M0 5C0 2.23858 2.23858 0 5 0H307C309.761 0 312 2.23858 312 5V11H0V5Z" fill="#DCDCDC"/>
<rect y="10" width="312" height="1" fill="#BABABA"/>
<rect y="11" width="156" height="189" fill="#A8A8A8"/>
<rect x="156" y="11" width="156" height="91" fill="#000C18"/>
<rect x="234" y="102" width="78" height="98" fill="#000C18"/>
<rect x="156" y="102" width="78" height="98" fill="#000C18"/>
<rect y="24" width="156" height="176" fill="#000C18"/>
<rect x="157" y="102" width="155" height="1" fill="#2B2B4A"/>
<rect width="1" height="189" transform="matrix(-1 0 0 1 157 11)" fill="#2B2B4A"/>
<path d="M234 103H233V200H234V103Z" fill="#2B2B4A"/>
<rect y="11" width="156" height="14" fill="#1C1C2A"/>
<rect y="11" width="30" height="14" fill="#10192C"/>
<rect x="31" y="11" width="30" height="14" fill="#10192C"/>
<rect x="62" y="11" width="30" height="14" fill="#000C18"/>
<rect x="30" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="61" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="92" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="157" y="11" width="155" height="14" fill="#1C1C2A"/>
<rect x="157" y="11" width="30" height="14" fill="#10192C"/>
<rect x="188" y="11" width="30" height="14" fill="#000C18"/>
<rect x="187" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="218" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="234" y="103" width="78" height="14" fill="#1C1C2A"/>
<rect x="234" y="103" width="24" height="14" fill="#10192C"/>
<rect x="258" y="103" width="24" height="14" fill="#000C18"/>
<rect x="258" y="103" width="0.503226" height="14" fill="#2B2B4A"/>
<rect x="282" y="103" width="0.503226" height="14" fill="#2B2B4A"/>
<rect x="66" y="16" width="7" height="4" rx="2" fill="white"/>
<rect x="76" y="16" width="12" height="4" rx="2" fill="white"/>
<rect x="191" y="16" width="12" height="4" rx="2" fill="#777777"/>
<rect x="260" y="108" width="7" height="4" rx="2" fill="#777777"/>
<rect x="268" y="108" width="11" height="4" rx="2" fill="#777777"/>
<rect x="206" y="16" width="4" height="4" rx="2" fill="#777777"/>
<rect x="160" y="16" width="5" height="4" rx="2" fill="#282828"/>
<rect x="166" y="16" width="16" height="4" rx="2" fill="#282828"/>
<rect x="237" y="108" width="16" height="4" rx="2" fill="#282828"/>
<rect x="33" y="16" width="15" height="4" rx="2" fill="#777777"/>
<rect x="4" y="3" width="4" height="4" rx="2" fill="#FD605E"/>
<rect x="10" y="3" width="4" height="4" rx="2" fill="#FBBC3F"/>
<rect x="16" y="3" width="4" height="4" rx="2" fill="#34C942"/>
<rect x="2" y="16" width="6" height="4" rx="2" fill="#777777"/>
<rect x="10" y="16" width="18" height="4" rx="2" fill="#777777"/>
<rect x="157" y="61" width="155" height="41" fill="#E1E1E1" fill-opacity="0.25"/>
<rect x="172.5" y="68.5" width="29" height="13" fill="#000C18" stroke="#2B2B4A"/>
<rect x="176" y="73" width="7" height="4" rx="2" fill="white"/>
<rect x="187" y="73" width="12" height="4" rx="2" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M201.344 83.2654C201.52 83.1426 201.51 82.8799 201.327 82.77L197.18 80.2905C196.961 80.1595 196.691 80.3492 196.739 80.5997L197.651 85.344C197.691 85.5542 197.935 85.653 198.11 85.5302L198.772 85.067C198.867 85.0002 198.914 84.8836 198.892 84.7693L198.602 83.2612C198.554 83.0106 198.825 82.821 199.044 82.952L200.362 83.7401C200.462 83.7999 200.588 83.7954 200.683 83.7286L201.344 83.2654Z" fill="white"/>
<rect x="200.5" y="84.5" width="4" height="2" stroke="white" stroke-dasharray="0.25 0.25"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
packages/docs/static/img/dockview_logo.ico vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 279 KiB

60
packages/docs/static/img/dockview_logo.svg vendored Normal file
View File

@ -0,0 +1,60 @@
<svg width="232" height="232" viewBox="0 0 232 232" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_9_129)">
<path d="M186.777 80.7107L151.421 116.066L84.2462 48.8909C82.2936 46.9383 82.2936 43.7724 84.2462 41.8198L98.3883 27.6777C108.151 17.9146 123.981 17.9146 133.744 27.6777L186.777 80.7107Z" fill="url(#paint0_linear_9_129)"/>
</g>
<g filter="url(#filter1_i_9_129)">
<path d="M186.777 151.421L151.421 116.066L84.2462 183.241C82.2936 185.194 82.2936 188.36 84.2462 190.312L98.3883 204.454C108.151 214.218 123.981 214.218 133.744 204.454L186.777 151.421Z" fill="url(#paint1_linear_9_129)"/>
</g>
<g filter="url(#filter2_i_9_129)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M204.454 133.744L186.777 151.421L169.099 133.744L151.421 116.066L169.099 98.3884C178.862 88.6253 178.862 72.7961 169.099 63.033L186.777 80.7107L204.454 98.3884C214.217 108.151 214.217 123.981 204.454 133.744Z" fill="url(#paint2_linear_9_129)"/>
</g>
<rect x="20" y="20" width="50" height="192" rx="15" fill="url(#paint3_linear_9_129)"/>
<defs>
<filter id="filter0_i_9_129" x="82.7817" y="20.3553" width="103.995" height="99.7107" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9_129"/>
</filter>
<filter id="filter1_i_9_129" x="82.7817" y="116.066" width="103.995" height="99.7107" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9_129"/>
</filter>
<filter id="filter2_i_9_129" x="151.421" y="63.0331" width="60.3553" height="92.3883" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9_129"/>
</filter>
<linearGradient id="paint0_linear_9_129" x1="186.777" y1="80.7107" x2="80.7107" y2="45.3554" gradientUnits="userSpaceOnUse">
<stop stop-color="#0469C2"/>
<stop offset="1" stop-color="#034DC3"/>
</linearGradient>
<linearGradient id="paint1_linear_9_129" x1="186.777" y1="151.421" x2="80.7107" y2="186.777" gradientUnits="userSpaceOnUse">
<stop offset="0.00126552" stop-color="#38AFF5"/>
<stop offset="1" stop-color="#069CEF"/>
</linearGradient>
<linearGradient id="paint2_linear_9_129" x1="222.132" y1="116.066" x2="151.421" y2="116.066" gradientUnits="userSpaceOnUse">
<stop stop-color="#10B1EE"/>
<stop offset="1" stop-color="#0B8CE7"/>
</linearGradient>
<linearGradient id="paint3_linear_9_129" x1="45" y1="20" x2="69.8621" y2="211.48" gradientUnits="userSpaceOnUse">
<stop stop-color="#18A3F2"/>
<stop offset="1" stop-color="#0349AB"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

45
packages/docs/static/img/dockview_splash_2.svg vendored Normal file
View File

@ -0,0 +1,45 @@
<svg width="312" height="200" viewBox="0 0 312 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 5C0 2.23858 2.23858 0 5 0H307C309.761 0 312 2.23858 312 5V11H0V5Z" fill="#DCDCDC"/>
<rect y="10" width="312" height="1" fill="#BABABA"/>
<rect x="4" y="3" width="4" height="4" rx="2" fill="#FD605E"/>
<rect x="10" y="3" width="4" height="4" rx="2" fill="#FBBC3F"/>
<rect x="16" y="3" width="4" height="4" rx="2" fill="#34C942"/>
<rect y="11" width="312" height="189" fill="#D9D9D9"/>
<rect y="11" width="166" height="189" fill="#000C18"/>
<rect x="167" y="11" width="145" height="189" fill="#000C18"/>
<rect x="166" y="11" width="1" height="189" fill="#2B2B4A"/>
<rect x="167" y="56" width="145" height="1" fill="#2B2B4A"/>
<rect x="167" y="112" width="145" height="1" fill="#2B2B4A"/>
<rect y="11" width="166" height="10" fill="#1C1C2A"/>
<rect y="22" width="166" height="10" fill="#1C1C2A"/>
<rect y="94" width="166" height="10" fill="#1C1C2A"/>
<rect y="190" width="166" height="10" fill="#1C1C2A"/>
<rect y="21" width="166" height="1" fill="#2B2B4A"/>
<rect x="11" y="14" width="21" height="4" rx="2" fill="white"/>
<rect x="34" y="14" width="11" height="4" rx="2" fill="white"/>
<rect x="11" y="25" width="6" height="4" rx="2" fill="white"/>
<rect x="19" y="25" width="11" height="4" rx="2" fill="white"/>
<rect x="11" y="97" width="16" height="4" rx="2" fill="white"/>
<rect x="29" y="97" width="5" height="4" rx="2" fill="white"/>
<rect x="11" y="193" width="14" height="4" rx="2" fill="white"/>
<path d="M5 29L2 25.6078L2.5375 25L5 27.7986L7.4625 25.0141L8 25.6219L5 29Z" fill="white"/>
<path d="M5 101L2 97.6078L2.5375 97L5 99.7986L7.4625 97.0141L8 97.6219L5 101Z" fill="white"/>
<path d="M6 16L2.60777 19L2 18.4625L4.79859 16L2.01413 13.5375L2.62191 13L6 16Z" fill="white"/>
<path d="M6 195L2.60777 198L2 197.463L4.79859 195L2.01413 192.538L2.62191 192L6 195Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M212.674 111C212.91 111 213.068 110.779 212.971 110.584L210.797 106.175C210.682 105.942 210.318 105.942 210.203 106.175L208.029 110.584C207.932 110.779 208.09 111 208.326 111H209.215C209.343 111 209.46 110.932 209.512 110.825L210.203 109.424C210.318 109.191 210.682 109.191 210.797 109.424L211.488 110.825C211.54 110.932 211.657 111 211.785 111H212.674Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M208.326 114C208.09 114 207.932 114.221 208.029 114.416L210.203 118.825C210.318 119.058 210.682 119.058 210.797 118.825L212.971 114.416C213.068 114.221 212.91 114 212.674 114H211.785C211.657 114 211.54 114.068 211.488 114.175L210.797 115.576C210.682 115.809 210.318 115.809 210.203 115.576L209.512 114.175C209.46 114.068 209.343 114 209.215 114H208.326Z" fill="white"/>
<line x1="210.5" y1="116" x2="210.5" y2="109" stroke="white"/>
<rect x="175" y="18" width="20" height="19" rx="2" fill="#777777"/>
<rect x="198" y="18" width="5" height="5" rx="2" fill="#777777"/>
<rect x="206" y="18" width="26" height="5" rx="2" fill="#777777"/>
<rect x="203" y="71" width="44" height="5" rx="2" fill="#777777"/>
<rect x="228" y="78" width="44" height="14" rx="2" fill="#777777"/>
<rect x="250" y="71" width="22" height="5" rx="2" fill="#777777"/>
<rect x="239" y="95" width="33" height="5" rx="2" fill="#777777"/>
<rect x="272" y="117" width="33" height="5" rx="2" fill="#777777"/>
<rect x="259" y="117" width="7" height="5" rx="2" fill="#777777"/>
<rect x="213" y="95" width="23" height="5" rx="2" fill="#777777"/>
<rect x="203" y="95" width="8" height="5" rx="2" fill="#777777"/>
<rect x="198" y="25" width="15" height="5" rx="2" fill="#777777"/>
<rect x="215" y="25" width="18" height="5" rx="2" fill="#777777"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

14
packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx vendored
View File

@ -12,7 +12,7 @@ import Link from '@docusaurus/Link';
## Introduction ## Introduction
Dockview is an abstraction built on top of [Gridviews](/docs/api/gridview) where each view is a container of many tabbed panels. Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
<div <div
style={{ style={{
@ -37,14 +37,14 @@ import { ReactDockview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | --------------------------------------------------------------- | | ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| tabComponents | object | Yes | | | | tabComponents | object | Yes | | |
| watermarkComponent | object | Yes | | | | watermarkComponent | object | Yes | | |
| hideBorders | boolean | Yes | false | | | hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| onTabContextMenu | Event | Yes | false | | | onTabContextMenu | Event | Yes | false | |
| onDidDrop | Event | Yes | false | | | onDidDrop | Event | Yes | false | |
| showDndOverlay | Event | Yes | false | | | showDndOverlay | Event | Yes | false | |
@ -69,7 +69,7 @@ const onReady = (event: DockviewReadyEvent) => {
``` ```
| Property | Type | Description | | Property | Type | Description |
| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------- | | ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- |
| height | `number` | Component pixel height | | height | `number` | Component pixel height |
| width | `number` | Component pixel width | | width | `number` | Component pixel width |
| minimumHeight | `number` | | | minimumHeight | `number` | |
@ -104,9 +104,9 @@ const onReady = (event: DockviewReadyEvent) => {
| setTabHeight | `(hegiht: number \| undefined): void` | | | setTabHeight | `(hegiht: number \| undefined): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedDockview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedDockview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedDockview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedDockview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Dockview Panel API ## Dockview Panel API

12
packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx vendored
View File

@ -24,14 +24,14 @@ import { ReactGridview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ---------------------- | --------------------------------------------------------------------------- | | ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| orientation | Orientation | Yes | Orientation.HORIZONTAL | | | orientation | Orientation | Yes | Orientation.HORIZONTAL | |
| proportionalLayout | boolean | Yes | true | See <Link to="/docs/basics/#proportional-layout">Proportional layout</Link> | | proportionalLayout | boolean | Yes | true | See <Link to="../basics/#proportional-layout">Proportional layout</Link> |
| hideBorders | boolean | Yes | false | | | hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
## Gridview API ## Gridview API
@ -74,9 +74,9 @@ const onReady = (event: GridviewReadyEvent) => {
| | | | | | | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedGridview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedGridview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedGridview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedGridview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Gridview Panel API ## Gridview Panel API

14
packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx vendored
View File

@ -102,12 +102,12 @@ import { ReactPaneview } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | ----------------------------------------------------------- | | ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| headerComponents | object | Yes | | | | headerComponents | object | Yes | | |
| className | string | Yes | '' | | | className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | boolean | Yes | false | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| disableDnd | boolean | Yes | false | | | disableDnd | boolean | Yes | false | |
| onDidDrop | Event | Yes | | | | onDidDrop | Event | Yes | | |
@ -131,7 +131,7 @@ const onReady = (event: GridviewReadyEvent) => {
``` ```
| Property | Type | Description | | Property | Type | Description |
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| height | `number` | Component pixel height | | height | `number` | Component pixel height |
| width | `number` | Component pixel width | | width | `number` | Component pixel width |
| minimumSize | `number` | The sum of the `minimumSize` property for each panel | | minimumSize | `number` | The sum of the `minimumSize` property for each panel |
@ -143,7 +143,7 @@ const onReady = (event: GridviewReadyEvent) => {
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call | | onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
| onDidAddView | `Event<IPaneviewPanel>` | Fires when a view is added | | onDidAddView | `Event<IPaneviewPanel>` | Fires when a view is added |
| onDidRemoveView | `Event<IPaneviewPanel>` | Fires when a view is removed | | onDidRemoveView | `Event<IPaneviewPanel>` | Fires when a view is removed |
| onDidDrop | `Event<PaneviewDropEvent` | Fires on an external drop event (See <Link to="/docs/api/paneview/#drag-and-drop">Drag and Drop</Link>) | | onDidDrop | `Event<PaneviewDropEvent` | Fires on an external drop event (See <Link to="./paneview/#drag-and-drop">Drag and Drop</Link>) |
| | | | | | | |
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | | addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
| removePanel | `(panel: IPaneviewPanel): void` | | | removePanel | `(panel: IPaneviewPanel): void` | |
@ -151,9 +151,9 @@ const onReady = (event: GridviewReadyEvent) => {
| getPanel | `(id:string): IPaneviewPanel \| undefined` | | | getPanel | `(id:string): IPaneviewPanel \| undefined` | |
| | | | | | | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedPaneview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedPaneview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedPaneview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedPaneview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Paneview Panel API ## Paneview Panel API

20
packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx vendored
View File

@ -82,14 +82,14 @@ import { ReactSplitview } from 'dockview';
Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels. Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels.
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| ------------------- | -------------------------------------- | -------- | ------------------------ | --------------------------------------------------------------------------- | | ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | | onReady | `(event: SplitviewReadyEvent) => void` | No | | Function |
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers | | components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | | orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
| proportionalLayout | `boolean` | Yes | `true` | See <Link to="/docs/basics/#proportional-layout">Proportional layout</Link> | | proportionalLayout | `boolean` | Yes | `true` | See <Link to="../basics/#proportional-layout">Proportional layout</Link> |
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | | hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
| className | `string` | Yes | `''` | Attaches a classname | | className | `string` | Yes | `''` | Attaches a classname |
| disableAutoResizing | `boolean` | Yes | `false` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | disableAutoResizing | `boolean` | Yes | `false` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
## Splitview API ## Splitview API
@ -131,9 +131,9 @@ const onReady = (event: SplitviewReadyEvent) => {
| | | | | |
| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options: SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | Focus the active panel, if exists | | focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | See <Link to="../basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedSplitview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedSplitview): void` | <Link to="../basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedSplitview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedSplitview` | <Link to="../basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout | | clear | `(): void` | Clears the current layout |
## Splitview Panel API ## Splitview Panel API
@ -149,7 +149,7 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
``` ```
| Property | Type | Description | | Property | Type | Description |
| ---------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| id | `string` | Panel id | | id | `string` | Panel id |
| isFocused | `boolean` | Is panel focsed | | isFocused | `boolean` | Is panel focsed |
| isActive | `boolean` | Is panel active | | isActive | `boolean` | Is panel active |
@ -159,9 +159,9 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
| | | | | | | |
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | Fires when panel dimensions change | | onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | Fires when panel dimensions change |
| onDidFocusChange | `Event<FocusEvent>` | Fire when panel is focused and blurred | | onDidFocusChange | `Event<FocusEvent>` | Fire when panel is focused and blurred |
| onDidVisibilityChange | `Event<VisibilityEvent>` | Fires when the panels visiblity property is changed (see <Link to="/docs/api/splitview/#visibility">Panel Visibility</Link>) | | onDidVisibilityChange | `Event<VisibilityEvent>` | Fires when the panels visiblity property is changed (see <Link to="./splitview/#visibility">Panel Visibility</Link>) |
| onDidActiveChange | `Event<ActiveEvent>` | Fires when the panels active property is changed (see <Link to="/docs/api/splitview/#active">Active Panel</Link>) | | onDidActiveChange | `Event<ActiveEvent>` | Fires when the panels active property is changed (see <Link to="./splitview/#active">Active Panel</Link>) |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | Fires when the panels size contrainsts change (see <Link to="/docs/api/splitview/#contraints">Panel Constraints</Link>) | | onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | Fires when the panels size contrainsts change (see <Link to="./splitview/#contraints">Panel Constraints</Link>) |
| | | | | | | |
| setVisible | `(isVisible: boolean): void` | | | setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | | | setActive | `(): void` | |