Skip to content

Commit b7d37a9

Browse files
zhangtengjinzhangtengjin
committed
feat: tree ui add
tree ui add
1 parent bd657b9 commit b7d37a9

File tree

8 files changed

+281
-51
lines changed

8 files changed

+281
-51
lines changed

‎src/common/className.ts ‎src/common/className.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import * as React from 'react';
12
import { APP_PREFIX } from 'mo/common/const';
2-
33
/**
44
* This function help you prefix a css class name, default is molecule.
55
* Example: prefixClaName('test') will return 'molecule-test',
@@ -14,3 +14,11 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
1414
export function classNames(...names) {
1515
return names.filter((name) => !!name).join(' ');
1616
}
17+
/**
18+
* return code Icon
19+
* @param iconName code icon names
20+
*/
21+
export function codIcon(iconName: string): any {
22+
return <span className={classNames('codicon', iconName)}></span>
23+
}
24+

‎src/components/collapse/style.scss

+17-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@import 'mo/style/const.scss';
2+
@mixin header_border {
3+
border: 1px solid rgba(97, 97, 97, 0.19);
4+
}
25
.#{$prefix}-collapse {
36
font-size: 13px;
47
.rc-collapse {
@@ -7,25 +10,33 @@
710
.rc-collapse-anim-active {
811
transition: height 0.2s ease-out;
912
}
10-
.rc-collapse > .rc-collapse-item:first-child {
13+
.rc-collapse > .rc-collapse-item {
1114
border-top: none;
15+
color: #bbbbbb;
1216
}
1317
.rc-collapse > .rc-collapse-item > .rc-collapse-header {
1418
display: flex;
1519
align-items: center;
16-
padding: 0 5px;
17-
color: #bbbbbb;
20+
padding: 1px 5px;
21+
background: #333333;
1822
cursor: pointer;
1923
outline: none;
24+
height: 22px;
25+
font-weight: bold;
2026
&:focus {
21-
border: 1px solid #bbb;
27+
@include header_border;
2228
}
2329
&:active {
24-
border: 1px solid #bbb;
30+
@include header_border;
2531
}
2632
}
2733
.rc-collapse > .rc-collapse-item > .rc-collapse-header .rc-collapse-extra {
2834
margin: 0 0 0 auto;
35+
background-color: inherit;
36+
.action-label.codicon {
37+
height: inherit;
38+
line-height: inherit;
39+
}
2940
}
3041
.rc-collapse > .rc-collapse-item .rc-collapse-header-collapsable-only {
3142
cursor: default;
@@ -35,12 +46,10 @@
3546
}
3647
.rc-collapse > .rc-collapse-item-disabled > .rc-collapse-header {
3748
cursor: not-allowed;
38-
color: #bbbbbb;
3949
}
4050
.rc-collapse-content {
4151
overflow: hidden;
42-
color: #bbbbbb;
43-
padding: 0 16px;
52+
// padding: 0 16px;
4453
}
4554
.rc-collapse-content > .rc-collapse-content-box {
4655
font-size: 12px;

‎src/components/tree/index.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
import * as React from 'react';
22
import RcTree from 'rc-tree';
3-
3+
import { TreeProps } from 'rc-tree/lib/Tree';
44
import './style.scss';
55
import { prefixClaName, classNames } from 'mo/common/className';
66

77
export interface ITree {}
88

9-
interface ITreeProps {
10-
className?: string;
11-
data?: ITree;
9+
interface ITreeProps extends TreeProps {
10+
prefixCls: any;
1211
}
1312

1413
export const Tree: React.FunctionComponent<ITreeProps> = (
1514
props: ITreeProps
1615
) => {
16+
const { className, ...others } = props;
1717
return (
18-
<RcTree
19-
className={classNames(prefixClaName('tree'), props.className)}
20-
{...props}
21-
/>
18+
<div className={classNames(prefixClaName('tree'), className)}>
19+
<RcTree
20+
{...others}
21+
/>
22+
</div>
2223
);
2324
};
24-
25+
export const TreeNode = RcTree.TreeNode;
2526
export default Tree;

‎src/components/tree/style.scss

+149-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,153 @@
11
@import 'mo/style/const.scss';
22

3-
.#{prefix}-tree {
3+
.#{$prefix}-tree {
44
font-size: 13px;
5+
.rc-tree {
6+
margin: 0;
7+
border: 1px solid transparent;
8+
}
9+
.rc-tree-focused:not(.rc-tree-active-focused) {
10+
border-color: cyan;
11+
}
12+
.rc-tree .rc-tree-treenode {
13+
margin: 0;
14+
padding: 0 0 0 8px;
15+
line-height: 22px;
16+
// border: 1px solid red;
17+
height: 22px;
18+
white-space: nowrap;
19+
list-style: none;
20+
outline: 0;
21+
cursor: pointer;
22+
&:hover {
23+
background-color: #333333;
24+
}
25+
}
26+
.rc-tree .rc-tree-treenode .draggable {
27+
color: inherit;
28+
-moz-user-select: none;
29+
-khtml-user-select: none;
30+
-webkit-user-select: none;
31+
user-select: none;
32+
/* Required to make elements draggable in old WebKit */
33+
-khtml-user-drag: element;
34+
-webkit-user-drag: element;
35+
}
36+
.rc-tree .rc-tree-treenode.drag-over > .draggable {
37+
color: inherit;
38+
background-color: #316ac5;
39+
border: 1px #316ac5 solid;
40+
opacity: 0.8;
41+
}
42+
.rc-tree .rc-tree-treenode.drag-over-gap-top > .draggable {
43+
border-top: 2px blue solid;
44+
}
45+
.rc-tree .rc-tree-treenode.drag-over-gap-bottom > .draggable {
46+
border-bottom: 2px blue solid;
47+
}
48+
.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper {
49+
color: #a60000 !important;
50+
font-weight: bold !important;
51+
}
52+
.rc-tree .rc-tree-treenode ul {
53+
margin: 0;
54+
padding: 0 0 0 18px;
55+
}
56+
.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper {
57+
display: inline-block;
58+
height: 22px;
59+
margin: 0;
60+
// padding: 1px 3px 0 0;
61+
text-decoration: none;
62+
vertical-align: top;
63+
cursor: pointer;
64+
}
65+
.rc-tree .rc-tree-treenode span.rc-tree-switcher,
66+
.rc-tree .rc-tree-treenode span.rc-tree-checkbox {
67+
display: inline-block;
68+
width: 16px;
69+
height: 16px;
70+
margin-right: 2px;
71+
line-height: 16px;
72+
vertical-align: middle;
73+
background-color: transparent;
74+
background-repeat: no-repeat;
75+
background-attachment: scroll;
76+
border: 0 none;
77+
outline: none;
78+
cursor: pointer;
79+
}
80+
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,
81+
.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,
82+
.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize {
83+
background-image: none;
84+
.codicon {
85+
margin-top: 3px;
86+
}
87+
}
88+
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop {
89+
cursor: auto;
90+
display: none;
91+
}
92+
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open {
93+
transform: rotate(90deg);
94+
}
95+
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close {
96+
}
97+
.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop {
98+
background: none;
99+
}
100+
.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > ul {
101+
background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y;
102+
}
103+
.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > .rc-tree-switcher-noop {
104+
background-position: -56px -18px;
105+
}
106+
.rc-tree.rc-tree-show-line .rc-tree-treenode:last-child > .rc-tree-switcher-noop {
107+
background-position: -56px -36px;
108+
}
109+
.rc-tree-child-tree {
110+
display: none;
111+
}
112+
.rc-tree-child-tree-open {
113+
display: block;
114+
}
115+
.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),
116+
.rc-tree-treenode-disabled > a,
117+
.rc-tree-treenode-disabled > a span {
118+
color: #767676;
119+
cursor: not-allowed;
120+
}
121+
.rc-tree-treenode-active {
122+
background: rgba(0, 0, 0, 0.1);
123+
}
124+
.rc-tree-node-selected {
125+
background-color: #ffe6b0;
126+
border: 1px #ffb951 solid;
127+
opacity: 0.8;
128+
}
129+
.rc-tree-icon__open {
130+
margin-right: 2px;
131+
vertical-align: top;
132+
background-position: -110px -16px;
133+
}
134+
.rc-tree-icon__close {
135+
margin-right: 2px;
136+
vertical-align: top;
137+
background-position: -110px 0;
138+
}
139+
.rc-tree-icon__docu {
140+
margin-right: 2px;
141+
vertical-align: top;
142+
background-position: -110px -32px;
143+
}
144+
.rc-tree-icon__customize {
145+
margin-right: 2px;
146+
vertical-align: top;
147+
}
148+
.rc-tree-indent-unit {
149+
width: 0;
150+
display: inline-block;
151+
padding-left: 7px;
152+
}
5153
}

‎src/extensions/explore/explore.tsx

+36-21
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as React from 'react';
22
import { useState } from 'react';
33
import Collapse, { Panel } from 'mo/components/collapse';
4+
import { TreeView } from './tree';
45
import Toolbar from 'mo/components/toolbar';
56
import { IActionBarItem } from 'mo/components/actionbar';
67
import { prefixClaName } from 'mo/common/className';
7-
// import { editorService } from 'mo';
8-
import { classNames } from 'mo/common/className';
9-
import './style.scss';
8+
import { Header, Content } from 'mo/workbench/sidebar';
9+
import { codIcon } from 'mo/common/className';
1010
interface IExplorerProps {
1111
isActive?: boolean;
1212
}
@@ -17,10 +17,18 @@ export interface IPanelItem extends IActionBarItem {
1717
interface IState {
1818
activePanelKey: React.Key | React.Key[];
1919
panelSet: IPanelItem[];
20+
explorerToolbar: IActionBarItem[];
2021
}
2122

2223
const initState = {
2324
activePanelKey: '',
25+
explorerToolbar: [
26+
{
27+
id: 'explorer-more',
28+
title: 'View and More Actions...',
29+
iconName: 'codicon-ellipsis',
30+
}
31+
],
2432
panelSet: [
2533
{
2634
id: 'editors',
@@ -74,7 +82,7 @@ const initState = {
7482
},
7583
],
7684
renderPanel: () => {
77-
return <span>sample_folder</span>
85+
return <TreeView />
7886
}
7987
},
8088
{
@@ -113,25 +121,32 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
113121
return 'cannot provide...'
114122
}
115123
}
116-
const { panelSet, activePanelKey } = state;
124+
const { panelSet, explorerToolbar, activePanelKey } = state;
117125
return (
118126
<div className={prefixClaName('explorer', 'sidebar')}>
119-
<Collapse
120-
accordion={true}
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>}
124-
>
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-
}
134-
</Collapse>
127+
<Header
128+
title={'Explorer'}
129+
toolbar={<Toolbar data={explorerToolbar} onClick={onClick} />}
130+
/>
131+
<Content>
132+
<Collapse
133+
accordion={true}
134+
activeKey={activePanelKey}
135+
onChange={(activeKey: React.Key | React.Key[]) => { onChangeCallback(activeKey) }}
136+
expandIcon={({ isActive }: IExplorerProps) =>
137+
codIcon(isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}
138+
>
139+
{
140+
panelSet.map((panel: IPanelItem) => <Panel
141+
key={panel.id}
142+
header={panel.name}
143+
extra={activePanelKey === panel.id && <Toolbar key={panel.id} data={panel.toolbar} onClick={onClick} />}
144+
>
145+
{render(panel.renderPanel)}
146+
</Panel>)
147+
}
148+
</Collapse>
149+
</Content>
135150
</div>
136151
);
137152
};

0 commit comments

Comments
 (0)