Reaction-select - Показать другой текст / метку для выпадающего и Control? - PullRequest
Новая
       15

Reaction-select - Показать другой текст / метку для выпадающего и Control?

0 голосов
/ 24 сентября 2018

В моем раскрывающемся списке «реакция выбора» метки имеют длину в сотни символов.В контрольных микросхемах я хотел бы показать более короткую версию выпадающего меню.Возможно ли это?

Редактировать: я хочу установить текст чипа, а не ширину пикселя.

1 Ответ

0 голосов
/ 24 сентября 2018

РЕШЕНИЕ 1

Вы можете настроить стиль управляющих микросхем при использовании кратного значения Select с подпорками styles, как показано в следующем примере: 

const customStyles = {

    multiValue: (base, state) => ({
      ...base,
     // set all chips to a maximum of 100 pixels
      maxWidth: "100px"
    })
  };

Вот живой пример более коротких версий длинного лейбла.Я поместил специальный (и некрасивый) фон, чтобы вы могли видеть, где начинается и заканчивается каждый контейнер.

РЕШЕНИЕ 2

После запроса на комментарий это альтернативное решение для сокращениявыбранный вариант.Вы можете перезаписать компонент MultiValue с помощью реквизита components.Внутри этого компонента вы получите доступ к метке опции и примените функцию substring, чтобы укоротить метку как можно короче. 

const MultiValue = props => {
// truncate the string to 3 characters
   const content = props.children.substring(0, 3);
   return <components.MultiValue {...props}>{content}...</components.MultiValue>;
};

Вот живой пример этой альтернативной опции.

РЕШЕНИЕ 3

По той же идее, что и решение 2, если вы заранее знаете метки опций и обрезку, которую хотите отобразить, вы можете установить дополнительные опорыв вашем массиве options, например: 

const options = [
  {
    label:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue sem, bibendum quis mollis amet.",
    // you can name this new prop has you want
    chipLabel: "Lorem ipsum",
    value: "1"
  },
  {
    label:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
    chipLabel: "Sed ut perspiciatis",
    value: "2"
  },
  {
    label:
      "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?",
    chipLabel: "Ut enim",
    value: "3"
  }
];

, а затем перезапишите компонент следующим кодом: 

const MultiValue = props => (
  <components.MultiValue {...props}>
    {props.data.chipLabel}
  </components.MultiValue>
);

<Select options={options} components={{ MultiValue }} />

Вот живой пример .

РЕШЕНИЕ ДЛЯ ОДНОГО ЗНАЧЕНИЯ

Если вы хотите отобразить значение, отличное от параметров SingleValue, выберите Я рекомендую использовать решение 3 и измените компонент следующим образом:

const SingleValue = props => (
  <components.SingleValue {...props}>
    {props.data.chipLabel}
  </components.SingleValue>
);

<Select options={options} components={{ SingleValue }} />

Здесь живой пример .

...