Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat!: update positionedFix prop to strategy
Breaking change to update the old `positionFixed` popper prop to the new `strategy` prop.
  • Loading branch information
Phoebe Gao authored and phwebi committed Oct 27, 2021
1 parent 9ad870e commit 65bf0f0
Show file tree
Hide file tree
Showing 10 changed files with 19 additions and 20 deletions.
4 changes: 2 additions & 2 deletions docs/lib/Components/DropdownsPage.js
Expand Up @@ -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
Expand Down
5 changes: 2 additions & 3 deletions docs/lib/Components/PopoversPage.js
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/DropdownMenu.js
Expand Up @@ -16,7 +16,7 @@ const propTypes = {
className: PropTypes.string,
cssModule: PropTypes.object,
persist: PropTypes.bool,
positionFixed: PropTypes.bool,
strategy: PropTypes.string,
container: targetPropType,
};

Expand Down Expand Up @@ -52,7 +52,7 @@ class DropdownMenu extends React.Component {
flip,
modifiers,
persist,
positionFixed,
strategy,
container,
...attrs
} = this.props;
Expand Down Expand Up @@ -86,7 +86,7 @@ class DropdownMenu extends React.Component {
<Popper
placement={poperPlacement}
modifiers={poperModifiers}
strategy={positionFixed ? 'fixed' : undefined}
strategy={strategy}
>
{({ ref, style, placement }) => {
let combinedStyle = { ...this.props.style, ...style };
Expand Down
6 changes: 3 additions & 3 deletions src/PopperContent.js
Expand Up @@ -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,
Expand Down Expand Up @@ -108,7 +108,7 @@ class PopperContent extends React.Component {
tag,
container,
modifiers,
positionFixed,
strategy,
boundariesElement,
onClosed,
fade,
Expand Down Expand Up @@ -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 }) => (
<div ref={ref} style={style} className={popperClassName} data-popper-placement={popperPlacement} data-popper-reference-hidden={isReferenceHidden ? 'true' : undefined}>
Expand Down
6 changes: 3 additions & 3 deletions src/TooltipPopoverWrapper.js
Expand Up @@ -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,
Expand Down Expand Up @@ -349,7 +349,7 @@ class TooltipPopoverWrapper extends React.Component {
popperClassName,
container,
modifiers,
positionFixed,
strategy,
offset,
fade,
flip,
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/DropdownMenu.spec.js
Expand Up @@ -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(
<DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
<DropdownMenu positionFixed>Ello world</DropdownMenu>
<DropdownMenu strategy="fixed">Ello world</DropdownMenu>
</DropdownContext.Provider>
);

Expand Down
2 changes: 1 addition & 1 deletion types/lib/DropdownMenu.d.ts
Expand Up @@ -11,7 +11,7 @@ export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
modifiers?: Popper.Modifiers;
cssModule?: CSSModule;
persist?: boolean;
positionFixed?: boolean;
strategy?: string;
container?: string | HTMLElement | React.RefObject<HTMLElement>;
}

Expand Down
2 changes: 1 addition & 1 deletion types/lib/Popover.d.ts
Expand Up @@ -25,7 +25,7 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLElement> {
placementPrefix?: string;
delay?: number | { show: number; hide: number };
modifiers?: Popper.Modifiers;
positionFixed?: boolean;
strategy?: string;
cssModule?: CSSModule;
fade?: boolean;
flip?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion types/lib/Tooltip.d.ts
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion types/reactstrap-tests.tsx
Expand Up @@ -5184,7 +5184,7 @@ class Example129 extends React.Component<any, any> {
return (
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>Dropdown</DropdownToggle>
<DropdownMenu persist positionFixed>
<DropdownMenu persist strategy="fixed">
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
Expand Down

0 comments on commit 65bf0f0

Please sign in to comment.