Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Types 1.2.0 #165

Merged
merged 11 commits into from
Sep 4, 2017
Merged

Types 1.2.0 #165

merged 11 commits into from
Sep 4, 2017

Conversation

tansongyang
Copy link
Collaborator

What: Update typings.

Why: Some types did not match the docs.

How: Edit index.d.ts

Checklist:

  • Documentation N/A
  • Tests
  • Ready to be merged
  • Added myself to contributors table

I tried to make only non-breaking changes (adding types, making required types optional, etc.) with one exception. GetButtonPropsOptions was requiring incorrect properties—in fact, it shouldn't be requiring any at all. I completely removed them.

There are a couple things that probably should change, but I didn't want to make them for fear of introducing a breaking change. These are:

  • The props onUserAction and onClick in DownshiftProps are not in the docs. Have they been removed? If so, they should be removed from the type definitions as well.
  • A11StatusMessageOptions should probably be renamed to A11yStatusMessageOptions (there is a missing "y")
  • ChangeOptions is completely unused, and I could not find any mention of it in the docs. However, it is exported, so I did not remove it in case anyone is importing it.

@codecov-io
Copy link

Codecov Report

Merging #165 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@          Coverage Diff          @@
##           master   #165   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           4      4           
  Lines         267    267           
  Branches       64     64           
=====================================
  Hits          267    267

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 47ee3b8...4f334e0. Read the comment docs.

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks awesome to me! I'd love a review from some other folks though...

@kentcdodds
Copy link
Member

ping @pbomb and @vutran could you review this?

@@ -1,25 +1,28 @@
import * as React from 'react';

type CB = () => void
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The callbacks are optional. Additionally, the code checks if they are functions and only returns them if they are. So, I think it would be more correct to go with either Function | undefined or () => any | undefined. I think void is too restrictive - we don't really care what the callback function returns.

The TypeScript types for React's setState function (which is how these callbacks are used) is typed as () => any | undefined

defaultSelectedItem?: any;
defaultInputValue?: string;
defaultIsOpen?: boolean;
getA11yStatusMessage?: (options: A11StatusMessageOptions) => any;
itemToString?: (item: any) => string;
onChange?: (selectedItem: any, stateAndHelpers: ControllerStateAndHelpers) => void;
onStateChange?: (options: StateChangeOptions, stateAndHelpers: ControllerStateAndHelpers) => void;
onStateChange?: (changes: StateChangeOptions, stateAndHelpers: ControllerStateAndHelpers) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to keep this named as options to be consistent with everything else in here.

openMenu: (cb: CB) => void;
closeMenu: (cb: CB) => void;
toggleMenu: (cb: CB) => void;
selectItem: (item: any, otherStateToSet: any, cb: CB) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

otherStateToSet and cb should be optional types. Additionally, if otherStateToSet is defined, it should be an object as it gets spread into another object.

closeMenu: (cb: CB) => void;
toggleMenu: (cb: CB) => void;
selectItem: (item: any, otherStateToSet: any, cb: CB) => void;
selectItemAtIndex: (index: number, otherStateToSet: any, cb: CB) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

otherStateToSet and cb should be optional types. Additionally, if otherStateToSet is defined, it should be an object as it gets spread into another object.

toggleMenu: (cb: CB) => void;
selectItem: (item: any, otherStateToSet: any, cb: CB) => void;
selectItemAtIndex: (index: number, otherStateToSet: any, cb: CB) => void;
selectHighlightedItem: (otherStateToSet: any, cb: CB) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

otherStateToSet and cb should be optional types. Additionally, if otherStateToSet is defined, it should be an object as it gets spread into another object.

selectItem: (item: any, otherStateToSet: any, cb: CB) => void;
selectItemAtIndex: (index: number, otherStateToSet: any, cb: CB) => void;
selectHighlightedItem: (otherStateToSet: any, cb: CB) => void;
setHighlightedItem: (index: number, otherStateToSet: any, cb: CB) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

otherStateToSet should be optional and there is no cb argument to this function.

Copy link
Collaborator Author

@tansongyang tansongyang Sep 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you talking about setHighlightedItem here? If so, I think that, first of all, this must be a typo; I just noticed that setHighlightedItem is not in the docs. However, there is setHighlightedIndex. If that is the case, I believe it does have a cb argument:

setHighlightedIndex function(index: number, otherStateToSet: object, cb: Function) call to set a new highlighted index

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I was talking about setHighlightedItem, but now I don't see it anywhere in the repo except in the TypeScript definitions, so I think you can remove this line.
As for the line above, with selectHighlightedItem, you're right. otherStateToSet should be optional and there is also an optional cb argument.

