feat: stringMode (#293)

* fix bigInt parse

* test: more test case

* rm father pre-commit

* input it

* add util

* add validate check

* support parse

* update demo

* back of disabled

* fix decimal parser

* up & down

* up & down limit

* click will also trigger update

* add isInRange check

* not update when in range

* back of number logic

* step clost to range should be in range

* readonly not changable

* keyboard props support

* fix decimal logic

* add empty check

* fix empty revert

* basic presicon support

* fix E

* fix presicon is 0

* blur to format back

* add should validate

* fix isE condition

* use origin isE

* update dwmo

* support onPressEnter

* update decimalSeparater demo

* support parser decimalSeparator

* fix validate number logix

* fix parser

* oor style

* fix update logic & init value logic

* update comment

* fix parser logic

* test for chinese parser

* add compsition support

* support compition

* update logic

* init input-control demo

* update input & change demo

* back of test

* more

* fix origin step parser

* fix add logic

* tmp update input sync logic

* back of formatter

* fix init value parser

* safe i

* adjust input range logic

* fix number type

* fix passed logic

* more test case

* mock support

* more test case

* more test case

* decimal step logic

* more test case of decimal

* add github test

* adjust loop logic

* fix test case

* test driven

* fix test case

* wrap test util

* fix typing logic

* change should check if user typing

* fix format of control

* more github issue

* update onInput update test

* fix onChange logic

* test input changes

* fix initvalue of invalidate

* focus & blur test case

* fix prescision update

* more test case

* add toFixed func

* use toFixed for prescision

* format test case

* replace setup of test

* format & parse test case

* update test case

* fix minDisabled logic

* data & aria & role test

* clean up

* fix test case

* final test case

Author: zombieJ

.eslintrc.js

@@ -1,26 +1,26 @@
-const base = require("@umijs/fabric/dist/eslint");
-
 module.exports = {
-  ...base,
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
   rules: {
-    ...base.rules,
-    "arrow-parens": 0,
-    "react/no-array-index-key": 0,
-    "react/sort-comp": 0,
-    "react/no-access-state-in-setstate": 0,
-    "react/no-string-refs": 0,
-    "react/no-did-update-set-state": 0,
-    "react/no-find-dom-node": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-empty-interface": 0,
-    "@typescript-eslint/no-inferrable-types": 0,
-    "react/require-default-props": 0,
-    "no-confusing-arrow": 0,
-    "no-restricted-globals": 0,
-    "import/no-named-as-default-member": 0,
-    "import/no-extraneous-dependencies": 0,
-    "jsx-a11y/label-has-for": 0,
-    "jsx-a11y/label-has-associated-control": 0,
-    "jsx-a11y/no-autofocus": 0
+    'arrow-parens': 0,
+    'default-case': 0,
+    'react/no-array-index-key': 0,
+    'react/sort-comp': 0,
+    'react/no-access-state-in-setstate': 0,
+    'react/no-string-refs': 0,
+    'react/no-did-update-set-state': 0,
+    'react/no-find-dom-node': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-empty-interface': 0,
+    '@typescript-eslint/no-inferrable-types': 0,
+    '@typescript-eslint/consistent-type-imports': 0,
+    'react/require-default-props': 0,
+    'react-hooks/exhaustive-deps': 0,
+    'no-confusing-arrow': 0,
+    'no-restricted-globals': 0,
+    'import/no-named-as-default-member': 0,
+    'import/no-extraneous-dependencies': 0,
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/no-autofocus': 0,
   },
-};
+};

.fatherrc.js

@@ -1,9 +1,10 @@
 export default {
-  cjs: "babel",
-  esm: { type: "babel", importLibToEs: true },
+  cjs: 'babel',
+  esm: { type: 'babel', importLibToEs: true },
   preCommit: {
-    eslint: true,
-    prettier: true,
+    // Father preCommit is OOD. comment this tmp.
+    // eslint: true,
+    // prettier: true,
   },
   runtimeHelpers: true,
 };

assets/index.less

