Skip to content

Commit c74adaf

Browse files
zhangtengjinzhangtengjin
committed
feat: extract data to service
extract data to service
1 parent ffa5708 commit c74adaf

18 files changed

+325
-153282
lines changed

‎src/components/collapse/index.tsx

+74-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,86 @@
11
import * as React from 'react';
2-
import RcCollapse from 'rc-collapse';
2+
import { useState } from 'react';
3+
import RcCollapse, { Panel } from 'rc-collapse';
34
import { CollapseProps } from 'rc-collapse/lib/interface';
5+
import Toolbar from 'mo/components/toolbar';
6+
import { Icon } from 'mo/components/icon';
47
import { prefixClaName, classNames } from 'mo/common/className';
5-
import './style.scss';
8+
import { IPanelItem } from 'mo/model/workbench/explorer'
69

7-
export const Collapse: React.FunctionComponent<CollapseProps> = (
8-
props: CollapseProps
10+
interface IExpandProps {
11+
isActive?: boolean;
12+
}
13+
interface ICollapseProps extends CollapseProps {
14+
data?: IPanelItem[];
15+
className?: string;
16+
}
17+
18+
interface IState {
19+
activePanelKey: React.Key | React.Key[];
20+
}
21+
22+
const initState = {
23+
activePanelKey: ''
24+
};
25+
const Collapse: React.FunctionComponent<ICollapseProps> = (
26+
props: ICollapseProps
927
) => {
10-
const { className, ...others } = props;
28+
const [state, setState] = useState<IState>(initState);
29+
const { className, data = [], ...others } = props;
30+
const onChangeCallback = (key: React.Key | React.Key[]) => {
31+
setState((state: IState) => ({ ...state, activePanelKey: key }));
32+
};
33+
const onClick = (e, item) => {
34+
e.stopPropagation();
35+
console.log('onClick:', e, item);
36+
};
37+
const render = (render) => {
38+
if (render) {
39+
return render();
40+
} else {
41+
return 'Cannot provide...';
42+
}
43+
};
44+
const { activePanelKey } = state;
1145
return (
1246
<div className={classNames(prefixClaName('collapse'), className)}>
13-
<RcCollapse {...others} />
47+
<RcCollapse
48+
{...others}
49+
accordion={true}
50+
activeKey={activePanelKey}
51+
onChange={(activeKey: React.Key | React.Key[]) => {
52+
onChangeCallback(activeKey);
53+
}}
54+
expandIcon={({ isActive }: IExpandProps) => (
55+
<Icon
56+
type={isActive ? 'chevron-down' : 'chevron-right'}
57+
/>
58+
)}
59+
>
60+
{data.map((panel: IPanelItem) => (
61+
<Panel
62+
key={panel.id}
63+
header={panel.name}
64+
extra={
65+
activePanelKey === panel.id && (
66+
<Toolbar
67+
key={panel.id}
68+
data={panel.toolbar}
69+
onClick={onClick}
70+
/>
71+
)
72+
}
73+
>
74+
{render(panel.renderPanel)}
75+
</Panel>
76+
))}
77+
</RcCollapse>
1478
</div>
1579
);
1680
};
1781

18-
export const Panel = RcCollapse.Panel;
82+
export { Panel };
1983
export default Collapse;
84+
85+
86+

‎src/extensions/explore/explore.tsx

+23-148
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,45 @@
11
import * as React from 'react';
2-
import { useState } from 'react';
3-
import Collapse, { Panel } from 'mo/components/collapse';
4-
import TreeView from './tree';
2+
import { mapState } from 'mo/react';
3+
import Collapse from 'mo/components/collapse';
54
import Toolbar from 'mo/components/toolbar';
6-
import { Icon } from 'mo/components/icon';
75
import { IActionBarItem } from 'mo/components/actionbar';
8-
import { prefixClaName } from 'mo/common/className';
96
import { Header, Content } from 'mo/workbench/sidebar';
10-
import { data } from './treeMock';
11-
interface IExplorerProps {
12-
isActive?: boolean;
13-
}
7+
import { prefixClaName } from 'mo/common/className';
8+
import { explorerService } from 'mo/services';
9+
import { IExpolorer } from 'mo/model/workbench/explorer'
1410

15-
export interface IPanelItem<T = any> extends IActionBarItem {
16-
renderPanel?: () => React.ReactNode | JSX.Element;
17-
toolbar?: T;
18-
}
19-
interface IState {
20-
activePanelKey: React.Key | React.Key[];
21-
panelSet: IPanelItem[];
22-
explorerToolbar: IActionBarItem[];
23-
}
11+
const explorerToolbar: IActionBarItem[] = [
12+
{
13+
id: 'explorer-more',
14+
title: 'View and More Actions...',
15+
iconName: 'codicon-ellipsis',
16+
},
17+
];
2418

25-
const initState = {
26-
activePanelKey: '',
27-
explorerToolbar: [
28-
{
29-
id: 'explorer-more',
30-
title: 'View and More Actions...',
31-
iconName: 'codicon-ellipsis',
32-
},
33-
],
34-
panelSet: [
35-
{
36-
id: 'editors',
37-
name: 'OPEN EDITORS',
38-
toolbar: [
39-
{
40-
id: 'toggle',
41-
title: 'Toggle Vertical',
42-
disabled: true,
43-
iconName: 'codicon-editor-layout',
44-
},
45-
{
46-
id: 'save',
47-
title: 'Save All',
48-
disabled: true,
49-
iconName: 'codicon-save-all',
50-
},
51-
{
52-
id: 'close',
53-
title: 'Close All Editors',
54-
iconName: 'codicon-close-all',
55-
},
56-
],
57-
renderPanel: () => {
58-
return <span>editors</span>;
59-
},
60-
},
61-
{
62-
id: 'sample_folder',
63-
name: 'Sample Folder',
64-
toolbar: [
65-
{
66-
id: 'new_file',
67-
title: 'New File',
68-
iconName: 'codicon-new-file',
69-
},
70-
{
71-
id: 'new_folder',
72-
title: 'New Folder',
73-
iconName: 'codicon-new-folder',
74-
},
75-
{
76-
id: 'refresh',
77-
title: 'Refresh Explorer',
78-
iconName: 'codicon-refresh',
79-
},
80-
{
81-
id: 'collapse',
82-
title: 'Collapse Folders in Explorer',
83-
iconName: 'codicon-collapse-all',
84-
},
85-
],
86-
renderPanel: () => {
87-
return <TreeView data={data} />;
88-
},
89-
},
90-
{
91-
id: 'outline',
92-
name: 'OUTLINE',
93-
toolbar: [
94-
{
95-
id: 'outline-collapse',
96-
title: 'Collapse All',
97-
iconName: 'codicon-collapse-all',
98-
},
99-
{
100-
id: 'outline-more',
101-
title: 'More Actions...',
102-
iconName: 'codicon-ellipsis',
103-
},
104-
],
105-
},
106-
],
107-
};
108-
export const Explorer: React.FunctionComponent<IExplorerProps> = (
109-
IExplorerProps
19+
const Explorer: React.FunctionComponent<IExpolorer> = (
20+
props: IExpolorer
11021
) => {
111-
const [state, setState] = useState<IState>(initState);
112-
const onChangeCallback = (key: React.Key | React.Key[]) => {
113-
setState((state: IState) => ({ ...state, activePanelKey: key }));
114-
};
22+
const { data = [] } = props;
11523
const onClick = (e, item) => {
11624
e.stopPropagation();
11725
console.log('onClick:', e, item);
11826
};
119-
/**
120-
* TODO: withdraw and log
121-
*/
122-
const render = (render) => {
123-
if (render) {
124-
return render();
125-
} else {
126-
return 'Cannot provide...';
127-
}
128-
};
129-
const { panelSet, explorerToolbar, activePanelKey } = state;
27+
13028
return (
13129
<div className={prefixClaName('explorer', 'sidebar')}>
13230
<Header
13331
title={'Explorer'}
13432
toolbar={<Toolbar data={explorerToolbar} onClick={onClick} />}
13533
/>
13634
<Content>
137-
<Collapse
138-
accordion={true}
139-
activeKey={activePanelKey}
140-
onChange={(activeKey: React.Key | React.Key[]) => {
141-
onChangeCallback(activeKey);
142-
}}
143-
expandIcon={({ isActive }: IExplorerProps) => (
144-
<Icon
145-
type={isActive ? 'chevron-down' : 'chevron-right'}
146-
/>
147-
)}
148-
>
149-
{panelSet.map((panel: IPanelItem) => (
150-
<Panel
151-
key={panel.id}
152-
header={panel.name}
153-
extra={
154-
activePanelKey === panel.id && (
155-
<Toolbar
156-
key={panel.id}
157-
data={panel.toolbar}
158-
onClick={onClick}
159-
/>
160-
)
161-
}
162-
>
163-
{render(panel.renderPanel)}
164-
</Panel>
165-
))}
166-
</Collapse>
35+
<Collapse data={data} />
16736
</Content>
16837
</div>
16938
);
17039
};
40+
41+
export const ExplorerView = mapState(
42+
Explorer,
43+
explorerService.getState()
44+
);
45+

0 commit comments

Comments
 (0)