@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
130 lines (129 loc) • 6 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { forwardRef, useRef, useImperativeHandle } from "react";
import classNames from "classnames";
import Taro from "@tarojs/taro";
import { Textarea, View } from "@tarojs/components";
import { useConfig, useRtl } from "../configprovider/index";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
defaultValue: '',
showCount: false,
maxLength: 140,
readOnly: false,
disabled: false,
autoSize: false,
plain: false,
status: 'default'
});
export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
var locale = useConfig().locale;
var _ref = _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 = _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 compositionRef = useRef(false);
var rtl = useRtl();
var format = function(value) {
if (maxLength !== -1 && value.length > maxLength) {
return value.substring(0, maxLength);
}
return value;
};
var _usePropsValue = _sliced_to_array(usePropsValue({
value: value,
defaultValue: defaultValue,
finalValue: format(defaultValue),
onChange: onChange
}), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
var textareaRef = useRef(null);
var handleChange = function(event) {
var _event_detail;
var text = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
if (text) {
var value = compositionRef.current ? text : format(text);
setInnerValue(value);
} else {
setInnerValue('');
}
};
var isDisabled = function() {
return disabled || readOnly;
};
var handleFocus = function(event) {
if (isDisabled()) return;
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
};
var handleBlur = function(event) {
if (isDisabled()) return;
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
};
useImperativeHandle(ref, function() {
return {
clear: function() {
setInnerValue('');
},
focus: function() {
var _textareaRef_current;
return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.focus();
},
blur: function() {
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.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
className: classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-readonly"), readOnly), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _define_property(_obj, "".concat(classPrefix, "-plain"), plain), _define_property(_obj, "".concat(classPrefix, "-container"), !plain), _define_property(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
}, /*#__PURE__*/ React.createElement(Textarea, _object_spread_props(_object_spread({}, rest), {
ref: textareaRef,
nativeProps: {
style: style,
readOnly: readOnly,
rows: rows,
onCompositionStart: function() {
compositionRef.current = true;
},
onCompositionEnd: function() {
compositionRef.current = false;
}
},
className: classNames("".concat(classPrefix, "-textarea"), _define_property({}, "".concat(classPrefix, "-textarea-disabled"), disabled)),
style: Taro.getEnv() === 'WEB' ? undefined : style,
disabled: Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly,
// @ts-ignore
value: innerValue,
onInput: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
autoHeight: autoSize,
maxlength: maxLength,
placeholder: placeholder !== undefined ? placeholder : locale.placeholder
})), showCount && /*#__PURE__*/ React.createElement(View, {
className: classNames("".concat(classPrefix, "-limit"), _define_property({}, "".concat(classPrefix, "-limit-disabled"), disabled))
}, innerValue.length, "/", maxLength < 0 ? 0 : maxLength)));
});
TextArea.displayName = 'NutTextArea';