Skip to content

Commit e479848

Browse files
wewoorwewoor
committed
fix: merge tabs and collapse
2 parents c3e1451 + 8658641 commit e479848

File tree

14 files changed

+195
-104
lines changed

14 files changed

+195
-104
lines changed

‎.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,6 @@ module.exports = {
3535
'valid-jsdoc': 0,
3636
'no-unused-vars': 0,
3737
'no-invalid-this': 0,
38+
"react/display-name": 0
3839
},
3940
};

‎.yarnrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
# Set default registry: yarn config set registry https://registry.yarnpkg.com
2-
registry=http://registry.npm.dtstack.com/
2+
registry "http://registry.npm.dtstack.com/"

‎package.json

-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"dependencies": {
2727
"@types/react": "^16.9.35",
2828
"@types/react-dom": "^16.9.9",
29-
"core-js": "^3.6.5",
3029
"dt-utils": "^1.0.1",
3130
"immutability-helper": "^3.1.1",
3231
"loadsh": "^0.0.4",
@@ -44,7 +43,6 @@
4443
"vscode-codicons": "^0.0.10"
4544
},
4645
"devDependencies": {
47-
"@babel/core": "^7.12.3",
4846
"@commitlint/cli": "^11.0.0",
4947
"@commitlint/config-conventional": "^11.0.0",
5048
"@storybook/addon-actions": "6.0.28",

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

-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import { APP_PREFIX } from 'mo/common/const';
32
/**
43
* This function help you prefix a css class name, default is molecule.
@@ -14,11 +13,3 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
1413
export function classNames(...names) {
1514
return names.filter((name) => !!name).join(' ');
1615
}
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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ $collapse: 'collapse';
55
border: 1px solid rgba(97, 97, 97, 0.19);
66
}
77

8-
.#{prefix($collapse)} {
8+
#{prefix($collapse)} {
99
font-size: 13px;
1010

1111
.rc-collapse {
@@ -30,6 +30,7 @@ $collapse: 'collapse';
3030
height: 22px;
3131
outline: none;
3232
padding: 1px 5px;
33+
padding: 1px 5px;
3334

3435
&:focus {
3536
@include header_border;
@@ -41,7 +42,6 @@ $collapse: 'collapse';
4142
}
4243

4344
.rc-collapse > .rc-collapse-item > .rc-collapse-header .rc-collapse-extra {
44-
background-color: inherit;
4545
margin: 0 0 0 auto;
4646

4747
.action-label.codicon {

‎src/components/tree/style.scss

+45-44
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,138 @@
11
@import 'mo/style/common';
2+
$tree: 'tree';
23

3-
.#{$prefix}-tree {
4+
#{prefix($tree)} {
45
font-size: 13px;
6+
57
.rc-tree {
6-
margin: 0;
78
border: 1px solid transparent;
9+
margin: 0;
810
}
9-
.rc-tree-focused:not(.rc-tree-active-focused) {
10-
border-color: cyan;
11-
}
11+
1212
.rc-tree .rc-tree-treenode {
13-
margin: 0;
14-
padding: 0 0 0 8px;
15-
line-height: 22px;
13+
cursor: pointer;
1614
height: 22px;
17-
white-space: nowrap;
15+
line-height: 22px;
1816
list-style: none;
17+
margin: 0;
1918
outline: 0;
20-
cursor: pointer;
21-
&:hover {
22-
background-color: #333333;
23-
}
19+
padding: 0 0 0 8px;
20+
white-space: nowrap;
2421
}
22+
2523
.rc-tree .rc-tree-treenode .draggable {
26-
color: inherit;
27-
-moz-user-select: none;
28-
-khtml-user-select: none;
29-
-webkit-user-select: none;
30-
user-select: none;
3124
/* Required to make elements draggable in old WebKit */
3225
-khtml-user-drag: element;
3326
-webkit-user-drag: element;
27+
user-select: none;
28+
user-select: none;
29+
user-select: none;
30+
user-select: none;
3431
}
32+
3533
.rc-tree .rc-tree-treenode.drag-over > .draggable {
36-
color: inherit;
37-
background-color: #316ac5;
38-
border: 1px #316ac5 solid;
3934
opacity: 0.8;
4035
}
41-
.rc-tree .rc-tree-treenode.drag-over-gap-top > .draggable {
42-
border-top: 2px blue solid;
43-
}
44-
.rc-tree .rc-tree-treenode.drag-over-gap-bottom > .draggable {
45-
border-bottom: 2px blue solid;
46-
}
36+
4737
.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper {
4838
color: #a60000 !important;
4939
font-weight: bold !important;
5040
}
41+
5142
.rc-tree .rc-tree-treenode ul {
5243
margin: 0;
5344
padding: 0 0 0 18px;
5445
}
46+
5547
.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper {
48+
cursor: pointer;
5649
display: inline-block;
5750
height: 22px;
5851
margin: 0;
5952
text-decoration: none;
6053
vertical-align: top;
61-
cursor: pointer;
6254
}
55+
6356
.rc-tree .rc-tree-treenode span.rc-tree-switcher,
6457
.rc-tree .rc-tree-treenode span.rc-tree-checkbox {
65-
display: inline-block;
66-
width: 16px;
67-
height: 16px;
68-
margin-right: 2px;
69-
line-height: 16px;
70-
vertical-align: middle;
58+
background-attachment: scroll;
7159
background-color: transparent;
7260
background-repeat: no-repeat;
73-
background-attachment: scroll;
7461
border: 0 none;
75-
outline: none;
7662
cursor: pointer;
63+
display: inline-block;
64+
height: 16px;
65+
line-height: 16px;
66+
margin-right: 2px;
67+
outline: none;
68+
vertical-align: middle;
69+
width: 16px;
7770
}
71+
7872
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,
7973
.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,
8074
.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize {
8175
background-image: none;
76+
8277
.codicon {
8378
margin-top: 4px;
8479
transform: scale(0.8);
8580
}
8681
}
82+
8783
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop {
8884
cursor: auto;
8985
display: none;
9086
}
87+
9188
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open {
92-
transform: rotate(90deg);
9389
margin-top: -2px;
90+
transform: rotate(90deg);
9491
}
95-
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close {
96-
}
92+
9793
.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop {
9894
background: none;
9995
}
96+
10097
.rc-tree-child-tree {
10198
display: none;
10299
}
100+
103101
.rc-tree-child-tree-open {
104102
display: block;
105103
}
104+
106105
.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),
107106
.rc-tree-treenode-disabled > a,
108107
.rc-tree-treenode-disabled > a span {
109108
color: #767676;
110109
cursor: not-allowed;
111110
}
112-
.rc-tree-treenode-active {
113-
background: rgba(0, 0, 0, 0.1);
114-
}
111+
115112
.rc-tree-icon__open {
113+
background-position: -110px -16px;
116114
margin-right: 2px;
117115
vertical-align: top;
118-
background-position: -110px -16px;
119116
}
117+
120118
.rc-tree-icon__close {
121119
margin-right: 2px;
122120
vertical-align: top;
123121
}
122+
124123
.rc-tree-icon__docu {
125124
margin-right: 2px;
126125
vertical-align: top;
127126
}
127+
128128
.rc-tree-icon__customize {
129129
margin-right: 2px;
130130
vertical-align: top;
131131
}
132+
132133
.rc-tree-indent-unit {
133-
width: 0;
134134
display: inline-block;
135135
padding-left: 7px;
136+
width: 0;
136137
}
137138
}

