rc-textarea - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

es/calculateNodeHeight.js

@@ -6,2 +6,3 @@ // Thanks to https://github.com/andreypopp/react-textarea-autosize/
  */
+
 var HIDDEN_TEXTAREA_STYLE = "\n  min-height:0 !important;\n  max-height:none !important;\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important;\n  pointer-events: none !important;\n";
@@ -14,7 +15,5 @@ var SIZING_STYLE = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'font-variant', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing', 'word-break', 'white-space'];
   var nodeRef = node.getAttribute('id') || node.getAttribute('data-reactid') || node.getAttribute('name');
-
   if (useCache && computedStyleCache[nodeRef]) {
     return computedStyleCache[nodeRef];
   }
-
   var style = window.getComputedStyle(node);
@@ -33,7 +32,5 @@ var boxSizing = style.getPropertyValue('box-sizing') || style.getPropertyValue('-moz-box-sizing') || style.getPropertyValue('-webkit-box-sizing');
   };
-
   if (useCache && nodeRef) {
     computedStyleCache[nodeRef] = nodeInfo;
   }
-
   return nodeInfo;
@@ -45,3 +42,2 @@ }
   var maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-
   if (!hiddenTextarea) {
@@ -52,6 +48,6 @@ hiddenTextarea = document.createElement('textarea');
     document.body.appendChild(hiddenTextarea);
-  } // Fix wrap="off" issue
+  }
+
+  // Fix wrap="off" issue
   // https://github.com/ant-design/ant-design/issues/6577
-
-
   if (uiTextNode.getAttribute('wrap')) {
@@ -61,15 +57,15 @@ hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'));
     hiddenTextarea.removeAttribute('wrap');
-  } // Copy all CSS properties that have an impact on the height of the content in
+  }
+
+  // Copy all CSS properties that have an impact on the height of the content in
   // the textbox
+  var _calculateNodeStyling = calculateNodeStyling(uiTextNode, useCache),
+    paddingSize = _calculateNodeStyling.paddingSize,
+    borderSize = _calculateNodeStyling.borderSize,
+    boxSizing = _calculateNodeStyling.boxSizing,
+    sizingStyle = _calculateNodeStyling.sizingStyle;
 
-
-  var _calculateNodeStyling = calculateNodeStyling(uiTextNode, useCache),
-      paddingSize = _calculateNodeStyling.paddingSize,
-      borderSize = _calculateNodeStyling.borderSize,
-      boxSizing = _calculateNodeStyling.boxSizing,
-      sizingStyle = _calculateNodeStyling.sizingStyle; // Need to have the overflow attribute to hide the scrollbar otherwise
+  // Need to have the overflow attribute to hide the scrollbar otherwise
   // text-lines will not calculated properly as the shadow will technically be
   // narrower for content
-
-
   hiddenTextarea.setAttribute('style', "".concat(sizingStyle, ";").concat(HIDDEN_TEXTAREA_STYLE));
@@ -81,3 +77,2 @@ hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
   var height = hiddenTextarea.scrollHeight;
-
   if (boxSizing === 'border-box') {
@@ -90,3 +85,2 @@ // border-box: add border, since height = content + padding + border
   }
-
   if (minRows !== null || maxRows !== null) {
@@ -96,20 +90,14 @@ // measure height of a textarea with a single row
     var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
     if (minRows !== null) {
       minHeight = singleRowHeight * minRows;
-
       if (boxSizing === 'border-box') {
         minHeight = minHeight + paddingSize + borderSize;
       }
-
       height = Math.max(minHeight, height);
     }
-
     if (maxRows !== null) {
       maxHeight = singleRowHeight * maxRows;
-
       if (boxSizing === 'border-box') {
         maxHeight = maxHeight + paddingSize + borderSize;
       }
-
       overflowY = height > maxHeight ? '' : 'hidden';
@@ -119,3 +107,2 @@ height = Math.min(maxHeight, height);
   }
-
   var style = {
@@ -126,12 +113,9 @@ height: height,
   };
-
   if (minHeight) {
     style.minHeight = minHeight;
   }
-
   if (maxHeight) {
     style.maxHeight = maxHeight;
   }
-
   return style;
 }

es/interface.d.ts

@@ -26,2 +26,3 @@ import type { BaseInputProps, ShowCountProps } from 'rc-input/lib/interface';
         affixWrapper?: string;
+        count?: string;
     };
@@ -28,0 +29,0 @@ } & Pick<BaseInputProps, 'allowClear' | 'suffix'>;

es/ResizableTextArea.d.ts

@@ -18,4 +18,5 @@ import * as React from 'react';
         affixWrapper?: string;
+        count?: string;
     };
 } & Pick<import("rc-input/lib/interface").BaseInputProps, "allowClear" | "suffix"> & React.RefAttributes<ResizableTextAreaRef>>;
 export default ResizableTextArea;

es/ResizableTextArea.js

