feat: 给numberInput组件增加dynamicDecimal属性，支持用户保留完整的小数位数

packages/zent/__tests__/number-input.spec.jsx

@@ -48,6 +48,19 @@ describe('NumberInput', () => {
     expect(wrapper.state('value').cmp(new Decimal(0))).toBe(0);
   });
 
+  it('dynamic decimal point precision', () => {
+    const wrapper = mount(
+      <NumberInput value={2.123} dynamicDecimal={true} integer={false} />
+    );
+    expect(wrapper.state('input')).toBe('2.123');
+    const input = wrapper.find('input');
+    input.simulate('blur');
+    input.instance().value = '4.1';
+    input.simulate('change');
+    input.simulate('blur');
+    expect(wrapper.state('input')).toBe('4.1');
+  });
+
   it('change value within min and max ', () => {
     let wrapper = mount(<NumberInput showStepper value={2} min={0} max={3} />);
     wrapper.find('.zent-number-input-arrowup').simulate('click');

packages/zent/src/form/demos/2.builtin-field.md

@@ -18,6 +18,7 @@ zh-CN:
 	tagText2: 书籍
 	tagText3: 旅行
 	ageText: 年龄
+	weight: 体重
 	colorText: 喜欢的颜色
 	dateRangeText: 身份证有效期
 	dateRangeValidationErrors: 请填写有效期
@@ -50,6 +51,7 @@ en-US:
 	tagText2: Book
 	tagText3: Travel
 	ageText: Age
+	weight: Weight
 	colorText: Favorite color
 	dateRangeText: Validity period
 	dateRangeValidationErrors: Please select the dateRange
@@ -139,6 +141,15 @@ function Component() {
 					showStepper: true,
 				}}
 			/>
+			<FormNumberInputField
+				name="weight"
+				label="{i18n.weight}："
+				defaultValue={67.23}
+				props={{
+					integer: false,
+					dynamicDecimal: true,
+				}}
+			/>
 			<FormColorPickerField
 				name="color"
 				label="{i18n.colorText}："

packages/zent/src/number-input/NumberInput.tsx

@@ -26,6 +26,7 @@ export interface INumberInputDecimalProps extends INumberInputCommonProps {
   value?: string | number;
   onChange?: (value: string) => void;
   decimal?: number;
+  dynamicDecimal?: boolean;
   onInput?: (value: string) => void;
   min?: number | string;
 }
@@ -121,7 +122,14 @@ function getStateFromProps(
       max,
       delta: Decimals.getDelta(props.decimal, props.step),
       ...(updateValueInState
-        ? Decimals.normalizeValue(props.value, min, max, props.decimal)
+        ? Decimals.normalizeValue(
+            props.value,
+            min,
+            max,
+            props.decimal,
+            false,
+            props.dynamicDecimal
+          )
         : {}),
     };
   }
@@ -136,6 +144,7 @@ export class NumberInput extends Component<
     type: 'number',
     decimal: 0,
     size: 'normal',
+    dynamicDecimal: false,
   };
 
   static contextType = DisabledContext;
@@ -218,14 +227,15 @@ export class NumberInput extends Component<
       const { onBlur } = this.props;
       onBlur?.(e);
     } else {
-      const { onChange, decimal, showTooltip } = this.props;
+      const { onChange, decimal, showTooltip, dynamicDecimal } = this.props;
       const { input, min, max } = this.state as INumberInputDecimalState;
       const normalized = Decimals.normalizeValue(
         input,
         min,
         max,
         decimal,
-        showTooltip
+        showTooltip,
+        dynamicDecimal
       );
       onChange?.(normalized.input);
       this.setState(normalized, () => {
@@ -363,7 +373,9 @@ export class NumberInput extends Component<
         props.value,
         nextState.min,
         nextState.max,
-        props.decimal
+        props.decimal,
+        false,
+        props.dynamicDecimal
       );
       nextState.value = value;
       nextState.input = input;

packages/zent/src/number-input/README_en-US.md

@@ -26,6 +26,7 @@ Default value type is string. Under integer mode, value type is number, with def
 | integer     | Integer mode               | `boolean`                              | `false`   |             | No       |
 | decimal     | Decimal                    | `number`                            | `0`     |             | No       |
 | step        | Step used in stepper       | `number`                            |         |             | No       |
+| dynamicDecimal | show decimal as input      |    `boolean`           |  `false`   |        |   No    |
 | min         | Minimum value in the range | `number`                            |         |             | No       |
 | max         | Maximum value in the range | `number`                            |         |             | No       |
 | placeholder | Placeholder text           | `string`                            | `''`    |             | No       |

packages/zent/src/number-input/README_zh-CN.md

@@ -27,6 +27,7 @@ group: 信息录入
 | integer     | 整数模式              | `boolean`                             | `false`   |        | 否       |
 | decimal     | 数值精度              | `number`                            | `0`     |        | 否       |
 | step        | 步进                 | `number`                         | 整数模式为 `1`，小数模式根据精度而定 |  |  否 |
+| dynamicDecimal | 是否完整保存用户输入的小数位数   |    `boolean`           |  `false`   |        |   否    |
 | min         | 数值范围最小值        | `number`                            |         |        | 否       |
 | max         | 数值范围最大值        | `number`                            |         |        | 否       |
 | placeholder | 原生 placeholder 文案 | `string`                            | `''`    |        | 否       |

packages/zent/src/number-input/decimal.ts

@@ -20,6 +20,18 @@ export function getDelta(decimal: number, step?: number): Decimal {
   return new Decimal(1).div(Math.pow(10, decimal));
 }
 
+/**
+ * 取小数点后数字长度
+ * @param decimal
+ * @example (3.12) => 2
+ */
+function getDecimalsLength(decimal: Decimal) {
+  const DecimalsRegexMatch = /\.(\d*)$/.exec(decimal.toString());
+  if (DecimalsRegexMatch) {
+    return DecimalsRegexMatch[1].length;
+  }
+  return 0;
+}
 function fromPotential(v: number | string | undefined): Decimal | null {
   v = String(v);
   if (isDecimal(v)) {
@@ -42,7 +54,8 @@ export function normalizeValue(
   min: Decimal | null,
   max: Decimal | null,
   decimalPlaces: number,
-  showTooltip?: boolean
+  showTooltip?: boolean,
+  dynamicDecimal?: boolean
 ): {
   input: string;
   value: Decimal;
@@ -93,7 +106,9 @@ export function normalizeValue(
   }
   const popState = pop && showTooltip ? { pop } : {};
   return {
-    input: decimal.toFixed(decimalPlaces),
+    input: decimal.toFixed(
+      dynamicDecimal ? getDecimalsLength(decimal) : decimalPlaces
+    ),
     value: decimal,
     ...popState,
   };

packages/zent/src/number-input/demos/2.decimal-point.md

@@ -22,6 +22,7 @@ ReactDOM.render(
 			step={1}
 			placeholder="{i18n.placehoder}"
 		/>
+		<NumberInput value={2.123} dynamicDecimal={true} placeholder="{i18n.placehoder}" integer={false} />
 	</div>,
 	mountNode
 );