Skip to content

Commit e120d46

Browse files
zhangtengjinzhangtengjin
committed
feat: compoent ui opti
compoent ui opti
1 parent b7d37a9 commit e120d46

File tree

7 files changed

+164
-46
lines changed

7 files changed

+164
-46
lines changed

‎src/components/collapse/style.scss

+1-3
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,10 @@
4848
cursor: not-allowed;
4949
}
5050
.rc-collapse-content {
51-
overflow: hidden;
52-
// padding: 0 16px;
51+
overflow: auto;
5352
}
5453
.rc-collapse-content > .rc-collapse-content-box {
5554
font-size: 12px;
56-
margin-top: 8px;
5755
margin-bottom: 8px;
5856
}
5957
.rc-collapse-content-inactive {

‎src/components/tree/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { prefixClaName, classNames } from 'mo/common/className';
77
export interface ITree {}
88

99
interface ITreeProps extends TreeProps {
10-
prefixCls: any;
1110
}
1211

1312
export const Tree: React.FunctionComponent<ITreeProps> = (

‎src/components/tree/style.scss

+3-19
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
margin: 0;
1414
padding: 0 0 0 8px;
1515
line-height: 22px;
16-
// border: 1px solid red;
1716
height: 22px;
1817
white-space: nowrap;
1918
list-style: none;
@@ -57,7 +56,6 @@
5756
display: inline-block;
5857
height: 22px;
5958
margin: 0;
60-
// padding: 1px 3px 0 0;
6159
text-decoration: none;
6260
vertical-align: top;
6361
cursor: pointer;
@@ -82,7 +80,8 @@
8280
.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize {
8381
background-image: none;
8482
.codicon {
85-
margin-top: 3px;
83+
margin-top: 4px;
84+
transform: scale(0.8);
8685
}
8786
}
8887
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop {
@@ -91,21 +90,13 @@
9190
}
9291
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open {
9392
transform: rotate(90deg);
93+
margin-top: -2px;
9494
}
9595
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close {
9696
}
9797
.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop {
9898
background: none;
9999
}
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-
}
109100
.rc-tree-child-tree {
110101
display: none;
111102
}
@@ -121,11 +112,6 @@
121112
.rc-tree-treenode-active {
122113
background: rgba(0, 0, 0, 0.1);
123114
}
124-
.rc-tree-node-selected {
125-
background-color: #ffe6b0;
126-
border: 1px #ffb951 solid;
127-
opacity: 0.8;
128-
}
129115
.rc-tree-icon__open {
130116
margin-right: 2px;
131117
vertical-align: top;
@@ -134,12 +120,10 @@
134120
.rc-tree-icon__close {
135121
margin-right: 2px;
136122
vertical-align: top;
137-
background-position: -110px 0;
138123
}
139124
.rc-tree-icon__docu {
140125
margin-right: 2px;
141126
vertical-align: top;
142-
background-position: -110px -32px;
143127
}
144128
.rc-tree-icon__customize {
145129
margin-right: 2px;

‎src/extensions/explore/explore.tsx

+4-4
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';
4+
import TreeView from './tree';
55
import Toolbar from 'mo/components/toolbar';
66
import { IActionBarItem } from 'mo/components/actionbar';
7-
import { prefixClaName } from 'mo/common/className';
7+
import { prefixClaName, codIcon } from 'mo/common/className';
88
import { Header, Content } from 'mo/workbench/sidebar';
9-
import { codIcon } from 'mo/common/className';
9+
import { data } from './treeMock'
1010
interface IExplorerProps {
1111
isActive?: boolean;
1212
}
@@ -82,7 +82,7 @@ const initState = {
8282
},
8383
],
8484
renderPanel: () => {
85-
return <TreeView />
85+
return <TreeView data={data}/>
8686
}
8787
},
8888
{

‎src/extensions/explore/tree.tsx

+103-18
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,120 @@
11
import * as React from 'react';
2-
// import { useState } from 'react';
2+
import { memo, useEffect, useState } from 'react';
33
import Tree, { TreeNode } from 'mo/components/tree';
4-
import { prefixClaName } from 'mo/common/className';
5-
import { codIcon } from 'mo/common/className';
4+
import { IMenuItem } from 'mo/components/menu';
5+
import { prefixClaName, codIcon } from 'mo/common/className';
66
import './style.scss';
7+
8+
export interface ITreeNodeItem {
9+
title?: string;
10+
key?: string;
11+
type?: string;
12+
contextMenu?: IMenuItem[]
13+
children?: ITreeNodeItem[]
14+
readonly id?: string;
15+
icon?: string | React.ReactNode;
16+
}
717
interface ITreeProps {
8-
isActive?: boolean;
18+
data: ITreeNodeItem[]
919
}
10-
11-
// const initState = {
12-
// }
13-
export const TreeView: React.FunctionComponent<ITreeProps> = (
14-
ITreeProps
20+
const TreeView: React.FunctionComponent<ITreeProps> = (
21+
props: ITreeProps
1522
) => {
23+
const {
24+
data,
25+
} = props;
26+
const [treeData, setTreeData] = useState<ITreeNodeItem[]>(data)
27+
28+
/**
29+
* Refer to antd for details
30+
*/
31+
const onDrop = info => {
32+
console.log(info);
33+
const dropKey = info.node.props.eventKey;
34+
const dragKey = info.dragNode.props.eventKey;
35+
const dropPos = info.node.props.pos.split('-');
36+
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
37+
38+
const loopTree = (data, key, callback) => {
39+
data.forEach((item, index, arr) => {
40+
if (item.key === key) {
41+
return callback(item, index, arr);
42+
}
43+
if (item.children) {
44+
return loopTree(item.children, key, callback);
45+
}
46+
});
47+
};
48+
const data = [...treeData];
49+
50+
// Find dragObject
51+
let dragObj;
52+
loopTree(data, dragKey, (item, index, arr) => {
53+
arr.splice(index, 1);
54+
dragObj = item;
55+
});
56+
57+
if (!info.dropToGap) {
58+
// Drop on the content
59+
loopTree(data, dropKey, item => {
60+
item.children = item.children || [];
61+
item.children.push(dragObj);
62+
});
63+
} else if (
64+
(info.node.props.children || []).length > 0 &&
65+
info.node.props.expanded &&
66+
dropPosition === 1
67+
) {
68+
loopTree(data, dropKey, item => {
69+
item.children = item.children || [];
70+
item.children.unshift(dragObj);
71+
});
72+
} else {
73+
let ar, i;
74+
loopTree(data, dropKey, (item, index, arr) => {
75+
ar = arr; i = index;
76+
});
77+
if (dropPosition === -1) {
78+
ar.splice(i, 0, dragObj);
79+
} else {
80+
ar.splice(i + 1, 0, dragObj);
81+
}
82+
}
83+
console.log('data', data)
84+
setTreeData(data);
85+
};
86+
87+
useEffect(() => {
88+
return () => {
89+
console.log('clean effect')
90+
}
91+
}, data)
92+
93+
const renderTreeNodes = data =>
94+
data?.map(item => {
95+
return <TreeNode data={item} title={item.title} key={item.key} icon={codIcon(item.icon)}>
96+
{item.children && renderTreeNodes(item.children)}
97+
</TreeNode>
98+
});
1699
return (
100+
/**
101+
* TODO: contextMenu、line
102+
*/
17103
<div className={prefixClaName('tree', 'sidebar')}>
18104
<Tree
19105
prefixCls='rc-tree'
20106
draggable
107+
onDrop={onDrop}
21108
switcherIcon={codIcon('codicon-chevron-right')}
109+
onRightClick={({ event, node }) => {
110+
console.log('onRightClick', event, node)
111+
}}
112+
// onSelect={onClickItem}
22113
>
23-
<TreeNode title='parent' key='parent'>
24-
<TreeNode title='child' key='child'>
25-
<TreeNode title='child3' key='child3'>
26-
<TreeNode icon={({ selected }) => codIcon('codicon-symbol-file')} title='child5' key='child5'></TreeNode>
27-
</TreeNode>
28-
<TreeNode title='child4' key='child4'></TreeNode>
29-
</TreeNode>
30-
<TreeNode title='child1' key='child1'></TreeNode>
31-
</TreeNode>
114+
{renderTreeNodes(treeData)}
32115
</Tree>
33116
</div>
34117
);
35118
};
119+
120+
export default memo(TreeView)

‎src/extensions/explore/treeMock.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
export const data = [
2+
{
3+
title: 'folder',
4+
key: 'folder',
5+
type: 'folder',
6+
id: 'abc',
7+
children: [
8+
{
9+
// id: 'abc',
10+
title: 'abccccccccc',
11+
key: 'abccccccccc',
12+
contextMenu: [
13+
{
14+
id: 'CommandPalette',
15+
name: 'Command Palette...',
16+
title: 'Command Palette',
17+
},
18+
{
19+
id: 'Settings',
20+
name: 'Settings',
21+
title: 'Settings',
22+
},
23+
{
24+
id: 'ColorTheme',
25+
name: 'Color Theme',
26+
title: 'Color Theme',
27+
}
28+
],
29+
children: [
30+
{ title: 'test.txt', key: 'test.txt', type: 'file', icon: 'codicon-symbol-file' },
31+
{ title: 'test.js', key: 'test.js', type: 'file', icon: 'codicon-file-binary' },
32+
{ title: 'test.html', key: 'test.html', type: 'file', icon: 'codicon-file-code' },
33+
],
34+
},
35+
{
36+
title: 'xyz',
37+
key: 'xyz',
38+
type: 'folder',
39+
children: [
40+
{ title: 'test.pdf', key: 'test.pdf', type: 'file', icon: 'codicon-file-pdf' },
41+
{ title: 'test.media', key: 'test.media', type: 'file', icon: 'codicon-file-media' },
42+
{ title: 'test.zip', key: 'test.zip', type: 'file', icon: 'codicon-file-zip' },
43+
],
44+
},
45+
{
46+
title: 'file.yaml',
47+
key: 'file.yaml',
48+
type: 'file',
49+
},
50+
],
51+
}
52+
];

‎stories/components/4-Tree.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Basic = () => (
1010
prefixCls='rc-tree'
1111
draggable
1212
/**
13-
* TODO: 精灵图...
13+
* TODO: antd 用的精灵图...
1414
*/
1515
// showLine
1616
showIcon

0 commit comments

Comments
 (0)