Skip to content

Commit

Permalink
Refactor editorService editorTab interface / optimize Tab component (D…
Browse files Browse the repository at this point in the history 
…TStack#58)

* refactor: migrate theme to editorTab closed#49

* feat: update editorGroupTabs themeCololr

* feat: tab component support customClassName

* fix: open the currentTab by default when openTabAction trigger and fix openTab repeat

* refactor: rafactor editorGroup triggerEvent logic and expose eventHandler of outline extension

* refactor: refactor editorService closeTab interface

* feat: remove unless subscribeHandler
  • Loading branch information
@mumiao
mumiao authored Feb 26, 2021
1 parent 3d9efa5 commit 07ef6e1
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 44 deletions.
6 changes: 4 additions & 2 deletions src/components/tabs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import DragAndDrop from './dragAndDrop';

export type TabsType = 'line' | 'card';
export interface ITabs<T> extends React.ComponentProps<any> {
className?: string;
closable?: boolean;
data?: ITab<T>[];
activeTab?: string;
Expand All @@ -33,13 +34,13 @@ export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close');
export function Tabs<T>(props: ITabs<T>) {
const {
activeTab,
className,
data = [],
type = 'line',
style,
onMoveTab,
...resetProps
} = props;

const onChangeTab = useCallback(
(dragIndex, hoverIndex) => {
const dragTab = data[dragIndex];
Expand All @@ -61,7 +62,8 @@ export function Tabs<T>(props: ITabs<T>) {
style={style}
className={classNames(
tabsClassName,
getBEMModifier(tabsClassName, type as string)
getBEMModifier(tabsClassName, type as string),
className
)}
>
<div className={tabsHeader}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/tabs/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
align-items: center;
display: flex;
flex-flow: row nowrap;
height: 36px;
height: 35px;
justify-content: flex-start;
overflow: hidden;
overflow-x: inherit;
Expand Down
4 changes: 2 additions & 2 deletions src/components/tabs/tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ import {
prefixClaName,
} from 'mo/common/className';
import TabDot from './tabDot';
export interface ITab<T> {
export interface ITab<T, P = any> {
active?: boolean;
closable?: boolean;
index?: number;
id?: string;
name?: string;
label?: React.ReactNode;
tip?: string | React.ReactNode;
renderPanel?: ReactNode;
renderPanel?: ((item: P) => ReactNode) | ReactNode;
data?: T;
}

Expand Down
9 changes: 8 additions & 1 deletion src/extensions/theme-defaults/themes/dark_defaults.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"editorIndentGuide.background": "#404040",
"editorIndentGuide.activeBackground": "#707070",
"editor.selectionHighlightBackground": "#ADD6FF26",
"editorGroupHeader.tabsBackground": "rgb(37, 37, 38)",
"list.dropBackground": "#383B3D",
"activityBarBadge.background": "#007ACC",
"sidebarTitle.foreground": "#BBBBBB",
Expand All @@ -19,7 +20,13 @@
"statusBarItem.remoteForeground": "#FFF",
"statusBarItem.remoteBackground": "#16825D",
"sidebarSectionHeader.background": "#0000",
"sidebarSectionHeader.border": "#ccc3"
"sidebarSectionHeader.border": "#ccc3",
"tabHeader.border": "#333",
"tabItem.background": "rgb(45, 45, 45)",
"tabItem.foreground": "rgba(255, 255, 255, 0.5)",
"tabItem.border": "rgb(37, 37, 38)",
"tabItem.activeBackground": "rgb(30, 30, 30)",
"tabItem.activeForeground": "rgb(255, 255, 255)"
},
"semanticHighlighting": true
}
8 changes: 7 additions & 1 deletion src/extensions/theme-defaults/themes/light_defaults.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,13 @@
"statusBarItem.remoteForeground": "#FFF",
"statusBarItem.remoteBackground": "#16825D",
"sidebarSectionHeader.background": "#0000",
"sidebarSectionHeader.border": "#61616130"
"sidebarSectionHeader.border": "#61616130",
"tabHeader.border": "#333",
"tabItem.background": "rgb(236, 236, 236)",
"tabItem.foreground": "rgba(51, 51, 51, 0.7)",
"tabItem.border": "rgb(243, 243, 243)",
"tabItem.activeBackground": "rgb(255, 255, 255)",
"tabItem.activeForeground": "rgb(51, 51, 51)"
},
"semanticHighlighting": true
}
55 changes: 42 additions & 13 deletions src/services/workbench/editorService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,29 +73,44 @@ export class EditorService
if (index > -1) {
const nextGroup = nextGroups[index];
const tabIndex = nextGroup.data!.findIndex(searchById(tabId));
const activeTab = tabId === nextGroup.activeTab;
if (nextGroup.data!.length === 1 && tabIndex === 0) {
nextGroups.splice(index, 1);
} else if (tabIndex > -1) {
this.setState({
groups: nextGroups,
});
return;
}
if (tabIndex === -1) return;
if (activeTab) {
const nextTab =
nextGroup.data![tabIndex + 1] ||
nextGroup.data![tabIndex - 1];
this.setActive(groupId, nextTab.id!);
nextGroup?.editorInstance.setValue(nextTab.data.value);
nextGroup.data!.splice(tabIndex, 1);
return;
}
nextGroup.data!.splice(tabIndex, 1);
this.setState({
groups: nextGroups,
});
}
}

public getGroupById(id: number): IEditorGroup | undefined {
return this.state.groups!.find((group) => group.id === id);
const { groups } = this.state;
return groups!.find((group) => group.id === id);
}

public getGroupIndexById(id: number): number {
return this.state.groups!.findIndex((group) => group.id === id);
const { groups } = this.state;
return groups!.findIndex((group) => group.id === id);
}

public setActive(groupId: number, tabId: string) {
const { groups = [] } = this.state;
const groupIndex = groups.findIndex((group) => group.id === groupId);

const groupIndex = this.getGroupIndexById(groupId);
if (groupIndex > -1) {
const nextGroups = [...groups];
const group = nextGroups[groupIndex];
Expand All @@ -115,27 +130,41 @@ export class EditorService

public updateGroup(groupId: number, groupValues: IEditorGroup) {
const { groups = [] } = this.state;
const index = this.getGroupIndexById(groupId);
if (index > -1) {
const group = Object.assign({}, groups[index], groupValues);
groups[index] = group;
const groupIndex = this.getGroupIndexById(groupId);
if (groupIndex > -1) {
const group = Object.assign({}, groups[groupIndex], groupValues);
groups[groupIndex] = group;
this.render();
}
}

public open<T>(tab: IEditorTab<T>, groupId?: number) {
public open<T>(tab: IEditorTab<any>, groupId: number) {
const { current, groups = [] } = this.state;
let group: IEditorGroup | null | undefined = current;
if (groupId) {
group = this.getGroupById(groupId);
}
if (group) {
group.data!.push(tab);
group.current = tab;
const {
id: tabId,
data: { value },
} = tab;
const isExist = group?.data!.find(
(tab: IEditorTab) => tab.id === tabId
);
const groupIndex = this.getGroupIndexById(group.id!);
if (isExist && tabId === group?.activeTab) return;
const currentGroup = groups[groupIndex];
if (!isExist) group.data!.push(tab);
group.tab = tab;
group.activeTab = tabId;
groups[groupIndex] = { ...currentGroup, tab };
currentGroup?.editorInstance.setValue(value!);
} else {
group = new EditorGroupModel(groups.length + 1, tab, [tab]);
groups.push(group);
}

this.setState({
current: group,
groups: [...groups],
Expand All @@ -144,7 +173,7 @@ export class EditorService

public closeAll(groupId: number) {
const { current, groups = [] } = this.state;
const groupIndex = groups.findIndex((group) => group.id === groupId);
const groupIndex = this.getGroupIndexById(groupId);
if (groupIndex > -1) {
const nextGroups = [...groups];
let nextCurrentGroup = current;
Expand Down
40 changes: 26 additions & 14 deletions src/style/theme/tabs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,38 @@
@import 'mo/style/common';

// =============== Editor Tabs =============== //
#{prefix($tabSwitcher)} {
#{$tabs} {
background-color: var(--editorGroupHeader-tabsBackground);

.tab-button {
color: var(--foreground);
&__content {
color: var(--tabItem-foreground);
}

&--line {
border-bottom: 1px solid var(--tabHeader-border);
}

#{$tab} {
&__item {
background: var(--tabItem-background);
border-right: 1px solid var(--tabItem-border);
color: var(--tabItem-foreground);

&__dot {
&::after {
background-color: var(--tab-activeBackground);
color: var(--tab-activeForeground);
&__op {
&__dot::after {
background: var(--tabItem-activeForeground);
}
}
}

&:hover {
background-color: var(--tab-activeBackground);
color: var(--tab-activeForeground);
}
&--active {
background: var(--tabItem-activeBackground);
border-bottom-color: var(--tabItem-activeForeground);
color: var(--tabItem-activeForeground);
}

&__close {
fill: var(--tab-activeBackground);
&--close {
color: var(--tabItem-activeForeground);
}
}
}
}
20 changes: 10 additions & 10 deletions stories/components/3-Tabs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,34 @@ stories.addDecorator(withKnobs);
stories.add('Basic Usage', () => {
const userSetting = [
{
key: '1',
id: '1',
label: 'User',
renderPanel: 'this is user',
},
{
key: '2',
id: '2',
label: 'workSpace',
renderPanel: 'this is a workSpace',
},
];
const tabArr = [
{
key: '1',
id: '1',
label: 'Tab1',
renderPanel: 'this is tab1',
},
{
key: '2',
id: '2',
label: 'Tab2',
renderPanel: 'this is a tab2',
},
{
key: '3',
id: '3',
label: 'Tab3',
renderPanel: 'this is a tab3',
},
{
key: '4',
id: '4',
label: 'Tab4',
renderPanel: 'this is a tab4',
},
Expand Down Expand Up @@ -64,16 +64,16 @@ stories.add('Basic Usage', () => {
let newActiveKey = activeTab;
let lastIndex;
tabs1.forEach((pane, i) => {
if (pane.key === targetKey) {
if (pane.id === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = tabs1.filter((pane) => pane.key !== targetKey);
const newPanes = tabs1.filter((pane) => pane.id !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
if (lastIndex >= 0) {
newActiveKey = newPanes[lastIndex].key;
newActiveKey = newPanes[lastIndex].id;
} else {
newActiveKey = newPanes[0]?.key;
newActiveKey = newPanes[0]?.id;
}
}
setTabs1(newPanes);
Expand Down

0 comments on commit 07ef6e1

Please sign in to comment.