Skip to content

Commit bd657b9

Browse files
zhangtengjinzhangtengjin
committed
feat: optimize code
optimize code
1 parent 7f33aee commit bd657b9

File tree

4 files changed

+118
-92
lines changed

4 files changed

+118
-92
lines changed

‎src/components/actionbar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function ActionBar<T = any>(props: IActionBar<T>) {
5454
const claNames = classNames(prefixClaName(rootClassName), className);
5555

5656
const items = data.map((item: IActionBarItem<T>) => (
57-
<ActionBarItem key={item.id} {...item} />
57+
<ActionBarItem key={item.id} onClick={onClick} {...item} />
5858
));
5959

6060
return (

‎src/components/collapse/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626
}
2727
.rc-collapse > .rc-collapse-item > .rc-collapse-header .rc-collapse-extra {
28-
margin: 0 16px 0 auto;
28+
margin: 0 0 0 auto;
2929
}
3030
.rc-collapse > .rc-collapse-item .rc-collapse-header-collapsable-only {
3131
cursor: default;

‎src/extensions/explore/explore.tsx

+116-62
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,136 @@
11
import * as React from 'react';
2+
import { useState } from 'react';
23
import Collapse, { Panel } from 'mo/components/collapse';
3-
import ExploreActionItem from './exploreActionItem';
4+
import Toolbar from 'mo/components/toolbar';
5+
import { IActionBarItem } from 'mo/components/actionbar';
46
import { prefixClaName } from 'mo/common/className';
5-
import { activityBarService, editorService } from 'mo';
7+
// import { editorService } from 'mo';
68
import { classNames } from 'mo/common/className';
79
import './style.scss';
810
interface IExplorerProps {
11+
isActive?: boolean;
912
}
1013

14+
export interface IPanelItem extends IActionBarItem {
15+
renderPanel?: () => React.ReactNode | JSX.Element;
16+
}
17+
interface IState {
18+
activePanelKey: React.Key | React.Key[];
19+
panelSet: IPanelItem[];
20+
}
21+
22+
const initState = {
23+
activePanelKey: '',
24+
panelSet: [
25+
{
26+
id: 'editors',
27+
name: 'OPEN EDITORS',
28+
toolbar: [
29+
{
30+
id: 'toggle',
31+
title: 'Toggle Vertical',
32+
disabled: true,
33+
iconName: 'codicon-editor-layout',
34+
},
35+
{
36+
id: 'save',
37+
title: 'Save All',
38+
disabled: true,
39+
iconName: 'codicon-save-all',
40+
},
41+
{
42+
id: 'close',
43+
title: 'Close All Editors',
44+
iconName: 'codicon-close-all',
45+
},
46+
],
47+
renderPanel: () => {
48+
return <span>editors</span>
49+
}
50+
},
51+
{
52+
id: 'sample_folder',
53+
name: 'Sample Folder',
54+
toolbar: [
55+
{
56+
id: 'new_file',
57+
title: 'New File',
58+
iconName: 'codicon-new-file',
59+
},
60+
{
61+
id: 'new_folder',
62+
title: 'New Folder',
63+
iconName: 'codicon-new-folder',
64+
},
65+
{
66+
id: 'refresh',
67+
title: 'Refresh Explorer',
68+
iconName: 'codicon-refresh',
69+
},
70+
{
71+
id: 'collapse',
72+
title: 'Collapse Folders in Explorer',
73+
iconName: 'codicon-collapse-all',
74+
},
75+
],
76+
renderPanel: () => {
77+
return <span>sample_folder</span>
78+
}
79+
},
80+
{
81+
id: 'outline',
82+
name: 'OUTLINE',
83+
toolbar: [
84+
{
85+
id: 'outline-collapse',
86+
title: 'Collapse All',
87+
iconName: 'codicon-collapse-all',
88+
},
89+
{
90+
id: 'outline-more',
91+
title: 'More Actions...',
92+
iconName: 'codicon-ellipsis',
93+
},
94+
]
95+
}
96+
]
97+
}
1198
export const Explorer: React.FunctionComponent<IExplorerProps> = (
1299
IExplorerProps
13100
) => {
14-
const AddABar = function () {
15-
const id = Math.random() * 10 + 1;
16-
activityBarService.push({
17-
id: id + '',
18-
name: 'folder' + id,
19-
iconName: 'codicon-edit',
20-
});
21-
};
22-
23-
const NewEditor = function () {
24-
const id = Math.random() * 10 + 1;
25-
const tabData = {
26-
id: id,
27-
name: 'test-tab1',
28-
value: 'just test tab data',
29-
};
30-
console.log('open editor:', tabData);
31-
editorService.open(tabData, 1);
32-
};
33-
34-
const OpenCommand = function () {
35-
// MonacoEditor.editor.getModel().
36-
};
37-
/**
38-
* waiting service
39-
* Temporarily use mock data
40-
*/
41-
const renderFileItems = () => {
42-
const data = [{
43-
id: 1,
44-
iconName: 'codicon-new-file',
45-
name: 'New File',
46-
}, {
47-
id: 2,
48-
iconName: 'codicon-new-folder',
49-
name: 'New Folder',
50-
}, {
51-
id: 3,
52-
iconName: 'codicon-refresh',
53-
name: 'Refresh Explorer',
54-
}, {
55-
id: 4,
56-
iconName: 'codicon-collapse-all',
57-
name: 'Collapse Folders in Explorer',
58-
}];
59-
return data.map((item: any) => <ExploreActionItem key={item.id} {...item} />);
101+
const [state, setState] = useState<IState>(initState)
102+
const onChangeCallback = (key: React.Key | React.Key[]) => {
103+
setState((state: IState) => ({ ...state, activePanelKey: key }))
104+
}
105+
const onClick = (e, item) => {
106+
e.stopPropagation()
107+
console.log('onClick:', e, item);
60108
};
109+
const render = (render) => {
110+
if (render) {
111+
return render()
112+
} else {
113+
return 'cannot provide...'
114+
}
115+
}
116+
const { panelSet, activePanelKey } = state;
61117
return (
62118
<div className={prefixClaName('explorer', 'sidebar')}>
63119
<Collapse
64120
accordion={true}
65-
expandIcon={({ isActive }: any) => <a className={classNames('codicon', isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}></a>}
121+
activeKey={activePanelKey}
122+
onChange={(activeKey: React.Key | React.Key[]) => { onChangeCallback(activeKey) }}
123+
expandIcon={({ isActive }: IExplorerProps) => <a className={classNames('codicon', isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}></a>}
66124
>
67-
<Panel header={<div className={prefixClaName('explorer-item', 'sidebar')}>
68-
<span>OPEN EDITORS</span>
69-
<span>
70-
{renderFileItems()}
71-
</span>
72-
</div>} key='OPEN EDITORS'>
73-
OPEN EDITORS
74-
<button onClick={AddABar}>Add Bar</button>
75-
<button onClick={NewEditor}>New Editor</button>
76-
<button onClick={OpenCommand}>Command Palette</button>
77-
</Panel>
78-
<Panel header="Sample-Folder"></Panel>
79-
<Panel header="OUTLINE">OUTLINE</Panel>
125+
{
126+
panelSet.map((panel: IPanelItem) =><Panel
127+
key={panel.id}
128+
header={panel.name}
129+
extra={activePanelKey === panel.id && <Toolbar key={Math.random()} data={panel.toolbar} onClick={onClick} />}
130+
>
131+
{render(panel.renderPanel)}
132+
</Panel>)
133+
}
80134
</Collapse>
81135
</div>
82136
);

‎src/extensions/explore/exploreActionItem.tsx

-28
This file was deleted.

0 commit comments

Comments
 (0)