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

beisencloud pc react components

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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 _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _search = require('../search');

var _search2 = _interopRequireDefault(_search);

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

var _droplist = require('./droplist.js');

var _droplist2 = _interopRequireDefault(_droplist);

require('./style.scss');

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

var defaultTranslation = {
  advancedModeText: '高级模式',
  pleaseSearchText: '请搜索',
  confirmText: '确定',
  emptyBgText: '这里什么都没有...' // 没有内容时,背景字
};

var defaultProps = {
  searchValue: '', //搜索值
  searchActive: true //打开后默认激活状态
};

var DropDown = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(DropDown, _Component);

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

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

    _this.setLimitChildren = function () {
      _this.state.children.map(function (item) {
        item.disabled = false;
      });
    };

    _this.getLimitData = function (children) {
      //将已选中并超出限制数量的数据禁用，并将其它未选中数据禁用
      var limitCount = _this.props.limitCount;

      var checkedData = children.filter(function (item) {
        return item.isChecked;
      }).length;
      if (checkedData >= limitCount) {
        // let count = limitCount
        children.map(function (item) {
          // if (item.isChecked && count<=0) {
          // 	item.isChecked = false
          // 	item.disabled = true
          // }
          if (!item.isChecked) item.disabled = true;
          // count--
        });
      }
      return children;
    };

    _this.searchValueChange = function (val) {
      _this.searchStatus = true;
      var dropListData = _this.props.children;
      var saveData = _this.props.children.filter(function (item) {
        return item.isChecked;
      });
      var filterData = dropListData.filter(function (item) {
        return (0, _commonFunc.decode)(item.text).includes(val.value);
      });
      _this.setState({ children: filterData, searchValue: val.value, saveData: saveData });
    };

    _this.handleClick = function (event, value) {
      var children = _this.state.children;
      var limitCount = _this.props.limitCount;

      children.map(function (item, index) {
        if (item.value == value.value) item.isChecked = !item.isChecked;
      });
      //增加选择数量限制功能，当超出限制数量，则禁止选择其它的
      var checkedCount = children.filter(function (item) {
        return item.isChecked;
      }).length;
      children.map(function (item, index) {
        if (!item.isChecked) item.disabled = checkedCount >= limitCount;
      });
      _this.setState({ children: children });
    };

    _this.confirmClick = function (event) {
      if (_this.searchStatus) {
        var self = _this;
        for (var i = 0; i < self.state.saveData.length; i++) {
          for (var j = 0; j < self.state.children.length; j++) {
            if (self.state.saveData[i].value == self.state.children[j].value) {
              self.state.children.splice(j, 1);
            }
          }
        }
        _this.saveData = _this.state.saveData.concat(_this.state.children).filter(function (item) {
          return item.isChecked;
        });
        _this.searchStatus = false;
        _this.state.saveData = '';
      } else {
        _this.saveData = _this.state.children.filter(function (item) {
          return item.isChecked;
        });
      }
      _this.props.onClick(event, _this.saveData);
    };

    _this.handleSelectAll = function (selectAllIsChecked, currentChildren) {
      currentChildren.filter(function (item) {
        return item.isChecked !== selectAllIsChecked;
      }).forEach(function (item) {
        return _this.handleClick(null, item);
      });
    };

    _this.handleKeyDown = function (e) {
      if (e.target.nodeName == 'BUTTON' || e.target.nodeName == 'A') {
        return;
      }

      var _this$state = _this.state,
          hidden = _this$state.hidden,
          index = _this$state.index,
          children = _this$state.children;

      if (!hidden && index >= 0) {
        switch (e.keyCode) {
          case 38:
            // 上
            index = index - 1;
            break;
          case 40:
            // 下
            index = index + 1;
            break;
          case 13:
            // 回车
            _this.chkEnterItem(e);
            break;
          case 9:
            // tab
            break;
          default:
            break;
        }
      }
      //输入文字时会默认选中高亮第一个，暂时注掉该代码
      //  else if (typeof index == 'undefined') {
      // 	index = 0;
      // }

      // 回车键时不应该调整 index
      if (e.keyCode == 13) {
        return;
      }
      if (_this.state.multiple) {
        if (index < 0) {
          index = children.length; // chidren.length 为确定键的 index，如果还有取消，再向上取一位即可
        } else if (index > children.length) {
          index = 0;
        }
      } else {
        if (index < 0) {
          index = children.length - 1;
        } else if (index > children.length - 1) {
          index = 0;
        }
      }

      _this.setState({ index: index });
    };

    _this.addKeyListener = function () {
      window.removeEventListener('keydown', _this.handleKeyDown, true);
      window.addEventListener('keydown', _this.handleKeyDown, true);
    };

    _this.removeKeyListener = function () {
      window.removeEventListener('keydown', _this.handleKeyDown, true);
    };

    _this.state = (0, _extends3.default)({}, defaultProps, props);
    _this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
    _this.setLimitChildren();
    _this.getLimitData(_this.state.children);
    _this.addKeyListener();
    return _this;
  }

  (0, _createClass3.default)(DropDown, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var children = this.getLimitData(nextProps.children);
      this.setState({ children: children, multiple: nextProps.multiple, maxHeight: nextProps.maxHeight });
    }

    //根据搜索值进行筛选


    //多选中勾选某一项


    //多选中确认按钮点击

  }, {
    key: 'render',
    value: function render() {
      if (this.props.hidden) {
        return null;
      }

      var _props = this.props,
          sideTip = _props.sideTip,
          hiddenTip = _props.hiddenTip,
          templateDrop = _props.templateDrop,
          templateComponent = _props.templateComponent,
          maxHeight = _props.maxHeight,
          showAdvancedMode = _props.showAdvancedMode,
          onAdvancedModeClick = _props.onAdvancedModeClick;

      var height = this.props.children.length >= 10 ? '260px' : '';
      //如果有搜索框并且不是多选需要调整图片位置
      var emptyStylePosition = this.props.hasSearch && !this.props.multiple ? { 'backgroundPosition': '50% 30%' } : {};
      //如果有搜索框并且选项大于十个需要定高260px, 并且调整图片位置
      var emptyStyleHeight = this.props.hasSearch && this.props.children.length >= 10 ? { 'height': '260px', 'backgroundPosition': '50% 40%' } : { 'height': ''
        //合并空白时的样式, postion必须在height后面, 便于覆盖前面的postion
      };var emptyStyle = (0, _extends3.default)({}, emptyStyleHeight, emptyStylePosition);

      var confirmButton = (this.props.multiple || showAdvancedMode) && _react2.default.createElement(
        'div',
        { className: 'dropdown__footer' },
        showAdvancedMode && _react2.default.createElement(
          'span',
          { className: 'highmodule' + (this.props.multiple ? ' highmodulerightpadding ' : ''),
            onClick: onAdvancedModeClick },
          _react2.default.createElement(
            'span',
            null,
            this.translation.advancedModeText
          ),
          _react2.default.createElement('span', { className: 'pc-sys-arrowright-active-svg' })
        ),
        this.props.multiple && _react2.default.createElement(
          'button',
          {
            className: 'btn btn_default btn_sm' + (this.state.index == this.props.children.length ? ' pointOver' : ''),
            onClick: this.confirmClick },
          this.translation.confirmText
        )
      );
      var search = this.props.hasSearch && _react2.default.createElement(
        'div',
        { className: 'search__wrap' },
        _react2.default.createElement(_search2.default, {
          placeholder: this.translation.pleaseSearchText,
          iconName: 'sys-icon-sousuo',
          value: this.state.searchValue,
          active: this.state.searchActive,
          onChange: this.searchValueChange })
      );

      var dropList = this.state.children.length > 0 ? _react2.default.createElement(_droplist2.default, (0, _extends3.default)({}, this.state, {
        height: height,
        sideTip: sideTip,
        hiddenTip: hiddenTip,
        itemClick: this.props.onClick,
        handleClick: this.handleClick,
        onSelectAll: this.handleSelectAll })) : _react2.default.createElement('span', { className: 'u-icon empty-icon', style: emptyStyle, 'data-bg-text': this.translation.emptyBgText });

      if (this.props.children && this.props.children.length === 0) {
        return _react2.default.createElement(
          'div',
          {
            className: 'dropdown dropdown_has-search a-diglog_lt a-dialog_is-open' + (!this.props.hasSearch ? ' dropdown_hasNo-search' : ''),
            style: { 'width': this.state.dropdownWidth, 'height': '200px' } },
          _react2.default.createElement('span', {
            className: 'u-icon empty-icon',
            style: emptyStyle,
            'data-bg-text': this.translation.emptyBgText })
        );
      }
      return _react2.default.createElement(
        'div',
        {
          className: 'dropdown dropdown_has-search a-diglog_lt a-dialog_is-open' + (!this.props.hasSearch ? ' dropdown_hasNo-search' : ''),
          style: { 'width': this.state.dropdownWidth } },
        templateDrop ? _react2.default.createElement(
          'div',
          { className: 'dropdown__container' },
          _react2.default.createElement(
            'ul',
            { style: { maxHeight: maxHeight, overflowY: 'auto' } },
            templateComponent
          )
        ) : _react2.default.createElement(
          'div',
          null,
          search,
          _react2.default.createElement(
            'div',
            { className: 'dropdown__container' },
            dropList,
            confirmButton
          )
        )
      );
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.removeKeyListener();
    }

    // 监听键盘事件

  }, {
    key: 'chkEnterItem',
    value: function chkEnterItem(e) {
      var index = this.state.index,
          children = this.state.children;

      if (this.state.multiple) {
        children.map(function (item, idx) {
          if (idx == index) {
            item.isChecked = !item.isChecked;
          }
        });

        // 选中了确定
        if (e.keyCode == 13 && index == children.length) {
          this.confirmClick(e);
        }

        this.setState({ children: children });
      } else {
        this.props.onClick(e, children[index]);
      }
    }
  }]);
  return DropDown;
}(_react.Component), _class.defaultProps = {
  hasSearch: true,
  limitCount: 9999999,
  emptyBgText: '这里什么都没有...' // 没有内容时,背景字
}, _temp);
exports.default = DropDown;
module.exports = exports['default'];