Skip to content

Commit 6b6bacc

Browse files
tangjinzhoutangjinzhou
committed
feat: update input-number
1 parent 356e60a commit 6b6bacc

File tree

10 files changed

+185
-138
lines changed

10 files changed

+185
-138
lines changed

β€Žbuild/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'input', // dev components
3+
componentName: 'input-number', // dev components
44
},
55
};

β€Žcomponents/_util/BaseMixin.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
// Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), { ...this.$data, ...newState }, true) || {})
2020
// }
2121
Object.assign(this.$data, newState);
22+
this.$forceUpdate();
2223
this.$nextTick(() => {
2324
callback && callback();
2425
});

β€Žcomponents/input-number/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
44
<div>
55
<div class="ant-input-number">
66
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
7-
<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" id="inputNumber" class="ant-input-number-input"></div>
7+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" max="10" min="1" step="1" id="inputNumber" class="ant-input-number-input"></div>
88
</div>
99
ε½“ε‰ε€ΌοΌš3
1010
</div>
@@ -13,15 +13,15 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
1313
exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
1414
<div class="ant-input-number">
1515
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
16-
<div role="spinbutton" aria-valuemin="0" aria-valuemax="10" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="0" step="0.1" class="ant-input-number-input"></div>
16+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="0" aria-valuemax="10" autocomplete="off" max="10" min="0" step="0.1" class="ant-input-number-input"></div>
1717
</div>
1818
`;
1919
2020
exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
2121
<div>
2222
<div class="ant-input-number ant-input-number-disabled">
2323
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
24-
<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" disabled="disabled" max="10" min="1" step="1" class="ant-input-number-input"></div>
24+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" disabled="disabled" max="10" min="1" step="1" class="ant-input-number-input"></div>
2525
</div>
2626
<div style="margin-top: 20px;"><button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button></div>
2727
</div>
@@ -31,11 +31,11 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
3131
<div>
3232
<div class="ant-input-number">
3333
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
34-
<div role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
34+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
3535
</div>
3636
<div class="ant-input-number">
3737
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled" unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
38-
<div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" class="ant-input-number-input-wrap"><input autocomplete="off" max="100" min="0" step="1" class="ant-input-number-input"></div>
38+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" autocomplete="off" max="100" min="0" step="1" class="ant-input-number-input"></div>
3939
</div>
4040
</div>
4141
`;
@@ -44,15 +44,15 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
4444
<div>
4545
<div class="ant-input-number ant-input-number-lg">
4646
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
47-
<div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
47+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
4848
</div>
4949
<div class="ant-input-number">
5050
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
51-
<div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
51+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
5252
</div>
5353
<div class="ant-input-number ant-input-number-sm">
5454
<div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 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"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></span></div>
55-
<div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
55+
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
5656
</div>
5757
</div>
5858
`;

β€Žcomponents/input-number/__tests__/index.test.js

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,29 @@
1+
import { mount } from '@vue/test-utils';
12
import InputNumber from '..';
23
import focusTest from '../../../tests/shared/focusTest';
4+
import mountTest from '../../../tests/shared/mountTest';
35

4-
focusTest(InputNumber);
6+
describe('InputNumber', () => {
7+
focusTest(InputNumber);
8+
mountTest(InputNumber);
9+
10+
// https://github.com/ant-design/ant-design/issues/13896
11+
it('should return null when blur a empty input number', () => {
12+
const onChange = jest.fn();
13+
const wrapper = mount(
14+
{
15+
render() {
16+
return <InputNumber defaultValue="1" onChange={onChange} />;
17+
},
18+
},
19+
{
20+
sync: false,
21+
},
22+
);
23+
wrapper.find('input').element.value = '';
24+
wrapper.find('input').trigger('input');
25+
expect(onChange).toHaveBeenLastCalledWith('');
26+
wrapper.find('input').trigger('blur');
27+
expect(onChange).toHaveBeenLastCalledWith(null);
28+
});
29+
});

β€Žcomponents/input-number/index.en-US.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@
1111
| parser | Specifies the value extracted from formatter | function( string): number | - |
1212
| precision | precision of input value | number | - |
1313
| decimalSeparator | decimal separator | string | - |
14-
| size | width of input box | string | - |
14+
| size | height of input box | string | - |
1515
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
1616
| value(v-model) | current value | number | |
1717

1818
### events
1919

20-
| Events Name | Description | Arguments |
21-
| --- | --- | --- |
22-
| change | The callback triggered when the value is changed. | function(value: number \| string) | |
20+
| Events Name | Description | Arguments | Version |
21+
| --- | --- | --- | --- |
22+
| change | The callback triggered when the value is changed. | function(value: number \| string) | | |
23+
| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | | 1.5.0 |
2324

2425
## Methods
2526

β€Žcomponents/input-number/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const InputNumberProps = {
1212
max: PropTypes.number,
1313
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1414
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
15-
defaultValue: PropTypes.number,
15+
defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1616
tabIndex: PropTypes.number,
1717
disabled: PropTypes.bool,
1818
size: PropTypes.oneOf(['large', 'small', 'default']),

β€Žcomponents/input-number/index.zh-CN.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@
1919

2020
### δΊ‹δ»Ά
2121

22-
| 事仢名称 | 说明 | ε›žθ°ƒε‚ζ•° |
23-
| -------- | -------- | --------------------------------- |
24-
| change | ε˜εŒ–ε›žθ°ƒ | Function(value: number \| string) | |
22+
| 事仢名称 | 说明 | ε›žθ°ƒε‚ζ•° | η‰ˆζœ¬ |
23+
| ---------- | -------------- | --------------------------------- | ---- |
24+
| change | ε˜εŒ–ε›žθ°ƒ | Function(value: number \| string) | |
25+
| pressEnter | ζŒ‰δΈ‹ε›žθ½¦ηš„ε›žθ°ƒ | function(e) | |
2526

2627
## 方法
2728

β€Žcomponents/vc-input-number/demo/combination-key-format.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default {
3737
return (
3838
<div style="margin: 10px;">
3939
<InputNumber
40+
aria-label="Number input example that demonstrates combination key format"
4041
min={-8000}
4142
max={10000000}
4243
value={this.value}

β€Žcomponents/vc-input-number/src/InputHandler.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Touchable from '../../vc-m-feedback';
33
import { getListeners } from '../../_util/props-util';
44

55
const InputHandler = {
6+
name: 'InputHandler',
67
props: {
78
prefixCls: PropTypes.string,
89
disabled: PropTypes.bool,

0 commit comments

Comments
Β (0)