@rnga/orders/lib/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

'use strict';

exports.__esModule = true;
exports.UsersAutocomplete = undefined;

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _class, _temp2;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _templateObject = _taggedTemplateLiteralLoose(['\n  query users(\n    $where: UserWhereInput!\n    $orderBy: UserOrderByInput\n  ){\n    users(\n      where: $where\n      orderBy: $orderBy\n    ){\n      id\n      username\n      # firstname\n      # lastname\n      fullname\n      image\n    }\n  }\n'], ['\n  query users(\n    $where: UserWhereInput!\n    $orderBy: UserOrderByInput\n  ){\n    users(\n      where: $where\n      orderBy: $orderBy\n    ){\n      id\n      username\n      # firstname\n      # lastname\n      fullname\n      image\n    }\n  }\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _autocomplete = require('autocomplete');

var _autocomplete2 = _interopRequireDefault(_autocomplete);

var _Avatar = require('Avatar');

var _Avatar2 = _interopRequireDefault(_Avatar);

var _List = require('material-ui/List');

var _List2 = _interopRequireDefault(_List);

var _graphqlTag = require('graphql-tag');

var _graphqlTag2 = _interopRequireDefault(_graphqlTag);

var _recompose = require('recompose');

var _materialUi = require('material-ui');

var _IconButton = require('material-ui/IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _Done = require('material-ui-icons/Done');

var _Done2 = _interopRequireDefault(_Done);

var _Clear = require('material-ui-icons/Clear');

var _Clear2 = _interopRequireDefault(_Clear);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }

var styles = _extends({}, _autocomplete.styles, {
  menuListItemText: _extends({}, _autocomplete.styles.menuListItemText, {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    fontWeight: "normal",
    fontSize: "1rem"
  })
});

var usersQuery = (0, _graphqlTag2.default)(_templateObject);

var UsersAutocomplete = exports.UsersAutocomplete = (_temp2 = _class = function (_Component) {
  _inherits(UsersAutocomplete, _Component);

  function UsersAutocomplete() {
    var _temp, _this, _ret;

    _classCallCheck(this, UsersAutocomplete);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
      value: "",
      user: undefined,
      opened: false
    }, _this.onSelect = function (value, item) {

      _this.setState({
        user: item
      });

      var onSelect = _this.props.onSelect;


      return onSelect ? onSelect(value, item) : null;
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  UsersAutocomplete.prototype.onChange = function onChange(event) {
    var _this2 = this;

    var value = event.target.value;


    this.setState({
      value: value
    }, function () {
      return _this2.loadData();
    });
  };

  UsersAutocomplete.prototype.loadData = function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      var value, client, _props, exclude, propValue, users, where;

      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              value = this.state.value;
              client = this.context.client;
              _props = this.props, exclude = _props.exclude, propValue = _props.value;
              users = [];
              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) {

              _context.next = 8;
              return client.query({
                query: usersQuery,
                variables: {
                  where: where,
                  orderBy: "fullname_ASC"
                }
              }).then(function (r) {
                var users = r.data.users;


                return users;
              }).catch(console.error);

            case 8:
              users = _context.sent;


              // }


              this.setState({
                users: users
              });

            case 10:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, this);
    }));

    function loadData() {
      return _ref.apply(this, arguments);
    }

    return loadData;
  }();

  // componentWillMount() {

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

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

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


  UsersAutocomplete.prototype.componentDidMount = function componentDidMount() {

    this.loadData();

    _Component.prototype.componentDidMount && _Component.prototype.componentDidMount.call(this);
  };

  UsersAutocomplete.prototype.submit = function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee2() {
      var user, onSubmit;
      return _regenerator2.default.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              user = this.state.user;
              onSubmit = this.props.onSubmit;
              _context2.next = 4;
              return onSubmit(user).catch(console.error);

            case 4:

              this.resetData();

            case 5:
            case 'end':
              return _context2.stop();
          }
        }
      }, _callee2, this);
    }));

    function submit() {
      return _ref2.apply(this, arguments);
    }

    return submit;
  }();

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

  UsersAutocomplete.prototype.renderUser = function renderUser(item) {
    var fullname = item.fullname,
        username = item.username;


    var text = fullname || username;

    return _react2.default.createElement(
      _react.Fragment,
      null,
      _react2.default.createElement(_Avatar2.default, {
        user: item,
        size: 'small',
        style: {
          marginRight: 5
        }
      }),
      ' ',
      text
    );
  };

  UsersAutocomplete.prototype.render = function render() {
    var _this3 = this;

    var _props2 = this.props,
        classes = _props2.classes,
        onSubmit = _props2.onSubmit,
        propValue = _props2.value,
        inputProps = _props2.inputProps,
        other = _objectWithoutProperties(_props2, ['classes', 'onSubmit', 'value', 'inputProps']);

    var onFocus = other.onFocus,
        error = other.error,
        helperText = other.helperText;


    inputProps = inputProps ? _extends({}, inputProps) : {};

    inputProps = _extends({
      onFocus: onFocus,
      error: error,
      helperText: helperText
    }, inputProps);

    var _state = this.state,
        value = _state.value,
        users = _state.users,
        user = _state.user,
        opened = _state.opened;


    var items = [];

    if (users) {
      users.map(function (user) {
        var value = user.id,
            fullname = user.fullname,
            username = user.username;


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

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

    return _react2.default.createElement(_autocomplete2.default, _extends({}, other, {
      inputProps: inputProps,
      onChange: function onChange(event) {
        return _this3.onChange(event);
      },
      value: !opened && user ? user.fullname || user.username : value || "",
      items: items,
      onSelect: this.onSelect,
      onMenuVisibilityChange: function onMenuVisibilityChange(opened) {
        return _this3.setState({
          opened: 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: function renderItem(item, isHighlighted, style) {

        // const text = getItemText(item);

        var label = item.label;


        var text = label;

        return _react2.default.createElement(
          _List.ListItem,
          {
            key: item.value,
            className: [classes.menuListItem, isHighlighted || item.label === value || item.value === value ? "actived" : ""].join(" ")
          },
          _react2.default.createElement(
            'div',
            {
              className: classes.menuListItemText
            },
            _this3.renderUser(item)
          )
        );
      }
    }));
  };

  return UsersAutocomplete;
}(_react.Component), _class.contextTypes = {
  client: _propTypes2.default.object.isRequired
}, _temp2);
UsersAutocomplete.propTypes = process.env.NODE_ENV !== "production" ? {
  classes: _propTypes2.default.object.isRequired,

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

  // Выполнение при подтверждении
  onSubmit: _propTypes2.default.func
} : {};
exports.default = (0, _materialUi.withStyles)(styles)(UsersAutocomplete);