Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: CP support Tabs removeIcon #47334

Merged
merged 4 commits into from
Feb 5, 2024
Merged

feat: CP support Tabs removeIcon #47334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
986b452
feat: Tabs support removeIcon prop
li-jia-nan Feb 4, 2024
1ca9c06
feat: Tabs support removeIcon prop
li-jia-nan Feb 4, 2024
b18d456
Update components/config-provider/index.zh-CN.md
li-jia-nan Feb 4, 2024
0e4057b
fix: fix
li-jia-nan Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 7 additions & 2 deletions components/config-provider/__tests__/style.test.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 |
MadCcc marked this conversation as resolved.
Show resolved Hide resolved
| popupClassName | 更多菜单的 `className` | string | - | 4.21.0 |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | 大小，提供 `large` `middle` 和 `small` 三种大小 | string | `middle` | |
Expand Down