mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
merge feature into master
This commit is contained in:
afc163
commit
ba7fa15058
@ -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=""
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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=""
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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,
|
||||
);
|
||||
```
|
||||
|
||||
@ -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);
|
||||
```
|
||||
|
||||
38
components/input-number/demo/out-of-range.md
Normal file
38
components/input-number/demo/out-of-range.md
Normal 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);
|
||||
```
|
||||
@ -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.
|
||||
|
||||
@ -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 };
|
||||
|
||||
@ -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` 事件为用户触发事件，自行触发会导致表单库误以为变更来自用户操作。我们以错误样式展示超出范围的数值。
|
||||
|
||||
@ -197,6 +197,13 @@
|
||||
&-borderless {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// ===================== Out Of Range =====================
|
||||
&-out-of-range {
|
||||
input {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -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=""
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -216,7 +216,7 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list ant-transfer-list-with-footer"
|
||||
class="ant-transfer-list"
|
||||
style="width:250px;height:300px"
|
||||
>
|
||||
<div
|
||||
@ -352,19 +352,6 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-footer"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-sm"
|
||||
style="float:right;margin:5px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
reload
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -558,3 +558,31 @@ describe('immutable data', () => {
|
||||
expect(wrapper).toMatchRenderedSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('footer render source and target', () => {
|
||||
// https://github.com/ant-design/ant-design/issues/28082
|
||||
it('currently render footer', () => {
|
||||
const differentFooter = () => ({
|
||||
source: (
|
||||
<Button size="small" className="sourceFooter">
|
||||
reload
|
||||
</Button>
|
||||
),
|
||||
target: (
|
||||
<Button size="small" className="targetFooter">
|
||||
reload
|
||||
</Button>
|
||||
),
|
||||
});
|
||||
const defaultFooter = () => (
|
||||
<Button size="small" className="defaultFooter">
|
||||
reload
|
||||
</Button>
|
||||
);
|
||||
const wrapper = mount(<Transfer footer={differentFooter} />);
|
||||
const wrapper2 = mount(<Transfer footer={defaultFooter} />);
|
||||
expect(wrapper.exists('.sourceFooter')).toEqual(true);
|
||||
expect(wrapper.exists('.targetFooter')).toEqual(true);
|
||||
expect(wrapper2.exists('.defaultFooter')).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
@ -50,11 +50,13 @@ class App extends React.Component {
|
||||
this.setState({ targetKeys });
|
||||
};
|
||||
|
||||
renderFooter = () => (
|
||||
<Button size="small" style={{ float: 'right', margin: 5 }} onClick={this.getMock}>
|
||||
reload
|
||||
</Button>
|
||||
);
|
||||
renderFooter = () => ({
|
||||
source: (
|
||||
<Button size="small" style={{ float: 'right', margin: 5 }} onClick={this.getMock}>
|
||||
reload
|
||||
</Button>
|
||||
),
|
||||
});
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
@ -24,7 +24,7 @@ One or more elements can be selected from either column, one click on the proper
|
||||
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop | [RecordType extends TransferItem = TransferItem](https://git.io/vMM64)\[] | \[] | |
|
||||
| disabled | Whether disabled transfer | boolean | false | |
|
||||
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | - | |
|
||||
| footer | A function used for rendering the footer | (props) => ReactNode | - | |
|
||||
| footer | A function used for rendering the footer | (props) => ReactNode \| { source: ReactNode, target: ReactNode } | - | { source: ReactNode, target: ReactNode }: 4.12.3 |
|
||||
| listStyle | A custom CSS style used for rendering the transfer columns | object \| ({direction: `left` \| `right`}) => object | - | |
|
||||
| locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` } | |
|
||||
| oneWay | Display as single direction style | boolean | false | 4.3.0 |
|
||||
|
||||
@ -58,7 +58,6 @@ export interface TransferLocale {
|
||||
removeAll: string;
|
||||
removeCurrent: string;
|
||||
}
|
||||
|
||||
export interface TransferProps<RecordType> {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
@ -77,7 +76,14 @@ export interface TransferProps<RecordType> {
|
||||
showSearch?: boolean;
|
||||
filterOption?: (inputValue: string, item: RecordType) => boolean;
|
||||
locale?: Partial<TransferLocale>;
|
||||
footer?: (props: TransferListProps<RecordType>) => React.ReactNode;
|
||||
footer?: (
|
||||
props: TransferListProps<RecordType>,
|
||||
) =>
|
||||
| React.ReactNode
|
||||
| {
|
||||
source?: React.ReactNode;
|
||||
target?: React.ReactNode;
|
||||
};
|
||||
rowKey?: (record: RecordType) => string;
|
||||
onSearch?: (direction: TransferDirection, value: string) => void;
|
||||
onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
|
||||
|
||||
@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
|
||||
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外 | [RecordType extends TransferItem = TransferItem](https://git.io/vMM64)\[] | \[] | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | (inputValue, option): boolean | - | |
|
||||
| footer | 底部渲染函数 | (props) => ReactNode | - | |
|
||||
| footer | 底部渲染函数 | (props) => ReactNode \| { source: ReactNode, target: ReactNode } | - | { source: ReactNode, target: ReactNode }: 4.12.3 |
|
||||
| listStyle | 两个穿梭框的自定义样式 | object\|({direction: `left` \| `right`}) => object | - | |
|
||||
| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` } | |
|
||||
| oneWay | 展示为单向样式 | boolean | false | 4.3.0 |
|
||||
|
||||
@ -39,7 +39,10 @@ export interface RenderedItem<RecordType> {
|
||||
}
|
||||
|
||||
type RenderListFunction<T> = (props: TransferListBodyProps<T>) => React.ReactNode;
|
||||
|
||||
type FooterRender = {
|
||||
source?: React.ReactNode;
|
||||
target?: React.ReactNode;
|
||||
};
|
||||
export interface TransferListProps<RecordType> extends TransferLocale {
|
||||
prefixCls: string;
|
||||
titleText: React.ReactNode;
|
||||
@ -59,7 +62,7 @@ export interface TransferListProps<RecordType> extends TransferLocale {
|
||||
itemUnit: string;
|
||||
itemsUnit: string;
|
||||
renderList?: RenderListFunction<RecordType>;
|
||||
footer?: (props: TransferListProps<RecordType>) => React.ReactNode;
|
||||
footer?: (props: TransferListProps<RecordType>) => React.ReactNode | FooterRender;
|
||||
onScroll: (e: React.UIEvent<HTMLUListElement>) => void;
|
||||
disabled?: boolean;
|
||||
direction: TransferDirection;
|
||||
@ -312,10 +315,27 @@ export default class TransferList<
|
||||
showSelectAll,
|
||||
showRemove,
|
||||
pagination,
|
||||
direction,
|
||||
} = this.props;
|
||||
|
||||
// Custom Layout
|
||||
const footerDom = footer && footer(this.props);
|
||||
// Distinguish different footer
|
||||
const tempDom = footer && footer(this.props);
|
||||
let footerDom;
|
||||
function isFooterRender(obj: any): obj is FooterRender {
|
||||
return obj.source || obj.target;
|
||||
}
|
||||
if (tempDom) {
|
||||
if (isFooterRender(tempDom)) {
|
||||
if (direction === 'left') {
|
||||
footerDom = tempDom.source;
|
||||
} else {
|
||||
footerDom = tempDom.target;
|
||||
}
|
||||
} else {
|
||||
footerDom = tempDom;
|
||||
}
|
||||
}
|
||||
|
||||
const listCls = classNames(prefixCls, {
|
||||
[`${prefixCls}-with-pagination`]: pagination,
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
"rc-dropdown": "~3.2.0",
|
||||
"rc-field-form": "~1.19.0",
|
||||
"rc-image": "~5.2.3",
|
||||
"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"
|
||||
},
|
||||
|
||||
2
typings/custom-typings.d.ts
vendored
2
typings/custom-typings.d.ts
vendored
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user