refactor: remove useless structure (#502)

* refactor: remove useless structure

* chore: align the case

* chore: clean up

* chore: eng trans

* test: update test

* fix: ts

Author: zombieJ

docs/examples/formError.tsx

@@ -34,7 +34,7 @@ class Test extends Component {
             visible={this.state.visible}
             motion={{ motionName: 'rc-tooltip-zoom' }}
             trigger={[]}
-            overlayStyle={{ zIndex: 1000 }}
+            styles={{ root: { zIndex: 1000 } }}
             overlay={<span>required!</span>}
           >
             <input onChange={this.handleChange} />

docs/examples/placement.tsx

@@ -94,8 +94,8 @@ const Test: React.FC = () => (
       <h5>Debug Usage</h5>
       <Popup
         prefixCls="rc-tooltip"
-        className="rc-tooltip-placement-top"
-        style={{ display: 'inline-block', position: 'relative' }}
+        classNames={{ body: 'rc-tooltip-placement-top' }}
+        styles={{ body: { display: 'inline-block', position: 'relative' } }}
       >
         Test
       </Popup>

docs/examples/point.tsx

@@ -30,7 +30,7 @@ const Test: React.FC = () => {
           <Tooltip
             placement="top"
             overlay={text}
-            overlayInnerStyle={{ width: 300, height: 50 }}
+            styles={{ body: { width: 300, height: 50 } }}
             popupVisible
             arrowContent={<div className="rc-tooltip-arrow-inner" />}
           >

docs/examples/simple.tsx

@@ -217,7 +217,7 @@ class Test extends Component<any, TestState> {
               offset: [this.state.offsetX, this.state.offsetY],
             }}
             motion={{ motionName: this.state.transitionName }}
-            overlayInnerStyle={state.overlayInnerStyle}
+            styles={{ body: state.overlayInnerStyle }}
           >
             <div style={{ height: 100, width: 100, border: '1px solid red' }}>trigger</div>
           </Tooltip>

package.json

@@ -41,7 +41,7 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.6.0",
+    "@rc-component/trigger": "^3.6.4",
     "@rc-component/util": "^1.3.0",
     "classnames": "^2.3.1"
   },

src/Popup.tsx

@@ -1,37 +1,26 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
+import type { TooltipProps } from './Tooltip';
 
 export interface ContentProps {
   prefixCls?: string;
   children: (() => React.ReactNode) | React.ReactNode;
   id?: string;
-  overlayInnerStyle?: React.CSSProperties;
-  className?: string;
-  style?: React.CSSProperties;
-  bodyClassName?: string;
+  classNames?: TooltipProps['classNames'];
+  styles?: TooltipProps['styles'];
 }
 
 const Popup: React.FC<ContentProps> = (props) => {
-  const {
-    children,
-    prefixCls,
-    id,
-    overlayInnerStyle: innerStyle,
-    bodyClassName,
-    className,
-    style,
-  } = props;
+  const { children, prefixCls, id, classNames, styles } = props;
 
   return (
-    <div className={classNames(`${prefixCls}-content`, className)} style={style}>
-      <div
-        className={classNames(`${prefixCls}-inner`, bodyClassName)}
-        id={id}
-        role="tooltip"
-        style={innerStyle}
-      >
-        {typeof children === 'function' ? children() : children}
-      </div>
+    <div
+      id={id}
+      className={cls(`${prefixCls}-body`, classNames?.body)}
+      style={styles?.body}
+      role="tooltip"
+    >
+      {typeof children === 'function' ? children() : children}
     </div>
   );
 };

src/Tooltip.tsx

@@ -2,12 +2,14 @@ import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger'
 import Trigger from '@rc-component/trigger';
 import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface';
 import useId from '@rc-component/util/lib/hooks/useId';
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import { useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
 
+export type SemanticName = 'root' | 'arrow' | 'body';
+
 export interface TooltipProps
   extends Pick<
     TriggerProps,
@@ -21,56 +23,46 @@ export interface TooltipProps
     | 'forceRender'
     | 'popupVisible'
   > {
+  // Style
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+
+  /** Config popup motion */
+  motion?: TriggerProps['popupMotion'];
+
+  // Rest
   trigger?: ActionType | ActionType[];
   defaultVisible?: boolean;
   visible?: boolean;
   placement?: string;
-  /** Config popup motion */
-  motion?: TriggerProps['popupMotion'];
+
   onVisibleChange?: (visible: boolean) => void;
   afterVisibleChange?: (visible: boolean) => void;
   overlay: (() => React.ReactNode) | React.ReactNode;
-  /** @deprecated Please use `styles={{ root: {} }}` */
-  overlayStyle?: React.CSSProperties;
-  /** @deprecated Please use `classNames={{ root: '' }}` */
-  overlayClassName?: string;
+
   getTooltipContainer?: (node: HTMLElement) => HTMLElement;
   destroyOnHidden?: boolean;
   align?: AlignType;
   showArrow?: boolean | ArrowType;
   arrowContent?: React.ReactNode;
   id?: string;
-  /** @deprecated Please use `styles={{ body: {} }}` */
-  overlayInnerStyle?: React.CSSProperties;
+
   zIndex?: number;
-  styles?: TooltipStyles;
-  classNames?: TooltipClassNames;
+
   /**
    * Configures Tooltip to reuse the background for transition usage.
    * This is an experimental API and may not be stable.
    */
   unique?: TriggerProps['unique'];
 }
 
-export interface TooltipStyles {
-  root?: React.CSSProperties;
-  body?: React.CSSProperties;
-}
-
-export interface TooltipClassNames {
-  root?: string;
-  body?: string;
-}
-
 export interface TooltipRef extends TriggerRef {}
 
 const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
   const {
-    overlayClassName,
     trigger = ['hover'],
     mouseEnterDelay = 0,
     mouseLeaveDelay = 0.1,
-    overlayStyle,
     prefixCls = 'rc-tooltip',
     children,
     onVisibleChange,
@@ -81,13 +73,12 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     destroyOnHidden = false,
     defaultVisible,
     getTooltipContainer,
-    overlayInnerStyle,
     arrowContent,
     overlay,
     id,
     showArrow = true,
-    classNames: tooltipClassNames,
-    styles: tooltipStyles,
+    classNames,
+    styles,
     ...restProps
   } = props;
 
@@ -102,18 +93,26 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     extraProps.popupVisible = props.visible;
   }
 
-  const getPopupElement = () => (
-    <Popup
-      key="content"
-      prefixCls={prefixCls}
-      id={mergedId}
-      bodyClassName={tooltipClassNames?.body}
-      overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.body }}
-    >
-      {overlay}
-    </Popup>
-  );
+  // ========================= Arrow ==========================
+  // Process arrow configuration
+  const mergedArrow = React.useMemo(() => {
+    if (!showArrow) {
+      return false;
+    }
+
+    // Convert true to object for unified processing
+    const arrowConfig = showArrow === true ? {} : showArrow;
+
+    // Apply semantic styles with unified logic
+    return {
+      ...arrowConfig,
+      className: cls(arrowConfig.className, classNames?.arrow),
+      style: { ...arrowConfig.style, ...styles?.arrow },
+      content: arrowConfig.content ?? arrowContent,
+    };
+  }, [showArrow, classNames?.arrow, styles?.arrow, arrowContent]);
 
+  // ======================== Children ========================
   const getChildren = () => {
     const child = React.Children.only(children);
     const originalProps = child?.props || {};
@@ -124,11 +123,22 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     return React.cloneElement<any>(children, childProps) as any;
   };
 
+  // ========================= Render =========================
   return (
     <Trigger
-      popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
+      popupClassName={classNames?.root}
       prefixCls={prefixCls}
-      popup={getPopupElement}
+      popup={
+        <Popup
+          key="content"
+          prefixCls={prefixCls}
+          id={mergedId}
+          classNames={classNames}
+          styles={styles}
+        >
+          {overlay}
+        </Popup>
+      }
       action={trigger}
       builtinPlacements={placements}
       popupPlacement={placement}
@@ -141,9 +151,9 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       defaultPopupVisible={defaultVisible}
       autoDestroy={destroyOnHidden}
       mouseLeaveDelay={mouseLeaveDelay}
-      popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
+      popupStyle={styles?.root}
       mouseEnterDelay={mouseEnterDelay}
-      arrow={showArrow}
+      arrow={mergedArrow}
       {...extraProps}
     >
       {getChildren()}