test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-01 11:28:30 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Tabs 优化，默认显示第一个

Browse Source
This commit is contained in:
2betop 2020-05-26 09:37:25 +08:00
parent 6b13871f7d
commit 12e4ee7639
1 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Tabs.tsx
View File

@ -7,7 +7,8 @@
import React from 'react'; import React from 'react';
import {Schema} from '../types'; import {Schema} from '../types';
import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition'; import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
import {ClassNamesFn, themeable} from '../theme'; import {ClassNamesFn, themeable, ThemeProps} from '../theme';
import uncontrollable from 'uncontrollable';
const transitionStyles: { const transitionStyles: {
[propName: string]: string; [propName: string]: string;
@ -16,14 +17,13 @@ const transitionStyles: {
[ENTERED]: 'in' [ENTERED]: 'in'
}; };
export interface TabProps { export interface TabProps extends ThemeProps {
title?: string; // 标题 title?: string; // 标题
icon?: string; icon?: string;
disabled?: boolean | string; disabled?: boolean | string;
eventKey: string | number; eventKey: string | number;
tab?: Schema; tab?: Schema;
className?: string; className?: string;
classnames?: ClassNamesFn;
activeKey?: string | number; activeKey?: string | number;
reload?: boolean; reload?: boolean;
mountOnEnter?: boolean; mountOnEnter?: boolean;
@ -31,14 +31,12 @@ export interface TabProps {
toolbar?: React.ReactNode; toolbar?: React.ReactNode;
} }
export interface TabsProps { export interface TabsProps extends ThemeProps {
mode?: '' | 'line' | 'card' | 'radio' | 'vertical'; mode: '' | 'line' | 'card' | 'radio' | 'vertical';
tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical'; tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical';
additionBtns?: React.ReactNode; additionBtns?: React.ReactNode;
onSelect?: (key: string | number) => void; onSelect?: (key: string | number) => void;
classPrefix: string; activeKey?: string | number;
classnames: ClassNamesFn;
activeKey: string | number;
contentClassName: string; contentClassName: string;
className?: string; className?: string;
tabs?: Array<TabProps>; tabs?: Array<TabProps>;
@ -62,8 +60,10 @@ export class Tabs extends React.Component<TabsProps> {
return; return;
} }
const {classnames: cx, activeKey} = this.props; const {classnames: cx, activeKey: activeKeyProp} = this.props;
const {eventKey, disabled, icon, title, toolbar} = child.props; const {eventKey, disabled, icon, title, toolbar} = child.props;
const activeKey =
activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
return ( return (
<li <li
@ -88,7 +88,10 @@ export class Tabs extends React.Component<TabsProps> {
return; return;
} }
const {activeKey, classnames} = this.props; const {activeKey: activeKeyProp, classnames} = this.props;
const eventKey = child.props.eventKey;
const activeKey =
activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
return React.cloneElement(child, { return React.cloneElement(child, {
...child.props, ...child.props,
@ -108,6 +111,7 @@ export class Tabs extends React.Component<TabsProps> {
children, children,
additionBtns, additionBtns,
toolbar, toolbar,
activeKey: activeKeyProps
} = this.props; } = this.props;
if (!Array.isArray(children)) { if (!Array.isArray(children)) {
@ -142,7 +146,7 @@ export class Tabs extends React.Component<TabsProps> {
} }
} }
export class Tab extends React.PureComponent<TabProps> { class TabComponent extends React.PureComponent<TabProps> {
contentDom: any; contentDom: any;
contentRef = (ref: any) => (this.contentDom = ref); contentRef = (ref: any) => (this.contentDom = ref);
@ -172,15 +176,12 @@ export class Tab extends React.PureComponent<TabProps> {
return ( return (
<div <div
ref={this.contentRef} ref={this.contentRef}
className={ className={cx(
cx && transitionStyles[status],
cx( activeKey === eventKey ? 'is-active' : '',
transitionStyles[status], 'Tabs-pane',
activeKey === eventKey ? 'is-active' : '', className
'Tabs-pane', )}
className
)
}
> >
{children} {children}
</div> </div>
@ -191,4 +192,10 @@ export class Tab extends React.PureComponent<TabProps> {
} }
} }
export default themeable(Tabs); export const Tab = themeable(TabComponent);
export default themeable(
uncontrollable(Tabs, {
activeKey: 'onSelect'
})
);