refactor: InputNumber semantic refactor (#726)

* refactor: simplify dom

* test: fix test case

* chore: fix ts def

* chore: clean up

* chore: use utoo

* chore: clean up

* chore: clean up

* chore: rm useless deps

* chore: fix input

* test: clean up

Author: zombieJ

assets/index.less

@@ -1,7 +1,8 @@
 @inputNumberPrefixCls: rc-input-number;
 
 .@{inputNumberPrefixCls} {
-  display: inline-block;
+  display: inline-flex;
+  flex-wrap: nowrap;
   height: 26px;
   margin: 0;
   padding: 0;
@@ -22,7 +23,7 @@
     }
   }
 
-  &-handler {
+  &-action {
     display: block;
     height: 12px;
     overflow: hidden;
@@ -35,8 +36,8 @@
     }
   }
 
-  &-handler-up-inner,
-  &-handler-down-inner {
+  &-action-up-inner,
+  &-action-down-inner {
     color: #666666;
     -webkit-user-select: none;
     user-select: none;
@@ -45,26 +46,21 @@
   &:hover {
     border-color: #1890ff;
 
-    .@{inputNumberPrefixCls}-handler-up,
-    .@{inputNumberPrefixCls}-handler-wrap {
+    .@{inputNumberPrefixCls}-action-up,
+    .@{inputNumberPrefixCls}-actions {
       border-color: #1890ff;
     }
   }
 
   &-disabled:hover {
     border-color: #d9d9d9;
 
-    .@{inputNumberPrefixCls}-handler-up,
-    .@{inputNumberPrefixCls}-handler-wrap {
+    .@{inputNumberPrefixCls}-action-up,
+    .@{inputNumberPrefixCls}-actions {
       border-color: #d9d9d9;
     }
   }
 
-  &-input-wrap {
-    height: 100%;
-    overflow: hidden;
-  }
-
   &-input {
     width: 100%;
     height: 100%;
@@ -80,15 +76,14 @@
     -moz-appearance: textfield;
   }
 
-  &-handler-wrap {
-    float: right;
+  &-actions {
     width: 20px;
     height: 100%;
     border-left: 1px solid #d9d9d9;
     transition: all 0.3s;
   }
 
-  &-handler-up {
+  &-action-up {
     padding-top: 1px;
     border-bottom: 1px solid #d9d9d9;
     transition: all 0.3s;
@@ -100,7 +95,7 @@
     }
   }
 
-  &-handler-down {
+  &-action-down {
     transition: all 0.3s;
 
     &-inner {
@@ -118,8 +113,8 @@
     }
   }
 
-  &-handler-down-disabled,
-  &-handler-up-disabled {
+  &-action-down-disabled,
+  &-action-up-disabled {
     .handler-disabled();
   }
 
@@ -129,7 +124,7 @@
       cursor: not-allowed;
       opacity: 0.72;
     }
-    .@{inputNumberPrefixCls}-handler {
+    .@{inputNumberPrefixCls}-action {
       .handler-disabled();
     }
   }
@@ -139,17 +134,17 @@
     align-items: center;
   }
 
-  &-mode-spinner &-handler {
+  &-mode-spinner &-action {
     flex: 0 0 20px;
-    line-height: 26px;
     height: 100%;
+    line-height: 26px;
   }
 
-  &-mode-spinner &-handler-up {
+  &-mode-spinner &-action-up {
     border-bottom: 0;
     border-left: 1px solid #d9d9d9;
   }
-  &-mode-spinner &-handler-down {
+  &-mode-spinner &-action-down {
     border-top: 0;
     border-right: 1px solid #d9d9d9;
   }

docs/demo/prefix-suffix.tsx

@@ -0,0 +1,25 @@
+/* eslint no-console:0 */
+import InputNumber from '@rc-component/input-number';
+import React from 'react';
+import '../../assets/index.less';
+
+export default () => {
+  const [value, setValue] = React.useState<string | number>(100);
+
+  const onChange = (val: number) => {
+    console.log('onChange:', val, typeof val);
+    setValue(val);
+  };
+
+  return (
+    <div style={{ margin: 10 }}>
+      <InputNumber
+        style={{ width: 200 }}
+        value={value}
+        onChange={onChange}
+        prefix="¥"
+        suffix="RMB"
+      />
+    </div>
+  );
+};

docs/example.md

@@ -9,6 +9,10 @@ nav:
 
 <code src="./demo/simple.tsx"></code>
 
+## prefix-suffix
+
+<code src="./demo/prefix-suffix.tsx"></code>
+
 ## combination-key-format
 
 <code src="./demo/combination-key-format.tsx"></code>

package.json

@@ -45,9 +45,8 @@
     ]
   },
   "dependencies": {
-    "@rc-component/input": "~1.1.0",
     "@rc-component/mini-decimal": "^1.0.1",
-    "@rc-component/util": "^1.2.0",
+    "@rc-component/util": "^1.4.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {