945 lines
25 KiB
TypeScript
945 lines
25 KiB
TypeScript
|
/**
|
|||
|
|
* @file Tabs
|
|||
|
|
* @description 选项卡
|
|||
|
|
* @author fex
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import {ClassName, localeable, LocaleProps, Schema} from 'amis-core';
|
|||
|
|
import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
|
|||
|
|
import {themeable, ThemeProps, noop} from 'amis-core';
|
|||
|
|
import {uncontrollable} from 'amis-core';
|
|||
|
|
import {isObjectShallowModified} from 'amis-core';
|
|||
|
|
import {autobind, guid} from 'amis-core';
|
|||
|
|
import {Icon} from './icons';
|
|||
|
|
import debounce from 'lodash/debounce';
|
|||
|
|
import {findDOMNode} from 'react-dom';
|
|||
|
|
import TooltipWrapper from './TooltipWrapper';
|
|||
|
|
import {resizeSensor} from 'amis-core';
|
|||
|
|
import PopOverContainer from './PopOverContainer';
|
|||
|
|
|
|||
|
|
import Sortable from 'sortablejs';
|
|||
|
|
|
|||
|
|
const transitionStyles: {
|
|||
|
|
[propName: string]: string;
|
|||
|
|
} = {
|
|||
|
|
[ENTERING]: 'in',
|
|||
|
|
[ENTERED]: 'in'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export type TabsMode =
|
|||
|
|
| ''
|
|||
|
|
| 'line'
|
|||
|
|
| 'card'
|
|||
|
|
| 'radio'
|
|||
|
|
| 'vertical'
|
|||
|
|
| 'chrome'
|
|||
|
|
| 'simple'
|
|||
|
|
| 'strong'
|
|||
|
|
| 'tiled'
|
|||
|
|
| 'sidebar';
|
|||
|
|
|
|||
|
|
export interface TabProps extends ThemeProps {
|
|||
|
|
title?: string | React.ReactNode; // 标题
|
|||
|
|
icon?: string;
|
|||
|
|
iconPosition?: 'left' | 'right';
|
|||
|
|
disabled?: boolean | string;
|
|||
|
|
eventKey: string | number;
|
|||
|
|
prevKey?: string | number;
|
|||
|
|
nextKey?: string | number;
|
|||
|
|
tip?: string;
|
|||
|
|
tab?: Schema;
|
|||
|
|
className?: string;
|
|||
|
|
activeKey?: string | number;
|
|||
|
|
reload?: boolean;
|
|||
|
|
mountOnEnter?: boolean;
|
|||
|
|
unmountOnExit?: boolean;
|
|||
|
|
toolbar?: React.ReactNode;
|
|||
|
|
children?: React.ReactNode | Array<React.ReactNode>;
|
|||
|
|
swipeable?: boolean;
|
|||
|
|
onSelect?: (eventKey: string | number) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class TabComponent extends React.PureComponent<TabProps> {
|
|||
|
|
contentDom: any;
|
|||
|
|
touch: any = {};
|
|||
|
|
touchStartTime: number;
|
|||
|
|
contentRef = (ref: any) => (this.contentDom = ref);
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
onTouchStart(event: React.TouchEvent) {
|
|||
|
|
this.touch.startX = event.touches[0].clientX;
|
|||
|
|
this.touch.startY = event.touches[0].clientY;
|
|||
|
|
this.touchStartTime = Date.now();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
onTouchMove(event: React.TouchEvent) {
|
|||
|
|
const touch = event.touches[0];
|
|||
|
|
const newState = {...this.touch};
|
|||
|
|
|
|||
|
|
newState.deltaX = touch.clientX < 0 ? 0 : touch.clientX - newState.startX;
|
|||
|
|
newState.deltaY = touch.clientY - newState.startY;
|
|||
|
|
newState.offsetX = Math.abs(newState.deltaX);
|
|||
|
|
newState.offsetY = Math.abs(newState.deltaY);
|
|||
|
|
this.touch = newState;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
onTouchEnd() {
|
|||
|
|
const duration = Date.now() - this.touchStartTime;
|
|||
|
|
const speed = this.touch.deltaX / duration;
|
|||
|
|
const shouldSwipe = Math.abs(speed) > 0.25;
|
|||
|
|
const {prevKey, nextKey, onSelect} = this.props;
|
|||
|
|
|
|||
|
|
if (shouldSwipe) {
|
|||
|
|
if (this.touch.deltaX > 0) {
|
|||
|
|
prevKey !== undefined && onSelect?.(prevKey);
|
|||
|
|
} else {
|
|||
|
|
nextKey && onSelect?.(nextKey);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const {
|
|||
|
|
classnames: cx,
|
|||
|
|
mountOnEnter,
|
|||
|
|
reload,
|
|||
|
|
unmountOnExit,
|
|||
|
|
eventKey,
|
|||
|
|
activeKey,
|
|||
|
|
children,
|
|||
|
|
className,
|
|||
|
|
swipeable,
|
|||
|
|
mobileUI
|
|||
|
|
} = this.props;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Transition
|
|||
|
|
in={activeKey === eventKey}
|
|||
|
|
mountOnEnter={mountOnEnter}
|
|||
|
|
unmountOnExit={typeof reload === 'boolean' ? reload : unmountOnExit}
|
|||
|
|
timeout={500}
|
|||
|
|
>
|
|||
|
|
{(status: string) => {
|
|||
|
|
if (status === ENTERING) {
|
|||
|
|
this.contentDom.offsetWidth;
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
ref={this.contentRef}
|
|||
|
|
className={cx(
|
|||
|
|
transitionStyles[status],
|
|||
|
|
activeKey === eventKey ? 'is-active' : '',
|
|||
|
|
'Tabs-pane',
|
|||
|
|
className
|
|||
|
|
)}
|
|||
|
|
onTouchStart={swipeable && mobileUI ? this.onTouchStart : noop}
|
|||
|
|
onTouchMove={swipeable && mobileUI ? this.onTouchMove : noop}
|
|||
|
|
onTouchEnd={swipeable && mobileUI ? this.onTouchEnd : noop}
|
|||
|
|
onTouchCancel={swipeable && mobileUI ? this.onTouchEnd : noop}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
</Transition>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const Tab = themeable(TabComponent);
|
|||
|
|
|
|||
|
|
export interface TabsProps extends ThemeProps, LocaleProps {
|
|||
|
|
mode: TabsMode;
|
|||
|
|
tabsMode?: TabsMode;
|
|||
|
|
additionBtns?: React.ReactNode;
|
|||
|
|
onSelect?: (key: string | number) => void;
|
|||
|
|
activeKey?: string | number;
|
|||
|
|
contentClassName: string;
|
|||
|
|
linksClassName?: ClassName;
|
|||
|
|
className?: string;
|
|||
|
|
tabs?: Array<TabProps>;
|
|||
|
|
tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
|
|||
|
|
toolbar?: React.ReactNode;
|
|||
|
|
addable?: boolean; // 是否显示增加按钮
|
|||
|
|
onAdd?: () => void;
|
|||
|
|
closable?: boolean;
|
|||
|
|
onClose?: (index: number, key: string | number) => void;
|
|||
|
|
draggable?: boolean;
|
|||
|
|
onDragChange?: (e: any) => void;
|
|||
|
|
showTip?: boolean;
|
|||
|
|
showTipClassName?: string;
|
|||
|
|
scrollable?: boolean; // 属性废弃，为了兼容暂且保留
|
|||
|
|
editable?: boolean;
|
|||
|
|
onEdit?: (index: number, text: string) => void;
|
|||
|
|
sidePosition?: 'left' | 'right';
|
|||
|
|
addBtnText?: string;
|
|||
|
|
collapseOnExceed?: number;
|
|||
|
|
collapseBtnLabel?: string;
|
|||
|
|
popOverContainer?: any;
|
|||
|
|
children?: React.ReactNode | Array<React.ReactNode>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface IDragInfo {
|
|||
|
|
nodeId: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export class Tabs extends React.Component<TabsProps, any> {
|
|||
|
|
static defaultProps: Pick<
|
|||
|
|
TabsProps,
|
|||
|
|
| 'mode'
|
|||
|
|
| 'contentClassName'
|
|||
|
|
| 'showTip'
|
|||
|
|
| 'showTipClassName'
|
|||
|
|
| 'sidePosition'
|
|||
|
|
| 'addBtnText'
|
|||
|
|
| 'collapseBtnLabel'
|
|||
|
|
> = {
|
|||
|
|
mode: '',
|
|||
|
|
contentClassName: '',
|
|||
|
|
showTip: false,
|
|||
|
|
showTipClassName: '',
|
|||
|
|
sidePosition: 'left',
|
|||
|
|
addBtnText: '新增', // 由于组件用的地方比较多，这里暂时不好改翻译
|
|||
|
|
collapseBtnLabel: 'more'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
static Tab = Tab;
|
|||
|
|
navMain = React.createRef<HTMLUListElement>(); // HTMLDivElement
|
|||
|
|
scroll: boolean = false;
|
|||
|
|
sortable?: Sortable;
|
|||
|
|
dragTip?: HTMLElement;
|
|||
|
|
id: string = guid();
|
|||
|
|
draging: boolean = false;
|
|||
|
|
toDispose: Array<() => void> = [];
|
|||
|
|
resizeDom = React.createRef<HTMLDivElement>();
|
|||
|
|
|
|||
|
|
checkArrowStatus = debounce(
|
|||
|
|
() => {
|
|||
|
|
const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
|
|||
|
|
scrollLeft: 0,
|
|||
|
|
scrollWidth: 0,
|
|||
|
|
clientWidth: 0
|
|||
|
|
};
|
|||
|
|
const {arrowRightDisabled, arrowLeftDisabled} = this.state;
|
|||
|
|
if (scrollLeft === 0 && !arrowLeftDisabled) {
|
|||
|
|
this.setState({
|
|||
|
|
arrowRightDisabled: false,
|
|||
|
|
arrowLeftDisabled: true
|
|||
|
|
});
|
|||
|
|
} else if (
|
|||
|
|
scrollWidth === scrollLeft + clientWidth &&
|
|||
|
|
!arrowRightDisabled
|
|||
|
|
) {
|
|||
|
|
this.setState({
|
|||
|
|
arrowRightDisabled: true,
|
|||
|
|
arrowLeftDisabled: false
|
|||
|
|
});
|
|||
|
|
} else if (scrollLeft !== 0 && arrowLeftDisabled) {
|
|||
|
|
this.setState({
|
|||
|
|
arrowLeftDisabled: false
|
|||
|
|
});
|
|||
|
|
} else if (
|
|||
|
|
scrollWidth !== scrollLeft + clientWidth &&
|
|||
|
|
arrowRightDisabled
|
|||
|
|
) {
|
|||
|
|
this.setState({
|
|||
|
|
arrowRightDisabled: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
100,
|
|||
|
|
{
|
|||
|
|
trailing: true,
|
|||
|
|
leading: false
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
constructor(props: TabsProps) {
|
|||
|
|
super(props);
|
|||
|
|
this.state = {
|
|||
|
|
isOverflow: false,
|
|||
|
|
arrowLeftDisabled: false,
|
|||
|
|
arrowRightDisabled: false,
|
|||
|
|
dragIndicator: null,
|
|||
|
|
editingIndex: null,
|
|||
|
|
editInputText: null,
|
|||
|
|
editOriginText: null
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidMount() {
|
|||
|
|
this.computedWidth();
|
|||
|
|
if (this.navMain) {
|
|||
|
|
this.navMain.current?.addEventListener('wheel', this.handleWheel, {
|
|||
|
|
passive: false
|
|||
|
|
});
|
|||
|
|
this.checkArrowStatus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.resizeDom?.current &&
|
|||
|
|
this.toDispose.push(
|
|||
|
|
resizeSensor(this.resizeDom.current as HTMLElement, () =>
|
|||
|
|
this.computedWidth()
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidUpdate(preProps: any) {
|
|||
|
|
// 只有 key 变化或者 tab 改变，才会重新计算，避免多次计算导致 顶部标签 滚动问题
|
|||
|
|
const isTabsModified = isObjectShallowModified(
|
|||
|
|
{
|
|||
|
|
activeKey: this.props.activeKey,
|
|||
|
|
children: Array.isArray(this.props.children)
|
|||
|
|
? this.props.children!.map(item => ({
|
|||
|
|
eventKey: (item as JSX.Element)?.props?.eventKey,
|
|||
|
|
// 这里 title 可能是 React.ReactNode，只对比 string
|
|||
|
|
title:
|
|||
|
|
typeof (item as JSX.Element)?.props?.title === 'string'
|
|||
|
|
? (item as JSX.Element).props.title
|
|||
|
|
: ''
|
|||
|
|
}))
|
|||
|
|
: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
activeKey: preProps.activeKey,
|
|||
|
|
children: Array.isArray(preProps.children)
|
|||
|
|
? preProps.children!.map((item: any) => ({
|
|||
|
|
eventKey: item?.props?.eventKey,
|
|||
|
|
title:
|
|||
|
|
typeof item?.props?.title === 'string' ? item.props.title : ''
|
|||
|
|
}))
|
|||
|
|
: []
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 判断是否是由滚动触发的数据更新，如果是则不需要再次判断容器与内容的关系
|
|||
|
|
if (!this.scroll && !this.draging && isTabsModified) {
|
|||
|
|
this.computedWidth();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移动端取消箭头切换，改为滚动切换激活项居中
|
|||
|
|
const {classPrefix: ns, activeKey, mobileUI} = this.props;
|
|||
|
|
if (mobileUI && preProps.activeKey !== activeKey) {
|
|||
|
|
const {classPrefix: ns} = this.props;
|
|||
|
|
const dom = findDOMNode(this) as HTMLElement;
|
|||
|
|
const activeTab = dom.querySelector(
|
|||
|
|
`.${ns}Tabs-link.is-active`
|
|||
|
|
) as HTMLElement;
|
|||
|
|
const parentWidth = (activeTab.parentNode?.parentNode as any).offsetWidth;
|
|||
|
|
const offsetLeft = activeTab.offsetLeft;
|
|||
|
|
const offsetWidth = activeTab.offsetWidth;
|
|||
|
|
if (activeTab.parentNode) {
|
|||
|
|
(activeTab.parentNode as any).scrollLeft =
|
|||
|
|
offsetLeft > parentWidth
|
|||
|
|
? (offsetLeft / parentWidth) * parentWidth -
|
|||
|
|
parentWidth / 2 +
|
|||
|
|
offsetWidth / 2
|
|||
|
|
: offsetLeft - parentWidth / 2 + offsetWidth / 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.scroll = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillUnmount() {
|
|||
|
|
this.checkArrowStatus.cancel();
|
|||
|
|
this.toDispose.forEach(fn => fn());
|
|||
|
|
this.toDispose = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 处理内容与容器之间的位置关系
|
|||
|
|
*/
|
|||
|
|
computedWidth() {
|
|||
|
|
const {mode: dMode, tabsMode} = this.props;
|
|||
|
|
const mode = tabsMode || dMode;
|
|||
|
|
if (['vertical', 'sidebar'].includes(mode)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const navMainRef = this.navMain.current;
|
|||
|
|
const clientWidth: number = navMainRef?.clientWidth || 0;
|
|||
|
|
const scrollWidth: number = navMainRef?.scrollWidth || 0;
|
|||
|
|
const isOverflow = scrollWidth > clientWidth;
|
|||
|
|
|
|||
|
|
// 内容超出容器长度标记溢出
|
|||
|
|
if (isOverflow !== this.state.isOverflow) {
|
|||
|
|
this.setState({isOverflow});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 正在拖动的不自动定位
|
|||
|
|
if (isOverflow && !this.draging) {
|
|||
|
|
this.showSelected();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 保证选中的tab始终显示在可视区域
|
|||
|
|
*/
|
|||
|
|
showSelected(key?: string | number) {
|
|||
|
|
const {mode: dMode, tabsMode} = this.props;
|
|||
|
|
const {isOverflow} = this.state;
|
|||
|
|
const mode = tabsMode || dMode;
|
|||
|
|
if (['vertical', 'sidebar'].includes(mode) || !isOverflow) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const {activeKey, children} = this.props;
|
|||
|
|
const currentKey = key !== undefined ? key : activeKey;
|
|||
|
|
const currentIndex = (children as any[])?.findIndex(
|
|||
|
|
(item: any) => item.props.eventKey === currentKey
|
|||
|
|
);
|
|||
|
|
const li = this.navMain.current?.children || [];
|
|||
|
|
const currentLi = li[currentIndex] as HTMLElement;
|
|||
|
|
const liOffsetLeft = currentLi?.offsetLeft;
|
|||
|
|
const liClientWidth = currentLi?.clientWidth;
|
|||
|
|
const scrollLeft = this.navMain.current?.scrollLeft || 0;
|
|||
|
|
const clientWidth = this.navMain.current?.clientWidth || 0;
|
|||
|
|
|
|||
|
|
// 左边被遮住了
|
|||
|
|
if (scrollLeft > liOffsetLeft) {
|
|||
|
|
this.navMain.current?.scrollTo({
|
|||
|
|
left: liOffsetLeft,
|
|||
|
|
behavior: 'smooth'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 右边被遮住了
|
|||
|
|
if (liOffsetLeft + liClientWidth > scrollLeft + clientWidth) {
|
|||
|
|
this.navMain.current?.scrollTo({
|
|||
|
|
left: liOffsetLeft + liClientWidth - clientWidth,
|
|||
|
|
behavior: 'smooth'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
handleSelect(key: string | number) {
|
|||
|
|
const {onSelect} = this.props;
|
|||
|
|
this.showSelected(key);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.checkArrowStatus();
|
|||
|
|
}, 500);
|
|||
|
|
onSelect && onSelect(key);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
handleStartEdit(index: number, title: string) {
|
|||
|
|
this.setState({
|
|||
|
|
editingIndex: index,
|
|||
|
|
editInputText: title,
|
|||
|
|
editOriginText: title
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
handleEditInputChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|||
|
|
this.setState({
|
|||
|
|
editInputText: e.currentTarget.value
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
handleEdit() {
|
|||
|
|
let {editingIndex, editInputText, editOriginText} = this.state;
|
|||
|
|
const {onEdit} = this.props;
|
|||
|
|
|
|||
|
|
this.setState({
|
|||
|
|
editingIndex: null,
|
|||
|
|
editInputText: null,
|
|||
|
|
editOriginText: null
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onEdit &&
|
|||
|
|
(editInputText = String(editInputText).trim()) &&
|
|||
|
|
editInputText !== editOriginText &&
|
|||
|
|
onEdit(editingIndex, editInputText);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
dragTipRef(ref: any) {
|
|||
|
|
if (!this.dragTip && ref) {
|
|||
|
|
this.initDragging();
|
|||
|
|
} else if (this.dragTip && !ref) {
|
|||
|
|
this.destroyDragging();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.dragTip = ref;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
destroyDragging() {
|
|||
|
|
this.sortable && this.sortable.destroy();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@autobind
|
|||
|
|
initDragging() {
|
|||
|
|
const {classPrefix: ns, onDragChange} = this.props;
|
|||
|
|
const dom = findDOMNode(this) as HTMLElement;
|
|||
|
|
|
|||
|
|
this.sortable = new Sortable(
|
|||
|
|
dom.querySelector(`.${ns}Tabs-links`) as HTMLElement,
|
|||
|
|
{
|
|||
|
|
group: this.id,
|
|||
|
|
animation: 250,
|
|||
|
|
handle: `.${ns}Tabs-link`,
|
|||
|
|
ghostClass: `${ns}Tabs-link--dragging`,
|
|||
|
|
onStart: () => {
|
|||
|
|
this.draging = true;
|
|||
|
|
},
|
|||
|
|
onEnd: (e: any) => {
|
|||
|
|
// 没有移动
|
|||
|
|
if (e.newIndex === e.oldIndex) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 再交换回来
|
|||
|
|
const parent = e.to as HTMLElement;
|
|||
|
|
if (e.oldIndex < parent.childNodes.length - 1) {
|
|||
|
|
parent.insertBefore(
|
|||
|
|
e.item,
|
|||
|
|
parent.childNodes[
|
|||
|
|
e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
|
|||
|
|
]
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
parent.appendChild(e.item);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.draging = false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onDragChange && onDragChange(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
handleArrow(type: 'left' | 'right') {
|
|||
|
|
const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
|
|||
|
|
scrollLeft: 0,
|
|||
|
|
scrollWidth: 0,
|
|||
|
|
clientWidth: 0
|
|||
|
|
};
|
|||
|
|
if (type === 'left' && scrollLeft > 0) {
|
|||
|
|
const newScrollLeft = scrollLeft - clientWidth;
|
|||
|
|
|
|||
|
|
this.navMain.current?.scrollTo({
|
|||
|
|
left: newScrollLeft > 0 ? newScrollLeft : 0,
|
|||
|
|
behavior: 'smooth'
|
|||
|
|
});
|
|||
|
|
this.setState({
|
|||
|
|
arrowRightDisabled: false,
|
|||
|
|
arrowLeftDisabled: newScrollLeft <= 0
|
|||
|
|
});
|
|||
|
|
} else if (type === 'right' && scrollWidth > scrollLeft + clientWidth) {
|
|||
|
|
const newScrollLeft = scrollLeft + clientWidth;
|
|||
|
|
|
|||
|
|
this.navMain.current?.scrollTo({
|
|||
|
|
left: newScrollLeft > scrollWidth ? scrollWidth : newScrollLeft,
|
|||
|
|
behavior: 'smooth'
|
|||
|
|
});
|
|||
|
|
this.setState({
|
|||
|
|
arrowRightDisabled: newScrollLeft > scrollWidth - clientWidth,
|
|||
|
|
arrowLeftDisabled: false
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.scroll = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 监听导航上的滚动事件
|
|||
|
|
*/
|
|||
|
|
@autobind
|
|||
|
|
handleWheel(e: WheelEvent) {
|
|||
|
|
const {deltaY, deltaX} = e;
|
|||
|
|
const absX = Math.abs(deltaX);
|
|||
|
|
const absY = Math.abs(deltaY);
|
|||
|
|
|
|||
|
|
// 当鼠标上下滚动时转换为左右滚动
|
|||
|
|
if (absY > absX) {
|
|||
|
|
this.navMain.current?.scrollTo({
|
|||
|
|
left: this.navMain.current?.scrollLeft + deltaY
|
|||
|
|
});
|
|||
|
|
e.preventDefault();
|
|||
|
|
}
|
|||
|
|
this.checkArrowStatus();
|
|||
|
|
this.scroll = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理 hash 作为 key 时重复的问题
|
|||
|
|
generateTabKey(hash: any, eventKey: any, index: number) {
|
|||
|
|
return (hash === eventKey ? 'hash-' : '') + (eventKey ?? index);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderNav(child: any, index: number, showClose: boolean) {
|
|||
|
|
if (!child) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
classnames: cx,
|
|||
|
|
activeKey: activeKeyProp,
|
|||
|
|
mode,
|
|||
|
|
closable,
|
|||
|
|
draggable,
|
|||
|
|
showTip,
|
|||
|
|
showTipClassName,
|
|||
|
|
editable
|
|||
|
|
} = this.props;
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
eventKey,
|
|||
|
|
disabled,
|
|||
|
|
icon,
|
|||
|
|
iconPosition,
|
|||
|
|
title,
|
|||
|
|
toolbar,
|
|||
|
|
tabClassName,
|
|||
|
|
closable: tabClosable,
|
|||
|
|
tip,
|
|||
|
|
hash
|
|||
|
|
} = child.props;
|
|||
|
|
|
|||
|
|
const {editingIndex, editInputText} = this.state;
|
|||
|
|
|
|||
|
|
const activeKey =
|
|||
|
|
activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
|
|||
|
|
|
|||
|
|
const iconElement = <Icon cx={cx} icon={icon} className="Icon" />;
|
|||
|
|
|
|||
|
|
const link = (
|
|||
|
|
<a title={typeof title === 'string' ? title : undefined}>
|
|||
|
|
{editable && editingIndex === index ? (
|
|||
|
|
<input
|
|||
|
|
className={cx('Tabs-link-edit')}
|
|||
|
|
type="text"
|
|||
|
|
value={editInputText}
|
|||
|
|
autoFocus
|
|||
|
|
onFocus={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|||
|
|
e.currentTarget.select()
|
|||
|
|
}
|
|||
|
|
onChange={this.handleEditInputChange}
|
|||
|
|
onBlur={this.handleEdit}
|
|||
|
|
onKeyPress={(e: React.KeyboardEvent) =>
|
|||
|
|
e && e.key === 'Enter' && this.handleEdit()
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
{icon ? (
|
|||
|
|
iconPosition === 'right' ? (
|
|||
|
|
<>
|
|||
|
|
{title} {iconElement}
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
{iconElement} {title}
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
) : (
|
|||
|
|
title
|
|||
|
|
)}
|
|||
|
|
{React.isValidElement(toolbar) ? toolbar : null}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</a>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<li
|
|||
|
|
className={cx(
|
|||
|
|
'Tabs-link',
|
|||
|
|
activeKey === eventKey ? 'is-active' : '',
|
|||
|
|
disabled ? 'is-disabled' : '',
|
|||
|
|
tabClassName
|
|||
|
|
)}
|
|||
|
|
key={this.generateTabKey(hash, eventKey, index)}
|
|||
|
|
onClick={() => (disabled ? '' : this.handleSelect(eventKey))}
|
|||
|
|
onDoubleClick={() => {
|
|||
|
|
editable &&
|
|||
|
|
typeof title === 'string' &&
|
|||
|
|
this.handleStartEdit(index, title);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{showTip ? (
|
|||
|
|
<TooltipWrapper
|
|||
|
|
placement="top"
|
|||
|
|
tooltip={tip ?? (typeof title === 'string' ? title : '')}
|
|||
|
|
trigger="hover"
|
|||
|
|
tooltipClassName={showTipClassName}
|
|||
|
|
>
|
|||
|
|
{link}
|
|||
|
|
</TooltipWrapper>
|
|||
|
|
) : (
|
|||
|
|
link
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showClose && (tabClosable ?? closable) && (
|
|||
|
|
<span
|
|||
|
|
className={cx('Tabs-link-close')}
|
|||
|
|
onClick={(e: React.MouseEvent) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
this.props.onClose &&
|
|||
|
|
this.props.onClose(index, eventKey ?? index);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Icon icon="close" className={cx('Tabs-link-close-icon')} />
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{mode === 'chrome' ? (
|
|||
|
|
<div className="chrome-tab-background">
|
|||
|
|
<svg viewBox="0 0 124 124" className="chrome-tab-background--right">
|
|||
|
|
<path d="M0,0 C0,68.483309 55.516691,124 124,124 L0,124 L0,-1 C0.00132103964,-0.667821298 0,-0.334064922 0,0 Z"></path>
|
|||
|
|
</svg>
|
|||
|
|
<svg viewBox="0 0 124 124" className="chrome-tab-background--left">
|
|||
|
|
<path d="M124,0 L124,125 L0,125 L0,125 C68.483309,125 124,69.483309 124,1 L123.992,0 L124,0 Z"></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
</li>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderTab(child: any, index: number) {
|
|||
|
|
if (!child) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const {hash, eventKey} = child?.props || {};
|
|||
|
|
|
|||
|
|
const {activeKey: activeKeyProp, classnames} = this.props;
|
|||
|
|
const activeKey =
|
|||
|
|
activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
|
|||
|
|
|
|||
|
|
return React.cloneElement(child, {
|
|||
|
|
...child.props,
|
|||
|
|
key: this.generateTabKey(hash, eventKey, index),
|
|||
|
|
classnames: classnames,
|
|||
|
|
activeKey: activeKey
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderArrow(type: 'left' | 'right') {
|
|||
|
|
const {mode: dMode, tabsMode} = this.props;
|
|||
|
|
const mode = tabsMode || dMode;
|
|||
|
|
if (['vertical', 'sidebar'].includes(mode)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const {classnames: cx} = this.props;
|
|||
|
|
const {isOverflow, arrowLeftDisabled, arrowRightDisabled} = this.state;
|
|||
|
|
const disabled = type === 'left' ? arrowLeftDisabled : arrowRightDisabled;
|
|||
|
|
return isOverflow ? (
|
|||
|
|
<div
|
|||
|
|
onClick={() => this.handleArrow(type)}
|
|||
|
|
className={cx(
|
|||
|
|
'Tabs-linksContainer-arrow',
|
|||
|
|
'Tabs-linksContainer-arrow--' + type,
|
|||
|
|
disabled && 'Tabs-linksContainer-arrow--disabled'
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<i className={'iconfont icon-arrow-' + type} />
|
|||
|
|
</div>
|
|||
|
|
) : null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
handleAddBtn() {
|
|||
|
|
const {onAdd} = this.props;
|
|||
|
|
|
|||
|
|
onAdd && onAdd();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderNavs(showClose = false) {
|
|||
|
|
const {
|
|||
|
|
children,
|
|||
|
|
collapseOnExceed,
|
|||
|
|
translate: __,
|
|||
|
|
classnames: cx,
|
|||
|
|
popOverContainer,
|
|||
|
|
collapseBtnLabel
|
|||
|
|
} = this.props;
|
|||
|
|
|
|||
|
|
if (!Array.isArray(children)) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let doms: Array<any> = (children as Array<any>).map((tab, index) =>
|
|||
|
|
this.renderNav(tab, index, showClose)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
typeof collapseOnExceed == 'number' &&
|
|||
|
|
collapseOnExceed &&
|
|||
|
|
doms.length > collapseOnExceed
|
|||
|
|
) {
|
|||
|
|
const rest = doms.splice(
|
|||
|
|
collapseOnExceed - 1,
|
|||
|
|
doms.length + 1 - collapseOnExceed
|
|||
|
|
);
|
|||
|
|
doms.push(
|
|||
|
|
<PopOverContainer
|
|||
|
|
key="togglor"
|
|||
|
|
placement="center-bottom-center-top center-top-center-bottom"
|
|||
|
|
popOverClassName={cx('Tabs-PopOver')}
|
|||
|
|
popOverContainer={popOverContainer || (() => findDOMNode(this))}
|
|||
|
|
popOverRender={({onClose}) => (
|
|||
|
|
<ul
|
|||
|
|
className={cx('Tabs-PopOverList', 'DropDown-menu')}
|
|||
|
|
onClick={onClose}
|
|||
|
|
>
|
|||
|
|
{rest}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{({onClick, ref, isOpened}) => (
|
|||
|
|
<li
|
|||
|
|
className={cx(
|
|||
|
|
'Tabs-link',
|
|||
|
|
rest.some(item => ~item.props.className.indexOf('is-active'))
|
|||
|
|
? 'is-active'
|
|||
|
|
: ''
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<a
|
|||
|
|
className={cx('Tabs-togglor', isOpened ? 'is-opened' : '')}
|
|||
|
|
onClick={onClick}
|
|||
|
|
>
|
|||
|
|
<span>{__(collapseBtnLabel || 'more')}</span>
|
|||
|
|
<span className={cx('Tabs-togglor-arrow')}>
|
|||
|
|
<Icon icon="right-arrow-bold" className="icon" />
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
)}
|
|||
|
|
</PopOverContainer>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return doms;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
const {
|
|||
|
|
classnames: cx,
|
|||
|
|
contentClassName,
|
|||
|
|
className,
|
|||
|
|
style,
|
|||
|
|
mode: dMode,
|
|||
|
|
tabsMode,
|
|||
|
|
children,
|
|||
|
|
additionBtns,
|
|||
|
|
toolbar,
|
|||
|
|
linksClassName,
|
|||
|
|
addable,
|
|||
|
|
draggable,
|
|||
|
|
sidePosition,
|
|||
|
|
addBtnText,
|
|||
|
|
mobileUI
|
|||
|
|
} = this.props;
|
|||
|
|
|
|||
|
|
const {isOverflow} = this.state;
|
|||
|
|
if (!Array.isArray(children)) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mode = tabsMode || dMode;
|
|||
|
|
|
|||
|
|
const toolButtons = (
|
|||
|
|
<>
|
|||
|
|
{addable && (
|
|||
|
|
<div
|
|||
|
|
className={cx('Tabs-addable')}
|
|||
|
|
onClick={() => this.handleAddBtn()}
|
|||
|
|
>
|
|||
|
|
<Icon icon="plus" className={cx('Tabs-addable-icon')} />
|
|||
|
|
{addBtnText}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{toolbar}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={cx(
|
|||
|
|
`Tabs`,
|
|||
|
|
{
|
|||
|
|
[`Tabs--${mode}`]: mode,
|
|||
|
|
[`sidebar--${sidePosition}`]: mode === 'sidebar'
|
|||
|
|
},
|
|||
|
|
className
|
|||
|
|
)}
|
|||
|
|
style={style}
|
|||
|
|
>
|
|||
|
|
{!['vertical', 'sidebar', 'chrome'].includes(mode) ? (
|
|||
|
|
<div
|
|||
|
|
className={cx(
|
|||
|
|
'Tabs-linksContainer-wrapper',
|
|||
|
|
toolbar && 'Tabs-linksContainer-wrapper--toolbar'
|
|||
|
|
)}
|
|||
|
|
ref={this.resizeDom}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={cx(
|
|||
|
|
'Tabs-linksContainer',
|
|||
|
|
isOverflow && 'Tabs-linksContainer--overflow'
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{!mobileUI ? this.renderArrow('left') : null}
|
|||
|
|
<div className={cx('Tabs-linksContainer-main')}>
|
|||
|
|
<ul
|
|||
|
|
className={cx('Tabs-links', linksClassName, {
|
|||
|
|
'is-mobile': mobileUI
|
|||
|
|
})}
|
|||
|
|
role="tablist"
|
|||
|
|
ref={this.navMain}
|
|||
|
|
>
|
|||
|
|
{this.renderNavs(true)}
|
|||
|
|
{additionBtns}
|
|||
|
|
{!isOverflow && toolButtons}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
{!mobileUI ? this.renderArrow('right') : null}
|
|||
|
|
</div>
|
|||
|
|
{isOverflow && toolButtons}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className={cx('Tabs-linksWrapper')}>
|
|||
|
|
<ul
|
|||
|
|
className={cx('Tabs-links', linksClassName, {
|
|||
|
|
'is-mobile': mobileUI
|
|||
|
|
})}
|
|||
|
|
role="tablist"
|
|||
|
|
>
|
|||
|
|
{this.renderNavs()}
|
|||
|
|
{additionBtns}
|
|||
|
|
{toolbar}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className={cx('Tabs-content', contentClassName)}>
|
|||
|
|
{children.map((child, index) => {
|
|||
|
|
return this.renderTab(child, index);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
{draggable && (
|
|||
|
|
<div className={cx('Tabs-drag-tip')} ref={this.dragTipRef} />
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ThemedTabs = localeable(
|
|||
|
|
themeable(
|
|||
|
|
uncontrollable(Tabs, {
|
|||
|
|
activeKey: 'onSelect'
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
export default ThemedTabs as typeof ThemedTabs & {
|
|||
|
|
Tab: typeof Tab;
|
|||
|
|
};
|