@nutui/nutui-react/dist/es/packages/textarea/textarea.js

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

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, { useEffect, useRef } from "react";
import classNames from "classnames";
import { useConfig, useRtl } from "../configprovider";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    defaultValue: '',
    showCount: false,
    rows: 2,
    maxLength: 140,
    placeholder: '',
    readOnly: false,
    disabled: false,
    autoSize: false,
    plain: false,
    status: 'default'
});
export var TextArea = function(props) {
    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 textareaRef = useRef(null);
    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), inputValue = _usePropsValue[0], setInputValue = _usePropsValue[1];
    useEffect(function() {
        if (autoSize) setContentHeight();
    }, [
        autoSize,
        defaultValue,
        inputValue
    ]);
    var setContentHeight = function() {
        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(event) {
        var text = event.target;
        var value = compositionRef.current ? text.value : format(text.value);
        setInputValue(value);
    };
    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);
    };
    var _obj;
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
        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,
        className: classNames("".concat(classPrefix, "-textarea"), _define_property({}, "".concat(classPrefix, "-textarea-disabled"), disabled)),
        style: style,
        disabled: disabled,
        readOnly: readOnly,
        value: inputValue,
        onChange: handleChange,
        onBlur: handleBlur,
        onFocus: handleFocus,
        onCompositionEnd: function() {
            compositionRef.current = false;
        },
        onCompositionStart: function() {
            compositionRef.current = true;
        },
        rows: rows,
        maxLength: maxLength === -1 ? undefined : maxLength,
        placeholder: placeholder !== undefined ? placeholder : locale.placeholder
    })), showCount && /*#__PURE__*/ React.createElement("div", {
        className: classNames("".concat(classPrefix, "-limit"), _define_property({}, "".concat(classPrefix, "-limit-disabled"), disabled))
    }, inputValue.length, "/", maxLength < 0 ? 0 : maxLength)));
};
TextArea.displayName = 'NutTextArea';