-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Create-able Select components #3304
Create-able Select components #3304
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
|
||
export function createFilm(title: string): IFilm { | ||
return { | ||
rank: 100 + Math.floor(Math.random() * 100 + 1), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😂
|
||
Use the `createItemFromQuery` prop to allow `Select<T>` to create new items. `createItemFromQuery` specifies how to turn a | ||
user-entered query string into an item of type `<T>` that `Select` understands. You should also provide the `createItemRenderer` | ||
prop to render a custom `MenuItem` to indicate that users can create new items. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's add a simple code sample here that demonstrates using both props.
it("renders create item if filtering returns empty list", () => { | ||
const wrapper = render({ | ||
...testCreateProps, | ||
items: [], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use the real item list so it's actually filtering instead of always being an empty list
Closing in favor of #3306 |
Fixes #1710
Changes proposed in this pull request:
IListItemsProps
, now takes two additional props:createItemFromQuery?: (query: string) => T
which converts a query to a new item; if this prop is present, the select component is considered "create-able";createItemRenderer?: (query: string, handleClick: React.MouseEventHandler<HTMLElement>) => JSX.Element | undefined
which could be used to render a customMenuItem
at the end of the list, that represents "create a new element from query".