mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
4077ffb58c
* Enhanced InputNumber props with HTMLInputElement attributes. It is possibile to use additional props supported by the inner input element: ``` const inputEl = <InputNumber autoFocus /> ``` Before this commit the type checker did not recognize the `autoFocus` prop. Some attributes must be omitted because they conflict with props defined on `InputNumberProps` interface * Renamed type Probably they conflicts with a reserved name? @see https://travis-ci.org/ant-design/ant-design/jobs/381668406 > components/input-number/index.tsx(9,93): error TS4022: 'extends' clause of exported interface 'InputNumberProps' has or is using private name 'OmitAttributes'. * Replace InputNumber onKeyDown typing with the typed one. Extending HTMLInputElement attributes the `onKeyDown` props now have a better typing. For example before this commit accessing to the event `key` attribute resulted in a type error. @see https://reactjs.org/docs/events.html#keyboard-events * Exporting type OmitAttrs on InputNumber component. This is an attempt to solve the ci error: > components/input-number/index.tsx(9,93): error TS4022: 'extends' clause of exported > interface 'InputNumberProps' has or is using private name 'OmitAttrs'. @see https://travis-ci.org/ant-design/ant-design/jobs/381678316
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
import RcInputNumber from 'rc-input-number';
|
|
|
|
import { Omit } from '../_util/type';
|
|
|
|
// omitting this attrs because they conflicts with the ones defined in InputNumberProps
|
|
export type OmitAttrs = 'defaultValue' | 'onChange' | 'size';
|
|
|
|
export interface InputNumberProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, OmitAttrs> {
|
|
prefixCls?: string;
|
|
min?: number;
|
|
max?: number;
|
|
value?: number;
|
|
step?: number | string;
|
|
defaultValue?: number;
|
|
tabIndex?: number;
|
|
onChange?: (value: number | string | undefined) => void;
|
|
disabled?: boolean;
|
|
size?: 'large' | 'small' | 'default';
|
|
formatter?: (value: number | string | undefined) => string;
|
|
parser?: (displayValue: string | undefined) => number;
|
|
placeholder?: string;
|
|
style?: React.CSSProperties;
|
|
className?: string;
|
|
name?: string;
|
|
id?: string;
|
|
precision?: number;
|
|
}
|
|
|
|
export default class InputNumber extends React.Component<InputNumberProps, any> {
|
|
static defaultProps = {
|
|
prefixCls: 'ant-input-number',
|
|
step: 1,
|
|
};
|
|
|
|
private inputNumberRef: any;
|
|
|
|
render() {
|
|
const { className, size, ...others } = this.props;
|
|
const inputNumberClass = classNames({
|
|
[`${this.props.prefixCls}-lg`]: size === 'large',
|
|
[`${this.props.prefixCls}-sm`]: size === 'small',
|
|
}, className);
|
|
|
|
return <RcInputNumber ref={(c: any) => this.inputNumberRef = c} className={inputNumberClass} {...others} />;
|
|
}
|
|
|
|
focus() {
|
|
this.inputNumberRef.focus();
|
|
}
|
|
|
|
blur() {
|
|
this.inputNumberRef.blur();
|
|
}
|
|
}
|