AutoSizer height and width changed from type `number` to `number | undefined` in 1.0.8
dturcotte opened this issue · comments
I'm using react-virtualized-auto-sizer
along with react-window
and there was a breaking change in 1.0.8: the height
and width
values provided by AutoSizer
are now number | undefined
and can't be passed down directly to FixedSizeList
from react-window
. The react-window
list components expect number | string
and won't allow undefined
.
Here's a codesandbox showing the issue, you can change the installed version between 1.0.7 and 1.0.8 to see the difference:
https://codesandbox.io/s/weathered-silence-op15io?file=/src/App.tsx
I can default the values to 0
if AutoSizer
gives me undefined
and it seems to work, is this the recommended solution? It would be ideal if the AutoSizer
values matched the list props from react-window
but it would be helpful to know the right thing to do if AutoSizer
gives an undefined
width
or height
.
Thanks!
This is a duplicate of issue #45
Sorry for the inconvenience, but the new Size
type is more accurate type than was there prior– as both width
and height
params are conditional based on the disableWidth
and disableHeight
props. (I don't know of a better way to model this with TypeScript. Maybe some kind of generic?)
For now, I'd recommend just casting the type.
@bvaughn yes, this can be solved with generics and overloads, but TypeScript does not support class overloading, only functions. I tried writing function declarations (if your component were a function), and they work fine - depending on the settings of disableWidth
and disableHeight
, the correct types for Size. width
and Size. height
come.
I tried to rewrite the component to a function, but judging by the tests, there are unnecessary calls to some functions (although they look logical, on the contrary, I'm surprised that they are not in the current implementation).
Feel free to share what you're referring to- regarding the functional exploration. Not sure what to make of your comment without any code to reference
@bvaughn sure: https://github.com/dartess/react-virtualized-auto-sizer/commits/fc
Tests are simply copied (replaced imports)
I tried to rewrite the component without changing the logic, but apparently I did not take into account some difference in the behavior of functional and class components, and the test results are different.
Gotcha.
Migrating to a function component would be nice.
Didn't look too close at this. Looks like your useEffect
is missing some dependencies in the array. Should be possible to do a rewrite though, but it would be a backwards breaking change (because of hooks APIs) so it would require a major bump.