diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap index fc7117bc39..2a13f31171 100644 --- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`] = `
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
), value: 'user1', + tooltip: { title: 'hello user1', color: 'gold' }, }, { label: ( @@ -23,6 +24,7 @@ const App: React.FC = () => ( ), value: 'user2', + tooltip: { title: 'hello user2', color: 'pink' }, }, { label: ( @@ -32,6 +34,7 @@ const App: React.FC = () => ( ), value: 'user3', + tooltip: { title: 'hello user3', color: 'geekblue' }, }, ]} /> diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md index 9bf05ff2e6..681f1dfd66 100644 --- a/components/segmented/index.en-US.md +++ b/components/segmented/index.en-US.md @@ -57,13 +57,14 @@ Common props ref：[Common props](/docs/react/common-props) ### SegmentedItemType -| Property | Description | Type | Default | Version | -| --------- | -------------------------------- | ---------------- | ------- | ------- | -| label | Display text for Segmented item | ReactNode | - | | -| value | Value for Segmented item | string \| number | - | | -| icon | Display icon for Segmented item | ReactNode | - | | -| disabled | Disabled state of segmented item | boolean | false | | -| className | The additional css class | string | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| disabled | Disabled state of segmented item | boolean | false | | +| className | The additional css class | string | - | | +| icon | Display icon for Segmented item | ReactNode | - | | +| label | Display text for Segmented item | ReactNode | - | | +| tooltip | tooltip for Segmented item | string \| [TooltipProps](../tooltip/index.en-US.md#api) | - | | +| value | Value for Segmented item | string \| number | - | | ## Semantic DOM diff --git a/components/segmented/index.tsx b/components/segmented/index.tsx index 798534cd04..9d8ede204a 100644 --- a/components/segmented/index.tsx +++ b/components/segmented/index.tsx @@ -7,6 +7,7 @@ import type { } from '@rc-component/segmented'; import RcSegmented from '@rc-component/segmented'; import useId from '@rc-component/util/lib/hooks/useId'; +import { Tooltip, TooltipProps } from 'antd'; import classNames from 'classnames'; import useOrientation from '../_util/hooks/useOrientation'; @@ -18,9 +19,11 @@ import useStyle from './style'; export type { SegmentedValue } from '@rc-component/segmented'; export type SemanticName = 'root' | 'icon' | 'label' | 'item'; + interface SegmentedLabeledOptionWithoutIcon extends RcSegmentedLabeledOption { label: RcSegmentedLabeledOption['label']; + tooltip?: string | Omit; } interface SegmentedLabeledOptionWithIcon @@ -28,6 +31,7 @@ interface SegmentedLabeledOptionWithIcon label?: RcSegmentedLabeledOption['label']; /** Set icon for Segmented item */ icon: React.ReactNode; + tooltip?: string | Omit; } function isSegmentedLabeledOptionWithIcon( @@ -43,7 +47,7 @@ export type SegmentedLabeledOption = export type SegmentedOptions = (T | SegmentedLabeledOption)[]; export interface SegmentedProps - extends Omit, 'size' | 'options'> { + extends Omit, 'size' | 'options' | 'itemRender'> { rootClassName?: string; options: SegmentedOptions; /** Option to fit width to its parent's width */ @@ -59,7 +63,6 @@ export interface SegmentedProps const InternalSegmented = React.forwardRef((props, ref) => { const defaultName = useId(); - const { prefixCls: customizePrefixCls, className, @@ -151,6 +154,16 @@ const InternalSegmented = React.forwardRef((prop ...style, }; + const itemRender = (node: React.ReactNode, { item }: { item: SegmentedLabeledOption }) => { + if (!item.tooltip) { + return node; + } + + const tooltipProps: TooltipProps = + typeof item.tooltip === 'object' ? item.tooltip : { title: item.tooltip }; + return {node}; + }; + return ( ((prop item: { ...contextStyles.item, ...styles?.item }, label: { ...contextStyles.label, ...styles?.label }, }} + itemRender={itemRender} options={extendedOptions} ref={ref} prefixCls={prefixCls} diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index ca3df294e7..926e0fb71e 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -60,13 +60,14 @@ demo: ### SegmentedItemType -| 属性 | 描述 | 类型 | 默认值 | 版本 | -| --------- | ---------------- | ---------------- | ------ | ---- | -| label | 分段项的显示文本 | ReactNode | - | | -| value | 分段项的值 | string \| number | - | | -| icon | 分段项的显示图标 | ReactNode | - | | -| disabled | 分段项的禁用状态 | boolean | false | | -| className | 自定义类名 | string | - | | +| 属性 | 描述 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| className | 自定义类名 | string | - | | +| disabled | 分段项的禁用状态 | boolean | false | | +| icon | 分段项的显示图标 | ReactNode | - | | +| label | 分段项的显示文本 | ReactNode | - | | +| tooltip | 分段项的工具提示 | string \| [TooltipProps](../tooltip/index.zh-CN.md#api) | - | | +| value | 分段项的值 | string \| number | - | | ## Semantic DOM diff --git a/package.json b/package.json index 243dc7a20f..ba3a1729b3 100644 --- a/package.json +++ b/package.json @@ -133,7 +133,7 @@ "@rc-component/progress": "~1.0.1", "@rc-component/qrcode": "~1.0.0", "@rc-component/resize-observer": "^1.0.0", - "@rc-component/segmented": "~1.1.0", + "@rc-component/segmented": "~1.2.1", "@rc-component/select": "~1.1.2", "@rc-component/steps": "~1.2.1", "@rc-component/switch": "~1.0.0",