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

DropDownList

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _beisenScrollBar = require('@beisen/beisen-scroll-bar');

var _beisenScrollBar2 = _interopRequireDefault(_beisenScrollBar);

var _DataItem = require('./DataItem');

var _DataItem2 = _interopRequireDefault(_DataItem);

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

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }

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

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

		var _this = _possibleConstructorReturn(this, _Component.call(this, props));

		_this.state = {
			top: -30
		};
		_this.itemHover = _this.itemHover.bind(_this);
		_this.onMouseOut = _this.onMouseOut.bind(_this);
		return _this;
	}

	DataList.prototype.itemHover = function itemHover(value) {
		this.setState({ top: value * 30 });
	};

	DataList.prototype.componentWillMount = function componentWillMount() {
		var activeData = this.props.listData.filter(function (item) {
			return item.isChecked;
		});
		if (activeData.length > 0) this.setState({ top: activeData[0].value * 30 });
	};

	DataList.prototype.onMouseOut = function onMouseOut() {
		this.setState({ top: -30 });
	};

	DataList.prototype.render = function render() {
		var _this2 = this;

		var list = void 0,
		    overflow = false;
		var _props = this.props;
		var listData = _props.listData;
		var searchValue = _props.searchValue;
		var itemClick = _props.itemClick;
		var listActive = _props.listActive;
		var _state = this.state;
		var active = _state.active;
		var top = _state.top;

		list = listData.map(function (item, index) {
			return _react2.default.createElement(_DataItem2.default, {
				key: index,
				item: item,
				index: index,
				searchValue: searchValue,
				itemHover: _this2.itemHover,
				itemClick: itemClick
			});
		});

		var height = listData.length * 30 > 300 ? 300 : listData.length * 30;
		if (listData.length > 10) overflow = true;

		return _react2.default.createElement(
			'div',
			{
				ref: 'dropUl',
				className: "drop-list " + (listActive ? "list-real-spread " : " ") + active,
				style: { 'height': listActive ? height : 0, 'overflowY': overflow ? 'auto' : 'hidden' },
				onMouseOut: this.onMouseOut },
			_react2.default.createElement(
				_beisenScrollBar2.default,
				{ style: { 'height': 'inherit' } },
				_react2.default.createElement(
					'ul',
					{ className: 'clearfix' },
					list,
					_react2.default.createElement('li', {
						className: 'drop-item-high-light',
						style: { "transition": "top 0.2s cubic-bezier(.25,.1,.25,1)", "transitionDelay": "0s!important", 'top': top, "boxSizing": "border-box" } })
				)
			)
		);
	};

	return DataList;
}(_react.Component);

DataList.propTypes = {
	active: _react.PropTypes.string
};

module.exports = DataList;