@beisen/ethos/lib/multi-select/index.js

beisencloud pc react components

'use strict';

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _parentItem = require('./parentItem.js');

var _parentItem2 = _interopRequireDefault(_parentItem);

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

if (!String.prototype.includes) {
	String.prototype.includes = function () {
		'use strict';

		return String.prototype.indexOf.apply(this, arguments) !== -1;
	};
};
if (!Array.prototype.findIndex) {
	Array.prototype.findIndex = function (predicate) {
		'use strict';

		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;
	};
};

var MultiSelect = function (_Component) {
	(0, _inherits3.default)(MultiSelect, _Component);

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

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

		_this.state = {
			treeData: [],
			levelData: [],
			selectItem: [],
			itemData: {}
		};
		_this.handleHover = _this.handleHover.bind(_this);
		_this.handleClick = _this.handleClick.bind(_this);
		return _this;
	}

	(0, _createClass3.default)(MultiSelect, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			this.getData(this.props.id);
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			if (nextProps.treeData != this.state.treeData) {
				this.setState({ treeData: nextProps.treeData });
			}
			this.getlevelData(this.state.itemData, nextProps.treeData);
		}
	}, {
		key: 'getData',
		value: function getData(id) {
			var _props = this.props,
			    treeData = _props.treeData,
			    getTreeData = _props.getTreeData,
			    async = _props.async,
			    getTreeDataAPI = _props.getTreeDataAPI,
			    postData = _props.postData,
			    methodType = _props.methodType;

			this.setState({ treeData: this.props.treeData });
			getTreeData && getTreeData(id, async, getTreeDataAPI, true, postData ? postData : {}, methodType ? methodType : 'GET');
		}
	}, {
		key: 'getlevelData',
		value: function getlevelData(ItemData, treeData) {
			var data = treeData.filter(function (data) {
				return data && data.pid == ItemData.id;
			});
			var levelData = this.state.levelData;
			var selectItem = this.state.selectItem;
			if (data && ItemData.has_child) {
				levelData[ItemData.level] = data;
				var level = parseInt(ItemData.level) + 1;
				levelData = levelData.slice(0, level);
			} else {
				levelData = levelData.slice(0, ItemData.level);
			}
			selectItem[ItemData.level - 1] = ItemData.name;
			this.setState({ levelData: levelData, selectItem: selectItem });
		}
	}, {
		key: 'handleHover',
		value: function handleHover(ItemData) {
			var dataState = true;
			this.state.treeData && this.state.treeData.map(function (data) {
				if (data && ItemData.id == data.pid) {
					return dataState = false;
				}
			});
			if (dataState && ItemData.has_child) {
				this.getData(ItemData.id);
			}
			this.setState({ itemData: ItemData });
			this.getlevelData(ItemData, this.state.treeData);
		}
	}, {
		key: 'handleClick',
		value: function handleClick(event, itemData) {
			var selectArr = this.state.selectItem.slice(0, itemData.level).join('/');
			this.props.onClick(event, itemData, selectArr);
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			var levelData = this.state.levelData;
			if (this.state.treeData.length != 0 && levelData.length == 0) {
				var oneLevel = this.props.treeData.filter(function (data) {
					return data.level == 1;
				});
				levelData.push(oneLevel);
			};
			var levelView = levelData.map(function (data, index) {
				return _react2.default.createElement(_parentItem2.default, { data: data, key: index, handleHover: _this2.handleHover, handleClick: _this2.handleClick });
			});
			var offset = this.props.offset;
			return _react2.default.createElement(
				'div',
				{ className: 'multi-wrap clearfix', style: this.props.offset },
				levelView
			);
		}
	}]);
	return MultiSelect;
}(_react.Component);

module.exports = MultiSelect;