@@ -1,89 +1,97 @@
 @inputNumberPrefixCls: rc-input-number;
 
 .@{inputNumberPrefixCls} {
+  display: inline-block;
+  height: 26px;
   margin: 0;
   padding: 0;
-  line-height: 26px;
   font-size: 12px;
-  height: 26px;
-  display: inline-block;
+  line-height: 26px;
   vertical-align: middle;
-  border: 1px solid #D9D9D9;
+  border: 1px solid #d9d9d9;
   border-radius: 4px;
-  transition: all .3s;
+  transition: all 0.3s;
 
   &-focused {
     border-color: #1890ff;
-    box-shadow: 0 0 0 2px rgba(24,144,255,.2);
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+  &-out-of-range {
+    input {
+      color: red;
+    }
   }
 
   &-handler {
-    text-align: center;
-    line-height: 12px;
+    display: block;
     height: 12px;
     overflow: hidden;
-    display:block;
+    line-height: 12px;
+    text-align: center;
     touch-action: none;
 
     &-active {
       background: #ddd;
     }
   }
 
-  &-handler-up-inner, &-handler-down-inner {
+  &-handler-up-inner,
+  &-handler-down-inner {
     color: #666666;
-    user-select: none;
     -webkit-user-select: none;
+    user-select: none;
   }
 
   &:hover {
     border-color: #1890ff;
 
-    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+    .@{inputNumberPrefixCls}-handler-up,
+    .@{inputNumberPrefixCls}-handler-wrap {
       border-color: #1890ff;
     }
   }
 
   &-disabled:hover {
     border-color: #d9d9d9;
 
-    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+    .@{inputNumberPrefixCls}-handler-up,
+    .@{inputNumberPrefixCls}-handler-wrap {
       border-color: #d9d9d9;
     }
   }
 
   &-input-wrap {
-    overflow: hidden;
     height: 100%;
+    overflow: hidden;
   }
 
   &-input {
     width: 100%;
-    text-align: center;
-    outline: 0;
-    -moz-appearance: textfield;
-    line-height: 26px;
     height: 100%;
-    transition: all 0.3s ease;
+    padding: 0;
     color: #666666;
+    line-height: 26px;
+    text-align: center;
     border: 0;
     border-radius: 4px;
-    padding: 0;
-    transition: all .3s;
+    outline: 0;
+    transition: all 0.3s ease;
+    transition: all 0.3s;
+    -moz-appearance: textfield;
   }
 
   &-handler-wrap {
     float: right;
-    border-left: 1px solid #D9D9D9;
     width: 20px;
     height: 100%;
-    transition: all .3s;
+    border-left: 1px solid #d9d9d9;
+    transition: all 0.3s;
   }
 
   &-handler-up {
-    border-bottom: 1px solid #D9D9D9;
     padding-top: 1px;
-    transition: all .3s;
+    border-bottom: 1px solid #d9d9d9;
+    transition: all 0.3s;
 
     &-inner {
       &:after {
@@ -93,7 +101,7 @@
   }
 
   &-handler-down {
-    transition: all .3s;
+    transition: all 0.3s;
 
     &-inner {
       &:after {
@@ -103,22 +111,23 @@
   }
 
   .handler-disabled() {
-    opacity: 0.72;
+    opacity: 0.3;
     &:hover {
       color: #999;
       border-color: #d9d9d9;
     }
   }
 
-  &-handler-down-disabled, &-handler-up-disabled {
+  &-handler-down-disabled,
+  &-handler-up-disabled {
     .handler-disabled();
   }
 
   &-disabled {
     .@{inputNumberPrefixCls}-input {
-      opacity: 0.72;
-      cursor: not-allowed;
       background-color: #f3f3f3;
+      cursor: not-allowed;
+      opacity: 0.72;
     }
     .@{inputNumberPrefixCls}-handler {
       .handler-disabled();

docs/demo/input-control.md

@@ -0,0 +1,3 @@
+## input-control
+
+<code src="../examples/input-control.tsx">

docs/examples/combination-key-format.tsx

@@ -10,7 +10,7 @@ class Component extends React.Component {
     value: 50000,
   };
 
-  onChange = value => {
+  onChange = (value) => {
     console.log('onChange:', value);
     this.setState({ value });
   };
@@ -27,24 +27,33 @@ class Component extends React.Component {
     });
   };
 
-  numberWithCommas = x => {
+  numberWithCommas = (x) => {
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
 
-  format = num => {
+  format = (num) => {
     return `$ ${this.numberWithCommas(num)} boeing737`;
   };
 
-  parser = num => {
-    return num
-      .toString()
-      .split(' ')[1]
-      .replace(/,*/g, '');
+  parser = (num: string) => {
+    const cells = num.toString().split(' ');
+    if (!cells[1]) {
+      return num;
+    }
+
+    const parsed = cells[1].replace(/,*/g, '');
+
+    return parsed;
   };
 
   render() {
     return (
       <div style={{ margin: 10 }}>
+        <p>
+          When number is validate in range, keep formatting.
+          Else will flush when blur.
+        </p>
+
         <InputNumber
           aria-label="Number input example that demonstrates combination key format"
           min={-8000}

docs/examples/decimal.tsx

@@ -7,7 +7,7 @@ export default class Demo extends React.Component {
   state = {
     disabled: false,
     readOnly: false,
-    value: 8,
+    value: 99,
   };
 
   onChange = v => {
@@ -32,6 +32,7 @@ export default class Demo extends React.Component {
   render() {
     return (
       <div style={{ margin: 10 }}>
+        <p>Value Range is [-8, 10], initialValue is out of range.</p>
         <InputNumber
           aria-label="Number input example that demonstrates using decimal values"
           min={-8}