WIP - reintroduces a method to render custom fields

src/client/components/forms/RenderFields/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 
 import './index.scss';
 
 const RenderFields = ({
-  fieldSchema, initialData, customComponents, fieldTypes, filter,
+  fieldSchema, initialData, customComponentsPath, fieldTypes, filter,
 }) => {
   if (fieldSchema) {
     return (
@@ -12,11 +13,7 @@ const RenderFields = ({
         {fieldSchema.map((field, i) => {
           if (field?.hidden !== 'api' && field?.hidden !== true) {
             if ((filter && typeof filter === 'function' && filter(field)) || !filter) {
-              let FieldComponent = field?.hidden === 'admin' ? fieldTypes.hidden : fieldTypes[field.type];
-
-              if (customComponents?.[field.name]?.field) {
-                FieldComponent = customComponents[field.name].field;
-              }
+              const FieldComponent = field?.hidden === 'admin' ? fieldTypes.hidden : fieldTypes[field.type];
 
               let { defaultValue } = field;
 
@@ -28,11 +25,15 @@ const RenderFields = ({
 
               if (FieldComponent) {
                 return (
-                  <FieldComponent
-                    fieldTypes={fieldTypes}
+                  <RenderCustomComponent
                     key={field.name || `field-${i}`}
-                    {...field}
-                    defaultValue={defaultValue}
+                    path={`${customComponentsPath}${field.name}.field`}
+                    DefaultComponent={FieldComponent}
+                    componentProps={{
+                      ...field,
+                      fieldTypes,
+                      defaultValue,
+                    }}
                   />
                 );
               }
@@ -65,7 +66,7 @@ const RenderFields = ({
 
 RenderFields.defaultProps = {
   initialData: {},
-  customComponents: {},
+  customComponentsPath: '',
   filter: null,
 };
 
@@ -74,7 +75,7 @@ RenderFields.propTypes = {
     PropTypes.shape({}),
   ).isRequired,
   initialData: PropTypes.shape({}),
-  customComponents: PropTypes.shape({}),
+  customComponentsPath: PropTypes.string,
   fieldTypes: PropTypes.shape({
     hidden: PropTypes.func,
   }).isRequired,

src/client/components/utilities/RenderCustomComponent/index.js

@@ -6,20 +6,22 @@ import Loading from '../../elements/Loading';
 const RenderCustomComponent = (props) => {
   const { path, DefaultComponent, componentProps } = props;
 
-  const CustomComponent = path.split('.').reduce((res, prop) => {
-    if (res) {
-      return res[prop];
+  if (path) {
+    const CustomComponent = path.split('.').reduce((res, prop) => {
+      if (res) {
+        return res[prop];
+      }
+
+      return false;
+    }, customComponents);
+
+    if (CustomComponent) {
+      return (
+        <Suspense fallback={<Loading />}>
+          <CustomComponent {...componentProps} />
+        </Suspense>
+      );
     }
-
-    return false;
-  }, customComponents);
-
-  if (CustomComponent) {
-    return (
-      <Suspense fallback={<Loading />}>
-        <CustomComponent {...componentProps} />
-      </Suspense>
-    );
   }
 
   return (
@@ -27,8 +29,12 @@ const RenderCustomComponent = (props) => {
   );
 };
 
+RenderCustomComponent.defaultProps = {
+  path: undefined,
+};
+
 RenderCustomComponent.propTypes = {
-  path: PropTypes.string.isRequired,
+  path: PropTypes.string,
   DefaultComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node,

src/client/components/views/collections/Edit/Default.js

@@ -81,6 +81,7 @@ const DefaultEditView = (props) => {
               fieldTypes={fieldTypes}
               fieldSchema={fields}
               initialData={data}
+              customComponentsPath={`${slug}.fields.`}
             />
           </div>
         </div>
@@ -112,6 +113,7 @@ const DefaultEditView = (props) => {
               fieldTypes={fieldTypes}
               fieldSchema={fields}
               initialData={data}
+              customComponentsPath={`${slug}.fields.`}
             />
           </div>
           {isEditing && (