Skip to content

Commit 2406e72

Browse files
zhangtengjinzhangtengjin
committed
feat: sync code
sync code
2 parents 00835b1 + 451cf8f commit 2406e72

File tree

14 files changed

+482
-352
lines changed

14 files changed

+482
-352
lines changed

‎src/components/tabs/index.tsx

+65-48
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,44 @@
11
import * as React from 'react';
22
import { useCallback } from 'react';
3-
import update from 'immutability-helper';
43
import { DndProvider } from 'react-dnd';
54
import HTML5Backend from 'react-dnd-html5-backend';
5+
import update from 'immutability-helper';
6+
7+
import {
8+
prefixClaName,
9+
getBEMElement,
10+
getBEMModifier,
11+
classNames,
12+
} from 'mo/common/className';
13+
14+
import { Tab, ITab, tabItemClassName } from './tab';
615

7-
import { Scrollable } from 'mo/components/scrollable';
8-
import { TabSwicher, Tab } from './Tab';
9-
import TabButton from './tabButton';
1016
import './style.scss';
1117

12-
export interface ITab {
13-
id?: number | string;
14-
name?: string;
15-
activeTab?: number;
16-
modified?: boolean;
17-
renderPane?: () => React.ReactNode;
18-
value?: string;
19-
mode?: string | undefined;
20-
}
18+
export type TabsType = 'line' | 'card';
2119
export interface ITabsProps {
20+
closable?: boolean;
2221
data: ITab[];
23-
closeTab?: (item: ITab) => void;
22+
activeTab?: string;
23+
type?: TabsType;
24+
onCloseTab?: (key?: string) => void;
2425
onMoveTab?: (tabs: ITab[]) => void;
25-
onSelectTab?: (index: number) => void;
26-
onTabChange: (index: number) => void;
26+
onSelectTab?: (key?: string) => void;
2727
}
2828

