From 735e94e1bd1f0b27f4c3349e6b6d9531eacad034 Mon Sep 17 00:00:00 2001
From: Felix Henninger <mailbox@felixhenninger.com>
Date: Tue, 11 Aug 2020 14:47:20 +0200
Subject: [PATCH] Refactor form array into its own module

---
 packages/builder/src/components/Form/array.js | 41 ++++++++++++++++++
 packages/builder/src/components/Form/table.js | 42 +------------------
 2 files changed, 43 insertions(+), 40 deletions(-)
 create mode 100644 packages/builder/src/components/Form/array.js

diff --git a/packages/builder/src/components/Form/array.js b/packages/builder/src/components/Form/array.js
new file mode 100644
index 000000000..5ea62acfc
--- /dev/null
+++ b/packages/builder/src/components/Form/array.js
@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react'
+
+import { FieldArray, useFormikContext, getIn } from 'formik'
+
+export const FormArray = ({
+  name, item: Item,
+  header: Header, footer: Footer,
+  wrapper: Wrapper=Fragment,
+  wrapperProps,
+  bodyWrapper: BodyWrapper=Fragment,
+  defaultItem={},
+}) => {
+  const { values }  = useFormikContext()
+  const rows = getIn(values, name)
+
+  return (
+    <FieldArray name={ name }>
+      {
+        arrayHelpers => <Wrapper { ...wrapperProps }>
+          { Header && <Header name={ name } /> }
+          <BodyWrapper>
+            {
+              (rows || []).map(
+                (data, index) =>
+                  <Item
+                    key={ `${ name }[${ index }]` }
+                    name={ `${ name }[${ index }]` }
+                    index={ index }
+                    isLastItem={ index === rows.length - 1 }
+                    data={ data }
+                    arrayHelpers={ arrayHelpers }
+                  />
+              )
+            }
+          </BodyWrapper>
+          { Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } /> }
+        </Wrapper>
+      }
+    </FieldArray>
+  )
+}
diff --git a/packages/builder/src/components/Form/table.js b/packages/builder/src/components/Form/table.js
index 6ce63dfa9..1012ee84d 100644
--- a/packages/builder/src/components/Form/table.js
+++ b/packages/builder/src/components/Form/table.js
@@ -1,48 +1,10 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
-import { FieldArray, useFormikContext, getIn } from 'formik'
 import { Button } from 'reactstrap'
 
 import Icon from '../Icon'
 import './table.css'
-
-const FormArray = ({
-  name, item: Item,
-  header: Header, footer: Footer,
-  wrapper: Wrapper=Fragment,
-  wrapperProps,
-  bodyWrapper: BodyWrapper=Fragment,
-  defaultItem={},
-}) => {
-  const { values }  = useFormikContext()
-  const rows = getIn(values, name)
-
-  return (
-    <FieldArray name={ name }>
-      {
-        arrayHelpers => <Wrapper { ...wrapperProps }>
-          { Header && <Header name={ name } /> }
-          <BodyWrapper>
-            {
-              (rows || []).map(
-                (data, index) =>
-                  <Item
-                    key={ `${ name }[${ index }]` }
-                    name={ `${ name }[${ index }]` }
-                    index={ index }
-                    isLastItem={ index === rows.length - 1 }
-                    data={ data }
-                    arrayHelpers={ arrayHelpers }
-                  />
-              )
-            }
-          </BodyWrapper>
-          { Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } /> }
-        </Wrapper>
-      }
-    </FieldArray>
-  )
-}
+import { FormArray } from './array'
 
 export const ButtonCell = ({ icon, onClick, style, disabled=false, type }) => {
   const Wrapper = type ?? 'td'