@beisen/auto-tree/lib/constant.js

AutoTree

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

exports.getBtnData = getBtnData;
exports.getSearchData = getSearchData;
exports.getSysVersion = getSysVersion;
exports.getElByClass = getElByClass;
exports.setMaskStyle = setMaskStyle;
exports.setRealNode = setRealNode;
exports.renderTree = renderTree;
exports.renderAutoUl = renderAutoUl;
exports.setResult_Height = setResult_Height;
exports.resetPosition = resetPosition;
exports.getSelectedData = getSelectedData;
exports.pushLi = pushLi;
exports.getText = getText;
exports.getHightLightData = getHightLightData;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _toolTip = require('@beisen/tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

var _loading = require('@beisen/loading');

var _loading2 = _interopRequireDefault(_loading);

var _tree = require('@beisen/tree');

var _tree2 = _interopRequireDefault(_tree);

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

var _resizeEvent = require('./resize-event');

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

/* eslint-disable */
function getBtnData(bsStyle, bsSize, title, func) {
  var ret = {
    bsStyle: bsStyle || 'default',
    bsSize: bsSize || 'default',
    active: true,
    title: title || '确认',
    onClick: func || function (val) {}
  };
  return ret;
}

function getSearchData(searchValue, active, placeholder, searchPlaceholder) {
  var ret = {
    "placeholder": searchPlaceholder /**没有值的时候显示的内容(string)**/
    , "iconName": "sys-icon-sousuo" /**IconName 文字前面的图标**/
    , "value": searchValue || '' //搜索框中的默认值
    , "active": active ? active : false //input框激活
    , "hidden": false //隐藏搜索框
    , "readonly": false //搜索框只读
    , "disabled": false //搜索框禁用
    , useInputPlaceHolder: placeholder,
    "onClick": function onClick(val) {},
    "onBlur": function onBlur(val) {},
    "onFocus": function onFocus(val) {}
  };
  return ret;
}

function getCommonInputData(isActive, placeholder, _defaultValue, disabled, errorStatus, errorMsg, resultsData, _itemClose, onChange, addClass, removeClass) {
  var ret = {
    "status": "show",
    "isActive": isActive //蓝线是否出现
    , "placeHolder": placeholder //input中的placeholder
    , "defaultValue": _defaultValue //input中的defaultvalue
    , "readonly": disabled || '' //只读态
    , "errorStatus": errorStatus //报错
    , "errorMsg": errorMsg //报错信息，为空时不显示
    , "selectDate": resultsData,
    'istips': false,
    'hasInput': true
    //数据
    , handlerClick: function handlerClick() {},
    itemClose: function itemClose(event, item, index) {
      _itemClose(event, item, index);
    } //删除按钮回调
    , inputChange: function inputChange(event, status, value) {
      onChange(event);
    } //input的change事件
    , inputClick: function inputClick(event, status, value) {
      addClass(event);
    } //input的点击事件
    , inputBlur: function inputBlur(event, status, value) {
      removeClass(event);
    } //input的blur事件
  };
  return ret;
}

exports.getCommonInputData = getCommonInputData;
function getSysVersion() {
  //判断浏览器版本
  var Sys = {};
  var ua = navigator.userAgent.toLowerCase();
  var s = void 0;
  (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] : (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
  // if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
  return Sys;
}

function getElByClass(classN) {
  return document.getElementsByClassName(classN)[0];
}

function setMaskStyle() {
  var mask = getElByClass('AutoTree-mask');
  if (mask != undefined) {
    mask.style.height = window.innerHeight + 'px';
    mask.style.width = window.innerWidth + 'px';
  }
}

function setRealNode(event) {
  var node = event.target;
  var toLowerCase = node.tagName.toLowerCase();
  if (toLowerCase !== 'li' && toLowerCase !== 'span' && toLowerCase !== 'em' && node.className !== 'autoTree_ItemName' && node.className !== 'autoTree_ParentName') return;
  if (toLowerCase == 'span' || toLowerCase == 'em') {
    node = node.parentNode;
  }
  if (node.className == 'autoTree_ParentName') node = node.previousSibling;
  if (node.className == 'auto-tree__item ') node = node.firstChild;
  var nodeId = node.getAttribute('data-index');
  if (nodeId == null) node = node.parentNode;
  return node;
}

function renderTree(self, temp, offset, treeItemClick, ul_Content, itemClick, searchChange, searchCom, showPanel) {
  var _self$props = self.props,
      treeData = _self$props.treeData,
      autoTreeData = _self$props.autoTreeData,
      isFetching = _self$props.isFetching,
      componentId = _self$props.componentId,
      showDropDown = _self$props.showDropDown,
      translation = _self$props.translation;
  var _self$state = self.state,
      inputValue = _self$state.inputValue,
      isFocus = _self$state.isFocus,
      searchValue = _self$state.searchValue;

  var _tar = self.refs.autoForm_ref.refs.autoTreeInput;
  var autoTreeSum = autoTreeData ? autoTreeData : [];
  var assignTreeData = (0, _extends3.default)({}, treeData, { style: { "height": "315px" } });

  var AutoDom = isFetching ? _react2.default.createElement(
    'div',
    { style: { "maxHeight": '310px', 'overflowY': 'scroll', backgroundColor: "#FFF", height: '310px' } },
    _react2.default.createElement(_loading2.default, { type: 'small' })
  ) : searchChange ? (inputValue.length > 0 || searchValue.length > 0) && autoTreeSum.length > 0 ? _react2.default.createElement(
    'div',
    null,
    showPanel ? _react2.default.createElement(
      'div',
      { className: 'auto-result-container-search' },
      _react2.default.createElement(
        'ul',
        { className: 'auto-result', onClick: itemClick },
        ul_Content
      )
    ) : '',
    searchCom
  ) : (inputValue.length > 0 || searchValue.length > 0) && autoTreeSum.length == 0 ? _react2.default.createElement('div', { className: 'empty-con error_page', 'data-bg-text': self.translation.emptyBgText }) : _react2.default.createElement(
    'div',
    null,
    showPanel ? _react2.default.createElement(_tree2.default, (0, _extends3.default)({}, assignTreeData, { onClick: treeItemClick, translation: translation })) : '',
    searchCom
  ) : _react2.default.createElement(
    'div',
    null,
    showPanel ? _react2.default.createElement(_tree2.default, (0, _extends3.default)({}, assignTreeData, { onClick: treeItemClick, translation: translation })) : '',
    searchCom
  );
  var treeLength = treeData.treeData ? treeData.treeData.length : 0;
  var treeDOM = document.getElementsByClassName('base-tree-component')[0];
  var treeHeight = showDropDown ? 361 : 310;
  var height = isFetching ? 310 : treeHeight;
  if (!showPanel && showDropDown) height = 51;
  //修复点击后错位bug
  self.CommonMount.renderDom('autotree__tree-panel', // wrap's classname & id
  AutoDom, // content dom
  _tar, // 跟随目标
  [_tar, //挂载目标节点
  { // 挂载元素宽高 {width: '', height: ''}
    width: 340, // 挂载宽度
    height: height
  }], false, //labeL和input框是否为竖向结构，会留出对应的label空间
  0, //水平向左偏移量，为负数则向右
  false, //弹层靠左靠右模式，默认为false 靠左模式
  100 //window.onresize执行时间，默认100ms
  , 30);
}

function renderAutoUl(self, temp, offset) {
  var _self$state2 = self.state,
      isFocus = _self$state2.isFocus,
      inputValue = _self$state2.inputValue,
      isShow = _self$state2.isShow,
      showTree = _self$state2.showTree,
      style = _self$state2.style,
      status = _self$state2.status,
      autoTreeItems = _self$state2.autoTreeItems,
      hasClick = _self$state2.hasClick,
      single = _self$state2.single;
  var _self$props2 = self.props,
      autoTreeData = _self$props2.autoTreeData,
      sync = _self$props2.sync,
      componentId = _self$props2.componentId,
      isFetching = _self$props2.isFetching;

  if (!isFocus && showTree == false) self['domState' + componentId] = false;
  var autoResultHeight = void 0,
      tempPadding = void 0,
      showAutoUl = void 0,
      findAllText = void 0,
      ulChild = void 0,
      tempStyle = void 0,
      ulStyle = void 0,
      autoLi = void 0,
      li_ItemHeight = void 0,
      tempPopStyle = void 0,
      findAll_style = void 0;
  autoResultHeight = setResult_Height(autoTreeItems, inputValue, isFocus, hasClick, autoTreeData, sync, componentId);
  autoLi = self.returnAutoLi(true);
  if (status == 'edit') {
    ulChild = autoLi.length == 0 && inputValue.length >= 0 ? _react2.default.createElement('div', { className: 'findNothing empty-con' }) : autoLi;
    tempStyle = inputValue.length == 0 && autoLi.length == 0 ? '' : _react2.default.createElement(
      'div',
      { className: 'findAll', onClick: self.findAll, style: { 'position': 'absolute', 'bottom': '0', 'right': '15px' } },
      _react2.default.createElement(
        'label',
        null,
        '\u5168\u90E8\u67E5\u627E'
      )
    );
    ulStyle = tempStyle == '' ? { 'padding': '0 0 0 0' } : { 'maxHeight': '280px' };
    if (tempStyle == '') {
      ulStyle = { 'padding': '0 0 0 0' };
    } else if (self.renderParents_Node) {
      ulStyle = { 'maxHeight': '280px' };
    } else {
      ulStyle = { 'maxHeight': '250px' };
    }
    findAll_style = self.renderParents_Node ? {} : { 'bottom': '50px' };
    findAllText = inputValue.length >= 0 && autoLi.length == 0 && isFocus == true ? _react2.default.createElement(
      'div',
      { style: findAll_style, className: 'findAll-null' },
      _react2.default.createElement(
        'label',
        { onClick: self.findAll },
        '\u201C\u67E5\u627E\u5168\u90E8\u201D'
      )
    ) : tempStyle;
    showAutoUl = isShow ? _react2.default.createElement(
      'ul',
      { className: 'auto-result', style: ulStyle, onClick: self.itemClick },
      ulChild
    ) : '';
  }

  //根据是否显示父级设置下拉最大高度
  li_ItemHeight = self.renderParents_Node ? '280px' : '250px';
  tempPadding = isShow ? '44px' : '0';
  tempPopStyle = autoLi.length > 0 ? { 'maxHeight': li_ItemHeight, 'paddingBottom': tempPadding, 'lineHeight': '34px' } : { 'maxHeight': '280px' };

  var _tar = void 0;
  if (status == 'search' && single) {
    _tar = getElByClass('autoTree-search-input');
  } else if (status == 'edit' && !single) {
    _tar = self.refs.autoForm_ref.refs.autoTree_commonInput;
  } else if (status == 'edit' && single) {
    _tar = self.refs.autoForm_ref.refs.autoTreeInput;
  }

  var tempFecthing = isFetching ? _react2.default.createElement(
    'div',
    { style: { "maxHeight": '250px', 'overflowY': 'scroll', backgroundColor: "#FFF", height: '200px' } },
    _react2.default.createElement(_loading2.default, { type: 'small' })
  ) : _react2.default.createElement(
    'div',
    { style: { width: _tar.clientWidth } },
    showAutoUl,
    isShow ? findAllText : ''
  );
  var AutoDom = status == 'edit' ? _react2.default.createElement(
    'div',
    { className: status == 'edit' ? 'auto-result-container' : 'auto-result-container-search',
      style: tempPopStyle },
    tempFecthing
  ) : '';

  // AutoDom = isFetching ? tempFecthing : AutoDom;
  if (!showTree) {
    self.CommonMount.renderDom('mount-box', // wrap's classname & id
    AutoDom, // content dom
    _tar, // 跟随目标
    [_tar, //挂载目标节点
    { // 挂载元素宽高 {width: '', height: ''}
      width: _tar.clientWidth, // 挂载宽度
      height: autoResultHeight
    }]);
  }
  resetPosition(status, showTree, inputValue, autoTreeItems, componentId, autoTreeData, sync);
}

//根据数据计算下拉框的实际高度 以便利用高度计算定位位置
function setResult_Height(autoTreeItems, inputValue, isFocus, hasClick, autoTreeData, sync, componentId) {
  var autoResultHeight = void 0;
  var sessionData = JSON.parse(sessionStorage.getItem('search' + componentId));
  var dataResult = sync ? autoTreeItems : autoTreeData;
  var tempBool = (dataResult == undefined || dataResult.length == 0) && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == true || inputValue == '' && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == false;
  //根据数据计算下拉框的实际高度 以便利用高度计算定位位置
  // if(dataResult!=undefined || tempBool){
  var tempResult = dataResult != undefined ? tempBool ? sessionData : dataResult : sessionData;
  var maxLength = void 0,
      itemHeight = void 0;
  if (tempResult.length > 0) {
    maxLength = tempResult[0].pname ? 5 : 8;
    itemHeight = tempResult[0].pname ? 54 : 30;
  }
  if (tempResult.length == 0) {
    autoResultHeight = 259;
  } else if (tempResult.length > maxLength) {
    autoResultHeight = tempResult[0].pname ? 320 : 290;
  } else {
    autoResultHeight = tempResult.length * itemHeight + 56;
  }
  // }
  return autoResultHeight;
}

//弹窗定位
function resetPosition(status, showTree, inputValue, autoTreeItems, componentId, autoTreeData, sync) {
  var windowH = window.innerHeight;
  var windowW = window.innerWidth;
  var popAutoResult = getElByClass('pop-auto-result'); //弹窗中搜索结果节点
  var searchContainer = getElByClass('searchContainer');
  var autoResultContainer = getElByClass('auto-result-container');
  //设置弹窗定位
  if (status == 'edit' && autoResultContainer != undefined && searchContainer != undefined) {
    autoResultContainer.style.left = (windowW - autoResultContainer.offsetWidth) * 0.5 + 'px';
    autoResultContainer.style.top = (windowH - autoResultContainer.offsetHeight - 50) * 0.5 + 'px';
    autoResultContainer.display = 'block';
  } else if (status == 'search' && searchContainer != undefined) {
    searchContainer.style.left = (windowW - searchContainer.offsetWidth) * 0.5 + 'px';
    searchContainer.style.top = (windowH - searchContainer.offsetHeight) * 0.5 + 'px';
  }
}

function getSelectedData(func, dropDownData, translation) {
  var ret = {
    defaultValue: dropDownData.defaultValue || translation.thisLevelAndAllSubordinatesText,
    inputItems: [{
      "value": 0,
      "text": translation.thisLevelText,
      "isChecked": true
    }, {
      "value": 4,
      "text": translation.thisLevelAndAllSubordinatesText,
      "isChecked": false
    }],
    itemClickCallback: function itemClickCallback(event, target, val) {
      func(event, target, val);
    }
  };
  return ret;
}

function pushLi(autoLi, itemClass, holdon_class, i, id, text, sideTip, hiddenTip, index, beforeText, searchContent, searchText, renderParents_Node, pname, props) {
  var resultText = index == -1 ? text : _react2.default.createElement(
    'span',
    null,
    beforeText,
    searchContent,
    searchText
  );
  var status = props.status,
      single = props.single;

  if (status == 'edit' && !single) {
    autoLi.push(_react2.default.createElement(
      'li',
      { className: itemClass, id: holdon_class, key: i, 'data-index': id },
      _react2.default.createElement(
        _toolTip2.default,
        { title: text, side: sideTip, hidden: hiddenTip },
        _react2.default.createElement(
          'div',
          { className: 'autoTree_ItemName', 'data-index': id },
          _react2.default.createElement(
            'span',
            { 'data-index': id },
            resultText
          )
        )
      ),
      renderParents_Node == true ? _react2.default.createElement(
        _toolTip2.default,
        { title: pname ? pname : '－无－', side: sideTip, hidden: hiddenTip },
        _react2.default.createElement(
          'div',
          { className: 'autoTree_ParentName', 'data-index': id },
          _react2.default.createElement(
            'span',
            { 'data-index': id },
            pname ? pname : '－无－'
          )
        )
      ) : ''
    ));
  } else {
    autoLi.push(_react2.default.createElement(
      'li',
      { className: itemClass, id: holdon_class, key: i, 'data-index': id },
      _react2.default.createElement(
        _toolTip2.default,
        { title: text, side: sideTip, hidden: hiddenTip },
        _react2.default.createElement(
          'div',
          { className: 'autoTree_ItemName', 'data-index': id },
          _react2.default.createElement(
            'span',
            { 'data-index': id },
            resultText
          ),
          renderParents_Node == true ? _react2.default.createElement(
            _toolTip2.default,
            { title: pname ? pname : '－无－', side: sideTip, hidden: hiddenTip },
            _react2.default.createElement(
              'span',
              { className: 'auto-tree__item-pname', 'data-index': id },
              '(' + (pname ? pname : '－无－') + ')'
            )
          ) : ''
        )
      )
    ));
  }
}

function getText(index, text, valueLength, autoLi, itemClass, holdon_class, i, sideTip, hiddenTip, renderParents_Node, item, props) {
  var searchContent = void 0,
      searchText = void 0,
      beforeText = void 0;
  if (index != -1) {
    beforeText = index == 0 ? '' : text.substring(0, index);
    var subValue = text.substring(index, index == 0 ? valueLength : valueLength + index);
    searchContent = _react2.default.createElement(
      'em',
      null,
      subValue
    );
    searchText = text.substring(index == 0 ? valueLength : valueLength + index, text.length);
  }
  pushLi(autoLi, itemClass, holdon_class, i, item.id, text, sideTip, hiddenTip, index, beforeText, searchContent, searchText, renderParents_Node, (0, _commonFunc.decode)(item.pname), props);
}

function getHightLightData(holdOn_index, item, value, autoLi, i, renderParents_Node, sideTip, hiddenTip, props) {
  var text = void 0;
  text = (0, _commonFunc.decode)(item.name);
  var itemClass = renderParents_Node ? "auto-tree__item " : "auto-tree__item_notShow ";
  var holdon_class = i == holdOn_index ? 'li-hold-on' : '';
  //获取搜索字符在字段中的位置,分两种 1.首位(index==0) 2.非首位
  var index = text.indexOf(value);
  var valueLength = value.length;
  getText(index, text, valueLength, autoLi, itemClass, holdon_class, i, sideTip, hiddenTip, renderParents_Node, item, props);
  return autoLi;
}