Усеченное значение автозаполнения пользовательского интерфейса материала (копирование усеченного значения renderValue в пользовательском интерфейсе материала)

Question

В качестве фона

Используя Material UI Multiple Select, вы можете обрезать значение, отображаемое после выбора, вместо перехода к другой строке (установив для renderValue значение .join параметры selected , что дает функциональность «вариант А, вариант Б, ...»). Важным моментом здесь является то, что он добавляет "...", когда выбранные параметры слишком длинные для размещения в одной строке, вместо того, чтобы расширяться до следующей строки.

Например, следующее работает с Multiple Select:

// Truncated value (I DO want this, for `Autocomplete`)
<Select
  labelId="demo-mutiple-name-label"
  id="demo-mutiple-name"
  multiple
  value={personName}
  onChange={handleChange}
  input={<Input />}
  renderValue={selected => selected.join(", ")}
  MenuProps={MenuProps}
>
  {names.map(name => (
    <MenuItem
      key={name}
      value={name}
      style={getStyles(name, personName, theme)}
    >
      {name}
    </MenuItem>
  ))}
</Select>

// – VERUS –
// chips that wrap to multiple lines (DON'T want this)

<Select
  labelId="demo-mutiple-chip-label"
  id="demo-mutiple-chip"
  multiple
  value={personName}
  onChange={handleChange}
  input={<Input id="select-multiple-chip" />}
  renderValue={selected => (
    <div className={classes.chips}>
      {selected.map(value => (
        <Chip key={value} label={value} className={classes.chip} />
      ))}
    </div>
  )}
  MenuProps={MenuProps}
>
  {names.map(name => (
    <MenuItem
      key={name}
      value={name}
      style={getStyles(name, personName, theme)}
    >
      {name}
    </MenuItem>
  ))}
</Select>

Демонстрация множественного выбора

Я пытаюсь воспроизвести описанную выше функциональность с помощью пользовательского интерфейса материала Autocomplete

, но, похоже, нет очевидного способа сделать это.

Я пробовал несколько подходов:

<Autocomplete
  multiple
  id="tags-standard"
  options={top100Films}
  getOptionLabel={option => option.title}
  defaultValue={[top100Films[13]]}
  renderTags={selected => {
    console.log("selected = ", selected);
    let renderTagsValue = selected
      .map(function(elem) {
        return elem.title;
      })
      .join(", ");

    return (
      <Typography noWrap={true} color="textPrimary">
        {renderTagsValue}
      </Typography>
    );
  }}
  renderInput={params => (
    <TextField
      {...params}
      variant="standard"
      label="Multiple values"
      placeholder="Favorites"
    />
  )}
/>

1. renderTags - Поскольку renderValue не подходит для Autocomplete, я добавил .join к renderTags, но при этом создается только длинная строка, которая продолжает переноситься на следующую строку
2. disableListWrap - я надеялся, что это предотвратит перенос чего-либо на следующую строку, но она все равно переносится на следующую строку
3. limitTags - Это не работает, поскольку теги могут иметь переменную длину. 1, 2 или 3 могут уместиться в строке в зависимости от того, какой тег выбран
4. renderTags И Typography - то же, что и # 1, плюс возврат элемента Typography с noWrap, установленным в true (это близко, но все еще неправильно

Моя ближайшая попытка - №4, но все еще не так. Он обрезает, но по-прежнему переносит текст заполнителя на следующую строку, делая высоту текстового поля расширяться по вертикали, а не оставаться фиксированным (как в демонстрации с Multiple Select).

Демонстрация ближайшей попытки

Кто-нибудь знает, как реплицировать усеченное значение renderValue Material UI Multiple Select с Material UI Autocomplete?

Answer 1

Я получаю разумное поведение, просто добавляя style={{ maxWidth: 360 }} к Typography в вашей песочнице, чтобы оставить место для заполнителя и немного места для ввода.

Вот полный код:

/* eslint-disable no-use-before-define */
import React from "react";
import Chip from "@material-ui/core/Chip";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: 500,
    "& > * + *": {
      marginTop: theme.spacing(3)
    }
  }
}));

