fix(input-number): implement precision prop to fix floating point errors

The precision prop was defined in types but never used. Arithmetic
like 3.14 + 0.1 produced 3.2400000000000002. Now rounds results
to the specified decimal precision.

Author: wangdicoder

components/input-number/demo/precision.md

@@ -0,0 +1,18 @@
+<demo>
+
+### Precision
+
+Set decimal precision with `precision`, and use `controls` to always show step buttons.
+
+```jsx live
+() => {
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <InputNumber defaultValue={3.14} precision={2} step={0.1} min={0} max={10} controls />
+      <InputNumber defaultValue={100} precision={0} step={10} min={0} max={1000} controls />
+    </div>
+  );
+}
+```
+
+</demo>

components/input-number/index.md

@@ -1,6 +1,7 @@
 import Basic from './demo/basic.md'
 import Size from './demo/size.md'
 import Disabled from './demo/disabled.md'
+import Precision from './demo/precision.md'
 
 # Input Number
 
@@ -25,6 +26,7 @@ import { InputNumber } from 'tiny-ui';
   </column>
   <column>
     <Size/>
+    <Precision/>
   </column>
 </layout>
 

components/input-number/index.tsx

@@ -13,12 +13,18 @@ const isValid = (val: string | number): boolean => {
   return !isNaN(+val);
 };
 
+const toPrecision = (val: number, precision?: number): number => {
+  if (precision === undefined) return val;
+  return parseFloat(val.toFixed(precision));
+};
+
 const InputNumber = React.forwardRef<HTMLDivElement, InputNumberProps>((props, ref) => {
   const {
     size = 'md',
     disabled = false,
     defaultValue = 0,
     step = 1,
+    precision,
     controls = false,
     min = Number.NEGATIVE_INFINITY,
     max = Number.POSITIVE_INFINITY,
@@ -39,15 +45,16 @@ const InputNumber = React.forwardRef<HTMLDivElement, InputNumberProps>((props, r
   );
 
   const inputOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const val = Number(e.target.value.trim());
+    const raw = Number(e.target.value.trim());
+    const val = toPrecision(raw, precision);
     !('value' in props) && setValue(val);
     onChange && isValid(val) && onChange(val, e);
   };
 
   const plusOnClick = (e: MouseEvent<HTMLSpanElement>): void => {
     e.stopPropagation();
     if (!disabled && isValid(step)) {
-      const val = +value + +step;
+      const val = toPrecision(+value + +step, precision);
       if (val <= max) {
         !('value' in props) && setValue(val);
         onChange && onChange(val, e);
@@ -58,7 +65,7 @@ const InputNumber = React.forwardRef<HTMLDivElement, InputNumberProps>((props, r
   const minusOnClick = (e: MouseEvent<HTMLSpanElement>): void => {
     e.stopPropagation();
     if (!disabled && isValid(step)) {
-      const val = +value - +step;
+      const val = toPrecision(+value - +step, precision);
       if (val >= min) {
         !('value' in props) && setValue(val);
         onChange && onChange(val, e);
@@ -75,7 +82,7 @@ const InputNumber = React.forwardRef<HTMLDivElement, InputNumberProps>((props, r
       <input
         autoComplete="off"
         disabled={disabled}
-        value={value}
+        value={precision !== undefined ? value.toFixed(precision) : value}
         type="number"
         className={`${prefixCls}__input`}
         max={max}