@@ -20,32 +20,31 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   var _ref = props,
-      prefixCls = _ref.prefixCls,
-      onPressEnter = _ref.onPressEnter,
-      defaultValue = _ref.defaultValue,
-      value = _ref.value,
-      autoSize = _ref.autoSize,
-      onResize = _ref.onResize,
-      className = _ref.className,
-      style = _ref.style,
-      disabled = _ref.disabled,
-      onChange = _ref.onChange,
-      onInternalAutoSize = _ref.onInternalAutoSize,
-      restProps = _objectWithoutProperties(_ref, _excluded); // =============================== Value ================================
+    prefixCls = _ref.prefixCls,
+    onPressEnter = _ref.onPressEnter,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    autoSize = _ref.autoSize,
+    onResize = _ref.onResize,
+    className = _ref.className,
+    style = _ref.style,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange,
+    onInternalAutoSize = _ref.onInternalAutoSize,
+    restProps = _objectWithoutProperties(_ref, _excluded);
 
-
+  // =============================== Value ================================
   var _useMergedState = useMergedState(defaultValue, {
-    value: value,
-    postState: function postState(val) {
-      return val !== null && val !== void 0 ? val : '';
-    }
-  }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      mergedValue = _useMergedState2[0],
-      setMergedValue = _useMergedState2[1];
-
+      value: value,
+      postState: function postState(val) {
+        return val !== null && val !== void 0 ? val : '';
+      }
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedValue = _useMergedState2[0],
+    setMergedValue = _useMergedState2[1];
   var onInternalChange = function onInternalChange(event) {
     setMergedValue(event.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(event);
-  }; // ================================ Ref =================================
+  };
 
-
+  // ================================ Ref =================================
   var textareaRef = React.useRef();
@@ -56,18 +55,18 @@ React.useImperativeHandle(ref, function () {
     };
-  }); // ============================== AutoSize ==============================
+  });
 
+  // ============================== AutoSize ==============================
   var _React$useMemo = React.useMemo(function () {
-    if (autoSize && _typeof(autoSize) === 'object') {
-      return [autoSize.minRows, autoSize.maxRows];
-    }
+      if (autoSize && _typeof(autoSize) === 'object') {
+        return [autoSize.minRows, autoSize.maxRows];
+      }
+      return [];
+    }, [autoSize]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    minRows = _React$useMemo2[0],
+    maxRows = _React$useMemo2[1];
+  var needAutoSize = !!autoSize;
 
-    return [];
-  }, [autoSize]),
-      _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
-      minRows = _React$useMemo2[0],
-      maxRows = _React$useMemo2[1];
-
-  var needAutoSize = !!autoSize; // =============================== Scroll ===============================
+  // =============================== Scroll ===============================
   // https://github.com/ant-design/ant-design/issues/21870
-
   var fixFirefoxAutoScroll = function fixFirefoxAutoScroll() {
@@ -78,5 +77,7 @@ try {
         var _textareaRef$current = textareaRef.current,
-            selectionStart = _textareaRef$current.selectionStart,
-            selectionEnd = _textareaRef$current.selectionEnd,
-            scrollTop = _textareaRef$current.scrollTop; // Fix Safari bug which not rollback when break line
+          selectionStart = _textareaRef$current.selectionStart,
+          selectionEnd = _textareaRef$current.selectionEnd,
+          scrollTop = _textareaRef$current.scrollTop;
+
+        // Fix Safari bug which not rollback when break line
         // This makes Chinese IME can't input. Do not fix this
@@ -90,28 +91,26 @@ // const { value: tmpValue } = textareaRef.current;
       }
-    } catch (e) {// Fix error in Chrome:
+    } catch (e) {
+      // Fix error in Chrome:
       // Failed to read the 'selectionStart' property from 'HTMLInputElement'
       // http://stackoverflow.com/q/21177489/3040605
     }
-  }; // =============================== Resize ===============================
+  };
 
-
+  // =============================== Resize ===============================
   var _React$useState = React.useState(RESIZE_STABLE),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      resizeState = _React$useState2[0],
-      setResizeState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    resizeState = _React$useState2[0],
+    setResizeState = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      autoSizeStyle = _React$useState4[0],
-      setAutoSizeStyle = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    autoSizeStyle = _React$useState4[0],
+    setAutoSizeStyle = _React$useState4[1];
   var startResize = function startResize() {
     setResizeState(RESIZE_START);
-
     if (process.env.NODE_ENV === 'test') {
       onInternalAutoSize === null || onInternalAutoSize === void 0 ? void 0 : onInternalAutoSize();
     }
-  }; // Change to trigger resize measure
+  };
 
-
+  // Change to trigger resize measure
   useLayoutEffect(function () {
@@ -126,3 +125,5 @@ if (needAutoSize) {
     } else if (resizeState === RESIZE_MEASURING) {
-      var textareaStyles = calculateAutoSizeStyle(textareaRef.current, false, minRows, maxRows); // Safari has bug that text will keep break line on text cut when it's prev is break line.
+      var textareaStyles = calculateAutoSizeStyle(textareaRef.current, false, minRows, maxRows);
+
+      // Safari has bug that text will keep break line on text cut when it's prev is break line.
       // ZombieJ: This not often happen. So we just skip it.
@@ -133,2 +134,3 @@ // const { selectionStart, selectionEnd, scrollTop } = textareaRef.current;
       // textareaRef.current.value = tmpValue;
+
       // if (document.activeElement === textareaRef.current) {
@@ -144,14 +146,12 @@ //   textareaRef.current.scrollTop = scrollTop;
     }
-  }, [resizeState]); // We lock resize trigger by raf to avoid Safari warning
+  }, [resizeState]);
 
