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

Merge pull request #588 from mathuo/562-dockview-framework-wrappers-vuejs-angular-javascript-etc

Browse Source 
562 dockview framework wrappers vuejs angular javascript etc
This commit is contained in:
mathuo 2024-04-27 13:13:03 +01:00 committed by GitHub
commit 24817976f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -1418,7 +1418,7 @@ export class DockviewComponent
if (!referencePanel) {
throw new Error(
`referencePanel ${options.position.referencePanel} does not exist`
`referencePanel '${options.position.referencePanel}' does not exist`
);
}
@ -1432,7 +1432,7 @@ export class DockviewComponent
if (!referenceGroup) {
throw new Error(
`referencePanel ${options.position.referenceGroup} does not exist`
`referenceGroup '${options.position.referenceGroup}' does not exist`
);
}
} else {

15
packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
View File

@ -78,6 +78,10 @@ const colors = [
];
let count = 0;
const WatermarkComponent = () => {
return <div>custom watermark</div>;
};
const DockviewDemo = (props: { theme?: string }) => {
const [logLines, setLogLines] = React.useState<
{ text: string; timestamp?: Date; backgroundColor?: string }[]
@ -174,6 +178,8 @@ const DockviewDemo = (props: { theme?: string }) => {
defaultConfig(event.api);
};
const [watermark, setWatermark] = React.useState<boolean>(false);
return (
<div
style={{
@ -187,7 +193,11 @@ const DockviewDemo = (props: { theme?: string }) => {
}}
>
<div>
<GridActions api={api} />
<GridActions
api={api}
toggleCustomWatermark={() => setWatermark(!watermark)}
hasCustomWatermark={watermark}
/>
{api && (
<PanelActions
api={api}
@ -218,6 +228,9 @@ const DockviewDemo = (props: { theme?: string }) => {
rightHeaderActionsComponent={RightControls}
leftHeaderActionsComponent={LeftControls}
prefixHeaderActionsComponent={PrefixHeaderControls}
watermarkComponent={
watermark ? WatermarkComponent : undefined
}
onReady={onReady}
className={props.theme || 'dockview-theme-abyss'}
/>

18
packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View File

@ -2,7 +2,11 @@ import { DockviewApi } from 'dockview';
import * as React from 'react';
import { defaultConfig, nextId } from './defaultLayout';
export const GridActions = (props: { api?: DockviewApi }) => {
export const GridActions = (props: {
api?: DockviewApi;
hasCustomWatermark: boolean;
toggleCustomWatermark: () => void;
}) => {
const onClear = () => {
props.api?.clear();
};
@ -61,6 +65,18 @@ export const GridActions = (props: { api?: DockviewApi }) => {
<button className="text-button" onClick={onAddGroup}>
Add Group
</button>
<span className="button-action">
<button
className={
props.hasCustomWatermark
? 'demo-button selected'
: 'demo-button'
}
onClick={props.toggleCustomWatermark}
>
Use Custom Watermark
</button>
</span>
<button className="text-button" onClick={onClear}>
Clear
</button>

12
packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
View File

@ -7,7 +7,7 @@ const PanelAction = (props: {
panelId: string;
}) => {
const onClick = () => {
props.api?.getPanel(props.panelId)?.focus();
props.api.getPanel(props.panelId)?.focus();
};
return (
<div className="button-action">
@ -27,9 +27,9 @@ const PanelAction = (props: {
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(props.panelId);
const panel = props.api.getPanel(props.panelId);
if (panel) {
props.api?.addFloatingGroup(panel);
props.api.addFloatingGroup(panel);
}
}}
>
@ -38,9 +38,9 @@ const PanelAction = (props: {
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(props.panelId);
const panel = props.api.getPanel(props.panelId);
if (panel) {
props.api?.addPopoutGroup(panel);
props.api.addPopoutGroup(panel);
}
}}
>
@ -51,7 +51,7 @@ const PanelAction = (props: {
<button
className="demo-icon-button"
onClick={() => {
const panel = props.api?.getPanel(props.panelId);
const panel = props.api.getPanel(props.panelId);
panel?.api.close();
}}
>