feat: add value parameter to input showCount.formatter (#20)

Author: JarvisArt

README.md

@@ -48,7 +48,7 @@ render(<Input placeholder="input" allowClear />, mountNode);
 | disabled              | boolean                                                                            | false    | Whether the input is disabled                                                                                                                                       |
 | id                    | string                                                                             | -        | The ID for input                                                                                                                                                    |
 | maxLength             | number                                                                             | -        | The max length                                                                                                                                                      |
-| showCount             | boolean &#124; { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false    | Whether show text count                                                                                                                                             |
+| showCount             | boolean &#124; { formatter: ({ value: string, count: number, maxLength?: number }) => ReactNode } | false    | Whether show text count                                                                                                                                             |
 | prefix                | ReactNode                                                                          | -        | The prefix icon for the Input                                                                                                                                       |
 | suffix                | ReactNode                                                                          | -        | The suffix icon for the Input                                                                                                                                       |
 | type                  | string                                                                             | `text`   | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type="textarea"`) |

src/Input.tsx

@@ -156,10 +156,11 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     const hasMaxLength = Number(maxLength) > 0;
 
     if (suffix || showCount) {
-      const valueLength = [...fixControlledValue(value)].length;
+      const val = fixControlledValue(value);
+      const valueLength = [...val].length;
       const dataCount =
         typeof showCount === 'object'
-          ? showCount.formatter({ count: valueLength, maxLength })
+          ? showCount.formatter({ value: val, count: valueLength, maxLength })
           : `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
 
       return (

src/interface.ts

@@ -36,7 +36,11 @@ export interface BaseInputProps extends CommonInputProps {
 }
 
 export interface ShowCountProps {
-  formatter: (args: { count: number; maxLength?: number }) => ReactNode;
+  formatter: (args: {
+    value: string;
+    count: number;
+    maxLength?: number;
+  }) => ReactNode;
 }
 
 export interface InputProps

tests/index.test.tsx

@@ -133,15 +133,16 @@ describe('should support showCount', () => {
         prefixCls="rc-input"
         maxLength={5}
         showCount={{
-          formatter: ({ count, maxLength }) => `${count}, ${maxLength}`,
+          formatter: ({ value, count, maxLength }) =>
+            `${value}, ${count}, ${maxLength}`,
         }}
         value="12345"
       />,
     );
     expect(container.querySelector('input')?.value).toBe('12345');
     expect(
       container.querySelector('.rc-input-show-count-suffix')?.innerHTML,
-    ).toBe('5, 5');
+    ).toBe('12345, 5, 5');
   });
 });