From 35976653f588aee432e410af30c1a0bbb6c0b1e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=A8=E6=9D=AA?= Date: Mon, 21 Dec 2020 14:26:21 +0800 Subject: [PATCH] feat: resolve #37 --- src/components/tabs/index.tsx | 19 ++++++++---------- src/components/tabs/tab.tsx | 29 ++++++++++++++------------- src/extensions/search/searchPane.tsx | 9 ++++++--- src/workbench/editor/editor.tsx | 16 ++++++++++----- stories/components/3-Tabs.stories.tsx | 2 +- 5 files changed, 41 insertions(+), 34 deletions(-) diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx index 0d15dcba8..428bb1fee 100644 --- a/src/components/tabs/index.tsx +++ b/src/components/tabs/index.tsx @@ -16,13 +16,13 @@ import { Tab, ITab, tabItemClassName } from './tab'; import './style.scss'; export type TabsType = 'line' | 'card'; -export interface ITabsProps { +export interface ITabsProps{ closable?: boolean; - data: ITab[]; + data: (ITab)[]; activeTab?: string; type?: TabsType; onCloseTab?: (key?: string) => void; - onMoveTab?: (tabs: ITab[]) => void; + onMoveTab?: (tabs: (ITab)[]) => void; onSelectTab?: (key?: string) => void; } @@ -32,7 +32,7 @@ export const tabsContent = getBEMElement(tabsClassName, 'content'); export const tabsContentItem = getBEMElement(tabsContent, 'item'); export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close'); -const Tabs = (props: ITabsProps) => { +export function Tabs(props: ITabsProps) { const { activeTab, data, type = 'line', onMoveTab, ...resetProps } = props; const onChangeTab = useCallback( @@ -59,16 +59,15 @@ const Tabs = (props: ITabsProps) => { )} >
- {data?.map((tab: ITab, index: number) => { + {data?.map((tab: (ITab), index: number) => { return ( @@ -76,7 +75,7 @@ const Tabs = (props: ITabsProps) => { })}
- {data?.map((tab: ITab) => { + {data?.map((tab: ITab) => { return (
{
); -}; - -export default Tabs; +}; \ No newline at end of file diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx index 8e60e3fdd..f5051288a 100644 --- a/src/components/tabs/tab.tsx +++ b/src/components/tabs/tab.tsx @@ -15,25 +15,28 @@ import { prefixClaName, } from 'mo/common/className'; import TabDot from './tabDot'; - -export interface TabData { - modified?: boolean; - language?: string | undefined; - path?: string; - value?: string; -} -export interface ITab extends TabData { +export interface ITab { + active?: boolean; + closable?: boolean; + index?: number; key?: string; + propsKey?: string; name?: string; label?: React.ReactNode; tip?: string | React.ReactNode; renderPanel?: React.ReactNode; + data?: T } +export interface ITabEvent { + onMoveTab?: (dragIndex: number, hoverIndex: number) => void; + onCloseTab?: (key?: string) => void; + onSelectTab?: (key?: string) => void; +} export const tabClassName = prefixClaName('tab'); export const tabItemClassName = getBEMElement(tabClassName, 'item'); -export const Tab = (props) => { +export function Tab (props: ITab & ITabEvent) { const { closable, index, @@ -67,7 +70,7 @@ export const Tab = (props) => { if (!ref.current) return; const component = ref.current; const dragIndex = monitor.getItem().index; - let hoverIndex = index; + let hoverIndex = index!; // Don't replace items with themselves if (dragIndex === hoverIndex) { return; @@ -89,7 +92,7 @@ export const Tab = (props) => { if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) { return; } - onMoveTab(dragIndex, hoverIndex); + onMoveTab?.(dragIndex, hoverIndex); monitor.getItem().index = hoverIndex; }, }); @@ -101,7 +104,7 @@ export const Tab = (props) => { className={classNames(tabItemClassName, { [getBEMModifier(tabItemClassName, 'active')]: active, })} - onClick={(event: React.MouseEvent) => onSelectTab(propsKey)} + onClick={(event: React.MouseEvent) => onSelectTab?.(propsKey)} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} > @@ -118,5 +121,3 @@ export const Tab = (props) => {
); }; - -export default Tab; diff --git a/src/extensions/search/searchPane.tsx b/src/extensions/search/searchPane.tsx index cf108a2d6..0d9c17d5a 100644 --- a/src/extensions/search/searchPane.tsx +++ b/src/extensions/search/searchPane.tsx @@ -84,9 +84,12 @@ export default class SearchPane extends React.Component< const tabData = { key: `${key}`, name: `editor.js`, - modified: false, - value: `hello javascript ${key}`, - path: 'desktop/molecule/editor1', + data: { + modified: false, + value: `hello javascript ${key}`, + path: 'desktop/molecule/editor1', + language: 'javascript', + } }; console.log('open editor:', tabData); editorService.open(tabData, 1); diff --git a/src/workbench/editor/editor.tsx b/src/workbench/editor/editor.tsx index 6e1422f7a..479f63418 100644 --- a/src/workbench/editor/editor.tsx +++ b/src/workbench/editor/editor.tsx @@ -4,12 +4,19 @@ import SplitPane from 'react-split-pane'; import { getBEMElement, prefixClaName } from 'mo/common/className'; import MonacoEditor from 'mo/components/monaco-editor'; -import Tabs from 'mo/components/tabs'; +import { Tabs } from 'mo/components/tabs'; import { tabItemClassName } from 'mo/components/tabs/tab'; import { Icon } from 'mo/components/icon'; import Welcome from './welcome'; import { IEditor, IEditorGroup } from 'mo/model'; +interface dataType { + modified?: boolean; + language?: string | undefined; + path?: string; + value?: string; +} + const defaultEditorClassName = prefixClaName('editor'); const groupClassName = getBEMElement(defaultEditorClassName, 'group'); @@ -22,8 +29,6 @@ function renderEditorGroup( const editor = group.activeTab; const tabs = group.tabs?.map((item, index) => { return Object.assign({}, item, { - key: item.key, - tip: item.path, label: [ , @@ -33,8 +38,8 @@ function renderEditorGroup( renderPanel: ( { @@ -48,6 +53,7 @@ function renderEditorGroup( return (
closable={true} type="card" data={tabs} diff --git a/stories/components/3-Tabs.stories.tsx b/stories/components/3-Tabs.stories.tsx index 5c1364ccd..25b0e0636 100644 --- a/stories/components/3-Tabs.stories.tsx +++ b/stories/components/3-Tabs.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useState } from 'react'; -import Tabs from 'mo/components/tabs'; +import { Tabs } from 'mo/components/tabs'; import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; const stories = storiesOf('Tab', module);