joywok-material-components/lib/select/customSelect.js

<h1 align="center"> Joywok Material Components </h1>

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styles = require('@material-ui/core/styles');

var _InputBase = require('@material-ui/core/InputBase/InputBase');

var _InputBase2 = _interopRequireDefault(_InputBase);

var _Popper = require('@material-ui/core/Popper');

var _Popper2 = _interopRequireDefault(_Popper);

var _Fade = require('@material-ui/core/Fade');

var _Fade2 = _interopRequireDefault(_Fade);

var _Paper = require('@material-ui/core/Paper');

var _Paper2 = _interopRequireDefault(_Paper);

var _ClickAwayListener = require('@material-ui/core/ClickAwayListener');

var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);

var _Chip = require('@material-ui/core/Chip');

var _Chip2 = _interopRequireDefault(_Chip);

var _TagFaces = require('@material-ui/icons/TagFaces');

var _TagFaces2 = _interopRequireDefault(_TagFaces);

var _request = require('./../utils/request');

var _request2 = _interopRequireDefault(_request);

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

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; }

require('./style/customSelect.css');
var styles = function styles(theme) {
  return {
    root: {
      width: '100%'
    },
    inputRoot: {
      color: 'inherit',
      marginLeft: "5px"
    },
    inputInput: {
      transition: theme.transitions.create('width'),
      color: "#333",
      fontSize: 14,
      lineHeight: 1
    },
    list: {
      maxHeight: '300px',
      overflowY: 'auto'
    }
  };
};

