/
sidebar.tsx
53 lines (46 loc) · 1.77 KB
/
sidebar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React from 'react';
import { memo } from 'react';
import { getBEMElement, prefixClaName } from 'mo/common/className';
import { ISidebar, ISidebarPane } from 'mo/model/workbench/sidebar';
export interface IHeaderProps {
title: React.ReactNode;
toolbar: React.ReactNode;
}
const defaultClassName = prefixClaName('sidebar');
const paneClassName = getBEMElement(defaultClassName, 'pane');
const headerClassName = getBEMElement(defaultClassName, 'header');
const titleClassName = getBEMElement(defaultClassName, 'title');
const contentClassName = getBEMElement(defaultClassName, 'content');
const toolbarClassName = getBEMElement(defaultClassName, 'toolbar');
export const Header = memo<IHeaderProps>(function Header(props: IHeaderProps) {
return (
<header className={headerClassName}>
<div className={titleClassName}>
<h2>{props.title}</h2>
</div>
<div className={toolbarClassName}>{props.toolbar || null}</div>
</header>
);
});
export function Content(props: React.ComponentProps<any>) {
return <div className={contentClassName}>{props.children}</div>;
}
export function Sidebar(props: ISidebar) {
const { panes = [], current } = props;
const sidebarPane: React.ReactNode = panes?.map((pane: ISidebarPane) => {
return (
<div
key={pane.id}
data-id={pane.id}
style={{
visibility: pane.id === current ? 'visible' : 'hidden',
zIndex: pane.id === current ? 1 : -1,
}}
className={paneClassName}
>
{pane.render ? pane.render() : null}
</div>
);
});
return <div className={defaultClassName}>{sidebarPane}</div>;
}