diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index d48eb4cd8..b2e7e5d47 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -12,7 +12,7 @@ import Link from '@docusaurus/Link'; ## 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.
void | No | | | -| components | object | No | | | -| tabComponents | object | Yes | | | -| watermarkComponent | object | Yes | | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | -| onTabContextMenu | Event | Yes | false | | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| tabComponents | object | Yes | | | +| watermarkComponent | object | Yes | | | +| hideBorders | boolean | Yes | false | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | See Auto Resizing | +| onTabContextMenu | Event | Yes | false | | +| onDidDrop | Event | Yes | false | | +| showDndOverlay | Event | Yes | false | | ## Dockview API @@ -68,46 +68,46 @@ const onReady = (event: DockviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| size | `number` | Number of Groups | -| panels | `IDockviewPanel[]` | | -| groups | `GroupPanel[]` | | -| activePanel | `IDockviewPanel \| undefined` | | -| activeGroup | `IDockviewPanel \| undefined` | | -| | | | -| onDidLayoutChange | `Event` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `EventAuto Resizing | -| fromJSON | `(data: SerializedDockview): void` | Serialization | -| toJSON | `(): SerializedDockview` | Serialization | -| clear | `(): void` | Clears the current layout | +| Property | Type | Description | +| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- | +| height | `number` | Component pixel height | +| width | `number` | Component pixel width | +| minimumHeight | `number` | | +| maximumHeight | `number` | | +| maximumWidth | `number` | | +| maximumWidth | `number` | | +| length | `number` | Number of panels | +| size | `number` | Number of Groups | +| panels | `IDockviewPanel[]` | | +| groups | `GroupPanel[]` | | +| activePanel | `IDockviewPanel \| undefined` | | +| activeGroup | `IDockviewPanel \| undefined` | | +| | | | +| onDidLayoutChange | `Event` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddGroup | `Event` | | +| onDidRemoveGroup | `Event` | | +| onDidActiveGroupChange | `Event` | | +| onDidAddPanel | `Event` | | +| onDidRemovePanel | `Event` | | +| onDidActivePanelChange | `Event` | | +| onDidDrop | `EventAuto Resizing | +| fromJSON | `(data: SerializedDockview): void` | Serialization | +| toJSON | `(): SerializedDockview` | Serialization | +| clear | `(): void` | Clears the current layout | ## Dockview Panel API diff --git a/packages/docs/docs/components/gridview.mdx b/packages/docs/docs/components/gridview.mdx index b4913a712..5816d5fae 100644 --- a/packages/docs/docs/components/gridview.mdx +++ b/packages/docs/docs/components/gridview.mdx @@ -23,15 +23,15 @@ import Link from '@docusaurus/Link'; import { ReactGridview } from 'dockview'; ``` -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ---------------------- | --------------------------------------------------------------------------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| orientation | Orientation | Yes | Orientation.HORIZONTAL | | -| proportionalLayout | boolean | Yes | true | See Proportional layout | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| orientation | Orientation | Yes | Orientation.HORIZONTAL | | +| proportionalLayout | boolean | Yes | true | See Proportional layout | +| hideBorders | boolean | Yes | false | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | See Auto Resizing | ## Gridview API @@ -74,9 +74,9 @@ const onReady = (event: GridviewReadyEvent) => { | | | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | Auto Resizing | -| fromJSON | `(data: SerializedGridview): void` | Serialization | -| toJSON | `(): SerializedGridview` | Serialization | +| layout | `(width: number, height:number): void` | Auto Resizing | +| fromJSON | `(data: SerializedGridview): void` | Serialization | +| toJSON | `(): SerializedGridview` | Serialization | | clear | `(): void` | Clears the current layout | ## Gridview Panel API diff --git a/packages/docs/docs/components/paneview.mdx b/packages/docs/docs/components/paneview.mdx index b1906ddd8..82ede4f23 100644 --- a/packages/docs/docs/components/paneview.mdx +++ b/packages/docs/docs/components/paneview.mdx @@ -101,15 +101,15 @@ You can create a Paneview through the use of the `ReactPaneview` component. import { ReactPaneview } from 'dockview'; ``` -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | ----------------------------------------------------------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| headerComponents | object | Yes | | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | Auto Resizing | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| headerComponents | object | Yes | | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | Auto Resizing | +| disableDnd | boolean | Yes | false | | +| onDidDrop | Event | Yes | | | ## Paneview API @@ -130,31 +130,31 @@ const onReady = (event: GridviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `IPaneviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| onDidDrop | `EventDrag and Drop) | -| | | | -| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | -| removePanel | `(panel: IPaneviewPanel): void` | | -| movePanel | `(from: number, to: number): void` | | -| getPanel | `(id:string): IPaneviewPanel \| undefined` | | -| | | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedPaneview): void` | Serialization | -| toJSON | `(): SerializedPaneview` | Serialization | -| clear | `(): void` | Clears the current layout | +| Property | Type | Description | +| ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +| height | `number` | Component pixel height | +| width | `number` | Component pixel width | +| minimumSize | `number` | The sum of the `minimumSize` property for each panel | +| maximumSize | `number` | The sum of the `maximumSize` property for each panel | +| length | `number` | Number of panels | +| panels | `IPaneviewPanel[]` | All panels | +| | | | +| onDidLayoutChange | `Event` | Fires on layout change | +| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | +| onDidAddView | `Event` | Fires when a view is added | +| onDidRemoveView | `Event` | Fires when a view is removed | +| onDidDrop | `EventDrag and Drop) | +| | | | +| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | +| removePanel | `(panel: IPaneviewPanel): void` | | +| movePanel | `(from: number, to: number): void` | | +| getPanel | `(id:string): IPaneviewPanel \| undefined` | | +| | | | +| focus | `(): void` | Focus the active panel, if exists | +| layout | `(width: number, height:number): void` | See Auto Resizing | +| fromJSON | `(data: SerializedPaneview): void` | Serialization | +| toJSON | `(): SerializedPaneview` | Serialization | +| clear | `(): void` | Clears the current layout | ## Paneview Panel API diff --git a/packages/docs/docs/components/splitview.mdx b/packages/docs/docs/components/splitview.mdx index d932b9950..5c6f0ad8a 100644 --- a/packages/docs/docs/components/splitview.mdx +++ b/packages/docs/docs/components/splitview.mdx @@ -81,15 +81,15 @@ 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. -| Property | Type | Optional | Default | Description | -| ------------------- | -------------------------------------- | -------- | ------------------------ | --------------------------------------------------------------------------- | -| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | -| components | `Record` | No | | Panel renderers | -| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | -| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout | -| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | -| className | `string` | Yes | `''` | Attaches a classname | -| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing | +| Property | Type | Optional | Default | Description | +| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ | +| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | +| components | `Record` | No | | Panel renderers | +| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | +| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout | +| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | +| className | `string` | Yes | `''` | Attaches a classname | +| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing | ## Splitview API @@ -131,9 +131,9 @@ const onReady = (event: SplitviewReadyEvent) => { | | | | updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedSplitview): void` | Serialization | -| toJSON | `(): SerializedSplitview` | Serialization | +| layout | `(width: number, height:number): void` | See Auto Resizing | +| fromJSON | `(data: SerializedSplitview): void` | Serialization | +| toJSON | `(): SerializedSplitview` | Serialization | | clear | `(): void` | Clears the current layout | ## Splitview Panel API @@ -148,26 +148,26 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { }; ``` -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | Fires when panel dimensions change | -| onDidFocusChange | `Event` | Fire when panel is focused and blurred | -| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | -| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| | | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: PanelSizeEvent): void` | | +| Property | Type | Description | +| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | +| id | `string` | Panel id | +| isFocused | `boolean` | Is panel focsed | +| isActive | `boolean` | Is panel active | +| isVisible | `boolean` | Is panel visible | +| width | `number` | Panel width | +| height | `number` | Panel height | +| | | | +| onDidDimensionsChange | `Event` | Fires when panel dimensions change | +| onDidFocusChange | `Event` | Fire when panel is focused and blurred | +| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | +| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | +| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | +| | | | +| setVisible | `(isVisible: boolean): void` | | +| setActive | `(): void` | | +| | | | +| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | +| setSize | `(event: PanelSizeEvent): void` | | ## Advanced Features diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js index 2edefa793..6998b891a 100644 --- a/packages/docs/docusaurus.config.js +++ b/packages/docs/docusaurus.config.js @@ -11,12 +11,12 @@ console.log(`isCI: ${process.env.CI}`); /** @type {import('@docusaurus/types').Config} */ const config = { title: 'Dockview', - tagline: 'Zero dependency layout manager for React', + tagline: 'A zero dependency layout manager built for React', url: 'https://dockview.dev', baseUrl: process.env.CI ? `/` : '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', - favicon: 'img/favicon.ico', + favicon: 'img/dockview_logo.ico', // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. @@ -52,6 +52,9 @@ const config = { 'react-dom' ), }, + fallback: { + timers: false, + }, }, }; }, @@ -123,7 +126,7 @@ const config = { title: 'Dockview', logo: { alt: 'My Site Logo', - src: 'img/logo.svg', + src: 'img/dockview_logo.svg', }, items: [ { diff --git a/packages/docs/package.json b/packages/docs/package.json index c9a9d9be5..4868f7ed7 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -19,12 +19,14 @@ "@docusaurus/core": "2.0.0-beta.20", "@docusaurus/preset-classic": "2.0.0-beta.20", "@mdx-js/react": "^1.6.22", + "axios": "^0.27.2", "clsx": "^1.1.1", "dockview": "^1.4.3", "prism-react-renderer": "^1.3.1", "react": "^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": { "@docusaurus/module-type-aliases": "2.0.0-beta.20", diff --git a/packages/docs/src/components/HomepageFeatures/index.tsx b/packages/docs/src/components/HomepageFeatures/index.tsx index 91ef4601d..05b0bb854 100644 --- a/packages/docs/src/components/HomepageFeatures/index.tsx +++ b/packages/docs/src/components/HomepageFeatures/index.tsx @@ -3,68 +3,112 @@ import clsx from 'clsx'; import styles from './styles.module.css'; type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: JSX.Element; + title: string; + Svg: React.ComponentType>; + description: JSX.Element; }; const FeatureList: FeatureItem[] = [ - { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, + { + title: '', + Svg: require('@site/static/img/dockview_grid_2.svg').default, + description: ( + <> +
+

