@rnga/orders/src/node_modules/ui/Users/Autocomplete/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'

import Autocomplete, { styles as stylesProto } from 'autocomplete';
import Avatar from 'Avatar';

import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List';

import gql from 'graphql-tag';
import { withState } from 'recompose';
import { withStyles } from 'material-ui';
import IconButton from 'material-ui/IconButton';

import DoneIcon from 'material-ui-icons/Done';
import ClearIcon from 'material-ui-icons/Clear';

const styles = {
  ...stylesProto,
  menuListItemText: {
    ...stylesProto.menuListItemText,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    fontWeight: "normal",
    fontSize: "1rem",
  },
}


const usersQuery = gql`
  query users(
    $where: UserWhereInput!
    $orderBy: UserOrderByInput
  ){
    users(
      where: $where
      orderBy: $orderBy
    ){
      id
      username
      # firstname
      # lastname
      fullname
      image
    }
  }
`;

export class UsersAutocomplete extends Component {

  static propTypes = {
    classes: PropTypes.object.isRequired,

    // Кого исключить из результатов поиска
    exclude: PropTypes.array,

    // Выполнение при подтверждении
    onSubmit: PropTypes.func,
  }

  static contextTypes = {
    client: PropTypes.object.isRequired,
  }

  state = {
    value: "",
    user: undefined,
    opened: false,
  }

  onChange(event) {

    const {
      value,
    } = event.target;

    this.setState({
      value,
    }, () => this.loadData());


  }


  async loadData() {

    const {
      value,
    } = this.state;

    const {
      client,
    } = this.context;

    const {
      exclude,
      value: propValue,
    } = this.props;

    let users = [];


    let where = value ? {
      OR: [{
        id: propValue
      }, {
        fullname_contains: value
      }, {
        //   firstname_contains: $query
        // }, {
        //   lastname_contains: $query
        // }, {
        email_contains: value
      }]
    } : {};

    if (exclude && exclude.length) {
      where.id_not_in = exclude;
    }

    // if (value) {

    users = await client.query({
      query: usersQuery,
      variables: {
        where,
        orderBy: "fullname_ASC",
      },
    })
      .then(r => {


        const {
          users,
        } = r.data;

        return users;

      })
      .catch(console.error);

    // }


    this.setState({
      users,
    });

  }


  // componentWillMount() {

  //   const {
  //     value,
  //   } = this.props;

  //   this.state = {
  //     ...this.state,
  //     value,
  //   };

  //   super.componentWillMount && super.componentWillMount();
  // }


  componentDidMount() {

    this.loadData();

    super.componentDidMount && super.componentDidMount();
  }


  onSelect = (value, item) => {

    this.setState({
      user: item,
    });

    const {
      onSelect,
    } = this.props;

    return onSelect ? onSelect(value, item) : null;

  }


  async submit() {

    const {
      user,
    } = this.state;

    const {
      onSubmit,
    } = this.props;

    await onSubmit(user)
      .catch(console.error);

    this.resetData();
  }


  resetData() {
    this.setState({
      user: null,
      value: "",
      users: [],
    });
  }


  renderUser(item) {

    const {
      fullname,
      username,
    } = item;

    const text = fullname || username;

    return <Fragment>
      <Avatar
        user={item}
        size="small"
        style={{
          marginRight: 5,
        }}
      /> {text}
    </Fragment>
  }

  render() {

    let {
      classes,
      onSubmit,
      value: propValue,
      inputProps,
      ...other
    } = this.props;


    let {
      onFocus,
      error,
      helperText,
    } = other;

    inputProps = inputProps ? { ...inputProps } : {}

    inputProps = {
      onFocus,
      error,
      helperText,
      ...inputProps,
    }

    let {
      value,
      users,
      user,
      opened,
    } = this.state;

    let items = [];

    if (users) {
      users.map(user => {

        const {
          id: value,
          fullname,
          username,
        } = user;


        items.push({
          ...user,
          value,
          label: fullname || username,
        });
        // items.push(user);
      });


      if (!user && (value || propValue)) {
        user = users.find(n => n.id === value || n.id === propValue);
      }
    }

    return (
      <Autocomplete
        {...other}
        inputProps={inputProps}
        onChange={event => this.onChange(event)}
        value={!opened && user ? user.fullname || user.username : value || ""}
        items={items}
        onSelect={this.onSelect}
        onMenuVisibilityChange={opened => this.setState({
          opened,
        })}
        // renderInput={!opened && user
        //   ?
        //   props => {



        //     return <div
        //       style={{
        //         display: "flex",
        //         flexDirection: "row",
        //         flexWrap: "nowrap",
        //         alignItems: "center",
        //       }}
        //     >
        //       {this.renderUser(user)}

        //       {onSubmit
        //         ?
        //         <Fragment>
        //           <IconButton
        //             style={{
        //               width: 34,
        //               height: 34,
        //             }}
        //             onClick={event => this.submit()}
        //           >
        //             <DoneIcon
        //               style={{
        //                 color: "green",
        //               }}
        //             />
        //           </IconButton>

        //           <IconButton
        //             style={{
        //               width: 34,
        //               height: 34,
        //             }}
        //             onClick={event => this.resetData()}
        //           >
        //             <ClearIcon
        //               style={{
        //                 color: "red",
        //               }}
        //             />
        //           </IconButton>
        //         </Fragment>
        //         :
        //         null
        //       }

        //     </div>
        //   }
        //   :
        //   undefined
        // }
        renderItem={(item, isHighlighted, style) => {




          // const text = getItemText(item);

          const {
            label,
          } = item;

          const text = label;

          return <ListItem
            key={item.value}
            className={[classes.menuListItem, (isHighlighted || item.label === value || item.value === value) ? "actived" : ""].join(" ")}
          >
            <div
              className={classes.menuListItemText}
            >
              {this.renderUser(item)}
            </div>
          </ListItem>
        }}
      />
    )
  }
}

export default withStyles(styles)(UsersAutocomplete);