@beisen/recruit-auto-tree/src/autoForm_Input.js

import React, {Component} from 'react'
import debounce from '@beisen/es6-promise-debounce';
import CommonInput from '@beisen-platform/common-input';
import EditFilters from './edit_Filters.js';
import {decode, judgeBrowser} from '@beisen-platform/common-func';
import CloseIcon from '@beisen-platform/react-icons/lib/icons/Close.js';

export default class AutoForm_Input extends Component {
	constructor(props) {
		super(props)
		this.state = {
			isMinWidth: false,
      pointerEvent: "auto",
      showHiddenTips: 'block',
      mouseTips: false
		}
    }

	resizeInputWidth = () => {
		let inputNode = this.refs.autoFormInput;
		if (inputNode!=undefined && inputNode.clientWidth!=0) {
			inputNode.clientWidth <= 270 ? this.setState({isMinWidth: true}) : this.setState({isMinWidth: false}) ;
		}
	}

	componentDidMount() {
		const {status, showDropDown} = this.props;
		let self = this;
		//编辑态双排排列时 根据宽度自适应
		if(status == 'edit' && showDropDown == true) {
			this.resizeInputWidth();
			window.addEventListener('resize',debounce(function() {
	      	self.resizeInputWidth();
	    },200),false)
		}
	}

	componentWillReceiveProps(nextProps) {
		const {commmonInput_Data, single, defaultValue, inputValue, disabled} = this.props;
		if (defaultValue != nextProps.defaultValue && single && !disabled) {
			this.refs.autoTreeInput.value = decode(nextProps.defaultValue);
		}
		if (inputValue != nextProps.inputValue && single && !disabled) {
			this.refs.autoTreeInput.value = decode(nextProps.inputValue);
		}
		if (commmonInput_Data.selectDate && nextProps.selectDate) {
			let updateSelectData = commmonInput_Data.selectDate.length != nextProps.selectDate.length ? true : false;
			if (updateSelectData) this.setState({});
		}
		if (commmonInput_Data.isActive && nextProps.isActive && commmonInput_Data.isActive != nextProps.isActive) {
			this.setState({});
		}
	}

  onMouseTip = () => {
    let self =this;
    //解决点击输入框时光标错位，引起原因是输入框上有层div导致
    setTimeout(() => {
      self.setState({mouseTips: true})
    },100)
	}

	tipsClick = () => {
    this.setState({pointerEvent: "none", showHiddenTips: 'none'})
    this.refs.autoTreeInput.focus()
	}

	handlerOver = () => {
		this.props.handlerOver()
	}

	handlerOut = e => {
		this.setState({
			mouseTips: false,
			hoverFocusing: false
		})
		clearToolTipDom();
		this.props.handlerOut(e)
	}

