feat: InputNumber support onStep (#27075)

* feat: InputNumber support onStep

* fix test case

* fix dep
This commit is contained in:
偏右 2020-10-10 17:49:50 +08:00 committed by GitHub
parent 5db8813c64
commit 94cab40b04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 35 deletions

View File

@ -19,4 +19,15 @@ describe('InputNumber', () => {
wrapper.find('input').simulate('blur'); wrapper.find('input').simulate('blur');
expect(onChange).toHaveBeenLastCalledWith(null); expect(onChange).toHaveBeenLastCalledWith(null);
}); });
it('should call onStep when press up or down button', () => {
const onStep = jest.fn();
const wrapper = mount(<InputNumber defaultValue={1} onStep={onStep} />);
wrapper.find('.ant-input-number-handler-up').simulate('mousedown');
expect(onStep).toBeCalledTimes(1);
expect(onStep).toHaveBeenLastCalledWith(2, { offset: 1, type: 'up' });
wrapper.find('.ant-input-number-handler-down').simulate('mousedown');
expect(onStep).toBeCalledTimes(2);
expect(onStep).toHaveBeenLastCalledWith(1, { offset: 1, type: 'down' });
});
}); });

View File

@ -13,23 +13,24 @@ When a numeric value needs to be provided.
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| autoFocus | If get focus when component mounted | boolean | false | | autoFocus | If get focus when component mounted | boolean | false | - |
| defaultValue | The initial value | number | - | | defaultValue | The initial value | number | - | - |
| disabled | If disable the input | boolean | false | | disabled | If disable the input | boolean | false | - |
| readOnly | If readonly the input | boolean | false | | readOnly | If readonly the input | boolean | false | - |
| formatter | Specifies the format of the value presented | function(value: number \| string): string | - | | formatter | Specifies the format of the value presented | function(value: number \| string): string | - | - |
| max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | | max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
| min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | | min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
| parser | Specifies the value extracted from formatter | function(string): number | - | | parser | Specifies the value extracted from formatter | function(string): number | - | - |
| precision | The precision of input value | number | - | | precision | The precision of input value | number | - | - |
| decimalSeparator | Decimal separator | string | - | | decimalSeparator | Decimal separator | string | - | - |
| size | The height of input box | `large` \| `middle` \| `small` | - | | 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 | | step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \| string | 1 | - |
| value | The current value | number | - | | value | The current value | number | - | - |
| onChange | The callback triggered when the value is changed | function(value: number \| string) | - | | onChange | The callback triggered when the value is changed | function(value: number \| string) | - | - |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
| onStep | The callback function that is triggered when click up or down buttons | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 |
## Methods ## Methods

View File

@ -34,6 +34,7 @@ export interface InputNumberProps
id?: string; id?: string;
precision?: number; precision?: number;
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>; 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<unknown, InputNumberProps>((props, ref) => {

View File

@ -16,23 +16,24 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
属性如下 属性如下
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false | | autoFocus | 自动获取焦点 | boolean | false | - |
| defaultValue | 初始值 | number | - | | defaultValue | 初始值 | number | - | - |
| disabled | 禁用 | boolean | false | | disabled | 禁用 | boolean | false | - |
| readOnly | 只读 | boolean | false | | readOnly | 只读 | boolean | false | - |
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | | formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | - |
| max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | | max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
| min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | | min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
| parser | 指定从 `formatter` 里转换回数字的方式,和 `formatter` 搭配使用 | function(string): number | - | | parser | 指定从 `formatter` 里转换回数字的方式,和 `formatter` 搭配使用 | function(string): number | - | - |
| precision | 数值精度 | number | - | | precision | 数值精度 | number | - | - |
| decimalSeparator | 小数点 | string | - | | decimalSeparator | 小数点 | string | - | - |
| size | 输入框大小 | `large` \| `middle` \| `small` | - | | size | 输入框大小 | `large` \| `middle` \| `small` | - | - |
| step | 每次改变步数,可以为小数 | number \| string | 1 | | step | 每次改变步数,可以为小数 | number \| string | 1 | - |
| value | 当前值 | number | - | | value | 当前值 | number | - | - |
| onChange | 变化回调 | function(value: number \| string) | - | | onChange | 变化回调 | function(value: number \| string) | - | - |
| onPressEnter | 按下回车的回调 | function(e) | - | | onPressEnter | 按下回车的回调 | function(e) | - | - |
| onStep | 点击上下箭头的回调 | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 |
## 方法 ## 方法

View File

@ -126,7 +126,7 @@
"rc-dropdown": "~3.2.0", "rc-dropdown": "~3.2.0",
"rc-field-form": "~1.12.0", "rc-field-form": "~1.12.0",
"rc-image": "~3.2.1", "rc-image": "~3.2.1",
"rc-input-number": "~6.0.0", "rc-input-number": "~6.1.0",
"rc-mentions": "~1.5.0", "rc-mentions": "~1.5.0",
"rc-menu": "~8.7.1", "rc-menu": "~8.7.1",
"rc-motion": "^2.2.0", "rc-motion": "^2.2.0",