From 65bf0f0dae5732dc4a7daef59717fa35c0a2a07d Mon Sep 17 00:00:00 2001 From: Phoebe Gao Date: Thu, 18 Feb 2021 15:43:00 -0800 Subject: [PATCH] feat!: update positionedFix prop to strategy Breaking change to update the old `positionFixed` popper prop to the new `strategy` prop. --- docs/lib/Components/DropdownsPage.js | 4 ++-- docs/lib/Components/PopoversPage.js | 5 ++--- src/DropdownMenu.js | 6 +++--- src/PopperContent.js | 6 +++--- src/TooltipPopoverWrapper.js | 6 +++--- src/__tests__/DropdownMenu.spec.js | 4 ++-- types/lib/DropdownMenu.d.ts | 2 +- types/lib/Popover.d.ts | 2 +- types/lib/Tooltip.d.ts | 2 +- types/reactstrap-tests.tsx | 2 +- 10 files changed, 19 insertions(+), 20 deletions(-) diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js index f8cff0d62..11ed090b7 100644 --- a/docs/lib/Components/DropdownsPage.js +++ b/docs/lib/Components/DropdownsPage.js @@ -101,8 +101,8 @@ DropdownMenu.propTypes = { // Custom modifiers that are passed to Popper.js, see https://popper.js.org/docs/v2/modifiers/ modifiers: PropTypes.array, persist: PropTypes.bool, // presist the popper, even when closed. See #779 for reasoning - // passed to popper, see https://popper.js.org/popper-documentation.html#Popper.Defaults.positionFixed - positionFixed: PropTypes.bool, + // passed to popper, see https://popper.js.org/docs/v2/constructors/#strategy + strategy: PropTypes.string, // Element to place the menu in. Used to show the menu as a child of 'body' // or other elements in the DOM instead of where it naturally is. This can be // used to make the Dropdown escape a container with overflow: hidden diff --git a/docs/lib/Components/PopoversPage.js b/docs/lib/Components/PopoversPage.js index 5a815aace..863bfa284 100644 --- a/docs/lib/Components/PopoversPage.js +++ b/docs/lib/Components/PopoversPage.js @@ -79,9 +79,8 @@ export default class PopoversPage extends React.Component { ]), // Custom modifiers that are passed to Popper.js, see https://popper.js.org/docs/v2/modifiers/ modifiers: PropTypes.array, - // Whether the element the tooltip is pointing to has "position: fixed" styling. This is passed to Popper.js and - // will make the tooltip itself have "position: fixed" as well - positionFixed: PropTypes.bool, + // https://popper.js.org/docs/v2/constructors/#strategy + strategy: PropTypes.string, offset: PropTypes.arrayOf(PropTypes.number), // Whether to show/hide the popover with a fade effect diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js index 678211348..89235e341 100644 --- a/src/DropdownMenu.js +++ b/src/DropdownMenu.js @@ -16,7 +16,7 @@ const propTypes = { className: PropTypes.string, cssModule: PropTypes.object, persist: PropTypes.bool, - positionFixed: PropTypes.bool, + strategy: PropTypes.string, container: targetPropType, }; @@ -52,7 +52,7 @@ class DropdownMenu extends React.Component { flip, modifiers, persist, - positionFixed, + strategy, container, ...attrs } = this.props; @@ -86,7 +86,7 @@ class DropdownMenu extends React.Component { {({ ref, style, placement }) => { let combinedStyle = { ...this.props.style, ...style }; diff --git a/src/PopperContent.js b/src/PopperContent.js index 6bdd7667f..47a0acbea 100644 --- a/src/PopperContent.js +++ b/src/PopperContent.js @@ -24,7 +24,7 @@ const propTypes = { container: targetPropType, target: targetPropType.isRequired, modifiers: PropTypes.array, - positionFixed: PropTypes.bool, + strategy: PropTypes.string, boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]), onClosed: PropTypes.func, fade: PropTypes.bool, @@ -108,7 +108,7 @@ class PopperContent extends React.Component { tag, container, modifiers, - positionFixed, + strategy, boundariesElement, onClosed, fade, @@ -168,7 +168,7 @@ class PopperContent extends React.Component { referenceElement={this.targetNode} modifiers={extendedModifiers} placement={placement} - strategy={positionFixed ? 'fixed' : undefined} + strategy={strategy} > {({ ref, style, placement: popperPlacement, isReferenceHidden, arrowProps, update }) => (
diff --git a/src/TooltipPopoverWrapper.js b/src/TooltipPopoverWrapper.js index 43870db7c..5d5139b69 100644 --- a/src/TooltipPopoverWrapper.js +++ b/src/TooltipPopoverWrapper.js @@ -32,7 +32,7 @@ export const propTypes = { PropTypes.number ]), modifiers: PropTypes.array, - positionFixed: PropTypes.bool, + strategy: PropTypes.string, offset: PropTypes.arrayOf(PropTypes.number), innerRef: PropTypes.oneOfType([ PropTypes.func, @@ -349,7 +349,7 @@ class TooltipPopoverWrapper extends React.Component { popperClassName, container, modifiers, - positionFixed, + strategy, offset, fade, flip, @@ -375,7 +375,7 @@ class TooltipPopoverWrapper extends React.Component { popperClassName={popperClasses} container={container} modifiers={modifiers} - positionFixed={positionFixed} + strategy={strategy} offset={offset} cssModule={cssModule} fade={fade} diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js index b49d44d1b..065998dbf 100644 --- a/src/__tests__/DropdownMenu.spec.js +++ b/src/__tests__/DropdownMenu.spec.js @@ -162,11 +162,11 @@ describe('DropdownMenu', () => { expect(wrapper.find(Popper).prop('modifiers')).toEqual([{"enabled": false, "name": "flip"}]); }); - it('should position using fixed mode when positionFixed is true', () => { + it('should position using fixed mode', () => { isOpen = true; const wrapper = mount( - Ello world + Ello world ); diff --git a/types/lib/DropdownMenu.d.ts b/types/lib/DropdownMenu.d.ts index df650e98a..2899d8a9c 100644 --- a/types/lib/DropdownMenu.d.ts +++ b/types/lib/DropdownMenu.d.ts @@ -11,7 +11,7 @@ export interface DropdownMenuProps extends React.HTMLAttributes { modifiers?: Popper.Modifiers; cssModule?: CSSModule; persist?: boolean; - positionFixed?: boolean; + strategy?: string; container?: string | HTMLElement | React.RefObject; } diff --git a/types/lib/Popover.d.ts b/types/lib/Popover.d.ts index 361c00a22..f9dc75e8d 100644 --- a/types/lib/Popover.d.ts +++ b/types/lib/Popover.d.ts @@ -25,7 +25,7 @@ export interface PopoverProps extends React.HTMLAttributes { placementPrefix?: string; delay?: number | { show: number; hide: number }; modifiers?: Popper.Modifiers; - positionFixed?: boolean; + strategy?: string; cssModule?: CSSModule; fade?: boolean; flip?: boolean; diff --git a/types/lib/Tooltip.d.ts b/types/lib/Tooltip.d.ts index e3dc6bdba..70d8e0fbe 100644 --- a/types/lib/Tooltip.d.ts +++ b/types/lib/Tooltip.d.ts @@ -21,7 +21,7 @@ export interface UncontrolledTooltipProps autohide?: boolean; placement?: Popper.Placement; modifiers?: Popper.Modifiers; - positionFixed?: boolean; + strategy?: string; cssModule?: CSSModule; fade?: boolean; flip?: boolean; diff --git a/types/reactstrap-tests.tsx b/types/reactstrap-tests.tsx index 625e0c53a..866e0ccb3 100644 --- a/types/reactstrap-tests.tsx +++ b/types/reactstrap-tests.tsx @@ -5184,7 +5184,7 @@ class Example129 extends React.Component { return ( Dropdown - + Header Action Another Action