‎src/extensions/explore/explore.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@ import { useState } from 'react';
33
import Collapse, { Panel } from 'mo/components/collapse';
44
import TreeView from './tree';
55
import Toolbar from 'mo/components/toolbar';
6+
import { Icon } from 'mo/components/icon';
67
import { IActionBarItem } from 'mo/components/actionbar';
7-
import { prefixClaName, codIcon } from 'mo/common/className';
8+
import { prefixClaName } from 'mo/common/className';
89
import { Header, Content } from 'mo/workbench/sidebar';
910
import { data } from './treeMock'
1011
interface IExplorerProps {
1112
isActive?: boolean;
1213
}
1314

14-
export interface IPanelItem extends IActionBarItem {
15+
export interface IPanelItem<T=any> extends IActionBarItem {
1516
renderPanel?: () => React.ReactNode | JSX.Element;
17+
toolbar?: T;
1618
}
1719
interface IState {
1820
activePanelKey: React.Key | React.Key[];
@@ -114,11 +116,14 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
114116
e.stopPropagation()
115117
console.log('onClick:', e, item);
116118
};
119+
/**
120+
* TODO: withdraw and log
121+
*/
117122
const render = (render) => {
118123
if (render) {
119124
return render()
120125
} else {
121-
return 'cannot provide...'
126+
return 'Cannot provide...'
122127
}
123128
}
124129
const { panelSet, explorerToolbar, activePanelKey } = state;
@@ -134,7 +139,7 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
134139
activeKey={activePanelKey}
135140
onChange={(activeKey: React.Key | React.Key[]) => { onChangeCallback(activeKey) }}
136141
expandIcon={({ isActive }: IExplorerProps) =>
137-
codIcon(isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}
142+
<Icon type={isActive ? 'chevron-down' : 'chevron-right'} />}
138143
>
139144
{
140145
panelSet.map((panel: IPanelItem) => <Panel

‎src/extensions/explore/tree.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import * as React from 'react';
22
import { memo, useEffect, useState } from 'react';
33
import Tree, { TreeNode } from 'mo/components/tree';
44
import { IMenuItem } from 'mo/components/menu';
5-
import { prefixClaName, codIcon } from 'mo/common/className';
5+
import { Icon } from 'mo/components/icon';
6+
import { prefixClaName } from 'mo/common/className';
67
import './style.scss';
78

89
export interface ITreeNodeItem {
@@ -27,6 +28,7 @@ const TreeView: React.FunctionComponent<ITreeProps> = (
2728

2829
/**
2930
* Refer to antd for details
31+
* TODO: move component
3032
*/
3133
const onDrop = info => {
3234
console.log(info);
@@ -92,7 +94,7 @@ const TreeView: React.FunctionComponent<ITreeProps> = (
9294

9395
const renderTreeNodes = data =>
9496
data?.map(item => {
95-
return <TreeNode data={item} title={item.title} key={item.key} icon={codIcon(item.icon)}>
97+
return <TreeNode data={item} title={item.title} key={item.key} icon={<Icon type={item.icon} />}>
9698
{item.children && renderTreeNodes(item.children)}
9799
</TreeNode>
98100
});
@@ -105,7 +107,7 @@ const TreeView: React.FunctionComponent<ITreeProps> = (
105107
prefixCls='rc-tree'
106108
draggable
107109
onDrop={onDrop}
108-
switcherIcon={codIcon('codicon-chevron-right')}
110+
switcherIcon={<Icon type='chevron-right' />}
109111
onRightClick={({ event, node }) => {
110112
console.log('onRightClick', event, node)
111113
}}

‎src/extensions/explore/treeMock.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,19 @@ export const data = [
2727
}
2828
],
2929
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' },
30+
{ title: 'test.txt', key: 'test.txt', type: 'file', icon: 'symbol-file' },
31+
{ title: 'test.js', key: 'test.js', type: 'file', icon: 'file-binary' },
32+
{ title: 'test.html', key: 'test.html', type: 'file', icon: 'file-code' },
3333
],
3434
},
3535
{
3636
title: 'xyz',
3737
key: 'xyz',
3838
type: 'folder',
3939
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' },
40+
{ title: 'test.pdf', key: 'test.pdf', type: 'file', icon: 'file-pdf' },
41+
{ title: 'test.media', key: 'test.media', type: 'file', icon: 'file-media' },
42+
{ title: 'test.zip', key: 'test.zip', type: 'file', icon: 'file-zip' },
4343
],
4444
},
4545
{

‎src/extensions/search/index.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
sidebarService,
55
IExtensionService,
66
IActivityBarItem,
7+
editorService,
78
} from 'mo';
89
import { IExtension } from 'mo/model/extension';
910
import SearchPane from './searchPane';
@@ -34,6 +35,13 @@ function init() {
3435
});
3536
}
3637
});
38+
39+
editorService.changeTab((data ) => {
40+
console.log(data)
41+
})
42+
editorService.selectTab(tab =>{
43+
console.log(`selected tabs${tab}`)
44+
})
3745
}
3846

3947
export const ExtendSearch: IExtension = {

0 commit comments

Comments
 (0)