Skip to content

Commit

Permalink
feat: resolve closeTab backfill
Browse files Browse the repository at this point in the history
  • Loading branch information
@mumiao
mumiao committed Dec 17, 2020
1 parent bbc1973 commit 32acfd5
Show file tree
Hide file tree
Showing 10 changed files with 259 additions and 263 deletions.
51 changes: 42 additions & 9 deletions src/components/tabs/Tab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { useRef } from 'react';
import { useRef, useState } from 'react';
import { findDOMNode } from 'react-dom';
import {
DragSourceMonitor,
Expand All @@ -8,16 +8,35 @@ import {
useDrop,
} from 'react-dnd';

import { classNames, getBEMElement, getBEMModifier, prefixClaName } from 'mo/common/className';
import {
classNames,
getBEMElement,
getBEMModifier,
prefixClaName,
} from 'mo/common/className';
import TabDot from './tabDot';

export const tabClassName = prefixClaName('tab')
export const tabItemClassName = getBEMElement(tabClassName, 'item')
export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close')
export const tabClassName = prefixClaName('tab');
export const tabItemClassName = getBEMElement(tabClassName, 'item');

export const Tab = (props) => {
const { index, propsKey, activeTab, children, onMoveTab, onTabChange } = props;
const {
closable,
index,
modified,
propsKey,
active,
label,
onTabClose,
onMoveTab,
onTabChange
} = props;
const ref = useRef<HTMLDivElement>(null);

const [hover, setHover] = useState(false);
const handleMouseOver = () => setHover(true);
const handleMouseOut = () => setHover(false);

const [, drag] = useDrag({
collect: (monitor: DragSourceMonitor) => ({
isDragging: monitor.isDragging(),
Expand Down Expand Up @@ -65,10 +84,24 @@ export const Tab = (props) => {
return (
<div
ref={ref}
className={classNames(tabItemClassName, { [getBEMModifier(tabItemClassName, 'active')]: activeTab === propsKey })}
onClick={(event: React.MouseEvent) => onTabChange(propsKey)}
className={classNames(tabItemClassName, {
[getBEMModifier(tabItemClassName, 'active')]:
active,
})}
onClick={(event: React.MouseEvent) => onTabChange(event, propsKey)}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>
{children}
{label}
{closable && (
<TabDot
classNames={getBEMElement(tabItemClassName, 'op')}
modified={modified}
active={active}
buttonHover={hover}
onClick={(e) => onTabClose?.(propsKey)}
/>
)}
</div>
);
};
Expand Down
90 changes: 44 additions & 46 deletions src/components/tabs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';

import { prefixClaName, getBEMElement, getBEMModifier, classNames } from 'mo/common/className';
import { Icon } from 'mo/components/icon';
import {
prefixClaName,
getBEMElement,
getBEMModifier,
classNames,
} from 'mo/common/className';

import { Tab, tabItemClassName } from './Tab';
import TabButton from './tabButton';

import './style.scss';
export interface ITab {
Expand All @@ -27,19 +30,27 @@ export interface ITabsProps {
data: ITab[];
activeTab?: string;
type?: 'line' | 'editable-card';
onCloseTab?: (key?: string) => void ;
onCloseTab?: (key?: string) => void;
onMoveTab?: (tabs: ITab[]) => void;
onSelectTab?: (key?: string) => void;
}

export const tabsClassName = prefixClaName('tabs')
export const tabsHeader = getBEMElement(tabsClassName, 'header')
export const tabsContent = getBEMElement(tabsClassName, 'content')
export const tabsContentItem = getBEMElement(tabsContent, 'item')
export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close')
export const tabsClassName = prefixClaName('tabs');
export const tabsHeader = getBEMElement(tabsClassName, 'header');
export const tabsContent = getBEMElement(tabsClassName, 'content');
export const tabsContentItem = getBEMElement(tabsContent, 'item');
export const tabItemCloseClassName = getBEMElement(tabItemClassName, 'close');

const Tabs = (props: ITabsProps) => {
const { closable, data, activeTab, type = 'line', onCloseTab, onSelectTab } = props;
const {
closable,
data,
activeTab,
type = 'line',
onCloseTab,
onSelectTab,
} = props;
debugger
const onMoveTab = useCallback(
(dragIndex, hoverIndex) => {
const dragTab = data[dragIndex];
Expand All @@ -55,62 +66,49 @@ const Tabs = (props: ITabsProps) => {
[data]
);

const onTabClick = (key?: string) => {
const onTabClick = (e: React.MouseEvent, key?: string) => {
onSelectTab?.(key);
};

const onTabClose = (item: ITab) => {
onCloseTab?.(item.key)
};

const renderTabBar = (tab) => {
return (
<TabButton
key={tab.key}
name={tab.name}
modified={tab.modified}
active={activeTab === tab.key}
onClose={() => onCloseTab?.(tab.key)}
/>
)
}
return (
<DndProvider backend={HTML5Backend}>
<div className={classNames(tabsClassName, getBEMModifier(tabsClassName, `${type}`))}>
<div
className={classNames(
tabsClassName,
getBEMModifier(tabsClassName, `${type}`)
)}
>
<div className={tabsHeader}>
{data?.map((tab: ITab, index: number) => {
return (
<Tab
<Tab
onMoveTab={onMoveTab}
onTabChange={onTabClick}
onTabClose={onCloseTab}
index={index}
propsKey={tab.key}
key={tab.key}
activeTab={activeTab}
active={activeTab === tab.key}
title={tab.tip}
closable={closable}
{...tab}
>
{type === 'editable-card' ? renderTabBar?.(tab) : tab.label}
{closable && (
<div className={classNames(tabItemCloseClassName, {[getBEMModifier(tabItemCloseClassName, 'active')]: activeTab === tab.key })} onClick={(e) => {
e.stopPropagation()
onTabClose(tab)
}}>
<Icon type="close" />
</div>
)}
</Tab>
)
);
})}
</div>
<div className={tabsContent}>{
data?.map((tab: ITab) => {
<div className={tabsContent}>
{data?.map((tab: ITab) => {
return (
<div className={classNames(tabsContentItem, { [getBEMModifier(tabsContentItem, 'active')]: activeTab === tab.key })}>
<div
className={classNames(tabsContentItem, {
[getBEMModifier(tabsContentItem, 'active')]:
activeTab === tab.key,
})}
>
{tab.renderPanel}
</div>
)
})
}
);
})}
</div>
</div>
</DndProvider>
Expand Down
127 changes: 64 additions & 63 deletions src/components/tabs/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,89 +38,90 @@

#{$tab} {
&__item {
align-items: center;

align-items: center;
box-sizing: border-box;
cursor: pointer;
cursor: pointer;
display: flex;
display: inline-flex;
font-size: 13px;
height: 100%;
height: 100%;
max-width: 300px;
min-width: 40px;
padding: 0 20px;
padding: 0 14px;
position: relative;
user-select: none;

&__wrapper {
display: flex;
justify-content: flex-start;
&__name {
font-size: 16px;
margin-left: 10px;
}

&__close {
font-size: 13px;
font-weight: 700;
height: 14px;
margin-left: 8px;
visibility: visible;
width: 14px;
&__op {
margin-left: 10px;
width: 20px;
}

&__button {
align-items: center;
cursor: pointer;
display: inline-flex;
height: 100%;
padding: 0 14px;
&__dot {
display: block;
height: 18px;
position: relative;
user-select: none;

&__name {
font-size: 16px;
margin-left: 10px;
}

&__op {
margin-left: 10px;
width: 20px;
}
width: 18px;

&__dot {
&::after {
border-radius: 50%;
content: '';
display: block;
height: 18px;
height: 9px;
left: 5px;
position: relative;
width: 18px;

&::after {
border-radius: 50%;
content: '';
display: block;
height: 9px;
left: 5px;
position: relative;
top: 5px;
width: 9px;
}
}

&__close {
cursor: pointer;
display: block;
font-weight: 500;
height: 18px;
width: 18px;
top: 5px;
width: 9px;
}
}

&__placeholder {
display: block;
height: 18px;
width: 18px;
}

&--active::after {
bottom: 0;
content: '';
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
&__close {
cursor: pointer;
display: block;
font-weight: 500;
height: 18px;
width: 18px;
}

&__placeholder {
display: block;
height: 18px;
width: 18px;
}

// &--active::after {
// bottom: 0;
// content: '';
// height: 1px;
// left: 0;
// position: absolute;
// width: 100%;
// }

// &__wrapper {
// display: flex;
// justify-content: flex-start;
// }

// &__close {
// font-size: 13px;
// font-weight: 700;
// height: 14px;
// margin-left: 8px;
// visibility: visible;
// width: 14px;
// }

// &__button {
// }
}
}
Loading

0 comments on commit 32acfd5

Please sign in to comment.