@beisen/ethos/lib/search/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 _class, _temp; /* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _es6PromiseDebounce = require('../es6-promise-debounce');

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

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

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

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

var Search = (_temp = _class = function (_Component) {
	(0, _inherits3.default)(Search, _Component);

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

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

		_this.onKeyDownHandler = function (event) {
			if (event.keyCode === 13) {
				_this.callBackValue(event, "onKeyDown");
			}
		};

		_this.onRealChange = function (event) {
			event.persist();
			_this.handelerChange(event);
		};

		_this.state = {
			left: 0 //并没什么用
			, formActive: '' //添加类，控制input下的蓝条。
			, placeholderShow: true //控制显示placeholder
			, inputValue: "" //input 的显示值

		};
		_this.removeInputValue = _this.removeInputValue.bind(_this);
		_this.handelerFocus = _this.handelerFocus.bind(_this);
		_this.handelerBlur = _this.handelerBlur.bind(_this);
		_this.handelerClick = _this.handelerClick.bind(_this);
		_this.handelerChange = (0, _es6PromiseDebounce2.default)(_this.handelerChange, 300);
		return _this;
	}

	(0, _createClass3.default)(Search, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			var self = this;
			var _props = this.props,
			    value = _props.value,
			    active = _props.active;


			if (value && value.length > 0) {
				this.setState({ placeholderShow: false, inputValue: value });
				this.refs.inputItem.value = (0, _commonFunc.decode)(value);
			}
			if (active) {
				setTimeout(function () {
					self.setState({ formActive: 'base-search-input-active' });
					self.refs.inputItem && self.refs.inputItem.focus();
				}, 100);
			}
			if (this.state.placeholderShow) {
				var length = this.refs.palceholderCon.clientWidth + 40;
				_reactDom2.default.findDOMNode(this).querySelector(".base-search-input-default").style.width = length + 'px';
			}
		}
	}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			if (nextProps.value != this.state.inputValue && nextProps.value != undefined) {
				if (nextProps.value.length != 0) {
					this.setState({ inputValue: nextProps.value });
					this.refs.inputItem.value = (0, _commonFunc.decode)(nextProps.value);
				} else {
					this.setState({ placeholderShow: true, inputValue: "" });
					this.refs.inputItem.value = '';
				}
			}
			if (nextProps.active != this.props.active && nextProps.active == false) {
				this.setState({ formActive: '' });
			}
		}
	}, {
		key: 'handelerClick',
		value: function handelerClick(event) {
			if (this.props.disabled) return false;
			this.callBackValue(event, "onClick");
			this.setState({ formActive: 'base-search-input-active' });
		}
	}, {
		key: 'handelerBlur',
		value: function handelerBlur(event) {
			this.callBackValue(event, "onBlur");
			if (event.target.value.length == 0) {
				this.setState({ placeholderShow: true, formActive: '' });
				this.refs.inputItem.blur();
			}
		}
	}, {
		key: 'handelerFocus',
		value: function handelerFocus(event) {
			this.callBackValue(event, "onFocus");
		}
	}, {
		key: 'handelerChange',
		value: function handelerChange(event) {
			this.callBackValue(event, "onChange");
			this.setState({ placeholderShow: false, inputValue: event.target.value });
		}
		//所有的事件调用逻辑都走这里

	}, {
		key: 'callBackValue',
		value: function callBackValue(event, status) {
			// if(status !='onChange'){
			// 	event.stopPropagation();
			// }
			this.props[status] && this.props[status]({
				"value": this.refs.inputItem ? this.refs.inputItem.value : '' //我们的input值
				, "event": event //我们触发的event
				, "method": this.props.method //组件内并没有操作
			});
		}
	}, {
		key: 'removeInputValue',
		value: function removeInputValue(event) {
			event.stopPropagation();
			this.refs.inputItem.value = '';
			// this.setState({inputValue: ''});
			/*
    * 由react引发的事件处理setState不会同步更新this.state，除此之外的this.state会同步执行
    */
			this.refs.inputItem.focus();
			this.callBackValue(event, 'onChange');
		}
	}, {
		key: 'render',
		value: function render() {
			var _state = this.state,
			    formActive = _state.formActive,
			    placeholderShow = _state.placeholderShow,
			    inputValue = _state.inputValue;
			var _props2 = this.props,
			    placeholder = _props2.placeholder,
			    disabled = _props2.disabled,
			    hidden = _props2.hidden,
			    readonly = _props2.readonly,
			    iconName = _props2.iconName,
			    useInputPlaceHolder = _props2.useInputPlaceHolder;

			var placeholderText = placeholderShow ? placeholder : "";
			//后边的关闭按钮
			var iconClose = inputValue.length > 0 && formActive.length > 0 ? _react2.default.createElement('a', { className: 'sys-icon-close', onClick: this.removeInputValue }) : "";
			var isIE = !!window.ActiveXObject || "ActiveXObject" in window;

			if (hidden) {
				return _react2.default.createElement('div', null);
			} else {
				return _react2.default.createElement(
					'div',
					{ className: 'base-search-component' },
					_react2.default.createElement(
						'div',
						{ ref: 'baseSearchInput', className: 'base-search-input ' + (isIE ? 'base-search_is-ie' : '') + formActive + (disabled ? ' search-disabled' : ' ') },
						_react2.default.createElement('input', {
							ref: 'inputItem',
							className: disabled ? 'base-search-disabled' : '',
							onChange: this.onRealChange,
							onFocus: this.handelerFocus,
							readOnly: readonly,
							disabled: disabled,
							defaultValue: (0, _commonFunc.decode)(inputValue),
							onKeyDown: this.onKeyDownHandler,
							onBlur: this.handelerBlur,
							placeholder: useInputPlaceHolder ? placeholderText : "",
							onClick: this.handelerClick
						}),
						_react2.default.createElement(
							'div',
							{ ref: 'baseSearchDefault', className: 'base-search-input-default' },
							iconName.length > 0 ? _react2.default.createElement('span', { className: 'base-search-input-icon ' + iconName }) : "",
							_react2.default.createElement(
								'span',
								{ ref: 'palceholderCon', className: 'base-search-input-placeholder' },
								placeholderText
							)
						),
						iconClose
					)
				);
			}
		}
	}]);
	return Search;
}(_react.Component), _class.defaultProps = {
	onKeyDown: function onKeyDown() {},
	useInputPlaceHolder: false,
	iconName: ""
}, _temp);


module.exports = Search;