@beisen/ethos/lib/dropdown/droplist.js

beisencloud pc react components

'use strict';

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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 _checkboxitem = require('./checkboxitem.js');

var _checkboxitem2 = _interopRequireDefault(_checkboxitem);

var _radioitem = require('./radioitem.js');

var _radioitem2 = _interopRequireDefault(_radioitem);

var _commonFunc = require('../common-func');

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

/* eslint-disable */
var DropList = function (_Component) {
  (0, _inherits3.default)(DropList, _Component);

  function DropList(props) {
    (0, _classCallCheck3.default)(this, DropList);

    var _this = (0, _possibleConstructorReturn3.default)(this, (DropList.__proto__ || (0, _getPrototypeOf2.default)(DropList)).call(this, props));

    _this.state = props;
    _this.handleWheel = _this.handleWheel.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(DropList, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({ children: nextProps.children });
      this.syncListScroll(nextProps);
    }
  }, {
    key: 'syncListScroll',
    value: function syncListScroll(props) {
      var index = props.index,
          dropdownUl = this.refs.dropdownUl;

      if (dropdownUl.hasChildNodes()) {
        var maxHeight = dropdownUl.clientHeight,
            // 页整体高度
        itemHeight = dropdownUl.childNodes[0].clientHeight,
            // 单条内容高度
        top = dropdownUl.scrollTop,
            bottom = dropdownUl.scrollTop + maxHeight;

        if (index == 0) {
          dropdownUl.scrollTop = 0;
        } else if (index == props.children.length) {
          dropdownUl.scrollTop = itemHeight * dropdownUl.childNodes.length;
        } else if (index == props.children.length - 1) {
          dropdownUl.scrollTop = itemHeight * index;
        } else if (itemHeight * index >= bottom) {
          dropdownUl.scrollTop = top + itemHeight;
        } else if (itemHeight * index <= top) {
          dropdownUl.scrollTop = top - itemHeight;
        }
      }
    }
  }, {
    key: 'handleWheel',
    value: function handleWheel(event) {
      if (this.scrollTop != this.refs.dropdownUl.scrollTop) {
        this.scrollTop = this.refs.dropdownUl.scrollTop;
        (0, _commonFunc.clearToolTipDom)();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          sideTip = _props.sideTip,
          hiddenTip = _props.hiddenTip,
          multiple = _props.multiple,
          children = _props.children,
          searchValue = _props.searchValue,
          itemClick = _props.itemClick,
          handleClick = _props.handleClick,
          index = _props.index,
          maxHeight = _props.maxHeight,
          hasSelectAll = _props.hasSelectAll,
          onSelectAll = _props.onSelectAll,
          height = _props.height;

      var list = children.map(function (item, idx) {
        var className = '';
        if (idx == index) {
          className += ' pointerOver';
        }
        return multiple ? _react2.default.createElement(_checkboxitem2.default, {
          extendClassName: className,
          sideTip: sideTip,
          hiddenTip: hiddenTip,
          searchValue: searchValue,
          itemClick: itemClick,
          onClick: handleClick,
          key: idx,
          item: item,
          index: idx
        }) : _react2.default.createElement(_radioitem2.default, {
          extendClassName: className,
          sideTip: sideTip,
          hiddenTip: hiddenTip,
          searchValue: searchValue,
          itemClick: itemClick,
          key: idx,
          item: item,
          index: idx });
      });

      var selectAllData = {
        disabled: false,
        isActive: false,
        isChecked: !children.find(function (item) {
          return !item.isChecked;
        }),
        text: searchValue ? '全选搜索结果' : '全选',
        value: 'd395beac9fdd457fa237d183210de316f46f5ffbb32a4b0388e824d9cb23add87d77406adede471ba1a116ac7d0d7c13'
      };

      return _react2.default.createElement(
        'ul',
        { ref: 'dropdownUl', className: 'dropdown__list a-height-spread', style: { 'maxHeight': maxHeight, 'height': height }, onWheel: this.handleWheel },
        multiple && hasSelectAll && _react2.default.createElement(_checkboxitem2.default, {
          searchValue: '',
          onClick: function onClick() {
            onSelectAll(!selectAllData.isChecked, children);
          },
          item: selectAllData }),
        list
      );
    }
  }]);
  return DropList;
}(_react.Component);

module.exports = DropList;