Skip to content

Commit 9b10669

Browse files
zhangtengjinzhangtengjin
committed
feat(component): collapse init
collapse init
1 parent c628e16 commit 9b10669

File tree

7 files changed

+158
-19
lines changed

7 files changed

+158
-19
lines changed

‎src/components/collapse/index.tsx

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import * as React from 'react';
22
import RcCollapse from 'rc-collapse';
33
import classNames from 'classnames';
4-
5-
import './style.scss';
4+
import { CollapseProps } from 'rc-collapse/lib/interface';
65
import { prefixClaName } from 'mo/common/className';
6+
import './style.scss';
77

8-
interface ICollapseProps {
9-
className?: string;
10-
}
11-
12-
export const Collapse: React.FunctionComponent<ICollapseProps> = (props: ICollapseProps) => {
8+
export const Collapse: React.FunctionComponent<CollapseProps> = (props: CollapseProps) => {
9+
const { className, ...others } = props;
1310
return (
14-
<RcCollapse
15-
className={classNames(prefixClaName('collapse'), props.className)}
16-
{...props}
17-
/>
11+
<div className={classNames(prefixClaName('collapse'), className)}>
12+
<RcCollapse
13+
{...others}
14+
/>
15+
</div>
1816
);
1917
};
2018

‎src/components/collapse/style.scss

+54-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,57 @@
11
@import 'mo/style/const.scss';
2-
3-
.#{prefix}-collapse {
2+
.#{$prefix}-collapse {
43
font-size: 13px;
4+
.rc-collapse {
5+
background-color: inherit;
6+
}
7+
.rc-collapse-anim-active {
8+
transition: height 0.2s ease-out;
9+
}
10+
.rc-collapse > .rc-collapse-item:first-child {
11+
border-top: none;
12+
}
13+
.rc-collapse > .rc-collapse-item > .rc-collapse-header {
14+
display: flex;
15+
align-items: center;
16+
padding: 0 5px;
17+
color: #bbbbbb;
18+
cursor: pointer;
19+
outline: none;
20+
&:focus {
21+
border: 1px solid #bbb;
22+
}
23+
&:active {
24+
border: 1px solid #bbb;
25+
}
26+
}
27+
.rc-collapse > .rc-collapse-item > .rc-collapse-header .rc-collapse-extra {
28+
margin: 0 16px 0 auto;
29+
}
30+
.rc-collapse > .rc-collapse-item .rc-collapse-header-collapsable-only {
31+
cursor: default;
32+
}
33+
.rc-collapse > .rc-collapse-item .rc-collapse-header-collapsable-only .rc-collapse-header-text {
34+
cursor: pointer;
35+
}
36+
.rc-collapse > .rc-collapse-item-disabled > .rc-collapse-header {
37+
cursor: not-allowed;
38+
color: #bbbbbb;
39+
}
40+
.rc-collapse-content {
41+
overflow: hidden;
42+
color: #bbbbbb;
43+
padding: 0 16px;
44+
}
45+
.rc-collapse-content > .rc-collapse-content-box {
46+
font-size: 12px;
47+
margin-top: 8px;
48+
margin-bottom: 8px;
49+
}
50+
.rc-collapse-content-inactive {
51+
display: none;
52+
}
53+
.rc-collapse-item:last-child > .rc-collapse-content {
54+
border-radius: 0 0 3px 3px;
55+
}
556
}
57+

‎src/extensions/explore/explore.tsx

+42-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import * as React from 'react';
22
import Collapse, { Panel } from 'mo/components/collapse';
3+
import ExploreActionItem from './exploreActionItem';
34
import { prefixClaName } from 'mo/common/className';
45
import { activityBarService, editorService } from 'mo';
5-
6+
import classNames from 'classnames';
7+
import './style.scss';
68
interface IExplorerProps {
79
}
810