+  // We lock resize trigger by raf to avoid Safari warning
   var resizeRafRef = React.useRef();
-
   var cleanRaf = function cleanRaf() {
     raf.cancel(resizeRafRef.current);
   };
-
   var onInternalResize = function onInternalResize(size) {
     if (resizeState === RESIZE_STABLE) {
       onResize === null || onResize === void 0 ? void 0 : onResize(size);
-
       if (autoSize) {
@@ -165,11 +165,9 @@ cleanRaf();
   };
-
   React.useEffect(function () {
     return cleanRaf;
-  }, []); // =============================== Render ===============================
+  }, []);
 
+  // =============================== Render ===============================
   var mergedAutoSizeStyle = needAutoSize ? autoSizeStyle : null;
-
   var mergedStyle = _objectSpread(_objectSpread({}, style), mergedAutoSizeStyle);
-
   if (resizeState === RESIZE_START || resizeState === RESIZE_MEASURING) {
@@ -179,3 +177,2 @@ mergedStyle.overflowY = 'hidden';
   }
-
   return /*#__PURE__*/React.createElement(ResizeObserver, {
@@ -182,0 +179,0 @@ onResize: onInternalResize,

es/TextArea.d.ts

@@ -18,4 +18,5 @@ import React from 'react';
         affixWrapper?: string;
+        count?: string;
     };
 } & Pick<import("rc-input/lib/interface").BaseInputProps, "allowClear" | "suffix"> & React.RefAttributes<TextAreaRef>>;
 export default TextArea;

es/TextArea.js

@@ -0,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -13,10 +14,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import ResizableTextArea from "./ResizableTextArea";
-
 function fixEmojiLength(value, maxLength) {
   return _toConsumableArray(value || '').slice(0, maxLength).join('');
 }
-
 function setTriggerValue(isCursorInEnd, preValue, triggerValue, maxLength) {
   var newTriggerValue = triggerValue;
-
   if (isCursorInEnd) {
@@ -29,53 +27,45 @@ // 光标在尾部，直接截断
   }
-
   return newTriggerValue;
 }
-
 var TextArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _classNames;
   var defaultValue = _ref.defaultValue,
-      customValue = _ref.value,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      allowClear = _ref.allowClear,
-      maxLength = _ref.maxLength,
-      onCompositionStart = _ref.onCompositionStart,
-      onCompositionEnd = _ref.onCompositionEnd,
-      suffix = _ref.suffix,
-      _ref$prefixCls = _ref.prefixCls,
-      prefixCls = _ref$prefixCls === void 0 ? 'rc-textarea' : _ref$prefixCls,
-      classes = _ref.classes,
-      showCount = _ref.showCount,
-      className = _ref.className,
-      style = _ref.style,
-      disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    customValue = _ref.value,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onChange = _ref.onChange,
+    allowClear = _ref.allowClear,
+    maxLength = _ref.maxLength,
+    onCompositionStart = _ref.onCompositionStart,
+    onCompositionEnd = _ref.onCompositionEnd,
+    suffix = _ref.suffix,
+    _ref$prefixCls = _ref.prefixCls,
+    prefixCls = _ref$prefixCls === void 0 ? 'rc-textarea' : _ref$prefixCls,
+    classes = _ref.classes,
+    showCount = _ref.showCount,
+    className = _ref.className,
+    style = _ref.style,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useMergedState = useMergedState(defaultValue, {
-    value: customValue,
-    defaultValue: defaultValue
-  }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      value = _useMergedState2[0],
-      setValue = _useMergedState2[1];
-
+      value: customValue,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    value = _useMergedState2[0],
+    setValue = _useMergedState2[1];
   var resizableTextAreaRef = useRef(null);
-
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      compositing = _React$useState4[0],
-      setCompositing = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    compositing = _React$useState4[0],
+    setCompositing = _React$useState4[1];
   var oldCompositionValueRef = React.useRef();
   var oldSelectionStartRef = React.useRef(0);
-
   var focus = function focus() {
     resizableTextAreaRef.current.textArea.focus();
   };
-
   useImperativeHandle(ref, function () {
@@ -94,28 +84,24 @@ return {
     });
-  }, [disabled]); // =========================== Value Update ===========================
+  }, [disabled]);
+
+  // =========================== Value Update ===========================
   // Max length value
-
   var hasMaxLength = Number(maxLength) > 0;
-
   var onInternalCompositionStart = function onInternalCompositionStart(e) {
-    setCompositing(true); // 拼音输入前保存一份旧值
-
-    oldCompositionValueRef.current = value; // 保存旧的光标位置
-
+    setCompositing(true);
+    // 拼音输入前保存一份旧值
+    oldCompositionValueRef.current = value;
+    // 保存旧的光标位置
     oldSelectionStartRef.current = e.currentTarget.selectionStart;
     onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
   };
