From 52c089ff92c707800d2debb11e0220e22c4c3fe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E6=9D=AA?= <mumiao@dtstack.com>
Date: Fri, 27 Nov 2020 17:57:51 +0800
Subject: [PATCH] feat: remove fileIcon component and debugger webpack plugin

---
 build/webpack.base.js                 | 16 ++++-------
 package.json                          |  6 ++---
 src/components/fileIcon/index.tsx     | 31 ----------------------
 src/components/fileIcon/style.scss    | 11 --------
 src/components/tabs/index.tsx         |  2 +-
 src/components/tabs/style.scss        |  7 ++++-
 src/components/tabs/tabButton.tsx     |  8 +++---
 stories/components/3-Tabs.stories.tsx | 12 ++++++---
 yarn.lock                             | 38 +--------------------------
 9 files changed, 27 insertions(+), 104 deletions(-)
 delete mode 100644 src/components/fileIcon/index.tsx
 delete mode 100644 src/components/fileIcon/style.scss

diff --git a/build/webpack.base.js b/build/webpack.base.js
index 5f0819cf0..93a49014f 100644
--- a/build/webpack.base.js
+++ b/build/webpack.base.js
@@ -1,7 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
     mode: 'development',
@@ -20,10 +19,12 @@ module.exports = {
         path: path.resolve(__dirname, '../dist'),
     },
     module: {
-        rules: [{
+        rules: [
+            {
                 test: /\.(js|jsx|tsx|ts)$/,
                 exclude: /node_modules/,
-                use: [{
+                use: [
+                    {
                         loader: require.resolve('ts-loader'),
                         options: {
                             transpileOnly: true,
@@ -49,12 +50,5 @@ module.exports = {
         new webpack.DefinePlugin({
             __DEVELOPMENT__: true,
         }),
-        new CopyWebpackPlugin({
-            patterns: [{
-                context: path.resolve(__dirname, '../'),
-                from: './src/static',
-                to: './static'
-            }]
-        })
     ],
-};
\ No newline at end of file
+};
diff --git a/package.json b/package.json
index b26a7f341..0dbe0f69c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "dependencies": {
         "@types/react": "^16.9.35",
         "@types/react-dom": "^16.9.9",
-        "copy-webpack-plugin": "^6.3.2",
         "dt-utils": "^1.0.1",
         "immutability-helper": "^3.1.1",
         "loadsh": "^0.0.4",
@@ -41,8 +40,7 @@
         "react-split-pane": "^0.1.92",
         "reflect-metadata": "^0.1.13",
         "tsyringe": "^4.3.0",
-        "vscode-codicons": "^0.0.10",
-        "vscode-icons-js": "^11.0.0"
+        "vscode-codicons": "^0.0.10"
     },
     "devDependencies": {
         "@commitlint/cli": "^11.0.0",
@@ -90,4 +88,4 @@
             "path": "cz-conventional-changelog"
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/fileIcon/index.tsx b/src/components/fileIcon/index.tsx
deleted file mode 100644
index 4a4aa71da..000000000
--- a/src/components/fileIcon/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import './style.scss';
-import * as React from 'react';
-import {
-    getIconForFile,
-    getIconForFolder,
-    getIconForOpenFolder,
-} from 'vscode-icons-js';
-import { prefixClaName, classNames } from 'mo/common/className';
-
-const ICON_BASE_PATH = '/static/fileIcons/';
-
-export interface Props {
-    fileName: string;
-    type?: 'folder' | 'folderOpen' | 'file';
-    className?: string;
-}
-
-export default function FileIcon({ fileName, type, className }: Props) {
-    const iconPath: string | undefined =
-        type === 'file'
-            ? getIconForFile(fileName)
-            : type === 'folder'
-            ? getIconForFolder(fileName)
-            : getIconForOpenFolder(fileName);
-    return (
-        <i
-            className={classNames(prefixClaName('file-icon'), className)}
-            style={{ backgroundImage: `url(${ICON_BASE_PATH + iconPath})` }}
-        />
-    );
-}
diff --git a/src/components/fileIcon/style.scss b/src/components/fileIcon/style.scss
deleted file mode 100644
index d2ed2a826..000000000
--- a/src/components/fileIcon/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'mo/style/common';
-$fileIcon: 'file-icon';
-
-#{prefix($fileIcon)} {
-    background-position: center center;
-    background-size: contain;
-    display: inline-block;
-    height: 16px;
-    vertical-align: middle;
-    width: 16px;
-}
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
index 11ea40724..ce4bdc1c6 100644
--- a/src/components/tabs/index.tsx
+++ b/src/components/tabs/index.tsx
@@ -51,7 +51,7 @@ const DraggleTabs = (props: ITabsProps) => {
     const onTabClose = (item: ITab) => {};
     return (
         <DndProvider backend={HTML5Backend}>
-            <Scrollable>
+            <Scrollable className={'normal-items'}>
                 <TabSwicher className="tab-switcher">
                     {data?.map((item: ITab, index: number) => (
                         <Tab
diff --git a/src/components/tabs/style.scss b/src/components/tabs/style.scss
index a0ffd82f3..793da71f7 100644
--- a/src/components/tabs/style.scss
+++ b/src/components/tabs/style.scss
@@ -5,7 +5,6 @@ $tabSwitcher: 'tab-switcher';
     display: flex;
     flex-flow: row nowrap;
     height: 35px;
-    width: 100%;
 }
 
 .tab-button {
@@ -88,3 +87,9 @@ $tabSwitcher: 'tab-switcher';
         display: block;
     }
 }
+
+.normal-items {
+    margin-bottom: auto;
+    overflow: hidden;
+    overflow-y: auto;
+}
\ No newline at end of file
diff --git a/src/components/tabs/tabButton.tsx b/src/components/tabs/tabButton.tsx
index 962070738..88f80c651 100644
--- a/src/components/tabs/tabButton.tsx
+++ b/src/components/tabs/tabButton.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useState } from 'react';
-import FileIcon from '../fileIcon';
 import { classNames } from 'mo/common/className';
 import TabDot from './tabDot';
+import { Icon } from '../icon';
 
 export interface TabButtonProps {
     name?: string;
@@ -44,16 +44,14 @@ export default function TabButton({
         <div
             className={classNames(
                 'tab-button',
-                {
-                    'tab-button--active': active,
-                },
+                active ? 'tab-button--active' : '',
                 className
             )}
             onClick={handleClick}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
         >
-            <FileIcon type="file" fileName={name} />
+            <Icon type="new-file" />
             <span className="tab-button__name">{name}</span>
             <TabDot
                 modified={modified}
diff --git a/stories/components/3-Tabs.stories.tsx b/stories/components/3-Tabs.stories.tsx
index 9fd8f1d13..f1ca61af4 100644
--- a/stories/components/3-Tabs.stories.tsx
+++ b/stories/components/3-Tabs.stories.tsx
@@ -25,8 +25,14 @@ stories.add('Basic Usage', () => {
         {
             modified: false,
             id: 3,
-            name: 'editor.tsx',
-            value: 'hello tsx',
+            name: 'editor.python',
+            value: 'hello python',
+        },
+        {
+            modified: true,
+            id: 1,
+            name: 'editor.md',
+            value: 'hello markdown',
         },
     ];
     const [tabs, setTabs] = useState(data);
@@ -36,7 +42,7 @@ stories.add('Basic Usage', () => {
             <p>Tab 提供组件多tab切换；拖拽</p>
             <div>
                 <h3>使用示例 1 - 基本使用</h3>
-                <div style={{ height: 200 }}>
+                <div style={{ height: 35 }}>
                     <Tabs
                         data={tabs}
                         onMoveTab={onMoveTab}
diff --git a/yarn.lock b/yarn.lock
index 0c3af2f30..2e4ea7731 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2386,11 +2386,6 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jasmine@^3.3.8":
-  version "3.6.2"
-  resolved "https://registry.npm.taobao.org/@types/jasmine/download/@types/jasmine-3.6.2.tgz#02f64450016f7de70f145d698be311136d7c6374"
-  integrity sha1-AvZEUAFvfecPFF1pi+MRE218Y3Q=
-
 "@types/jest@26.x", "@types/jest@^26.0.0":
   version "26.0.15"
   resolved "http://registry.npm.dtstack.com/@types%2fjest/-/jest-26.0.15.tgz#12e02c0372ad0548e07b9f4e19132b834cb1effe"
@@ -4808,23 +4803,6 @@ copy-to-clipboard@^3.0.8:
   dependencies:
     toggle-selection "^1.0.6"
 
-copy-webpack-plugin@^6.3.2:
-  version "6.3.2"
-  resolved "https://registry.npm.taobao.org/copy-webpack-plugin/download/copy-webpack-plugin-6.3.2.tgz?cache=0&sync_timestamp=1605800705546&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcopy-webpack-plugin%2Fdownload%2Fcopy-webpack-plugin-6.3.2.tgz#0e920a6c181a5052aa6e2861b164bda03f83afeb"
-  integrity sha1-DpIKbBgaUFKqbihhsWS9oD+Dr+s=
-  dependencies:
-    cacache "^15.0.5"
-    fast-glob "^3.2.4"
-    find-cache-dir "^3.3.1"
-    glob-parent "^5.1.1"
-    globby "^11.0.1"
-    loader-utils "^2.0.0"
-    normalize-path "^3.0.0"
-    p-limit "^3.0.2"
-    schema-utils "^3.0.0"
-    serialize-javascript "^5.0.1"
-    webpack-sources "^1.4.3"
-
 core-js-compat@^3.7.0:
   version "3.7.0"
   resolved "http://registry.npm.dtstack.com/core-js-compat/-/core-js-compat-3.7.0.tgz#8479c5d3d672d83f1f5ab94cf353e57113e065ed"
@@ -6900,7 +6878,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@^5.1.1, glob-parent@~5.1.0:
+glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
   version "5.1.1"
   resolved "http://registry.npm.dtstack.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
   integrity sha1-tsHvQXxOVmPqSY8cRa+saRa7wik=
@@ -11987,13 +11965,6 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npm.taobao.org/serialize-javascript/download/serialize-javascript-5.0.1.tgz?cache=0&sync_timestamp=1599740668657&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fserialize-javascript%2Fdownload%2Fserialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
-  integrity sha1-eIbshIBJpGJGepfT2Rjrsqr5NPQ=
-  dependencies:
-    randombytes "^2.1.0"
-
 serve-favicon@^2.5.0:
   version "2.5.0"
   resolved "http://registry.npm.dtstack.com/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
@@ -13703,13 +13674,6 @@ vscode-codicons@^0.0.10:
   resolved "http://registry.npm.dtstack.com/vscode-codicons/-/vscode-codicons-0.0.10.tgz#51d1d34d852fc7696fd732b6eaad49f5b57b4e79"
   integrity sha1-UdHTTYUvx2lv1zK26q1J9bV7Tnk=
 
-vscode-icons-js@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.npm.taobao.org/vscode-icons-js/download/vscode-icons-js-11.0.0.tgz#7986d9eb8e5f39b1125de8a142e68526e72ecff8"
-  integrity sha1-eYbZ645fObESXeihQuaFJucuz/g=
-  dependencies:
-    "@types/jasmine" "^3.3.8"
-
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "http://registry.npm.dtstack.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"