refactor: refactor data-count dom (#37)

Author: MadCcc

package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.1",
-    "rc-input": "^0.2.1",
+    "rc-input": "~1.0.0",
     "rc-resize-observer": "^1.0.0",
     "rc-util": "^5.27.0"
   },

src/TextArea.tsx

@@ -186,23 +186,55 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       val = fixEmojiLength(val, maxLength!);
     }
 
+    let suffixNode = suffix;
+    let dataCount: ReactNode;
+    if (showCount) {
+      const valueLength = [...val].length;
+
+      if (typeof showCount === 'object') {
+        dataCount = showCount.formatter({
+          value: val,
+          count: valueLength,
+          maxLength,
+        });
+      } else {
+        dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
+      }
+
+      suffixNode = (
+        <>
+          {suffixNode}
+          <span
+            className={classNames(`${prefixCls}-data-count`, classes?.count)}
+          >
+            {dataCount}
+          </span>
+        </>
+      );
+    }
+
     const textarea = (
       <BaseInput
         value={val}
         allowClear={allowClear}
         handleReset={handleReset}
-        suffix={suffix}
+        suffix={suffixNode}
         prefixCls={prefixCls}
         classes={{
-          affixWrapper: classNames(
-            classes?.affixWrapper,
-            allowClear ? `${prefixCls}-textarea-allow-clear` : '',
-          ),
+          affixWrapper: classNames(classes?.affixWrapper, {
+            [`${prefixCls}-show-count`]: showCount,
+            [`${prefixCls}-textarea-allow-clear`]: allowClear,
+          }),
         }}
         disabled={disabled}
         focused={focused}
         style={style}
         inputStyle={{ resize: style?.resize }}
+        dataAttrs={{
+          affixWrapper: {
+            'data-count': typeof dataCount === 'string' ? dataCount : undefined,
+          },
+        }}
         inputElement={
           <ResizableTextArea
             {...rest}
@@ -225,37 +257,6 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       />
     );
 
-    if (showCount) {
-      const valueLength = [...val].length;
-
-      let dataCount: ReactNode;
-      if (typeof showCount === 'object') {
-        dataCount = showCount.formatter({
-          value: val,
-          count: valueLength,
-          maxLength,
-        });
-      } else {
-        dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
-      }
-
-      return (
-        <div
-          hidden={rest.hidden}
-          className={classNames(
-            `${prefixCls}-show-count`,
-            className,
-            classes?.countWrapper,
-          )}
-          style={style}
-          data-count={dataCount}
-        >
-          {textarea}
-          <span className={`${prefixCls}-data-count`}>{dataCount}</span>
-        </div>
-      );
-    }
-
     return textarea;
   },
 );

src/interface.ts

@@ -26,6 +26,7 @@ export type TextAreaProps = Omit<HTMLTextareaProps, 'onResize'> & {
     textarea?: string;
     countWrapper?: string;
     affixWrapper?: string;
+    count?: string;
   };
 } & Pick<BaseInputProps, 'allowClear' | 'suffix'>;