Skip to content

Commit 14e8ab3

Browse files
mathuomathuo
committed
chore: docs
1 parent f7c50eb commit 14e8ab3

File tree

5 files changed

+681
-372
lines changed

5 files changed

+681
-372
lines changed

‎packages/dockview-core/src/api/component.api.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -667,21 +667,29 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
667667
}
668668

669669
/**
670+
* Invoked before an overlay is shown indicating a drop target.
670671
*
672+
* Calling `event.preventDefault()` will prevent the overlay being shown and prevent
673+
* the any subsequent drop event.
671674
*/
672675
get onWillShowOverlay(): Event<WillShowOverlayLocationEvent> {
673676
return this.component.onWillShowOverlay;
674677
}
675678

676679
/**
677-
* Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
680+
* Invoked before a group is dragged.
681+
*
682+
* Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
683+
*
678684
*/
679685
get onWillDragGroup(): Event<GroupDragEvent> {
680686
return this.component.onWillDragGroup;
681687
}
682688

683689
/**
684-
* Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
690+
* Invoked before a panel is dragged.
691+
*
692+
* Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
685693
*/
686694
get onWillDragPanel(): Event<TabDragEvent> {
687695
return this.component.onWillDragPanel;

‎packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

+96-31
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,20 @@ const headerComponents = {
6868
},
6969
};
7070

