refactor: replace defaultProps with JavaScript default parameters (#9464)

This change in specific to React components and
React@18 version.

Refs #9456

src/core/components/app.jsx

@@ -1,21 +1,24 @@
+/**
+ * @prettier
+ */
 import React from "react"
 import PropTypes from "prop-types"
 
-export default class App extends React.Component {
+class App extends React.Component {
-
   getLayout() {
-    let { getComponent, layoutSelectors } = this.props
+    const { getComponent, layoutSelectors } = this.props
     const layoutName = layoutSelectors.current()
     const Component = getComponent(layoutName, true)
-    return Component ? Component : ()=> <h1> No layout defined for &quot;{layoutName}&quot; </h1>
+
+    return Component
+      ? Component
+      : () => <h1> No layout defined for &quot;{layoutName}&quot; </h1>
   }
 
   render() {
     const Layout = this.getLayout()
 
-    return (
+    return <Layout />
-      <Layout/>
-    )
   }
 }
 
@@ -24,5 +27,4 @@ App.propTypes = {
   layoutSelectors: PropTypes.object.isRequired,
 }
 
-App.defaultProps = {
+export default App
-}

src/core/plugins/oas31/components/model/model.jsx

@@ -20,7 +20,8 @@ const getModelName = (uri) => {
   return null
 }
 
-const Model = forwardRef(({ schema, getComponent, onToggle }, ref) => {
+const Model = forwardRef(
+  ({ schema, getComponent, onToggle = () => {} }, ref) => {
     const JSONSchema202012 = getComponent("JSONSchema202012")
     const name = getModelName(schema.get("$$ref"))
 
@@ -39,35 +40,13 @@ const Model = forwardRef(({ schema, getComponent, onToggle }, ref) => {
         onExpand={handleExpand}
       />
     )
-})
+  }
+)
 
 Model.propTypes = {
   schema: ImPropTypes.map.isRequired,
   getComponent: PropTypes.func.isRequired,
-  getConfigs: PropTypes.func.isRequired,
-  specSelectors: PropTypes.object.isRequired,
-  specPath: ImPropTypes.list.isRequired,
-  name: PropTypes.string,
-  displayName: PropTypes.string,
-  isRef: PropTypes.bool,
-  required: PropTypes.bool,
-  expandDepth: PropTypes.number,
-  depth: PropTypes.number,
-  includeReadOnly: PropTypes.bool,
-  includeWriteOnly: PropTypes.bool,
   onToggle: PropTypes.func,
 }
 
-Model.defaultProps = {
-  name: "",
-  displayName: "",
-  isRef: false,
-  required: false,
-  expandDepth: 0,
-  depth: 1,
-  includeReadOnly: false,
-  includeWriteOnly: false,
-  onToggle: () => {},
-}
-
 export default Model

src/core/plugins/safe-render/components/error-boundary.jsx

@@ -5,6 +5,25 @@ import { componentDidCatch } from "../fn"
 import Fallback from "./fallback"
 
 export class ErrorBoundary extends Component {
+  static propTypes = {
+    targetName: PropTypes.string,
+    getComponent: PropTypes.func,
+    fn: PropTypes.object,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
+    ])
+  }
+
+  static defaultProps = {
+    targetName: "this component",
+    getComponent: () => Fallback,
+    fn: {
+      componentDidCatch,
+    },
+    children: null,
+  }
+
   static getDerivedStateFromError(error) {
     return { hasError: true, error }
   }
@@ -29,22 +48,5 @@ export class ErrorBoundary extends Component {
     return children
   }
 }
-ErrorBoundary.propTypes = {
-  targetName: PropTypes.string,
-  getComponent: PropTypes.func,
-  fn: PropTypes.object,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ])
-}
-ErrorBoundary.defaultProps = {
-  targetName: "this component",
-  getComponent: () => Fallback,
-  fn: {
-    componentDidCatch,
-  },
-  children: null,
-}
 
 export default ErrorBoundary