feat: add showCount.formatter for TextArea (#28145)

* feat: add countFormatter for TextArea

closing #28105

* test: add unit test

* refactor: update api

* docs: fix api docs

components/input/TextArea.tsx

@@ -9,10 +9,14 @@ import { ConfigContext } from '../config-provider';
 import { fixControlledValue, resolveOnChange } from './Input';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 
+interface ShowCountProps {
+  formatter: (args: { count: number; maxLength?: number }) => string;
+}
+
 export interface TextAreaProps extends RcTextAreaProps {
   allowClear?: boolean;
   bordered?: boolean;
-  showCount?: boolean;
+  showCount?: boolean | ShowCountProps;
   maxLength?: number;
   size?: SizeType;
 }
@@ -117,7 +121,13 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     // Only show text area wrapper when needed
     if (showCount) {
       const valueLength = [...val].length;
-      const dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
+
+      let dataCount = '';
+      if (typeof showCount === 'object') {
+        dataCount = showCount.formatter({ count: valueLength, maxLength });
+      } else {
+        dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
+      }
 
       return (
         <div

components/input/__tests__/textarea.test.js

@@ -165,6 +165,19 @@ describe('TextArea', () => {
       expect(wrapper.find('.ant-input').hasClass('bamboo')).toBeFalsy();
       expect(wrapper.find('.ant-input').props().style.background).toBeFalsy();
     });
+
+    it('count formatter', () => {
+      const wrapper = mount(
+        <TextArea
+          maxLength={5}
+          showCount={{ formatter: ({ count, maxLength }) => `${count}, ${maxLength}` }}
+          value="12345678"
+        />,
+      );
+      const textarea = wrapper.find('.ant-input-textarea');
+      expect(wrapper.find('textarea').prop('value')).toBe('12345');
+      expect(textarea.prop('data-count')).toBe('5, 5');
+    });
   });
 
   it('should support size', async () => {

components/input/index.en-US.md

@@ -47,7 +47,7 @@ The rest of the props of Input are exactly the same as the original [input](http
 | bordered | Whether has border style | boolean | true | 4.5.0 |
 | defaultValue | The initial input content | string | - |  |
 | maxLength | The max length | number | - | 4.7.0 |
-| showCount | Whether show text count | boolean | false | 4.7.0 |
+| showCount | Whether show text count | boolean \| { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
 | value | The input content value | string | - |  |
 | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |  |
 | onResize | The callback function that is triggered when resize | function({ width, height }) | - |  |

components/input/index.zh-CN.md

@@ -46,9 +46,10 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 | allowClear | 可以点击清除图标删除内容 | boolean | false |  |
 | autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
 | bordered | 是否有边框 | boolean | true | 4.5.0 |
+| countFormatter | 指定字数展示的格式 | (count: number, maxLength?: number) => string | - | 4.10.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | maxLength | 内容最大长度 | number | - | 4.7.0 |
-| showCount | 是否展示字数 | boolean | false | 4.7.0 |
+| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
 | value | 输入框内容 | string | - |  |
 | onPressEnter | 按下回车的回调 | function(e) | - |  |
 | onResize | resize 回调 | function({ width, height }) | - |  |