@nutui/nutui-react/dist/esm/TextArea.js

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useRef, useEffect } from "react";
import classNames from "classnames";
import { useConfig } from "./ConfigProvider.js";
import { C as ComponentDefaults } from "./typings.js";
import { u as usePropsValue } from "./use-props-value.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { defaultValue: "", showCount: false, rows: 2, maxLength: 140, placeholder: "", 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 textareaRef = useRef(null);
  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
  });
  useEffect(() => {
    if (autoSize) {
      setContentHeight();
    }
  }, [autoSize, defaultValue, inputValue]);
  const setContentHeight = () => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = "auto";
      const height = textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight;
      if (height) {
        textarea.style.height = `${height}px`;
      }
    }
  };
  const handleChange = (event) => {
    const text = event.target;
    const value2 = compositionRef.current ? text.value : format(text.value);
    setInputValue(value2);
  };
  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({ ref: textareaRef, className: `${classPrefix}-textarea`, style, disabled, readOnly, value: inputValue, onChange: (e) => handleChange(e), onBlur: (e) => handleBlur(e), onFocus: (e) => handleFocus(e), onCompositionEnd: () => {
      compositionRef.current = false;
    }, onCompositionStart: () => {
      compositionRef.current = true;
    }, rows, maxLength: maxLength === -1 ? void 0 : maxLength, placeholder: placeholder || locale.placeholder }, rest)),
    showCount && React__default.createElement(
      "div",
      { className: `${classPrefix}-limit` },
      inputValue.length,
      "/",
      maxLength < 0 ? 0 : maxLength
    )
  );
};
TextArea.displayName = "NutTextArea";
export {
  TextArea as default
};