@beisen/ethos/lib/selected-component/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');

var _InputItem = require('./InputItem.js');

var _InputItem2 = _interopRequireDefault(_InputItem);

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

var _commonFunc = require('../common-func');

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

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

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

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

		_this.handleInputFocus = function (event) {
			var writeInputNode = _this.refs.selectInput;
			if (writeInputNode) {
				_this.setState({ inputStyle: {
						top: writeInputNode.offsetTop + writeInputNode.offsetHeight + 'px',
						left: writeInputNode.offsetLeft + 1 + 'px'
					} });
			}
			_this.setState({ inputClassName: 'writeInput writeInputonClick', showDropDown: !_this.state.showDropDown });
			document.removeEventListener('click', _this.handleInputBlur);
			document.addEventListener('click', _this.handleInputBlur);
		};

		_this.handleInputBlur = function (event) {
			var area = document.getElementsByClassName('writeInput')[0];
			if (area != undefined && !area.contains(event.target)) {
				_this.setState({ inputClassName: 'writeInputonBlur', showDropDown: false });
			}
		};

		_this.itemClick = function (event) {
			var val = {
				text: event.target.innerText
			};
			(0, _commonFunc.clearToolTipDom)();
			_this.setState({ showDropDown: false, inputValue: val.text });
			_this.props.itemClickCallback && _this.props.itemClickCallback(event, event.target, val);
		};

		_this.state = {
			inputValue: props && props.defaultValue || '',
			inputClassName: 'writeInput writeInputonBlur',
			showDropDown: false,
			inputStyle: {}
		};
		return _this;
	}

	(0, _createClass3.default)(SelectedComponent, [{
		key: 'componentWillUnMount',
		value: function componentWillUnMount() {
			document.removeEventListener('click', this.handleInputBlur);
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			var _state = this.state,
			    inputValue = _state.inputValue,
			    inputClassName = _state.inputClassName,
			    inputStyle = _state.inputStyle,
			    showDropDown = _state.showDropDown;
			var _props = this.props,
			    inputItems = _props.inputItems,
			    sideTip = _props.sideTip,
			    hiddenTip = _props.hiddenTip;

			var selectIconClassName = showDropDown ? 'selectIcon pc-sys-dropdownmin-active-svg' : 'selectIcon pc-sys-dropdownmin-nomal-svg';
			return _react2.default.createElement(
				'div',
				null,
				_react2.default.createElement(
					'div',
					{ ref: 'selectInput', onClick: this.handleInputFocus, className: inputClassName },
					_react2.default.createElement(
						'span',
						{ className: 'inputText' },
						(0, _commonFunc.decode)(inputValue)
					),
					_react2.default.createElement('span', { className: selectIconClassName })
				),
				showDropDown ? _react2.default.createElement(
					'div',
					{ className: 'input-dropDown' },
					_react2.default.createElement(
						'ul',
						{ className: 'input-dropDownUl' },
						inputItems.map(function (item, index) {
							return _react2.default.createElement(_InputItem2.default, {
								item: item,
								key: index,
								text: item.text,
								hiddenTip: hiddenTip,
								sideTip: sideTip,
								itemClick: _this2.itemClick
							});
						})
					)
				) : ''
			);
		}
	}]);
	return SelectedComponent;
}(_react.Component); /* eslint-disable */


module.exports = SelectedComponent;