Merge 5c056b5 into 7ce6e2a

react-component · Aug 19, 2019 · 362c8e9 · 362c8e9
2 parents 7ce6e2a + 5c056b5
commit 362c8e9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 52 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,11 @@
 # History
 ----
 
+## 4.5.0
+
+- Fix React lifecycle warning.
+- Add `onPressEnter`.
+
 ## 4.4.0
 
 - `onChange` will return `null` instead `undefined` when it is empty.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input-number",
-  "version": "4.4.5",
+  "version": "4.5.0",
   "description": "React input-number component",
   "keywords": [
     "react",

diff --git a/src/index.js b/src/index.js
@@ -103,63 +103,64 @@ export default class InputNumber extends React.Component {
     } else {
       value = props.defaultValue;
     }
-    this.state = {};
-
-    value = this.toNumber(value);
-    value = this.getValidValue(value);
-
     this.state = {
-      inputValue: this.toPrecisionAsStep(value),
-      value,
       focused: props.autoFocus,
     };
+    const validValue = this.getValidValue(this.toNumber(value));
+    this.state = {
+      ...this.state,
+      inputValue: this.toPrecisionAsStep(validValue),
+      value: validValue,
+    };
   }
 
   componentDidMount() {
     this.componentDidUpdate();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if ('value' in nextProps && nextProps.value !== this.props.value) {
-      const value = this.state.focused
-        ? nextProps.value : this.getValidValue(nextProps.value, nextProps.min, nextProps.max);
-      let nextInputValue;
-      if (this.pressingUpOrDown) {
-        nextInputValue = value;
-      } else if (this.inputting) {
-        nextInputValue = this.rawInput;
-      } else {
-        nextInputValue = this.toPrecisionAsStep(value);
+  componentDidUpdate(prevProps) {
+    const { value, onChange, max, min } = this.props;
+    const { focused } = this.state;
+
+    // Don't trigger in componentDidMount
+    if (prevProps) {
+      if (prevProps.value !== value) {
+        const validValue = focused ? value : this.getValidValue(value);
+        let nextInputValue;
+        if (this.pressingUpOrDown) {
+          nextInputValue = validValue;
+        } else if (this.inputting) {
+          nextInputValue = this.rawInput;
+        } else {
+          nextInputValue = this.toPrecisionAsStep(validValue);
+        }
+        this.setState({ // eslint-disable-line
+          value: validValue,
+          inputValue: nextInputValue,
+        });
       }
-      this.setState({
-        value,
-        inputValue: nextInputValue,
-      });
-    }
-
-    // Trigger onChange when max or min change
-    // https://github.com/ant-design/ant-design/issues/11574
-    const nextValue = 'value' in nextProps ? nextProps.value : this.state.value;
-    const { onChange, max, min } = this.props;
-    // ref: null < 20 === true
-    // https://github.com/ant-design/ant-design/issues/14277
-    if ('max' in nextProps &&
-      nextProps.max !== max &&
-      typeof nextValue === 'number' &&
-      nextValue > nextProps.max &&
-      onChange) {
-      onChange(nextProps.max);
-    }
-    if ('min' in nextProps &&
-      nextProps.min !== min &&
-      typeof nextValue === 'number' &&
-      nextValue < nextProps.min &&
-      onChange) {
-      onChange(nextProps.min);
-    }
-  }
-
-  componentDidUpdate() {
+
+      // Trigger onChange when max or min change
+      // https://github.com/ant-design/ant-design/issues/11574
+      const nextValue = 'value' in this.props ? value : this.state.value;
+      // ref: null < 20 === true
+      // https://github.com/ant-design/ant-design/issues/14277
+      if ('max' in this.props &&
+        prevProps.max !== max &&
+        typeof nextValue === 'number' &&
+        nextValue > max &&
+        onChange) {
+        onChange(max);
+      }
+      if ('min' in this.props &&
+        prevProps.min !== min &&
+        typeof nextValue === 'number' &&
+        nextValue < min &&
+        onChange) {
+        onChange(min);
+      }
+    }
+
     // Restore cursor
     try {
       // Firefox set the input cursor after it get focused.
@@ -553,15 +554,15 @@ export default class InputNumber extends React.Component {
   }
 
   toNumber(num) {
-    const focused = this.state ? this.state.focused : this.props.autoFocus;
+    const { precision } = this.props;
+    const { focused } = this.state;
     // num.length > 16 => This is to prevent input of large numbers
     const numberIsTooLarge = num && num.length > 16 && focused;
     if (this.isNotCompleteNumber(num) || numberIsTooLarge) {
       return num;
     }
-    if (isValidProps(this.props.precision)) {
-      return Math.round(num * Math.pow(10, this.props.precision)) /
-             Math.pow(10, this.props.precision);
+    if (isValidProps(precision)) {
+      return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
     }
     return Number(num);
   }