Coder Social home page Coder Social logo

Comments (6)

bvaughn avatar bvaughn commented on May 18, 2024 1

They are booleans but that does not mean that all props combinations are valid. For example, this would not be valid and is something TypeScript should warn about:

<AutoSizer
  disableHeight={toggle}
  onResize={({ height }) => {
    // ...
  }
/>

I would argue just set these props as booleans

This caused confusion before (or maybe more accurately, it didn't catch incorrect combinations like the one I mentioned above) and people complained about it, so now the types are more restrictive.

If this is a problem for your specific case, you can always tell TypeScript to ignore (and/or cast the type).

from react-virtualized-auto-sizer.

64BitAsura avatar 64BitAsura commented on May 18, 2024

+1

from react-virtualized-auto-sizer.

bvaughn avatar bvaughn commented on May 18, 2024

The types were chosen very intentionally to prevent bad combinations of params (e.g. an onResize callback that tries to access height even though the component has been configured to disableHeight)

I chose not to support a resizer that had both height and width disabled because that seems pointless. If you'd like to make an argument for why that should be supported, I'll consider it.

from react-virtualized-auto-sizer.

samtjo avatar samtjo commented on May 18, 2024

I think my main issue with the current approach, is that it's now impossible to programmatically toggle disableHeight or disableWidth with a boolean, i.e.

let toggle: boolean = false;

if (some condition) toggle = true;

return (
   <AutoSizer disableHeight={toggle}>
   // Type 'boolean' is not assignable to type 'false'.

I would argue just set these props as booleans, and leave it to the user to determine which combination of height and width disabled they want. There can be use cases like ours, where we do sometimes need both to be disabled, depending on the layout we're going for.

Also your documentation states that both these props are booleans, which (going on TypeScript types at least) isn't right. If you decide not to change this, can you at least update the docs to make it clear how this works without having to dig into the code please?

from react-virtualized-auto-sizer.

samtjo avatar samtjo commented on May 18, 2024

Ok thanks for explaining and getting back to me so quickly @bvaughn. I'll just tell TypeScript to ignore for our use case and close this issue!

from react-virtualized-auto-sizer.

bvaughn avatar bvaughn commented on May 18, 2024

No problem ๐Ÿ˜ƒ

from react-virtualized-auto-sizer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.