UNPKG

@nutui/nutui-react-taro

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

130 lines (129 loc) 6 kB
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';