diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 063b1e34c3..efc66a7e38 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -172,12 +172,13 @@ const Modal: React.FC = 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 = props => { const defaultFooter = ( {contextLocale => { - const { okText, okType, cancelText, confirmLoading } = props; + const { okText, okType = 'primary', cancelText, confirmLoading = false } = props; return ( <> @@ -221,6 +222,7 @@ const Modal: React.FC = props => { return ( = props => { ); }; -Modal.defaultProps = { - width: 520, - confirmLoading: false, - open: false, - okType: 'primary' as LegacyButtonType, -}; - export default Modal; diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index e957f2817c..8dcc973b15 100644 --- a/components/tooltip/index.tsx +++ b/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 = ( + 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, 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((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((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((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((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((props, ref) => { return ( ((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((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((props, ref) => { switcherIcon={(nodeProps: AntTreeNodeProps) => renderSwitcherIcon(prefixCls, switcherIcon, showLine, nodeProps) } - draggable={draggableConfig as any} + draggable={draggableConfig} > {children} @@ -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;