zent/lib/select/Popup.js

一套前端设计语言和基于React的实现

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _take = require('lodash/take');

var _take2 = _interopRequireDefault(_take);

var _trim = require('lodash/trim');

var _trim2 = _interopRequireDefault(_trim);

var _popover = require('../popover');

var _popover2 = _interopRequireDefault(_popover);

var _Search = require('./components/Search');

var _Search2 = _interopRequireDefault(_Search);

var _Option = require('./components/Option');

var _Option2 = _interopRequireDefault(_Option);

var _constants = require('./constants');

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

/**
 * Popup
 */

var Popup = function (_ref) {
  (0, _inherits3['default'])(Popup, _ref);

  function Popup(props) {
    (0, _classCallCheck3['default'])(this, Popup);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));

    _this.handleScroll = function (evt) {
      if (_this.popup.scrollTop === 0 && evt.deltaY < 0 || _this.popup.scrollTop + _this.popup.clientHeight === _this.popup.scrollHeight && evt.deltaY > 0) {
        evt.preventDefault();
      }
    };

    _this.optionChangedHandler = function (ev, cid) {
      var _this$props = _this.props,
          filter = _this$props.filter,
          data = _this$props.data;
      var keyword = _this.state.keyword;

      _this.setState({
        keyword: ''
      });
      _this.props.popover.close();
      _this.props.onChange(ev, data.filter(function (item) {
        return (!keyword || !filter || filter(item, '' + keyword)) && item.cid === cid;
      })[0]);
    };

    _this.searchFilterHandler = function (keyword) {
      var onAsyncFilter = _this.props.onAsyncFilter;

      keyword = (0, _trim2['default'])(keyword);
      _this.setState({
        keyword: keyword,
        currentId: ''
      });

      if (typeof onAsyncFilter === 'function') {
        onAsyncFilter('' + keyword);
      }
    };

    _this.keydownHandler = function (ev) {
      var code = ev.keyCode;
      var itemIds = _this.itemIds;
      var _this$state = _this.state,
          currentId = _this$state.currentId,
          keyword = _this$state.keyword;

      var index = itemIds.indexOf(currentId);
      var popupHeight = _this.popup.clientHeight;
      var scrollHeight = _this.popup.scrollHeight;
      var currentNode = _this.popup.getElementsByClassName('current')[0];
      switch (code) {
        case _constants.KEY_ESC:
          _this.props.popover.close();
          break;
        case _constants.KEY_DOWN:
          ev.preventDefault();
          if (_this.itemIds[index + 1]) {
            currentId = _this.itemIds[index + 1];
            _this.currentIdUpdated = true;
            if (currentNode && currentNode.offsetTop + 28 >= _this.popup.scrollTop + popupHeight) {
              _this.popup.scrollTop = currentNode.offsetTop + 28 * 2 - popupHeight;
            }
          } else {
            currentId = _this.itemIds[0];
            _this.popup.scrollTop = 0;
          }
          break;
        case _constants.KEY_UP:
          ev.preventDefault();
          if (index > 0) {
            currentId = _this.itemIds[index - 1];
            _this.currentIdUpdated = true;
            if (currentNode && currentNode.offsetTop <= _this.popup.scrollTop) {
              _this.popup.scrollTop = currentNode.offsetTop - 28;
            }
          } else {
            currentId = _this.itemIds[_this.itemIds.length - 1];
            _this.popup.scrollTop = scrollHeight;
          }
          break;
        case _constants.KEY_EN:
          ev.preventDefault();
          _this.optionChangedHandler(keyword, currentId);
          _this.currentIdUpdated = false;
          break;
        default:
          break;
      }
      _this.setState({
        currentId: currentId
      });
    };

    _this.state = {
      data: props.data,
      // 默认选中第一项
      currentId: props.data[0] ? props.data[0].cid : 0,
      keyword: props.keyword || '',
      style: {}
    };
    return _this;
  }

  (0, _createClass3['default'])(Popup, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _props = this.props,
          autoWidth = _props.autoWidth,
          popover = _props.popover;

      if (autoWidth) {
        this.setState({
          style: {
            width: popover.getTriggerNode().clientWidth + 2 + 'px'
          }
        });
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (!this.props.filter && !this.props.onAsyncFilter) {
        this.popup.focus();
      }
      this.popup.addEventListener('mousewheel', this.handleScroll);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var keyword = nextProps.keyword;
      this.setState({
        data: nextProps.data,
        // 默认选中第一项
        currentId: nextProps.data[0] ? nextProps.data[0].cid : 0
      });

      // trigger中传入的keyword
      if (this.props.extraFilter && keyword !== null && keyword !== this.state.keyword) {
        this.searchFilterHandler(keyword);
      }
    }
  }, {
    key: 'componentWillUpdate',
    value: function componentWillUpdate(nextProps, nextState) {
      var _this2 = this;

      var filter = nextProps.filter;
      var data = nextState.data,
          keyword = nextState.keyword,
          currentId = nextState.currentId;

      data.filter(function (item) {
        return !keyword || !filter || filter(item, '' + keyword);
      }).forEach(function (item, index) {
        if (keyword && item.text === keyword || !currentId && index === 0) {
          _this2.setState({
            currentId: item.cid
          });
        }
      });
    }
  }, {
    key: 'updateCurrentId',
    value: function updateCurrentId(cid) {
      this.setState({
        currentId: cid
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props2 = this.props,
          cid = _props2.cid,
          selectedItems = _props2.selectedItems,
          emptyText = _props2.emptyText,
          prefixCls = _props2.prefixCls,
          extraFilter = _props2.extraFilter,
          searchPlaceholder = _props2.searchPlaceholder,
          filter = _props2.filter,
          onAsyncFilter = _props2.onAsyncFilter,
          maxToShow = _props2.maxToShow,
          autoWidth = _props2.autoWidth;
      var _state = this.state,
          keyword = _state.keyword,
          data = _state.data,
          currentId = _state.currentId;


      var filterData = data.filter(function (item) {
        return !keyword || !filter || filter(item, '' + keyword);
      });

      var showEmpty = data.length === 0 || filterData.length === 0;

      this.itemIds = filterData.map(function (item) {
        return item.cid;
      });

      if (maxToShow && !extraFilter && filter) {
        filterData = (0, _take2['default'])(filterData, maxToShow);
      }

      return _react2['default'].createElement(
        'div',
        {
          ref: function ref(popup) {
            return _this3.popup = popup;
          },
          className: prefixCls + '-popup',
          onKeyDown: this.keydownHandler,
          tabIndex: '0',
          style: autoWidth ? this.state.style : null
        },
        !extraFilter && (filter || onAsyncFilter) ? _react2['default'].createElement(_Search2['default'], {
          keyword: keyword,
          prefixCls: prefixCls,
          placeholder: searchPlaceholder,
          onChange: this.searchFilterHandler
        }) : '',
        filterData.map(function (item, index) {
          var currentCls = item.cid === currentId ? 'current' : '';
          var activeCls = selectedItems.filter(function (o) {
            return o.cid === item.cid;
          }).length > 0 || item.cid === cid ? 'active' : '';
          return _react2['default'].createElement(_Option2['default'], (0, _extends3['default'])({
            key: index,
            className: prefixCls + '-option ' + activeCls + ' ' + currentCls
          }, item, {
            onClick: _this3.optionChangedHandler,
            onMouseEnter: _this3.updateCurrentId.bind(_this3, item.cid)
          }));
        }),
        showEmpty && _react2['default'].createElement(_Option2['default'], {
          className: prefixCls + '-empty',
          text: emptyText,
          onClick: this.optionChangedHandler
        })
      );
    }
  }]);
  return Popup;
}(_react.PureComponent || _react.Component);

Popup.propTypes = {
  cid: _propTypes2['default'].string,
  keyword: _propTypes2['default'].any,
  selectedItems: _propTypes2['default'].array,
  searchPlaceholder: _propTypes2['default'].string,
  emptyText: _propTypes2['default'].any,
  prefixCls: _propTypes2['default'].string,
  extraFilter: _propTypes2['default'].bool,
  filter: _propTypes2['default'].func,
  onAsyncFilter: _propTypes2['default'].func
};

Popup.defaultProps = {
  cid: -1,
  keyword: '',
  selectedItems: [],
  emptyText: '',
  prefixCls: '',
  extraFilter: false,
  searchPlaceholder: ''
};

exports['default'] = _popover2['default'].withPopover(Popup);