Skip to content
This repository was archived by the owner on Dec 5, 2024. It is now read-only.

Commit 888b879

Browse files
author
Federico Zivolo
committed
feat: Added support for scheduleUpdate
1 parent 56d7bf8 commit 888b879

File tree

4 files changed

+30
-18
lines changed

4 files changed

+30
-18
lines changed

README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ children: ({|
8282
ref: (?HTMLElement) => void,
8383
style: { [string]: string | number },
8484
placement: ?Placement,
85+
scheduleUpdate: () => void,
8586
arrowProps: {
8687
ref: (?HTMLElement) => void,
8788
style: { [string]: string | number },
@@ -103,6 +104,8 @@ that may have flipped or altered the originally provided `placement` property. Y
103104
style of the popper and or of the arrow according to the definitive placement. For instance, you can use this
104105
property to orient the arrow to the right direction.
105106
107+
`scheduleUpdate` is a function you can call to schedule a Popper.js position update. It will directly call the [Popper#scheduleUpdate](https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate) method.
108+
106109
The `arrowProps` argument is an object, containing a `style` and `ref` properties that are identical to the
107110
ones provided as first and second argument of `children`, but are relative to the **arrow** element rather than
108111
the popper. Use them to, accordingly, retrieve the ref of the **arrow** element and style it.
@@ -147,16 +150,16 @@ import { Manager, Reference, Popper } from 'react-popper';
147150
const Example = () => (
148151
<Manager>
149152
<Reference>
150-
{props => (
151-
<button type="button" {...props}>
153+
{({ ref }) => (
154+
<button type="button" ref={ref}>
152155
Reference
153156
</button>
154157
)}
155158
</Reference>
156159
{ReactDOM.createPortal(
157160
<Popper>
158-
{({ placement, ...props }) => (
159-
<div {...props} data-placement={placement}>
161+
{({ placement, ref, style }) => (
162+
<div ref={ref} style={style} data-placement={placement}>
160163
Popper
161164
</div>
162165
)}

src/Popper.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import PopperJS, {
44
type Placement,
55
type Instance as PopperJS$Instance,
66
type Data,
7+
type Modifiers,
78
type ReferenceObject,
89
} from 'popper.js';
910
import { ManagerContext } from './Manager';
@@ -18,18 +19,15 @@ type RenderProp = ({|
1819
ref: getRefFn,
1920
style: Style,
2021
placement: ?Placement,
22+
scheduleUpdate: () => void,
2123
arrowProps: {
2224
ref: getRefFn,
2325
style: Style,
2426
},
25-
26-
2727
|}) => Node;
2828

2929
type PopperProps = {
30-
modifiers?: {
31-
[string]: { order: number, enabled: boolean, fn: Object => Object },
32-
},
30+
modifiers?: Modifiers,
3331
placement?: Placement,
3432
eventsEnabled?: boolean,
3533
referenceElement?: ReferenceElement,
@@ -135,6 +133,12 @@ export class Popper extends Component<PopperProps, PopperState> {
135133
}
136134
};
137135

136+
scheduleUpdate = () => {
137+
if (this.state.popperInstance) {
138+
this.state.popperInstance.scheduleUpdate();
139+
}
140+
};
141+
138142
componentDidUpdate(prevProps: PopperProps, prevState: PopperState) {
139143
// If needed, initialize the Popper.js instance
140144
// it will return `true` if it initialized a new instance, or `false` otherwise
@@ -165,6 +169,7 @@ export class Popper extends Component<PopperProps, PopperState> {
165169
ref: this.setPopperNode,
166170
style: this.getPopperStyle(),
167171
placement: this.getPopperPlacement(),
172+
scheduleUpdate: this.scheduleUpdate,
168173
arrowProps: {
169174
ref: this.setArrowNode,
170175
style: this.getArrowStyle(),

typings/react-popper.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ interface PopperProps {
2121
ref: (ref: HTMLElement | null) => void,
2222
style: React.CSSProperties,
2323
placement: ?PopperJS.Placement,
24+
scheduleUpdate: () => void,
2425
arrowProps: {
2526
ref: (ref: HTMLElement | null) => void,
2627
style: React.CSSProperties,

typings/tests/main-test.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,26 @@ import { Manager, Reference, Popper } from '../..';
33

44
const Test = () => (
55
<Manager>
6-
<Reference>
7-
{({ ref }) => <div ref={ref} />}
8-
</Reference>
6+
<Reference>{({ ref }) => <div ref={ref} />}</Reference>
97
<Popper>
10-
{({ ref, style, placement, arrowProps }) =>
11-
<div ref={ref} style={style} data-placement={placement}>
8+
{({ ref, style, placement, scheduleUpdate, arrowProps }) => (
9+
<div
10+
ref={ref}
11+
style={style}
12+
data-placement={placement}
13+
onClick={() => scheduleUpdate()}
14+
>
1215
Popper
1316
<div ref={arrowProps.ref} style={arrowProps.style} />
1417
</div>
15-
}
18+
)}
1619
</Popper>
1720
<Popper>
18-
{({ ref, style, placement }) =>
21+
{({ ref, style, placement }) => (
1922
<div ref={ref} style={style} data-placement={placement}>
2023
Popper
2124
</div>
22-
}
25+
)}
2326
</Popper>
2427
</Manager>
25-
)
28+
);

0 commit comments

Comments
 (0)