@beisen/ethos/lib/tab-component/DropDownList/DropDownList.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

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 _DataItem = require('./DataItem');

var _DataItem2 = _interopRequireDefault(_DataItem);

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

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

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

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

		_this.itemClick = function (val, index) {
			_this.setState({ listActive: false });
			_this.props.dropDownClick && _this.props.dropDownClick(val, index);
		};

		var defualt = {
			listActive: false
		};
		_this.state = (0, _extends3.default)({}, defualt, props);
		return _this;
	}

	(0, _createClass3.default)(DropDownList, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			this.setState({ listActive: true });
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			var _state = this.state,
			    data = _state.data,
			    listActive = _state.listActive;

			var list = void 0,
			    overflow = false;
			var _props$data = this.props.data,
			    children = _props$data.children,
			    hiddenTip = _props$data.hiddenTip,
			    sideTip = _props$data.sideTip;

			list = children.map(function (item, index) {
				return _react2.default.createElement(_DataItem2.default, {
					key: index,
					item: item,
					index: index,
					itemClick: _this2.itemClick,
					hiddenTip: hiddenTip,
					sideTip: sideTip
				});
			});
			var height = children.length * 27 > 270 ? 270 : children.length * 27; //设置最大高度，根据数据判断
			if (children.length > 10) overflow = true;
			if (data.hidden) {
				return _react2.default.createElement('div', null);
			} else {
				return _react2.default.createElement(
					'div',
					{ className: 'tab-drop-down-search-component' },
					_react2.default.createElement(
						'div',
						{ className: 'tab-drop-list-wrapper' },
						_react2.default.createElement(
							'div',
							{ ref: 'dropUl',
								className: "tab-drop-list tab-drop-list-real " + (listActive ? "tab-list-real-spread " : " ") + this.state.active,
								style: { 'height': listActive ? height : 0, 'overflowY': overflow ? 'auto' : 'hidden' }
							},
							_react2.default.createElement(
								'ul',
								{ className: 'clearfix' },
								list
							)
						)
					)
				);
			}
		}
	}]);
	return DropDownList;
}(_react.Component);

module.exports = DropDownList;