diff --git a/packages/react-input/README.md b/packages/react-input/README.md
index 42dde2b2ba..a223fe7941 100644
--- a/packages/react-input/README.md
+++ b/packages/react-input/README.md
@@ -35,16 +35,48 @@ ReactDOM.render(, _mount_);
import ReactDOM from 'react-dom';
import { InputNumber } from 'uiw';
-const Demo = () => (
-
-
-
-);
+const Demo = () => {
+
+ return(
+
+
+
+
+
+ 限制大小
+
+
+
+ 超出限界警告
+
+
+
+ 设置步涨值
+
+
+
+
+
+ )
+};
ReactDOM.render(, _mount_);
```
@@ -410,17 +442,23 @@ ReactDOM.render(, _mount_);
## Input
-| 参数 | 说明 | 类型 | 默认值 |
-|--------- |-------- |--------- |-------- |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------- |-------- |--------- |-------- |-------- |
| value | 绑定值 | String | - |
| disabled | 禁用输入框 | Boolean | `false` |
| preIcon | 输入框`前`面放置图标 | String/ReactNode | - |
| addonAfter | 带标签的 input,设置后置标签 | String/ReactNode | - |
| size | 指定输入框的尺寸,除了默认的大小外,还提供了 `large`、`small` 和 `default` 三种尺寸。 | String | - |
+| inputStyle | 传递给input的样式,在需要动态设置样式场景下使用 | Object | - | v4.18.2 |
## InputNumber
+在v4.18.2中增加
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|--------- |-------- |--------- |-------- |-------- |
-| min | 最小值 | Number | - | v4.18.2 |
-| max | 最大值 | Number | - | v4.18.2 |
+| min | 最小值 | Number | - |
+| max | 最大值 | Number | - |
+| step | 设置步长值 | Number | - |
+| overLimitColor | 允许超出`min`,`max`限制, 使用该警告色显示 | String | - |
+
+更多属性文档请参考 Input。
diff --git a/packages/react-input/src/InputNumber.tsx b/packages/react-input/src/InputNumber.tsx
index 6e3f87568c..974382bb56 100644
--- a/packages/react-input/src/InputNumber.tsx
+++ b/packages/react-input/src/InputNumber.tsx
@@ -1,25 +1,61 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
import Input, { InputProps } from './';
interface InputNumberProps extends InputProps {
min?: number;
max?: number;
step?: number;
+ overLimitColor?: string;
+ formatter?: (value: number) => string;
+ parser?: (value: number) => number;
+ keyboard?: boolean;
}
export default React.forwardRef((props, ref) => {
- const { min, max, ...inputProps } = props;
+ const {
+ className,
+ min,
+ max,
+ step,
+ overLimitColor,
+ keyboard = false,
+ formatter,
+ prefixCls = 'w-input-number',
+ ...otherProps
+ } = props;
- const [value, valueSet] = useState(props.value || 0);
+ const value = useMemo(() => Number.parseFloat((props.value || 0)?.toString()), [props.value]);
+ const [isOverLimit, isOverLimitSet] = useState(overLimitComp(value));
+
+ function overLimitComp(value: number) {
+ if (typeof min === 'number' && value < min) return true;
+ if (typeof max === 'number' && value > max) return true;
+ return false;
+ }
const onChange = (v: React.ChangeEvent) => {
- const parseValue = Number.parseInt(v.target.value);
- if (typeof min === 'number' && parseValue < min) return;
- if (typeof max === 'number' && parseValue > max) return;
+ const isOverLimit = overLimitComp(Number.parseFloat(v.target.value));
+ isOverLimitSet(isOverLimit);
- valueSet(v.target.value);
props.onChange?.(v);
};
- return ;
+ const overLimitProps = useMemo(() => {
+ if (!overLimitColor) return { min, max };
+ }, []);
+
+ const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
+ const inputStyle = useMemo(() => (isOverLimit ? { color: overLimitColor?.toString() } : undefined), [isOverLimit]);
+
+ return (
+
+ );
});
diff --git a/packages/react-input/src/index.tsx b/packages/react-input/src/index.tsx
index d415115917..273ea82707 100644
--- a/packages/react-input/src/index.tsx
+++ b/packages/react-input/src/index.tsx
@@ -9,6 +9,7 @@ export interface InputProps extends IProps, Omit {
preIcon?: IconProps['type'];
addonAfter?: React.ReactNode;
size?: 'large' | 'default' | 'small';
+ inputStyle?: React.CSSProperties;
}
export default React.forwardRef((props, ref) => {
@@ -20,6 +21,7 @@ export default React.forwardRef((props, ref) => {
type = 'text',
preIcon = null,
addonAfter,
+ inputStyle,
...otherProps
} = props;
const inputRef = React.useRef(null);
@@ -51,7 +53,14 @@ export default React.forwardRef((props, ref) => {
return (
-
+
{addonAfter && (
{addonAfter}