feat(Input):增强数字Input输入框功能 (#747)

Author: nullptr-z

packages/react-input/README.md

@@ -28,6 +28,26 @@ const Demo = () => (
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+### 数字输入框
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { InputNumber } from 'uiw';
+
+const Demo = () => (
+  <div>
+    <InputNumber
+      placeholder="请输入内容"
+      style={{ maxWidth: 200 }}
+      min={1}
+      max={10}
+    />
+  </div>
+);
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ### Form 中使用 Input
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
@@ -69,6 +89,13 @@ const Demo = () => (
         validator: (value = '') => value.length < 4 ? '必填选项！' : null,
         children: <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />,
       },
+      inputNumber: {
+        value: 'www',
+        label: '请输入内容',
+        help: '必须长度超过 3 个字符！',
+        validator: (value = '') => value.length < 4 ? '必填选项！' : null,
+        children: <InputNumber placeholder="请输入内容" style={{ maxWidth: 200 }} />,
+      },
     }}
   >
     {({ fields, state, canSubmit }) => {
@@ -77,6 +104,9 @@ const Demo = () => (
           <Row>
             <Col>{fields.input}</Col>
           </Row>
+          <Row>
+            <Col>{fields.inputNumber}</Col>
+          </Row>
           <Row>
             <Col>
               <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
@@ -386,4 +416,11 @@ ReactDOM.render(<Demo />, _mount_);
 | disabled | 禁用输入框 | Boolean | `false` |
 | preIcon | 输入框`前`面放置图标  | String/ReactNode | - |
 | addonAfter | 	带标签的 input，设置后置标签 | String/ReactNode | - |
-| size | 指定输入框的尺寸，除了默认的大小外，还提供了 `large`、`small` 和 `default` 三种尺寸。 | String | - |
+| size | 指定输入框的尺寸，除了默认的大小外，还提供了 `large`、`small` 和 `default` 三种尺寸。 | String | - |
+
+## InputNumber
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------- |-------- |--------- |-------- |-------- |
+| min | 最小值 | Number | - | v4.18.2 |
+| max | 最大值 | Number | - | v4.18.2 |

packages/react-input/src/InputNumber.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import Input, { InputProps } from './';
+
+interface InputNumberProps extends InputProps {
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export default React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
+  const { min, max, ...inputProps } = props;
+
+  const [value, valueSet] = useState(props.value || 0);
+
+  const onChange = (v: React.ChangeEvent<HTMLInputElement>) => {
+    const parseValue = Number.parseInt(v.target.value);
+    if (typeof min === 'number' && parseValue < min) return;
+    if (typeof max === 'number' && parseValue > max) return;
+
+    valueSet(v.target.value);
+    props.onChange?.(v);
+  };
+
+  return <Input {...inputProps} value={value} onChange={onChange} type="number" />;
+});

packages/react-input/src/index.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useImperativeHandle } from 'react';
 import Icon, { IconProps } from '@uiw/react-icon';
 import { IProps, HTMLInputProps } from '@uiw/utils';
 import './style/input.less';
+export * from './InputNumber';
+export { default as InputNumber } from './InputNumber';
 
 export interface InputProps extends IProps, Omit<HTMLInputProps, 'size'> {
   preIcon?: IconProps['type'];

website/src/routes/components/input/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Divider, Input, Form, Notify, Button, Tag, Row, Col } from 'uiw';
+import { Divider, Input, InputNumber, Form, Notify, Button, Tag, Row, Col } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default function Page() {
   return (
     <Markdown
       path="https://github.com/uiwjs/uiw/tree/master/packages/react-input/README.md"
-      dependencies={{ Divider, Input, Form, Notify, Button, Tag, Row, Col }}
+      dependencies={{ Divider, Input, InputNumber, Form, Notify, Button, Tag, Row, Col }}
       renderPage={async () => {
         const md = await import('uiw/node_modules/@uiw/react-input/README.md');
         return md.default || md;