-
   var onInternalCompositionEnd = function onInternalCompositionEnd(e) {
     setCompositing(false);
     var triggerValue = e.currentTarget.value;
-
     if (hasMaxLength) {
       var _oldCompositionValueR;
-
       var isCursorInEnd = oldSelectionStartRef.current >= maxLength + 1 || oldSelectionStartRef.current === ((_oldCompositionValueR = oldCompositionValueRef.current) === null || _oldCompositionValueR === void 0 ? void 0 : _oldCompositionValueR.length);
       triggerValue = setTriggerValue(isCursorInEnd, oldCompositionValueRef.current, triggerValue, maxLength);
-    } // Patch composition onChange when value changed
-
-
+    }
+    // Patch composition onChange when value changed
     if (triggerValue !== value) {
@@ -125,9 +111,6 @@ setValue(triggerValue);
     }
-
     onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
   };
-
   var handleChange = function handleChange(e) {
     var triggerValue = e.target.value;
-
     if (!compositing && hasMaxLength) {
@@ -138,18 +121,13 @@ // 1. 复制粘贴超过maxlength的情况 2.未超过maxlength的情况
     }
-
     setValue(triggerValue);
     resolveOnChange(e.currentTarget, e, onChange, triggerValue);
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     var onPressEnter = rest.onPressEnter,
-        onKeyDown = rest.onKeyDown;
-
+      onKeyDown = rest.onKeyDown;
     if (e.key === 'Enter' && onPressEnter) {
       onPressEnter(e);
     }
-
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
-
   var handleFocus = function handleFocus(e) {
@@ -159,9 +137,8 @@ setFocused(true);
   };
-
   var handleBlur = function handleBlur(e) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }; // ============================== Reset ===============================
+  };
 
-
+  // ============================== Reset ===============================
   var handleReset = function handleReset(e) {
@@ -172,5 +149,3 @@ setValue('');
   };
-
   var val = fixControlledValue(value);
-
   if (!compositing && hasMaxLength && (customValue === null || customValue === undefined)) {
@@ -180,3 +155,19 @@ // fix #27612 将value转为数组进行截取，解决 '😂'.length === 2 等emoji表情导致的截取乱码的问题
   }
-
+  var suffixNode = suffix;
+  var dataCount;
+  if (showCount) {
+    var valueLength = _toConsumableArray(val).length;
+    if (_typeof(showCount) === 'object') {
+      dataCount = showCount.formatter({
+        value: val,
+        count: valueLength,
+        maxLength: maxLength
+      });
+    } else {
+      dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(maxLength) : '');
+    }
+    suffixNode = /*#__PURE__*/React.createElement(React.Fragment, null, suffixNode, /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(prefixCls, "-data-count"), classes === null || classes === void 0 ? void 0 : classes.count)
+    }, dataCount));
+  }
   var textarea = /*#__PURE__*/React.createElement(BaseInput, {
@@ -186,6 +177,6 @@ value: val,
     handleReset: handleReset,
-    suffix: suffix,
+    suffix: suffixNode,
     prefixCls: prefixCls,
     classes: {
-      affixWrapper: classes === null || classes === void 0 ? void 0 : classes.affixWrapper
+      affixWrapper: classNames(classes === null || classes === void 0 ? void 0 : classes.affixWrapper, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-show-count"), showCount), _defineProperty(_classNames, "".concat(prefixCls, "-textarea-allow-clear"), allowClear), _classNames))
     },
@@ -198,2 +189,7 @@ disabled: disabled,
     },
+    dataAttrs: {
+      affixWrapper: {
+        'data-count': typeof dataCount === 'string' ? dataCount : undefined
+      }
+    },
     inputElement: /*#__PURE__*/React.createElement(ResizableTextArea, _extends({}, rest, {
@@ -213,30 +209,4 @@ onKeyDown: handleKeyDown,
   });
-
-  if (showCount) {
-    var valueLength = _toConsumableArray(val).length;
-
-    var dataCount;
-
-    if (_typeof(showCount) === 'object') {
-      dataCount = showCount.formatter({
-        value: val,
-        count: valueLength,
-        maxLength: maxLength
-      });
-    } else {
-      dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(maxLength) : '');
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      hidden: rest.hidden,
-      className: classNames("".concat(prefixCls, "-show-count"), className, classes === null || classes === void 0 ? void 0 : classes.countWrapper),
-      style: style,
-      "data-count": dataCount
-    }, textarea, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-data-count")
-    }, dataCount));
-  }
-
   return textarea;
 });
 export default TextArea;

lib/calculateNodeHeight.js

@@ -13,2 +13,3 @@ "use strict";
  */
+
 var HIDDEN_TEXTAREA_STYLE = "\n  min-height:0 !important;\n  max-height:none !important;\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important;\n  pointer-events: none !important;\n";
@@ -18,11 +19,8 @@ var SIZING_STYLE = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'font-variant', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing', 'word-break', 'white-space'];
 var hiddenTextarea;
-
 function calculateNodeStyling(node) {
   var useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var nodeRef = node.getAttribute('id') || node.getAttribute('data-reactid') || node.getAttribute('name');
-
   if (useCache && computedStyleCache[nodeRef]) {
     return computedStyleCache[nodeRef];
   }
-
   var style = window.getComputedStyle(node);
@@ -41,10 +39,7 @@ var boxSizing = style.getPropertyValue('box-sizing') || style.getPropertyValue('-moz-box-sizing') || style.getPropertyValue('-webkit-box-sizing');
   };
-
   if (useCache && nodeRef) {
     computedStyleCache[nodeRef] = nodeInfo;
   }
