mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: Apply ConfigProvider componentSize on Tabs component (#29844)

Browse Source
This commit is contained in:
Bernard Niset 2021-03-24 05:23:24 +01:00 committed by GitHub
parent a87ae51460
commit e49281c7f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -24435,7 +24435,7 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
exports[`ConfigProvider components Tabs configProvider componentSize large 1`] = `
<div
class="config-tabs config-tabs-top"
class="config-tabs config-tabs-top config-tabs-large"
>
<div
class="config-tabs-nav"
@ -24520,7 +24520,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize large 1`] =
exports[`ConfigProvider components Tabs configProvider componentSize middle 1`] = `
<div
class="config-tabs config-tabs-top"
class="config-tabs config-tabs-top config-tabs-middle"
>
<div
class="config-tabs-nav"

16
components/config-provider/demo/size.md
View File

@ -25,8 +25,11 @@ import {
Divider,
Table,
Card,
Tabs,
} from 'antd';
const { TabPane } = Tabs;
const FormSizeDemo = () => {
const [componentSize, setComponentSize] = useState('small');
return (
@ -46,6 +49,19 @@ const FormSizeDemo = () => {
<div className="example">
<Input />
</div>
<div className="example">
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
</div>
<div className="example">
<Input.Search allowClear />
</div>

59
components/tabs/index.tsx
View File

@ -8,7 +8,7 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
import devWarning from '../_util/devWarning';
import { ConfigContext } from '../config-provider';
import { SizeType } from '../config-provider/SizeContext';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
export type TabsType = 'line' | 'card' | 'editable-card';
export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
@ -24,11 +24,17 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
}
function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...props }: TabsProps) {
const {
prefixCls: customizePrefixCls,
moreIcon = <EllipsisOutlined />,
} = props;
function Tabs({
type,
className,
size: propSize,
onEdit,
hideAdd,
centered,
addIcon,
...props
}: TabsProps) {
const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
@ -52,23 +58,30 @@ function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...pr
);
return (
<RcTabs
direction={direction}
moreTransitionName={`${rootPrefixCls}-slide-up`}
{...props}
className={classNames(
{
[`${prefixCls}-${size}`]: size,
[`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
[`${prefixCls}-editable-card`]: type === 'editable-card',
[`${prefixCls}-centered`]: centered,
},
className,
)}
editable={editable}
moreIcon={moreIcon}
prefixCls={prefixCls}
/>
<SizeContext.Consumer>
{contextSize => {
const size = propSize !== undefined ? propSize : contextSize;
return (
<RcTabs
direction={direction}
moreTransitionName={`${rootPrefixCls}-slide-up`}
{...props}
className={classNames(
{
[`${prefixCls}-${size}`]: size,
[`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
[`${prefixCls}-editable-card`]: type === 'editable-card',
[`${prefixCls}-centered`]: centered,
},
className,
)}
editable={editable}
moreIcon={moreIcon}
prefixCls={prefixCls}
/>
);
}}
</SizeContext.Consumer>
);
}