From d7814743bf1e57bdb741c446b5e1955c10e741f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E6=B3=93?= Date: Fri, 15 Apr 2022 14:21:58 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E7=BB=99numberInput=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=A2=9E=E5=8A=A0dynamicDecimal=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E7=94=A8=E6=88=B7=E4=BF=9D=E7=95=99?= =?UTF-8?q?=E5=AE=8C=E6=95=B4=E7=9A=84=E5=B0=8F=E6=95=B0=E4=BD=8D=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../zent/src/form/demos/2.builtin-field.md | 11 ++++++++++ .../zent/src/number-input/NumberInput.tsx | 20 +++++++++++++++---- .../zent/src/number-input/README_en-US.md | 1 + .../zent/src/number-input/README_zh-CN.md | 1 + packages/zent/src/number-input/decimal.ts | 19 ++++++++++++++++-- 5 files changed, 46 insertions(+), 6 deletions(-) diff --git a/packages/zent/src/form/demos/2.builtin-field.md b/packages/zent/src/form/demos/2.builtin-field.md index 5e71de947c..30f850bf97 100644 --- a/packages/zent/src/form/demos/2.builtin-field.md +++ b/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, }} /> + 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; diff --git a/packages/zent/src/number-input/README_en-US.md b/packages/zent/src/number-input/README_en-US.md index a97a7c2d0c..6a01fbf187 100644 --- a/packages/zent/src/number-input/README_en-US.md +++ b/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 | diff --git a/packages/zent/src/number-input/README_zh-CN.md b/packages/zent/src/number-input/README_zh-CN.md index f9d3200a0d..edc1fcdbdf 100644 --- a/packages/zent/src/number-input/README_zh-CN.md +++ b/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` | `''` | | 否 | diff --git a/packages/zent/src/number-input/decimal.ts b/packages/zent/src/number-input/decimal.ts index e4d7625091..de7ba60be9 100644 --- a/packages/zent/src/number-input/decimal.ts +++ b/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, }; From 8df8252b0a9d0df898e657c13a8ca2c12ecdb0d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=B4=E6=B3=93?= Date: Mon, 18 Apr 2022 17:21:45 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E6=94=B9=E6=88=90=E8=AE=A9=20decim?= =?UTF-8?q?al=20=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81=20-1=E6=9D=A5?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=8A=A8=E6=80=81=E5=B0=8F=E6=95=B0=E4=BD=8D?= =?UTF-8?q?=EF=BC=9B=E5=9C=A8NumberInput=E4=B8=AD=E5=A2=9E=E5=8A=A0demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../zent/src/form/demos/2.builtin-field.md | 2 +- .../zent/src/number-input/NumberInput.tsx | 20 ++++-------------- .../zent/src/number-input/README_en-US.md | 4 ++++ .../zent/src/number-input/README_zh-CN.md | 4 ++++ packages/zent/src/number-input/decimal.ts | 10 ++++++--- .../number-input/demos/8.dynamic-decimal.md | 21 +++++++++++++++++++ 6 files changed, 41 insertions(+), 20 deletions(-) create mode 100644 packages/zent/src/number-input/demos/8.dynamic-decimal.md diff --git a/packages/zent/src/form/demos/2.builtin-field.md b/packages/zent/src/form/demos/2.builtin-field.md index 30f850bf97..6f2ca7518a 100644 --- a/packages/zent/src/form/demos/2.builtin-field.md +++ b/packages/zent/src/form/demos/2.builtin-field.md @@ -147,7 +147,7 @@ function Component() { defaultValue={67.23} props={{ integer: false, - dynamicDecimal: true, + decimal: -1 }} /> void; decimal?: number; - dynamicDecimal?: boolean; onInput?: (value: string) => void; min?: number | string; } @@ -122,14 +121,7 @@ function getStateFromProps( max, delta: Decimals.getDelta(props.decimal, props.step), ...(updateValueInState - ? Decimals.normalizeValue( - props.value, - min, - max, - props.decimal, - false, - props.dynamicDecimal - ) + ? Decimals.normalizeValue(props.value, min, max, props.decimal) : {}), }; } @@ -144,7 +136,6 @@ export class NumberInput extends Component< type: 'number', decimal: 0, size: 'normal', - dynamicDecimal: false, }; static contextType = DisabledContext; @@ -227,15 +218,14 @@ export class NumberInput extends Component< const { onBlur } = this.props; onBlur?.(e); } else { - const { onChange, decimal, showTooltip, dynamicDecimal } = this.props; + const { onChange, decimal, showTooltip } = this.props; const { input, min, max } = this.state as INumberInputDecimalState; const normalized = Decimals.normalizeValue( input, min, max, decimal, - showTooltip, - dynamicDecimal + showTooltip ); onChange?.(normalized.input); this.setState(normalized, () => { @@ -373,9 +363,7 @@ export class NumberInput extends Component< props.value, nextState.min, nextState.max, - props.decimal, - false, - props.dynamicDecimal + props.decimal ); nextState.value = value; nextState.input = input; diff --git a/packages/zent/src/number-input/README_en-US.md b/packages/zent/src/number-input/README_en-US.md index 6a01fbf187..d0609ce353 100644 --- a/packages/zent/src/number-input/README_en-US.md +++ b/packages/zent/src/number-input/README_en-US.md @@ -42,6 +42,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 +