yqcloud-ui
Version:
An enterprise-class UI design language and React-based implementation
263 lines (224 loc) • 9.59 kB
JavaScript
'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 _react = require('react');
var React = _interopRequireWildcard(_react);
var _omit = require('omit.js');
var _omit2 = _interopRequireDefault(_omit);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _calculateNodeHeight = require('./calculateNodeHeight');
var _calculateNodeHeight2 = _interopRequireDefault(_calculateNodeHeight);
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 }; }
function onNextFrame(cb) {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame(cb);
}
return window.setTimeout(cb, 1);
}
function clearNextFrameAction(nextFrameId) {
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(nextFrameId);
} else {
window.clearTimeout(nextFrameId);
}
}
var TextArea = function (_React$Component) {
(0, _inherits3['default'])(TextArea, _React$Component);
function TextArea() {
(0, _classCallCheck3['default'])(this, TextArea);
var _this = (0, _possibleConstructorReturn3['default'])(this, (TextArea.__proto__ || Object.getPrototypeOf(TextArea)).apply(this, arguments));
_this.state = {
textareaStyles: {},
inputLength: 0,
focused: false
};
_this.resizeTextarea = function () {
var autosize = _this.props.autosize;
if (!autosize || !_this.textAreaRef) {
return;
}
var minRows = autosize ? autosize.minRows : null;
var maxRows = autosize ? autosize.maxRows : null;
var textareaStyles = (0, _calculateNodeHeight2['default'])(_this.textAreaRef, false, minRows, maxRows);
_this.setState({ textareaStyles: textareaStyles });
};
_this.handleTextareaChange = function (e) {
if (!('value' in _this.props)) {
_this.resizeTextarea();
}
var onChange = _this.props.onChange;
if (onChange) {
onChange(e);
}
};
_this.handleKeyDown = function (e) {
var _this$props = _this.props,
onPressEnter = _this$props.onPressEnter,
onKeyDown = _this$props.onKeyDown;
if (e.keyCode === 13 && onPressEnter) {
onPressEnter(e);
}
if (onKeyDown) {
onKeyDown(e);
}
};
_this.handleInput = function () {
_this.setState({
inputLength: _this.textAreaRef.value.length
});
};
_this.saveTextAreaRef = function (textArea) {
_this.textAreaRef = textArea;
};
_this.handleFocus = function (e) {
var onFocus = _this.props.onFocus;
_this.setState({
focused: true
});
if (onFocus) {
onFocus(e);
}
};
_this.handleBlur = function (e) {
var onBlur = _this.props.onBlur;
_this.setState({
focused: false
});
if (onBlur) {
onBlur(e);
}
};
return _this;
}
(0, _createClass3['default'])(TextArea, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.resizeTextarea();
if (this.textAreaRef.value) {
this.setState({
inputLength: this.textAreaRef.value.length
});
}
if (this.props.autoFocus) {
this.setState({
focused: true
});
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
// Re-render with the new content then recalculate the height as required.
if (this.textAreaRef.value !== nextProps.value) {
var inputLength = nextProps.value && nextProps.value.length;
this.setState({
inputLength: inputLength || 0
});
}
if (nextProps.autoFocus) {
this.setState({
focused: true
});
}
if (this.props.value !== nextProps.value) {
if (this.nextFrameActionId) {
clearNextFrameAction(this.nextFrameActionId);
}
this.nextFrameActionId = onNextFrame(this.resizeTextarea);
}
}
}, {
key: 'focus',
value: function focus() {
this.textAreaRef.focus();
}
}, {
key: 'blur',
value: function blur() {
this.textAreaRef.blur();
}
}, {
key: 'getTextAreaClassName',
value: function getTextAreaClassName() {
var _props = this.props,
prefixCls = _props.prefixCls,
className = _props.className;
return (0, _classnames2['default'])(prefixCls, className);
}
}, {
key: 'getWapperClassName',
value: function getWapperClassName() {
var _classNames;
var _props2 = this.props,
prefixCls = _props2.prefixCls,
disabled = _props2.disabled,
label = _props2.label;
return (0, _classnames2['default'])(prefixCls + '-wrapper', prefixCls + '-textarea', (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-has-value', this.state.inputLength !== 0), (0, _defineProperty3['default'])(_classNames, prefixCls + '-focus', this.state.focused), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, prefixCls + '-has-label', !!label), _classNames));
}
}, {
key: 'render',
value: function render() {
var props = this.props;
var otherProps = (0, _omit2['default'])(props, ['prefixCls', 'onPressEnter', 'autosize', 'placeholder', 'underline', 'focused', 'showLengthInfo']);
var style = (0, _extends3['default'])({}, props.style, this.state.textareaStyles);
// Fix https://github.com/ant-design/ant-design/issues/6776
// Make sure it could be reset when using form.getFieldDecorator
if ('value' in otherProps) {
otherProps.value = otherProps.value || '';
}
otherProps.onInput = this.handleInput;
var lengthInfo = props.maxLength && props.showLengthInfo ? React.createElement(
'div',
{ className: props.prefixCls + '-length-info' },
this.state.inputLength + '/' + props.maxLength
) : null;
var border = props.underline ? React.createElement(
'div',
null,
React.createElement('hr', { className: props.prefixCls + '-border' }),
React.createElement('hr', { className: props.prefixCls + '-border-active' })
) : null;
var label = props.label ? React.createElement(
'div',
{ className: this.props.prefixCls + '-rendered' },
React.createElement(
'div',
{ className: this.props.prefixCls + '-label' },
props.label
)
) : null;
var placeholder = !label || this.state.focused ? props.placeholder : '';
return React.createElement(
'span',
{ className: this.getWapperClassName() },
label,
React.createElement('textarea', (0, _extends3['default'])({}, otherProps, { placeholder: placeholder, className: this.getTextAreaClassName(), style: style, onKeyDown: this.handleKeyDown, onChange: this.handleTextareaChange, ref: this.saveTextAreaRef, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })),
border,
lengthInfo
);
}
}]);
return TextArea;
}(React.Component);
exports['default'] = TextArea;
TextArea.defaultProps = {
prefixCls: 'ant-input',
underline: true,
showLengthInfo: true
};
module.exports = exports['default'];