feat: InputNumber support stringMode (#29373)

* add input-number demo

* update snapshot

* update demo

* docs: Update desc

* update doc

* clean up React useLayoutEffect warning

* fix ts definition

* re-trigger

* update rc-uitl version

* bump rc-input-number

* update

* update

* fix ts

* update demo snapshot

* update doc

* update demo
This commit is contained in:
二货机器人 2021-02-22 22:07:19 +08:00 committed by GitHub
parent 15580483ce
commit bec5a08368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 355 additions and 218 deletions

View File

@ -14108,6 +14108,7 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
class="config-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="config-input-number-handler config-input-number-handler-up"
role="button"
@ -14134,6 +14135,7 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="config-input-number-handler config-input-number-handler-down"
role="button"
@ -14164,12 +14166,8 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
class="config-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="config-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -14186,6 +14184,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
class="config-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="config-input-number-handler config-input-number-handler-up"
role="button"
@ -14212,6 +14211,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="config-input-number-handler config-input-number-handler-down"
role="button"
@ -14242,12 +14242,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
class="config-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="config-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -14264,6 +14260,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
class="config-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="config-input-number-handler config-input-number-handler-up"
role="button"
@ -14290,6 +14287,7 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="config-input-number-handler config-input-number-handler-down"
role="button"
@ -14320,12 +14318,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
class="config-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="config-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -14342,6 +14336,7 @@ exports[`ConfigProvider components InputNumber configProvider virtual and dropdo
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -14368,6 +14363,7 @@ exports[`ConfigProvider components InputNumber configProvider virtual and dropdo
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -14398,12 +14394,8 @@ exports[`ConfigProvider components InputNumber configProvider virtual and dropdo
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -14420,6 +14412,7 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -14446,6 +14439,7 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -14476,12 +14470,8 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -14498,6 +14488,7 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
class="prefix-InputNumber-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="prefix-InputNumber-handler prefix-InputNumber-handler-up"
role="button"
@ -14524,6 +14515,7 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="prefix-InputNumber-handler prefix-InputNumber-handler-down"
role="button"
@ -14554,12 +14546,8 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
class="prefix-InputNumber-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="prefix-InputNumber-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""

View File

@ -2640,6 +2640,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -2666,6 +2667,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -2696,13 +2698,9 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
id="nest-messages_user_age"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -4347,6 +4345,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -4373,6 +4372,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -4403,12 +4403,8 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -5243,6 +5239,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -5269,6 +5266,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -5305,8 +5303,6 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
autocomplete="off"
class="ant-input-number-input"
id="validate_other_input-number"
max="10"
min="1"
role="spinbutton"
step="1"
value="3"
@ -7267,6 +7263,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -7293,6 +7290,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -7323,12 +7321,8 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -7675,6 +7669,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -7701,6 +7696,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -7736,8 +7732,6 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
aria-valuenow="11"
autocomplete="off"
class="ant-input-number-input"
max="12"
min="8"
role="spinbutton"
step="1"
value="11"

View File

@ -8,6 +8,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -34,6 +35,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -69,8 +71,6 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
max="10"
min="1"
role="spinbutton"
step="1"
value="3"
@ -87,6 +87,7 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -113,6 +114,7 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -148,8 +150,6 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
max="10"
min="1"
role="spinbutton"
step="1"
value="3"
@ -161,11 +161,13 @@ exports[`renders ./components/input-number/demo/borderless.md correctly 1`] = `
exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
<div
class="ant-input-number"
style="width:200px"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -192,6 +194,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -224,13 +227,12 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
<input
aria-valuemax="10"
aria-valuemin="0"
aria-valuenow="1"
autocomplete="off"
class="ant-input-number-input"
max="10"
min="0"
role="spinbutton"
step="0.1"
value=""
step="0.00000000000001"
value="1.00000000000000"
/>
</div>
</div>
@ -245,9 +247,9 @@ Array [
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="true"
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
@ -272,9 +274,9 @@ Array [
</span>
</span>
<span
aria-disabled="true"
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
@ -309,8 +311,6 @@ Array [
autocomplete="off"
class="ant-input-number-input"
disabled=""
max="10"
min="1"
role="spinbutton"
step="1"
value="3"
@ -341,6 +341,7 @@ Array [
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -367,6 +368,7 @@ Array [
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -397,13 +399,9 @@ Array [
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
aria-valuenow="1000"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value="$ 1,000"
@ -444,6 +442,7 @@ Array [
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -479,8 +478,6 @@ Array [
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
max="100"
min="0"
role="spinbutton"
step="1"
value="100%"
@ -491,96 +488,214 @@ Array [
`;
exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-input-number"
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-input-number-handler-wrap"
class="ant-input-number"
>
<span
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
<div
class="ant-input-number-handler-wrap"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
</span>
<span
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="10"
aria-valuemin="1"
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="3"
/>
</div>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="10"
aria-valuemin="1"
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
max="10"
min="1"
role="spinbutton"
step="1"
value="3"
/>
</div>
</div>,
</div>
<div
style="margin-top:20px"
class="ant-space-item"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
>
<span
class="ant-checkbox ant-checkbox-checked"
>
<input
checked=""
class="ant-checkbox-input"
type="checkbox"
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
Toggle keyboard
</span>
</label>
</div>
</div>
`;
exports[`renders ./components/input-number/demo/out-of-range.md correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-input-number ant-input-number-out-of-range"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="true"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="10"
aria-valuemin="1"
aria-valuenow="99"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="99"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Toggle keyboard
Reset
</span>
</button>
</div>,
]
</div>
</div>
`;
exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
@ -594,6 +709,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -620,6 +736,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -655,8 +772,6 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
max="100000"
min="1"
role="spinbutton"
step="1"
value="3"
@ -670,6 +785,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -696,6 +812,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -731,8 +848,6 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
max="100000"
min="1"
role="spinbutton"
step="1"
value="3"
@ -746,6 +861,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -772,6 +888,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -807,8 +924,6 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
max="100000"
min="1"
role="spinbutton"
step="1"
value="3"

View File

@ -8,6 +8,7 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -34,6 +35,7 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -64,12 +66,8 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""

View File

@ -15,7 +15,8 @@ describe('InputNumber', () => {
const onChange = jest.fn();
const wrapper = mount(<InputNumber defaultValue="1" onChange={onChange} />);
wrapper.find('input').simulate('change', { target: { value: '' } });
expect(onChange).toHaveBeenLastCalledWith('');
expect(onChange).not.toHaveBeenCalled();
wrapper.find('input').simulate('blur');
expect(onChange).toHaveBeenLastCalledWith(null);
});

View File

@ -1,24 +1,35 @@
---
order: 3
title:
zh-CN: 小数
en-US: Decimals
zh-CN: 高精度小数
en-US: High precision decimals
---
## zh-CN
和原生的数字输入框一样value 的精度由 step 的小数位数决定
通过 `stringMode` 开启高精度小数支持,`onChange` 事件将返回 string 类型。对于旧版游览器,你需要 BigInt polyfill
## en-US
A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop.
Use `stringMode` to support high precision decimals support. `onChange` will return string value instead. You need polyfill of BigInt if browser not support.
```jsx
```tsx
import { InputNumber } from 'antd';
function onChange(value) {
function onChange(value: string) {
console.log('changed', value);
}
ReactDOM.render(<InputNumber min={0} max={10} step={0.1} onChange={onChange} />, mountNode);
ReactDOM.render(
<InputNumber<string>
style={{ width: 200 }}
defaultValue="1"
min="0"
max="10"
step="0.00000000000001"
onChange={onChange}
stringMode
/>,
mountNode,
);
```

View File

@ -13,33 +13,25 @@ title:
Control keyboard behavior by `keyboard`.
```jsx
import { InputNumber, Button } from 'antd';
```tsx
import { InputNumber, Checkbox, Space } from 'antd';
class App extends React.Component {
state = {
keyboard: true,
};
toggle = () => {
this.setState({
keyboard: !this.state.keyboard,
});
};
render() {
return (
<>
<InputNumber min={1} max={10} keyboard={this.state.keyboard} defaultValue={3} />
<div style={{ marginTop: 20 }}>
<Button onClick={this.toggle} type="primary">
Toggle keyboard
</Button>
</div>
</>
);
}
}
const App = () => {
const [keyboard, setKeyboard] = React.useState(true);
return (
<Space>
<InputNumber min={1} max={10} keyboard={keyboard} defaultValue={3} />
<Checkbox
onChange={() => {
setKeyboard(!keyboard);
}}
checked={keyboard}
>
Toggle keyboard
</Checkbox>
</Space>
);
};
ReactDOM.render(<App />, mountNode);
```

View File

@ -0,0 +1,38 @@
---
order: 6
title:
zh-CN: 超出边界
en-US: Out of range
---
## zh-CN
当通过受控将 `value` 超出边界时,提供警告样式。
## en-US
Show warning style when `value` is out of range by control.
```tsx
import { InputNumber, Button, Space } from 'antd';
const Demo = () => {
const [value, setValue] = React.useState<string | number>('99');
return (
<Space>
<InputNumber min={1} max={10} value={value} onChange={setValue} />
<Button
type="primary"
onClick={() => {
setValue(99);
}}
>
Reset
</Button>
</Space>
);
};
ReactDOM.render(<Demo />, mountNode);
```

View File

@ -29,6 +29,7 @@ When a numeric value needs to be provided.
| readOnly | If readonly the input | boolean | false | - |
| size | The height of input box | `large` \| `middle` \| `small` | - | - |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \| string | 1 | - |
| stringMode | Set value as string to support high precision decimals. Will return string value by `onChange` | boolean | false | 4.13.0 |
| value | The current value | number | - | - |
| onChange | The callback triggered when the value is changed | function(value: number \| string \| null) | - | - |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
@ -44,3 +45,13 @@ When a numeric value needs to be provided.
## Notes
Per issues [#21158](https://github.com/ant-design/ant-design/issues/21158), [#17344](https://github.com/ant-design/ant-design/issues/17344), [#9421](https://github.com/ant-design/ant-design/issues/9421), and [documentation about inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs), it appears this community does not support native inclusion of the `type="number"` in the `<Input />` attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.
## FAQ
### Why `value` can exceed `min` or `max` in control?
Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.
### Why dynamic change `min` or `max` which makes `value` out of range will not trigger `onChange`?
`onChange` is user trigger event. Auto trigger will makes form lib can not detect data modify source.

View File

@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import RcInputNumber from 'rc-input-number';
import RcInputNumber, { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
import UpOutlined from '@ant-design/icons/UpOutlined';
import DownOutlined from '@ant-design/icons/DownOutlined';
@ -8,37 +8,16 @@ import { ConfigContext } from '../config-provider';
import { Omit } from '../_util/type';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
// omitting this attrs because they conflicts with the ones defined in InputNumberProps
export type OmitAttrs = 'defaultValue' | 'onChange' | 'size';
type ValueType = string | number;
export interface InputNumberProps
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OmitAttrs> {
export interface InputNumberProps<T extends ValueType = ValueType>
extends Omit<RcInputNumberProps<T>, 'size'> {
prefixCls?: string;
min?: number;
max?: number;
value?: number;
step?: number | string;
defaultValue?: number;
tabIndex?: number;
onChange?: (value: number | string | undefined | null) => void;
disabled?: boolean;
readOnly?: boolean;
size?: SizeType;
bordered?: boolean;
formatter?: (value: number | string | undefined) => string;
parser?: (displayValue: string | undefined) => number | string;
decimalSeparator?: string;
placeholder?: string;
style?: React.CSSProperties;
className?: string;
name?: string;
id?: string;
precision?: number;
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
onStep?: (value: number, info: { offset: number; type: 'up' | 'down' }) => void;
}
const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) => {
const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
@ -80,8 +59,8 @@ const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) =>
);
});
InputNumber.defaultProps = {
step: 1,
};
export default InputNumber;
export default InputNumber as (<T extends ValueType = ValueType>(
props: React.PropsWithChildren<InputNumberProps<T>> & {
ref?: React.Ref<HTMLInputElement>;
},
) => React.ReactElement) & { displayName?: string };

View File

@ -32,6 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
| readOnly | 只读 | boolean | false | - |
| size | 输入框大小 | `large` \| `middle` \| `small` | - | - |
| step | 每次改变步数,可以为小数 | number \| string | 1 | - |
| stringMode | 字符值模式,开启后支持高精度小数。同时 `onChange` 将返回 string 类型 | boolean | false | 4.13.0 |
| value | 当前值 | number | - | - |
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
| onPressEnter | 按下回车的回调 | function(e) | - | - |
@ -43,3 +44,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
## FAQ
### 为何受控模式下,`value` 可以超出 `min``max` 范围?
在受控模式下,开发者可能自行存储相关数据。如果组件将数据约束回范围内,会导致展示数据与实际存储数据不一致的情况。这使得一些如表单场景存在潜在的数据问题。
### 为何动态修改 `min``max``value` 超出范围不会触发 `onChange` 事件?
`onChange` 事件为用户触发事件,自行触发会导致表单库误以为变更来自用户操作。我们以错误样式展示超出范围的数值。

View File

@ -197,6 +197,13 @@
&-borderless {
box-shadow: none;
}
// ===================== Out Of Range =====================
&-out-of-range {
input {
color: @error-color;
}
}
}
@import './rtl';

View File

@ -360,6 +360,7 @@ Array [
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -386,6 +387,7 @@ Array [
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -416,12 +418,8 @@ Array [
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
@ -1748,6 +1746,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -1774,6 +1773,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
@ -1804,12 +1804,8 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="9007199254740991"
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
max="9007199254740991"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""

View File

@ -311,6 +311,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -373,8 +374,6 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="1"
autocomplete="off"
class="ant-input-number-input"
max="20"
min="1"
role="spinbutton"
step="1"
value="1"
@ -428,6 +427,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
@ -490,8 +490,6 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="0"
autocomplete="off"
class="ant-input-number-input"
max="1"
min="0"
role="spinbutton"
step="0.01"
value="0.00"

View File

@ -126,7 +126,7 @@
"rc-dropdown": "~3.2.0",
"rc-field-form": "~1.19.0",
"rc-image": "~5.2.0",
"rc-input-number": "~6.2.0",
"rc-input-number": "~7.0.0-alpha.4",
"rc-mentions": "~1.5.0",
"rc-menu": "~8.10.0",
"rc-motion": "^2.4.0",
@ -148,7 +148,7 @@
"rc-tree-select": "~4.3.0",
"rc-trigger": "^5.2.1",
"rc-upload": "~3.3.4",
"rc-util": "^5.7.0",
"rc-util": "^5.8.1",
"scroll-into-view-if-needed": "^2.2.25",
"warning": "^4.0.3"
},

View File

@ -34,8 +34,6 @@ declare module 'rc-tabs*';
declare module 'rc-tree/lib/util';
declare module 'rc-input-number';
declare module 'rc-collapse';
declare module 'rc-dialog';