Update examples to use readonly array

Author: ggdouglas

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

@@ -40,13 +40,13 @@ const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Int
 
 export interface MultiSelectExampleState {
     allowCreate: boolean;
-    createdItems: Film[];
+    createdItems: readonly Film[];
     disabled: boolean;
     fill: boolean;
-    films: Film[];
+    films: readonly Film[];
     hasInitialContent: boolean;
     intent: boolean;
-    items: Film[];
+    items: readonly Film[];
     matchTargetWidth: boolean;
     openOnKeyDown: boolean;
     popoverMinimal: boolean;
@@ -124,7 +124,7 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
-                <MultiSelect<Film>
+                <MultiSelect
                     {...flags}
                     createNewItemFromQuery={allowCreate ? createFilms : undefined}
                     createNewItemRenderer={allowCreate ? renderCreateFilmsMenuItem : null}
@@ -251,7 +251,9 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
         );
     }
 
-    private renderCustomTarget = (selectedItems: Film[]) => <MultiSelectCustomTarget count={selectedItems.length} />;
+    private renderCustomTarget = (selectedItems: readonly Film[]) => (
+        <MultiSelectCustomTarget count={selectedItems.length} />
+    );
 
     private renderTag = (film: Film) => film.title;
 
@@ -287,16 +289,16 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
         this.selectFilms([film]);
     }
 
-    private selectFilms(filmsToSelect: Film[]) {
+    private selectFilms(filmsToSelect: readonly Film[]) {
         this.setState(({ createdItems, films, items }) => {
             let nextCreatedItems = createdItems.slice();
             let nextFilms = films.slice();
             let nextItems = items.slice();
 
             filmsToSelect.forEach(film => {
                 const results = maybeAddCreatedFilmToArrays(nextItems, nextCreatedItems, film);
-                nextItems = results.items;
-                nextCreatedItems = results.createdItems;
+                nextItems = results.items.slice();
+                nextCreatedItems = results.createdItems.slice();
                 // Avoid re-creating an item that is already selected (the "Create
                 // Item" option will be shown even if it matches an already selected
                 // item).
@@ -336,7 +338,7 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
         }
     };
 
-    private handleFilmsPaste = (films: Film[]) => {
+    private handleFilmsPaste = (films: readonly Film[]) => {
         // On paste, don't bother with deselecting already selected values, just
         // add the new ones.
         this.selectFilms(films);

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

@@ -92,7 +92,7 @@ export class OmnibarExample extends React.PureComponent<ExampleProps, OmnibarExa
                         <KeyComboTag combo="shift + o" />
                     </span>
 
-                    <Omnibar<Film>
+                    <Omnibar
                         {...this.state}
                         createNewItemFromQuery={maybeCreateNewItemFromQuery}
                         createNewItemRenderer={maybeCreateNewItemRenderer}

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

@@ -34,10 +34,10 @@ import {
 export interface SuggestExampleState {
     allowCreate: boolean;
     closeOnSelect: boolean;
-    createdItems: Film[];
+    createdItems: readonly Film[];
     disabled: boolean;
     fill: boolean;
-    items: Film[];
+    items: readonly Film[];
     matchTargetWidth: boolean;
     minimal: boolean;
     openOnKeyDown: boolean;
@@ -92,7 +92,7 @@ export class SuggestExample extends React.PureComponent<ExampleProps, SuggestExa
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
-                <Suggest<Film>
+                <Suggest
                     {...flags}
                     createNewItemFromQuery={maybeCreateNewItemFromQuery}
                     createNewItemRenderer={maybeCreateNewItemRenderer}

packages/select/src/__examples__/filmSelect.tsx

@@ -35,7 +35,7 @@ import {
 } from "./films";
 
 type FilmSelectProps = Omit<
-    SelectProps<Film>,
+    SelectProps<Film, readonly Film[]>,
     | "createNewItemFromQuery"
     | "createNewItemRenderer"
     | "itemPredicate"
@@ -49,8 +49,8 @@ type FilmSelectProps = Omit<
 };
 
 export function FilmSelect({ allowCreate = false, fill, ...restProps }: FilmSelectProps) {
-    const [items, setItems] = React.useState([...TOP_100_FILMS]);
-    const [createdItems, setCreatedItems] = React.useState<Film[]>([]);
+    const [items, setItems] = React.useState<readonly Film[]>([...TOP_100_FILMS]);
+    const [createdItems, setCreatedItems] = React.useState<readonly Film[]>([]);
     const [selectedFilm, setSelectedFilm] = React.useState<Film | undefined>(undefined);
     const handleItemSelect = React.useCallback(
         (newFilm: Film) => {
@@ -82,7 +82,7 @@ export function FilmSelect({ allowCreate = false, fill, ...restProps }: FilmSele
     );
 
     return (
-        <Select<Film>
+        <Select
             createNewItemFromQuery={allowCreate ? createFilm : undefined}
             createNewItemRenderer={allowCreate ? renderCreateFilmMenuItem : undefined}
             fill={fill}

packages/select/src/__examples__/films.tsx

@@ -30,7 +30,7 @@ export interface Film {
 }
 
 /** Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top */
-export const TOP_100_FILMS: Film[] = [
+export const TOP_100_FILMS: readonly Film[] = [
     { title: "The Shawshank Redemption", year: 1994 },
     { title: "The Godfather", year: 1972 },
     { title: "The Godfather: Part II", year: 1974 },
@@ -270,7 +270,7 @@ export function createFilm(title: string): Film {
     };
 }
 
-export function createFilms(query: string): Film[] {
+export function createFilms(query: string): readonly Film[] {
     const titles = query.split(", ");
     return titles.map((title, index) => ({
         rank: 100 + Math.floor(Math.random() * 100 + index),
@@ -288,23 +288,23 @@ export function doesFilmEqualQuery(film: Film, query: string) {
     return film.title.toLowerCase() === query.toLowerCase();
 }
 
-export function arrayContainsFilm(films: Film[], filmToFind: Film): boolean {
+export function arrayContainsFilm(films: readonly Film[], filmToFind: Film): boolean {
     return films.some((film: Film) => film.title === filmToFind.title);
 }
 
-export function addFilmToArray(films: Film[], filmToAdd: Film) {
+export function addFilmToArray(films: readonly Film[], filmToAdd: Film): readonly Film[] {
     return [...films, filmToAdd];
 }
 
-export function deleteFilmFromArray(films: Film[], filmToDelete: Film) {
+export function deleteFilmFromArray(films: readonly Film[], filmToDelete: Film): readonly Film[] {
     return films.filter(film => film !== filmToDelete);
 }
 
 export function maybeAddCreatedFilmToArrays(
-    items: Film[],
-    createdItems: Film[],
+    items: readonly Film[],
+    createdItems: readonly Film[],
     film: Film,
-): { createdItems: Film[]; items: Film[] } {
+): { createdItems: readonly Film[]; items: readonly Film[] } {
     const isNewlyCreatedItem = !arrayContainsFilm(items, film);
     return {
         createdItems: isNewlyCreatedItem ? addFilmToArray(createdItems, film) : createdItems,
@@ -314,10 +314,10 @@ export function maybeAddCreatedFilmToArrays(
 }
 
 export function maybeDeleteCreatedFilmFromArrays(
-    items: Film[],
-    createdItems: Film[],
+    items: readonly Film[],
+    createdItems: readonly Film[],
     film: Film | undefined,
-): { createdItems: Film[]; items: Film[] } {
+): { createdItems: readonly Film[]; items: readonly Film[] } {
     if (film === undefined) {
         return {
             createdItems,