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

Create-able Select components #3304

Closed
wants to merge 5 commits into from
Closed

Create-able Select components #3304

wants to merge 5 commits into from

Conversation

shuyangli
Copy link
Contributor

@shuyangli shuyangli commented Jan 21, 2019

Fixes #1710

  • Includes tests
  • Update documentation

Changes proposed in this pull request:

  • Select components, via 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 custom MenuItem at the end of the list, that represents "create a new element from query".
  • If the component is create-able, when a query returns no results, pressing "enter" key will create a new item with the current query;

@shuyangli shuyangli changed the title Create-able MultiSelect Create-able Select components Jan 21, 2019
Copy link
Contributor

@giladgray giladgray left a comment

Choose a reason for hiding this comment

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

documentation

ok so i really want the create item to be selectable with arrow keys, but i also know that's gonna be real tricky to implement. let's consider it, to really drive this feature home.
image


export function createFilm(title: string): IFilm {
return {
rank: 100 + Math.floor(Math.random() * 100 + 1),
Copy link
Contributor

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.
Copy link
Contributor

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: [],
Copy link
Contributor

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

@shuyangli
Copy link
Contributor Author

Closing in favor of #3306

@shuyangli shuyangli closed this Jan 21, 2019
@shuyangli shuyangli deleted the sl/1710-create-able-multiselect branch January 21, 2019 21:00
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.

2 participants