-
   return nodeInfo;
 }
-
 function calculateAutoSizeStyle(uiTextNode) {
@@ -54,3 +49,2 @@ var useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-
   if (!hiddenTextarea) {
@@ -61,6 +55,6 @@ hiddenTextarea = document.createElement('textarea');
     document.body.appendChild(hiddenTextarea);
-  } // Fix wrap="off" issue
+  }
+
+  // Fix wrap="off" issue
   // https://github.com/ant-design/ant-design/issues/6577
-
-
   if (uiTextNode.getAttribute('wrap')) {
@@ -70,15 +64,15 @@ hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'));
     hiddenTextarea.removeAttribute('wrap');
-  } // Copy all CSS properties that have an impact on the height of the content in
+  }
+
+  // Copy all CSS properties that have an impact on the height of the content in
   // the textbox
+  var _calculateNodeStyling = calculateNodeStyling(uiTextNode, useCache),
+    paddingSize = _calculateNodeStyling.paddingSize,
+    borderSize = _calculateNodeStyling.borderSize,
+    boxSizing = _calculateNodeStyling.boxSizing,
+    sizingStyle = _calculateNodeStyling.sizingStyle;
 
-
-  var _calculateNodeStyling = calculateNodeStyling(uiTextNode, useCache),
-      paddingSize = _calculateNodeStyling.paddingSize,
-      borderSize = _calculateNodeStyling.borderSize,
-      boxSizing = _calculateNodeStyling.boxSizing,
-      sizingStyle = _calculateNodeStyling.sizingStyle; // Need to have the overflow attribute to hide the scrollbar otherwise
+  // Need to have the overflow attribute to hide the scrollbar otherwise
   // text-lines will not calculated properly as the shadow will technically be
   // narrower for content
-
-
   hiddenTextarea.setAttribute('style', "".concat(sizingStyle, ";").concat(HIDDEN_TEXTAREA_STYLE));
@@ -90,3 +84,2 @@ hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
   var height = hiddenTextarea.scrollHeight;
-
   if (boxSizing === 'border-box') {
@@ -99,3 +92,2 @@ // border-box: add border, since height = content + padding + border
   }
-
   if (minRows !== null || maxRows !== null) {
@@ -105,20 +97,14 @@ // measure height of a textarea with a single row
     var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
     if (minRows !== null) {
       minHeight = singleRowHeight * minRows;
-
       if (boxSizing === 'border-box') {
         minHeight = minHeight + paddingSize + borderSize;
       }
-
       height = Math.max(minHeight, height);
     }
-
     if (maxRows !== null) {
       maxHeight = singleRowHeight * maxRows;
-
       if (boxSizing === 'border-box') {
         maxHeight = maxHeight + paddingSize + borderSize;
       }
-
       overflowY = height > maxHeight ? '' : 'hidden';
@@ -128,3 +114,2 @@ height = Math.min(maxHeight, height);
   }
-
   var style = {
@@ -135,12 +120,9 @@ height: height,
   };
-
   if (minHeight) {
     style.minHeight = minHeight;
   }
-
   if (maxHeight) {
     style.maxHeight = maxHeight;
   }
-
   return style;
 }

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -15,8 +14,5 @@ value: true
 exports.default = void 0;
-
 var _TextArea = _interopRequireDefault(require("./TextArea"));
-
 var _ResizableTextArea = _interopRequireDefault(require("./ResizableTextArea"));
-
 var _default = _TextArea.default;
 exports.default = _default;

lib/interface.d.ts

@@ -26,2 +26,3 @@ import type { BaseInputProps, ShowCountProps } from 'rc-input/lib/interface';
         affixWrapper?: string;
+        count?: string;
     };
@@ -28,0 +29,0 @@ } & Pick<BaseInputProps, 'allowClear' | 'suffix'>;

lib/ResizableTextArea.d.ts

@@ -18,4 +18,5 @@ import * as React from 'react';
         affixWrapper?: string;
+        count?: string;
     };
 } & Pick<import("rc-input/lib/interface").BaseInputProps, "allowClear" | "suffix"> & React.RefAttributes<ResizableTextAreaRef>>;
 export default ResizableTextArea;

lib/ResizableTextArea.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,35 +9,18 @@ value: true
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
-
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-
 var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-
 var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _calculateNodeHeight = _interopRequireDefault(require("./calculateNodeHeight"));
