@beisen/ethos/lib/text-area/index.js

beisencloud pc react components

'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

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);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

require('./styles/index.scss');

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

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

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

var _toolTip2 = _interopRequireDefault(_toolTip);

var _commonLabel = require('../common-label');

var _commonLabel2 = _interopRequireDefault(_commonLabel);

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

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

var defaultTranslation = {
	atLeastInputText: '至少输入{0}个字'
};
var Textarea = (_temp = _class = function (_Component) {
	(0, _inherits3.default)(Textarea, _Component);

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

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

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

		_this.state = {
			length: 0,
			textLength: 0,
			defaultText: props.textValue,
			focusState: false,
			hasNum: true,
			inputNum: false,
			maxNum: false,
			minNum: false,
			blurLine: false,
			titleLen: true, //true代表一行，false代表两行
			mouseoverState: false,
			m_start_y: 0,
			movingHeight: 0,
			startHeight: 0
		};
		_this.clickHandler = _this.clickHandler.bind(_this);
		_this.handleFocus = _this.handleFocus.bind(_this);
		_this.blurHanler = _this.blurHanler.bind(_this);
		_this.enterHandler = _this.enterHandler.bind(_this);
		_this.handleChange = (0, _es6PromiseDebounce2.default)(_this.handleChange, 300);
		_this.handleOnmouseover = _this.handleOnmouseover.bind(_this);
		_this.handleOnmouseout = _this.handleOnmouseout.bind(_this);
		_this.handleMouseDown = _this.handleMouseDown.bind(_this);
		_this.handleMouseup = _this.handleMouseup.bind(_this);
		_this.on_move = _this.on_move.bind(_this);
		_this.dragDone = _this.dragDone.bind(_this);
		_this.moving = 0;

		_this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
		return _this;
	}

	(0, _createClass3.default)(Textarea, [{
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			if (nextProps.textValue == null || this.props.hidden) {
				return;
			}
			if (nextProps.textValue == '' || nextProps.textValue != this.refs.area.value) {
				if (this.refs.area) this.refs.area.value = nextProps.textValue;
				this.setState({ defaultText: nextProps.textValue, length: nextProps.textValue.length });
			}
		}
	}, {
		key: 'componentDidMount',
		value: function componentDidMount() {
			if (this.props.hidden) {
				return;
			}
			var defaultHeight = this.props.defaultHeight;

			var areaDom = this.refs.area || _reactDom2.default.findDOMNode(this).querySelector(".ta-area");
			var isIE = !!window.ActiveXObject || "ActiveXObject" in window;

			if (this.refs.area.value == '') {
				areaDom.style.height = defaultHeight;
			} else if (areaDom && areaDom.scrollHeight < 144 && areaDom.scrollHeight && areaDom.scrollHeight != 0) {
				areaDom.style.height = (isIE ? 55 : areaDom.scrollHeight) + 'px';
				areaDom.style.minHeight = defaultHeight;
			} else if (areaDom.scrollHeight == 0) {
				areaDom.style.height = defaultHeight;
			} else {
				areaDom.style.height = '144px';
			}
			if (this.refs.textLength) {
				this.refs.textLength.style.color = '#8F9CA6';
			}

			areaDom.placeholder = this.props.placeHolder || '';
			var leng = this.refs.area.value.length;
			if (leng == 0) {
				this.setState({
					hasNum: false,
					inputNum: false
				});
			}
			if (leng > 0 && leng <= this.props.maxlength) {
				this.setState({
					hasNum: true,
					inputNum: true,
					maxNum: false
				});
			}
			if (leng > this.props.maxlength) {
				leng = this.props.maxlength - leng;
				this.setState({
					hasNum: true,
					maxNum: true,
					inputNum: false
				});
			}
			this.setState({ length: leng });
			if (this.state.length >= 0 && this.refs.textLength) {
				this.refs.textLength.style.color = '#0A131A';
			}
		}
	}, {
		key: 'on_move',
		value: function on_move(event) {
			var e = window.event || event;
			var movingHeight = event.pageY - this.state.m_start_y + this.state.startHeight;
			this.setState({ movingHeight: movingHeight });
		}
		//textarea拖拽

	}, {
		key: 'handleMouseDown',
		value: function handleMouseDown(event) {
			var _this2 = this;

			var m_start_y = event.pageY;
			var startHeight = parseInt(this.refs.area.style.height.replace('px', ''));
			this.setState({ m_start_y: m_start_y,
				startHeight: startHeight,
				movingHeight: startHeight });
			document.addEventListener('mousemove', this.on_move);
			this.moving = setInterval(function () {
				_this2.refs.area.style.height = _this2.state.movingHeight + 'px';
			}, 10);
			// console.log(1);
			// console.log(this);
			document.addEventListener('mouseup', this.handleMouseup, true);
		}
	}, {
		key: 'handleMouseup',
		value: function handleMouseup(event) {
			// console.log(2);
			document.removeEventListener('mousemove', this.on_move);
			document.removeEventListener('mouseup', this.handleMouseup);
			clearInterval(this.moving);
		}
	}, {
		key: 'dragDone',
		value: function dragDone(event) {
			if (this.state.m_start_y !== 0) {
				this.refs.area.style.height = this.state.movingHeight + 'px';
			}
			document.removeEventListener('mousemove', this.on_move);
			clearInterval(this.moving);
		}
		//点击textarea事件

	}, {
		key: 'clickHandler',
		value: function clickHandler(event) {
			if (this.props.onClick) this.props.onClick(event);
		}
		//textarea获得焦点

	}, {
		key: 'handleFocus',
		value: function handleFocus(event) {
			if (this.props.onFocus) this.props.onFocus(event);
			var _props = this.props,
			    disabled = _props.disabled,
			    readOnly = _props.readOnly;

			if (disabled || readOnly) {
				return false;
			}
			if (this.state.length >= 0 && this.refs.textLength) {
				this.refs.textLength.style.color = '#0A131A';
			}

			var val = event.target.value;
			if (val) {
				if (val.length > this.props.maxlength) {
					var length = this.props.maxlength - val.length;
					this.setState({
						inputNum: false,
						length: length
					});
				} else {
					var _length = val.length;
					this.setState({
						inputNum: true,
						length: _length
					});
				}
			} else {
				this.setState({
					hasNum: false
				});
			}
			this.setState({
				focusState: true,
				blurLine: false
			});
		}
	}, {
		key: 'handleOnmouseover',
		value: function handleOnmouseover(event) {
			this.setState({ 'mouseoverState': true });
		}
	}, {
		key: 'handleOnmouseout',
		value: function handleOnmouseout(event) {
			this.setState({ 'mouseoverState': false });
		}
		//textarea失去焦点

	}, {
		key: 'blurHanler',
		value: function blurHanler(event) {
			if (this.state.length > 0 && this.refs.textLength) {
				this.refs.textLength.style.color = '#0A131A';
			} else if (this.state.length == 0 && this.refs.textLength) {
				this.refs.textLength.style.color = '#8F9CA6';
			} else if (this.refs.textLength) {
				this.refs.textLength.style.color = '';
			}

			if (this.props.onBlur) this.props.onBlur(event);
			var self = this;
			setTimeout(function () {
				self.setState({ focusState: false, blurLine: true });
			}, 300);
			if (event.target.value == '') {
				this.setState({
					focusState: false,
					blurLine: false
				});
				this.setState({});
			}
		}
		//textarea输入内容

	}, {
		key: 'enterHandler',
		value: function enterHandler(event) {
			var _props2 = this.props,
			    disabled = _props2.disabled,
			    readOnly = _props2.readOnly;

			if (disabled || readOnly) {
				return false;
			}
			var leng = event.target.value.length;
			if (leng == 0) {
				this.setState({
					hasNum: false,
					inputNum: false
				});
			}
			if (leng > 0 && leng <= this.props.maxlength) {
				if (this.refs.textLength) {
					this.refs.textLength.style.color = '#0A131A';
				}

				this.setState({
					hasNum: true,
					inputNum: true,
					maxNum: false
				});
			}
			if (leng > this.props.maxlength) {
				if (this.refs.textLength) {
					this.refs.textLength.style.color = '';
				}

				leng = this.props.maxlength - leng;
				this.setState({
					hasNum: true,
					maxNum: true,
					inputNum: false
				});
			}
			if (parseInt(event.target.offsetHeight) < 144) {
				var cows = navigator.userAgent.indexOf('MSIE 10.0') > -1 ? event.target.offsetHeight + 'px' : event.target.scrollHeight + 'px';
				//解决textArea组件placeholder内容过多的时候，输入值然后再删除   会适应placeholder高度的问题
				if (!event.target.value) {
					cows = event.target.offsetHeight + 'px';
				}
				event.target.style.height = cows;
			}
			this.setState({
				length: leng,
				textLength: event.target.value.length,
				defaultText: event.target.value
			});
		}
	}, {
		key: 'handleChange',
		value: function handleChange(event) {
			var leng = event.target.value.length;

			this.setState({
				defaultText: event.target.value
			});
			if (this.props.onChange) this.props.onChange(event);
		}
	}, {
		key: 'render',
		value: function render() {
			var _state = this.state,
			    length = _state.length,
			    defaultText = _state.defaultText,
			    focusState = _state.focusState,
			    maxNum = _state.maxNum,
			    inputNum = _state.inputNum,
			    hasNum = _state.hasNum,
			    blurLine = _state.blurLine,
			    textLength = _state.textLength;
			var _props3 = this.props,
			    hidden = _props3.hidden,
			    disabled = _props3.disabled,
			    readOnly = _props3.readOnly,
			    maxlength = _props3.maxlength,
			    minLength = _props3.minLength,
			    errorStatus = _props3.errorStatus,
			    errorMsg = _props3.errorMsg,
			    helpMsg = _props3.helpMsg,
			    showText = _props3.showText,
			    lablePos = _props3.lablePos,
			    lableTxt = _props3.lableTxt,
			    placeHolder = _props3.placeHolder,
			    iconClick = _props3.iconClick;

			var formItemClassName = 'form-item ';
			if (defaultText) {
				defaultText = defaultText.replace('\\n', '\n');
				formItemClassName = 'form-item ';
			} else {

				formItemClassName = formItemClassName + ' textarea-no-value ';
			}
			var changeText = errorStatus ? errorMsg : showText;

			var tuozhuaistate = void 0;
			if (focusState && disabled) {
				tuozhuaistate = 'pc-sys-tuozhuai-disabled-svg ';
			} else if (focusState && !blurLine || this.state.mouseoverState) {
				tuozhuaistate = 'pc-sys-tuozhuai-active-svg ';
			} else {
				tuozhuaistate = 'pc-sys-tuozhuai-nomal-svg ';
			}
			var numArea = void 0;
			if (!minLength && !maxlength || readOnly || disabled) {
				numArea = "";
			} else {
				if (minLength && maxlength) {
					numArea = _react2.default.createElement(
						'div',
						{ className: 'u-textarea__num' },
						_react2.default.createElement(
							'span',
							{ className: textLength >= minLength ? "u-textarea-minnum u-textarea-minnum_normal" : "u-textarea-minnum u-textarea-minnum_error" },
							(0, _commonFunc.transFormat)(this.translation.atLeastInputText, minLength)
						),
						_react2.default.createElement(
							'span',
							{ className: length >= 0 ? "u-textarea__maxNum u-textarea__num_normal" : "u-textarea__maxNum u-textarea__num_error", ref: 'textLength' },
							length,
							' '
						),
						_react2.default.createElement(
							'span',
							null,
							'/',
							maxlength
						)
					);
				} else if (maxlength) {
					numArea = _react2.default.createElement(
						'div',
						{ className: 'u-textarea__num' },
						_react2.default.createElement(
							'span',
							{ className: length >= 0 ? "u-textarea__maxNum u-textarea__num_normal" : "u-textarea__maxNum u-textarea__num_error", ref: 'textLength' },
							length
						),
						_react2.default.createElement(
							'span',
							null,
							'/',
							maxlength
						)
					);
				} else if (minLength) {
					numArea = _react2.default.createElement(
						'div',
						{ className: 'u-textarea__num' },
						_react2.default.createElement(
							'span',
							{ className: textLength >= minLength ? "u-textarea-minnum u-textarea-minnum_normal" : "u-textarea-minnum u-textarea-minnum_error" },
							(0, _commonFunc.transFormat)(this.translation.atLeastInputText, minLength)
						)
					);
				}
			}
			var textareadisplay = this.state.titleLen ? '' : 'ta-area-twoline';
			if (hidden) {
				return _react2.default.createElement('div', { className: 'field textarea' });
			} else {

				return _react2.default.createElement(
					'div',
					{ className: formItemClassName + (helpMsg ? "form-item__help b02116-textarea-container" : "") },
					_react2.default.createElement(_commonLabel2.default, this.props),
					_react2.default.createElement(
						'div',
						{ className: "form-item__control " + (!(readOnly || disabled) ? focusState || errorStatus ? "form-item__control_is-active " : "" : "") + (readOnly || disabled ? "form-item__control_is-readonly form-item__control_has-error" : (focusState || errorStatus ? "" : "") + (changeText && changeText !== '' ? " form-item__control_has-info" : "") + (errorStatus ? " form-item__control_has-error" : "")), style: readOnly || disabled ? { 'border': 'none' } : {}, onMouseOver: this.handleOnmouseover, onMouseOut: this.handleOnmouseout },
						_react2.default.createElement(
							'span',
							{ className: "u-textarea " + (!(readOnly || disabled) ? "b02116-span " : "b02116-span-readonly ") },
							_react2.default.createElement('textarea', { className: !(readOnly || disabled) ? "b02116-textarea-show" : "b02116-textarea-readonly",
								ref: 'area',
								disabled: disabled,
								placeholder: placeHolder,
								readOnly: readOnly,
								defaultValue: defaultText,
								onClick: this.clickHandler,
								onFocus: this.handleFocus,
								onBlur: this.blurHanler,
								onInput: this.enterHandler,
								onChange: this.onRealChange,
								onMouseUp: this.handleMouseup,
								style: { "boxSizing": "border-box", "paddingTop": "0", "overflow": "auto", "wordBreak": "normal" },
								tabIndex: disabled || readOnly ? -1 : 0
							}),
							!(readOnly || disabled) ? _react2.default.createElement(
								'span',
								{ className: 'u-textarea__tuozhuai-icon', onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseup },
								_react2.default.createElement('i', { className: 'u-icon pc-sys-tuozhuai-nomal-svg' }),
								_react2.default.createElement('i', { className: 'u-icon pc-sys-tuozhuai-active-svg' })
							) : "",
							numArea
						),
						(focusState || errorStatus) && changeText !== '' ? _react2.default.createElement(
							'span',
							{ className: 'form-item__explain' },
							changeText
						) : ''
					)
				);
			}
		}
	}]);
	return Textarea;
}(_react.Component), _class.defaultProps = {
	defaultHeight: '72px'
}, _temp);
// Textarea.propTypes = {
// 	maxlength: PropTypes.number.isRequired
// }

module.exports = Textarea;