@beisen/dropdown-list/lib/SearchCheckBoxList/CheckBoxItem.js

DropDownList

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

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

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

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

		var defaults = {
			checkboxItems: [{
				bsStyle: true,
				isChecked: false,
				listActive: false,
				top: 55,
				hightLightColor: '#F5F8FA'
			}]
		};
		_this.state = _extends({}, defaults, props);
		_this.itemHover = _this.itemHover.bind(_this);
		_this.handleClick = _this.handleClick.bind(_this);
		return _this;
	}

	CheckboxItem.prototype.handleClick = function handleClick(event) {
		var _props = this.props;
		var handleClick = _props.handleClick;
		var item = _props.item;

		handleClick(event, item.value, item);
	};

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

	CheckboxItem.prototype.render = function render() {
		var _props2 = this.props;
		var searchValue = _props2.searchValue;
		var index = _props2.index;
		var item = _props2.item;
		var isItemmChecked = _props2.isItemmChecked;
		var handleHover = _props2.handleHover;
		var handleMouseOut = _props2.handleMouseOut;


		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',
					{ className: 'checkbox-content-text' },
					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',
					{ className: 'checkbox-content-text' },
					_subValue
				);
				text = text.substring(valueLength + _index, item.text.length);
			}
		}

		return _react2.default.createElement(
			'div',
			{ className: 'search-checkbox search-checkbox-optional', onMouseOver: this.itemHover },
			_react2.default.createElement('label', { className: isItemmChecked, onClick: this.handleClick, onMouseOver: handleHover, onMouseOut: handleMouseOut }),
			_react2.default.createElement(
				'label',
				{ className: 'search-checkbox-check-title', title: item.text },
				beforeText,
				searchContent,
				_react2.default.createElement(
					'span',
					{ className: 'checkbox-content-text' },
					text
				)
			)
		);
	};

	return CheckboxItem;
}(_react.Component);

exports.default = CheckboxItem;