@beisen/dropdown-list/lib/index.js

DropDownList

'use strict';

var _extends = Object.assign || 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; };

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _commonMount = require('@beisen/common-mount');

var _commonMount2 = _interopRequireDefault(_commonMount);

var _inputBox = require('@beisen/input-box');

var _inputBox2 = _interopRequireDefault(_inputBox);

var _dropdown = require('@beisen/dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

require('../src/style/index.scss');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var defaultTranslation = {
	pleaseSearchText: '请搜索',
	confirmText: '确定',
	pleaseSelect: '请选择',
	emptyBgText: '这里什么都没有...'
};

var DropDownList = function (_Component) {
	_inherits(DropDownList, _Component);

	function DropDownList(props) {
		_classCallCheck(this, DropDownList);

		var _this = _possibleConstructorReturn(this, (DropDownList.__proto__ || Object.getPrototypeOf(DropDownList)).call(this, props));

		_this.clearToolTipDom = function () {
			var dom_1 = document.getElementById('DropdownList_ul');
			if (dom_1) {
				var parNode = dom_1.parentNode;
				parNode.removeChild(dom_1);
			}
		};

		_this.onClose = function (event) {
			try {
				(0, _reactDom.findDOMNode)(_this);
			} catch (e) {
				_this.CommonMount.unmountBox();
				_this.setState({ keepActive: false });
				document.removeEventListener('mousedown', _this.onClose);
				_this.props.onClose && _this.props.onClose("close");
				return;
			}
			// let selfDom = findDOMNode(this);
			var area = document.getElementById("DropdownList_ul");
			if (area && !area.contains(event.target)) {
				if (event.target.className.indexOf('sys-icon-close') > -1 || event.target.className.indexOf('u-icon') > -1 || event.target.tagName === 'BODY') return;
				_this.CommonMount.unmountBox();
				_this.setState({ keepActive: false });
				document.removeEventListener('mousedown', _this.onClose);
				_this.props.onClose && _this.props.onClose("close");
			}
			if (event.target.className == "btn btn_default btn_sm") {
				_this.setState({ keepActive: false });
			}
		};

		_this.handlerClick = function (event, dom) {
			setTimeout(function () {
				_this.renderDOM(dom, _this.state.selectDate);
			}, 0);
			_this.setState({ keepActive: true });
			_this.props.onFocus && _this.props.onFocus(event);
			window.activeTarget = event;
			document.removeEventListener('mousedown', _this.onClose);
			document.addEventListener('mousedown', _this.onClose);
		};

		_this.itemClose = function (event, index, item) {
			var selectDate = _this.state.selectDate;
			selectDate = selectDate.filter(function (it) {
				return item.value != it.value;
			});
			_this.setState({ selectDate: selectDate });
			window.activeTarget = null;
			_this.props.onClick && _this.props.onClick(event, item, selectDate);
			_this.props.onChange && _this.props.onChange(event, item, selectDate);
			if (_this.state.keepActive) {
				_this.renderDOM(event.target.parentNode.parentNode, selectDate);
			}
		};

		_this.translation = Object.assign({}, defaultTranslation, props.translation);
		_this.state = {
			defaultValue: props.defaultValue,
			keepActive: false,
			children: props.children,
			selectDate: props.children.filter(function (item) {
				return item.isChecked;
			}),
			defaultPlaceholder: props && props.placeholder || _this.translation.pleaseSelect
		};
		_this.CommonMount = new _commonMount2.default({
			containerId: 'DropdownList_ul', // 容器ID
			follow: true, // 是否滚动跟随，默认true
			fixed: true // 定位：fixed，false时为absolute
		});
		return _this;
	}

	_createClass(DropDownList, [{
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			if (JSON.stringify(nextProps.children) != JSON.stringify(this.props.children)) {
				this.setState({
					children: nextProps.children,
					selectDate: nextProps.children.filter(function (item) {
						return item.isChecked;
					})
				});
			}
			if (nextProps.defaultValue != this.state.defaultValue) {
				this.setState({ defaultValue: nextProps.defaultValue });
			}
		}
	}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate() {
			var _refs$inputbox$refs = this.refs.inputbox.refs,
			    textinput = _refs$inputbox$refs.textinput,
			    formItem = _refs$inputbox$refs.formItem;

			var renderNode = textinput ? textinput.parentNode : formItem && formItem.querySelector(".form-item__control_is-active");

			if (renderNode && this.state.keepActive && this.props.autoShowPanel) this.renderDOM(renderNode, this.state.selectDate);
			if (this.props.readonly || this.props.disabled) {
				this.CommonMount.unmountBox();
			}
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.CommonMount.unmountBox();
		}
	}, {
		key: 'renderDOM',
		value: function renderDOM(tar, selectDate) {
			if (!this.props.showPanel || !tar) return;
			var children = this.state.children;
			children.map(function (item, index) {
				item.isChecked = false;
				selectDate.map(function (it, i) {
					if (item.value == it.value) {
						item.isChecked = true;
					}
				});
			});
			var self = this;
			var dropdownDate = {
				"limitCount": this.props.limitCount,
				"multiple": this.props.multiple,
				"children": children.filter(function (item) {
					return !item.onlyShowInput;
				}),
				"dropdownWidth": this.props.dropDownWidth || tar.offsetWidth,
				"hasSearch": children.length > 10 && this.props.hasSearch != false,
				"showAdvancedMode": this.props.showAdvancedMode,
				"onClick": function onClick(event, val) {
					if ((typeof val === 'undefined' ? 'undefined' : _typeof(val)) == 'object' && val.constructor == Array) {
						self.setState({ selectDate: val, keepActive: false });
						self.props.onClick && self.props.onClick(event, event.target, val);
						self.props.onChange && self.props.onChange(event, event.target, val);
					} else {
						self.setState({ keepActive: false });
						self.props.onClick && self.props.onClick(event, event.target, val);
						self.props.onChange && self.props.onChange(event, event.target, val);
					}
					self.CommonMount.unmountBox();
					document.removeEventListener('mousedown', self.onClose);
				},
				"onAdvancedModeClick": function onAdvancedModeClick(event) {
					self.setState({ keepActive: false });
					self.props.onAdvancedModeClick && self.props.onAdvancedModeClick(event);
					self.CommonMount.unmountBox();
					document.removeEventListener('mousedown', self.onClose);
				},
				emptyBgText: this.translation.emptyBgText,
				translation: this.translation
			};
			var dropHeight = void 0,
			    documentHeight = void 0;
			documentHeight = document.body.scrollHeight == 0 ? document.documentElement.scrollHeight : document.body.scrollHeight;
			var dropcount = this.props.children.length > 10 ? 10 : this.props.children.length;
			dropHeight = this.props.children.length > 10 ? this.props.multiple ? 374 : 270 : this.props.multiple ? dropcount * 26 + 66 : dropcount * 26 + 10;
			while (documentHeight < dropHeight) {
				dropHeight = dropHeight - 26;
			}
			var maxHeight = this.props.multiple ? this.props.children.length > 10 ? dropHeight - 118 : dropHeight - 66 : dropHeight;
			maxHeight = maxHeight < 120 ? 120 : maxHeight;
			maxHeight = maxHeight > 260 ? 260 : maxHeight;
			dropHeight = this.props.children.length ? dropHeight : 200;
			var hasSearch = this.props.children.length > 10 && this.props.hasSearch != false;
			if (!this.props.multiple) dropHeight = dropHeight + (hasSearch ? this.props.staticSearchHeight || 40 : 0);
			var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
			var showAutoUl = _react2.default.createElement(_dropdown2.default, _extends({}, dropdownDate, { hasSelectAll: this.props.hasSelectAll }));

			var mountTarget = tar;
			for (var i = 0; i < tar.children.length; i++) {
				if (tar.children[i].tagName.toLowerCase() === 'input') {
					mountTarget = tar.children[i];
					break;
				}
			}

			this.CommonMount.renderDom('mount-box-dropdownlist', // wrap's classname & id
			showAutoUl, // content dom
			mountTarget, // 跟随目标
			[mountTarget, //挂载目标节点
			{ // 挂载元素宽高 {width: '', height: ''}
				width: this.props.dropDownWidth || tar.clientWidth, // 挂载宽度
				height: dropHeight
			}], false, //labeL和input框是否为竖向结构，会留出对应的label空间
			0, //水平向左偏移量，为负数则向右
			false, //弹层靠左靠右模式，默认为false 靠左模式
			100 //window.onresize执行时间，默认100ms
			, 30 //输入框高度
			, this.props.isSearchDrop && isIE ? false : undefined //自定义zindex
			);
		}
	}, {
		key: 'render',
		value: function render() {
			if (this.tar && document.getElementById('mount-box-dropdownlist')) {
				var _bottom = this.tar.getBoundingClientRect().bottom;
				var _width = this.props.dropDownWidth || this.tar.offsetWidth;
				document.getElementById('mount-box-dropdownlist').style.top = _bottom + 'px';
				document.getElementById('mount-box-dropdownlist').style.width = _width + 'px';
			}
			var self = this;
			var _props = this.props,
			    title = _props.title,
			    PromptMsg = _props.PromptMsg,
			    errorStatus = _props.errorStatus,
			    errorMsg = _props.errorMsg,
			    helpMsg = _props.helpMsg,
			    multiple = _props.multiple,
			    disabled = _props.disabled,
			    readonly = _props.readonly,
			    required = _props.required,
			    hasClosebtn = _props.hasClosebtn,
			    lablePos = _props.lablePos,
			    lableTxt = _props.lableTxt,
			    hasInput = _props.hasInput,
			    showInput = _props.showInput,
			    isShowTips = _props.isShowTips,
			    sideTip = _props.sideTip;

			var oriData = this.state.selectDate;
			oriData.map(function (item, index) {
				item["value"] = item.value, item["name"] = item.text, item["isActive"] = item.isActive, item["tipText"] = item.tipText, item["isChecked"] = item.isChecked;
			});
			var inputDate = {
				"status": "" //展示态为show，编辑态为其他
				, "multiple": multiple //单选还是多选
				, 'inputBoxReadonly': true,
				titleDate: {
					"title": title //标题
					, "required": required //必选
					, "helpMsg": helpMsg //帮助信息，当为空时没有帮助信息
					, "lablePos": lablePos //label位置，true时在左边，false在上边
					, "lableTxt": lableTxt //label中文字对齐方式，true左对齐，false右对齐
				},
				commonDate: {
					"defaultValue": this.state.defaultValue //默认文字
					, "placeholder": this.state.defaultPlaceholder //input中placeholder
					, "keepActive": this.state.keepActive //保持蓝线一直存在
					, "PromptMsg": PromptMsg //提示信息，为空时不显示
					, "errorStatus": errorStatus //报错
					, "errorMsg": errorMsg //报错信息，为空时不显示
					, "disabled": disabled //input的disable状态，没有下划线
					, "readonly": readonly //input的readonly状态
					, "isShowTips": isShowTips //是否显示tooltip，若不传默认显示
					, "sideTip": sideTip //toolTip是否左右显示
				},
				showDate: {
					"isLink": false //展示态是否是链接
					, "linkValue": "" //展示态链接地址
					, "selfJump": true //链接跳转方式
				},
				singleDate: {
					"closeBtn": hasClosebtn == undefined || hasClosebtn ? true : false //是否使用close按钮
					, "arrowdownBtn": true //是否使用下拉图标
					, "keepValue": true //用于带下拉，可以focue以及蓝线等，只是不可以输入值，通过defaultvalue改变
					, handlerClick: function handlerClick(event, status, value) {
						if (readonly || disabled) return;
						// if (event.target.tagName == 'INPUT') {
						// 	self.handlerClick(event, event.target.parentNode)
						// } else {
						var target = void 0;
						if (event.className == 'u-input') {
							target = event;
							if (event.style.maxWidth.indexOf('calc') >= 0) {
								target = event.parentNode;
							}
						} else if (event.target.className == 'u-input') {
							target = event.target.parentNode;
						} else {
							target = event.target;
						}
						self.handlerClick(event, target);
						// }
					},
					dropClick: function dropClick(event, value, dom) {
						self.handlerClick(event, dom.parentNode);
					},
					handlerChange: function handlerChange(event, status, value) {
						self.props.onChange && self.props.onChange(event, status, value);
					}
				},
				multiDate: {
					"hasInput": hasInput,
					"showInput": showInput,
					"selectDate": oriData //数据
					, handlerClick: function handlerClick(event, dom) {
						self.handlerClick(event, dom);
					},
					itemClose: function itemClose(event, item, index, selectDate) {
						self.itemClose(event, index, item);
					},
					dropClick: function dropClick(event, status, dom) {
						self.handlerClick(event, dom);
					}
				}
			};
			return _react2.default.createElement(_inputBox2.default, _extends({}, inputDate, { ref: 'inputbox' }));
		}
	}]);

	return DropDownList;
}(_react.Component);

DropDownList.defaultProps = {
	showPanel: true,
	hasSearch: true,
	limitCount: 999999,
	PromptMsg: ""
};

module.exports = DropDownList;