diff --git a/components/select/index.tsx b/components/select/index.tsx index 21bd4345aa..269d6e7838 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -6,21 +6,21 @@ import type { OptionProps } from 'rc-select/lib/Option'; import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; -import { ConfigContext } from '../config-provider'; -import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty'; -import DisabledContext from '../config-provider/DisabledContext'; -import type { SizeType } from '../config-provider/SizeContext'; -import SizeContext from '../config-provider/SizeContext'; -import { FormItemInputContext } from '../form/context'; import type { SelectCommonPlacement } from '../_util/motion'; import { getTransitionDirection, getTransitionName } from '../_util/motion'; import type { InputStatus } from '../_util/statusUtils'; import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; +import { ConfigContext } from '../config-provider'; +import DisabledContext from '../config-provider/DisabledContext'; +import type { SizeType } from '../config-provider/SizeContext'; +import SizeContext from '../config-provider/SizeContext'; +import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty'; +import { FormItemInputContext } from '../form/context'; import getIcons from './utils/iconUtil'; -import { useCompactItemContext } from '../space/Compact'; import genPurePanel from '../_util/PurePanel'; import warning from '../_util/warning'; +import { useCompactItemContext } from '../space/Compact'; import useStyle from './style'; import useShowArrow from './useShowArrow'; @@ -182,12 +182,12 @@ const InternalSelect = { + const memoPlacement = React.useMemo(() => { if (placement !== undefined) { return placement; } return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - }; + }, [placement, direction]); // ====================== Warning ====================== if (process.env.NODE_ENV !== 'production') { @@ -213,9 +213,9 @@ const InternalSelect = ((props, ref) => { afterVisibleChange, destroyTooltipOnHide, arrow = true, + title, + overlay, + builtinPlacements, + arrowPointAtCenter = false, + autoAdjustOverflow = true, } = props; const mergedShowArrow = !!arrow; @@ -261,29 +267,22 @@ const Tooltip = React.forwardRef((props, ref) => { defaultValue: props.defaultOpen ?? props.defaultVisible, }); - const isNoTitle = () => { - const { title, overlay } = props; - return !title && !overlay && title !== 0; // overlay for old version compatibility - }; + const noTitle = !title && !overlay && title !== 0; // overlay for old version compatibility const onOpenChange = (vis: boolean) => { - setOpen(isNoTitle() ? false : vis); - - if (!isNoTitle()) { + setOpen(noTitle ? false : vis); + if (!noTitle) { props.onOpenChange?.(vis); props.onVisibleChange?.(vis); } }; - const getTooltipPlacements = () => { - const { builtinPlacements, arrowPointAtCenter = false, autoAdjustOverflow = true } = props; - + const tooltipPlacements = React.useMemo(() => { let mergedArrowPointAtCenter = arrowPointAtCenter; if (typeof arrow === 'object') { mergedArrowPointAtCenter = arrow.pointAtCenter ?? arrow.arrowPointAtCenter ?? arrowPointAtCenter; } - return ( builtinPlacements || getPlacements({ @@ -294,16 +293,15 @@ const Tooltip = React.forwardRef((props, ref) => { offset: token.marginXXS, }) ); - }; + }, [arrowPointAtCenter, arrow, builtinPlacements, token]); // 动态设置动画点 const onPopupAlign = (domNode: HTMLElement, align: AlignType) => { - const placements = getTooltipPlacements(); // 当前返回的位置 - const placement = Object.keys(placements).find( + const placement = Object.keys(tooltipPlacements).find( (key) => - placements[key].points![0] === align.points?.[0] && - placements[key].points![1] === align.points?.[1], + tooltipPlacements[key].points![0] === align.points?.[0] && + tooltipPlacements[key].points![1] === align.points?.[1], ); if (placement) { @@ -326,13 +324,12 @@ const Tooltip = React.forwardRef((props, ref) => { } }; - const getOverlay = () => { - const { title, overlay } = props; + const memoOverlay = React.useMemo(() => { if (title === 0) { return title; } return overlay || title || ''; - }; + }, [overlay, title]); const { getPopupContainer, @@ -351,7 +348,7 @@ const Tooltip = React.forwardRef((props, ref) => { let tempOpen = open; // Hide tooltip when there is no title - if (!('open' in props) && !('visible' in props) && isNoTitle()) { + if (!('open' in props) && !('visible' in props) && noTitle) { tempOpen = false; } @@ -395,14 +392,11 @@ const Tooltip = React.forwardRef((props, ref) => { mouseLeaveDelay={mouseLeaveDelay} prefixCls={prefixCls} overlayClassName={customOverlayClassName} - overlayStyle={{ - ...arrowContentStyle, - ...overlayStyle, - }} + overlayStyle={{ ...arrowContentStyle, ...overlayStyle }} getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer} ref={tooltipRef} - builtinPlacements={getTooltipPlacements()} - overlay={getOverlay()} + builtinPlacements={tooltipPlacements} + overlay={memoOverlay} visible={tempOpen} onVisibleChange={onOpenChange} afterVisibleChange={afterOpenChange ?? afterVisibleChange}