revises Group and Repeater to dynamically render nested fields

src/client/components/forms/field-types/Group/index.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Section from '../../../layout/Section';
+import RenderFields from '../../RenderFields';
 
-const Group = ({ label, children }) => {
+const Group = ({ label, fields }) => {
   return (
     <Section
       heading={label}
       className="field-group"
     >
-      {children}
+      <RenderFields fields={fields} />
     </Section>
   );
 };
@@ -18,10 +19,9 @@ Group.defaultProps = {
 };
 
 Group.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
+  fields: PropTypes.arrayOf(
+    PropTypes.shape({}),
+  ).isRequired,
   label: PropTypes.string,
 };
 

src/client/components/forms/field-types/Repeater/index.js

@@ -1,27 +1,29 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Section from '../../../layout/Section';
+import RenderFields from '../../RenderFields';
 
-class Repeater extends Component {
-  constructor(props) {
-    super(props);
-  }
+const Repeater = (props) => {
+  const { label, fields } = props;
 
-  render() {
-    return (
-      <div className="field-repeater">
-        <Section heading={this.props.label}>
-          {this.props.initialValue.map((item, i) =>
-            React.Children.map(this.props.children, child =>
-              React.cloneElement(child, {
-                initialValue: item[child.props.name],
-                name: `${this.props.name}[${i}]${child.props.name}`
-              })
-            )
-          )}
-        </Section>
-      </div>
-    )
-  }
-}
+  return (
+    <div className="field-repeater">
+      <Section heading={label}>
+        <RenderFields fields={fields} />
+      </Section>
+    </div>
+  );
+};
+
+Repeater.defaultProps = {
+  label: '',
+};
+
+Repeater.propTypes = {
+  fields: PropTypes.arrayOf(
+    PropTypes.shape({}),
+  ).isRequired,
+  label: PropTypes.string,
+};
 
 export default Repeater;

src/client/components/forms/field-types/Textarea/index.js

@@ -58,7 +58,7 @@ Textarea.propTypes = {
   className: PropTypes.string,
   style: PropTypes.shape({}),
   error: PropTypes.node,
-  label: PropTypes.string,
+  label: PropTypes.node,
   value: PropTypes.string,
   onChange: PropTypes.func,
   disabled: PropTypes.string,