|
| 1 | +/* eslint-disable no-use-before-define */ |
| 2 | +import React from 'react'; |
| 3 | +import TextField from '@material-ui/core/TextField'; |
| 4 | +import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete'; |
| 5 | + |
| 6 | +const filter = createFilterOptions(); |
| 7 | + |
| 8 | +export default function FreeSoloCreateOption() { |
| 9 | + const [value, setValue] = React.useState<FilmOptionType | null>(null); |
| 10 | + |
| 11 | + return ( |
| 12 | + <Autocomplete |
| 13 | + value={value} |
| 14 | + onChange={(event: any, newValue: FilmOptionType | null) => { |
| 15 | + if (newValue && newValue.inputValue) { |
| 16 | + setValue({ |
| 17 | + title: newValue.inputValue, |
| 18 | + }); |
| 19 | + return; |
| 20 | + } |
| 21 | + |
| 22 | + setValue(newValue); |
| 23 | + }} |
| 24 | + filterOptions={(options, params) => { |
| 25 | + const filtered = filter(options, params) as FilmOptionType[]; |
| 26 | + |
| 27 | + if (params.inputValue !== '') { |
| 28 | + filtered.push({ |
| 29 | + inputValue: params.inputValue, |
| 30 | + title: `Add "${params.inputValue}"`, |
| 31 | + }); |
| 32 | + } |
| 33 | + |
| 34 | + return filtered; |
| 35 | + }} |
| 36 | + id="free-solo-with-text-demo" |
| 37 | + options={top100Films as FilmOptionType[]} |
| 38 | + getOptionLabel={option => { |
| 39 | + // e.g value selected with enter, right from the input |
| 40 | + if (typeof option === 'string') { |
| 41 | + return option; |
| 42 | + } |
| 43 | + if (option.inputValue) { |
| 44 | + return option.inputValue; |
| 45 | + } |
| 46 | + return option.title; |
| 47 | + }} |
| 48 | + renderOption={option => option.title} |
| 49 | + style={{ width: 300 }} |
| 50 | + freeSolo |
| 51 | + renderInput={params => ( |
| 52 | + <TextField {...params} label="Free solo with text demo" variant="outlined" fullWidth /> |
| 53 | + )} |
| 54 | + /> |
| 55 | + ); |
| 56 | +} |
| 57 | + |
| 58 | +interface FilmOptionType { |
| 59 | + inputValue?: string; |
| 60 | + title: string; |
| 61 | + year?: number; |
| 62 | +} |
| 63 | + |
| 64 | +// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top |
| 65 | +const top100Films = [ |
| 66 | + { title: 'The Shawshank Redemption', year: 1994 }, |
| 67 | + { title: 'The Godfather', year: 1972 }, |
| 68 | + { title: 'The Godfather: Part II', year: 1974 }, |
| 69 | + { title: 'The Dark Knight', year: 2008 }, |
| 70 | + { title: '12 Angry Men', year: 1957 }, |
| 71 | + { title: "Schindler's List", year: 1993 }, |
| 72 | + { title: 'Pulp Fiction', year: 1994 }, |
| 73 | + { title: 'The Lord of the Rings: The Return of the King', year: 2003 }, |
| 74 | + { title: 'The Good, the Bad and the Ugly', year: 1966 }, |
| 75 | + { title: 'Fight Club', year: 1999 }, |
| 76 | + { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 }, |
| 77 | + { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 }, |
| 78 | + { title: 'Forrest Gump', year: 1994 }, |
| 79 | + { title: 'Inception', year: 2010 }, |
| 80 | + { title: 'The Lord of the Rings: The Two Towers', year: 2002 }, |
| 81 | + { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, |
| 82 | + { title: 'Goodfellas', year: 1990 }, |
| 83 | + { title: 'The Matrix', year: 1999 }, |
| 84 | + { title: 'Seven Samurai', year: 1954 }, |
| 85 | + { title: 'Star Wars: Episode IV - A New Hope', year: 1977 }, |
| 86 | + { title: 'City of God', year: 2002 }, |
| 87 | + { title: 'Se7en', year: 1995 }, |
| 88 | + { title: 'The Silence of the Lambs', year: 1991 }, |
| 89 | + { title: "It's a Wonderful Life", year: 1946 }, |
| 90 | + { title: 'Life Is Beautiful', year: 1997 }, |
| 91 | + { title: 'The Usual Suspects', year: 1995 }, |
| 92 | + { title: 'Léon: The Professional', year: 1994 }, |
| 93 | + { title: 'Spirited Away', year: 2001 }, |
| 94 | + { title: 'Saving Private Ryan', year: 1998 }, |
| 95 | + { title: 'Once Upon a Time in the West', year: 1968 }, |
| 96 | + { title: 'American History X', year: 1998 }, |
| 97 | + { title: 'Interstellar', year: 2014 }, |
| 98 | + { title: 'Casablanca', year: 1942 }, |
| 99 | + { title: 'City Lights', year: 1931 }, |
| 100 | + { title: 'Psycho', year: 1960 }, |
| 101 | + { title: 'The Green Mile', year: 1999 }, |
| 102 | + { title: 'The Intouchables', year: 2011 }, |
| 103 | + { title: 'Modern Times', year: 1936 }, |
| 104 | + { title: 'Raiders of the Lost Ark', year: 1981 }, |
| 105 | + { title: 'Rear Window', year: 1954 }, |
| 106 | + { title: 'The Pianist', year: 2002 }, |
| 107 | + { title: 'The Departed', year: 2006 }, |
| 108 | + { title: 'Terminator 2: Judgment Day', year: 1991 }, |
| 109 | + { title: 'Back to the Future', year: 1985 }, |
| 110 | + { title: 'Whiplash', year: 2014 }, |
| 111 | + { title: 'Gladiator', year: 2000 }, |
| 112 | + { title: 'Memento', year: 2000 }, |
| 113 | + { title: 'The Prestige', year: 2006 }, |
| 114 | + { title: 'The Lion King', year: 1994 }, |
| 115 | + { title: 'Apocalypse Now', year: 1979 }, |
| 116 | + { title: 'Alien', year: 1979 }, |
| 117 | + { title: 'Sunset Boulevard', year: 1950 }, |
| 118 | + { |
| 119 | + title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', |
| 120 | + year: 1964, |
| 121 | + }, |
| 122 | + { title: 'The Great Dictator', year: 1940 }, |
| 123 | + { title: 'Cinema Paradiso', year: 1988 }, |
| 124 | + { title: 'The Lives of Others', year: 2006 }, |
| 125 | + { title: 'Grave of the Fireflies', year: 1988 }, |
| 126 | + { title: 'Paths of Glory', year: 1957 }, |
| 127 | + { title: 'Django Unchained', year: 2012 }, |
| 128 | + { title: 'The Shining', year: 1980 }, |
| 129 | + { title: 'WALL·E', year: 2008 }, |
| 130 | + { title: 'American Beauty', year: 1999 }, |
| 131 | + { title: 'The Dark Knight Rises', year: 2012 }, |
| 132 | + { title: 'Princess Mononoke', year: 1997 }, |
| 133 | + { title: 'Aliens', year: 1986 }, |
| 134 | + { title: 'Oldboy', year: 2003 }, |
| 135 | + { title: 'Once Upon a Time in America', year: 1984 }, |
| 136 | + { title: 'Witness for the Prosecution', year: 1957 }, |
| 137 | + { title: 'Das Boot', year: 1981 }, |
| 138 | + { title: 'Citizen Kane', year: 1941 }, |
| 139 | + { title: 'North by Northwest', year: 1959 }, |
| 140 | + { title: 'Vertigo', year: 1958 }, |
| 141 | + { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 }, |
| 142 | + { title: 'Reservoir Dogs', year: 1992 }, |
| 143 | + { title: 'Braveheart', year: 1995 }, |
| 144 | + { title: 'M', year: 1931 }, |
| 145 | + { title: 'Requiem for a Dream', year: 2000 }, |
| 146 | + { title: 'Amélie', year: 2001 }, |
| 147 | + { title: 'A Clockwork Orange', year: 1971 }, |
| 148 | + { title: 'Like Stars on Earth', year: 2007 }, |
| 149 | + { title: 'Taxi Driver', year: 1976 }, |
| 150 | + { title: 'Lawrence of Arabia', year: 1962 }, |
| 151 | + { title: 'Double Indemnity', year: 1944 }, |
| 152 | + { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 }, |
| 153 | + { title: 'Amadeus', year: 1984 }, |
| 154 | + { title: 'To Kill a Mockingbird', year: 1962 }, |
| 155 | + { title: 'Toy Story 3', year: 2010 }, |
| 156 | + { title: 'Logan', year: 2017 }, |
| 157 | + { title: 'Full Metal Jacket', year: 1987 }, |
| 158 | + { title: 'Dangal', year: 2016 }, |
| 159 | + { title: 'The Sting', year: 1973 }, |
| 160 | + { title: '2001: A Space Odyssey', year: 1968 }, |
| 161 | + { title: "Singin' in the Rain", year: 1952 }, |
| 162 | + { title: 'Toy Story', year: 1995 }, |
| 163 | + { title: 'Bicycle Thieves', year: 1948 }, |
| 164 | + { title: 'The Kid', year: 1921 }, |
| 165 | + { title: 'Inglourious Basterds', year: 2009 }, |
| 166 | + { title: 'Snatch', year: 2000 }, |
| 167 | + { title: '3 Idiots', year: 2009 }, |
| 168 | + { title: 'Monty Python and the Holy Grail', year: 1975 }, |
| 169 | +]; |
0 commit comments