71+
const colors = [
72+
'rgba(255,0,0,0.2)',
73+
'rgba(0,255,0,0.2)',
74+
'rgba(0,0,255,0.2)',
75+
'rgba(255,255,0,0.2)',
76+
'rgba(0,255,255,0.2)',
77+
'rgba(255,0,255,0.2)',
78+
];
79+
let count = 0;
80+
7181
const DockviewDemo = (props: { theme?: string }) => {
72-
const [logLines, setLogLines] = React.useState<any[]>([]);
82+
const [logLines, setLogLines] = React.useState<
83+
{ text: string; timestamp?: Date; backgroundColor?: string }[]
84+
>([]);
7385

7486
const [panels, setPanels] = React.useState<string[]>([]);
7587
const [groups, setGroups] = React.useState<string[]>([]);
@@ -78,16 +90,39 @@ const DockviewDemo = (props: { theme?: string }) => {
7890
const [activePanel, setActivePanel] = React.useState<string>();
7991
const [activeGroup, setActiveGroup] = React.useState<string>();
8092

93+
const [pending, setPending] = React.useState<
94+
{ text: string; timestamp?: Date }[]
95+
>([]);
96+
97+
const addLogLine = (message: string) => {
98+
setPending((line) => [
99+
{ text: message, timestamp: new Date() },
100+
...line,
101+
]);
102+
};
103+
104+
React.useLayoutEffect(() => {
105+
if (pending.length === 0) {
106+
return;
107+
}
108+
const color = colors[count++ % colors.length];
109+
setLogLines((lines) => [
110+
...pending.map((_) => ({ ..._, backgroundColor: color })),
111+
...lines,
112+
]);
113+
setPending([]);
114+
}, [pending]);
115+
81116
const onReady = (event: DockviewReadyEvent) => {
82117
setApi(event.api);
83118

84119
event.api.onDidAddPanel((event) => {
85120
setPanels((_) => [..._, event.id]);
86-
setLogLines((line) => [`Panel Added ${event.id}`, ...line]);
121+
addLogLine(`Panel Added ${event.id}`);
87122
});
88123
event.api.onDidActivePanelChange((event) => {
89124
setActivePanel(event?.id);
90-
setLogLines((line) => [`Panel Activated ${event?.id}`, ...line]);
125+
addLogLine(`Panel Activated ${event?.id}`);
91126
});
92127
event.api.onDidRemovePanel((event) => {
93128
setPanels((_) => {
@@ -99,12 +134,12 @@ const DockviewDemo = (props: { theme?: string }) => {
99134

100135
return next;
101136
});
102-
setLogLines((line) => [`Panel Removed ${event.id}`, ...line]);
137+
addLogLine(`Panel Removed ${event.id}`);
103138
});
104139

105140
event.api.onDidAddGroup((event) => {
106141
setGroups((_) => [..._, event.id]);
107-
setLogLines((line) => [`Group Added ${event.id}`, ...line]);
142+
addLogLine(`Group Added ${event.id}`);
108143
});
109144

110145
event.api.onDidRemoveGroup((event) => {
@@ -117,12 +152,12 @@ const DockviewDemo = (props: { theme?: string }) => {
117152

118153
return next;
119154
});
120-
setLogLines((line) => [`Group Removed ${event.id}`, ...line]);
155+
addLogLine(`Group Removed ${event.id}`);
121156
});
122157

123158
event.api.onDidActiveGroupChange((event) => {
124159
setActiveGroup(event?.id);
125-
setLogLines((line) => [`Group Activated ${event?.id}`, ...line]);
160+
addLogLine(`Group Activated ${event?.id}`);
126161
});
127162

128163
const state = localStorage.getItem('dv-demo-state');
@@ -167,6 +202,7 @@ const DockviewDemo = (props: { theme?: string }) => {
167202
overflow: 'hidden',
168203
// flexBasis: 0
169204
height: 0,
205+
display: 'flex',
170206
}}
171207
>
172208
<DockviewReact
@@ -178,33 +214,62 @@ const DockviewDemo = (props: { theme?: string }) => {
178214
onReady={onReady}
179215
className={props.theme || 'dockview-theme-abyss'}
180216
/>
181-
</div>
182-
<div
183-
style={{
184-
height: '200px',
185-
backgroundColor: 'black',
186-
color: 'white',
187-
overflow: 'auto',
188-
}}
189-
>
190-
{logLines.map((line, i) => {
191-
return (
192-
<div key={i}>
193-
<span
217+
<div
218+
style={{
219+
// height: '200px',
220+
width: '300px',
221+
backgroundColor: 'black',
222+
color: 'white',
223+
overflow: 'auto',
224+
}}
225+
>
226+
{logLines.map((line, i) => {
227+
return (
228+
<div
194229
style={{
195-
display: 'inline-block',
196-
width: '30px',
197-
color: 'gray',
198-
borderRight: '1px solid gray',
199-
marginRight: '4px',
230+
height: '30px',
231+
overflow: 'hidden',
232+
textOverflow: 'ellipsis',
233+
whiteSpace: 'nowrap',
234+
fontSize: '13px',
235+
display: 'flex',
236+
alignItems: 'center',
237+
backgroundColor: line.backgroundColor,
200238
}}
239+
key={i}
201240
>
202-
{logLines.length - i}
203-
</span>
204-
<span>{line}</span>
205-
</div>
206-
);
207-
})}
241+
<span
242+
style={{
243+
display: 'inline-block',
244+
width: '20px',
245+
color: 'gray',
246+
borderRight: '1px solid gray',
247+
marginRight: '4px',
248+
paddingLeft: '2px',
249+
height: '100%',
250+
}}
251+
>
252+
{logLines.length - i}
253+
</span>
254+
<span>
255+
{line.timestamp && (
256+
<span
257+
style={{
258+
fontSize: '0.7em',
259+
padding: '0px 2px',
260+
}}
261+
>
262+
{line.timestamp
263+
.toISOString()
264+
.substring(11, 23)}
265+
</span>
266+
)}
267+
<span>{line.text}</span>
268+
</span>
269+
</div>
270+
);
271+
})}
272+
</div>
208273
</div>
209274
</div>
210275
);

‎packages/docs/src/components/ui/reference/docRef.tsx

+56-8
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,15 @@ type Doc = {
2323
kind: 'accessor' | 'property' | 'method';
2424
pieces: string[];
2525
};
26+
27+
type DocJson = {
28+
kind: string;
29+
metadata?: Doc;
30+
children: Doc[];
31+
};
32+
2633
type DocsJson = {
27-
[index: string]: {
28-
kind: string;
29-
metadata?: Doc;
30-
children: Doc[];
31-
};
34+
[index: string]: DocJson;
3235
};
3336

3437
export const Text = (props: { content: DocsContent[] }) => {
@@ -81,19 +84,64 @@ export const Markdown = (props: { children: string }) => {
8184
return <span>{props.children}</span>;
8285
};
8386

87+
const ClassPiece = (props: { value: DocJson; name: string }) => {
88+
let code = `interface ${props.name} {\n`;
89+
90+
code += props.value.children
91+
.map((child) => {
92+
switch (child.kind) {
93+
case 'accessor':
94+
return `\t${child.name}: ${child.code};`;
95+
case 'method':
96+
return `\t${child.name}${child.code};`;
97+
default:
98+
return null;
99+
}
100+
})
101+
.filter(Boolean)
102+
.join('\n');
103+
104+
code += `\n}`;
105+
106+
return <CodeBlock language="tsx">{code}</CodeBlock>;
107+
};
108+
109+
const InterfacePiece = (props: { value: DocJson; name: string }) => {
110+
let code = `interface ${props.name} {\n`;
111+
112+
code += props.value.children
113+
.map((child) => {
114+
switch (child.kind) {
115+
case 'property':
116+
return `\t${child.name}: ${child.code};`;
117+
default:
118+
return null;
119+
}
120+
})
121+
.join('\n');
122+
123+
code += `\n}`;
124+
125+
return <CodeBlock language="tsx">{code}</CodeBlock>;
126+
};
127+
84128
const Piece = (props: { piece: string }) => {
85129
const item = docsJson[props.piece];
86130

87131
if (!item) {
88-
return;
132+
return null;
133+
}
134+
135+
if (item.kind === 'class') {
136+
return <ClassPiece name={props.piece} value={item} />;
89137
}
90138

91139
if (item.kind === 'interface') {
92-
return;
140+
return <InterfacePiece name={props.piece} value={item} />;
93141
}
94142

95143
if (!item.metadata?.code) {
96-
return;
144+
return null;
97145
}
98146

99147
return <CodeBlock language="tsx">{item.metadata.code}</CodeBlock>;

0 commit comments

Comments
 (0)