抽个 NumberInput 组件

src/components/NumberInput.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+// @ts-ignore
+import InputNumber from 'rc-input-number';
+import {ThemeProps, themeable} from '../theme';
+
+export interface NumberProps extends ThemeProps {
+  placeholder?: string;
+  max?: number;
+  min?: number;
+  step?: number;
+  precision?: number;
+  disabled?: boolean;
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+export class NumberInput extends React.Component<NumberProps, any> {
+  static defaultProps = {
+    step: 1
+  };
+
+  render(): JSX.Element {
+    const {
+      className,
+      classPrefix: ns,
+      classnames: cx,
+      value,
+      step,
+      precision,
+      max,
+      min,
+      disabled,
+      placeholder
+    } = this.props;
+
+    let precisionProps: any = {};
+
+    if (typeof precision === 'number') {
+      precisionProps.precision = precision;
+    }
+
+    return (
+      <InputNumber
+        className={cx(className)}
+        prefixCls={`${ns}Number`}
+        value={value}
+        step={step}
+        max={max}
+        min={min}
+        onChange={onchange}
+        disabled={disabled}
+        placeholder={placeholder}
+        {...precisionProps}
+      />
+    );
+  }
+}
+
+export default themeable(NumberInput);

src/components/index.tsx

@@ -50,6 +50,7 @@ import InputBox from './InputBox';
 import ListRadios from './ListRadios';
 import TreeRadios from './TreeRadios';
 import ListGroup from './ListGroup';
+import NumberInput from './NumberInput';
 
 export {
   NotFound,
@@ -102,5 +103,6 @@ export {
   InputBox,
   ListRadios,
   TreeRadios,
-  ListGroup
+  ListGroup,
+  NumberInput
 };

src/renderers/Form/Number.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import {FormItem, FormControlProps} from './Item';
 import cx from 'classnames';
-// @ts-ignore
-import InputNumber from 'rc-input-number';
 import {filter} from '../../utils/tpl';
+import NumberInput from '../../components/NumberInput';
 
 export interface NumberProps extends FormControlProps {
   placeholder?: string;
@@ -60,8 +59,7 @@ export default class NumberControl extends React.Component<NumberProps, any> {
 
     return (
       <div className={cx(`${ns}NumberControl`, className)}>
-        <InputNumber
-          prefixCls={`${ns}Number`}
+        <NumberInput
           value={value}
           step={step}
           max={this.filterNum(max)}
@@ -69,7 +67,7 @@ export default class NumberControl extends React.Component<NumberProps, any> {
           onChange={this.handleChange}
           disabled={disabled}
           placeholder={placeholder}
-          {...precisionProps}
+          precision={precision}
         />
       </div>
     );