feat: add value parameter to textarea showCount.formatter (#36793)

components/input/TextArea.tsx

@@ -17,7 +17,7 @@ import type { InputFocusOptions } from './Input';
 import { fixControlledValue, resolveOnChange, triggerFocus } from './Input';
 
 interface ShowCountProps {
-  formatter: (args: { count: number; maxLength?: number }) => string;
+  formatter: (args: { value: string; count: number; maxLength?: number }) => string;
 }
 
 function fixEmojiLength(value: string, maxLength: number) {
@@ -233,7 +233,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
 
       let dataCount = '';
       if (typeof showCount === 'object') {
-        dataCount = showCount.formatter({ count: valueLength, maxLength });
+        dataCount = showCount.formatter({ value: val, count: valueLength, maxLength });
       } else {
         dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
       }

components/input/__tests__/index.test.tsx

@@ -272,12 +272,14 @@ describe('should support showCount', () => {
     const { container } = render(
       <Input
         maxLength={5}
-        showCount={{ formatter: ({ count, maxLength }) => `${count}, ${maxLength}` }}
+        showCount={{
+          formatter: ({ value, count, maxLength }) => `${value}, ${count}, ${maxLength}`,
+        }}
         value="12345"
       />,
     );
     expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
-    expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('5, 5');
+    expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('12345, 5, 5');
   });
 });
 

components/input/__tests__/textarea.test.js

@@ -304,13 +304,15 @@ describe('TextArea', () => {
       const { container } = render(
         <TextArea
           maxLength={5}
-          showCount={{ formatter: ({ count, maxLength }) => `${count}, ${maxLength}` }}
+          showCount={{
+            formatter: ({ value, count, maxLength }) => `${value}, ${count}, ${maxLength}`,
+          }}
           value="12345"
         />,
       );
       expect(container.querySelector('textarea').value).toBe('12345');
       expect(container.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
-        '5, 5',
+        '12345, 5, 5',
       );
     });
   });

components/input/index.en-US.md

@@ -26,7 +26,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 | disabled | Whether the input is disabled | boolean | false |  |
 | id | The ID for input | string | - |  |
 | maxLength | The max length | number | - |  |
-| showCount | Whether show text count | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 |
+| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
 | prefix | The prefix icon for the Input | ReactNode | - |  |
 | size | The size of the input box. Note: in the context of a form, the `middle` size is used | `large` \| `middle` \| `small` | - |  |
@@ -49,7 +49,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 \| { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
+| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.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

@@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
 | disabled | 是否禁用状态，默认为 false | boolean | false |  |
 | id | 输入框的 id | string | - |  |
 | maxLength | 最大长度 | number | - |  |
-| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 |
+| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | prefix | 带有前缀图标的 input | ReactNode | - |  |
 | size | 控件大小。注：标准表单内的输入框大小限制为 `middle` | `large` \| `middle` \| `small` | - |  |
@@ -50,7 +50,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
 | bordered | 是否有边框 | boolean | true | 4.5.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | maxLength | 内容最大长度 | number | - | 4.7.0 |
-| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
+| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
 | value | 输入框内容 | string | - |  |
 | onPressEnter | 按下回车的回调 | function(e) | - |  |
 | onResize | resize 回调 | function({ width, height }) | - |  |

package.json

@@ -132,7 +132,7 @@
     "rc-dropdown": "~4.0.0",
     "rc-field-form": "~1.27.0",
     "rc-image": "~5.7.0",
-    "rc-input": "~0.0.1-alpha.5",
+    "rc-input": "~0.1.2",
     "rc-input-number": "~7.3.5",
     "rc-mentions": "~1.9.0",
     "rc-menu": "~9.6.0",