Convert NullField and NumberField to functional components (rjsf-team#3030)

heath-freenome · web-flow · commit 1d79bee8f3d3 · 2022-08-21T17:43:49.000-07:00
- Added or updated `jest.config.js` files to all themes that add `moduleNameMapper` for `react` and `react-dom` to avoid hooks issues
- Updated `NullField` and `NumberField` to be stateless functional components
diff --git a/packages/antd/jest.config.js b/packages/antd/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
+  },
+};
diff --git a/packages/bootstrap-4/jest.config.js b/packages/bootstrap-4/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
+  },
+};
diff --git a/packages/chakra-ui/jest.config.js b/packages/chakra-ui/jest.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
+  },
   snapshotSerializers: ["@emotion/jest/serializer"],
   testEnvironment: "jsdom",
   testEnvironmentOptions: {
diff --git a/packages/core/jest.config.js b/packages/core/jest.config.js
@@ -1,5 +1,9 @@
 module.exports = {
-    verbose: true,
-    setupFilesAfterEnv: ["./test/setup-jsdom.js"],
-    testMatch: ["**/test/**/*_test.js"]
-  };
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
+  },
+  verbose: true,
+  setupFilesAfterEnv: ["./test/setup-jsdom.js"],
+  testMatch: ["**/test/**/*_test.js"]
+};
diff --git a/packages/core/src/components/fields/NullField.tsx b/packages/core/src/components/fields/NullField.tsx
@@ -1,27 +1,20 @@
-import { Component } from "react";
+import { useEffect } from "react";
 import { FieldProps } from "@rjsf/utils";
 
 /** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
  * also set to null if it has no value.
  *
  * @param props - The `FieldProps` for this template
  */
-class NullField<T = any, F = any> extends Component<FieldProps<T, F>> {
-  /** React lifecycle method is called after a component mounts. Will convert an undefined formData to a null via the
-   * onChange callback
-   */
-  componentDidMount() {
-    const { formData, onChange } = this.props;
+function NullField<T = any, F = any>(props: FieldProps<T, F>) {
+  const { formData, onChange } = props;
+  useEffect(() => {
     if (formData === undefined) {
       onChange(null as unknown as T);
     }
-  }
+  }, []);
 
-  /** Renders null for the null field
-   */
-  render() {
-    return null;
-  }
+  return null;
 }
 
 export default NullField;
diff --git a/packages/core/src/components/fields/NumberField.tsx b/packages/core/src/components/fields/NumberField.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import { asNumber, FieldProps } from "@rjsf/utils";
 
 // Matches a string that ends in a . character, optionally followed by a sequence of
@@ -13,10 +13,6 @@ const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
 // different matchers.
 const trailingCharMatcher = /[0.]0*$/;
 
-type NumberFieldState = {
-  lastValue: any;
-};
-
 /**
  * The NumberField class has some special handling for dealing with trailing
  * decimal points and/or zeroes. This logic is designed to allow trailing values
@@ -34,30 +30,20 @@ type NumberFieldState = {
  *    value cached in the state. If it matches the cached value, the cached
  *    value is passed to the input instead of the formData value
  */
-class NumberField<T = any, F = any> extends Component<
-  FieldProps<T, F>,
-  NumberFieldState
-> {
-  /** Constructs the `NumberField` from the `props`
-   *
-   * @param props - The `FieldProps` for this component
-   */
-  constructor(props: FieldProps<T, F>) {
-    super(props);
+function NumberField<T = any, F = any>(props: FieldProps<T, F>) {
+  const { registry, onChange, formData, value: initialValue } = props;
+  const [lastValue, setLastValue] = useState(initialValue);
+  const { StringField } = registry.fields;
 
-    this.state = {
-      lastValue: props.value,
-    };
-  }
+  let value = formData;
 
   /** Handle the change from the `StringField` to properly convert to a number
    *
    * @param value - The current value for the change occurring
    */
-  handleChange = (value: any) => {
-    const { onChange } = this.props;
+  const handleChange = (value: FieldProps<T, F>["value"]) => {
     // Cache the original value in component state
-    this.setState({ lastValue: value });
+    setLastValue(value);
 
     // Normalize decimals that don't start with a zero character in advance so
     // that the rest of the normalization logic is simpler
@@ -76,32 +62,20 @@ class NumberField<T = any, F = any> extends Component<
     onChange(processed as unknown as T);
   };
 
-  /** Renders the `NumberField` dealing with resolving the `lastValue` and current `value`
-   */
-  render() {
-    const { StringField } = this.props.registry.fields;
-    const { formData, ...props } = this.props;
-    const { lastValue } = this.state;
+  if (typeof lastValue === "string" && typeof value === "number") {
+    // Construct a regular expression that checks for a string that consists
+    // of the formData value suffixed with zero or one '.' characters and zero
+    // or more '0' characters
+    const re = new RegExp(`${value}`.replace(".", "\\.") + "\\.?0*$");
 
-    let value = formData;
-
-    if (typeof lastValue === "string" && typeof value === "number") {
-      // Construct a regular expression that checks for a string that consists
-      // of the formData value suffixed with zero or one '.' characters and zero
-      // or more '0' characters
-      const re = new RegExp(`${value}`.replace(".", "\\.") + "\\.?0*$");
-
-      // If the cached "lastValue" is a match, use that instead of the formData
-      // value to prevent the input value from changing in the UI
-      if (lastValue.match(re)) {
-        value = lastValue as unknown as T; // Need to cast
-      }
+    // If the cached "lastValue" is a match, use that instead of the formData
+    // value to prevent the input value from changing in the UI
+    if (lastValue.match(re)) {
+      value = lastValue as unknown as T;
     }
-
-    return (
-      <StringField {...props} formData={value} onChange={this.handleChange} />
-    );
   }
+
+  return <StringField {...props} formData={value} onChange={handleChange} />;
 }
 
 export default NumberField;
diff --git a/packages/fluent-ui/jest.config.js b/packages/fluent-ui/jest.config.js
@@ -1,6 +1,8 @@
 module.exports = {
   moduleNameMapper: {
-    'office-ui-fabric-react/lib/': 'office-ui-fabric-react/lib-commonjs/'
+    "office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/",
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
   },
   testEnvironment: "jsdom",
   testEnvironmentOptions: {
diff --git a/packages/material-ui/jest.config.js b/packages/material-ui/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
+  },
+};
diff --git a/packages/mui/jest.config.js b/packages/mui/jest.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
+  },
   snapshotSerializers: ["@emotion/jest/serializer"],
   testEnvironment: "jsdom",
   testEnvironmentOptions: {
diff --git a/packages/semantic-ui/jest.config.js b/packages/semantic-ui/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react-dom$": "<rootDir>/node_modules/react-dom",
+  },
+};
