feat: Format support more ability (#338)

Author: zombieJ

docs/examples/formatter.tsx

@@ -84,13 +84,18 @@ class App extends React.Component {
             aria-label="Controlled number input demonstrating a custom format"
             value={this.state.value}
             onChange={(value) => {
-              console.log(value);
+              // console.log(value);
               this.setState({ value });
             }}
-            formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+            formatter={(value, { userTyping, input }) => {
+              if (userTyping) {
+                return input;
+              }
+              return `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            }}
           />
 
-          <InputNumber
+          <InputNumber<string | number>
             aria-label="Controlled number input demonstrating a custom format"
             value={this.state.value}
             onChange={(value) => {

src/InputNumber.tsx

@@ -51,7 +51,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   /** Parse display value to validate number */
   parser?: (displayValue: string | undefined) => T;
   /** Transform `value` to display value show in input */
-  formatter?: (value: T | undefined) => string;
+  formatter?: (value: T | undefined, info: { userTyping: boolean; input: string }) => string;
   /** Syntactic sugar of `formatter`. Config precision of display. */
   precision?: number;
   /** Syntactic sugar of `formatter`. Config decimal separator of display. */
@@ -170,10 +170,11 @@ const InputNumber = React.forwardRef(
     );
 
     // >>> Formatter
+    const inputValueRef = React.useRef<string | number>('');
     const mergedFormatter = React.useCallback(
       (number: string, userTyping: boolean) => {
         if (formatter) {
-          return formatter(number);
+          return formatter(number, { userTyping, input: String(inputValueRef.current) });
         }
 
         let str = typeof number === 'number' ? num2str(number) : number;
@@ -212,6 +213,7 @@ const InputNumber = React.forwardRef(
       }
       return mergedFormatter(decimalValue.toString(), false);
     });
+    inputValueRef.current = inputValue;
 
     // Should always be string
     function setInputValue(newValue: DecimalClass, userTyping: boolean) {
@@ -469,7 +471,7 @@ const InputNumber = React.forwardRef(
       // But let it go if user set `formatter`
       if (newValue.isNaN() || !userTypingRef.current || formatter) {
         // Update value as effect
-        setInputValue(newValue, false);
+        setInputValue(newValue, userTypingRef.current);
       }
     }, [value]);
 

tests/formatter.test.tsx

@@ -70,4 +70,34 @@ describe('InputNumber.Formatter', () => {
     expect(wrapper.getInputValue()).toEqual('$ 6 boeing 737');
     expect(onChange).toHaveBeenLastCalledWith(6);
   });
+
+  it('control not block user input', () => {
+    const Demo = () => {
+      const [value, setValue] = React.useState<number>(null);
+
+      return (
+        <InputNumber<number>
+          value={value}
+          onChange={setValue}
+          formatter={(num, info) => {
+            if (info.userTyping) {
+              return info.input;
+            }
+
+            return String(num);
+          }}
+          parser={(num) => Number(num)}
+        />
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+
+    wrapper.changeValue('-');
+    wrapper.changeValue('-0');
+    expect(wrapper.findInput().props().value).toEqual('-0');
+
+    wrapper.findInput().simulate('blur');
+    expect(wrapper.findInput().props().value).toEqual('0');
+  });
 });