Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
11 changes: 11 additions & 0 deletions packages/zent/src/form/demos/2.builtin-field.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ zh-CN:
tagText2: 书籍
tagText3: 旅行
ageText: 年龄
weight: 体重
colorText: 喜欢的颜色
dateRangeText: 身份证有效期
dateRangeValidationErrors: 请填写有效期
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -139,6 +141,15 @@ function Component() {
showStepper: true,
}}
/>
<FormNumberInputField
name="weight"
label="{i18n.weight}:"
defaultValue={67.23}
props={{
integer: false,
decimal: -1
}}
/>
<FormColorPickerField
name="color"
label="{i18n.colorText}:"
Expand Down
4 changes: 4 additions & 0 deletions packages/zent/src/number-input/README_en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ Default value type is string. Under integer mode, value type is number, with def
- In decimal mode with two digits precision after zero, if we type `1.0`, `onInput` gets a value of `'1.0'` but `onChange` get a value of `'1.00'`
- In integer mode, if we type `2.0`, `onInput` gets a value of `'2.0'`, but `onChange` gets a value of `2`. Note the type different.

#### when `decimal` is -1

It represents the number of decimal places to take the number of decimal places actually entered by the user

<style>
.zent-number-input {
width: 200px;
Expand Down
4 changes: 4 additions & 0 deletions packages/zent/src/number-input/README_zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ group: 信息录入
- 小数模式下设置精度为小数点后两位,当输入 `1.0` 的时候,在 `onInput` 中获取的参数是 `'1.0'`,而在 `onChange` 中获取的参数是 `'1.00'`
- 整数模式下,当输入是 `2.00` 时,`onInput` 的参数是 `'2.00'`,但是 `onChange` 的参数是 `2`,注意不仅值不同,类型也是不一样的

#### decimal为-1

表示小数点位数取用户实际输入的小数点位数

<style>
.zent-number-input {
width: 200px;
Expand Down
21 changes: 20 additions & 1 deletion packages/zent/src/number-input/decimal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export function isDecimal(value: string): boolean {
return /^[-+]?\d*\.?\d*$/.test(value);
}

// 表示小数点位数取用户实际输入的小数点位数
const DYNAMIC_DECIMAL_SIGN = -1;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我觉得 Infinity 更合适


export function getDelta(decimal: number, step?: number): Decimal {
if (Number.isFinite(step)) {
return new Decimal(step);
Expand All @@ -20,6 +23,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)) {
Expand Down Expand Up @@ -93,7 +108,11 @@ export function normalizeValue(
}
const popState = pop && showTooltip ? { pop } : {};
return {
input: decimal.toFixed(decimalPlaces),
input: decimal.toFixed(
decimalPlaces === DYNAMIC_DECIMAL_SIGN
? getDecimalsLength(decimal)
: decimalPlaces
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

逻辑收到 getDecimalsLength 里面去

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. 如果觉得有遗漏的地方,需要提出具体哪里遗漏
  2. getDecimalsLength 这个方法,如果只有这个地方用到,我是建议保持现状,职责单一

),
value: decimal,
...popState,
};
Expand Down
21 changes: 21 additions & 0 deletions packages/zent/src/number-input/demos/8.dynamic-decimal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
order: 8
zh-CN:
title: 小数点位数取用户实际输入的小数点位数
placehoder: 请输入数字

en-US:
title: dynamicDecimal
placehoder: please enter number
---

```jsx
import { NumberInput } from 'zent';

ReactDOM.render(
<div>
<NumberInput value={2.13} decimal={-1} placeholder="{i18n.placehoder}" integer={false} />
</div>,
mountNode
);
```