refactor: delete defaultprops (#37834)

* refactor: delete defaultprops

* fix: fix

* fix: fix

components/modal/Modal.tsx

@@ -172,12 +172,13 @@ const Modal: React.FC<ModalProps> = props => {
     prefixCls: customizePrefixCls,
     footer,
     visible,
-    open,
+    open = false,
     wrapClassName,
     centered,
     getContainer,
     closeIcon,
     focusTriggerAfterClose = true,
+    width = 520,
     ...restProps
   } = props;
 
@@ -187,7 +188,7 @@ const Modal: React.FC<ModalProps> = props => {
   const defaultFooter = (
     <LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
       {contextLocale => {
-        const { okText, okType, cancelText, confirmLoading } = props;
+        const { okText, okType = 'primary', cancelText, confirmLoading = false } = props;
 
         return (
           <>
@@ -221,6 +222,7 @@ const Modal: React.FC<ModalProps> = props => {
   return (
     <NoFormStyle status override>
       <Dialog
+        width={width}
         {...restProps}
         getContainer={
           getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
@@ -240,11 +242,4 @@ const Modal: React.FC<ModalProps> = props => {
   );
 };
 
-Modal.defaultProps = {
-  width: 520,
-  confirmLoading: false,
-  open: false,
-  okType: 'primary' as LegacyButtonType,
-};
-
 export default Modal;

components/tooltip/index.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import RcTooltip from 'rc-tooltip';
 import type { placements as Placements } from 'rc-tooltip/lib/placements';
 import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
+import type { AlignType } from 'rc-trigger/lib/interface';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
@@ -101,9 +102,12 @@ export interface TooltipPropsWithTitle extends AbstractTooltipProps {
 
 export declare type TooltipProps = TooltipPropsWithTitle | TooltipPropsWithOverlay;
 
-const splitObject = (obj: any, keys: string[]) => {
-  const picked: any = {};
-  const omitted: any = { ...obj };
+const splitObject = <T extends React.CSSProperties>(
+  obj: T,
+  keys: (keyof T)[],
+): Record<'picked' | 'omitted', T> => {
+  const picked: T = {} as T;
+  const omitted: T = { ...obj };
   keys.forEach(key => {
     if (obj && key in obj) {
       picked[key] = obj[key];
@@ -112,6 +116,7 @@ const splitObject = (obj: any, keys: string[]) => {
   });
   return { picked, omitted };
 };
+
 const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
 
 // Fix Tooltip won't hide at disabled button
@@ -136,13 +141,13 @@ function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixC
       'display',
       'zIndex',
     ]);
-    const spanStyle = {
+    const spanStyle: React.CSSProperties = {
       display: 'inline-block', // default inline-block is important
       ...picked,
       cursor: 'not-allowed',
-      width: element.props.block ? '100%' : null,
+      width: element.props.block ? '100%' : undefined,
     };
-    const buttonStyle = {
+    const buttonStyle: React.CSSProperties = {
       ...omitted,
       pointerEvents: 'none',
     };
@@ -205,7 +210,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   };
 
   const getTooltipPlacements = () => {
-    const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = props;
+    const { builtinPlacements, arrowPointAtCenter = false, autoAdjustOverflow = true } = props;
     return (
       builtinPlacements ||
       getPlacements({
@@ -216,32 +221,31 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   };
 
   // 动态设置动画点
-  const onPopupAlign = (domNode: HTMLElement, align: any) => {
-    const placements: any = getTooltipPlacements();
+  const onPopupAlign = (domNode: HTMLElement, align: AlignType) => {
+    const placements = getTooltipPlacements();
     // 当前返回的位置
     const placement = Object.keys(placements).find(
       key =>
-        placements[key].points[0] === align.points[0] &&
-        placements[key].points[1] === align.points[1],
+        placements[key].points![0] === align.points?.[0] &&
+        placements[key].points![1] === align.points?.[1],
     );
     if (!placement) {
       return;
     }
     // 根据当前坐标设置动画点
     const rect = domNode.getBoundingClientRect();
-    const transformOrigin = {
-      top: '50%',
-      left: '50%',
-    };
-    if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
-      transformOrigin.top = `${rect.height - align.offset[1]}px`;
-    } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
-      transformOrigin.top = `${-align.offset[1]}px`;
+
+    const transformOrigin = { top: '50%', left: '50%' };
+
+    if (['top', 'Bottom'].includes(placement)) {
+      transformOrigin.top = `${rect.height - align.offset![1]}px`;
+    } else if (['Top', 'bottom'].includes(placement)) {
+      transformOrigin.top = `${-align.offset![1]}px`;
     }
-    if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
-      transformOrigin.left = `${rect.width - align.offset[0]}px`;
-    } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
-      transformOrigin.left = `${-align.offset[0]}px`;
+    if (['left', 'Right'].includes(placement)) {
+      transformOrigin.left = `${rect.width - align.offset![0]}px`;
+    } else if (['right', 'Left'].includes(placement)) {
+      transformOrigin.left = `${-align.offset![0]}px`;
     }
     domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
   };
@@ -254,7 +258,13 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
     return overlay || title || '';
   };
 
-  const { getPopupContainer, ...otherProps } = props;
+  const {
+    getPopupContainer,
+    placement = 'top',
+    mouseEnterDelay = 0.1,
+    mouseLeaveDelay = 0.1,
+    ...otherProps
+  } = props;
 
   const {
     prefixCls: customizePrefixCls,
@@ -292,7 +302,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   });
 
   let formattedOverlayInnerStyle = overlayInnerStyle;
-  let arrowContentStyle;
+  let arrowContentStyle: React.CSSProperties = {};
   if (color && !PresetColorRegex.test(color)) {
     formattedOverlayInnerStyle = { ...overlayInnerStyle, background: color };
     // @ts-ignore
@@ -302,6 +312,9 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   return (
     <RcTooltip
       {...otherProps}
+      placement={placement}
+      mouseEnterDelay={mouseEnterDelay}
+      mouseLeaveDelay={mouseLeaveDelay}
       prefixCls={prefixCls}
       overlayClassName={customOverlayClassName}
       getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
@@ -327,12 +340,4 @@ if (process.env.NODE_ENV !== 'production') {
   Tooltip.displayName = 'Tooltip';
 }
 
-Tooltip.defaultProps = {
-  placement: 'top' as TooltipPlacement,
-  mouseEnterDelay: 0.1,
-  mouseLeaveDelay: 0.1,
-  arrowPointAtCenter: false,
-  autoAdjustOverflow: true,
-};
-
 export default Tooltip;

components/tree/Tree.tsx

@@ -167,18 +167,26 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     className,
-    showIcon,
+    showIcon = false,
     showLine,
     switcherIcon,
-    blockNode,
+    blockNode = false,
     children,
-    checkable,
-    selectable,
+    checkable = false,
+    selectable = true,
     draggable,
+    motion = { ...collapseMotion, motionAppear: false },
   } = props;
+
   const prefixCls = getPrefixCls('tree', customizePrefixCls);
+
   const newProps = {
     ...props,
+    checkable,
+    selectable,
+    showIcon,
+    motion,
+    blockNode,
     showLine: Boolean(showLine),
     dropIndicatorRender,
   };
@@ -193,12 +201,11 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
       case 'function':
         mergedDraggable.nodeDraggable = draggable;
         break;
-
       case 'object':
         mergedDraggable = { ...draggable };
         break;
-
       default:
+        break;
       // Do nothing
     }
 
@@ -231,7 +238,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
       switcherIcon={(nodeProps: AntTreeNodeProps) =>
         renderSwitcherIcon(prefixCls, switcherIcon, showLine, nodeProps)
       }
-      draggable={draggableConfig as any}
+      draggable={draggableConfig}
     >
       {children}
     </RcTree>
@@ -242,15 +249,4 @@ Tree.TreeNode = TreeNode;
 
 Tree.DirectoryTree = DirectoryTree;
 
-Tree.defaultProps = {
-  checkable: false,
-  selectable: true,
-  showIcon: false,
-  motion: {
-    ...collapseMotion,
-    motionAppear: false,
-  },
-  blockNode: false,
-};
-
 export default Tree;