29-
const DraggleTabs = (props: ITabsProps) => {
30-
const { data, onSelectTab } = props;
29+
export const tabsClassName = prefixClaName('tabs');
30+
export const tabsHeader = getBEMElement(tabsClassName, 'header');
31+
export const tabsContent = getBEMElement(tabsClassName, 'content');
32+
export const tabsContentItem = getBEMElement(tabsContent, 'item');
33+
export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close');
34+
35+
const Tabs = (props: ITabsProps) => {
36+
const { activeTab, data, type = 'line', onMoveTab, ...resetProps } = props;
3137

32-
const onMoveTab = useCallback(
38+
const onChangeTab = useCallback(
3339
(dragIndex, hoverIndex) => {
3440
const dragTab = data[dragIndex];
35-
props.onMoveTab?.(
41+
onMoveTab?.(
3642
update(data, {
3743
$splice: [
3844
[dragIndex, 1],
@@ -44,37 +50,48 @@ const DraggleTabs = (props: ITabsProps) => {
4450
[data]
4551
);
4652

47-
const onTabClick = (key) => {
48-
console.log(`onTabClick ${key}`);
49-
onSelectTab?.(key);
50-
};
51-
52-
const onTabClose = (item: ITab) => {};
5353
return (
5454
<DndProvider backend={HTML5Backend}>
55-
<Scrollable className={'normal-items'}>
56-
<TabSwicher className="tab-switcher">
57-
{data?.map((item: ITab, index: number) => (
58-
<Tab
59-
onMoveTab={onMoveTab}
60-
onTabChange={onTabClick}
61-
index={index}
62-
id={item.id}
63-
>
64-
<TabButton
65-
key={item.id}
66-
name={item.name}
67-
modified={item.modified}
68-
active={item.activeTab === index}
69-
onClose={() => onTabClose(item)}
70-
className={'tab-button'}
71-
/>
72-
</Tab>
73-
))}
74-
</TabSwicher>
75-
</Scrollable>
55+
<div
56+
className={classNames(
57+
tabsClassName,
58+
getBEMModifier(tabsClassName, type as string)
59+
)}
60+
>
61+
<div className={tabsHeader}>
62+
{data?.map((tab: ITab, index: number) => {
63+
return (
64+
<Tab
65+
active={activeTab === tab.key}
66+
index={index}
67+
label={tab.label}
68+
modified={tab.modified}
69+
key={tab.key}
70+
propsKey={tab.key}
71+
title={tab.tip}
72+
onMoveTab={onChangeTab}
73+
{...resetProps}
74+
></Tab>
75+
);
76+
})}
77+
</div>
78+
<div className={tabsContent}>
79+
{data?.map((tab: ITab) => {
80+
return (
81+
<div
82+
className={classNames(tabsContentItem, {
83+
[getBEMModifier(tabsContentItem, 'active')]:
84+
activeTab === tab.key,
85+
})}
86+
>
87+
{tab.renderPanel}
88+
</div>
89+
);
90+
})}
91+
</div>
92+
</div>
7693
</DndProvider>
7794
);
7895
};
7996

80-
export default DraggleTabs;
97+
export default Tabs;

‎src/components/tabs/style.scss

+74-70
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,95 @@
11
@import 'mo/style/common';
22

3-
#{prefix($tabSwitcher)} {
4-
display: flex;
5-
flex-flow: row nowrap;
6-
height: 35px;
7-
}
8-
9-
.tab-button {
10-
align-items: center;
11-
cursor: pointer;
12-
display: inline-flex;
3+
#{$tabs} {
134
height: 100%;
14-
padding: 0 14px;
5+
height: 100%;
6+
overflow-x: auto;
7+
overflow-y: hidden;
158
position: relative;
169
user-select: none;
17-
width: 150px;
10+
width: 100%;
1811

19-
&__name {
20-
font-size: 16px;
21-
margin-left: 10px;
22-
}
23-
24-
&__op {
12+
&__header {
2513
align-items: center;
26-
display: inline-flex;
27-
line-height: 1;
28-
margin-left: 10px;
14+
display: flex;
15+
flex-flow: row nowrap;
16+
height: 36px;
17+
justify-content: flex-start;
18+
overflow: hidden;
19+
overflow-x: auto;
20+
overflow-y: hidden;
21+
width: 100%;
2922
}
3023

31-
&__dot {
32-
display: block;
33-
height: 18px;
34-
position: relative;
35-
width: 18px;
24+
&__content {
25+
font-size: 13px;
26+
height: calc(100% - 36px);
27+
width: 100%;
28+
29+
&__item {
30+
display: none;
3631

37-
&::after {
38-
border-radius: 50%;
39-
content: '';
40-
display: block;
41-
height: 9px;
42-
left: 5px;
43-
position: relative;
44-
top: 5px;
45-
width: 9px;
32+
&--active {
33+
display: block;
34+
}
4635
}
4736
}
37+
}
4838

49-
&__close {
39+
#{$tab} {
40+
&__item {
41+
align-items: center;
42+
box-sizing: border-box;
5043
cursor: pointer;
51-
display: block;
52-
font-weight: 500;
53-
height: 18px;
54-
width: 18px;
55-
}
56-
57-
&__svg {
44+
display: flex;
45+
font-size: 13px;
5846
height: 100%;
59-
width: 100%;
60-
}
47+
max-width: 300px;
48+
min-width: 40px;
49+
padding: 0 20px;
50+
position: relative;
51+
user-select: none;
6152

62-
&__placeholder {
63-
display: block;
64-
height: 18px;
65-
width: 18px;
66-
}
53+
&__name {
54+
font-size: 16px;
55+
margin-left: 10px;
56+
}
6757

68-
.tab-button--active::after {
69-
bottom: 0;
70-
content: '';
71-
height: 1px;
72-
left: 0;
73-
position: absolute;
74-
width: 100%;
75-
}
76-
}
58+
&__op {
59+
margin-left: 10px;
60+
width: 20px;
7761

78-
.tab-item {
79-
display: none;
80-
height: 100%;
62+
&__dot {
63+
display: block;
64+
height: 18px;
65+
position: relative;
66+
width: 18px;
8167

82-
.tab-item--active {
83-
display: block;
84-
}
85-
}
68+
&::after {
69+
border-radius: 50%;
70+
content: '';
71+
display: block;
72+
height: 9px;
73+
left: 5px;
74+
position: relative;
75+
top: 5px;
76+
width: 9px;
77+
}
78+
}
8679

87-
.normal-items {
88-
margin-bottom: auto;
89-
overflow: hidden;
90-
overflow-y: auto;
80+
&__close {
81+
cursor: pointer;
82+
display: block;
83+
font-weight: 500;
84+
height: 18px;
85+
width: 18px;
86+
}
87+
88+
&__placeholder {
89+
display: block;
90+
height: 18px;
91+
width: 18px;
92+
}
93+
}
94+
}
9195
}

0 commit comments

Comments
 (0)