feat: Tabs组件title支持schema

This commit is contained in:
sqzhou 2023-06-19 15:10:09 +08:00
parent a97dfe234d
commit 099c9a6ea7
2 changed files with 23 additions and 10 deletions

View File

@ -7,7 +7,7 @@
import React from 'react';
import {ClassName, localeable, LocaleProps, Schema} from 'amis-core';
import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
import {themeable, ThemeProps} from 'amis-core';
import {themeable, ThemeProps, noop} from 'amis-core';
import {uncontrollable} from 'amis-core';
import {generateIcon, isObjectShallowModified} from 'amis-core';
import {autobind, guid} from 'amis-core';
@ -137,10 +137,10 @@ class TabComponent extends React.PureComponent<TabProps> {
'Tabs-pane',
className
)}
onTouchStart={swipeable && mobileUI && this.onTouchStart}
onTouchMove={swipeable && mobileUI && this.onTouchMove}
onTouchEnd={swipeable && mobileUI && this.onTouchEnd}
onTouchCancel={swipeable && mobileUI && this.onTouchEnd}
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>
@ -660,7 +660,9 @@ export class Tabs extends React.Component<TabsProps, any> {
key={this.generateTabKey(hash, eventKey, index)}
onClick={() => (disabled ? '' : this.handleSelect(eventKey))}
onDoubleClick={() => {
editable && this.handleStartEdit(index, title);
editable &&
typeof title === 'string' &&
this.handleStartEdit(index, title);
}}
>
{showTip ? (

View File

@ -33,7 +33,7 @@ export interface TabSchema extends Omit<BaseSchema, 'type'> {
/**
* Tab
*/
title?: string;
title?: string | SchemaNode;
/**
*
@ -303,7 +303,6 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
if (!tabs) {
return [[], false];
}
const arr = resolveVariableAndFilter(source, data, '| raw');
if (!Array.isArray(arr)) {
return [tabs, false];
@ -707,6 +706,18 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
: -1;
}
// 渲染tabs的title
renderTabTitle(
title: string | SchemaNode | undefined,
index: number,
data: any
) {
const {render} = this.props;
return isObject(title) && title
? render(`tab-title/${index}`, title, {...data})
: filter(title, data);
}
renderToolbar() {
const {toolbar, render, classnames: cx, toolbarClassName} = this.props;
@ -775,7 +786,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
return isVisible(tab, ctx) ? (
<Tab
{...(tab as any)}
title={filter(tab.title, ctx)}
title={this.renderTabTitle(tab.title, index, ctx)}
disabled={disabled || isDisabled(tab, ctx)}
key={index}
eventKey={filter(tab.hash, ctx) || index}
@ -816,7 +827,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
isVisible(tab, data) ? (
<Tab
{...(tab as any)}
title={filter(tab.title, data)}
title={this.renderTabTitle(tab.title, index, data)}
disabled={disabled || isDisabled(tab, data)}
key={index}
eventKey={tab.hash || index}