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

DropDownList

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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 DataItem = function (_Component) {
	_inherits(DataItem, _Component);

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

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

		_this.itemMouseOver = _this.itemMouseOver.bind(_this);
		_this.handelClick = _this.handelClick.bind(_this);
		return _this;
	}

	DataItem.prototype.handelClick = function handelClick(event) {
		var _props = this.props;
		var itemClick = _props.itemClick;
		var item = _props.item;

		itemClick(event, item);
	};

	DataItem.prototype.itemMouseOver = function itemMouseOver() {
		this.props.itemHover(this.props.index);
	};

	DataItem.prototype.render = function render() {
		var _props2 = this.props;
		var searchValue = _props2.searchValue;
		var index = _props2.index;
		var item = _props2.item;


		var searchContent = void 0,
		    text = item.text,
		    beforeText = void 0;
		if (searchValue.length > 0) {
			//获取搜索字符在字段中的位置,分两种 1.首位(index==0) 2.非首位
			var _index = item.text.indexOf(searchValue);
			var valueLength = searchValue.length;
			if (_index == 0) {
				var subValue = item.text.substring(_index, valueLength);
				searchContent = _react2.default.createElement(
					'em',
					null,
					subValue
				);
				text = text.substring(valueLength, item.text.length);
			} else if (_index > 0) {
				beforeText = item.text.substring(0, _index);
				var _subValue = item.text.substring(_index, valueLength + _index);
				searchContent = _react2.default.createElement(
					'em',
					null,
					_subValue
				);
				text = text.substring(valueLength + _index, item.text.length);
			}
		}
		return _react2.default.createElement(
			'li',
			{ className: 'drop-down-list-item', onMouseOver: this.itemMouseOver, 'data-id': item.value, onClick: this.handelClick },
			beforeText,
			searchContent,
			text
		);
	};

	return DataItem;
}(_react.Component);

module.exports = DataItem;