-
 var _excluded = ["prefixCls", "onPressEnter", "defaultValue", "value", "autoSize", "onResize", "className", "style", "disabled", "onChange", "onInternalAutoSize"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var RESIZE_START = 0;
@@ -50,31 +31,31 @@ var RESIZE_MEASURING = 1;
   var _ref = props,
-      prefixCls = _ref.prefixCls,
-      onPressEnter = _ref.onPressEnter,
-      defaultValue = _ref.defaultValue,
-      value = _ref.value,
-      autoSize = _ref.autoSize,
-      onResize = _ref.onResize,
-      className = _ref.className,
-      style = _ref.style,
-      disabled = _ref.disabled,
-      onChange = _ref.onChange,
-      onInternalAutoSize = _ref.onInternalAutoSize,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded); // =============================== Value ================================
+    prefixCls = _ref.prefixCls,
+    onPressEnter = _ref.onPressEnter,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    autoSize = _ref.autoSize,
+    onResize = _ref.onResize,
+    className = _ref.className,
+    style = _ref.style,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange,
+    onInternalAutoSize = _ref.onInternalAutoSize,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
+  // =============================== Value ================================
   var _useMergedState = (0, _useMergedState3.default)(defaultValue, {
-    value: value,
-    postState: function postState(val) {
-      return val !== null && val !== void 0 ? val : '';
-    }
-  }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      mergedValue = _useMergedState2[0],
-      setMergedValue = _useMergedState2[1];
-
+      value: value,
+      postState: function postState(val) {
+        return val !== null && val !== void 0 ? val : '';
+      }
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    mergedValue = _useMergedState2[0],
+    setMergedValue = _useMergedState2[1];
   var onInternalChange = function onInternalChange(event) {
     setMergedValue(event.target.value);
     onChange === null || onChange === void 0 ? void 0 : onChange(event);
-  }; // ================================ Ref =================================
+  };
 
-
+  // ================================ Ref =================================
   var textareaRef = React.useRef();
@@ -85,18 +66,18 @@ React.useImperativeHandle(ref, function () {
     };
-  }); // ============================== AutoSize ==============================
+  });
 
+  // ============================== AutoSize ==============================
   var _React$useMemo = React.useMemo(function () {
-    if (autoSize && (0, _typeof2.default)(autoSize) === 'object') {
-      return [autoSize.minRows, autoSize.maxRows];
-    }
+      if (autoSize && (0, _typeof2.default)(autoSize) === 'object') {
+        return [autoSize.minRows, autoSize.maxRows];
+      }
+      return [];
+    }, [autoSize]),
+    _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
+    minRows = _React$useMemo2[0],
+    maxRows = _React$useMemo2[1];
+  var needAutoSize = !!autoSize;
 
-    return [];
-  }, [autoSize]),
-      _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
-      minRows = _React$useMemo2[0],
-      maxRows = _React$useMemo2[1];
-
-  var needAutoSize = !!autoSize; // =============================== Scroll ===============================
+  // =============================== Scroll ===============================
   // https://github.com/ant-design/ant-design/issues/21870
-
   var fixFirefoxAutoScroll = function fixFirefoxAutoScroll() {
@@ -107,5 +88,7 @@ try {
         var _textareaRef$current = textareaRef.current,
-            selectionStart = _textareaRef$current.selectionStart,
-            selectionEnd = _textareaRef$current.selectionEnd,
-            scrollTop = _textareaRef$current.scrollTop; // Fix Safari bug which not rollback when break line
+          selectionStart = _textareaRef$current.selectionStart,
+          selectionEnd = _textareaRef$current.selectionEnd,
+          scrollTop = _textareaRef$current.scrollTop;
+
+        // Fix Safari bug which not rollback when break line
         // This makes Chinese IME can't input. Do not fix this
@@ -119,28 +102,26 @@ // const { value: tmpValue } = textareaRef.current;
       }
-    } catch (e) {// Fix error in Chrome:
+    } catch (e) {
+      // Fix error in Chrome:
       // Failed to read the 'selectionStart' property from 'HTMLInputElement'
       // http://stackoverflow.com/q/21177489/3040605
     }
-  }; // =============================== Resize ===============================
+  };
 
-
+  // =============================== Resize ===============================
   var _React$useState = React.useState(RESIZE_STABLE),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      resizeState = _React$useState2[0],
-      setResizeState = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    resizeState = _React$useState2[0],
+    setResizeState = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      autoSizeStyle = _React$useState4[0],
-      setAutoSizeStyle = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    autoSizeStyle = _React$useState4[0],
+    setAutoSizeStyle = _React$useState4[1];
   var startResize = function startResize() {
     setResizeState(RESIZE_START);
-
     if (process.env.NODE_ENV === 'test') {
       onInternalAutoSize === null || onInternalAutoSize === void 0 ? void 0 : onInternalAutoSize();
     }
-  }; // Change to trigger resize measure
+  };
 
-
+  // Change to trigger resize measure
   (0, _useLayoutEffect.default)(function () {
@@ -155,3 +136,5 @@ if (needAutoSize) {
     } else if (resizeState === RESIZE_MEASURING) {
-      var textareaStyles = (0, _calculateNodeHeight.default)(textareaRef.current, false, minRows, maxRows); // Safari has bug that text will keep break line on text cut when it's prev is break line.
+      var textareaStyles = (0, _calculateNodeHeight.default)(textareaRef.current, false, minRows, maxRows);
+
+      // Safari has bug that text will keep break line on text cut when it's prev is break line.
       // ZombieJ: This not often happen. So we just skip it.
@@ -162,2 +145,3 @@ // const { selectionStart, selectionEnd, scrollTop } = textareaRef.current;
       // textareaRef.current.value = tmpValue;
+
       // if (document.activeElement === textareaRef.current) {
@@ -173,14 +157,12 @@ //   textareaRef.current.scrollTop = scrollTop;
     }
-  }, [resizeState]); // We lock resize trigger by raf to avoid Safari warning
+  }, [resizeState]);
 
+  // We lock resize trigger by raf to avoid Safari warning
   var resizeRafRef = React.useRef();
