strapi/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js

/**
 *
 * SelectMany
 *
 */

import React from 'react';
import Select from 'react-select';
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css';
import { isArray, isNull, isUndefined, get } from 'lodash';

import request from 'utils/request';
import templateObject from 'utils/templateObject';

import styles from './styles.scss';

class SelectMany extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
    };
  }

  getOptions = (query) => {
    const params = {
      limit: 20,
    };

    // Set `query` parameter if necessary
    if (query) {
      params.query = query;
      params.queryAttribute = this.props.relation.displayedAttribute;
    }

    // Request URL
    const requestUrlSuffix = query && this.props.record.get(this.props.relation.alias).toJS() ? this.props.record.get(this.props.relation.alias).toJS() : '';
    const requestUrl = `/content-manager/explorer/${this.props.relation.model || this.props.relation.collection}/${requestUrlSuffix}`;

    // Call our request helper (see 'utils/request')
    return request(requestUrl, {
      method: 'GET',
      params,
    })
      .then(response => {
        const options = isArray(response) ?
          response.map(item => ({
            value: item,
            label: templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField,
          })) :
          [{
            value: response,
            label: response[this.props.relation.displayedAttribute],
          }];

        return { options };
      })
      .catch(() => {
        window.Strapi.notification.error('An error occurred during relationship fetch.');
      });
  }

  handleChange = (value) => {
    this.props.setRecordAttribute(this.props.relation.alias, value);
  }

  render() {
    const description = this.props.relation.description
      ? <p>{this.props.relation.description}</p>
      : '';

    const value = this.props.record.get(this.props.relation.alias);

    /* eslint-disable jsx-a11y/label-has-for */
    return (
      <div className={`form-group ${styles.selectMany}`}>
        <label htmlFor={this.props.relation.alias}>{this.props.relation.alias}</label>
        {description}
        <Select.Async
          onChange={this.handleChange}
          loadOptions={this.getOptions}
          multi
          value={isNull(value) || isUndefined(value) || value.size === 0 ? null : value.toJS().map(item => ({
            value: get(item, 'value') || item,
            label: item.label || templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField,
          }))}
        />
      </div>
    );
    /* eslint-disable jsx-a11y/label-has-for */
  }
}

SelectMany.propTypes = {
  record: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.bool,
  ]).isRequired,
  relation: PropTypes.object.isRequired,
  setRecordAttribute: PropTypes.func.isRequired,
};

export default SelectMany;