@@ -30,18 +32,52 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (IExplorerProps
3032
const OpenCommand = function() {
3133
// MonacoEditor.editor.getModel().
3234
};
35+
/**
36+
* waiting service
37+
* Temporarily use mock data
38+
*/
39+
const renderFileItems = () => {
40+
const data = [{
41+
id: 1,
42+
iconName: 'codicon-new-file',
43+
name: 'New File',
44+
}, {
45+
id: 2,
46+
iconName: 'codicon-new-folder',
47+
name: 'New Folder',
48+
}, {
49+
id: 3,
50+
iconName: 'codicon-refresh',
51+
name: 'Refresh Explorer',
52+
}, {
53+
id: 4,
54+
iconName: 'codicon-collapse-all',
55+
name: 'Collapse Folders in Explorer',
56+
}];
57+
return data.map((item: any) => <ExploreActionItem key={item.id} {...item} />);
58+
};
3359
return (
3460
<div className={prefixClaName('explorer', 'sidebar')}>
35-
<Collapse className="dee">
36-
<Panel header="OPEN EDITORS">
61+
<Collapse
62+
accordion={true}
63+
expandIcon={({ isActive }: any) => <a className={classNames('codicon', isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}></a>}
64+
>
65+
<Panel header={<div className={prefixClaName('explorer-item', 'sidebar')}>
66+
<span>OPEN EDITORS</span>
67+
<span>
68+
{renderFileItems()}
69+
</span>
70+
</div>} key='OPEN EDITORS'>
3771
OPEN EDITORS
3872
<button onClick={AddABar}>Add Bar</button>
3973
<button onClick={NewEditor}>New Editor</button>
4074
<button onClick={OpenCommand}>Command Palette</button>
4175
</Panel>
42-
<Panel header="Sample-Folder"></Panel>
43-
<Panel header="OUTLINE">
44-
OUTLINE
76+
<Panel header="Sample-Folder" key='Sample-Folder'>
77+
文件夹
78+
</Panel>
79+
<Panel header="OUTLINE" key='OUTLINE'>
80+
时间线
4581
</Panel>
4682
</Collapse>
4783
</div>

‎src/extensions/explore/exploreActionItem.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from 'react';
2+
import { memo } from 'react';
3+
import classNames from 'classnames';
4+
5+
import { IExplorerFileActionItem } from 'mo/model/workbench/exolorer';
6+
function ExploreActionItem(props: IExplorerFileActionItem) {
7+
const { name = '', id, render, iconName = '', onClick } = props;
8+
let content: React.ReactNode = '';
9+
if (render) {
10+
content = render();
11+
}
12+
13+
const onClickItem = function(event) {
14+
event.stopPropagation();
15+
if (onClick) {
16+
onClick(event, props);
17+
}
18+
};
19+
20+
return (
21+
<a className={classNames('codicon', iconName)}
22+
onClick={onClickItem}
23+
title={name}
24+
data-id={id}
25+
></a>
26+
);
27+
};
28+
29+
export default memo(ExploreActionItem);

‎src/extensions/explore/style.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import 'mo/style/const.scss';
2+
.#{$sidebar}-explorer {
3+
&-item {
4+
width: 100%;
5+
span:nth-child(2) {
6+
float: right;
7+
a {
8+
margin-left: 5px;
9+
}
10+
}
11+
}
12+
}

‎src/model/workbench/exolorer.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
export interface IExplorerFileActionItem {
3+
id?: string;
4+
name?: string;
5+
data?: any;
6+
iconName?: string;
7+
render?: () => React.ReactNode | JSX.Element;
8+
onClick?: (event: React.MouseEvent, item: IExplorerFileActionItem) => void;
9+
}
10+
11+
// service api waiting

‎src/model/workbench/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export * from './editor';
33
export * from './sidebar';
44
export * from './statusBar';
55
export * from './menuBar';
6+
export * from './exolorer';

0 commit comments

Comments
 (0)