-
   var cleanRaf = function cleanRaf() {
     _raf.default.cancel(resizeRafRef.current);
   };
-
   var onInternalResize = function onInternalResize(size) {
     if (resizeState === RESIZE_STABLE) {
       onResize === null || onResize === void 0 ? void 0 : onResize(size);
-
       if (autoSize) {
@@ -194,10 +176,9 @@ cleanRaf();
   };
-
   React.useEffect(function () {
     return cleanRaf;
-  }, []); // =============================== Render ===============================
+  }, []);
 
+  // =============================== Render ===============================
   var mergedAutoSizeStyle = needAutoSize ? autoSizeStyle : null;
   var mergedStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), mergedAutoSizeStyle);
-
   if (resizeState === RESIZE_START || resizeState === RESIZE_MEASURING) {
@@ -207,3 +188,2 @@ mergedStyle.overflowY = 'hidden';
   }
-
   return /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
@@ -210,0 +190,0 @@ onResize: onInternalResize,

lib/TextArea.d.ts

@@ -18,4 +18,5 @@ import React from 'react';
         affixWrapper?: string;
+        count?: string;
     };
 } & Pick<import("rc-input/lib/interface").BaseInputProps, "allowClear" | "suffix"> & React.RefAttributes<TextAreaRef>>;
 export default TextArea;

lib/TextArea.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,38 +9,22 @@ value: true
 exports.default = void 0;
-
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _rcInput = require("rc-input");
-
 var _commonUtils = require("rc-input/lib/utils/commonUtils");
-
 var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ResizableTextArea = _interopRequireDefault(require("./ResizableTextArea"));
-
 var _excluded = ["defaultValue", "value", "onFocus", "onBlur", "onChange", "allowClear", "maxLength", "onCompositionStart", "onCompositionEnd", "suffix", "prefixCls", "classes", "showCount", "className", "style", "disabled"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function fixEmojiLength(value, maxLength) {
   return (0, _toConsumableArray2.default)(value || '').slice(0, maxLength).join('');
 }
-
 function setTriggerValue(isCursorInEnd, preValue, triggerValue, maxLength) {
   var newTriggerValue = triggerValue;
-
   if (isCursorInEnd) {
@@ -55,54 +37,45 @@ // 光标在尾部，直接截断
   }
-
   return newTriggerValue;
 }
-
 var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _classNames;
   var defaultValue = _ref.defaultValue,
-      customValue = _ref.value,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      allowClear = _ref.allowClear,
-      maxLength = _ref.maxLength,
-      onCompositionStart = _ref.onCompositionStart,
-      onCompositionEnd = _ref.onCompositionEnd,
-      suffix = _ref.suffix,
-      _ref$prefixCls = _ref.prefixCls,
-      prefixCls = _ref$prefixCls === void 0 ? 'rc-textarea' : _ref$prefixCls,
-      classes = _ref.classes,
-      showCount = _ref.showCount,
-      className = _ref.className,
-      style = _ref.style,
-      disabled = _ref.disabled,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    customValue = _ref.value,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onChange = _ref.onChange,
+    allowClear = _ref.allowClear,
+    maxLength = _ref.maxLength,
+    onCompositionStart = _ref.onCompositionStart,
+    onCompositionEnd = _ref.onCompositionEnd,
+    suffix = _ref.suffix,
+    _ref$prefixCls = _ref.prefixCls,
+    prefixCls = _ref$prefixCls === void 0 ? 'rc-textarea' : _ref$prefixCls,
+    classes = _ref.classes,
+    showCount = _ref.showCount,
+    className = _ref.className,
+    style = _ref.style,
+    disabled = _ref.disabled,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useMergedState = (0, _useMergedState3.default)(defaultValue, {
-    value: customValue,
-    defaultValue: defaultValue
-  }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      value = _useMergedState2[0],
-      setValue = _useMergedState2[1];
-
+      value: customValue,
+      defaultValue: defaultValue
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    value = _useMergedState2[0],
+    setValue = _useMergedState2[1];
   var resizableTextAreaRef = (0, _react.useRef)(null);
-
   var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
   var _React$useState3 = _react.default.useState(false),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      compositing = _React$useState4[0],
-      setCompositing = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    compositing = _React$useState4[0],
+    setCompositing = _React$useState4[1];
   var oldCompositionValueRef = _react.default.useRef();
-
   var oldSelectionStartRef = _react.default.useRef(0);
-
   var focus = function focus() {
     resizableTextAreaRef.current.textArea.focus();
   };
-
   (0, _react.useImperativeHandle)(ref, function () {
@@ -121,28 +94,24 @@ return {
     });
-  }, [disabled]); // =========================== Value Update ===========================
+  }, [disabled]);
+
+  // =========================== Value Update ===========================
   // Max length value
-
   var hasMaxLength = Number(maxLength) > 0;
-
   var onInternalCompositionStart = function onInternalCompositionStart(e) {
-    setCompositing(true); // 拼音输入前保存一份旧值
-
-    oldCompositionValueRef.current = value; // 保存旧的光标位置
-
+    setCompositing(true);
+    // 拼音输入前保存一份旧值
+    oldCompositionValueRef.current = value;
+    // 保存旧的光标位置
     oldSelectionStartRef.current = e.currentTarget.selectionStart;
     onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
   };
