Working on render functions

Author: oddevan

components/molecules/Form/Form.js

@@ -7,14 +7,14 @@ import cn from 'classnames'
 /**
  * Render Form component.
  *
- * @param {object}        props                  The component attributes as props.
- * @param {Element}       props.children         Form children elements.
- * @param {string}        props.className        Form wrapper class.
- * @param {object}        props.formDefaults     Formik default data.
- * @param {string|number} props.id               Form id.
- * @param {object}        props.validationSchema Yup validation schema object.
- * @param {Function}      props.onSubmit         Function to execute when form is submitted
- * @return {Element}                             The Form component.
+ * @param {object}           props                  The component attributes as props.
+ * @param {Element|Function} props.children         Form children elements.
+ * @param {string}           props.className        Form wrapper class.
+ * @param {object}           props.formDefaults     Formik default data.
+ * @param {string|number}    props.id               Form id.
+ * @param {object}           props.validationSchema Yup validation schema object.
+ * @param {Function}         props.onSubmit         Function to execute when form is submitted
+ * @return {Element}                                The Form component.
  */
 export default function Form({
   children,
@@ -24,22 +24,29 @@ export default function Form({
   validationSchema,
   onSubmit
 }) {
+  let formattedChildren = children
+  if ('function' !== typeof children) {
+    formattedChildren = () => children
+  }
+
   return (
     <Formik
       initialValues={formDefaults}
       validationSchema={validationSchema}
       onSubmit={onSubmit}
     >
-      <FormikForm id={id} className={cn(styles.form, className)}>
-        {children}
-        <button type="submit">Submit</button>
-      </FormikForm>
+      {(formikProps) => (
+        <FormikForm id={id} className={cn(styles.form, className)}>
+          {formattedChildren(formikProps)}
+          <button type="submit">Submit</button>
+        </FormikForm>
+      )}
     </Formik>
   )
 }
 
 Form.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.object,
   className: PropTypes.string,
   formDefaults: PropTypes.object,
   id: PropTypes.string,

components/molecules/GravityForm/Fields/File.js

@@ -14,17 +14,25 @@ import cn from 'classnames'
  * @param {string|number} props.id            GravityForm field id.
  * @param {boolean}       props.isRequired    GravityForm field is required.
  * @param {string}        props.label         GravityForm field label.
- * @param {Array}         props.selectChoices GravityForm field selection options.
- * @param {boolean}       props.visibility    GravityForm field visibility.
- * @return {Element}                          The Select component.
+ * @param {boolean}       props.visibility    GravityForm visibility option.
+ * @param {Function}      props.setFieldValue Formik function to set state.
+ * @return {Element}                          The File component.
  */
-export default function File({className, description, id, isRequired, label}) {
+export default function File({
+  className,
+  description,
+  id,
+  isRequired,
+  label,
+  visibility,
+  setFieldValue
+}) {
   const fieldId = getGfFieldId(id)
-
-  // const [upload, setUpload] = useState([])
+  const isHiddenClass = getGfHiddenClassName(visibility)
+  const thisClassName = cn(className, isHiddenClass)
 
   return (
-    <div className={cn(styles.text, className)}>
+    <div className={cn(styles.text, thisClassName)}>
       {label && (
         <label htmlFor={id} required={isRequired}>
           {label}
@@ -36,25 +44,10 @@ export default function File({className, description, id, isRequired, label}) {
         name={fieldId}
         required={isRequired}
         type="file"
-        render={({field, form}) => (
-            <input
-              {...field}
-              type="file"
-              onChange={e => {
-                form.setFieldValue(fieldId, e.currentTarget.files[0])
-              }}
-            />
-          )}
-      />
-      {/* <input
-        id={fieldId}
-        name={fieldId}
-        type="file"
-        onChange={(event) => {
-          setFieldValue(fieldId, event.currentTarget.files[0])
+        onChange={(e) => {
+          setFieldValue(fieldId, e.currentTarget.files[0])
         }}
-        required={isRequired}
-      /> */}
+      />
       {description && <p>{description}</p>}
       <InputError name={id} />
     </div>
@@ -68,5 +61,6 @@ File.propTypes = {
   isRequired: PropTypes.bool,
   label: PropTypes.string,
   selectChoices: PropTypes.arrayOf(PropTypes.object),
-  visibility: PropTypes.string
+  visibility: PropTypes.string,
+  setFieldValue: PropTypes.func
 }

components/molecules/GravityForm/GravityForm.js

@@ -31,10 +31,14 @@ export default function GravityForm({
       formDefaults={fieldDefaults}
       id={formId && `gform-${formId}`}
       validationSchema={formValidationSchema}
-      onSubmit={(values, actions) => console.log({values, actions})}
+      // onSubmit={(values, actions) => console.log({values, actions})}
     >
-      {title && <h2 className={styles.title}>{title}</h2>}
-      {fieldData && <Fields fields={fieldData} />}
+      {(formikProps) => (
+        <>
+          {title && <h2 className={styles.title}>{title}</h2>}
+          {fieldData && <Fields fields={fieldData} formikProps={formikProps} />}
+        </>
+      )}
     </Form>
   )
 }