feat: optimize code

optimize code
DTStack · Nov 20, 2020 · aa772a4 · aa772a4
1 parent c017713
commit aa772a4
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 66 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -35,5 +35,6 @@ module.exports = {
         'valid-jsdoc': 0,
         'no-unused-vars': 0,
         'no-invalid-this': 0,
+        "react/display-name": 0
     },
 };
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "dependencies": {
         "@types/react": "^16.9.35",
         "@types/react-dom": "^16.9.9",
-        "core-js": "^3.6.5",
         "dt-utils": "^1.0.1",
         "loadsh": "^0.0.4",
         "monaco-editor": "^0.21.2",
@@ -40,7 +39,6 @@
         "vscode-codicons": "^0.0.10"
     },
     "devDependencies": {
-        "@babel/core": "^7.12.3",
         "@commitlint/cli": "^11.0.0",
         "@commitlint/config-conventional": "^11.0.0",
         "@storybook/addon-actions": "6.0.28",

diff --git a/src/common/className.tsx → src/common/className.ts b/src/common/className.tsx → src/common/className.ts
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { APP_PREFIX } from 'mo/common/const';
 /**
  * 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) {
 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>
-}
-
diff --git a/src/components/collapse/style.scss b/src/components/collapse/style.scss
@@ -1,38 +1,26 @@
-@import 'mo/style/const.scss';
-@mixin header_border {
-    border: 1px solid rgba(97, 97, 97, 0.19);
-}
-.#{$prefix}-collapse {
+@import 'mo/style/const';
+$collapse: 'collapse';
+
+#{prefix($collapse)} {
     font-size: 13px;
-    .rc-collapse {
-        background-color: inherit;
-    }
     .rc-collapse-anim-active {
         transition: height 0.2s ease-out;
     }
     .rc-collapse > .rc-collapse-item {
         border-top: none;
-        color: #bbbbbb;
+        color: inherit;
     }
     .rc-collapse > .rc-collapse-item > .rc-collapse-header {
         display: flex;
         align-items: center;
         padding: 1px 5px;
-        background: #333333;
         cursor: pointer;
         outline: none;
         height: 22px;
         font-weight: bold;
-        &:focus {
-            @include header_border;
-        }
-        &:active {
-            @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;

diff --git a/src/components/tree/style.scss b/src/components/tree/style.scss
@@ -1,14 +1,12 @@
 @import 'mo/style/const.scss';
+$tree: 'tree';
 
-.#{$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;
@@ -18,12 +16,8 @@
         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;
@@ -33,17 +27,8 @@
         -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;
@@ -92,8 +77,6 @@
         transform: rotate(90deg);
         margin-top: -2px;
     }
-    .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;
     }
@@ -109,9 +92,6 @@
         color: #767676;
         cursor: not-allowed;
     }
-    .rc-tree-treenode-active {
-        background: rgba(0, 0, 0, 0.1);
-    }
     .rc-tree-icon__open {
         margin-right: 2px;
         vertical-align: top;

diff --git a/src/extensions/explore/explore.tsx b/src/extensions/explore/explore.tsx
@@ -3,16 +3,18 @@ import { useState } from 'react';
 import Collapse, { Panel } from 'mo/components/collapse';
 import TreeView from './tree';
 import Toolbar from 'mo/components/toolbar';
+import { Icon } from 'mo/components/icon';
 import { IActionBarItem } from 'mo/components/actionbar';
-import { prefixClaName, codIcon } from 'mo/common/className';
+import { prefixClaName } from 'mo/common/className';
 import { Header, Content } from 'mo/workbench/sidebar';
 import { data } from './treeMock'
 interface IExplorerProps {
     isActive?: boolean;
 }
 
-export interface IPanelItem extends IActionBarItem {
+export interface IPanelItem<T=any> extends IActionBarItem {
     renderPanel?: () => React.ReactNode | JSX.Element;
+    toolbar?: T;
 }
 interface IState {
     activePanelKey: React.Key | React.Key[];
@@ -134,7 +136,7 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (
                     activeKey={activePanelKey}
                     onChange={(activeKey: React.Key | React.Key[]) => { onChangeCallback(activeKey) }}
                     expandIcon={({ isActive }: IExplorerProps) =>
-                        codIcon(isActive ? 'codicon-chevron-down' : 'codicon-chevron-right')}
+                        <Icon type={isActive ? 'chevron-down' : 'chevron-right'} />}
                 >
                     {
                         panelSet.map((panel: IPanelItem) => <Panel

diff --git a/src/extensions/explore/tree.tsx b/src/extensions/explore/tree.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { memo, useEffect, useState } from 'react';
 import Tree, { TreeNode } from 'mo/components/tree';
 import { IMenuItem } from 'mo/components/menu';
-import { prefixClaName, codIcon } from 'mo/common/className';
+import { Icon } from 'mo/components/icon';
+import { prefixClaName } from 'mo/common/className';
 import './style.scss';
 
 export interface ITreeNodeItem {
@@ -92,7 +93,7 @@ const TreeView: React.FunctionComponent<ITreeProps> = (
 
     const renderTreeNodes = data =>
         data?.map(item => {
-            return <TreeNode data={item} title={item.title} key={item.key} icon={codIcon(item.icon)}>
+            return <TreeNode data={item} title={item.title} key={item.key} icon={<Icon type={item.icon} />}>
                 {item.children && renderTreeNodes(item.children)}
             </TreeNode>
         });
@@ -105,7 +106,7 @@ const TreeView: React.FunctionComponent<ITreeProps> = (
                 prefixCls='rc-tree'
                 draggable
                 onDrop={onDrop}
-                switcherIcon={codIcon('codicon-chevron-right')}
+                switcherIcon={<Icon type='chevron-right' />}
                 onRightClick={({ event, node }) => {
                     console.log('onRightClick', event, node)
                 }}

diff --git a/src/extensions/explore/treeMock.ts b/src/extensions/explore/treeMock.ts
@@ -27,19 +27,19 @@ export const data = [
                     }
                 ],
                 children: [
-                    { title: 'test.txt', key: 'test.txt', type: 'file', icon: 'codicon-symbol-file' },
-                    { title: 'test.js', key: 'test.js', type: 'file', icon: 'codicon-file-binary' },
-                    { title: 'test.html', key: 'test.html', type: 'file', icon: 'codicon-file-code' },
+                    { title: 'test.txt', key: 'test.txt', type: 'file', icon: 'symbol-file' },
+                    { title: 'test.js', key: 'test.js', type: 'file', icon: 'file-binary' },
+                    { title: 'test.html', key: 'test.html', type: 'file', icon: 'file-code' },
                 ],
             },
             {
                 title: 'xyz',
                 key: 'xyz',
                 type: 'folder',
                 children: [
-                    { title: 'test.pdf', key: 'test.pdf', type: 'file', icon: 'codicon-file-pdf' },
-                    { title: 'test.media', key: 'test.media', type: 'file', icon: 'codicon-file-media' },
-                    { title: 'test.zip', key: 'test.zip', type: 'file', icon: 'codicon-file-zip' },
+                    { title: 'test.pdf', key: 'test.pdf', type: 'file', icon: 'file-pdf' },
+                    { title: 'test.media', key: 'test.media', type: 'file', icon: 'file-media' },
+                    { title: 'test.zip', key: 'test.zip', type: 'file', icon: 'file-zip' },
                 ],
             },
             {

diff --git a/src/style/theme.scss b/src/style/theme.scss
@@ -1,6 +1,8 @@
 @import 'mo/style/const';
 @import 'mo/components/actionbar/style';
 @import 'mo/components/menu/style';
+@import 'mo/components/collapse/style';
+@import 'mo/components/tree/style';
 
 // =============== Workbench =============== //
 .#{$prefix}-workbench {
@@ -67,7 +69,7 @@
 // =============== Action Bar =============== //
 
 #{prefix('action-bar')} {
-    background-color: inherit;
+    background-color: rgb(37, 37, 38);
     color: rgb(204, 204, 204);
 }
 
@@ -89,3 +91,48 @@
     box-shadow: #000 0 2px 4px;
     color: rgb(204, 204, 204);
 }
+
+// =============== Collapse =============== //
+@mixin borderColor($color) {
+     border: 1px solid $color;
+}
+#{prefix($collapse)} {
+    background-color: #252526;
+    .rc-collapse-header {
+        background: #333333;
+        &:focus, &:active {
+            @include borderColor(rgba(97, 97, 97, 0.19));
+        }
+        .rc-collapse-extra {
+            #{prefix('action-bar')} {
+                background: #333333;
+            }
+        }
+    }
+}
+
+// =============== Tree =============== //
+#{prefix($tree)} {
+    .rc-tree-treenode {
+        &:hover {
+            background-color: #333333;
+        }
+        .draggable {
+            color: #bbbbbb;
+        }
+    }
+    .rc-tree-treenode.drag-over > .draggable {
+        color: #bbbbbb;
+        background-color: #316ac5;
+        @include borderColor(#316ac5);
+    }
+    .rc-tree-treenode.drag-over-gap-top > .draggable {
+        border-top: 2px blue solid;
+    }
+    .rc-tree-treenode.drag-over-gap-bottom > .draggable {
+        border-bottom: 2px blue solid;
+    }
+    .rc-tree-treenode-active {
+        background: rgba(0, 0, 0, 0.1);
+    }
+}
diff --git a/stories/components/4-Tree.stories.tsx b/stories/components/4-Tree.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Tree, { TreeNode } from 'mo/components/tree';
-import { codIcon } from 'mo/common/className';
+import { Icon } from 'mo/components/icon';
 export default {
     title: 'Tree',
 };
@@ -14,12 +14,12 @@ export const Basic = () => (
          */
         // showLine
         showIcon
-        switcherIcon={codIcon('codicon-chevron-right')}
+        switcherIcon={<Icon type='chevron-right' />}
     >
         <TreeNode title='parent' key='parent'>
             <TreeNode title='child' key='child'>
                 <TreeNode title='child3' key='child3'>
-                    <TreeNode icon={({ selected }) => codIcon('codicon-symbol-file')} title='child5' key='child5'></TreeNode>
+                    <TreeNode icon={({ selected }) => <Icon type='symbol-file' />} title='child5' key='child5'></TreeNode>
                 </TreeNode>
                 <TreeNode title='child4' key='child4'></TreeNode>
             </TreeNode>