var CustomSelect = function (_React$Component) {
  _inherits(CustomSelect, _React$Component);

  function CustomSelect(props) {
    _classCallCheck(this, CustomSelect);

    var _this = _possibleConstructorReturn(this, (CustomSelect.__proto__ || Object.getPrototypeOf(CustomSelect)).call(this, props));

    _this.state = {
      open: false,
      loading: false,
      list: [],
      check: props.checked || [],
      anchorEl: null,
      value: ''
    };
    _this.fetchTime = null;
    return _this;
  }

  _createClass(CustomSelect, [{
    key: 'inputChange',
    value: function inputChange(e) {
      var self = this;
      var value = e.target.value;
      var target = this.refs.container;
      self.setState({
        value: value
      });
      clearTimeout(this.fetchTime);
      if (value.length != 0) {
        this.fetchTime = setTimeout(function () {
          self.setState({
            loading: true,
            anchorEl: target
          });
          self.setState({
            open: true
          });
          var url = self.props.url.replace('{jw.form.search}', value);
          (0, _request2.default)(url, {
            method: 'GET'
          }).then(function (resp) {
            if (resp['data']['success'] && resp['data']['success'] == 0) {} else {
              self.setState({
                list: resp.data['list'] || resp.data['data'],
                loading: false
              });
            }
          });
        }, 800);
        $(document).off('click').one('click', function () {
          self.setState({
            open: false
          });
        });
      } else {
        self.setState({
          open: false,
          list: [],
          loading: false
        });
      }
    }
  }, {
    key: 'onKeyDown',
    value: function onKeyDown(e) {
      var code = e.keyCode;
      if (code == '38' || code == '40') {
        var item = $('.custom-search-popper .search-item');
        var nowActive = $('.custom-search-popper .search-item.active').eq(0);
        if (nowActive.length != 0) {
          var nowIndex = parseInt(nowActive.attr('data-index'));
          item.removeClass('active');
          if (code == '38') {
            nowIndex = nowIndex - 1;
            if (nowIndex == -1) {
              $('.custom-search-popper .search-item').eq(item.length - 1).addClass('active');
            } else {
              $('.custom-search-popper .search-item').eq(nowIndex).addClass('active');
            }
          } else {
            nowIndex = nowIndex + 1;
            if (nowIndex == item.length) {
              $('.custom-search-popper .search-item').eq(0).addClass('active');
            } else {
              $('.custom-search-popper .search-item').eq(nowIndex).addClass('active');
            }
          }
        } else {
          item.removeClass('active');
          if (code == '38') {
            $('.custom-search-popper .search-item').eq(item.length - 1).addClass('active');
          } else {
            $('.custom-search-popper .search-item').eq(0).addClass('active');
          }
        }
        e.preventDefault();
        //上下
      }
      if (code == '13') {
        //确定
        var index = $('.custom-search-popper .search-item.active').attr('data-index');
        // console.log(index,'asdasdasd');
        if (typeof index != 'undefined') {
          var data = this.state.list[index];
          this.choseItem(e, data);
        }
        e.preventDefault();
      }
    }
  }, {
    key: 'onMouseOver',
    value: function onMouseOver(index) {
      var item = $('.custom-search-popper .search-item');
      item.removeClass('active');
      item.eq(index).addClass('active');
    }
  }, {
    key: 'onMouseOut',
    value: function onMouseOut(index) {}
  }, {
    key: 'handleDelete',
    value: function handleDelete(e, data) {
      var self = this;
      if (typeof this.props.onDelete != 'undefined') {
        this.props.onDelete(e, data);
      } else {
        if (typeof this.props.sigle != 'undefined') {
          this.setState({
            check: {}
          });
          self.props.onChange && self.props.onChange({});
          setTimeout(function () {
            self.inputFocus();
          }, 100);
        } else {
          var newList = [];
          // console.log(this.state.check,data,'dsadasdasdasd');
          _.each(this.state.check, function (i) {
            // if(i['id'] != data['id']){
            //   newList.push(i)
            // }

            if (i['id']) {
              if (i['id'] != data['id']) {
                newList.push(i);
              }
            } else {
              if (i['key']) {
                if (i['key'] != data['key']) {
                  newList.push(i);
                }
              } else {
                if (i['value']) {
                  if (i['value'] != data['value']) {
                    newList.push(i);
                  }
                }
              }
            }
          });
          this.setState({
            check: newList
          });
          this.inputFocus();
          self.props.onChange && self.props.onChange(newList);
        }
      }
    }
  }, {
    key: 'inputFocus',
    value: function inputFocus() {
      $(this.refs.container).find('input').focus();
    }
  }, {
    key: 'customHandleDelete',
    value: function customHandleDelete(e, data) {
      console.log(e, data, '这个是什么啊');
    }
  }, {
    key: 'handleClickAway',
    value: function handleClickAway() {}
  }, {
    key: 'choseItem',
    value: function choseItem(e, data) {
      var self = this;
      var check = this.state.check;
      if (typeof this.props.sigle != 'undefined') {
        check = data;
        this.setState({
          check: check,
          open: false,
          value: ''
        });
      } else {
        if (_.findWhere(check, { id: data['id'] || data['key'] || data['value'] })) {
          this.setState({
            value: ''
          });
        } else {
          check.push(data);
          this.setState({
            open: false,
            check: check,
            value: ''
          });
        }
        this.inputFocus();
      }
      self.props.onChange && self.props.onChange(check);
    }
  }, {
    key: '_initElement',
    value: function _initElement() {
      var _this2 = this;

      var self = this;
      var classes = this.props.classes;
      var anchorEl = this.state.anchorEl;

      if (typeof this.props.sigle != 'undefined') {
        var chipData = {
          className: "custom-select-check-i",
          key: this.state.check.id || this.state.check.key || this.state.check.value,
          onDelete: function onDelete(e) {
            return self.handleDelete(e, _this2.state.check);
          },
          label: this.state.check['name'] || this.state.check['label'],
          title: this.state.check['name'] || this.state.check['label']
        };
        if (this.props.disabled || this.props.autoShowDis) {
          delete chipData['onDelete'];
        }
        return _react2.default.createElement(
          'div',
          { className: 'custom-select-c', ref: 'container', onClick: function onClick(e) {
              return _this2.inputFocus(e);
            } },
          this.state.value.length != 0 || this.state.check.id || this.state.check.key || this.state.check.value ? '' : _react2.default.createElement(
            'div',
            { className: 'custom-select-placeholder' },
            this.props.placeholder
          ),
          _react2.default.createElement(
            'div',
            { className: 'custom-select-list' },
            this.state.check && (this.state.check.id || this.state.check.key || this.state.check.value) ? _react2.default.createElement(_Chip2.default, chipData) : '',
            this.state.check && (this.state.check.id || this.state.check.key || this.state.check.value) ? '' : _react2.default.createElement(_InputBase2.default, {
              classes: {
                root: classes.inputRoot,
                input: classes.inputInput
              },
              className: 'custom-select-search-input',
              value: this.state.value,
              onChange: function onChange(e) {
                return self.inputChange(e);
              },
              onKeyDown: function onKeyDown(e) {
                return self.onKeyDown(e);
              },
              disabled: self.props.disabled ? true : false,
              ref: 'input'
            })
          ),
          typeof chipData.autoShowDis != 'undefined' ? _react2.default.createElement(
            'div',
            { className: 'custom-select-auto-remove', onClick: function onClick(e) {
                return self.handleDelete(e, _this2.state.check);
              } },
            _react2.default.createElement(
              'svg',
              { focusable: 'false', viewBox: '0 0 24 24', 'aria-hidden': 'true', role: 'presentation' },
              _react2.default.createElement('path', { d: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z' })
            )
          ) : ""
        );
      } else {

        return _react2.default.createElement(
          'div',
          { className: 'custom-select-c', ref: 'container', onClick: function onClick(e) {
              return _this2.inputFocus(e);
            } },
          this.state.value.length != 0 || this.state.check.length > 0 ? '' : _react2.default.createElement(
            'div',
            { className: 'custom-select-placeholder' },
            this.props.placeholder
          ),
          _react2.default.createElement(
            'div',
            { className: 'custom-select-list' },
            this.state.check && this.state.check.length != 0 ? _.map(this.state.check, function (i) {
              var chipData = {
                className: "custom-select-check-i",
                key: i['id'] || i['key'] || i['value'],
                onDelete: function onDelete(e) {
                  return self.handleDelete(e, i);
                },
                label: i['name'] || i['label'],
                title: i['name'] || i['label']
              };
              if (self.props.disabled) {
                delete chipData['onDelete'];
              }
              return _react2.default.createElement(_Chip2.default, chipData);
            }) : '',
            this.state.max && this.state.check.length != 0 && this.state.max <= this.state.check.length ? '' : _react2.default.createElement(_InputBase2.default, {
              classes: {
                root: classes.inputRoot,
                input: classes.inputInput
              },
              className: 'custom-select-search-input',
              value: this.state.value,
              onChange: function onChange(e) {
                return self.inputChange(e);
              },
              onKeyDown: function onKeyDown(e) {
                return self.onKeyDown(e);
              },
              disabled: self.props.disabled ? true : false,
              ref: 'input'
            })
          )
        );
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var self = this;
      var classes = this.props.classes;
      var anchorEl = this.state.anchorEl;

      var icon = _react2.default.createElement(_TagFaces2.default, null);
      return _react2.default.createElement(
        'div',
        { className: "custom-select " + (this.props.className || ""), ref: 'main' },
        self._initElement(),
        _react2.default.createElement(
          'div',
          { className: 'custom-select-showlist' },
          _react2.default.createElement(
            _ClickAwayListener2.default,
            { onClick: function onClick(e) {
                return self.handleClickAway(e);
              } },
            _react2.default.createElement(
              _Popper2.default,
              {
                id: 'custom-search-popper',
                open: this.state.open,
                placement: 'bottom-start',
                anchorEl: anchorEl,
                modifiers: {},
                className: 'custom-search-popper custom-search-selectlist',
                style: {
                  width: $(this.refs.container).width() + 'px',
                  marginTop: '10px',
                  marginBottom: "10px"
                },
                transition: true
              },
              function (_ref) {
                var TransitionProps = _ref.TransitionProps;
                return _react2.default.createElement(
                  _Fade2.default,
                  _extends({}, TransitionProps, { timeout: 350 }),
                  self.state.loading ? _react2.default.createElement(
                    _Paper2.default,
                    null,
                    _react2.default.createElement(
                      'div',
                      { className: 'custom-search-loading' },
                      '\u52A0\u8F7D\u4E2D\u2026'
                    )
                  ) : _react2.default.createElement(
                    _Paper2.default,
                    { className: classes.list },
                    self.state.list.length != 0 ? _.map(self.state.list, function (i, index) {
                      return _react2.default.createElement(
                        'div',
                        { className: "search-item", 'data-index': index, 'data-id': i['id'] || i['key'], onMouseOver: function onMouseOver(e) {
                            return self.onMouseOver(index);
                          }, onMouseOut: function onMouseOut(e) {
                            return self.onMouseOut(index);
                          }, onClick: function onClick(e) {
                            return self.choseItem(e, i);
                          } },
                        _react2.default.createElement(
                          'div',
                          { className: "search-item-info" },
                          _react2.default.createElement(
                            'div',
                            { className: 'search-item-info-l' },
                            _react2.default.createElement(
                              'div',
                              { className: 'search-item-info-i name ellipsis', title: i['name'] || i['label'] },
                              i['name'] || i['label']
                            )
                          )
                        )
                      );
                    }) : _react2.default.createElement(
                      'div',
                      { className: 'custom-search-none' },
                      '\u6682\u65E0\u6570\u636E'
                    )
                  )
                );
              }
            )
          )
        )
      );
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps, nextState) {
      // console.log(nextProps,'zzzzzz');
      this.setState({
        check: nextProps.checked
      });
    }
  }]);

  return CustomSelect;
}(_react2.default.Component);

exports.default = (0, _styles.withStyles)(styles)(CustomSelect);