Skip to content

Commit

Permalink
feat: tree ui add
Browse files Browse the repository at this point in the history 
tree ui add
  • Loading branch information
@zhangtengjin
zhangtengjin committed Nov 18, 2020
1 parent bd657b9 commit b7d37a9
Show file tree
Hide file tree
Showing 8 changed files with 281 additions and 51 deletions.
10 changes: 9 additions & 1 deletion src/common/className.ts → src/common/className.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { APP_PREFIX } from 'mo/common/const';

/**
* This function help you prefix a css class name, default is molecule.
* Example: prefixClaName('test') will return 'molecule-test',
Expand All @@ -14,3 +14,11 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
export function classNames(...names) {
return names.filter((name) => !!name).join(' ');
}
/**
* return code Icon
* @param iconName code icon names
*/
export function codIcon(iconName: string): any {
return <span className={classNames('codicon', iconName)}></span>
}

25 changes: 17 additions & 8 deletions src/components/collapse/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
@import 'mo/style/const.scss';
@mixin header_border {
border: 1px solid rgba(97, 97, 97, 0.19);
}
.#{$prefix}-collapse {
font-size: 13px;
.rc-collapse {
Expand All @@ -7,25 +10,33 @@
.rc-collapse-anim-active {
transition: height 0.2s ease-out;
}
.rc-collapse > .rc-collapse-item:first-child {
.rc-collapse > .rc-collapse-item {
border-top: none;
color: #bbbbbb;
}
.rc-collapse > .rc-collapse-item > .rc-collapse-header {
display: flex;
align-items: center;
padding: 0 5px;
color: #bbbbbb;
padding: 1px 5px;
background: #333333;
cursor: pointer;
outline: none;
height: 22px;
font-weight: bold;
&:focus {
border: 1px solid #bbb;
@include header_border;
}
&:active {
border: 1px solid #bbb;
@include header_border;
}
}
.rc-collapse > .rc-collapse-item > .rc-collapse-header .rc-collapse-extra {
margin: 0 0 0 auto;
background-color: inherit;
.action-label.codicon {
height: inherit;
line-height: inherit;
}
}
.rc-collapse > .rc-collapse-item .rc-collapse-header-collapsable-only {
cursor: default;
Expand All @@ -35,12 +46,10 @@
}
.rc-collapse > .rc-collapse-item-disabled > .rc-collapse-header {
cursor: not-allowed;
color: #bbbbbb;
}
.rc-collapse-content {
overflow: hidden;
color: #bbbbbb;
padding: 0 16px;
// padding: 0 16px;
}
.rc-collapse-content > .rc-collapse-content-box {
font-size: 12px;
Expand Down
19 changes: 10 additions & 9 deletions src/components/tree/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import * as React from 'react';
import RcTree from 'rc-tree';

import { TreeProps } from 'rc-tree/lib/Tree';
import './style.scss';
import { prefixClaName, classNames } from 'mo/common/className';

export interface ITree {}

interface ITreeProps {
className?: string;
data?: ITree;
interface ITreeProps extends TreeProps {
prefixCls: any;
}

export const Tree: React.FunctionComponent<ITreeProps> = (
props: ITreeProps
) => {
const { className, ...others } = props;
return (
<RcTree
className={classNames(prefixClaName('tree'), props.className)}
{...props}
/>
<div className={classNames(prefixClaName('tree'), className)}>
<RcTree
{...others}
/>
</div>
);
};

export const TreeNode = RcTree.TreeNode;
export default Tree;
150 changes: 149 additions & 1 deletion src/components/tree/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,153 @@
@import 'mo/style/const.scss';

.#{prefix}-tree {
.#{$prefix}-tree {
font-size: 13px;
.rc-tree {
margin: 0;
border: 1px solid transparent;
}
.rc-tree-focused:not(.rc-tree-active-focused) {
border-color: cyan;
}
.rc-tree .rc-tree-treenode {
margin: 0;
padding: 0 0 0 8px;
line-height: 22px;
// border: 1px solid red;
height: 22px;
white-space: nowrap;
list-style: none;
outline: 0;
cursor: pointer;
&:hover {
background-color: #333333;
}
}
.rc-tree .rc-tree-treenode .draggable {
color: inherit;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element;
}
.rc-tree .rc-tree-treenode.drag-over > .draggable {
color: inherit;
background-color: #316ac5;
border: 1px #316ac5 solid;
opacity: 0.8;
}
.rc-tree .rc-tree-treenode.drag-over-gap-top > .draggable {
border-top: 2px blue solid;
}
.rc-tree .rc-tree-treenode.drag-over-gap-bottom > .draggable {
border-bottom: 2px blue solid;
}
.rc-tree .rc-tree-treenode.filter-node > .rc-tree-node-content-wrapper {
color: #a60000 !important;
font-weight: bold !important;
}
.rc-tree .rc-tree-treenode ul {
margin: 0;
padding: 0 0 0 18px;
}
.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper {
display: inline-block;
height: 22px;
margin: 0;
// padding: 1px 3px 0 0;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
.rc-tree .rc-tree-treenode span.rc-tree-switcher,
.rc-tree .rc-tree-treenode span.rc-tree-checkbox {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 2px;
line-height: 16px;
vertical-align: middle;
background-color: transparent;
background-repeat: no-repeat;
background-attachment: scroll;
border: 0 none;
outline: none;
cursor: pointer;
}
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,
.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,
.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize {
background-image: none;
.codicon {
margin-top: 3px;
}
}
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop {
cursor: auto;
display: none;
}
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open {
transform: rotate(90deg);
}
.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close {
}
.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop {
background: none;
}
.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > ul {
background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y;
}
.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > .rc-tree-switcher-noop {
background-position: -56px -18px;
}
.rc-tree.rc-tree-show-line .rc-tree-treenode:last-child > .rc-tree-switcher-noop {
background-position: -56px -36px;
}
.rc-tree-child-tree {
display: none;
}
.rc-tree-child-tree-open {
display: block;
}
.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),
.rc-tree-treenode-disabled > a,
.rc-tree-treenode-disabled > a span {
color: #767676;
cursor: not-allowed;
}
.rc-tree-treenode-active {
background: rgba(0, 0, 0, 0.1);
}
.rc-tree-node-selected {
background-color: #ffe6b0;
border: 1px #ffb951 solid;
opacity: 0.8;
}
.rc-tree-icon__open {
margin-right: 2px;
vertical-align: top;
background-position: -110px -16px;
}
.rc-tree-icon__close {
margin-right: 2px;
vertical-align: top;
background-position: -110px 0;
}
.rc-tree-icon__docu {
margin-right: 2px;
vertical-align: top;
background-position: -110px -32px;
}
.rc-tree-icon__customize {
margin-right: 2px;
vertical-align: top;
}
.rc-tree-indent-unit {
width: 0;
display: inline-block;
padding-left: 7px;
}
}
57 changes: 36 additions & 21 deletions src/extensions/explore/explore.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import { useState } from 'react';
import Collapse, { Panel } from 'mo/components/collapse';
import { TreeView } from './tree';
import Toolbar from 'mo/components/toolbar';
import { IActionBarItem } from 'mo/components/actionbar';
import { prefixClaName } from 'mo/common/className';
// import { editorService } from 'mo';
import { classNames } from 'mo/common/className';
import './style.scss';
import { Header, Content } from 'mo/workbench/sidebar';
import { codIcon } from 'mo/common/className';
interface IExplorerProps {
isActive?: boolean;
}
Expand All @@ -17,10 +17,18 @@ export interface IPanelItem extends IActionBarItem {
interface IState {
activePanelKey: React.Key | React.Key[];
panelSet: IPanelItem[];
explorerToolbar: IActionBarItem[];
}

const initState = {
activePanelKey: '',
explorerToolbar: [
{
id: 'explorer-more',
title: 'View and More Actions...',
iconName: 'codicon-ellipsis',
}
],
panelSet: [
{
id: 'editors',
Expand Down Expand Up @@ -74,7 +82,7 @@ const initState = {
},
],
renderPanel: () => {
return <span>sample_folder</span>
return <TreeView />
}
},
{
Expand Down Expand Up @@ -113,25 +121,32 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
return 'cannot provide...'
}
}
const { panelSet, activePanelKey } = state;
const { panelSet, explorerToolbar, activePanelKey } = state;
return (
<div className={prefixClaName('explorer', 'sidebar')}>
<Collapse
accordion={true}
activeKey={activePanelKey}
onChange={(activeKey: React.Key | React.Key[]) => { onChangeCallback(activeKey) }}
expandIcon={({ isActive }: IExplorerProps) => <a className={classNames('codicon', isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}></a>}
>
{
panelSet.map((panel: IPanelItem) =><Panel
key={panel.id}
header={panel.name}
extra={activePanelKey === panel.id && <Toolbar key={Math.random()} data={panel.toolbar} onClick={onClick} />}
>
{render(panel.renderPanel)}
</Panel>)
}
</Collapse>
<Header
title={'Explorer'}
toolbar={<Toolbar data={explorerToolbar} onClick={onClick} />}
/>
<Content>
<Collapse
accordion={true}
activeKey={activePanelKey}
onChange={(activeKey: React.Key | React.Key[]) => { onChangeCallback(activeKey) }}
expandIcon={({ isActive }: IExplorerProps) =>
codIcon(isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}
>
{
panelSet.map((panel: IPanelItem) => <Panel
key={panel.id}
header={panel.name}
extra={activePanelKey === panel.id && <Toolbar key={panel.id} data={panel.toolbar} onClick={onClick} />}
>
{render(panel.renderPanel)}
</Panel>)
}
</Collapse>
</Content>
</div>
);
};
Loading

0 comments on commit b7d37a9

Please sign in to comment.