Closed lfpose closed 1 year ago
+1, it caused typechecking problems
Also seeing a problem with this change. I would need to modify a lot of my codebase to handle this change. Heads up that reverting to v1.0.7 seems to fix the issue.
I'm sorry this changed cause type issues for you, 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.
Sorry for bringing this up again, but maybe this can be fixed by using conditional types & overloads based on the props? I've never used conditional types/overloads together with class components, so not sure if this would work at all...
I created an oversimplified example, which would result in the following (screenshot). Depending on the props, you would get type-safe access to the height
/width
property based on whatever has been disabled via props. Look at the expected errors:
Here's the example code:
type PropsConfig = {
disableWidth?: boolean
disableHeight?: boolean
}
type Props = {
otherProps?: string
} & PropsConfig
type Size = {
width: number
height: number
}
type AutoSizerReturn<TSize extends Partial<Size>> = () => TSize
type SizeConditional<TKeyToOmit extends keyof Size> = Omit<Size, TKeyToOmit>
// simulating a component..
function autoSizer<TProps extends Props>(props: TProps):
TProps["disableWidth"] extends true
? (TProps["disableHeight"] extends true
? AutoSizerReturn<SizeConditional<"width" | "height">>
: AutoSizerReturn<SizeConditional<"width">>)
: TProps["disableHeight"] extends true
? AutoSizerReturn<SizeConditional<"height">>
: AutoSizerReturn<Size> {
const size: Size = {
width: 123,
height: 123
}
// simulating render props..
return () => size
}
// Example 1: nothing disabled, both height & width are there
const size1 = autoSizer({})()
const size1Height = size1.height
const size1Width = size1.width
// Example 2: disable height, only width is there
const size2 = autoSizer({ disableHeight: true })()
const size2Height = size2.height
const size2Width = size2.width
// Example 3: disable width, only height is there
const size3 = autoSizer({ disableWidth: true })()
const size3Height = size3.height
const size3Width = size3.width
// Example 4: disable both, none are there
const size4 = autoSizer({ disableHeight: true, disableWidth: true })()
const size4Height = size4.height
const size4Width = size4.width
@bennettdams That does seem like a nice DevX improvement. Thanks for the playground link.
I'd be happy to review a PR for this. Else I'll try to get around to it at some point.
In an effort to minimize churn, here's what I've settled on: TypeScript playground link
1.0.18
Hello, I was trying the latest version (seems like I decided to update the same time as you did). And I wonder why this change was made and is necessary.
The type Size changed from
{ height: number, width: number }
to{ height?: number, width?: number }
To me this seems unnecessary as there is adefaultHeight
anddefaultWidth
props that should be used if no value is computed.https://github.com/bvaughn/react-virtualized-auto-sizer/blob/943b6d0d4d69376f2f483201842dadbd5fc2f14d/src/AutoSizer.ts#L6-L9