[Select] Create-able Select components (a different approach)

packages/docs-app/src/components/resources.tsx

@@ -18,11 +18,15 @@ const RESOURCES: IResourceProps[] = [
 export const Resources: React.SFC = () => (
     <>
         <div className="blueprint-resources">
-            {RESOURCES.map(resource => <ResourceCard key={resource.fileName} {...resource} />)}
+            {RESOURCES.map(resource => (
+                <ResourceCard key={resource.fileName} {...resource} />
+            ))}
         </div>
         <Callout title="Missing fonts?" intent="warning">
             Download Apple's San Francisco font directly from the source:{" "}
-            <a href="https://developer.apple.com/fonts/" target="_blank" rel="noopener noreferrer">https://developer.apple.com/fonts/</a>
+            <a href="https://developer.apple.com/fonts/" target="_blank" rel="noopener noreferrer">
+                https://developer.apple.com/fonts/
+            </a>
         </Callout>
     </>
 );

packages/docs-app/src/examples/select-examples/films.tsx

@@ -138,6 +138,20 @@ export const renderFilm: ItemRenderer<IFilm> = (film, { handleClick, modifiers,
     );
 };
 
+export const renderCreateFilmOption = (
+    query: string,
+    active: boolean,
+    handleClick: React.MouseEventHandler<HTMLElement>,
+) => (
+    <MenuItem
+        icon="add"
+        text={`Create "${query}"`}
+        active={active}
+        onClick={handleClick}
+        shouldDismissPopover={false}
+    />
+);
+
 export const filterFilm: ItemPredicate<IFilm> = (query, film) => {
     return `${film.rank}. ${film.title.toLowerCase()} ${film.year}`.indexOf(query.toLowerCase()) >= 0;
 };
@@ -182,3 +196,16 @@ export const filmSelectProps = {
     itemRenderer: renderFilm,
     items: TOP_100_FILMS,
 };
+
+export function createFilm(title: string): IFilm {
+    return {
+        rank: 100 + Math.floor(Math.random() * 100 + 1),
+        title,
+        year: new Date().getFullYear(),
+    };
+}
+
+export function areFilmsEqual(filmA: IFilm, filmB: IFilm) {
+    // Compare only the titles (ignoring case) just for simplicity.
+    return filmA.title.toLowerCase() === filmB.title.toLowerCase();
+}

packages/docs-app/src/examples/select-examples/multiSelectExample.tsx

@@ -9,16 +9,19 @@ import * as React from "react";
 import { Button, H5, Intent, ITagProps, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
 import { ItemRenderer, MultiSelect } from "@blueprintjs/select";
-import { filmSelectProps, IFilm, TOP_100_FILMS } from "./films";
+import { areFilmsEqual, createFilm, filmSelectProps, IFilm, renderCreateFilmOption, TOP_100_FILMS } from "./films";
 
 const FilmMultiSelect = MultiSelect.ofType<IFilm>();
 
 const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];
 
 export interface IMultiSelectExampleState {
+    allowCreate: boolean;
+    createdItems: IFilm[];
     films: IFilm[];
     hasInitialContent: boolean;
     intent: boolean;
+    items: IFilm[];
     openOnKeyDown: boolean;
     popoverMinimal: boolean;
     resetOnSelect: boolean;
@@ -27,15 +30,19 @@ export interface IMultiSelectExampleState {
 
 export class MultiSelectExample extends React.PureComponent<IExampleProps, IMultiSelectExampleState> {
     public state: IMultiSelectExampleState = {
+        allowCreate: false,
+        createdItems: [],
         films: [],
         hasInitialContent: false,
         intent: false,
+        items: filmSelectProps.items,
         openOnKeyDown: false,
         popoverMinimal: true,
         resetOnSelect: true,
         tagMinimal: false,
     };
 
+    private handleAllowCreateChange = this.handleSwitchChange("allowCreate");
     private handleKeyDownChange = this.handleSwitchChange("openOnKeyDown");
     private handleResetChange = this.handleSwitchChange("resetOnSelect");
     private handlePopoverMinimalChange = this.handleSwitchChange("popoverMinimal");
@@ -44,7 +51,7 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
     private handleInitialContentChange = this.handleSwitchChange("hasInitialContent");
 
     public render() {
-        const { films, hasInitialContent, tagMinimal, popoverMinimal, ...flags } = this.state;
+        const { allowCreate, films, hasInitialContent, tagMinimal, popoverMinimal, ...flags } = this.state;
         const getTagProps = (_value: string, index: number): ITagProps => ({
             intent: this.state.intent ? INTENTS[index % INTENTS.length] : Intent.NONE,
             minimal: tagMinimal,
@@ -56,6 +63,8 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
             // explicit undefined (not null) for default behavior (show full list)
             undefined
         );
+        const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
         const clearButton = films.length > 0 ? <Button icon="cross" minimal={true} onClick={this.handleClear} /> : null;
 
@@ -64,8 +73,11 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
                 <FilmMultiSelect
                     {...filmSelectProps}
                     {...flags}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
                     initialContent={initialContent}
                     itemRenderer={this.renderFilm}
+                    itemsEqual={areFilmsEqual}
                     noResults={<MenuItem disabled={true} text="No results." />}
                     onItemSelect={this.handleFilmSelect}
                     popoverProps={{ minimal: popoverMinimal }}
@@ -96,6 +108,11 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
                     checked={this.state.hasInitialContent}
                     onChange={this.handleInitialContentChange}
                 />
+                <Switch
+                    label="Allow creating new films"
+                    checked={this.state.allowCreate}
+                    onChange={this.handleAllowCreateChange}
+                />
                 <H5>Tag props</H5>
                 <Switch
                     label="Minimal tag style"
@@ -150,11 +167,31 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
     }
 
     private selectFilm(film: IFilm) {
-        this.setState({ films: [...this.state.films, film] });
+        const { createdItems, films, items } = this.state;
+        const isNewlyCreatedItem = !this.arrayContainsFilm(items, film);
+        this.setState({
+            createdItems: isNewlyCreatedItem ? this.addFilmToArray(createdItems, film) : createdItems,
+            // Avoid re-creating an item that is already selected (the "Create
+            // Item" option will be shown even if it matches an already selected
+            // item).
+            films: !this.arrayContainsFilm(films, film) ? [...films, film] : films,
+            // Add a created film to `items` so that the film can be deselected.
+            items: isNewlyCreatedItem ? this.addFilmToArray(items, film) : items,
+        });
     }
 
     private deselectFilm(index: number) {
-        this.setState({ films: this.state.films.filter((_film, i) => i !== index) });
+        const { createdItems, films, items } = this.state;
+
+        const film = films[index];
+        const wasItemCreatedByUser = this.arrayContainsFilm(createdItems, film);
+
+        // Delete the item if the user manually created it.
+        this.setState({
+            createdItems: wasItemCreatedByUser ? this.deleteFilmFromArray(createdItems, film) : createdItems,
+            films: films.filter((_film, i) => i !== index),
+            items: wasItemCreatedByUser ? this.deleteFilmFromArray(items, film) : items,
+        });
     }
 
     private handleFilmSelect = (film: IFilm) => {
@@ -173,4 +210,16 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
     }
 
     private handleClear = () => this.setState({ films: [] });
+
+    private arrayContainsFilm(films: IFilm[], filmToFind: IFilm): boolean {
+        return films.find(f => f.title === filmToFind.title) !== undefined;
+    }
+
+    private addFilmToArray(films: IFilm[], filmToAdd: IFilm) {
+        return [...films, filmToAdd];
+    }
+
+    private deleteFilmFromArray(films: IFilm[], filmToDelete: IFilm) {
+        return films.filter(film => film !== filmToDelete);
+    }
 }

packages/docs-app/src/examples/select-examples/omnibarExample.tsx

@@ -20,22 +20,25 @@ import {
 } from "@blueprintjs/core";
 import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { Omnibar } from "@blueprintjs/select";
-import { filmSelectProps, IFilm } from "./films";
+import { areFilmsEqual, createFilm, filmSelectProps, IFilm, renderCreateFilmOption } from "./films";
 
 const FilmOmnibar = Omnibar.ofType<IFilm>();
 
 export interface IOmnibarExampleState {
+    allowCreate: boolean;
     isOpen: boolean;
     resetOnSelect: boolean;
 }
 
 @HotkeysTarget
 export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarExampleState> {
     public state: IOmnibarExampleState = {
+        allowCreate: false,
         isOpen: false,
         resetOnSelect: true,
     };
 
+    private handleAllowCreateChange = handleBooleanChange(allowCreate => this.setState({ allowCreate }));
     private handleResetChange = handleBooleanChange(resetOnSelect => this.setState({ resetOnSelect }));
 
     private toaster: Toaster;
@@ -59,15 +62,13 @@ export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarE
     }
 
     public render() {
-        const options = (
-            <>
-                <H5>Props</H5>
-                <Switch label="Reset on select" checked={this.state.resetOnSelect} onChange={this.handleResetChange} />
-            </>
-        );
+        const { allowCreate } = this.state;
+
+        const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
         return (
-            <Example options={options} {...this.props}>
+            <Example options={this.renderOptions()} {...this.props}>
                 <span>
                     <Button text="Click to show Omnibar" onClick={this.handleClick} />
                     {" or press "}
@@ -77,6 +78,9 @@ export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarE
                 <FilmOmnibar
                     {...filmSelectProps}
                     {...this.state}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
+                    itemsEqual={areFilmsEqual}
                     noResults={<MenuItem disabled={true} text="No results." />}
                     onItemSelect={this.handleItemSelect}
                     onClose={this.handleClose}
@@ -86,6 +90,20 @@ export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarE
         );
     }
 
+    protected renderOptions() {
+        return (
+            <>
+                <H5>Props</H5>
+                <Switch label="Reset on select" checked={this.state.resetOnSelect} onChange={this.handleResetChange} />
+                <Switch
+                    label="Allow creating new films"
+                    checked={this.state.allowCreate}
+                    onChange={this.handleAllowCreateChange}
+                />
+            </>
+        );
+    }
+
     private handleClick = (_event: React.MouseEvent<HTMLElement>) => {
         this.setState({ isOpen: true });
     };

packages/docs-app/src/examples/select-examples/selectExample.tsx

@@ -9,11 +9,12 @@ import * as React from "react";
 import { Button, H5, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
 import { Select } from "@blueprintjs/select";
-import { filmSelectProps, IFilm, TOP_100_FILMS } from "./films";
+import { areFilmsEqual, createFilm, filmSelectProps, IFilm, renderCreateFilmOption, TOP_100_FILMS } from "./films";
 
 const FilmSelect = Select.ofType<IFilm>();
 
 export interface ISelectExampleState {
+    allowCreate: boolean;
     film: IFilm;
     filterable: boolean;
     hasInitialContent: boolean;
@@ -27,6 +28,7 @@ export interface ISelectExampleState {
 
 export class SelectExample extends React.PureComponent<IExampleProps, ISelectExampleState> {
     public state: ISelectExampleState = {
+        allowCreate: false,
         disableItems: false,
         disabled: false,
         film: TOP_100_FILMS[0],
@@ -38,6 +40,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         resetOnSelect: false,
     };
 
+    private handleAllowCreateChange = this.handleSwitchChange("allowCreate");
     private handleDisabledChange = this.handleSwitchChange("disabled");
     private handleFilterableChange = this.handleSwitchChange("filterable");
     private handleInitialContentChange = this.handleSwitchChange("hasInitialContent");
@@ -48,21 +51,26 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
     private handleResetOnSelectChange = this.handleSwitchChange("resetOnSelect");
 
     public render() {
-        const { disabled, disableItems, film, minimal, ...flags } = this.state;
+        const { allowCreate, disabled, disableItems, film, minimal, ...flags } = this.state;
 
         const initialContent = this.state.hasInitialContent ? (
             <MenuItem disabled={true} text={`${TOP_100_FILMS.length} items loaded.`} />
         ) : (
             undefined
         );
+        const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <FilmSelect
                     {...filmSelectProps}
                     {...flags}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
                     disabled={disabled}
                     itemDisabled={this.isItemDisabled}
+                    itemsEqual={areFilmsEqual}
                     initialContent={initialContent}
                     noResults={<MenuItem disabled={true} text="No results." />}
                     onItemSelect={this.handleValueChange}
@@ -110,6 +118,11 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
                     checked={this.state.disableItems}
                     onChange={this.handleItemDisabledChange}
                 />
+                <Switch
+                    label="Allow creating new items"
+                    checked={this.state.allowCreate}
+                    onChange={this.handleAllowCreateChange}
+                />
                 <H5>Popover props</H5>
                 <Switch
                     label="Minimal popover style"