selectItemAtIndex: (index: number, otherStateToSet: any, cb: CB) => void;
selectHighlightedItem: (otherStateToSet: any, cb: CB) => void;
setHighlightedItem: (index: number, otherStateToSet: any, cb: CB) => void;
clearSelection: (cb: CB) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cb is optional

selectHighlightedItem: (otherStateToSet: any, cb: CB) => void;
setHighlightedItem: (index: number, otherStateToSet: any, cb: CB) => void;
clearSelection: (cb: CB) => void;
reset: (otherStateToSet: any, cb: CB) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cb is optional

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is otherStateToSet also optional here?

@tansongyang
Copy link
Collaborator Author

@pbomb First of all, thanks for reviewing the PR! I have a local commit with the changes, but I'm waiting to push until we resolve my two follow-up questions. Also, do you have any thoughts on my additional comments (in the original PR post)? If you think any of those are worth doing, we can also do them in this branch so that it all gets merged in on one go.

* Rename `changes` back to `options`.
* Add optional arguments in the
right places.
* Use `Function` as type for `cb`.
* Use `object` ast type
for `otherStateToSet`.
* Fix incorrect name `setHighlightedItem` by
changing it to
`setHighlightedIndex`.
@pbomb
Copy link
Collaborator

pbomb commented Sep 2, 2017

@tansongyang sorry, i missed your questions in the initial PR posting. Here's what my thoughts are.

  • You're right, there does seem to be an optional onClick prop that isn't documented. @kentcdodds does documentation need to be added for this prop? It looks to me like the user can pass onClick both to the <Downshift/> component and to the top-level element returned by the function-as-child and that they will both be called as the click handlers are all composed together. Does that sound right to you?
  • Yes, A11StatusMessageOptions should be renamed to A11yStatusMessageOptions as it describes the argument to the getA11yStatusMessage function prop.
  • You should remove ChangeOptions as it's out of date. That used to be the type of the first argument passed to the onChange callback prop, but was changed to just be the selectedItem in commit 620a3ad5e4f50dece867ae9989174a8b35104fb3 and previousItem was removed in that commit as well.

@kentcdodds
Copy link
Member

You're right, there does seem to be an optional onClick prop that isn't documented. @kentcdodds does documentation need to be added for this prop? It looks to me like the user can pass onClick both to the component and to the top-level element returned by the function-as-child and that they will both be called as the click handlers are all composed together. Does that sound right to you?

That's a mistake actually. We should remove the prop. It's undocumented so I don't think we need a breaking change for it. Sorry about that!

* Rename `A11StatusMessageOptions` to `A11yStatusMessageOptions`.
* Remove `ChangeOptions`.
* Remove `onClick` prop.
@tansongyang
Copy link
Collaborator Author

I've made the changes that we discussed. Let me know if anything else needs to change.

Copy link
Collaborator

@pbomb pbomb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great. Thanks @tansongyang!

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much!

@kentcdodds
Copy link
Member

There are merge conflicts. Could you fix them? Thanks!

@kentcdodds kentcdodds merged commit 0f71611 into downshift-js:master Sep 4, 2017
@tansongyang
Copy link
Collaborator Author

@kentcdodds Thanks for getting that README merge conflict! It was a pleasure working with you all.

@kentcdodds
Copy link
Member

You're welcome!

The build is broken right now due to a problem with TypeScript. Could someone look into that please?

@pbomb
Copy link
Collaborator

pbomb commented Sep 5, 2017

I'm taking a look now

@tansongyang
Copy link
Collaborator Author

Found the issue. After I removed ChangeOptions, I forgot to update the tests, which reference ChangeOptions. That's my bad. Working on a fix right now.

@tansongyang
Copy link
Collaborator Author

In my local environment, I believe I've fixed the TS issue, as it now successfully compiles. However, npm start validate reports lint issues with downshift\stories\examples\multiple.js. What would you like to do about that?

Also, the problem in the test files was custom.test.tsx and basic.test.tsx were importing ChangeOptions, but they weren't using it. Removing it from the imports fixes the issue.

@kentcdodds
Copy link
Member

Go ahead and fix whatever you can and I'll fix what's left. Thanks!

@tansongyang tansongyang mentioned this pull request Sep 5, 2017
4 tasks
@tansongyang
Copy link
Collaborator Author

New pull request: #175

Apologies for the inconvenience. Thanks for being flexible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants