Skip to content

Commit

Permalink
feat: Tabs support removeIcon prop (#47334)
Browse files Browse the repository at this point in the history 
* feat: Tabs support removeIcon prop

* feat: Tabs support removeIcon prop

* Update components/config-provider/index.zh-CN.md

Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

---------

Signed-off-by: lijianan <574980606@qq.com>
  • Loading branch information
@li-jia-nan
li-jia-nan committed Feb 5, 2024
1 parent aa04816 commit cfe7226
Show file tree
Hide file tree
Showing 7 changed files with 19 additions and 10 deletions.
9 changes: 7 additions & 2 deletions components/config-provider/__tests__/style.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1041,24 +1041,29 @@ describe('ConfigProvider support style and className props', () => {
expect(head).toHaveStyle({ color: 'red' });
});

it('Should Tabs className & style & addIcon & moreIcon works', () => {
it('Should Tabs className & style & addIcon & moreIcon & removeIcon works', () => {
const { container } = render(
<ConfigProvider
tabs={{
className: 'cp-tabs',
style: { backgroundColor: 'red' },
addIcon: <span className="cp-test-addIcon">cp-test-addIcon</span>,
moreIcon: <span className="cp-test-moreIcon">cp-test-moreIcon</span>,
removeIcon: <span className="cp-test-removeIcon">cp-test-removeIcon</span>,
}}
>
<Tabs items={[]} type="editable-card" />
<Tabs
type="editable-card"
items={[{ key: '1', label: <span>tab</span>, children: <span>children</span> }]}
/>
</ConfigProvider>,
);
const element = container.querySelector<HTMLDivElement>('.ant-tabs');
expect(element).toHaveClass('cp-tabs');
expect(element).toHaveStyle({ backgroundColor: 'red' });
expect(element?.querySelector<HTMLSpanElement>('.cp-test-addIcon')).toBeTruthy();
expect(element?.querySelector<HTMLSpanElement>('.cp-test-moreIcon')).toBeTruthy();
expect(element?.querySelector<HTMLSpanElement>('.cp-test-removeIcon')).toBeTruthy();
});

it('Should TimePicker className works', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/config-provider/context.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export type ModalConfig = ComponentStyleConfig &
Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon'>;

export type TabsConfig = ComponentStyleConfig &
Pick<TabsProps, 'indicator' | 'indicatorSize' | 'moreIcon' | 'addIcon'>;
Pick<TabsProps, 'indicator' | 'indicatorSize' | 'moreIcon' | 'addIcon' | 'removeIcon'>;

export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closeIcon'>;

Expand Down
2 changes: 1 addition & 1 deletion components/config-provider/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ const {
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0 |
| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode, removeIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0, `removeIcon`: 5.15.0 |
| tag | Set Tag common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
Expand Down
2 changes: 1 addition & 1 deletion components/config-provider/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const {
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0 |
| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode, removeIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0, `removeIcon`: 5.15.0 |
| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
Expand Down
5 changes: 3 additions & 2 deletions components/tabs/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,15 @@ Common props ref：[Common props](/docs/react/common-props)
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| activeKey | Current TabPane's key | string | - | |
| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
| addIcon | Customize add icon | ReactNode | `<PlusOutlined />` | 4.4.0 |
| animated | Whether to change tabs with animation. | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
| centered | Centers tabs | boolean | false | 4.4.0 |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
| indicator | Customize `size` and `align` of indicator | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
| items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 |
| moreIcon | The custom icon of ellipsis | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
| moreIcon | The custom icon of ellipsis | ReactNode | `<EllipsisOutlined />` | 4.14.0 |
| removeIcon | The custom icon of remove | ReactNode | `<CloseOutlined />` | 5.15.0 |
| popupClassName | `className` for more dropdown. | string | - | 4.21.0 |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | `large` \| `middle` \| `small` | `middle` | |
Expand Down
4 changes: 3 additions & 1 deletion components/tabs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
hideAdd?: boolean;
centered?: boolean;
addIcon?: React.ReactNode;
removeIcon?: React.ReactNode;
onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
children?: React.ReactNode;
/** @deprecated Please use `indicator={{ size: ... }}` instead */
Expand All @@ -47,6 +48,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
hideAdd,
centered,
addIcon,
removeIcon,
moreIcon,
popupClassName,
children,
Expand All @@ -69,7 +71,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
onEdit: (editType, { key, event }) => {
onEdit?.(editType === 'add' ? event : key!, editType);
},
removeIcon: <CloseOutlined />,
removeIcon: removeIcon ?? tabs?.removeIcon ?? <CloseOutlined />,
addIcon: (addIcon ?? tabs?.addIcon) || <PlusOutlined />,
showAdd: hideAdd !== true,
};
Expand Down
5 changes: 3 additions & 2 deletions components/tabs/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,15 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string | - | |
| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
| addIcon | 自定义添加按钮 | ReactNode | `<PlusOutlined />` | 4.4.0 |
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
| centered | 标签居中展示 | boolean | false | 4.4.0 |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
| items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 |
| moreIcon | 自定义折叠 icon | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
| moreIcon | 自定义折叠 icon | ReactNode | `<EllipsisOutlined />` | 4.14.0 |
| removeIcon | 自定义删除 icon | ReactNode | `<CloseOutlined />` | 5.15.0 |
| popupClassName | 更多菜单的 `className` | string | - | 4.21.0 |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | 大小，提供 `large` `middle` 和 `small` 三种大小 | string | `middle` | |
Expand Down

0 comments on commit cfe7226

Please sign in to comment.