acud/lib/input/TextArea.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _rcTextarea = _interopRequireDefault(require("rc-textarea"));
var _classnames = _interopRequireDefault(require("classnames"));
var _MultiToneClear = _interopRequireDefault(require("acud-icon/lib/icons/MultiToneClear"));
var _configProvider = require("../config-provider");
var _useMergedState3 = _interopRequireDefault(require("../_util/hooks/useMergedState"));
var _Input = require("./Input");
var _popover = _interopRequireDefault(require("../popover"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * @file TextArea component
 * @author liyanan19
 */
var __rest = void 0 && (void 0).__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;
};
// const TextArea:React.FC<TextAreaProps> = props => {
var TextArea = /*#__PURE__*/_react["default"].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 = (0, _useMergedState3["default"])(props.defaultValue, {
      value: props.value
    }),
    _useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
    value = _useMergedState2[0],
    setValue = _useMergedState2[1];
  var _useState = (0, _react.useState)('#D4D6D9'),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    clearIconColor = _useState2[0],
    setClearIconColor = _useState2[1];
  var currentLength = (0, _react.useMemo)(function () {
    return (value === null || value === void 0 ? void 0 : value.length) || 0;
  }, [value]);
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    focusClass = _useState4[0],
    setFocusClass = _useState4[1];
  var composedRef = _react["default"].useRef(false);
  var _useState5 = (0, _react.useState)(''),
    _useState6 = (0, _slicedToArray2["default"])(_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["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('input-textarea', customizePrefixCls);
  var classes = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".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 = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-warning"), currentLength > limitLength));
  var limitBoxClassName = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-limit-box-readonly"), readonly));
  var clearContent = function clearContent(e) {
    // setValue('');
    // 参考 input
    handleOnChange((0, _Input.resolveTargetValue)(e, ''));
  };
  var innerValue = composedRef.current ? composingValue : value !== null && value !== void 0 ? value : '';
  var textAreaContent = /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])("".concat(prefixCls, "-outer"), className),
    style: {
      width: width
    }
  }, /*#__PURE__*/_react["default"].createElement(_rcTextarea["default"], (0, _extends2["default"])({}, rest, {
    ref: ref,
    style: style,
    placeholder: placeholder,
    className: (0, _classnames["default"])(classes),
    onChange: handleOnChange,
    onKeyDown: handleOnKeyDown,
    onFocus: handleFocus,
    onBlur: handleBlur,
    value: innerValue,
    autoSize: autoSize,
    disabled: disabled,
    onCompositionStart: handleOnCompositionStart,
    onCompositionEnd: handleOnCompositionEnd
  })), value && allowClear && !readonly && /*#__PURE__*/_react["default"].createElement("div", {
    onClick: clearContent,
    className: "".concat(prefixCls, "-outer-icon-clear"),
    onMouseEnter: hoverClear,
    onMouseLeave: clearMouseLeave
  }, /*#__PURE__*/_react["default"].createElement(_MultiToneClear["default"], {
    width: 16,
    color: clearIconColor
  })), limitLength && /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(limitBoxClassName, "".concat(prefixCls, "-limit-box"))
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: (0, _classnames["default"])(limitClassName, 'limit')
  }, currentLength, "/", limitLength)));
  return /*#__PURE__*/_react["default"].createElement(_popover["default"], (0, _extends2["default"])({
    content: /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-warning-popover-text")
    }, warningText)
  }, warningPopover && !!warningText ? {} : {
    visible: false
  }, {
    placement: "bottomLeft"
  }), textAreaContent);
});
var _default = exports["default"] = TextArea;