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}