@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
148 lines (147 loc) • 6.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TextArea", {
enumerable: true,
get: function() {
return TextArea;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _configprovider = require("../configprovider");
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
defaultValue: '',
showCount: false,
rows: 2,
maxLength: 140,
readOnly: false,
disabled: false,
autoSize: false,
plain: false,
status: 'default'
});
var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
var locale = (0, _configprovider.useConfig)().locale;
var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = (0, _object_without_properties._)(_ref, [
"className",
"value",
"defaultValue",
"showCount",
"maxLength",
"rows",
"placeholder",
"readOnly",
"disabled",
"autoSize",
"style",
"plain",
"status",
"onChange",
"onBlur",
"onFocus"
]);
var classPrefix = 'nut-textarea';
var textareaRef = (0, _react.useRef)(null);
var compositionRef = (0, _react.useRef)(false);
var rtl = (0, _configprovider.useRtl)();
var format = function format(value) {
if (maxLength !== -1 && value.length > maxLength) {
return value.substring(0, maxLength);
}
return value;
};
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: value,
defaultValue: defaultValue,
finalValue: format(defaultValue),
onChange: onChange
}), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
(0, _react.useEffect)(function() {
if (autoSize) setContentHeight();
}, [
autoSize,
defaultValue,
innerValue
]);
var setContentHeight = function setContentHeight() {
var textarea = textareaRef.current;
if (textarea) {
textarea.style.height = 'auto';
var height = textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight;
if (height) {
textarea.style.height = "".concat(height, "px");
}
}
};
var handleChange = function handleChange(event) {
var text = event.target;
var value = compositionRef.current ? text.value : format(text.value);
setInnerValue(value);
};
var isDisabled = function isDisabled() {
return disabled || readOnly;
};
var handleFocus = function handleFocus(event) {
if (isDisabled()) return;
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
};
var handleBlur = function handleBlur(event) {
if (isDisabled()) return;
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
};
(0, _react.useImperativeHandle)(ref, function() {
return {
clear: function clear() {
return setInnerValue('');
},
focus: function focus() {
var _textareaRef_current;
return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.focus();
},
blur: function blur() {
var _textareaRef_current;
return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.blur();
},
get nativeElement () {
return textareaRef.current;
}
};
});
var _obj;
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-readonly"), readOnly), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), (0, _define_property._)(_obj, "".concat(classPrefix, "-plain"), plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-container"), !plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
}, /*#__PURE__*/ _react.default.createElement("textarea", (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
ref: textareaRef,
className: (0, _classnames.default)("".concat(classPrefix, "-textarea"), (0, _define_property._)({}, "".concat(classPrefix, "-textarea-disabled"), disabled)),
style: style,
disabled: disabled,
readOnly: readOnly,
value: innerValue,
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
onCompositionEnd: function onCompositionEnd() {
compositionRef.current = false;
},
onCompositionStart: function onCompositionStart() {
compositionRef.current = true;
},
rows: rows,
maxLength: maxLength === -1 ? undefined : maxLength,
placeholder: placeholder !== undefined ? placeholder : locale.placeholder
})), showCount && /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-limit"), (0, _define_property._)({}, "".concat(classPrefix, "-limit-disabled"), disabled))
}, innerValue.length, "/", maxLength < 0 ? 0 : maxLength)));
});
TextArea.displayName = 'NutTextArea';