acud/es/input/TextArea.js

acg react 组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
 * @file TextArea component
 * @author liyanan19
 */
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import React, { useState, useMemo } from 'react';
import RcTextArea from 'rc-textarea';
import classNames from 'classnames';
import MultiToneClear from "acud-icon/es/icons/MultiToneClear";
import { ConfigContext } from '../config-provider';
import useMergedState from '../_util/hooks/useMergedState';
import { resolveTargetValue } from './Input';
import Popover from '../popover';
// const TextArea:React.FC<TextAreaProps> = props => {
var TextArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var customizePrefixCls = props.prefixCls,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '请输入内容' : _props$placeholder,
    className = props.className,
    style = props.style,
    width = props.width,
    limitLength = props.limitLength,
    readonly = props.readonly,
    autoSize = props.autoSize,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    onPressEnter = props.onPressEnter,
    onKeyDown = props.onKeyDown,
    onFocus = props.onFocus,
    onBlur = props.onBlur,
    _props$allowClear = props.allowClear,
    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
    _props$forbidIfLimit = props.forbidIfLimit,
    forbidIfLimit = _props$forbidIfLimit === void 0 ? false : _props$forbidIfLimit,
    warningPopover = props.warningPopover,
    warningText = props.warningText,
    onCompositionStart = props.onCompositionStart,
    onCompositionEnd = props.onCompositionEnd,
    rest = __rest(props, ["prefixCls", "placeholder", "className", "style", "width", "limitLength", "readonly", "autoSize", "disabled", "onPressEnter", "onKeyDown", "onFocus", "onBlur", "allowClear", "forbidIfLimit", "warningPopover", "warningText", "onCompositionStart", "onCompositionEnd"]);
  var _useMergedState = useMergedState(props.defaultValue, {
      value: props.value
    }),
    _useMergedState2 = _slicedToArray(_useMergedState, 2),
    value = _useMergedState2[0],
    setValue = _useMergedState2[1];
  var _useState = useState('#D4D6D9'),
    _useState2 = _slicedToArray(_useState, 2),
    clearIconColor = _useState2[0],
    setClearIconColor = _useState2[1];
  var currentLength = useMemo(function () {
    return (value === null || value === void 0 ? void 0 : value.length) || 0;
  }, [value]);
  var _useState3 = useState(''),
    _useState4 = _slicedToArray(_useState3, 2),
    focusClass = _useState4[0],
    setFocusClass = _useState4[1];
  var composedRef = React.useRef(false);
  var _useState5 = useState(''),
    _useState6 = _slicedToArray(_useState5, 2),
    composingValue = _useState6[0],
    setComposingValue = _useState6[1];
  var handleOnChange = function handleOnChange(e) {
    var _a;
    if (readonly) {
      return;
    }
    var newVal = e.target.value;
    if (composedRef.current) {
      setComposingValue(newVal);
    } else {
      if (forbidIfLimit && limitLength && newVal.length >= limitLength) {
        setComposingValue(newVal.slice(0, limitLength));
        setValue(newVal.slice(0, limitLength));
        e.target.value = e.target.value.slice(0, limitLength);
      }
      setComposingValue(newVal);
      setValue(newVal);
      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
    }
  };
  var handleOnKeyDown = function handleOnKeyDown(e) {
    if (onPressEnter && e.key === 'Enter') {
      onPressEnter(e);
      // setValue('');
    }
    if (onKeyDown) {
      onKeyDown(e);
    }
  };
  var handleFocus = function handleFocus(e) {
    if (readonly) {
      return;
    }
    setFocusClass('focus');
    if (onFocus) {
      onFocus(e);
    }
  };
  var handleBlur = function handleBlur(e) {
    if (readonly) {
      return;
    }
    setFocusClass('');
    if (onBlur) {
      onBlur(e);
    }
  };
  var hoverClear = function hoverClear() {
    setClearIconColor('#A7ABB5');
  };
  var clearMouseLeave = function clearMouseLeave() {
    setClearIconColor('#D4D6D9');
  };
  var handleOnCompositionStart = function handleOnCompositionStart(e) {
    composedRef.current = true;
    onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
  };
  var handleOnCompositionEnd = function handleOnCompositionEnd(e) {
    if (composedRef.current) {
      composedRef.current = false;
      handleOnChange(e);
    }
    onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
  };
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input-textarea', customizePrefixCls);
  var classes = classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-autosize"), autoSize), "".concat(prefixCls, "-readonly"), readonly), "".concat(prefixCls, "-span-focus"), focusClass), "".concat(prefixCls, "-limit"), currentLength > limitLength), "".concat(prefixCls, "-no-limit"), !!limitLength), "".concat(prefixCls, "-no-clear"), !allowClear), "".concat(prefixCls, "-error"), warningPopover));
  var limitClassName = classNames(_defineProperty({}, "".concat(prefixCls, "-warning"), currentLength > limitLength));
  var limitBoxClassName = classNames(_defineProperty({}, "".concat(prefixCls, "-limit-box-readonly"), readonly));
  var clearContent = function clearContent(e) {
    // setValue('');
    // 参考 input
    handleOnChange(resolveTargetValue(e, ''));
  };
  var innerValue = composedRef.current ? composingValue : value !== null && value !== void 0 ? value : '';
  var textAreaContent = /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-outer"), className),
    style: {
      width: width
    }
  }, /*#__PURE__*/React.createElement(RcTextArea, _extends({}, rest, {
    ref: ref,
    style: style,
    placeholder: placeholder,
    className: classNames(classes),
    onChange: handleOnChange,
    onKeyDown: handleOnKeyDown,
    onFocus: handleFocus,
    onBlur: handleBlur,
    value: innerValue,
    autoSize: autoSize,
    disabled: disabled,
    onCompositionStart: handleOnCompositionStart,
    onCompositionEnd: handleOnCompositionEnd
  })), value && allowClear && !readonly && /*#__PURE__*/React.createElement("div", {
    onClick: clearContent,
    className: "".concat(prefixCls, "-outer-icon-clear"),
    onMouseEnter: hoverClear,
    onMouseLeave: clearMouseLeave
  }, /*#__PURE__*/React.createElement(MultiToneClear, {
    width: 16,
    color: clearIconColor
  })), limitLength && /*#__PURE__*/React.createElement("div", {
    className: classNames(limitBoxClassName, "".concat(prefixCls, "-limit-box"))
  }, /*#__PURE__*/React.createElement("span", {
    className: classNames(limitClassName, 'limit')
  }, currentLength, "/", limitLength)));
  return /*#__PURE__*/React.createElement(Popover, _extends({
    content: /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-warning-popover-text")
    }, warningText)
  }, warningPopover && !!warningText ? {} : {
    visible: false
  }, {
    placement: "bottomLeft"
  }), textAreaContent);
});
export default TextArea;