+ Serialziable Layouts +

+

+ Add and remove panels using the provided api or use the + serialization method to persist layouts. +

+
+
+

+ Customizable Theme +

+

+ Adjust a numbero of provided CSS Properties for a simple + change or target specific classes for a more customized + approach. +

+
+
+

+ Choose Your Control +

+

+ Choose from a simple splitview, a gridview, collapsable + panes or a full docking solution. Combine multiple for + more complex layouts. +

+
+ + ), + }, + { + title: '', + Svg: require('@site/static/img/dockview_splash_2.svg').default, + description: ( + <> +
+

Drag And Drop

+

+ Drag and Drop to position your layout and interact with + external drag events too. +

+
+
+

Zero Dependencies

+

+ Zero dependencies, that's all. +

+
+
+

+ Code Quality and Transparency +

+

+ 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. +

+
+ + ), + }, ]; -function Feature({title, Svg, description}: FeatureItem) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); +function Feature({ title, Svg, description }: FeatureItem) { + return ( +
+ +
+

{title}

+

{description}

+
+
+ ); } export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ); } diff --git a/packages/docs/src/components/HomepageFeatures/styles.module.css b/packages/docs/src/components/HomepageFeatures/styles.module.css index b248eb2e5..edcd49b21 100644 --- a/packages/docs/src/components/HomepageFeatures/styles.module.css +++ b/packages/docs/src/components/HomepageFeatures/styles.module.css @@ -6,6 +6,6 @@ } .featureSvg { - height: 200px; - width: 200px; + height: 400px; + width: 400px; } diff --git a/packages/docs/src/components/dockview/api.ts b/packages/docs/src/components/dockview/api.ts new file mode 100644 index 000000000..713a4dda2 --- /dev/null +++ b/packages/docs/src/components/dockview/api.ts @@ -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 { + try { + const response = await axios.get( + `${EXCHANGE_URL}/currencies`, + { + headers: { Accept: 'application/json' }, + } + ); + + return response.data; + } catch (err) { + return []; + } +} + +export async function getCurrencies(id: string): Promise { + try { + const response = await axios.get( + `${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( + `${URL}/prices/${base}-${quote}/buy`, + { + headers: { Accept: 'application/json' }, + } + ); + + return response.data; + } catch (err) { + return null; + } +} + +export const CURRENCIES = ['BTC', 'ETH', 'LTC']; diff --git a/packages/docs/src/components/dockview/demo.scss b/packages/docs/src/components/dockview/demo.scss new file mode 100644 index 000000000..9508b208e --- /dev/null +++ b/packages/docs/src/components/dockview/demo.scss @@ -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; + } + } +} diff --git a/packages/docs/src/components/dockview/demo.tsx b/packages/docs/src/components/dockview/demo.tsx new file mode 100644 index 000000000..4683de1cc --- /dev/null +++ b/packages/docs/src/components/dockview/demo.tsx @@ -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(); + + React.useEffect(() => { + getPrice(props.currency.id, 'USD').then((result) => { + setPrice(Number(result.data.amount)); + }); + }, [props.currency]); + + return ( + <> +
{props.currency.id}
+
{`${typeof price === 'number' ? `$${price}` : '-'}`}
+ + ); +}; + +const Currencies = () => { + const [currencies, setCurrencies] = React.useState([]); + + React.useEffect(() => { + Promise.all(CURRENCIES.map(getCurrencies)).then((results) => { + setCurrencies(results.filter(Boolean)); + }); + }, []); + + return ( +
+
+ {currencies.map((currency) => ( + + ))} +
+
+ ); +}; + +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 { + const response = await axios.get( + 'https://api.spaceflightnewsapi.net/v3/articles' + ); + + return response.data; +} + +const News = () => { + const [stories, setStories] = React.useState([]); + + React.useEffect(() => { + getStories().then(setStories); + }, []); + + return ( +
+ {stories.map((story) => { + return ( +
+
+ {story.title} +
+ +
+ ); + })} +
+ ); +}; + +const components = { + default: (props: IDockviewPanelProps<{ title: string }>) => { + return
{props.params.title}
; + }, + 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 ( + + ); +}; diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css index 9a917885e..b9359e759 100644 --- a/packages/docs/src/css/custom.css +++ b/packages/docs/src/css/custom.css @@ -6,13 +6,13 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #21222c; + --ifm-color-primary-dark: #1e1f28; + --ifm-color-primary-darker: #1c1d25; + --ifm-color-primary-darkest: #17181f; + --ifm-color-primary-light: #242530; + --ifm-color-primary-lighter: #262733; + --ifm-color-primary-lightest: #2b2c39; --ifm-code-font-size: 95%; --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); } +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" diff --git a/packages/docs/src/pages/index.scss b/packages/docs/src/pages/index.scss new file mode 100644 index 000000000..b85b289b7 --- /dev/null +++ b/packages/docs/src/pages/index.scss @@ -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; + } +} diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx index 431d507a1..2aa59dde5 100644 --- a/packages/docs/src/pages/index.tsx +++ b/packages/docs/src/pages/index.tsx @@ -5,7 +5,9 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import styles from './index.module.css'; 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() { const { siteConfig } = useDocusaurusContext(); @@ -27,6 +29,33 @@ function HomepageHeader() { ); } +function HomepageHeader2() { + const { siteConfig } = useDocusaurusContext(); + return ( +
+
+ +

{siteConfig.title}

+ {/*
+ + + + +
*/} +

{siteConfig.tagline}

+
+ + Get Started + +
+
+
+ ); +} + export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext(); return ( @@ -34,12 +63,12 @@ export default function Home(): JSX.Element { title={`${siteConfig.title}`} description="A zero dependency layout mananger for React." > - +
-
- + +
+
- {/* */}
); diff --git a/packages/docs/static/img/dockview_grid.svg b/packages/docs/static/img/dockview_grid.svg new file mode 100644 index 000000000..791252c6a --- /dev/null +++ b/packages/docs/static/img/dockview_grid.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/docs/static/img/dockview_grid_2.svg b/packages/docs/static/img/dockview_grid_2.svg new file mode 100644 index 000000000..c11c8f403 --- /dev/null +++ b/packages/docs/static/img/dockview_grid_2.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/docs/static/img/dockview_logo.ico b/packages/docs/static/img/dockview_logo.ico new file mode 100644 index 000000000..0d5b20831 Binary files /dev/null and b/packages/docs/static/img/dockview_logo.ico differ diff --git a/packages/docs/static/img/dockview_logo.svg b/packages/docs/static/img/dockview_logo.svg new file mode 100644 index 000000000..6d9865310 --- /dev/null +++ b/packages/docs/static/img/dockview_logo.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/docs/static/img/dockview_splash_2.svg b/packages/docs/static/img/dockview_splash_2.svg new file mode 100644 index 000000000..1158f6c8d --- /dev/null +++ b/packages/docs/static/img/dockview_splash_2.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx b/packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx index d48eb4cd8..b2e7e5d47 100644 --- a/packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx +++ b/packages/docs/versioned_docs/version-1.4.3/components/dockview.mdx @@ -12,7 +12,7 @@ import Link from '@docusaurus/Link'; ## 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.
void | No | | | -| components | object | No | | | -| tabComponents | object | Yes | | | -| watermarkComponent | object | Yes | | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | -| onTabContextMenu | Event | Yes | false | | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| tabComponents | object | Yes | | | +| watermarkComponent | object | Yes | | | +| hideBorders | boolean | Yes | false | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | See Auto Resizing | +| onTabContextMenu | Event | Yes | false | | +| onDidDrop | Event | Yes | false | | +| showDndOverlay | Event | Yes | false | | ## Dockview API @@ -68,46 +68,46 @@ const onReady = (event: DockviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| size | `number` | Number of Groups | -| panels | `IDockviewPanel[]` | | -| groups | `GroupPanel[]` | | -| activePanel | `IDockviewPanel \| undefined` | | -| activeGroup | `IDockviewPanel \| undefined` | | -| | | | -| onDidLayoutChange | `Event` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `EventAuto Resizing | -| fromJSON | `(data: SerializedDockview): void` | Serialization | -| toJSON | `(): SerializedDockview` | Serialization | -| clear | `(): void` | Clears the current layout | +| Property | Type | Description | +| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- | +| height | `number` | Component pixel height | +| width | `number` | Component pixel width | +| minimumHeight | `number` | | +| maximumHeight | `number` | | +| maximumWidth | `number` | | +| maximumWidth | `number` | | +| length | `number` | Number of panels | +| size | `number` | Number of Groups | +| panels | `IDockviewPanel[]` | | +| groups | `GroupPanel[]` | | +| activePanel | `IDockviewPanel \| undefined` | | +| activeGroup | `IDockviewPanel \| undefined` | | +| | | | +| onDidLayoutChange | `Event` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddGroup | `Event` | | +| onDidRemoveGroup | `Event` | | +| onDidActiveGroupChange | `Event` | | +| onDidAddPanel | `Event` | | +| onDidRemovePanel | `Event` | | +| onDidActivePanelChange | `Event` | | +| onDidDrop | `EventAuto Resizing | +| fromJSON | `(data: SerializedDockview): void` | Serialization | +| toJSON | `(): SerializedDockview` | Serialization | +| clear | `(): void` | Clears the current layout | ## Dockview Panel API diff --git a/packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx b/packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx index b4913a712..5816d5fae 100644 --- a/packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx +++ b/packages/docs/versioned_docs/version-1.4.3/components/gridview.mdx @@ -23,15 +23,15 @@ import Link from '@docusaurus/Link'; import { ReactGridview } from 'dockview'; ``` -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ---------------------- | --------------------------------------------------------------------------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| orientation | Orientation | Yes | Orientation.HORIZONTAL | | -| proportionalLayout | boolean | Yes | true | See Proportional layout | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | See Auto Resizing | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| orientation | Orientation | Yes | Orientation.HORIZONTAL | | +| proportionalLayout | boolean | Yes | true | See Proportional layout | +| hideBorders | boolean | Yes | false | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | See Auto Resizing | ## Gridview API @@ -74,9 +74,9 @@ const onReady = (event: GridviewReadyEvent) => { | | | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | Auto Resizing | -| fromJSON | `(data: SerializedGridview): void` | Serialization | -| toJSON | `(): SerializedGridview` | Serialization | +| layout | `(width: number, height:number): void` | Auto Resizing | +| fromJSON | `(data: SerializedGridview): void` | Serialization | +| toJSON | `(): SerializedGridview` | Serialization | | clear | `(): void` | Clears the current layout | ## Gridview Panel API diff --git a/packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx b/packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx index b1906ddd8..82ede4f23 100644 --- a/packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx +++ b/packages/docs/versioned_docs/version-1.4.3/components/paneview.mdx @@ -101,15 +101,15 @@ You can create a Paneview through the use of the `ReactPaneview` component. import { ReactPaneview } from 'dockview'; ``` -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | ----------------------------------------------------------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| headerComponents | object | Yes | | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | Auto Resizing | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | +| Property | Type | Optional | Default | Description | +| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| headerComponents | object | Yes | | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | Auto Resizing | +| disableDnd | boolean | Yes | false | | +| onDidDrop | Event | Yes | | | ## Paneview API @@ -130,31 +130,31 @@ const onReady = (event: GridviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `IPaneviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| onDidDrop | `EventDrag and Drop) | -| | | | -| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | -| removePanel | `(panel: IPaneviewPanel): void` | | -| movePanel | `(from: number, to: number): void` | | -| getPanel | `(id:string): IPaneviewPanel \| undefined` | | -| | | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedPaneview): void` | Serialization | -| toJSON | `(): SerializedPaneview` | Serialization | -| clear | `(): void` | Clears the current layout | +| Property | Type | Description | +| ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +| height | `number` | Component pixel height | +| width | `number` | Component pixel width | +| minimumSize | `number` | The sum of the `minimumSize` property for each panel | +| maximumSize | `number` | The sum of the `maximumSize` property for each panel | +| length | `number` | Number of panels | +| panels | `IPaneviewPanel[]` | All panels | +| | | | +| onDidLayoutChange | `Event` | Fires on layout change | +| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | +| onDidAddView | `Event` | Fires when a view is added | +| onDidRemoveView | `Event` | Fires when a view is removed | +| onDidDrop | `EventDrag and Drop) | +| | | | +| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | +| removePanel | `(panel: IPaneviewPanel): void` | | +| movePanel | `(from: number, to: number): void` | | +| getPanel | `(id:string): IPaneviewPanel \| undefined` | | +| | | | +| focus | `(): void` | Focus the active panel, if exists | +| layout | `(width: number, height:number): void` | See Auto Resizing | +| fromJSON | `(data: SerializedPaneview): void` | Serialization | +| toJSON | `(): SerializedPaneview` | Serialization | +| clear | `(): void` | Clears the current layout | ## Paneview Panel API diff --git a/packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx b/packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx index d932b9950..5c6f0ad8a 100644 --- a/packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx +++ b/packages/docs/versioned_docs/version-1.4.3/components/splitview.mdx @@ -81,15 +81,15 @@ 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. -| Property | Type | Optional | Default | Description | -| ------------------- | -------------------------------------- | -------- | ------------------------ | --------------------------------------------------------------------------- | -| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | -| components | `Record` | No | | Panel renderers | -| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | -| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout | -| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | -| className | `string` | Yes | `''` | Attaches a classname | -| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing | +| Property | Type | Optional | Default | Description | +| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ | +| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | +| components | `Record` | No | | Panel renderers | +| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | +| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout | +| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | +| className | `string` | Yes | `''` | Attaches a classname | +| disableAutoResizing | `boolean` | Yes | `false` | See Auto Resizing | ## Splitview API @@ -131,9 +131,9 @@ const onReady = (event: SplitviewReadyEvent) => { | | | | updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | See Auto Resizing | -| fromJSON | `(data: SerializedSplitview): void` | Serialization | -| toJSON | `(): SerializedSplitview` | Serialization | +| layout | `(width: number, height:number): void` | See Auto Resizing | +| fromJSON | `(data: SerializedSplitview): void` | Serialization | +| toJSON | `(): SerializedSplitview` | Serialization | | clear | `(): void` | Clears the current layout | ## Splitview Panel API @@ -148,26 +148,26 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { }; ``` -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | Fires when panel dimensions change | -| onDidFocusChange | `Event` | Fire when panel is focused and blurred | -| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | -| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| | | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: PanelSizeEvent): void` | | +| Property | Type | Description | +| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | +| id | `string` | Panel id | +| isFocused | `boolean` | Is panel focsed | +| isActive | `boolean` | Is panel active | +| isVisible | `boolean` | Is panel visible | +| width | `number` | Panel width | +| height | `number` | Panel height | +| | | | +| onDidDimensionsChange | `Event` | Fires when panel dimensions change | +| onDidFocusChange | `Event` | Fire when panel is focused and blurred | +| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | +| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | +| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | +| | | | +| setVisible | `(isVisible: boolean): void` | | +| setActive | `(): void` | | +| | | | +| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | +| setSize | `(event: PanelSizeEvent): void` | | ## Advanced Features