chore: code style optimize (#43719)

* chore: private purePanel

* fix: type error

* fix: type

components/drawer/index.tsx

@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import type { DrawerProps as RcDrawerProps } from 'rc-drawer';
 import RcDrawer from 'rc-drawer';
+import type { Placement } from 'rc-drawer/lib/Drawer';
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
 import { getTransitionName } from '../_util/motion';
@@ -40,7 +41,9 @@ export interface DrawerProps extends RcDrawerProps, Omit<DrawerPanelProps, 'pref
 
 const defaultPushState: PushState = { distance: 180 };
 
-function Drawer(props: DrawerProps) {
+const Drawer: React.FC<DrawerProps> & {
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+} = (props) => {
   const {
     rootClassName,
     width,
@@ -107,8 +110,12 @@ function Drawer(props: DrawerProps) {
   }
 
   // ============================ Size ============================
-  const mergedWidth = React.useMemo(() => width ?? (size === 'large' ? 736 : 378), [width, size]);
-  const mergedHeight = React.useMemo(
+  const mergedWidth = React.useMemo<string | number>(
+    () => width ?? (size === 'large' ? 736 : 378),
+    [width, size],
+  );
+
+  const mergedHeight = React.useMemo<string | number>(
     () => height ?? (size === 'large' ? 736 : 378),
     [height, size],
   );
@@ -156,24 +163,24 @@ function Drawer(props: DrawerProps) {
       </NoFormStyle>
     </NoCompactStyle>,
   );
-}
+};
 
-if (process.env.NODE_ENV !== 'production') {
-  Drawer.displayName = 'Drawer';
-}
-
-function PurePanel({
-  prefixCls: customizePrefixCls,
-  style,
-  className,
-  placement = 'right',
-  ...restProps
-}: Omit<DrawerPanelProps, 'prefixCls' | 'drawerStyle'> & {
+interface PurePanelInterface {
   prefixCls?: string;
   style?: React.CSSProperties;
   className?: string;
-  placement?: DrawerProps['placement'];
-}) {
+  placement?: Placement;
+}
+
+/** @private Internal Component. Do not use in your production. */
+const PurePanel: React.FC<Omit<DrawerPanelProps, 'prefixCls'> & PurePanelInterface> = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    style,
+    className,
+    placement = 'right',
+    ...restProps
+  } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
@@ -181,22 +188,25 @@ function PurePanel({
   // Style
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}-pure`,
+    `${prefixCls}-${placement}`,
+    hashId,
+    className,
+  );
+
   return wrapSSR(
-    <div
-      className={classNames(
-        prefixCls,
-        `${prefixCls}-pure`,
-        `${prefixCls}-${placement}`,
-        hashId,
-        className,
-      )}
-      style={style}
-    >
+    <div className={cls} style={style}>
       <DrawerPanel prefixCls={prefixCls} {...restProps} />
     </div>,
   );
-}
+};
 
 Drawer._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
 
+if (process.env.NODE_ENV !== 'production') {
+  Drawer.displayName = 'Drawer';
+}
+
 export default Drawer;

components/float-button/PurePanel.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-array-index-key */
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import BackTop from './BackTop';
 import FloatButton, { floatButtonPrefixCls } from './FloatButton';
 import FloatButtonGroup from './FloatButtonGroup';
-import BackTop from './BackTop';
-import type { FloatButtonProps, FloatButtonGroupProps } from './interface';
-import { ConfigContext } from '../config-provider';
+import type { FloatButtonGroupProps, FloatButtonProps } from './interface';
 
 export interface PureFloatButtonProps extends Omit<FloatButtonProps, 'target'> {
   backTop?: boolean;
@@ -21,7 +21,8 @@ export interface PurePanelProps
 const PureFloatButton: React.FC<PureFloatButtonProps> = ({ backTop, ...props }) =>
   backTop ? <BackTop {...props} visibilityHeight={0} /> : <FloatButton {...props} />;
 
-function PurePanel({ className, items, ...props }: PurePanelProps) {
+/** @private Internal Component. Do not use in your production. */
+const PurePanel: React.FC<PurePanelProps> = ({ className, items, ...props }) => {
   const { prefixCls: customizePrefixCls } = props;
 
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -39,6 +40,6 @@ function PurePanel({ className, items, ...props }: PurePanelProps) {
   }
 
   return <PureFloatButton className={classNames(className, pureCls)} {...props} />;
-}
+};
 
-export default React.memo(PurePanel);
+export default PurePanel;

components/input-number/index.tsx

@@ -183,16 +183,9 @@ const TypedInputNumber = InputNumber as unknown as (<T extends ValueType = Value
   _InternalPanelDoNotUseOrYouWillBeFired: typeof PureInputNumber;
 };
 
-const PureInputNumber = (props: InputNumberProps<any>) => (
-  <ConfigProvider
-    theme={{
-      components: {
-        InputNumber: {
-          handleVisible: true,
-        },
-      },
-    }}
-  >
+/** @private Internal Component. Do not use in your production. */
+const PureInputNumber: React.FC<InputNumberProps> = (props) => (
+  <ConfigProvider theme={{ components: { InputNumber: { handleVisible: true } } }}>
     <InputNumber {...props} />
   </ConfigProvider>
 );

components/tooltip/PurePanel.tsx

@@ -3,15 +3,13 @@ import { Popup } from 'rc-tooltip';
 import * as React from 'react';
 import type { TooltipProps } from '.';
 import { ConfigContext } from '../config-provider';
-
 import useStyle from './style';
 import { parseColor } from './util';
 
 export interface PurePanelProps extends Omit<TooltipProps, 'children'> {}
 
-// ant-tooltip css-dev-only-do-not-override-w2s56n ant-tooltip-placement-top  ant-tooltip-hidden
-
-export default function PurePanel(props: PurePanelProps) {
+/** @private Internal Component. Do not use in your production. */
+const PurePanel: React.FC<PurePanelProps> = (props) => {
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -27,21 +25,25 @@ export default function PurePanel(props: PurePanelProps) {
 
   // Color
   const colorInfo = parseColor(prefixCls, color);
-  const formattedOverlayInnerStyle = { ...overlayInnerStyle, ...colorInfo.overlayStyle };
+
   const arrowContentStyle = colorInfo.arrowStyle;
 
+  const formattedOverlayInnerStyle: React.CSSProperties = {
+    ...overlayInnerStyle,
+    ...colorInfo.overlayStyle,
+  };
+
+  const cls = classNames(
+    hashId,
+    prefixCls,
+    `${prefixCls}-pure`,
+    `${prefixCls}-placement-${placement}`,
+    className,
+    colorInfo.className,
+  );
+
   return wrapSSR(
-    <div
-      className={classNames(
-        hashId,
-        prefixCls,
-        `${prefixCls}-pure`,
-        `${prefixCls}-placement-${placement}`,
-        className,
-        colorInfo.className,
-      )}
-      style={arrowContentStyle}
-    >
+    <div className={cls} style={arrowContentStyle}>
       <div className={`${prefixCls}-arrow`} />
       <Popup
         {...props}
@@ -53,4 +55,6 @@ export default function PurePanel(props: PurePanelProps) {
       </Popup>
     </div>,
   );
-}
+};
+
+export default PurePanel;