@beisen/ethos/lib/area-selector/index.js

beisencloud pc react components

'use strict';

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

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

var _bread2 = _interopRequireDefault(_bread);

var _resultsTip = require('./results-tip.js');

var _resultsTip2 = _interopRequireDefault(_resultsTip);

var _optionsItem = require('./options-item.js');

var _optionsItem2 = _interopRequireDefault(_optionsItem);

var _resultsItem = require('./results-item.js');

var _resultsItem2 = _interopRequireDefault(_resultsItem);

var _tabComponent = require('../tab-component');

var _tabComponent2 = _interopRequireDefault(_tabComponent);

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

require('./index.scss');

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

// 模拟空回调
function emptyFunc() {}

var defaultTranslation = {
  nationWide: '全国省市',
  foreignWide: '国外地区',
  confirmText: '确定',
  cancelText: '取消',
  clearSelected: '清空已选',
  AreaSelected: '已选地区'
};

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

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

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

    _this.handleDefaultResults = function (data) {
      // 判断id是否是国内id
      var isChina = function isChina(id) {
        var type = { "CHINA": 1 };
        // id等于1代表全国, 国内id组成全部为偶数位, 判断id长度来判断是否是国内id
        if (id === type.CHINA || id.toString().length % 2 === 0) {
          return true;
        }

        return false;
      };
      /*
        由于外部传入的已选数据仅包含id和name，在多级交互时会出现问题
        所以在此处找到全数据中每一个已选数据并抛出
      */
      try {
        var arr = [];
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = (0, _getIterator3.default)(data), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var i = _step.value;

            var assignData = void 0,
                //国内/国外城市信息
            subIndex = void 0;
            //国内国外都走一套逻辑, 但是参数有所不同. 不同的国家由三位数字判断, 但是国内不同城市由两位数字判断, 所以对应的 subIndex 不同 
            if (isChina(i.id)) {
              assignData = (0, _commonFunc.deepClone)(_this.chinaData);
              subIndex = 2;
            } else {
              assignData = (0, _commonFunc.deepClone)(_this.foreignData);
              subIndex = 3;
            }
            var allLevelName = '';
            for (var m = 0; m < assignData.length; m++) {
              var item = assignData[m];
              var subId = i.id.toString().substring(0, subIndex);
              if (item.id == i.id) {
                if (allLevelName.length > 0) item.name = allLevelName + item.name;
                arr.push(item);
              } else if (item.id.toString().length > 1 && item.id.toString().indexOf(subId) == 0 && item.childList) {
                if (_this.props.allLevelDisplay) allLevelName += item.name + '/'; //全路径显示名称
                assignData = item.childList; //循环遍历子集
                m = -1; //当进入子集时会执行m++,如果是0的话会变成1
                subIndex += 2; //每进入下一级，id长度会加2，所以此处subString的index也需加2
              }
            }
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }

        return arr;
      } catch (e) {
        console.error("地区已选数据处理有误", e);
      }
    };

    _this.sortData = function (data, isForeign) {
      var _newData = [];
      var _sortfunc = function _sortfunc(data, pIndex, isForeign) {
        return data && data.map(function (item, index) {
          var _pIndex = pIndex || '';
          var _data = {
            id: parseInt(item[0]),
            name: item[1],
            isChecked: false,
            index: index,
            isForeign: isForeign,
            pIndex: _pIndex + index,
            isMore: item.length > 2 ? true : false
          };
          _data.childList = item[2] && _sortfunc(item[2], _data.pIndex + '/', isForeign) || null;
          return _data;
        });
      };
      _newData = _sortfunc(data, null, isForeign);
      return _newData;
    };

    _this.setResultsData = function (data) {
      var _resultsData = _this.state.resultsData;
      if (_this.props.isSingleSelect) {
        _resultsData = data;
      } else {
        //合并数据,清空包含的子集数据，仅显示父级数据
        if (_this.props.allowContainsChildren) {
          var newData = [];
          var _iteratorNormalCompletion2 = true;
          var _didIteratorError2 = false;
          var _iteratorError2 = undefined;

          try {
            for (var _iterator2 = (0, _getIterator3.default)(_resultsData), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
              var i = _step2.value;

              if (i.isForeign == data.isForeign) {
                if (i.pIndex && i.pIndex.indexOf(data.pIndex + '/') != 0) {
                  newData.push(i);
                }
              } else {
                newData.push(i);
              }
            }
          } catch (err) {
            _didIteratorError2 = true;
            _iteratorError2 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion2 && _iterator2.return) {
                _iterator2.return();
              }
            } finally {
              if (_didIteratorError2) {
                throw _iteratorError2;
              }
            }
          }

          _resultsData = newData;
          // _resultsData = _resultsData.filter(item => item.pIndex && item.pIndex.indexOf(data.pIndex)!=0)
        }
        _resultsData.push(data);
      }
      _this.setState({
        resultsData: _resultsData
      }, _this.forceUpdate());
    };

    _this.clearResultsData = function (index) {
      var breadlist = _this.state.breadlist;

      var _resultsData = _this.state.resultsData;
      if (index == undefined) {
        _resultsData.length = 0;
        breadlist.map(function (item) {
          return item.isChecked = false;
        });
      } else {
        //重置导航状态
        if (_this.props.allowContainsChildren && !_this.props.isSingleSelect) {
          breadlist.map(function (item) {
            if (item.index.toString().split("/")[0] == _resultsData[index].pIndex.split("/")[0]) item.isChecked = false;
          });
        }
        _resultsData.splice(index, 1);
      }
      _this.setState({ resultsData: _resultsData, breadlist: breadlist });
    };

    _this._findIndex = function () {
      if (!Array.prototype.findIndex) {
        Array.prototype.findIndex = function (predicate) {
          if (this === null) {
            throw new TypeError('Array.prototype.findIndex called on null or undefined');
          }
          if (typeof predicate !== 'function') {
            throw new TypeError('predicate must be a function');
          }
          var list = Object(this);
          var length = list.length >>> 0;
          var thisArg = arguments[1];
          var value;
          for (var i = 0; i < length; i++) {
            value = list[i];
            if (predicate.call(thisArg, value, i, list)) {
              return i;
            }
          }
          return -1;
        };
      }
    };

    _this.clearRSDataFromList = function (id, pIndex) {
      var _index = _this.state.resultsData.findIndex(function (val, index, arr) {
        return val.id == id;
      });
      if (_index != -1) {
        _this.clearResultsData(_index, pIndex);
      }
    };

    _this.getCurrentData = function () {
      var _areaData = _this.state.currentAreaTab === 0 ? _this.chinaData : _this.foreignData;
      var _lastBread = _this.state.breadlist[_this.state.breadlist.length - 1];
      var _currentData = [];
      switch (_this.state.breadlist.length) {
        case 1:
          _currentData = _areaData;
          break;
        case 2:
          _currentData = _areaData[parseInt(_lastBread['index'])]['childList'];
          if (_this.props.allLevelDisplay) {
            _currentData.forEach(function (item) {
              item.province = _areaData[parseInt(_lastBread['index'])].name;
            });
          }
          break;
        case 3:
          var _pIndexArr = _lastBread.index.split('/');
          _currentData = _areaData[parseInt(_pIndexArr[0])]['childList'][parseInt(_pIndexArr[1])]['childList'];
          if (_this.props.allLevelDisplay) {
            _currentData.forEach(function (item) {
              item.province = _areaData[parseInt(_pIndexArr[0])].name;
              item.area = _areaData[parseInt(_pIndexArr[0])]['childList'][parseInt(_pIndexArr[1])].name;
            });
          }
        default:
          break;

      }

      _this.setItemActive(_currentData, _lastBread);
    };

    _this.setItemActive = function (currentData, _lastBread) {
      var _resultdIdArr = [];
      _this.state.resultsData.forEach(function (item, index) {
        _resultdIdArr.push(item.id);
      });
      currentData.forEach(function (item, index) {
        item.isChecked = false;
        if (_this.props.allowContainsChildren && !_this.props.isSingleSelect) item.disabled = false;
        if (_resultdIdArr.length && _this.contains(_resultdIdArr, item.id)) {
          item.isChecked = true;
        }
      });
      // if(_lastBread.isChecked){
      //   currentData.map(item => {
      //     item.isChecked = true
      //   })
      // }
      _this.currentData = currentData;
    };

    _this.contains = function (arr, value) {
      var _func = Array.prototype.includes ? function (_arr, _value) {
        return _arr.includes(_value);
      } : function (_arr, _value) {
        return _arr.some(function (el) {
          return el === _value;
        });
      };
      return _func(arr, value);
    };

    _this.goNextLevel = function (name, id, pIndex, isChecked) {
      var _breadData = _this.state.breadlist;
      _breadData.push({ name: name, index: pIndex, isChecked: isChecked, id: id });
      _this.setState({ breadlist: _breadData });
    };

    _this.changeLevel = function (index) {
      var _breadData = _this.state.breadlist;
      _breadData.length = index + 1;
      _this.setState({ breadlist: _breadData });
    };

    _this.sureClick = function () {
      _this.props.sureClick(_this.state.resultsData);
    };

    _this.cancelClick = function () {
      _this.props.cancelClick();
    };

    _this.componentDidMount = function () {
      _this._findIndex();
    };

    _this.handleAreaTabChange = function (key) {
      _this.setState({
        currentAreaTab: key,
        breadlist: [{
          name: key === 0 ? _this.translation.nationWide : _this.translation.foreignWide,
          index: 0
        }]
      });
    };

    _this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
    var chinaData = void 0,
        foreignData = void 0;
    // 当数据源中有国外数据时，设置国外数据的值
    if (props.data[1][0] === '2') {
      chinaData = props.data.filter(function (_, i) {
        return i !== 1;
      });
      // 切割国外数据，将国外与其他地区整理为并列的结构然后格式化数据
      foreignData = _this.sortData([[props.data[1][0], props.data[1][1]]].concat((0, _toConsumableArray3.default)(props.data[1][2])), true);
    } else {
      chinaData = props.data;
    }
    chinaData = _this.sortData(chinaData);
    _this.chinaData = chinaData; // 中国数据
    _this.foreignData = foreignData || []; // 国外数据
    _this.currentData = chinaData; // 当前需要渲染数据
    _this.state = {
      currentAreaTab: 0,
      resultsData: props.defaultResults.length ? _this.handleDefaultResults(props.defaultResults) : [],
      breadlist: [{
        name: _this.translation.nationWide,
        index: 0
      }]
    };
    return _this;
  }

  // 对数据进行处理， 添加需要字段

  // 将选中数据添加到results中

  // 清空results

  // 反向清除results item 从 地区列表中

  // 获取currentData 根据Breaddata

  // 每次渲染时根据 已选中数据 控制item状态

  // 方法 判断某数据中是否存在某个值

  // 进入子级 地区

  // 面包屑跳转

  // 确定按钮点击


  (0, _createClass3.default)(AreaSelect, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var data = this.props.data;
      var currentAreaTab = this.state.currentAreaTab;

      this.getCurrentData();
      // 面包屑数据
      var _breadListData = {
        breadlist: this.state.breadlist,
        changeLevel: this.changeLevel
      };
      var _tabComponentData = {
        bsStyle: 'tabs',
        activeKey: currentAreaTab,
        tabItems: [{
          idx: 'tab0',
          eventKey: 0,
          title: data[0][1],
          active: currentAreaTab === 0
        }],
        callBack: this.handleAreaTabChange
      };

      if (this.foreignData.length > 0) {
        _tabComponentData.tabItems.push({
          idx: 'tab1',
          eventKey: 1,
          title: data[1][1],
          active: currentAreaTab === 1
        });
      }
      //选中父级，子集也选中
      if (this.props.allowContainsChildren && !this.props.isSingleSelect) {
        var pIndex = "";
        for (var i = 0; i < this.state.breadlist.length - 1; i++) {
          //根据面包屑数据获取pIndex
          pIndex = pIndex + (pIndex == "" ? "" : "/") + this.currentData[0].pIndex.split("/")[i];
        }
        var lastBreadData = this.state.breadlist[this.state.breadlist.length - 1];
        //判断进入下一级时父级是否被选中
        if (this.state.resultsData.filter(function (item) {
          return (_this2.state.currentAreaTab ? item.isForeign : !item.isForeign) && item.pIndex == pIndex;
        }).length > 0 || lastBreadData.isChecked && lastBreadData.index == pIndex) {
          this.currentData.map(function (item) {
            item.isChecked = true;
            item.disabled = true;
          });
        }
      }
      // 地区列表 数据
      var _optionsItemData = {
        isSingleSelect: this.props.isSingleSelect,
        totalCount: this.props.totalCount,
        resultsData: this.state.resultsData,
        currentData: this.currentData,
        goNextLevel: this.goNextLevel,
        setResultsData: this.setResultsData,
        clearRSDataFromList: this.clearRSDataFromList,
        hiddenTip: this.props.hiddenTip,
        sideTip: this.props.sideTip,
        allLevelDisplay: this.props.allLevelDisplay
        // 已选地区提示 数据
      };var _resultTipData = {
        totalCount: this.props.totalCount,
        hasCount: this.state.resultsData.length,
        clearResultsData: this.clearResultsData,
        translation: this.translation
        // 已选地区列表 数据
      };var _resultItemData = {
        resultsData: this.state.resultsData,
        clearResultsData: this.clearResultsData,
        hiddenTip: this.props.hiddenTip,
        sideTip: this.props.sideTip,
        translation: this.translation
      };
      return _react2.default.createElement(
        'div',
        { className: 'area-select', style: this.props.offset },
        _react2.default.createElement(
          'div',
          { className: 'area-select__container' },
          _react2.default.createElement(
            'div',
            { className: 'area-select__content_left' },
            _react2.default.createElement(_tabComponent2.default, _tabComponentData),
            _react2.default.createElement(_bread2.default, _breadListData),
            _react2.default.createElement(
              'div',
              { className: 'area-select__select-container' },
              _react2.default.createElement(_optionsItem2.default, _optionsItemData)
            )
          ),
          _react2.default.createElement(
            'div',
            { className: 'area-select__content_right' },
            _react2.default.createElement(_resultsTip2.default, _resultTipData),
            _react2.default.createElement(
              'div',
              { className: 'area-select__results-content' },
              _react2.default.createElement(_resultsItem2.default, _resultItemData)
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'btn-group area-select__footer' },
          _react2.default.createElement(
            'button',
            { className: 'btn btn_weaken btn_sm', onClick: this.cancelClick },
            this.translation.cancelText
          ),
          _react2.default.createElement(
            'button',
            { className: 'btn btn_default btn_sm', onClick: this.sureClick },
            this.translation.confirmText
          )
        )
      );
    }
  }]);
  return AreaSelect;
}(_react.Component), _class.defaultProps = {
  isSingleSelect: false,
  totalCount: 1,
  offset: {},
  defaultResults: [],
  sureClick: emptyFunc,
  cancelClick: emptyFunc,
  hiddenTip: false,
  sideTip: false
}, _temp);

module.exports = AreaSelect;