@beisen/auto-tree/lib/autoForm_Input.js

AutoTree

'use strict';

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

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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 _es6PromiseDebounce = require('es6-promise-debounce');

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

var _commonInput = require('@beisen/common-input');

var _commonInput2 = _interopRequireDefault(_commonInput);

var _edit_Filters = require('./edit_Filters.js');

var _edit_Filters2 = _interopRequireDefault(_edit_Filters);

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

var _toolTip = require('@beisen/tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

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

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

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

		var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));

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

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

		_this.tipsClick = function () {
			_this.setState({ pointerEvent: "none", showHiddenTips: 'none' });
			_this.refs.autoTreeInput.focus();
		};

		_this.handlerOver = function () {
			_this.props.handlerOver();
		};

		_this.handlerOut = function (e) {
			_this.setState({
				mouseTips: false,
				hoverFocusing: false
			});
			(0, _commonFunc.clearToolTipDom)();
			_this.props.handlerOut(e);
		};

		_this.state = {
			isMinWidth: false,
			pointerEvent: "auto",
			showHiddenTips: 'block',
			mouseTips: false
		};
		return _this;
	}

	AutoForm_Input.prototype.componentDidMount = function componentDidMount() {
		var _props = this.props,
		    status = _props.status,
		    showDropDown = _props.showDropDown;

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

	AutoForm_Input.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
		var _props2 = this.props,
		    commmonInput_Data = _props2.commmonInput_Data,
		    single = _props2.single,
		    defaultValue = _props2.defaultValue,
		    inputValue = _props2.inputValue,
		    disabled = _props2.disabled;

		if (defaultValue != nextProps.defaultValue && single && !disabled) {
			this.refs.autoTreeInput.value = (0, _commonFunc.decode)(nextProps.defaultValue);
		}
		if (inputValue != nextProps.inputValue && single && !disabled) {
			this.refs.autoTreeInput.value = (0, _commonFunc.decode)(nextProps.inputValue);
		}
		if (commmonInput_Data.selectDate && nextProps.selectDate) {
			var 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({});
		}
	};

	AutoForm_Input.prototype.render = function render() {
		var _props3 = this.props,
		    disabled = _props3.disabled,
		    status = _props3.status,
		    isShowMouseOverIcon = _props3.isShowMouseOverIcon,
		    showDropDown = _props3.showDropDown,
		    DropDownData = _props3.DropDownData,
		    placeholder = _props3.placeholder,
		    inputValue = _props3.inputValue,
		    defaultValue = _props3.defaultValue,
		    isFocus = _props3.isFocus,
		    errorStatus = _props3.errorStatus,
		    errorMsg = _props3.errorMsg,
		    single = _props3.single,
		    showText = _props3.showText,
		    commmonInput_Data = _props3.commmonInput_Data,
		    isSearchAutoTreeEdit = _props3.isSearchAutoTreeEdit,
		    readOnly = _props3.readOnly;
		var _state = this.state,
		    isMinWidth = _state.isMinWidth,
		    pointerEvent = _state.pointerEvent,
		    showHiddenTips = _state.showHiddenTips,
		    mouseTips = _state.mouseTips;

		var isMinClass = void 0,
		    inutClassStyle = void 0,
		    inputClass = void 0,
		    isDisabled = void 0,
		    inputStyle = void 0,
		    autoInput_class = void 0,
		    closeBtnClass = void 0,
		    dropDownIcon = void 0,
		    iconOrText = void 0,
		    erroStyle = void 0,
		    notDropDown = void 0,
		    baseStyle = void 0;
		var _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' ? 'sys-icon-close date-time-close-search closeBtn-search' : showDropDown ? 'sys-icon-close date-time-close closeBtn-edit-showDropDown' : 'sys-icon-close date-time-close closeBtn-edit-notShowDropDown';

		if (status == 'search') erroStyle = { 'height': '45px' };
		if (!errorStatus) baseStyle = { 'height': '0px' };
		var 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 = _react2.default.createElement('span', { className: showDropDown ? 'autoTreeIcon-showDropDown pc-sys-arrowdown-nomal-svg' : 'autoTreeIcon-notShowDropDown pc-sys-arrowdown-nomal-svg', onClick: this.props.editInput_focus });
		}

		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 = _react2.default.createElement(
				'div',
				{ className: 'findAll' },
				_react2.default.createElement(
					'label',
					{ onClick: this.props.findAll },
					'\u5168\u90E8\u67E5\u627E'
				)
			);
		}
		var decodeValue = (0, _commonFunc.decode)(defaultValue);
		return _react2.default.createElement(
			'div',
			{ ref: 'autoFormInput',
				className: "field-right auto-rightinput auto-form-input " + inputClass + autoInput_class + notDropDown,
				style: erroStyle
			},
			_react2.default.createElement(
				'div',
				{ ref: 'leftInput', className: status == 'edit' ? showDropDown && !isSearchAutoTreeEdit ? isMinClass : 'leftInput-notShowDropDown' : '' },
				single && status == 'edit' || status == 'search' ? isDisabled ? _react2.default.createElement(_commonInput2.default, { readonly: true, errorStatus: errorStatus, errorMsg: errorMsg, defaultValue: decodeValue }) : _react2.default.createElement(
					'div',
					{ onMouseOver: this.handlerOver, onMouseOut: this.handlerOut },
					mouseTips ? null : _react2.default.createElement(
						_toolTip2.default,
						{ title: inputValue },
						_react2.default.createElement(
							'div',
							{ className: 'form-item_is-hidden-tips', onMouseEnter: this.onMouseTip, style: { pointerEvents: pointerEvent, display: showHiddenTips }, onClick: this.tipsClick },
							inputValue
						)
					),
					_react2.default.createElement('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
					}),
					_react2.default.createElement('span', { style: { "display": showClose, "top": (0, _commonFunc.judgeBrowser)().isIe10 ? '0' : 'none' }, className: closeBtnClass, ref: 'mouseIconClose', onClick: this.props.clearData }),
					iconOrText,
					status == 'edit' ? _react2.default.createElement(
						'div',
						{ className: 'base-input-show', style: baseStyle },
						_react2.default.createElement(
							'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
						)
					) : ''
				) : _react2.default.createElement(
					'div',
					{ ref: 'autoTree_commonInput', className: 'autoTreeLeftInput ' + (status == 'edit' ? '' : 'autoTree-search-input') },
					_react2.default.createElement(_commonInput2.default, commmonInput_Data)
				)
			),
			!isSearchAutoTreeEdit ? _react2.default.createElement(_edit_Filters2.default, { DropDownData: DropDownData, isMinWidth: isMinWidth, status: status, changeFilter: this.props.changeFilter, showDropDown: showDropDown }) : ''
		);
	};

	return AutoForm_Input;
}(_react.Component);

exports.default = AutoForm_Input;
module.exports = exports['default'];