	render() {
		const {disabled, status, isShowMouseOverIcon, showDropDown, DropDownData, placeholder, inputValue,
		  defaultValue, isFocus, errorStatus, errorMsg, single, showText, commmonInput_Data,
			isSearchAutoTreeEdit, readOnly} = this.props;
		const {isMinWidth, pointerEvent, showHiddenTips, mouseTips} = this.state;
		let isMinClass, inutClassStyle, inputClass, isDisabled, inputStyle, autoInput_class, closeBtnClass,
			dropDownIcon, iconOrText, erroStyle, notDropDown, baseStyle;
		let _autoTreeLeft_Class = '';

		isMinClass = isMinWidth ? 'leftInput-showDropDown isMinWidth' : 'leftInput-showDropDown notMin';
		inutClassStyle = status=='edit'
											? showDropDown
													? isMinWidth
														? 'auto-form-input-active-showDropDownisMin '
														: 'auto-form-input-active-showDropDown '
													:'auto-form-input-active-notShowDropDown '
											: 'auto-form-input-active-seach ';

		inputClass = !errorStatus && isFocus && single ? inutClassStyle : '';
		closeBtnClass = status=='search'
										? 'icon-close date-time-close-search closeBtn-search'
										: showDropDown
											? 'icon-close date-time-close closeBtn-edit-showDropDown'
											: 'icon-close date-time-close closeBtn-edit-notShowDropDown';

		if (status=='search') erroStyle = {'height': '45px'};
		if (!errorStatus) baseStyle = {'height': '0px'};
		let showClose = (inputValue.length>0 && (isFocus==true || isShowMouseOverIcon))
			? 'block'
			: 'none' ;

		if (disabled == false || disabled == undefined) {
			isDisabled = '';
			inputStyle = {'paddingRight': '33px'};
		} else {
			isDisabled = 'disabled';
			inputStyle = {	'background': 'rgb(245, 248, 250)',
    						'border': '1px solid rgb(228, 235, 240)',
						    'borderRadius': '5px',
						    'fontFamily': 'PingFangSC-Regular',
						    'fontSize': '12px',
						    'color': '#3E4E59',
						    'letterSpacing': '0px',
						    'lineHeight': '20px',
						   	'textAlign': 'left',
						   	'cursor': 'no-drop'
						}
		}

		if (disabled) {
			dropDownIcon = '';
		} else {
			dropDownIcon =  <span className={showDropDown ?'autoTreeIcon-showDropDown pc-sys-arrowdown-nomal-svg' :'autoTreeIcon-notShowDropDown pc-sys-arrowdown-nomal-svg'} onClick={this.props.editInput_focus}>
							</span>;
		}

		if (status=='edit') {
			iconOrText = dropDownIcon;
			autoInput_class = single ? 'auto-input-edit' : 'auto-input-edit_muit' ;
			_autoTreeLeft_Class = !single ? '' : 'autoTreeLeftInput-single ' ;
			notDropDown = isSearchAutoTreeEdit ? ' auto-tree__input_not-dropdown' : '' ;
		} else {
			autoInput_class = 'auto-input-search'
			iconOrText = <div className='findAll'><label onClick={this.props.findAll}>全部查找</label></div>;
		}
	let decodeValue = decode(defaultValue)
	console.log(decodeValue)
		return (
			<div ref="autoFormInput"
				className={"field-right auto-rightinput auto-form-input " + inputClass + autoInput_class + notDropDown}
				style={erroStyle}
			>
				<div ref='leftInput' className={status=='edit'?showDropDown && !isSearchAutoTreeEdit?isMinClass:'leftInput-notShowDropDown':''}>
					{single && status == 'edit' || status == 'search'
						?
							isDisabled
								? <CommonInput readonly={true} errorStatus={errorStatus} errorMsg={errorMsg} defaultValue={decodeValue} />
								: <div onMouseOver={this.handlerOver} onMouseOut={this.handlerOut} >
										{
											mouseTips
												? null
												: <ToolTip title={inputValue} >
												<div className="form-item_is-hidden-tips" onMouseEnter={this.onMouseTip} style={{pointerEvents: pointerEvent, display: showHiddenTips}} onClick={this.tipsClick}>
													{inputValue}
												</div>
											</ToolTip>
										}
										<input
											className={'autoTreeLeftInput '+ _autoTreeLeft_Class +(status=='edit'?'':'autoTree-search-input')}
											type="text"
											ref='autoTreeInput'
											placeholder={disabled ? '' :placeholder}
											defaultValue={decodeValue}
											onClick={this.props.addClass}
											onBlur={this.props.removeClass}
											onChange={this.props.onChange}
											onFocus={this.props.addClass}
											disabled={isDisabled}
											readOnly={readOnly}
											style={inputStyle}
										/>
										<span style={{"display": showClose, "top": judgeBrowser().isIe10 ? '0' : 'none'}} className={closeBtnClass} ref="mouseIconClose" onClick={this.props.clearData}><CloseIcon /></span>
										{iconOrText}
										{status=='edit'
											? <div className='base-input-show' style={baseStyle}>
													<span className={'base-input-show-text '+ (isFocus? 'input-pFoucus '+ (errorStatus? 'input-pError ':'input-pRight '): (errorStatus? 'input-pFoucus input-pError ':'input-pBlur input-pRight '))}>
														{errorStatus ? errorMsg : showText}
													</span>
												</div>
											: ''
										}
									</div>
			      : <div ref='autoTree_commonInput'  className={'autoTreeLeftInput '+(status=='edit'?'':'autoTree-search-input')}>
								<CommonInput {...commmonInput_Data} />
				      </div>
		    	}
				</div>
				{
					!isSearchAutoTreeEdit
						? <EditFilters DropDownData={DropDownData} isMinWidth={isMinWidth} status={status} changeFilter={this.props.changeFilter} showDropDown={showDropDown} />
						: ''
				}
			</div>
		)
	}
}