style: hidden handler when inputnumber readonly (#25998)

This commit is contained in:
xrkffgg 2020-08-04 10:42:08 +08:00 committed by GitHub
parent 98050358f1
commit 2626d5eb90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 1 deletions

View File

@ -18,6 +18,7 @@ When a numeric value needs to be provided.
| autoFocus | If get focus when component mounted | boolean | false |
| defaultValue | The initial value | number | - |
| disabled | If disable the input | boolean | false |
| readOnly | If readonly the input | boolean | false |
| 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) |
| 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) |

View File

@ -22,6 +22,7 @@ export interface InputNumberProps
tabIndex?: number;
onChange?: (value: number | string | undefined) => void;
disabled?: boolean;
readOnly?: boolean;
size?: SizeType;
formatter?: (value: number | string | undefined) => string;
parser?: (displayValue: string | undefined) => number | string;
@ -37,7 +38,13 @@ export interface InputNumberProps
const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) => {
const renderInputNumber = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
const { className, size: customizeSize, prefixCls: customizePrefixCls, ...others } = props;
const {
className,
size: customizeSize,
prefixCls: customizePrefixCls,
readOnly,
...others
} = props;
const prefixCls = getPrefixCls('input-number', customizePrefixCls);
const upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
const downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
@ -51,6 +58,7 @@ const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) =>
[`${prefixCls}-lg`]: mergeSize === 'large',
[`${prefixCls}-sm`]: mergeSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-readonly`]: readOnly,
},
className,
);
@ -62,6 +70,7 @@ const InputNumber = React.forwardRef<unknown, InputNumberProps>((props, ref) =>
upHandler={upIcon}
downHandler={downIcon}
prefixCls={prefixCls}
readOnly={readOnly}
{...others}
/>
);

View File

@ -21,6 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
| autoFocus | 自动获取焦点 | boolean | false |
| defaultValue | 初始值 | number | - |
| disabled | 禁用 | boolean | false |
| readOnly | 只读 | boolean | false |
| 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) |
| min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) |

View File

@ -72,6 +72,12 @@
}
}
&-readonly {
.@{input-number-prefix-cls}-handler-wrap {
display: none;
}
}
&-input {
width: 100%;
height: @input-height-base - 2px;