'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); 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 _classnames3 = require('classnames'); var _classnames4 = _interopRequireDefault(_classnames3); var _react = require('react'); var React = _interopRequireWildcard(_react); var _rmcFeedback = require('rmc-feedback'); var _rmcFeedback2 = _interopRequireDefault(_rmcFeedback); var _exenv = require('../_util/exenv'); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var __rest = undefined && undefined.__rest || function (s, e) { var t = {}; for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]]; }return t; }; /* tslint:disable:jsx-no-multiline-js */ function noop() {} function fixControlledValue(value) { if (typeof value === 'undefined' || value === null) { return ''; } return value; } var regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]|\n/g; function countSymbols() { var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; return text.replace(regexAstralSymbols, '_').length; } var TextareaItem = function (_React$Component) { (0, _inherits3['default'])(TextareaItem, _React$Component); function TextareaItem(props) { (0, _classCallCheck3['default'])(this, TextareaItem); var _this = (0, _possibleConstructorReturn3['default'])(this, (TextareaItem.__proto__ || Object.getPrototypeOf(TextareaItem)).call(this, props)); _this.focus = function () { _this.textareaRef.focus(); }; _this.reAlignHeight = function () { var textareaDom = _this.textareaRef; textareaDom.style.height = ''; // 字数减少时能自动减小高度 textareaDom.style.height = textareaDom.scrollHeight + 'px'; }; _this.onChange = function (e) { var value = e.target.value; if ('value' in _this.props) { _this.setState({ value: _this.props.value }); } else { _this.setState({ value: value }); } var onChange = _this.props.onChange; if (onChange) { onChange(value); } // 设置 defaultValue 时,用户输入不会触发 componentDidUpdate ,此处手工调用 _this.componentDidUpdate(); }; _this.onBlur = function (e) { _this.debounceTimeout = setTimeout(function () { if (document.activeElement !== _this.textareaRef) { _this.setState({ focus: false }); } }, 100); var value = e.currentTarget.value; if (_this.props.onBlur) { // fix autoFocus item blur with flash setTimeout(function () { // fix ios12 wechat browser click failure after input if (document.body) { document.body.scrollTop = document.body.scrollTop; } }, 100); _this.props.onBlur(value); } }; _this.onFocus = function (e) { if (_this.debounceTimeout) { clearTimeout(_this.debounceTimeout); _this.debounceTimeout = null; } _this.setState({ focus: true }); var value = e.currentTarget.value; if (_this.props.onFocus) { _this.props.onFocus(value); } }; _this.onErrorClick = function () { if (_this.props.onErrorClick) { _this.props.onErrorClick(); } }; _this.clearInput = function () { _this.setState({ value: '' }); if (_this.props.onChange) { _this.props.onChange(''); } }; _this.state = { focus: false, value: props.value || props.defaultValue || '' }; return _this; } (0, _createClass3['default'])(TextareaItem, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ value: fixControlledValue(nextProps.value) }); } } }, { key: 'componentDidMount', value: function componentDidMount() { if (this.props.autoHeight) { this.reAlignHeight(); } } }, { key: 'componentDidUpdate', value: function componentDidUpdate() { if (this.props.autoHeight) { this.reAlignHeight(); } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { if (this.debounceTimeout) { clearTimeout(this.debounceTimeout); this.debounceTimeout = null; } } }, { key: 'render', value: function render() { var _classnames, _classnames2, _this2 = this; var _a = this.props, prefixCls = _a.prefixCls, prefixListCls = _a.prefixListCls, editable = _a.editable, style = _a.style, clear = _a.clear, children = _a.children, error = _a.error, className = _a.className, count = _a.count, labelNumber = _a.labelNumber, title = _a.title, onErrorClick = _a.onErrorClick, autoHeight = _a.autoHeight, defaultValue = _a.defaultValue, otherProps = __rest(_a, ["prefixCls", "prefixListCls", "editable", "style", "clear", "children", "error", "className", "count", "labelNumber", "title", "onErrorClick", "autoHeight", "defaultValue"]);var disabled = otherProps.disabled; var _state = this.state, value = _state.value, focus = _state.focus; var hasCount = count > 0 && this.props.rows > 1; var wrapCls = (0, _classnames4['default'])(className, prefixListCls + '-item', prefixCls + '-item', (_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classnames, prefixCls + '-item-single-line', this.props.rows === 1 && !autoHeight), (0, _defineProperty3['default'])(_classnames, prefixCls + '-error', error), (0, _defineProperty3['default'])(_classnames, prefixCls + '-focus', focus), (0, _defineProperty3['default'])(_classnames, prefixCls + '-has-count', hasCount), _classnames)); var labelCls = (0, _classnames4['default'])(prefixCls + '-label', (_classnames2 = {}, (0, _defineProperty3['default'])(_classnames2, prefixCls + '-label-2', labelNumber === 2), (0, _defineProperty3['default'])(_classnames2, prefixCls + '-label-3', labelNumber === 3), (0, _defineProperty3['default'])(_classnames2, prefixCls + '-label-4', labelNumber === 4), (0, _defineProperty3['default'])(_classnames2, prefixCls + '-label-5', labelNumber === 5), (0, _defineProperty3['default'])(_classnames2, prefixCls + '-label-6', labelNumber === 6), (0, _defineProperty3['default'])(_classnames2, prefixCls + '-label-7', labelNumber === 7), _classnames2)); var characterLength = countSymbols(value); var lengthCtrlProps = {}; if (count > 0) { // Note: If in the iOS environment of dev-tools, It will fail. if (_exenv.IS_IOS) { var entValue = value ? value.replace(regexAstralSymbols, '_') : ''; var entLen = entValue ? entValue.split('_').length - 1 : 0; lengthCtrlProps.maxLength = count + entLen - characterLength + (value ? value.length : 0); } else { lengthCtrlProps.maxLength = count - characterLength + (value ? value.length : 0); } } return React.createElement( 'div', { className: wrapCls }, title && React.createElement( 'div', { className: labelCls }, title ), React.createElement( 'div', { className: prefixCls + '-control' }, React.createElement('textarea', (0, _extends3['default'])({ ref: function ref(el) { return _this2.textareaRef = el; } }, lengthCtrlProps, otherProps, { value: value, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, readOnly: !editable, style: style })) ), clear && editable && value && characterLength > 0 && React.createElement( _rmcFeedback2['default'], { activeClassName: prefixCls + '-clear-active' }, React.createElement('div', { className: prefixCls + '-clear', onClick: this.clearInput }) ), error && React.createElement('div', { className: prefixCls + '-error-extra', onClick: this.onErrorClick }), hasCount && React.createElement( 'span', { className: prefixCls + '-count' }, React.createElement( 'span', null, value ? characterLength : 0 ), '/', count ) ); } }]); return TextareaItem; }(React.Component); exports['default'] = TextareaItem; TextareaItem.defaultProps = { prefixCls: 'am-textarea', prefixListCls: 'am-list', autoHeight: false, editable: true, disabled: false, placeholder: '', clear: false, rows: 1, onChange: noop, onBlur: noop, onFocus: noop, onErrorClick: noop, error: false, labelNumber: 5 }; module.exports = exports['default'];