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

Commit 6483505

Browse files
committed
fix: more Flow fixes
1 parent 5a14fe0 commit 6483505

File tree

3 files changed

+40
-16
lines changed

3 files changed

+40
-16
lines changed

.flowconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
[lints]
1010

1111
[options]
12-
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectError
12+
suppress_comment=\\(.\\|\n\\)*\\$\\(FlowExpectError\\|FlowFixMe\\)
1313

1414
[strict]
1515

src/__typings__/main-test.js

+28-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import React from 'react';
77
import { Manager, Reference, Popper, usePopper } from '..';
8+
import type { Modifier, StrictModifiers } from '@popperjs/core';
89

910
export const Test = () => (
1011
<Manager>
@@ -68,21 +69,43 @@ export const HookTest = () => {
6869
modifiers: [
6970
{
7071
name: 'arrow',
71-
options: { element: arrowElement || undefined },
72+
options: { element: arrowElement },
7273
},
7374
],
7475
}
7576
);
7677

77-
usePopper(
78+
usePopper(referenceElement, popperElement, {
79+
modifiers: [
80+
// $FlowExpectError: offset tuple accepts only numbers
81+
{
82+
name: 'offset',
83+
options: { offset: [0, ''] },
84+
},
85+
],
86+
});
87+
88+
Number(2 + null);
89+
90+
type CustomModifier = $Shape<Modifier<'custom', { foo: boolean }>>;
91+
usePopper<StrictModifiers | CustomModifier>(referenceElement, popperElement, {
92+
modifiers: [
93+
{
94+
name: 'custom',
95+
options: { foo: true },
96+
},
97+
],
98+
});
99+
100+
usePopper<StrictModifiers | CustomModifier>(
78101
referenceElement,
79102
popperElement,
80-
// $FlowExpectError
103+
// $FlowExpectError: foo should be boolean
81104
{
82105
modifiers: [
83106
{
84-
name: 'offset',
85-
options: { offset: [0, ''] },
107+
name: 'custom',
108+
options: { foo: 'str' },
86109
},
87110
],
88111
}

src/usePopper.js

+11-10
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@ type UpdateStateModifier = Modifier<'updateState', {||}>;
2828

2929
const EMPTY_MODIFIERS = [];
3030

31-
export const usePopper = <
32-
TModifiers: StrictModifiers | $Shape<Modifier<string, {}>>
33-
>(
31+
type DefaultModifiers = StrictModifiers | $Shape<Modifier<any, any>>;
32+
33+
export const usePopper = <Modifiers: DefaultModifiers = DefaultModifiers>(
3434
referenceElement: ?(Element | VirtualElement),
3535
popperElement: ?HTMLElement,
36-
options: Options<TModifiers> = {}
36+
options: Options<Modifiers> = {}
3737
) => {
38-
type TExtendedModifier = TModifiers | $Shape<UpdateStateModifier>;
38+
type InternalModifiers = Modifiers | $Shape<UpdateStateModifier>;
3939

40-
const prevOptions = React.useRef<?OptionsGeneric<TExtendedModifier>>(null);
40+
const prevOptions = React.useRef<?OptionsGeneric<InternalModifiers>>(null);
4141

4242
const optionsWithDefaults = {
4343
onFirstUpdate: options.onFirstUpdate,
@@ -79,7 +79,7 @@ export const usePopper = <
7979
[setState]
8080
);
8181

82-
const popperOptions = React.useMemo<OptionsGeneric<TExtendedModifier>>(() => {
82+
const popperOptions = React.useMemo<OptionsGeneric<InternalModifiers>>(() => {
8383
const newOptions = {
8484
onFirstUpdate: optionsWithDefaults.onFirstUpdate,
8585
placement: optionsWithDefaults.placement || 'bottom',
@@ -97,6 +97,7 @@ export const usePopper = <
9797
) {
9898
return prevOptions.current;
9999
} else {
100+
// $FlowFixMe: Cannot assign `newOptions` to `prevOptions.current` because string [1] is incompatible with string literal `updateState` [2] in property `name` of array element of property `modifiers`
100101
prevOptions.current = newOptions;
101102
return newOptions;
102103
}
@@ -111,15 +112,15 @@ export const usePopper = <
111112
const popperInstanceRef = React.useRef();
112113

113114
const createPopper = React.useMemo<typeof defaultCreatePopper>(
114-
// For some reason the two identical types don't like to be cast to one of them
115-
() => (options.createPopper: any) || defaultCreatePopper,
115+
// $FlowFixMe: Cannot call `React.useMemo` with function bound to `create` because `TModifier` [1] is incompatible with `Modifier` [2] in array element of property `modifiers` of the third argument of the return value.
116+
() => options.createPopper || defaultCreatePopper,
116117
[options.createPopper]
117118
);
118119

119120
useIsomorphicLayoutEffect(() => {
120121
let popperInstance = null;
121122
if (referenceElement != null && popperElement != null) {
122-
popperInstance = createPopper<TExtendedModifier>(
123+
popperInstance = createPopper<InternalModifiers>(
123124
referenceElement,
124125
popperElement,
125126
popperOptions

0 commit comments

Comments
 (0)