@beisen/ethos/lib/common-input/index.js

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

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;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

require('./index.scss');

var _item = require('./item');

var _item2 = _interopRequireDefault(_item);

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

var _toolTip2 = _interopRequireDefault(_toolTip);

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

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

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

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

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

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

		_this.hasScrollBar = function () {
			if (_this.refs.listUl && _this.refs.listUl.scrollHeight > _this.refs.listUl.clientHeight) {
				_this.setState({ hasScroll: true });
			} else {
				_this.setState({ hasScroll: false });
			}
		};

		_this.handlerClick = function (event) {
			event.stopPropagation();
			_this.props.handlerClick && _this.props.handlerClick(event, _this.refs.listUl);
		};

		_this.inputClick = function (event) {
			var value = _this.refs.inputBox.value;
			_this.callBackValue(event, "inputClick", value);
		};

		_this.inputBlur = function (event) {
			var value = _this.refs.inputBox.value;
			_this.setState({ focusing: false });
			_this.callBackValue(event, "inputBlur", value);
		};

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

		_this.inputChange = function (event) {
			var value = _this.refs.inputBox.value;
			_this.callBackValue(event, "inputChange", value);
		};

		_this.handlerFocus = function (event) {
			_this.setState({ focusing: true });
		};

		_this.callBackValue = function (event, status, value) {
			if (_this.props.disabled || _this.props.readonly) return false;
			_this.props[status] && _this.props[status](event, status, value);
		};

		_this.itemClose = function (event, item, index) {
			event.stopPropagation();
			_this.props.itemClose(event, item, index);
		};

		_this.dropClick = function (event) {
			_this.props.dropClick && _this.props.dropClick(event, "dropClick", _this.refs.listUl);
		};

		_this._isSafariBrowser = function () {
			var ua = window.navigator.userAgent;
			return ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1 ? true : false;
		};

		_this.state = {
			defaultValue: props.defaultValue,
			focusing: false,
			hasScroll: false
		};
		_this.inputChange = (0, _es6PromiseDebounce2.default)(_this.inputChange, 200);
		_this.isSafariBrowser = _this._isSafariBrowser();
		return _this;
	}

	(0, _createClass3.default)(CommonInput, [{
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			if (this.props.hasInput && nextProps.defaultValue != this.state.defaultValue) {
				this.setState({ defaultValue: nextProps.defaultValue });
				if (this.props.hasInput) {
					return false;
				} else {
					this.refs.inputBox.value = nextProps.defaultValue;
				}
				/*
    	* 问题 判断safari浏览器，解决在新版浏览器上input.value时，不能正确消失placeholder问题；
    	* 解决方法 通过两次setValue可解决问题
    	* author:lsh；
    */
				this.isSafariBrowser && (this.refs.inputBox.value = nextProps.defaultValue);
			}
		}
	}, {
		key: 'componentDidMount',
		value: function componentDidMount() {
			this.hasScrollBar();
		}
	}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps) {
			if ((0, _stringify2.default)(prevProps.selectDate) != (0, _stringify2.default)(this.props.selectDate)) {
				this.hasScrollBar();
			}
		}
	}, {
		key: 'render',
		value: function render() {
			var _props = this.props,
			    selectDate = _props.selectDate,
			    hasInput = _props.hasInput,
			    showInput = _props.showInput,
			    placeHolder = _props.placeHolder,
			    defaultValue = _props.defaultValue,
			    isActive = _props.isActive,
			    disabled = _props.disabled,
			    readonly = _props.readonly,
			    errorStatus = _props.errorStatus,
			    errorMsg = _props.errorMsg,
			    PromptMsg = _props.PromptMsg,
			    isShowTips = _props.isShowTips,
			    sideTip = _props.sideTip,
			    alwaysShowTips = _props.alwaysShowTips,
			    inputBoxReadonly = _props.inputBoxReadonly;

			var self = this;
			var hasScroll = this.state.hasScroll;

			var multipleReadonly = [];
			selectDate && selectDate.map(function (item, index) {
				multipleReadonly.push(item.name + (item.pname ? ' (' + item.pname + ') ' : ''));
			});
			if (hasInput) {
				defaultValue = '';
			}
			if (showInput) {
				if (selectDate.length > 0) {
					hasInput = false;
				}
			}

			//临时处理
			var mutiValue = multipleReadonly.toString() == "" ? defaultValue : multipleReadonly.toString();
			if (readonly || disabled) {
				return _react2.default.createElement(
					'div',
					{ className: "form-item__control form-item__control_is-readonly " + (errorStatus ? "form-item__control_has-error" : "") },
					_react2.default.createElement(
						_toolTip2.default,
						{ title: mutiValue, side: sideTip, hidden: false },
						_react2.default.createElement(
							'div',
							{ className: 'u-input_is-readonly' },
							mutiValue
						)
					),
					errorStatus || PromptMsg ? _react2.default.createElement(
						'span',
						{ className: 'form-item__explain' },
						errorStatus ? errorMsg : PromptMsg
					) : ""
				);
			} else {
				return _react2.default.createElement(
					'div',
					{ className: "form-item__control " + (this.state.focusing || isActive ? "form-item__control_is-active " : "") + (errorStatus || PromptMsg ? "form-item__control_is-active form-item__control_has-info " : "") + (errorStatus ? "form-item__control_has-error" : ""), tabIndex: '0' },
					_react2.default.createElement(
						'ul',
						{ className: 'list_horizontal list_wrap form-item__multi-list area-select-items list_is-edit-status', onClick: this.handlerClick, ref: 'listUl' },
						selectDate.map(function (item, index) {
							var itemDate = {
								"status": readonly ? "show" : "edit",
								"name": item.name,
								"pname": item.pname,
								"isActive": false,
								"isShowTips": isShowTips,
								"sideTip": sideTip,
								"icon": "",
								alwaysShowTips: alwaysShowTips,
								itemClose: function itemClose(event, data) {
									self.itemClose(event, data, data.index);
								},
								"item": item
							};
							return _react2.default.createElement(_item2.default, (0, _extends3.default)({}, itemDate, { index: index, key: index }));
						}),
						hasInput ? _react2.default.createElement('input', {
							className: 'common_input_box',
							ref: 'inputBox',
							readOnly: inputBoxReadonly,
							placeholder: placeHolder,
							defaultValue: defaultValue,
							onFocus: this.handlerFocus,
							onClick: this.inputClick,
							onBlur: this.inputBlur,
							onChange: this.onRealChange
						}) : ""
					),
					errorStatus || PromptMsg ? _react2.default.createElement(
						'span',
						{ className: 'form-item__explain' },
						errorStatus ? errorMsg : PromptMsg
					) : "",
					_react2.default.createElement(
						'span',
						{ className: 'form-item__right-icon', style: { "marginRight": hasScroll ? "15px" : "0px" } },
						_react2.default.createElement('i', { className: 'u-icon pc-sys-arrowdown-nomal-svg', onClick: this.dropClick })
					)
				);
			}
		}
	}]);
	return CommonInput;
}(_react.Component), _class.defaultProps = {
	selectDate: []
}, _temp);


module.exports = CommonInput;