feat: support render icon in tab title (#447)

* feat: tab support to set icon

* test: add unit test for icon rendering

* fix: improve the layer of icon

Author: mortalYoung

src/components/tabs/__tests__/tab.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import {
     ITabEvent,
     ITabProps,
@@ -44,7 +45,18 @@ describe('The Tab Component', () => {
     test('Should render name in tab', () => {
         const { container } = render(<DTab />);
         const wrapper = container.querySelector(`.${tabItemClassName}`)!;
-        expect(wrapper.innerHTML).toBe('test');
+        expect(wrapper.innerHTML).toContain('test');
+    });
+
+    test('Should render icon in tab', () => {
+        const { container, getByTestId, rerender } = render(
+            <DTab icon="placeholder" />
+        );
+
+        expect(container.querySelector('.codicon-placeholder')).not.toBeNull();
+
+        rerender(<DTab icon={<i data-testid="icon" />} />);
+        expect(getByTestId('icon')).toBeInTheDocument();
     });
 
     test('Should active classNames when active tab', () => {

src/components/tabs/index.tsx

@@ -73,6 +73,7 @@ export function Tabs<T>(props: ITabsProps<T>) {
                                 active={activeTab === tab.id}
                                 index={index}
                                 name={tab.name}
+                                icon={tab.icon}
                                 data={tab.data}
                                 closable={tab.closable}
                                 onMoveTab={onChangeTab}

src/components/tabs/style.scss

@@ -42,6 +42,14 @@
         position: relative;
         user-select: none;
 
+        &__label {
+            font-size: 0;
+
+            &:not(&:empty) {
+                padding-right: 6px;
+            }
+        }
+
         &__op {
             color: var(--icon-foreground);
             margin-left: 10px;

src/components/tabs/tab.tsx

@@ -15,6 +15,7 @@ import {
     prefixClaName,
 } from 'mo/common/className';
 import TabExtra from './tabExtra';
+import { Icon } from '../icon';
 
 export interface ITabEvent {
     onMoveTab?: (dragIndex: number, hoverIndex: number) => void;
@@ -29,6 +30,7 @@ export interface ITabProps<T = any, P = any> extends ITabEvent {
     active?: boolean;
     closable?: boolean;
     editable?: boolean;
+    icon?: string | JSX.Element;
     index?: number;
     id?: string;
     name?: string;
@@ -42,6 +44,7 @@ export const tabItemActiveClassName = getBEMModifier(
     tabItemClassName,
     'active'
 );
+export const tabItemLabelClassName = getBEMElement(tabItemClassName, 'label');
 
 export function Tab<T>(props: ITabProps) {
     const {
@@ -52,6 +55,7 @@ export function Tab<T>(props: ITabProps) {
         data,
         id,
         index,
+        icon,
         onCloseTab,
         onMoveTab,
         onSelectTab,
@@ -118,6 +122,11 @@ export function Tab<T>(props: ITabProps) {
     });
 
     drag(drop(ref));
+
+    const renderIcon = (icon: string | JSX.Element) => {
+        return typeof icon === 'string' ? <Icon type={icon} /> : icon;
+    };
+
     return (
         <div
             ref={ref}
@@ -129,6 +138,11 @@ export function Tab<T>(props: ITabProps) {
             onMouseOut={handleMouseOut}
             onContextMenu={handleOnContextMenu}
         >
+            {icon && (
+                <span className={tabItemLabelClassName}>
+                    {renderIcon(icon)}
+                </span>
+            )}
             {name}
             {editable && (
                 <TabExtra

stories/extensions/test/testPane.tsx

@@ -168,6 +168,7 @@ export default class TestPane extends React.Component {
             const tabData: IEditorTab = {
                 id: `${key}`,
                 name: `editor${key}.ts`,
+                icon: Math.random() >= 0.5 ? 'selection' : undefined,
                 data: {
                     value: `${key}export interface Type<T> { new(...args: any[]): T;}
 export type GenericClassDecorator<T> = (target: T) => void;`,