From c535b54adc8a6255d07cc599ccf1fa510448fac7 Mon Sep 17 00:00:00 2001 From: Lu Khei Chong Date: Fri, 13 Dec 2024 11:27:40 +0800 Subject: [PATCH] fix(Tooltip): warnings pop up due to arrowProps passed into TooltipBox solution is to clear all arrowProps --- src/Overlay/Overlay.tsx | 15 +++------------ src/Popover/Popover.tsx | 18 ------------------ src/Tooltip/TooltipBox.tsx | 13 ------------- tests/Popover/Popover.test.tsx | 25 ------------------------- 4 files changed, 3 insertions(+), 68 deletions(-) diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx index 4ec173a4..bf8a02b9 100644 --- a/src/Overlay/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -4,7 +4,6 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import BaseOverlay, { OverlayProps as BaseOverlayProps, - OverlayArrowProps, } from '@restart/ui/Overlay'; //@ts-ignore import { componentOrElement, elementType } from 'prop-types-extra'; @@ -19,9 +18,6 @@ export interface OverlayInjectedProps { ref: React.RefCallback; style: React.CSSProperties; 'aria-labelledby'?: string; - - arrowProps: Partial; - show: boolean; placement: Placement | undefined; popper: { @@ -149,13 +145,10 @@ const defaultProps: Partial = { placement: 'top', }; -function wrapRefs(props: any, arrowProps : any) { +function wrapRefs(props: any) { const { ref } = props; - const { ref: aRef } = arrowProps; props.ref = ref.__wrapped || (ref.__wrapped = (r:any) => ref(safeFindDOMNode(r))); - arrowProps.ref = - aRef.__wrapped || (aRef.__wrapped = (r:any) => aRef(safeFindDOMNode(r))); } const Overlay = React.forwardRef( @@ -182,8 +175,8 @@ const Overlay = React.forwardRef( //@ts-ignore transition={actualTransition} > - {(overlayProps, { arrowProps, popper: popperObj, show }) => { - wrapRefs(overlayProps, arrowProps); + {(overlayProps, { popper: popperObj, show }) => { + wrapRefs(overlayProps); // Need to get placement from popper object, handling case when overlay is flipped using 'flip' prop const updatedPlacement = popperObj?.placement; const popper = Object.assign(popperRef.current, { @@ -201,13 +194,11 @@ const Overlay = React.forwardRef( show, ...(!transition && show && { className: 'show' }), popper, - arrowProps, }); return React.cloneElement(overlay as React.ReactElement, { ...overlayProps, placement: updatedPlacement, - arrowProps, popper, className: classNames( (overlay as React.ReactElement).props.className, diff --git a/src/Popover/Popover.tsx b/src/Popover/Popover.tsx index bb4105ce..9b3783a1 100644 --- a/src/Popover/Popover.tsx +++ b/src/Popover/Popover.tsx @@ -1,6 +1,5 @@ import classNames from 'classnames'; import * as React from 'react'; -import { OverlayArrowProps } from '@restart/ui/Overlay'; import { useBootstrapPrefix, useIsRTL } from '../ThemeProvider/ThemeProvider'; import PopoverHeader from './PopoverHeader'; import PopoverBody from './PopoverBody'; @@ -13,11 +12,9 @@ export interface PopoverProps BsPrefixProps { placement?: Placement; title?: string; - arrowProps?: Partial; body?: boolean; popper?: any; show?: boolean; - hasArrow?: boolean; } const propTypes = { @@ -55,17 +52,6 @@ const propTypes = { 'left', 'left-start', ]), - - /** - * An Overlay injected set of props for positioning the popover arrow. - * - * > This is generally provided by the `Overlay` component positioning the popover - */ - arrowProps: PropTypes.shape({ - ref: PropTypes.any, - style: PropTypes.object, - }), - /** * When this prop is set, it creates a Popover with a Popover.Body inside * passing the children directly to it @@ -77,7 +63,6 @@ const propTypes = { /** @private */ show: PropTypes.bool, - hasArrow: PropTypes.bool, }; const defaultProps: Partial = { @@ -93,8 +78,6 @@ const Popover = React.forwardRef( style, children, body, - arrowProps, - hasArrow = false, popper: _, show: _1, ...props @@ -119,7 +102,6 @@ const Popover = React.forwardRef( )} {...props} > - {hasArrow &&
} <> {children}
); diff --git a/src/Tooltip/TooltipBox.tsx b/src/Tooltip/TooltipBox.tsx index ecc1c05c..aff6894e 100644 --- a/src/Tooltip/TooltipBox.tsx +++ b/src/Tooltip/TooltipBox.tsx @@ -48,19 +48,6 @@ const propTypes = { 'left', 'left-start', ]), - - /** - * An Overlay injected set of props for positioning the tooltip arrow. - * - * > This is generally provided by the `Overlay` component positioning the tooltip - * - * @type {{ ref: ReactRef, style: Object }} - */ - arrowProps: PropTypes.shape({ - ref: PropTypes.any, - style: PropTypes.object, - }), - /** @private */ popper: PropTypes.object, diff --git a/tests/Popover/Popover.test.tsx b/tests/Popover/Popover.test.tsx index fcaadf3c..aafa4242 100644 --- a/tests/Popover/Popover.test.tsx +++ b/tests/Popover/Popover.test.tsx @@ -21,32 +21,7 @@ describe('Popover', () => { expect(popoverElem.classList).toContain('popover'); expect(popoverElem.classList).toContain('bs-popover-end'); - expect(popoverFirstElem.classList).not.toContain('popover-arrow'); expect(popoverFirstElem.classList).toContain('popover-header'); expect(popoverSecondElem.classList).toContain('popover-body'); }); - - it('should render popover arrow when hasArrow propr is false', () => { - const { getByTestId } = render( - - Popover title - - Popover Content - - - ); - const popoverElem = getByTestId('test'); - const popoverArrowElem = popoverElem.children[0]!; - const popoverHeaderElem = popoverElem.children[1]!; - const popoverBodyElem = popoverElem.children[2]!; - - expect(popoverElem.getAttribute('x-placement')).toEqual('right'); - expect(popoverElem.getAttribute('role')).toEqual('tooltip'); - expect(popoverElem.classList).toContain('popover'); - expect(popoverElem.classList).toContain('bs-popover-end'); - - expect(popoverArrowElem.classList).toContain('popover-arrow'); - expect(popoverHeaderElem.classList).toContain('popover-header'); - expect(popoverBodyElem.classList).toContain('popover-body'); - }); });