@beisen/auto-tree
Version:
AutoTree
1,321 lines (1,142 loc) • 1.29 MB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["index"] = factory();
else
root["index"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(1);
module.exports = __webpack_require__(1);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _stringify = __webpack_require__(2);
var _stringify2 = _interopRequireDefault(_stringify);
var _extends2 = __webpack_require__(5);
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = __webpack_require__(42);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = __webpack_require__(43);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(78);
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = __webpack_require__(86);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(243);
var _reactDom2 = _interopRequireDefault(_reactDom);
__webpack_require__(244);
var _tree = __webpack_require__(249);
var _tree2 = _interopRequireDefault(_tree);
var _commonMount = __webpack_require__(274);
var _commonMount2 = _interopRequireDefault(_commonMount);
var _es6PromiseDebounce = __webpack_require__(276);
var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);
var _constant = __webpack_require__(277);
var _search_Filters = __webpack_require__(279);
var _search_Filters2 = _interopRequireDefault(_search_Filters);
var _autoForm_Input = __webpack_require__(288);
var _autoForm_Input2 = _interopRequireDefault(_autoForm_Input);
var _FindAll_pop = __webpack_require__(314);
var _FindAll_pop2 = _interopRequireDefault(_FindAll_pop);
var _loading = __webpack_require__(258);
var _loading2 = _interopRequireDefault(_loading);
var _search = __webpack_require__(300);
var _search2 = _interopRequireDefault(_search);
var _commonLabel = __webpack_require__(296);
var _commonLabel2 = _interopRequireDefault(_commonLabel);
var _commonFunc = __webpack_require__(252);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var defaultTranslation = {
emptyBgText: '这里什么都没有...',
pleaseSearch: "请搜索",
confirmText: '确定',
inputToSearch: '输入可进行搜索',
thisLevelAndAllSubordinatesText: '本级别及所有下级',
thisLevelText: '本级别',
directSubordinateText: '直接下级',
allSubordinatesText: '所有下级',
thisLevelAndDirectSubordinateText: '本级别及直接下级'
};
var offset = {};
window.autoId;
var AutoTree = function (_Component) {
(0, _inherits3.default)(AutoTree, _Component);
function AutoTree(props) {
(0, _classCallCheck3.default)(this, AutoTree);
var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
_this.returnAutoLi = function (bool) {
var _this$state = _this.state,
index = _this$state.index,
isFocus = _this$state.isFocus,
inputValue = _this$state.inputValue,
searchValue = _this$state.searchValue,
showTree = _this$state.showTree,
autoTreeItems = _this$state.autoTreeItems,
hasClick = _this$state.hasClick;
var _this$props = _this.props,
autoTreeData = _this$props.autoTreeData,
componentId = _this$props.componentId,
sync = _this$props.sync,
sideTip = _this$props.sideTip,
hiddenTip = _this$props.hiddenTip,
single = _this$props.single,
status = _this$props.status;
var sessionData = _this.getSessionData(componentId);
var dataResult = sync ? autoTreeItems : autoTreeData;
if (dataResult != undefined && dataResult.length != 0) {
_this.renderParents_Node = dataResult[0].pname == undefined ? false : true;
}
var itemClass = _this.renderParents_Node ? "auto-tree__item " : "auto-tree__item_notShow ";
var ifbool = dataResult == undefined || dataResult.length == 0 && isFocus == true && sessionData != null && sessionData.length > 0;
var autoLi = [];
if (bool) ifbool = (dataResult == undefined || dataResult.length == 0) && !single && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == true || inputValue == '' && isFocus == true && sessionData != null && !single && sessionData.length > 0 && hasClick == false;
if (ifbool) {
for (var i = 0; i < sessionData.length; i++) {
var holdon_class = i == index ? 'li-hold-on' : '';
(0, _constant.pushLi)(autoLi, itemClass, holdon_class, i, sessionData[i].id, sessionData[i].name, sideTip, hiddenTip, -1, {}, {}, {}, _this.renderParents_Node, sessionData[i].pname, _this.props);
}
} else if (dataResult != undefined) {
//searchValue输入框搜索的值,text返回的值
var searchInputValue = status == 'search' ? searchValue : single ? inputValue : showTree ? searchValue : inputValue;
for (var _i = 0; _i < dataResult.length; _i++) {
autoLi = (0, _constant.getHightLightData)(index, dataResult[_i], searchInputValue, autoLi, _i, _this.renderParents_Node, sideTip, hiddenTip, _this.props);
}
}
_this.autoLi = autoLi;
return autoLi;
};
_this.clearResultsData = function (index) {
var _resultsData = _this.state.resultsData;
var _hasCount = _this.state.hasCount;
if (_hasCount == 0) return;
if (index == undefined) {
var _tempArr = _this._tempClosed.concat(_resultsData);
_this._tempClosed = _tempArr;
_resultsData.length = 0;
_hasCount = 0;
} else {
_this._tempClosed.push(_resultsData[index]);
_resultsData.splice(index, 1);
_hasCount = _hasCount - 1;
}
_this.setState({ resultsData: _resultsData, hasCount: _hasCount });
};
_this.handlerOver = function (event) {
var dom = (0, _reactDom.findDOMNode)(_this.refs.autoForm_ref.refs.mouseIconClose);
if (dom && dom.style.display == 'block' || _this.state.isFocus || !_this.state.inputValue || _this.props.disabled) {
return;
} else {
_this.setState({ isShowMouseOverIcon: true });
}
};
_this.handlerOut = function (event) {
var node = event.target;
if (node && node.nodeName.toLowerCase() == 'span' || _this.props.disabled) {
return;
} else {
_this.setState({ isShowMouseOverIcon: false });
}
};
_this.findAll_submit = function () {
var _this$props2 = _this.props,
treeData = _this$props2.treeData,
submitCallBack = _this$props2.submitCallBack;
_this.unmountMask();
_this.setState({ searchValue: '' });
//清空打开弹窗后已选项
_this._tempClosed = [];
treeData.clearTreeData && treeData.clearTreeData();
submitCallBack && submitCallBack(_this.state.resultsData);
};
_this.findAll_cancle = function () {
var self = _this;
var treeData = _this.props.treeData;
var resultsData = _this.state.resultsData;
var _resultsData = [];
var _temLength = self._tempSeleted.length;
var _tempClosed = self._tempClosed;
_this.unmountMask();
_this.setState({ searchValue: '' });
//将在弹窗内删除的加入到已选数据中
var _tempArr = resultsData.concat(_tempClosed);
resultsData = _tempArr;
var _resLength = resultsData.length;
//将在弹窗内选择的从已选数据中删除
for (var i = 0; i < _resLength; i++) {
var flag = false;
var it = resultsData[i];
for (var j = 0; j < _temLength; j++) {
var item = self._tempSeleted[j];
if (it.id == item) {
flag = true;
}
}
if (!flag) _resultsData.push(it);
}
//清空打开弹窗后已选项
self._tempClosed = [];
treeData.clearTreeData && treeData.clearTreeData();
_this.setState({ resultsData: _resultsData });
};
_this.renderMask = function () {
var _this$state2 = _this.state,
searchValue = _this$state2.searchValue,
autoTreeItems = _this$state2.autoTreeItems,
single = _this$state2.single;
var _this$props3 = _this.props,
treeData = _this$props3.treeData,
autoTreeData = _this$props3.autoTreeData,
sync = _this$props3.sync;
var dataResult = sync ? autoTreeItems : autoTreeData;
var autoLi = _this.returnAutoLi();
var popResult_style = single ? { 'width': '100%' } : {};
var _showTree = searchValue.length != 0 && dataResult != undefined && dataResult.length > 0;
var popUl = _showTree ? _react2.default.createElement(
'ul',
{ className: 'pop-auto-result', style: popResult_style, onClick: _this.itemClick },
autoLi
) : _react2.default.createElement(_tree2.default, (0, _extends3.default)({}, treeData, { onClick: _this.treeItemClick, translation: _this.translation }));
var findAll_Data = {
self: _this,
popUl: popUl,
findAll_cancle: _this.findAll_cancle,
findAll_submit: _this.findAll_submit,
single: single
};
var autoTreeMask = _react2.default.createElement(
'div',
null,
_react2.default.createElement(_FindAll_pop2.default, findAll_Data),
_react2.default.createElement('div', { className: 'AutoTree-mask ' })
);
_reactDom2.default.render(_react2.default.createElement(
'div',
null,
autoTreeMask
), document.getElementById('AutoTree_Mask'));
};
_this.addClass = function (event) {
var isIE11 = /Trident\/7\./.test(navigator.userAgent);
var _this$props4 = _this.props,
focusCallBack = _this$props4.focusCallBack,
componentId = _this$props4.componentId,
disabled = _this$props4.disabled;
var single = _this.state.single;
_this.clickScroll = true;
if (disabled || _this.state.isFocus == true) return;
var self = _this;
self.tar = single ? self.refs.autoForm_ref.refs.autoTreeInput : self.refs.autoForm_ref.refs.autoTree_commonInput;
window.autoId = componentId;
if (!single) self.addAndRemoveListen(true, true);
document.addEventListener('mousedown', self.handelOnMouseDown);
self.setState({ isActive: true, isFocus: true, isShow: true, autoTreeItems: [], showPanel: true });
self['domState' + componentId] = self.state.isFocus == false ? true : false;
focusCallBack && focusCallBack(event);
};
_this.editInput_focus = function () {
var edit_input = _this.props.single ? _this.refs.autoForm_ref.refs.autoTreeInput : _this.refs.autoForm_ref.refs.autoTree_commonInput;
var isIE11 = /Trident\/7\./.test(navigator.userAgent);
_this.setState({ isFocus: true });
_this.addClass(edit_input);
};
_this.handelOnMouseDown = function (event) {
var _this$props5 = _this.props,
status = _this$props5.status,
single = _this$props5.single,
componentId = _this$props5.componentId,
treeData = _this$props5.treeData,
isSearchAutoTreeEdit = _this$props5.isSearchAutoTreeEdit,
defaultValue = _this$props5.defaultValue,
itemCallBack = _this$props5.itemCallBack;
var self = _this;
var result_ul = status == 'edit' ? single ? (0, _constant.getElByClass)('autotree__tree-panel') : (0, _constant.getElByClass)('auto-result-container') : (0, _constant.getElByClass)('auto-result-container-search');
var inputDom = _this.refs.autoForm_ref && _this.refs.autoForm_ref.refs.autoTreeInput;
_this.clickScroll = result_ul && result_ul.contains(event.target) || inputDom && inputDom.contains(event.target) ? false : true;
if (event.target.className.indexOf("sys-icon-foldup") != -1) {
setTimeout(function () {
self['domState' + componentId] = true;
}, 100);
}
if (status == 'edit' && single && _this['domState' + componentId] === true) {
if (_this.clickScroll) {
_this['domState' + componentId] = false;
_this.unmountComponent(componentId);
var _inputValue = self.isValueChanged || self.refs.autoForm_ref.refs.autoTreeInput.value !== (0, _commonFunc.decode)(defaultValue) ? '' : _this.state.showPanel === false ? '' : (0, _commonFunc.decode)(defaultValue);
self.setState({
inputValue: _inputValue,
searchValue: ''
});
if (!_inputValue) {
itemCallBack && itemCallBack({});
}
if (single && !isSearchAutoTreeEdit) {
treeData.clearTreeData && treeData.clearTreeData();
}
document.removeEventListener('mousedown', _this.handelOnMouseDown);
setTimeout(function () {
self._tempCleared = false;
self.setState({ isActive: false, isFocus: false });
}, 300);
}
}
};
_this.removeClass = function (event) {
var self = _this;
var _this$props6 = _this.props,
componentId = _this$props6.componentId,
blurCallBack = _this$props6.blurCallBack,
onChange = _this$props6.onChange,
isTreeDataFetching = _this$props6.isTreeDataFetching;
var _this$state3 = _this.state,
status = _this$state3.status,
single = _this$state3.single;
self.isValueChanged = false;
setTimeout(function () {
if (self._tempCleared) return;
var isShow_Value = single ? false : true;
if (!single) self['domState' + componentId] = false;
self.setState({ isActive: false, isFocus: false, isShow: isShow_Value });
if (single && window.autoId == componentId && self.clickScroll) {
self.unmountComponent(componentId);
document.removeEventListener('mousedown', self.handelOnMouseDown);
}
if (single && self.clickScroll) self.addAndRemoveListen(true, false);
}, 300);
if (!_this.state.hasClick && _this.state.isSearchResultEmpty) {
_this.setState({ inputValue: '', isFocus: false, isSearchResultEmpty: false, searchChange: false });
}
// if (self.state.hasClick==false){
// if(self.refs.autoForm_ref.refs.autoTreeInput){
// self.refs.autoForm_ref.refs.autoTreeInput.value = ''
// }
// }
if (status == 'edit' && single && !isTreeDataFetching) _this['domState' + componentId] = false;
blurCallBack && blurCallBack(event);
};
_this.addAndRemoveListen = function (remove, add) {
if (remove) document.removeEventListener('click', _this.onClose);
if (add) document.addEventListener('click', _this.onClose);
};
_this.filterData = function (filterCondition) {
var autoTreeItems = _this.props.autoTreeData;
var filterData = filterCondition == '' ? [] : autoTreeItems.filter(function (item) {
return item.name.includes(filterCondition);
});
filterData.length > 0 ? _this.setState({ autoTreeItems: filterData }) : _this.setState({ autoTreeItems: [] });
};
_this.handleChange = function (val) {
var _this$props7 = _this.props,
getAutoTreeDataAPI = _this$props7.getAutoTreeDataAPI,
sync = _this$props7.sync,
getAutoTreeData = _this$props7.getAutoTreeData,
componentId = _this$props7.componentId,
findAllSearch = _this$props7.findAllSearch;
var filters = _this.state.filters;
_this.setState({ index: -1, showTreeResult: true, searchValue: val.value });
findAllSearch && findAllSearch(val.value);
if (val.value == '') return;
_this['domState' + componentId] = true;
sync ? _this.filterData(val.value) : getAutoTreeData(getAutoTreeDataAPI, val.value, filters);
};
_this.changeFilter = function (event, target, val) {
var _this$props8 = _this.props,
autoTreeSearchCallBack = _this$props8.autoTreeSearchCallBack,
componentId = _this$props8.componentId,
defaultValueObj = _this$props8.defaultValueObj;
var _this$state4 = _this.state,
hasClick = _this$state4.hasClick,
single = _this$state4.single,
resultsData = _this$state4.resultsData;
var temp_val = val == '' ? val : val.text;
_this.setState({ filters: temp_val });
if (_this['val' + componentId] == null || hasClick == false) {
_this['val' + componentId] = {
id: defaultValueObj && defaultValueObj.id || '',
name: defaultValueObj && defaultValueObj.name || '',
path: defaultValueObj && defaultValueObj.path || '',
level: defaultValueObj && defaultValueObj.level || '',
filters: temp_val
};
} else if (hasClick == true) {
_this['val' + componentId]['filters'] = temp_val;
}
if (!single && resultsData.length != 0) {
for (var i = 0; i < resultsData.length; i++) {
resultsData[i]['filters'] = temp_val;
}
_this.setState({ resultsData: resultsData });
}
autoTreeSearchCallBack && autoTreeSearchCallBack(single ? _this['val' + componentId] : resultsData, temp_val);
};
_this.findAll = function () {
var _this$props9 = _this.props,
clearAutoTreeData = _this$props9.clearAutoTreeData,
showPopCallback = _this$props9.showPopCallback,
componentId = _this$props9.componentId;
clearAutoTreeData();
(0, _constant.setMaskStyle)();
_this['domState' + componentId] = true;
_this.setState({ isShow: false, showTree: true });
_this.renderMask();
_this.unmountComponent(componentId);
_this.addAndRemoveListen(true, false);
showPopCallback && showPopCallback();
};
_this.setSessionData = function (self, componentId) {
sessionStorage.setItem('search' + componentId, (0, _stringify2.default)(self['temp' + componentId]));
_this.props.setSessionCallBack && _this.props.setSessionCallBack();
};
_this.getSessionData = function (componentId) {
return JSON.parse(sessionStorage.getItem('search' + componentId));
};
_this.itemClick = function (event) {
var _this$props10 = _this.props,
componentId = _this$props10.componentId,
autoTreeData = _this$props10.autoTreeData,
itemCallBack = _this$props10.itemCallBack;
var single = _this.state.single;
var node = (0, _constant.setRealNode)(event);
if (node) {
var nodeId = node.getAttribute('data-index');
if (!single && _this['domState' + componentId] === true) {
_this.renderDom();
}
_this.commonClick_Callback(false, nodeId, componentId, autoTreeData, itemCallBack);
}
};
_this.handleKeyDown = function (e) {
var _this$props11 = _this.props,
componentId = _this$props11.componentId,
autoTreeData = _this$props11.autoTreeData,
itemCallBack = _this$props11.itemCallBack,
sync = _this$props11.sync;
var _this$state5 = _this.state,
index = _this$state5.index,
showTree = _this$state5.showTree,
autoTreeItems = _this$state5.autoTreeItems,
isFocus = _this$state5.isFocus,
hasClick = _this$state5.hasClick,
inputValue = _this$state5.inputValue;
var trueIndex = index;
var popAutoResult = (0, _constant.getElByClass)('pop-auto-result');
var popAutoResult_ClientHeight = void 0,
maxLength = void 0,
tempLength = void 0,
autoResult = void 0;
var ItemHeight = _this.renderParents_Node ? 54 : 30;
if (popAutoResult != undefined) {
popAutoResult_ClientHeight = popAutoResult.offsetHeight - 10;
maxLength = parseInt(popAutoResult_ClientHeight / ItemHeight);
}
tempLength = showTree ? maxLength : _this.renderParents_Node ? 5 : 8;
var sessionData = _this.getSessionData(componentId);
var dataResult = sync ? autoTreeItems : autoTreeData;
var ifBool = (dataResult == undefined || dataResult.length == 0) && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == true || inputValue == '' && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == false;
dataResult = ifBool ? sessionData : dataResult;
autoResult = (0, _constant.getElByClass)('auto-result');
autoResult = showTree == true && popAutoResult != undefined ? popAutoResult : autoResult;
switch (e.keyCode) {
case 38:
//up
if (_this.state.index <= 0) {
return;
} else {
trueIndex = --_this.state.index % _this.autoLi.length;
}
if (trueIndex >= tempLength - 1) {
autoResult.scrollTop = trueIndex == tempLength - 1 ? autoResult.scrollTop - ItemHeight : (trueIndex - (tempLength - 1)) * ItemHeight;
}
_this.setState({ index: trueIndex });
break;
case 40:
//down
if (_this.state.index == dataResult.length - 1) return;
trueIndex = index < 0 ? 0 : ++index % _this.autoLi.length;
if (trueIndex >= tempLength) {
autoResult.scrollTop = dataResult.length - 1 == trueIndex ? (trueIndex - (tempLength - 1)) * ItemHeight + 44 : (trueIndex - (tempLength - 1)) * ItemHeight;
}
_this.setState({ index: trueIndex });
break;
case 13:
//enter
if (index == -1) return;
var nodeId = index;
_this.commonClick_Callback(true, nodeId, componentId, dataResult, itemCallBack);
if (_this.refs.autoForm_ref.refs.autoTreeInput) _this.refs.autoForm_ref.refs.autoTreeInput.blur();
break;
default:
break;
}
};
_this.clearDom = function () {
var dom_1 = (0, _constant.getElByClass)('');
var dom_2 = (0, _constant.getElByClass)('-arrow');
if (dom_1 && dom_2) {
var parNode = dom_1.parentNode;
parNode.removeChild(dom_1);
parNode.removeChild(dom_2);
}
};
_this.commonClick_Callback = function (type, nodeId, componentId, dataResult, func) {
var _this$props12 = _this.props,
isSearchAutoTreeEdit = _this$props12.isSearchAutoTreeEdit,
single = _this$props12.single,
status = _this$props12.status,
showDropDown = _this$props12.showDropDown,
removeComponent = _this$props12.removeComponent;
_this['domState' + componentId] = true;
var _resultsData = _this.state.resultsData;
var sessionData = _this.getSessionData(componentId);
var autoTreeList = dataResult != undefined && dataResult.length > 0 ? dataResult : sessionData;
_this.clearDom();
for (var i = 0; i < autoTreeList.length; i++) {
var real_Id = type == true ? i : autoTreeList[i].id;
if (real_Id == nodeId) _this['val' + componentId] = autoTreeList[i];
}
if ((!isSearchAutoTreeEdit && single || status == 'edit' && single) && !showDropDown) _this.unmountMask();
_this.setClickData(_this['val' + componentId].name, (0, _extends3.default)({}, _this['val' + componentId]), sessionData);
_this['val' + componentId]['filters'] = _this.state.filters;
//无法点击重复选项
var temp_resultsData = _resultsData.filter(function (child) {
return _this['val' + componentId].id == child.id;
});
if (temp_resultsData.length == 0) _resultsData.push(_this['val' + componentId]);
var _inputValue = _this.props.status == 'search' || _this.state.single ? _this['val' + componentId].name : '';
_this.setState({
inputValue: _inputValue,
// searchValue:'',
isFocus: false,
itemId: nodeId,
hasClick: true,
resultsData: _resultsData,
hasCount: _resultsData.length,
showPanel: false,
searchChange: false
});
if (!showDropDown) removeComponent && removeComponent();
if (single) _this.setState({ searchValue: _inputValue });
if (_this.state.showTree) _this._tempSeleted.push(_this['val' + componentId].id);
if (!_this.state.showTree && !_this.state.single || _this.state.single) func && func(_this.state.single ? _this['val' + componentId] : _resultsData);
};
_this.setClickData = function (name, value, sessionData) {
var componentId = _this.props.componentId;
var jsonFlag = false;
if (sessionData != null) {
for (var j = 0; j < sessionData.length; j++) {
if (sessionData[j].name == name) jsonFlag = true;
}
}
var tempSessionLength = sessionData == null ? 0 : sessionData.length;
_this['temp' + componentId] = _this['temp' + componentId] == undefined ? [] : _this['temp' + componentId];
if (tempSessionLength < 10 && jsonFlag == false) {
_this['temp' + componentId].length == 0 ? _this['temp' + componentId].push(value) : _this['temp' + componentId].unshift(value);
_this.setSessionData(_this, componentId);
} else if (tempSessionLength >= 10 && jsonFlag == false) {
_this['temp' + componentId].pop();
var s = value;
_this['temp' + componentId].unshift(s);
_this.setSessionData(_this, componentId);
} else {
_this.setSessionData(_this, componentId);
}
};
_this.clearData = function (event) {
var _this$props13 = _this.props,
clearCallback = _this$props13.clearCallback,
componentId = _this$props13.componentId;
if (_this.state.isFocus) {
_this.setState({ isFocus: true, isShow: true, inputValue: "", hasClick: false, isSearchResultEmpty: false });
} else {
_this.setState({ inputValue: "", isShow: false, hasClick: false, isFocus: false, isSearchResultEmpty: false });
}
_this['val' + componentId] = null;
_this._tempCleared = true;
clearCallback && clearCallback();
};
_this.unmountComponent = function (componentId) {
_this.CommonMount.unmountBox();
_this.setState({ index: -1 });
//删除监听点击外部收起下拉的回调
_this.addAndRemoveListen(true, false);
_this['domState' + componentId] = false;
_this.props.unmountCallBack && _this.props.unmountCallBack();
};
_this.unmountMask = function () {
_this.setState({ showTree: false });
_this.unmountComponent(_this.props.componentId);
if (document.getElementById('AutoTree_Mask')) {
_reactDom2.default.unmountComponentAtNode(document.getElementById('AutoTree_Mask'));
}
};
_this.onClose = function (event) {
var self = _this;
setTimeout(function () {
self._tempCleared = false;
}, 400);
var _this$props14 = _this.props,
status = _this$props14.status,
onCloseCallback = _this$props14.onCloseCallback,
componentId = _this$props14.componentId;
if (window.autoId == componentId) {
if (event && event.target.innerHTML == '全部查找' || event.target.innerHTML == "“查找全部”" || event.target.className.includes('sys-icon-close')) return;
var area = _this.tar;
var result_ul = status == 'edit' ? (0, _constant.getElByClass)('auto-result-container') : (0, _constant.getElByClass)('auto-result-container-search');
if (area == undefined && _this.state.showTree == false) {
_this.setState({ isShow: false });
_this.unmountComponent(componentId);
onCloseCallback && onCloseCallback(event);
return;
}
if (area != undefined && result_ul != undefined && !area.contains(event.target) && !result_ul.contains(event.target)) {
_this.setState({ isFocus: false, isShow: false });
_this.unmountComponent(componentId);
onCloseCallback && onCloseCallback(event);
if (_this.state.hasClick == false) _this.setState({ inputValue: '' });
}
}
};
_this.itemClose = function (event, item, index) {
var itemCloseCallBack = _this.props.itemCloseCallBack;
var _resultsData = _this.state.resultsData;
var _hasCount = _this.state.hasCount;
_resultsData = _resultsData.filter(function (child) {
return item.id != child.id;
});
_this.setState({ resultsData: _resultsData, hasCount: _hasCount - 1 });
itemCloseCallBack && itemCloseCallBack(_resultsData);
};
_this.treeItemClick = function (e, valObj) {
//点击树形结构内容
var _this$props15 = _this.props,
componentId = _this$props15.componentId,
itemCallBack = _this$props15.itemCallBack,
status = _this$props15.status,
treeData = _this$props15.treeData,
showDropDown = _this$props15.showDropDown,
isSearchAutoTreeEdit = _this$props15.isSearchAutoTreeEdit,
removeComponent = _this$props15.removeComponent;
_this['domState' + componentId] = true;
var single = _this.state.single;
if (single && !isSearchAutoTreeEdit) {
treeData.clearTreeData && treeData.clearTreeData();
}
var self = _this;
var _resultsData = _this.state.resultsData;
var sessionData = _this.getSessionData(componentId);
_this.setClickData(valObj.name, (0, _extends3.default)({}, valObj), sessionData);
if (_this['val' + componentId] != null) valObj.filters = _this['val' + componentId].filters;
_this['val' + componentId] = valObj;
if ((!isSearchAutoTreeEdit && single || status == 'edit' && single) && !showDropDown) _this.unmountMask();
var temp_resultsData = _resultsData.filter(function (child) {
return _this['val' + componentId].id == child.id;
});
if (temp_resultsData.length == 0) _resultsData.push(_this['val' + componentId]);
var _inputValue = status == 'search' || single ? valObj.name : '';
if (status == 'search') {
_this.setState({
nodeValue: valObj.name,
searchValue: _inputValue,
hasClick: true,
resultsData: _resultsData,
hasCount: _resultsData.length,
showPanel: false
}, _this.forceUpdate());
} else {
_this.setState({
nodeValue: valObj.name,
inputValue: _inputValue,
searchValue: _inputValue,
hasClick: true,
resultsData: _resultsData,
hasCount: _resultsData.length,
showPanel: false,
isFocus: false
}, _this.forceUpdate());
}
if (_this.state.showTree) _this._tempSeleted.push(_this['val' + componentId].id);
if (!showDropDown) {
removeComponent && removeComponent();
}
if (single && !isSearchAutoTreeEdit || status == 'search' || isSearchAutoTreeEdit) {
itemCallBack && itemCallBack(_this['val' + componentId]);
}
setTimeout(function () {
if (self.props.cmp_data && self.props.cmp_data.usepathsearch != 'true') {
self['domState' + self.props.componentId] = false;
document.removeEventListener('mousedown', self.handelOnMouseDown);
}
}, 500);
};
_this.handelSubmit = function () {
var searchValue = _this.state.searchValue;
var _this$props16 = _this.props,
isSearchAutoTreeEdit = _this$props16.isSearchAutoTreeEdit,
treeData = _this$props16.treeData;
document.removeEventListener('mousedown', _this.handelOnMouseDown);
if (isSearchAutoTreeEdit) {
_this.unmountMask();
treeData.clearTreeData && treeData.clearTreeData();
}
var val = void 0;
if (_this['val' + _this.props.componentId] && searchValue == _this['val' + _this.props.componentId].name) {
val = _this['val' + _this.props.componentId];
} else {
val = null;
}
_this.props.searchSubmitCallBack && _this.props.searchSubmitCallBack(val);
};
_this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
_this.state = {
isFocus: props && props.defaultStatus || false, // 输入框样式控制
isShowMouseOverIcon: false,
inputValue: props && props.defaultValue || '', //input表单值
itemId: '',
isShow: true,
showTree: false, //是否显示弹窗
status: props && props.status || 'edit',
showTreeResult: false, //是否显示弹窗内的搜索结果
searchValue: "",
autoTreeItems: [],
filters: '', //筛选条件
hidden: props && props.hidden || false,
hasClick: props.defaultValue == '' || props.defaultValue == undefined ? false : true,
index: -1, //键盘事件：当前选择项的index
hasCount: 0,
resultsData: _this._genInitResultData(), //已选数据
isActive: false,
single: props && props.single || props.single == undefined ? true : false,
defaultPlaceholder: props && props.placeholder || _this.translation.inputToSearch,
showPanel: props.status == 'search' ? true : false,
searchChange: false,
isSearchResultEmpty: false //
};
_this._tempClosed = [];
_this._tempSeleted = [];
_this._tempCleared = false;
_this.autoLi = [];
_this.clickScroll = true;
_this.chrome_tag = true;
_this.renderParents_Node = false;
_this['temp' + props.componentId] = [];
sessionStorage.setItem('search' + props.componentId, (0, _stringify2.default)(_this['temp' + props.componentId]));
_this['val' + props.componentId] = props && props.defaultValueObj || null;
_this.tar = null;
_this.createDom();
_this['domState' + props.componentId] = false;
_this.CommonMount = new _commonMount2.default({
containerId: 'AutoTree_ul', // 容器ID
follow: true, // 是否滚动跟随，默认true
fixed: true // 定位：fixed，false时为absolute
});
_this.onChange = _this.onChange.bind(_this);
_this.searchClick = _this.searchClick.bind(_this);
_this.onChange = (0, _es6PromiseDebounce2.default)(_this.onChange, 200);
return _this;
}
AutoTree.prototype._genInitResultData = function _genInitResultData() {
var result = [];
// 将字段传入的text和value整理成树能识别的格式，编辑态时才能正确展示所选的值
var text = this.props.text && this.props.text.length > 0 ? this.props.text.split(',') : [];
var value = this.props.value && this.props.value.length > 0 ? this.props.value.split(',') : [];
if (text.length != value.length || text.length == 0 || value.length == 0) {
return result;
} else {
for (var i = 0; i < value.length; i++) {
result.push({
id: value[i],
name: text[i]
});
}
return result;
}
};
AutoTree.prototype.createDom = function createDom() {
if (document.getElementById('AutoTree_Mask')) return;
var mDiv = document.createElement('div');
mDiv.id = 'AutoTree_Mask';
document.body.appendChild(mDiv);
};
//根据数据生成li，并且返回autoLi对象
//删除选中数据
//鼠标滑入
//鼠标滑出
//弹窗多选提交按钮
//弹窗多选取消按钮
//渲染弹窗
//input框下划线
//去掉input框下划线
//绑定click事件
//过滤数据
//外部input框onchange回调
AutoTree.prototype.onChange = function onChange(event) {
var self = this;
var _props = this.props,
getAutoTreeDataAPI = _props.getAutoTreeDataAPI,
sync = _props.sync,
componentId = _props.componentId,
getAutoTreeData = _props.getAutoTreeData,
changeCallBack = _props.changeCallBack,
clearCallback = _props.clearCallback,
single = _props.single,
status = _props.status;
var inputValue = status == 'search' ? event.value : event.target.value;
var filters = this.state.filters;
var formRef = this.refs.autoForm_ref;
this._tempCleared = false;
this.isValueChanged = true;
if (status == 'search' || single) {
this.setState({ index: -1, isShow: true, showPanel: true, searchChange: true, hasClick: false, inputValue: inputValue, searchValue: inputValue });
} else {
this.setState({ index: -1, isShow: true, hasClick: false, inputValue: inputValue });
}
this['domState' + componentId] = true;
if (formRef) this.tar = this.props.single ? formRef.refs.autoTreeInput : formRef.refs.autoTree_commonInput;
offset = {
zIndex: '99999',
position: 'fixed'
};
if (inputValue == '') clearCallback && clearCallback();
//异步请求or 同步请求
sync == false ? getAutoTreeData(getAutoTreeDataAPI,
// 对特殊字符需要做转义
(0, _commonFunc.encode)(inputValue), filters) : this.filterData(inputValue);
setTimeout(function () {
self.renderDom(false, offset);
}, 200);
changeCallBack && changeCallBack(event, this.state, inputValue);
};
AutoTree.prototype.onRealChange = function onRealChange(event) {
event.persist();
this.onChange(event);
};
//search组件内的onchange回调
//改变筛选条件时的回调：点击edit态右侧下拉以及search态的selectComponent
//点击查找全部
//将选中数据存进session
//将session内存储数据取出
//将点击的数据存入session
//点击叉号清除input框
//删除挂载
//删除弹窗
//点击外部收起下拉
//commonInput内删除已选项的回调
//树组件点击回调
//搜索态点击确定
AutoTree.prototype.componentDidUpdate = function componentDidUpdate() {
var _state = this.state,
status = _state.status,
showTree = _state.showTree,
inputValue = _state.inputValue,
isFocus = _state.isFocus,
autoTreeItems = _state.autoTreeItems;
var _props2 = this.props,
componentId = _props2.componentId,
autoTreeData = _props2.autoTreeData,
sync = _props2.sync,
single = _props2.single;
var popAutoResult = (0, _constant.getElByClass)('pop-auto-result'); //弹窗中搜索结果节点
var searchContainer = (0, _constant.getElByClass)('searchContainer');
var autoResultContainer = (0, _constant.getElByClass)('auto-result-container');
var windowH = window.innerHeight;
var windowW = window.innerWidth;
var ItemHeight = this.renderParents_Node ? 54 : 30;
var selected_Component = (0, _constant.getElByClass)('selected_Component');
if (selected_Component) {
selected_Component.style.width = windowW * 0.65 - 301 + 'px';
selected_Component.style.marginLeft = '15px';
selected_Component.style.marginTop = '15px';
}
if (popAutoResult != undefined) {
var popAutoResult_ClientHeight = searchContainer.offsetHeight * 0.85 - 10;
var maxLength = parseInt(popAutoResult_ClientHeight / ItemHeight);
var finalHeight = maxLength * ItemHeight;
popAutoResult.style.maxHeight = finalHeight + 'px';
}
if (status == 'search') {
var reConNode = (0, _constant.getElByClass)('autoTree_Search');
var resultNode = (0, _constant.getElByClass)('auto-result-container-search');
var searchInput = (0, _constant.getElByClass)('autoTree-search-input');
if (searchInput && !this.chrome_tag) searchInput.style.lineHeight = 23 + 'px';
if (reConNode != undefined && resultNode != undefined && !showTree) {
reConNode.style.boxShadow = '0px 3px 10px rgba(0, 0, 0, 0.15)';
}
}
var dataResult = sync ? autoTreeItems : autoTreeData;
if (status == 'status' && inputValue.length > 0 && dataResult.length == 0 && isFocus == true) {
autoResultContainer.style.height = '360px';
}
//设置弹窗定位
if (showTree && searchContainer != undefined) {
var temp_Height = status == 'edit' ? 50 : 0;
searchContainer.style.left = (windowW - searchContainer.offsetWidth) * 0.5 + 'px';
searchContainer.style.top = (windowH - searchContainer.offsetHeight - temp_Height) * 0.5 + 'px';
}
if (status == 'edit' && !single) {
if (inputValue.length == 0 && isFocus == true) this['domState' + componentId] = true;
if (showTree == true) this['domState' + componentId] = true;
}
var self = this;
if (this['domState' + componentId]) {
self.renderDom(false, offset);
}
if (showTree) this.renderMask();
};
AutoTree.prototype.componentDidMount = function componentDidMount() {
var status = this.state.status;
if (status == 'search') {
var reConNode = this.refs.AutoTree;
if (reConNode != undefined) {
reConNode.style.boxShadow = '0px 3px 10px rgba(0, 0, 0, 0.15)';
}
this.setState({ isFocus: true });
}
this.chrome_tag = parseInt((0, _constant.getSysVersion)().chrome) >= 50 ? true : false;
//初次渲染input框为onfocus状态
if (this.props.defaultStatus) this.refs.autoForm_ref.refs.autoTreeInput.focus();
(0, _constant.setMaskStyle)();
};
//接收到新数据
AutoTree.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var nextAutoData = nextProps.autoTreeData;
var nextTreeData = nextProps.treeData.treeData;
var _props3 = this.props,
autoTreeData = _props3.autoTreeData,
treeData = _props3.treeData,
componentId = _props3.componentId;
//改变传入input的inputValue值
if (nextProps.defaultValue != this.props.defaultValue && nextProps.defaultValue != this.state.inputValue) {
this.setState({ defaultValue: nextProps.defaultValue, inputValue: nextProps.defaultValue });
if (nextProps.defaultValue.length == 0 && this['val' + this.props.componentId]) {
this['val' + this.props.componentId].filters = '';
}
}
if (this['domState' + componentId] === true) {
//autoTreeData数据变化时改变state
if (nextAutoData != undefined && autoTreeData != undefined && nextAutoData.length != autoTreeData.length) {
this.setState({ showPanel: true });
}
//treeData数据变化时改变state
if (nextTreeData != undefined && treeData.treeData != undefined && nextTreeData.length != treeData.treeData.length) {
this.setState({ showPanel: true });
}
}
if (!this.state.isSearchResultEmpty && !(nextAutoData && nextAutoData.length)) {
this.setState({ isSearchResultEmpty: true });
} else {
this.setState({ isSearchResultEmpty: false });
}
};
//render下拉框
AutoTree.prototype.renderDom = function renderDom(temp) {
var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var self = this;
var _props4 = this.props,
status = _props4.status,
single = _props4.single,
isSearchAutoTreeEdit = _props4.isSearchAutoTreeEdit,
showDropDown = _props4.showDropDown,
DropDownData = _props4.DropDownData;
var _state2 = this.state,
isShow = _state2.isShow,
inputValue = _state2.inputValue,
searchChange = _state2.searchChange,
showPanel = _state2.showPanel;
if (status != 'search') {
if (single) {
var ul_Content = void 0;
var autoLi = this.returnAutoLi(true);
var autoLiChild = autoLi.length > 0 ? autoLi : '';
if (isShow) ul_Content = autoLi.length == 0 && inputValue.length > 0 ? _react2.default.createElement('div', { className: 'findNothing empty-con', 'data-bg-text': this.translation.emptyBgText }) : autoLiChild;
var searchCom = _react2.default.createElement(_search_Filters2.default, { DropDownData: DropDownData, isSearchAutoTreeEdit: isSearchAutoTreeEdit, changeFilter: this.changeFilter, showDropDown: showDropDown, handelSubmit: this.handelSubmit, isPanelShow: isShow, translation: this.translation });
(0, _constant.renderTree)(self, temp, offset, self.treeItemClick, ul_Content, self.itemClick, searchChange, searchCom, showPanel);
} else {
(0, _constant.renderAutoUl)(self, temp, offset);
}
}
};
AutoTree.prototype.searchClick = function searchClick(event) {
var showPanel = this.state.showPanel;
if (!showPanel) {
this.setState({ showPanel: true });
}
};
AutoTree.prototype.render = function render() {
var _state3 = this.state,
isFocus = _state3.isFocus,
inputValue = _state3.inputValue,
isShow = _state3.isShow,
searchValue = _state3.searchValue,
status = _state3.status,
single = _state3.single,
resultsData = _state3.resultsData,
isShowMouseOverIcon = _state3.isShowMouseOverIcon,
defaultPlaceholder = _state3.defaultPlaceholder,
showPanel = _state3.showPanel,
searchChange = _state3.searchChange;
var _props5 = this.props,
showDropDown = _props5.showDropDown,
errorMsg = _props5.errorMsg,
showText = _props5.showText,
errorStatus = _props5.errorStatus,
placeholder = _props5.placeholder,
autoTreeData = _props5.autoTreeData,
isSearchAutoTreeEdit = _props5.isSearchAutoTreeEdit,
readOnly = _props5.readOnly,
treeData = _props5.treeData,
componentId = _props5.componentId,
DropDownData = _props5.DropDownData,
disabled = _props5.disabled,
defaultValue = _props5.defaultValue;
var ul_Content = void 0;
var autoLi = this.returnAutoLi(true);
var autoLiChild = autoLi.length > 0 ? autoLi : '';
var _defaultValue = resultsData.length == 0 ? defaultValue || '' : '';
var cInputData = (0, _constant.getCommonInputData)(this.state.isActive, placeholder, _defaultValue, disabled, errorStatus, errorMsg, this.state.resultsData, this.itemClose, this.onChange, this.addClass, this.removeClass);
var autoTreeSum = autoTreeData ? autoTreeData : [];
var assignTreeData = (0, _extends3.default)({}, treeData, { style: { "height": "325px" } });
if (isShow) ul_Content = autoLi.length == 0 && inputValue.length > 0 ? _react2.default.createElement('div', { className: 'findNothing empty-con', 'data-bg-text': this.translation.emptyBgText }) : autoLiChild;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ ref: 'AutoTree', onKeyDown: this.handleKeyDown, className: 'field auto-tree' + (status == 'search' ? ' autoTree_Search' : '') },
status == 'edit' ? _react2.default.createElement(
'div',
{ className: status == 'edit' ? 'innerAutoTree' : '' },
_react2.default.createElement(
'div',
{ className: 'form-item ' + (errorStatus && single ? 'base-input-error-label' : '') },
status == 'edit' ? _react2.default.createElement(_commonLabel2.default, this.props) : '',
_react2.default.createElement(_autoForm_Input2.default, { status: status,
isShowMouseOverIcon: isShowMouseOverIcon,
isFocus: isFocus,
disabled: disabled,
single: single,
showDropDown: showDropDown,
placeholder: defaultPlaceholder,
inputValue: inputValue,
defaultValue: defaultValue,
errorMsg: errorMsg,
showText: showText,
autoId: window.autoId,
componentId: componentId,
DropDownData: DropDownData,
errorStatus: errorStatus,
commmonInput_Data: cInputData,
handlerOver: this.handlerOver,
readOnly: readOnly,
handlerOut: this.handlerOut,
clearData: this.clearData,
addClass: this.addClass,
editInput_focus: this.editInput_focus,
removeClass: this.removeClass,
onChange: this.onRealChange.bind(this),
findAll: this.findAll,
changeFilter: this.changeFilter,
isSearchAutoTreeEdit: isSearchAutoTreeEdit,
ref: 'autoForm_ref'
})
)
) : _react2.default.createElement(
'div',
{ className: 'auto-tree__search-panel' },
_react2.default.createElement(_search2.default, (0, _extends3.default)({}, (0, _constant.getSearchData)(searchValue, showPanel ? true : false, true, this.translation.pleaseSearch), { onChange: this.onChange, onClick: this.searchClick })),
this.props.isFetching ? _react2.default.createElement(
'div',
{ style: { "maxHeight": '310px', 'overflowY': 'scroll', backgroundColor: "#FFF", height: '310px' } },
_react2.default.createElement(_loading2.default, { type: 'small' })
) : searchChange ? searchValue.length > 0 && autoTreeSum.length > 0 ? _react2.default.createElement(
'div',
{ className: 'auto-result-container-search', style: { display: showPanel ? 'block' : 'none' } },
_react2.default.createElement(
'ul',
{ className: 'auto-result', onClick: this.itemClick },
ul_Content
)
) : searchValue.length > 0 && autoTreeSum.length == 0 ? _react2.default.createElement('div', { className: 'empty-con error_page', 'data-bg-text': this.translation.emptyBgText }) : showPanel ? _react2.default.createElement(_tree2.default, (0, _extends3.default)({}, assignTreeData, { onClick: this.treeItemClick, translation: this.translation })) : '' : showPanel ? _react2.default.createElement(_tree2.default, (0, _extends3.default)({}, assignTreeData, { onClick: this.treeItemClick, translation: this.translation })) : '',
_react2.default.createElement(_search_Filters2.default, { DropDownData: DropDownData, isSearchAutoTreeEdit: isSearchAutoTreeEdit, changeFilter: this.changeFilter, showDropDown: showDropDown, handelSubmit: this.handelSubmit, translation: this.translation })
)
)
);
};
return AutoTree;
}(_react.Component);
module.exports = AutoTree;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = { "default": __webpack_require__(3), __esModule: true };
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
var core = __webpack_require__(4);
var $JSON = core.JSON || (core.JSON = { stringify: JSON.stringify });
module.exports = function stringify(it) { // eslint-disable-line no-unused-vars
return $JSON.stringify.apply($JSON, arguments);
};
/***/ }),
/* 4 */
/***/ (function(module, exports) {
var core = module.exports = { version: '2.5.3' };
if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _assign = __webpack_require__(6);
var _assign2 = _interopRequireDefault(_assign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _assign2.default || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
/***/ }),
/* 6 */
/***/ (function(module, exports, __