Реактивный выбор: возможность добавления метки группы - PullRequest
Новая
       13

Реактивный выбор: возможность добавления метки группы

0 голосов
/ 08 ноября 2018

Я создал эту классную песочницу, которая использует Reaction-select и возможность создания. Это позволяет вам выбрать из предварительно заполненного выпадающего списка и в то же время создать пользовательский параметр, введя в поле выбора. После того, как вы ввели в поле ваш вариант становится доступным в списке выбора.

Я добавил опции, которые нужно сгруппировать - существующие поля в порядке, но новые опции, которые я хотел бы сгруппировать по значению по умолчанию, например, "новая группа".

Любая помощь будет оценена.

https://codesandbox.io/s/p5x7m478rm

import React from "react";
import { Field, reduxForm, FieldArray } from "redux-form";
import TextField from "material-ui/TextField";
import { RadioButton, RadioButtonGroup } from "material-ui/RadioButton";
import Checkbox from "material-ui/Checkbox";
import SelectField from "material-ui/SelectField";
import MenuItem from "material-ui/MenuItem";
import asyncValidate from "./asyncValidate";
import validate from "./validate";
import CreatableSelect from "react-select/lib/Creatable";
const CustomStyle = {
  option: (base, state) => ({
    ...base,
    display: "inline",
    marginRight: "10px",
    backgroundColor: state.isSelected ? "#00285C" : "#eee",
    cursor: "pointer"
  }),
  menuList: () => ({
    padding: 10,
    display: "inline-flex"
  }),
  menu: () => ({
    position: "relative"
  })
};

const createOption = (label: string) => ({
  label,
  value: label.toLowerCase().replace(/\W/g, "")
});

const formatGroupLabel = data => (
  <div>
    <span>{data.label}</span>
  </div>
);

class LastNameSelectInput extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    value: this.props.options[0].options,
    options: this.props.options
  };
  handleCreate = input => (inputValue: any) => {
    this.setState({ isLoading: true });
    setTimeout(() => {
      const { options, value } = this.state;
      const newOption = createOption(inputValue);
      this.setState({
        isLoading: false,
        options: [...options, newOption],
        value: newOption,
        formatGroupLabel: "new label"
      });
      input.onChange(newOption);
    }, 1000);
  };

  isValidNewOption = (inputValue, selectValue, selectOptions) => {
    if (
      inputValue.trim().length === 0 ||
      selectOptions.find(option => option.name === inputValue)
    ) {
      return false;
    }
    return true;
  };

  render() {
    const { input, options } = this.props;
    return (
      <div>
        <style>
          {`.react-select__dropdown-indicator,.react-select__indicator-separator {
          display: none;
        }`}
        </style>
        <CreatableSelect
          classNamePrefix="react-select"
          options={this.state.options}
          menuIsOpen={true}
          onChange={value => {
            let newValue = input.onChange(value);
            this.setState({ value: newValue });
          }}
          onBlur={() => input.onBlur(input.value)}
          onCreateOption={this.handleCreate(input)}
          value={this.state.value}
          styles={CustomStyle}
          isClearable
          isValidNewOption={this.isValidNewOption}
          formatGroupLabel={formatGroupLabel}
        />
      </div>
    );
  }
}

const MaterialUiForm = props => {
  const { handleSubmit, options, pristine, reset, submitting } = props;

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field name="option" component={LastNameSelectInput} {...props} />
      </div>
    </form>
  );
};

export default reduxForm({
  form: "MaterialUiForm", // a unique identifier for this form
  validate,
  asyncValidate
})(MaterialUiForm);

1 Ответ

0 голосов
/ 08 ноября 2018

Для достижения вашей цели я изменил предоставленную вами функцию handleCreate и реквизиты options. Вы можете увидеть живой пример здесь .

В MaterialUiForm.js 

handleCreate = input => (inputValue: any) => {
this.setState({ isLoading: true });
setTimeout(() => {
  const { options } = this.state;
  const newOption = createOption(inputValue);
  options.map(option => {
    if (option.label === "New group") {
      return {
        label: option.label,
        options: option.options.push(newOption)
      };
    }
    return option;
  });
  this.setState({
    isLoading: false,
    options: [...options],
    value: newOption,
    formatGroupLabel: "new label"
  });
  input.onChange(newOption);
}, 1000);

In index.js 

<MaterialUiForm
      onSubmit={showResults}
      initialValues={{
        option: colourOptions,
        option: flavourOptions
      }}
      options={[
        {
          label: "New group",
          options: []
        },
        {
          label: "Colours",
          options: colourOptions
        },
        {
          label: "Flavours",
          options: flavourOptions
        }
      ]}
    />

Есть другой и, вероятно, более умный способ сделать это, но логика хорошая.

...