-
   var onInternalCompositionEnd = function onInternalCompositionEnd(e) {
     setCompositing(false);
     var triggerValue = e.currentTarget.value;
-
     if (hasMaxLength) {
       var _oldCompositionValueR;
-
       var isCursorInEnd = oldSelectionStartRef.current >= maxLength + 1 || oldSelectionStartRef.current === ((_oldCompositionValueR = oldCompositionValueRef.current) === null || _oldCompositionValueR === void 0 ? void 0 : _oldCompositionValueR.length);
       triggerValue = setTriggerValue(isCursorInEnd, oldCompositionValueRef.current, triggerValue, maxLength);
-    } // Patch composition onChange when value changed
-
-
+    }
+    // Patch composition onChange when value changed
     if (triggerValue !== value) {
@@ -152,9 +121,6 @@ setValue(triggerValue);
     }
-
     onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
   };
-
   var handleChange = function handleChange(e) {
     var triggerValue = e.target.value;
-
     if (!compositing && hasMaxLength) {
@@ -165,18 +131,13 @@ // 1. 复制粘贴超过maxlength的情况 2.未超过maxlength的情况
     }
-
     setValue(triggerValue);
     (0, _commonUtils.resolveOnChange)(e.currentTarget, e, onChange, triggerValue);
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     var onPressEnter = rest.onPressEnter,
-        onKeyDown = rest.onKeyDown;
-
+      onKeyDown = rest.onKeyDown;
     if (e.key === 'Enter' && onPressEnter) {
       onPressEnter(e);
     }
-
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
-
   var handleFocus = function handleFocus(e) {
@@ -186,9 +147,8 @@ setFocused(true);
   };
-
   var handleBlur = function handleBlur(e) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }; // ============================== Reset ===============================
+  };
 
-
+  // ============================== Reset ===============================
   var handleReset = function handleReset(e) {
@@ -199,5 +159,3 @@ setValue('');
   };
-
   var val = (0, _commonUtils.fixControlledValue)(value);
-
   if (!compositing && hasMaxLength && (customValue === null || customValue === undefined)) {
@@ -207,3 +165,19 @@ // fix #27612 将value转为数组进行截取，解决 '😂'.length === 2 等emoji表情导致的截取乱码的问题
   }
-
+  var suffixNode = suffix;
+  var dataCount;
+  if (showCount) {
+    var valueLength = (0, _toConsumableArray2.default)(val).length;
+    if ((0, _typeof2.default)(showCount) === 'object') {
+      dataCount = showCount.formatter({
+        value: val,
+        count: valueLength,
+        maxLength: maxLength
+      });
+    } else {
+      dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(maxLength) : '');
+    }
+    suffixNode = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, suffixNode, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-data-count"), classes === null || classes === void 0 ? void 0 : classes.count)
+    }, dataCount));
+  }
   var textarea = /*#__PURE__*/_react.default.createElement(_rcInput.BaseInput, {
@@ -213,6 +187,6 @@ value: val,
     handleReset: handleReset,
-    suffix: suffix,
+    suffix: suffixNode,
     prefixCls: prefixCls,
     classes: {
-      affixWrapper: classes === null || classes === void 0 ? void 0 : classes.affixWrapper
+      affixWrapper: (0, _classnames.default)(classes === null || classes === void 0 ? void 0 : classes.affixWrapper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-show-count"), showCount), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-textarea-allow-clear"), allowClear), _classNames))
     },
@@ -225,2 +199,7 @@ disabled: disabled,
     },
+    dataAttrs: {
+      affixWrapper: {
+        'data-count': typeof dataCount === 'string' ? dataCount : undefined
+      }
+    },
     inputElement: /*#__PURE__*/_react.default.createElement(_ResizableTextArea.default, (0, _extends2.default)({}, rest, {
@@ -240,31 +219,5 @@ onKeyDown: handleKeyDown,
   });
-
-  if (showCount) {
-    var valueLength = (0, _toConsumableArray2.default)(val).length;
-    var dataCount;
-
-    if ((0, _typeof2.default)(showCount) === 'object') {
-      dataCount = showCount.formatter({
-        value: val,
-        count: valueLength,
-        maxLength: maxLength
-      });
-    } else {
-      dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(maxLength) : '');
-    }
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      hidden: rest.hidden,
-      className: (0, _classnames.default)("".concat(prefixCls, "-show-count"), className, classes === null || classes === void 0 ? void 0 : classes.countWrapper),
-      style: style,
-      "data-count": dataCount
-    }, textarea, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-data-count")
-    }, dataCount));
-  }
-
   return textarea;
 });
-
 var _default = TextArea;
 exports.default = _default;

package.json

 {
   "name": "rc-textarea",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Pretty Textarea react component used in used in ant.design",
@@ -48,3 +48,3 @@ "keywords": [
     "classnames": "^2.2.1",
-    "rc-input": "^0.2.1",
+    "rc-input": "~1.0.0",
     "rc-resize-observer": "^1.0.0",
@@ -51,0 +51,0 @@ "rc-util": "^5.27.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59603

increased by1.07%

Lines of code

1172

increased by4.64%

Dependency changes

• + Addedrc-input@1.0.4(transitive)

• - Removedrc-input@0.2.2(transitive)

• Updatedrc-input@~1.0.0