@nutui/nutui-react-taro/dist/esm/textarea.taro-CGMI5QNw.js

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

import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React__default, { useRef } from "react";
import classNames from "classnames";
import Taro from "@tarojs/taro";
import { Textarea } from "@tarojs/components";
import { u as useConfig } from "./configprovider.taro-DpK4IiCE.js";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { defaultValue: "", showCount: false, maxLength: 140, readOnly: false, disabled: false, autoSize: false });
const TextArea = (props) => {
  const { locale } = useConfig();
  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, value, defaultValue, showCount, maxLength, rows, placeholder, readOnly, disabled, autoSize, style, onChange, onBlur, onFocus } = _a, rest = __rest(_a, ["className", "value", "defaultValue", "showCount", "maxLength", "rows", "placeholder", "readOnly", "disabled", "autoSize", "style", "onChange", "onBlur", "onFocus"]);
  const classPrefix = "nut-textarea";
  const compositionRef = useRef(false);
  const format = (value2) => {
    if (maxLength !== -1 && value2.length > maxLength) {
      return value2.substring(0, maxLength);
    }
    return value2;
  };
  const [inputValue, setInputValue] = usePropsValue({
    value,
    defaultValue,
    finalValue: format(defaultValue),
    onChange
  });
  const handleChange = (event) => {
    var _a2;
    const text = (_a2 = event === null || event === void 0 ? void 0 : event.detail) === null || _a2 === void 0 ? void 0 : _a2.value;
    if (text) {
      const value2 = compositionRef.current ? text : format(text);
      setInputValue(value2);
    } else {
      setInputValue("");
    }
  };
  const handleFocus = (event) => {
    if (disabled)
      return;
    if (readOnly)
      return;
    onFocus && onFocus(event);
  };
  const handleBlur = (event) => {
    if (disabled)
      return;
    if (readOnly)
      return;
    onBlur && onBlur(event);
  };
  return React__default.createElement(
    "div",
    { className: classNames(classPrefix, {
      [`${classPrefix}-disabled`]: disabled
    }, className) },
    React__default.createElement(Textarea, Object.assign({
      nativeProps: {
        style,
        readOnly,
        rows,
        onCompositionStart: () => {
          compositionRef.current = true;
        },
        onCompositionEnd: () => {
          compositionRef.current = false;
        }
      },
      className: `${classPrefix}-textarea`,
      style: Taro.getEnv() === "WEB" ? void 0 : style,
      disabled: Taro.getEnv() === "WEB" ? disabled : disabled || readOnly,
      value: inputValue,
      // @ts-ignore
      onInput: (e) => handleChange(e),
      onBlur: (e) => handleBlur(e),
      onFocus: (e) => handleFocus(e),
      autoHeight: autoSize,
      maxlength: maxLength,
      placeholder: placeholder === void 0 ? locale.placeholder : placeholder
    }, rest)),
    showCount && React__default.createElement(
      "div",
      { className: `${classPrefix}-limit` },
      inputValue.length,
      "/",
      maxLength < 0 ? 0 : maxLength
    )
  );
};
TextArea.displayName = "NutTextArea";
export {
  TextArea as T
};