feat(antd): add form-item tooltip props support (#4144)

Co-authored-by: xiaosi <[email protected]>

package.json

@@ -66,6 +66,7 @@
     "@types/node": "^12.6.8",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/react-is": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.8.2",
     "@umijs/plugin-sass": "^1.1.1",

packages/antd/src/form-item/index.tsx

@@ -4,6 +4,7 @@ import { usePrefixCls, pickDataProps } from '../__builtins__'
 import { isVoidField } from '@formily/core'
 import { connect, mapProps } from '@formily/react'
 import { useFormLayout, FormLayoutShallowContext } from '../form-layout'
+import { isElement } from 'react-is'
 import { Tooltip, Popover, ConfigProvider } from 'antd'
 import {
   QuestionCircleOutlined,
@@ -18,7 +19,7 @@ export interface IFormItemProps {
   prefixCls?: string
   label?: React.ReactNode
   colon?: boolean
-  tooltip?: React.ReactNode
+  tooltip?: React.ReactNode | React.ComponentProps<typeof Tooltip>
   tooltipIcon?: React.ReactNode
   layout?: 'vertical' | 'horizontal' | 'inline'
   tooltipLayout?: 'icon' | 'text'
@@ -55,6 +56,12 @@ type ComposeFormItem = React.FC<React.PropsWithChildren<IFormItemProps>> & {
   BaseItem?: React.FC<React.PropsWithChildren<IFormItemProps>>
 }
 
+const isTooltipProps = (
+  tooltip: React.ReactNode | React.ComponentProps<typeof Tooltip>
+): tooltip is React.ComponentProps<typeof Tooltip> => {
+  return !isElement(tooltip)
+}
+
 const useFormItemLayout = (props: IFormItemProps) => {
   const layout = useFormLayout()
   const layoutType = props.layout ?? layout.layout ?? 'horizontal'
@@ -219,16 +226,22 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = ({
 
   const gridStyles: React.CSSProperties = {}
 
+  const tooltipNode = isTooltipProps(tooltip) ? (
+    <Tooltip {...tooltip}></Tooltip>
+  ) : (
+    tooltip
+  )
+
   const getOverflowTooltip = () => {
     if (overflow) {
       return (
         <div>
           <div>{label}</div>
-          <div>{tooltip}</div>
+          <div>{tooltipNode}</div>
         </div>
       )
     }
-    return tooltip
+    return tooltipNode
   }
 
   const renderLabelText = () => {
@@ -266,7 +279,11 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = ({
     if (tooltip && tooltipLayout === 'icon' && !overflow) {
       return (
         <span className={`${prefixCls}-label-tooltip-icon`}>
-          <Tooltip placement="top" align={{ offset: [0, 2] }} title={tooltip}>
+          <Tooltip
+            placement="top"
+            align={{ offset: [0, 2] }}
+            title={tooltipNode}
+          >
             {tooltipIcon}
           </Tooltip>
         </span>

yarn.lock

@@ -3373,6 +3373,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-is@^18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.3.0.tgz#07008aecacf9c788f68e72eecca43701d7e6eefb"
+  integrity sha512-KZJpHUkAdzyKj/kUHJDc6N7KyidftICufJfOFpiG6haL/BDQNQt5i4n1XDUL/nDZAtGLHDSWRYpLzKTAKSvX6w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/[email protected]":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@types/react-router-config/-/react-router-config-5.0.2.tgz#4d3b52e71ed363a1976a12321e67b09a99ad6d10"