export default function Tags() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Autocomplete
        multiple
        disableListWrap={true}
        disableCloseOnSelect
        id="tags-standard"
        options={top100Films}
        getOptionLabel={option => option.title}
        defaultValue={[top100Films[13]]}
        renderTags={selected => {
          console.log("selected = ", selected);
          let renderTagsValue = selected
            .map(function(elem) {
              return elem.title;
            })
            .join(", ");

          return (
            <Typography
              style={{ maxWidth: 360 }}
              noWrap={true}
              color="textPrimary"
            >
              {renderTagsValue}
            </Typography>
          );
        }}
        renderInput={params => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
      />
    </div>
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: "Pulp Fiction", year: 1994 },
  { title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { title: "The Good, the Bad and the Ugly", year: 1966 },
  { title: "Fight Club", year: 1999 },
  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },
  { title: "Forrest Gump", year: 1994 },
  { title: "Inception", year: 2010 },
  { title: "The Lord of the Rings: The Two Towers", year: 2002 },
  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { title: "Goodfellas", year: 1990 },
  { title: "The Matrix", year: 1999 },
  { title: "Seven Samurai", year: 1954 },
  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },
  { title: "City of God", year: 2002 },
  { title: "Se7en", year: 1995 },
  { title: "The Silence of the Lambs", year: 1991 },
  { title: "It's a Wonderful Life", year: 1946 },
  { title: "Life Is Beautiful", year: 1997 },
  { title: "The Usual Suspects", year: 1995 },
  { title: "Léon: The Professional", year: 1994 },
  { title: "Spirited Away", year: 2001 },
  { title: "Saving Private Ryan", year: 1998 },
  { title: "Once Upon a Time in the West", year: 1968 },
  { title: "American History X", year: 1998 },
  { title: "Interstellar", year: 2014 },
  { title: "Casablanca", year: 1942 },
  { title: "City Lights", year: 1931 },
  { title: "Psycho", year: 1960 },
  { title: "The Green Mile", year: 1999 },
  { title: "The Intouchables", year: 2011 },
  { title: "Modern Times", year: 1936 },
  { title: "Raiders of the Lost Ark", year: 1981 },
  { title: "Rear Window", year: 1954 },
  { title: "The Pianist", year: 2002 },
  { title: "The Departed", year: 2006 },
  { title: "Terminator 2: Judgment Day", year: 1991 },
  { title: "Back to the Future", year: 1985 },
  { title: "Whiplash", year: 2014 },
  { title: "Gladiator", year: 2000 },
  { title: "Memento", year: 2000 },
  { title: "The Prestige", year: 2006 },
  { title: "The Lion King", year: 1994 },
  { title: "Apocalypse Now", year: 1979 },
  { title: "Alien", year: 1979 },
  { title: "Sunset Boulevard", year: 1950 },
  {
    title:
      "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
    year: 1964
  },
  { title: "The Great Dictator", year: 1940 },
  { title: "Cinema Paradiso", year: 1988 },
  { title: "The Lives of Others", year: 2006 },
  { title: "Grave of the Fireflies", year: 1988 },
  { title: "Paths of Glory", year: 1957 },
  { title: "Django Unchained", year: 2012 },
  { title: "The Shining", year: 1980 },
  { title: "WALL·E", year: 2008 },
  { title: "American Beauty", year: 1999 },
  { title: "The Dark Knight Rises", year: 2012 },
  { title: "Princess Mononoke", year: 1997 },
  { title: "Aliens", year: 1986 },
  { title: "Oldboy", year: 2003 },
  { title: "Once Upon a Time in America", year: 1984 },
  { title: "Witness for the Prosecution", year: 1957 },
  { title: "Das Boot", year: 1981 },
  { title: "Citizen Kane", year: 1941 },
  { title: "North by Northwest", year: 1959 },
  { title: "Vertigo", year: 1958 },
  { title: "Star Wars: Episode VI - Return of the Jedi", year: 1983 },
  { title: "Reservoir Dogs", year: 1992 },
  { title: "Braveheart", year: 1995 },
  { title: "M", year: 1931 },
  { title: "Requiem for a Dream", year: 2000 },
  { title: "Amélie", year: 2001 },
  { title: "A Clockwork Orange", year: 1971 },
  { title: "Like Stars on Earth", year: 2007 },
  { title: "Taxi Driver", year: 1976 },
  { title: "Lawrence of Arabia", year: 1962 },
  { title: "Double Indemnity", year: 1944 },
  { title: "Eternal Sunshine of the Spotless Mind", year: 2004 },
  { title: "Amadeus", year: 1984 },
  { title: "To Kill a Mockingbird", year: 1962 },
  { title: "Toy Story 3", year: 2010 },
  { title: "Logan", year: 2017 },
  { title: "Full Metal Jacket", year: 1987 },
  { title: "Dangal", year: 2016 },
  { title: "The Sting", year: 1973 },
  { title: "2001: A Space Odyssey", year: 1968 },
  { title: "Singin' in the Rain", year: 1952 },
  { title: "Toy Story", year: 1995 },
  { title: "Bicycle Thieves", year: 1948 },
  { title: "The Kid", year: 1921 },
  { title: "Inglourious Basterds", year: 2009 },
  { title: "Snatch", year: 2000 },
  { title: "3 Idiots", year: 2009 },
  { title: "Monty Python and the Holy Grail", year: 1975 }
];

Редактировать автозаполнение