feat(float-button): support TooltipProps#53138
Conversation
(cherry picked from commit fb3d131beea52655e780e462eae08662b08095db)
(cherry picked from commit 36b39f5e7bf8ace89c705e7ece22549bc623f9e3)
|
|
👁 Visual Regression Report for PR #53138 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
|
|
WalkthroughThis pull request introduces a new feature to the Changes
|
| warning( | ||
| false, | ||
| 'usage', | ||
| 'The `tooltip` value is `0`(number). If you want to show `0`, please use string `"0"` instead.', |
There was a problem hiding this comment.
The warning message for tooltip value being 0 is a good addition to prevent potential confusion. However, ensure that this warning does not interfere with other functionalities or cause unnecessary noise in the console.
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 14 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
| if ('tooltip' in props) { | ||
| buttonNode = ( | ||
| <Tooltip title={tooltip} placement={direction === 'rtl' ? 'right' : 'left'}> | ||
| {buttonNode} | ||
| </Tooltip> | ||
| ); | ||
| // ============================ Tooltip ============================ | ||
| let tooltipProps: TooltipProps | null = null; | ||
| /** | ||
| * 理论上直接 `const tooltipProps = convertToTooltipProps(tooltip);` 即可。同 Form.Item 的 tooltip 逻辑。 | ||
| * 但在 https://github.com/ant-design/ant-design/pull/39425 存在 tooltip 为 0 的 unit test，所以这里做了特殊处理。 | ||
| */ | ||
| if (tooltip === 0) { | ||
| tooltipProps = { title: tooltip }; | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| const warning = devUseWarning('FloatButton'); | ||
| warning( | ||
| false, | ||
| 'usage', | ||
| 'The `tooltip` value is `0`(number). If you want to show `0`, please use string `"0"` instead.', | ||
| ); | ||
| } | ||
| } else { | ||
| tooltipProps = convertToTooltipProps(tooltip); | ||
| } | ||
|
|
||
| if (tooltipProps) { | ||
| buttonNode = <Tooltip {...tooltipProps}>{buttonNode}</Tooltip>; |
There was a problem hiding this comment.
这是第一版逻辑
if ('tooltip' in props) {
- buttonNode = (
- <Tooltip title={tooltip} placement={direction === 'rtl' ? 'right' : 'left'}>
- {buttonNode}
- </Tooltip>
- );
+ let tooltipProps: TooltipProps = {
+ placement: direction === 'rtl' ? 'right' : 'left',
+ };
+
+ if (typeof tooltip === 'object' && tooltip !== null) {
+ if (isValidElement(tooltip)) {
+ tooltipProps.title = tooltip;
+ } else {
+ tooltipProps = { ...tooltipProps, ...tooltip };
+ }
+ } else if (tooltip !== undefined) {
+ tooltipProps.title = tooltip;
+ }
+
+ buttonNode = <Tooltip {...tooltipProps}>{buttonNode}</Tooltip>;
}后面想了一下 Form.Item 也有类似的处理，想着复用一下。 但是 #39425 有一个 number 0 的 unit test case。
所以，这里啰嗦了一句，给开发者一个 usage warin，然后在 v7 可以考虑删除 number 0 的 case。
| warning( | ||
| false, | ||
| 'usage', | ||
| 'The `tooltip` value is `0`(number). If you want to show `0`, please use string `"0"` instead.', |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature #53138 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 769 770 +1
Lines 13880 13880
Branches 3640 3639 -1
=========================================
Hits 13880 13880 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
fix #52998
💡 Background and Solution
📝 Change Log
<FloatButton />supports tooltip props