[docs] Add Select TypeScript demos #15288
Conversation
|
No bundle size changes comparing 26fcc0c...44c7d51 |
| age: '', | ||
| }); | ||
|
|
||
| const handleChange = (name: keyof typeof state) => ( |
There was a problem hiding this comment.
Just a preference, but the state type could be broken into its own interface, referenced in the useState call above, and then used here as well!
There was a problem hiding this comment.
That's totally fair! I usually tend to use type inference when it will be handled correctly, especially for state hooks as there could be quite a few and it can get a bit tedious to write an interface for each if they are simple; that's just a preference too though - if you think it would be better to explicitly declare the interfaces in the examples then I'm happy to change it 👌
There was a problem hiding this comment.
Ah I see! That makes sense to me!
| setLabelWidth(inputLabel.current ? inputLabel.current.offsetWidth : 0); | ||
| }, []); | ||
|
|
||
| const handleChange = (name: keyof typeof state) => ( |
There was a problem hiding this comment.
Replied to the above
|
@cahilfoley Could you rebase onto |
eps1lon
added
the
PR: out-of-date
|
Sure, I'll do it as soon as I get home from work (~10hrs) |
…ey/material-ui into docs/select-demos-in-ts
…ial-ui into pr/cahilfoley/15288
Doesn't matter if we pass names that are not in the original array. Keep the demo simple.
| const inputLabel = React.useRef<HTMLLabelElement>(null); | ||
| const [labelWidth, setLabelWidth] = React.useState(0); | ||
| React.useEffect(() => { | ||
| setLabelWidth(inputLabel.current!.offsetWidth); |
There was a problem hiding this comment.
We can be pragmatic here I suppose.
There was a problem hiding this comment.
Do you think it would be better to have it split into an interface?
There was a problem hiding this comment.
I meant the non-null assertion. There is a subtle issue with this approach but that's not related to typescript.
eps1lon
removed
the
PR: out-of-date
|
@cahilfoley Great job. Thanks! |
Added TypeScript versions of all Select demos for #14897.
As a possible enhancement for the future - once the TypeScript version in material-ui is upgraded to ^3.4.0 (for the const assertions feature) an improvement can be made to the
Nametype in MultipleSelects.tsx by declaring the names variable as a readonly array.This prevents the type widening on the
Nametype which makes the signature awesomeI've setup the rest of the demo to take advantage of this when it becomes available 😀